diff --git a/example/app.json b/example/app.json
index f0a0c578..9afa7709 100644
--- a/example/app.json
+++ b/example/app.json
@@ -128,6 +128,21 @@
"intervalMinutes": 15,
"refresh": true
}
+ },
+ {
+ "id": "material_colors",
+ "displayName": "Material Colors Widget",
+ "description": "Compare client-side and server-side rendering with Android dynamic colors",
+ "targetCellWidth": 2,
+ "targetCellHeight": 2,
+ "resizeMode": "horizontal|vertical",
+ "widgetCategory": "home_screen",
+ "initialStatePath": "./widgets/android/android-material-colors-initial.tsx",
+ "serverUpdate": {
+ "url": "http://10.0.2.2:3333",
+ "intervalMinutes": 15,
+ "refresh": true
+ }
}
]
},
diff --git a/example/app/android-widgets/material-colors.tsx b/example/app/android-widgets/material-colors.tsx
new file mode 100644
index 00000000..d5f2d285
--- /dev/null
+++ b/example/app/android-widgets/material-colors.tsx
@@ -0,0 +1,5 @@
+import AndroidMaterialColorsScreen from '~/screens/android/AndroidMaterialColorsScreen'
+
+export default function AndroidMaterialColorsRoute() {
+ return
+}
diff --git a/example/screens/android/AndroidMaterialColorsScreen.tsx b/example/screens/android/AndroidMaterialColorsScreen.tsx
new file mode 100644
index 00000000..dd254487
--- /dev/null
+++ b/example/screens/android/AndroidMaterialColorsScreen.tsx
@@ -0,0 +1,278 @@
+import { useRouter } from 'expo-router'
+import React, { useState } from 'react'
+import { Alert, Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
+import {
+ reloadAndroidWidgets,
+ requestPinAndroidWidget,
+ setWidgetServerCredentials,
+ updateAndroidWidget,
+ VoltraWidgetPreview,
+} from 'voltra/android/client'
+
+import { Button } from '~/components/Button'
+import { Card } from '~/components/Card'
+import {
+ AndroidMaterialColorsWidget,
+ type AndroidMaterialColorsRenderSource,
+} from '~/widgets/android/AndroidMaterialColorsWidget'
+
+const WIDGET_ID = 'material_colors'
+const DEMO_TOKEN = 'demo-token'
+
+const formatRenderTime = () =>
+ new Date().toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ })
+
+export default function AndroidMaterialColorsScreen() {
+ const router = useRouter()
+ const [isPinning, setIsPinning] = useState(false)
+ const [isRenderingClient, setIsRenderingClient] = useState(false)
+ const [isRenderingServer, setIsRenderingServer] = useState(false)
+ const [previewSource, setPreviewSource] = useState('initial')
+ const [previewTimestamp, setPreviewTimestamp] = useState('waiting for render')
+
+ const handlePinWidget = async () => {
+ if (Platform.OS !== 'android') {
+ Alert.alert('Not Available', 'This widget demo is only available on Android devices.')
+ return
+ }
+
+ setIsPinning(true)
+ try {
+ const success = await requestPinAndroidWidget(WIDGET_ID, {
+ previewWidth: 220,
+ previewHeight: 220,
+ })
+
+ if (success) {
+ Alert.alert('Pin requested', 'Add the widget on your home screen, then use the render buttons below.')
+ } else {
+ Alert.alert('Not supported', 'Widget pinning is not available on this device.')
+ }
+ } catch (error: any) {
+ const message = error?.message || String(error)
+ Alert.alert('Error', `Failed to pin widget: ${message}`)
+ } finally {
+ setIsPinning(false)
+ }
+ }
+
+ const handleRenderOnClient = async () => {
+ if (Platform.OS !== 'android') {
+ Alert.alert('Not Available', 'Client-side widget rendering is only available on Android devices.')
+ return
+ }
+
+ setIsRenderingClient(true)
+ try {
+ const renderedAt = formatRenderTime()
+
+ await updateAndroidWidget(WIDGET_ID, [
+ {
+ size: { width: 200, height: 200 },
+ content: ,
+ },
+ {
+ size: { width: 300, height: 200 },
+ content: ,
+ },
+ ])
+
+ setPreviewSource('client')
+ setPreviewTimestamp(renderedAt)
+ Alert.alert(
+ 'Client render complete',
+ 'The widget JSON was rendered inside the app and pushed straight to Android.'
+ )
+ } catch (error: any) {
+ const message = error?.message || String(error)
+ Alert.alert('Error', `Failed to render on client: ${message}`)
+ } finally {
+ setIsRenderingClient(false)
+ }
+ }
+
+ const handleRenderOnServer = async () => {
+ if (Platform.OS !== 'android') {
+ Alert.alert('Not Available', 'Server-side widget rendering is only available on Android devices.')
+ return
+ }
+
+ setIsRenderingServer(true)
+ try {
+ await setWidgetServerCredentials({
+ token: DEMO_TOKEN,
+ headers: {
+ 'X-Widget-Source': 'voltra-example',
+ },
+ })
+
+ await reloadAndroidWidgets([WIDGET_ID])
+
+ setPreviewSource('server')
+ setPreviewTimestamp('server timestamp')
+ Alert.alert(
+ 'Server render requested',
+ 'The widget will fetch fresh JSON from the example server. Make sure `npm run widget:server --workspace voltra-example` is running on your host machine.'
+ )
+ } catch (error: any) {
+ const message = error?.message || String(error)
+ Alert.alert('Error', `Failed to render on server: ${message}`)
+ } finally {
+ setIsRenderingServer(false)
+ }
+ }
+
+ return (
+
+
+ Material Colors Widget
+
+ Test the same Android widget through both render paths. It uses Android semantic color tokens, so both
+ client-side and server-side rendering resolve native Material You colors directly inside Glance.
+
+
+
+ 1. Pin the Widget
+
+ Add the widget to your home screen once, then switch between client-side and server-side renders.
+
+
+
+
+
+
+
+ 2. Choose the Render Path
+
+ Both buttons target the same {WIDGET_ID} widget. Use them to compare how
+ Material dynamic colors flow through the client and server pipelines.
+
+
+
+
+
+
+
+
+ Preview
+
+ This in-app preview mirrors the widget design. The home screen widget is the real test, but this makes it
+ easier to see which render path you triggered last.
+
+
+
+
+
+
+
+
+
+ Server Setup
+ Run the example widget server before using the server render button:
+
+ npm run widget:server --workspace voltra-example
+
+
+ Android emulators use 10.0.2.2 in the widget config, so the built-in
+ server-driven refresh hits your host machine automatically.
+
+
+
+
+
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ scrollView: {
+ flex: 1,
+ },
+ content: {
+ paddingHorizontal: 20,
+ paddingVertical: 24,
+ },
+ heading: {
+ fontSize: 24,
+ fontWeight: '700',
+ color: '#FFFFFF',
+ },
+ subheading: {
+ fontSize: 14,
+ lineHeight: 20,
+ color: '#CBD5F5',
+ marginBottom: 8,
+ },
+ buttonContainer: {
+ marginTop: 16,
+ },
+ actionsRow: {
+ flexDirection: 'row',
+ gap: 12,
+ marginTop: 16,
+ },
+ actionButton: {
+ flex: 1,
+ },
+ previewContainer: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: 24,
+ marginTop: 8,
+ backgroundColor: '#0F172A',
+ borderRadius: 12,
+ },
+ previewFrame: {
+ borderRadius: 28,
+ },
+ code: {
+ fontFamily: 'Courier',
+ fontSize: 12,
+ color: '#60A5FA',
+ backgroundColor: '#0F172A',
+ paddingHorizontal: 4,
+ paddingVertical: 2,
+ borderRadius: 4,
+ },
+ codeBlock: {
+ backgroundColor: '#0F172A',
+ borderRadius: 12,
+ padding: 16,
+ marginTop: 12,
+ },
+ codeText: {
+ color: '#E2E8F0',
+ fontFamily: 'Courier',
+ fontSize: 12,
+ },
+ footer: {
+ marginTop: 24,
+ alignItems: 'center',
+ },
+})
diff --git a/example/screens/android/AndroidScreen.tsx b/example/screens/android/AndroidScreen.tsx
index dd000f32..9a513ab8 100644
--- a/example/screens/android/AndroidScreen.tsx
+++ b/example/screens/android/AndroidScreen.tsx
@@ -48,6 +48,13 @@ const ANDROID_SECTIONS = [
'Serve dynamic widget content from a remote server using Voltra SSR. This example includes a sample widget server implementation.',
route: '/android-widgets/server-driven',
},
+ {
+ id: 'material-colors',
+ title: 'Material Colors',
+ description:
+ 'Test one Android widget through both client-side and server-side rendering, using Material dynamic colors from the current device theme.',
+ route: '/android-widgets/material-colors',
+ },
{
id: 'custom-fonts',
title: 'Custom Fonts',
diff --git a/example/server/widget-server.tsx b/example/server/widget-server.tsx
index fc53f150..e0460a61 100644
--- a/example/server/widget-server.tsx
+++ b/example/server/widget-server.tsx
@@ -11,6 +11,7 @@ import { createServer } from 'node:http'
import React from 'react'
import { createWidgetUpdateNodeHandler } from 'voltra/server'
import { IosPortfolioWidget } from '../widgets/ios/IosPortfolioWidget'
+import { AndroidMaterialColorsServerWidget } from '../widgets/android/AndroidMaterialColorsWidget'
import { AndroidPortfolioWidget } from '../widgets/android/AndroidPortfolioWidget'
const PORTFOLIO_TIMES = [
@@ -47,6 +48,10 @@ function generatePortfolioData() {
const handler = createWidgetUpdateNodeHandler({
renderIos: async (req: any) => {
+ if (req.widgetId !== 'portfolio') {
+ return null
+ }
+
const now = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
const { chartData, change, balance } = generatePortfolioData()
const isPositive = change >= 0
@@ -65,6 +70,22 @@ const handler = createWidgetUpdateNodeHandler({
renderAndroid: async (req: any) => {
const now = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
+
+ if (req.widgetId === 'material_colors') {
+ console.log(`[${now}] [Android] Rendering material colors widget`)
+
+ const content =
+
+ return [
+ { size: { width: 200, height: 200 }, content },
+ { size: { width: 300, height: 200 }, content },
+ ]
+ }
+
+ if (req.widgetId !== 'portfolio') {
+ return null
+ }
+
const { chartData, change, balance } = generatePortfolioData()
const isPositive = change >= 0
const changeText = `${isPositive ? '+' : ''}${change.toFixed(1)}%`
@@ -91,6 +112,8 @@ createServer(handler).listen(PORT, () => {
console.log(`\n Portfolio chart:`)
console.log(` iOS: GET http://localhost:${PORT}?widgetId=portfolio&platform=ios&family=systemSmall`)
console.log(` Android: GET http://10.0.2.2:${PORT}?widgetId=portfolio&platform=android`)
+ console.log(`\n Material colors:`)
+ console.log(` Android: GET http://10.0.2.2:${PORT}?widgetId=material_colors&platform=android`)
console.log(`\n (Android emulator uses 10.0.2.2 to reach the host machine)`)
console.log(`\nEach request generates randomized portfolio data.`)
console.log(`Press Ctrl+C to stop.\n`)
diff --git a/example/widgets/android/AndroidMaterialColorsWidget.tsx b/example/widgets/android/AndroidMaterialColorsWidget.tsx
new file mode 100644
index 00000000..172c6e71
--- /dev/null
+++ b/example/widgets/android/AndroidMaterialColorsWidget.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import { AndroidDynamicColors, VoltraAndroid } from 'voltra/android'
+
+export type AndroidMaterialColorsRenderSource = 'client' | 'server' | 'initial'
+
+type AndroidMaterialColorsWidgetProps = {
+ source: AndroidMaterialColorsRenderSource
+ renderedAt: string
+}
+
+const SOURCE_LABELS: Record = {
+ client: 'Rendered in app',
+ server: 'Rendered on server',
+ initial: 'Initial placeholder',
+}
+
+const Swatch = ({
+ label,
+ backgroundColor,
+ textColor,
+}: {
+ label: string
+ backgroundColor: string
+ textColor: string
+}) => {
+ return (
+
+
+ {label}
+
+
+
+ {backgroundColor.slice(0, 7).toUpperCase()}
+
+
+ )
+}
+
+export const AndroidMaterialColorsWidget = ({ source, renderedAt }: AndroidMaterialColorsWidgetProps) => {
+ const colors = AndroidDynamicColors
+
+ return (
+
+
+
+
+
+ Material You
+
+
+
+ Dynamic Colors
+
+
+
+
+
+ {SOURCE_LABELS[source]}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The widget should match your wallpaper-driven palette.
+
+
+
+ Updated {renderedAt}
+
+
+
+
+
+ )
+}
+
+export const AndroidMaterialColorsServerWidget = ({ renderedAt }: { renderedAt: string }) => {
+ return
+}
diff --git a/example/widgets/android/android-material-colors-initial.tsx b/example/widgets/android/android-material-colors-initial.tsx
new file mode 100644
index 00000000..57cce5f9
--- /dev/null
+++ b/example/widgets/android/android-material-colors-initial.tsx
@@ -0,0 +1,14 @@
+import { AndroidMaterialColorsWidget } from './AndroidMaterialColorsWidget'
+
+const initialState = [
+ {
+ size: { width: 200, height: 200 },
+ content: ,
+ },
+ {
+ size: { width: 300, height: 200 },
+ content: ,
+ },
+]
+
+export default initialState
diff --git a/packages/android-server/package.json b/packages/android-server/package.json
index 50d559b7..f6864261 100644
--- a/packages/android-server/package.json
+++ b/packages/android-server/package.json
@@ -25,6 +25,7 @@
"typecheck": "tsc -p tsconfig.typecheck.json --noEmit"
},
"dependencies": {
+ "@use-voltra/android": "1.3.1",
"@use-voltra/core": "1.3.1",
"@use-voltra/server": "1.3.1"
},
diff --git a/packages/android-server/src/index.ts b/packages/android-server/src/index.ts
index 3b33675a..588380c9 100644
--- a/packages/android-server/src/index.ts
+++ b/packages/android-server/src/index.ts
@@ -12,7 +12,7 @@ import {
createWidgetUpdateHandler,
createWidgetUpdateNodeHandler,
} from '@use-voltra/server'
-import type { ReactNode } from 'react'
+import { createElement, Fragment as ReactFragment, type ReactNode } from 'react'
export type {
WidgetRenderRequest,
@@ -20,6 +20,7 @@ export type {
WidgetUpdateHandler,
WidgetUpdateNodeHandler,
} from '@use-voltra/server'
+export type { AndroidColorValue, AndroidDynamicColorRole, AndroidDynamicColorToken } from '@use-voltra/android'
export type { WidgetPlatform, WidgetTheme } from '@use-voltra/server'
export type AndroidWidgetSize = {
@@ -53,6 +54,8 @@ export type AndroidLiveUpdateVariantsJson = {
export type AndroidLiveUpdateJson = AndroidLiveUpdateVariantsJson
+type AndroidWidgetRenderOptions = Record
+
const ANDROID_COMPONENT_NAME_TO_ID: Record = {
AndroidFilledButton: 0,
AndroidImage: 1,
@@ -122,12 +125,19 @@ export const renderAndroidLiveUpdateToString = (variants: AndroidLiveUpdateVaria
return JSON.stringify(renderAndroidLiveUpdateToJson(variants))
}
-export const renderAndroidWidgetToJson = (variants: AndroidWidgetVariants): Record => {
+export const renderAndroidWidgetToJson = (
+ variants: AndroidWidgetVariants,
+ _options?: AndroidWidgetRenderOptions
+): Record => {
const renderer = createVoltraRenderer(androidComponentRegistry)
for (const { size, content } of variants) {
+ if (content === null || content === undefined) {
+ continue
+ }
+
const key = `${size.width}x${size.height}`
- renderer.addRootNode(key, content)
+ renderer.addRootNode(key, createElement(ReactFragment, null, content))
}
const rendered = renderer.render()
@@ -146,8 +156,11 @@ export const renderAndroidWidgetToJson = (variants: AndroidWidgetVariants): Reco
return rendered
}
-export const renderAndroidWidgetToString = (variants: AndroidWidgetVariants): string => {
- return JSON.stringify(renderAndroidWidgetToJson(variants))
+export const renderAndroidWidgetToString = (
+ variants: AndroidWidgetVariants,
+ options?: AndroidWidgetRenderOptions
+): string => {
+ return JSON.stringify(renderAndroidWidgetToJson(variants, options))
}
export interface AndroidWidgetUpdateHandlerOptions {
@@ -155,7 +168,7 @@ export interface AndroidWidgetUpdateHandlerOptions {
validateToken?: (token: string) => Promise | boolean
}
-function toSharedOptions(options: AndroidWidgetUpdateHandlerOptions) {
+const toSharedOptions = (options: AndroidWidgetUpdateHandlerOptions) => {
return {
validateToken: options.validateToken,
renderAndroid: async (request: WidgetRenderRequest) => {
@@ -165,18 +178,18 @@ function toSharedOptions(options: AndroidWidgetUpdateHandlerOptions) {
}
}
-export function createAndroidWidgetUpdateHandler(options: AndroidWidgetUpdateHandlerOptions): WidgetUpdateHandler {
+export const createAndroidWidgetUpdateHandler = (options: AndroidWidgetUpdateHandlerOptions): WidgetUpdateHandler => {
return createWidgetUpdateHandler(toSharedOptions(options))
}
-export function createAndroidWidgetUpdateNodeHandler(
+export const createAndroidWidgetUpdateNodeHandler = (
options: AndroidWidgetUpdateHandlerOptions
-): WidgetUpdateNodeHandler {
+): WidgetUpdateNodeHandler => {
return createWidgetUpdateNodeHandler(toSharedOptions(options))
}
-export function createAndroidWidgetUpdateExpressHandler(
+export const createAndroidWidgetUpdateExpressHandler = (
options: AndroidWidgetUpdateHandlerOptions
-): WidgetUpdateExpressHandler {
+): WidgetUpdateExpressHandler => {
return createWidgetUpdateExpressHandler(toSharedOptions(options))
}
diff --git a/packages/android-server/tsconfig.base.json b/packages/android-server/tsconfig.base.json
index aae39635..e8edd987 100644
--- a/packages/android-server/tsconfig.base.json
+++ b/packages/android-server/tsconfig.base.json
@@ -4,6 +4,9 @@
"lib": ["ES2020", "DOM"],
"rootDir": "./src",
"moduleResolution": "node",
+ "paths": {
+ "@use-voltra/android/internal": ["../android/build/types/internal.d.ts"]
+ },
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
diff --git a/packages/android-server/tsconfig.typecheck.json b/packages/android-server/tsconfig.typecheck.json
index f1b7e2fb..d5d9364f 100644
--- a/packages/android-server/tsconfig.typecheck.json
+++ b/packages/android-server/tsconfig.typecheck.json
@@ -9,6 +9,7 @@
"voltra/*": ["packages/voltra/src/*"],
"@use-voltra/android": ["packages/android/src/index.ts"],
"@use-voltra/android/client": ["packages/android/src/client.ts"],
+ "@use-voltra/android/internal": ["packages/android/src/internal.ts"],
"@use-voltra/android/server": ["packages/android/src/server.ts"],
"@use-voltra/android-server": ["packages/android-server/src/index.ts"],
"@use-voltra/core": ["packages/core/src/index.ts"],
diff --git a/packages/android/package.json b/packages/android/package.json
index 645c5696..3d838fc2 100644
--- a/packages/android/package.json
+++ b/packages/android/package.json
@@ -24,6 +24,12 @@
"import": "./build/esm/server.js",
"default": "./build/esm/server.js"
},
+ "./internal": {
+ "types": "./build/types/internal.d.ts",
+ "require": "./build/cjs/internal.js",
+ "import": "./build/esm/internal.js",
+ "default": "./build/esm/internal.js"
+ },
"./package.json": "./package.json"
},
"files": [
diff --git a/packages/android/src/components/VoltraView.tsx b/packages/android/src/components/VoltraView.tsx
index 14da6ecb..f951b073 100644
--- a/packages/android/src/components/VoltraView.tsx
+++ b/packages/android/src/components/VoltraView.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, useEffect, useMemo } from 'react'
import { StyleProp, ViewStyle } from 'react-native'
import { addVoltraListener, VoltraInteractionEvent } from '../events.js'
-import { androidComponentRegistry, createVoltraRenderer } from '../renderer/renderer.js'
+import { renderAndroidViewToJson } from '../widgets/renderer.js'
const NativeVoltraView = requireNativeView('VoltraModule')
@@ -39,18 +39,7 @@ export function VoltraView({ id, children, style, onInteraction }: VoltraViewPro
// Generate a stable ID if not provided
const viewId = useMemo(() => id || generateViewId(), [id])
- const payload = useMemo(() => {
- const renderer = createVoltraRenderer(androidComponentRegistry)
- renderer.addRootNode('content', children)
- const rendered = renderer.render()
-
- // Move 'content' into 'variants' to match VoltraPayload structure
- const node = rendered.content
- delete rendered.content
- rendered.variants = { content: node }
-
- return JSON.stringify(rendered)
- }, [children])
+ const payload = useMemo(() => JSON.stringify(renderAndroidViewToJson(children)), [children])
// Subscribe to interaction events and filter by this view's ID
useEffect(() => {
diff --git a/packages/android/src/dynamic-colors.ts b/packages/android/src/dynamic-colors.ts
new file mode 100644
index 00000000..2a052834
--- /dev/null
+++ b/packages/android/src/dynamic-colors.ts
@@ -0,0 +1,33 @@
+export const AndroidDynamicColors = {
+ primary: '~p',
+ onPrimary: '~op',
+ primaryContainer: '~pc',
+ onPrimaryContainer: '~opc',
+ secondary: '~s',
+ onSecondary: '~os',
+ secondaryContainer: '~sc',
+ onSecondaryContainer: '~osc',
+ tertiary: '~t',
+ onTertiary: '~ot',
+ tertiaryContainer: '~tc',
+ onTertiaryContainer: '~otc',
+ error: '~e',
+ errorContainer: '~ec',
+ onError: '~oe',
+ onErrorContainer: '~oec',
+ background: '~b',
+ onBackground: '~ob',
+ surface: '~sf',
+ onSurface: '~osf',
+ surfaceVariant: '~sv',
+ onSurfaceVariant: '~osv',
+ outline: '~ol',
+ inverseOnSurface: '~ios',
+ inverseSurface: '~is',
+ inversePrimary: '~ip',
+ widgetBackground: '~wb',
+} as const
+
+export type AndroidDynamicColorRole = keyof typeof AndroidDynamicColors
+export type AndroidDynamicColorToken = (typeof AndroidDynamicColors)[AndroidDynamicColorRole]
+export type AndroidColorValue = string | AndroidDynamicColorToken
diff --git a/packages/android/src/index.ts b/packages/android/src/index.ts
index 0df79118..70dcfee0 100644
--- a/packages/android/src/index.ts
+++ b/packages/android/src/index.ts
@@ -1,5 +1,6 @@
// Android component namespace
export * as VoltraAndroid from './jsx/primitives.js'
+export { AndroidDynamicColors } from './dynamic-colors.js'
// Android types
export type { VoltraAndroidBaseProps } from './jsx/baseProps.js'
@@ -9,6 +10,7 @@ export type {
VoltraAndroidTextStyleProp,
VoltraAndroidViewStyle,
} from './styles/types.js'
+export type { AndroidColorValue, AndroidDynamicColorRole, AndroidDynamicColorToken } from './dynamic-colors.js'
// Component prop types
export type { BoxProps } from './jsx/Box.js'
diff --git a/packages/android/src/internal.ts b/packages/android/src/internal.ts
new file mode 100644
index 00000000..6b10d211
--- /dev/null
+++ b/packages/android/src/internal.ts
@@ -0,0 +1,2 @@
+export { renderAndroidViewToJson, renderAndroidWidgetToJson, renderAndroidWidgetToString } from './widgets/renderer.js'
+export type { AndroidWidgetRenderOptions } from './widgets/renderer.js'
diff --git a/packages/android/src/jsx/AreaMark.tsx b/packages/android/src/jsx/AreaMark.tsx
index 296d285c..41b6e71b 100644
--- a/packages/android/src/jsx/AreaMark.tsx
+++ b/packages/android/src/jsx/AreaMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import { VOLTRA_MARK_TAG } from './BarMark.js'
import type { ChartDataPoint } from './chart-types.js'
export type AreaMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
interpolation?: 'linear' | 'monotone' | 'stepStart' | 'stepEnd' | 'stepCenter' | 'cardinal' | 'catmullRom'
stacking?: 'standard' | 'normalized' | 'unstacked'
}
diff --git a/packages/android/src/jsx/BarMark.tsx b/packages/android/src/jsx/BarMark.tsx
index a35e4f31..c5b7ea42 100644
--- a/packages/android/src/jsx/BarMark.tsx
+++ b/packages/android/src/jsx/BarMark.tsx
@@ -1,12 +1,13 @@
import { createElement } from 'react'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import type { ChartDataPoint } from './chart-types.js'
export const VOLTRA_MARK_TAG = Symbol.for('VOLTRA_MARK_TAG')
export type BarMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
stacking?: 'grouped'
cornerRadius?: number
width?: number
diff --git a/packages/android/src/jsx/LineMark.tsx b/packages/android/src/jsx/LineMark.tsx
index 417549f1..92aa5a24 100644
--- a/packages/android/src/jsx/LineMark.tsx
+++ b/packages/android/src/jsx/LineMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import { VOLTRA_MARK_TAG } from './BarMark.js'
import type { ChartDataPoint } from './chart-types.js'
export type LineMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
interpolation?: 'linear' | 'monotone' | 'stepStart' | 'stepEnd' | 'stepCenter' | 'cardinal' | 'catmullRom'
lineWidth?: number
symbol?: string
diff --git a/packages/android/src/jsx/PointMark.tsx b/packages/android/src/jsx/PointMark.tsx
index c3dfd937..5e600168 100644
--- a/packages/android/src/jsx/PointMark.tsx
+++ b/packages/android/src/jsx/PointMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import { VOLTRA_MARK_TAG } from './BarMark.js'
import type { ChartDataPoint } from './chart-types.js'
export type PointMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
symbol?: string
symbolSize?: number
}
diff --git a/packages/android/src/jsx/RuleMark.tsx b/packages/android/src/jsx/RuleMark.tsx
index 9d2ef2ac..e5ce11d2 100644
--- a/packages/android/src/jsx/RuleMark.tsx
+++ b/packages/android/src/jsx/RuleMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import { VOLTRA_MARK_TAG } from './BarMark.js'
export type RuleMarkProps = {
xValue?: string | number
yValue?: number
- color?: string
+ color?: AndroidColorValue
lineWidth?: number
}
diff --git a/packages/android/src/jsx/SectorMark.tsx b/packages/android/src/jsx/SectorMark.tsx
index bda3c480..c6a165a1 100644
--- a/packages/android/src/jsx/SectorMark.tsx
+++ b/packages/android/src/jsx/SectorMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import { VOLTRA_MARK_TAG } from './BarMark.js'
import type { SectorDataPoint } from './chart-types.js'
export type SectorMarkProps = {
data: SectorDataPoint[]
- color?: string
+ color?: AndroidColorValue
innerRadius?: number
outerRadius?: number
angularInset?: number
diff --git a/packages/android/src/jsx/props/CheckBox.ts b/packages/android/src/jsx/props/CheckBox.ts
index a7dae8dd..3684a057 100644
--- a/packages/android/src/jsx/props/CheckBox.ts
+++ b/packages/android/src/jsx/props/CheckBox.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidTextStyleProp } from '../../styles/types.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
@@ -9,9 +10,9 @@ export type CheckBoxProps = VoltraAndroidBaseProps & {
/** Style for the text */
style?: VoltraAndroidTextStyleProp
/** Color when checked */
- checkedColor?: string
+ checkedColor?: AndroidColorValue
/** Color when unchecked */
- uncheckedColor?: string
+ uncheckedColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/android/src/jsx/props/CircleIconButton.ts b/packages/android/src/jsx/props/CircleIconButton.ts
index b72b3a98..bf215685 100644
--- a/packages/android/src/jsx/props/CircleIconButton.ts
+++ b/packages/android/src/jsx/props/CircleIconButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,7 +10,7 @@ export type CircleIconButtonProps = VoltraAndroidBaseProps & {
/** Content description for accessibility */
contentDescription?: string
/** Background color */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Icon color */
- contentColor?: string
+ contentColor?: AndroidColorValue
}
diff --git a/packages/android/src/jsx/props/CircularProgressIndicator.ts b/packages/android/src/jsx/props/CircularProgressIndicator.ts
index 04b1a4e6..acaa7ef9 100644
--- a/packages/android/src/jsx/props/CircularProgressIndicator.ts
+++ b/packages/android/src/jsx/props/CircularProgressIndicator.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type CircularProgressIndicatorProps = VoltraAndroidBaseProps & {
@@ -8,5 +9,5 @@ export type CircularProgressIndicatorProps = VoltraAndroidBaseProps & {
*/
progress?: number
/** Color for the progress indicator */
- color?: string
+ color?: AndroidColorValue
}
diff --git a/packages/android/src/jsx/props/FilledButton.ts b/packages/android/src/jsx/props/FilledButton.ts
index 6b2581b4..bc9adbe2 100644
--- a/packages/android/src/jsx/props/FilledButton.ts
+++ b/packages/android/src/jsx/props/FilledButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,9 +10,9 @@ export type FilledButtonProps = VoltraAndroidBaseProps & {
/** Icon to display */
icon?: ImageSource
/** Background color */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Content (text/icon) color */
- contentColor?: string
+ contentColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/android/src/jsx/props/Image.ts b/packages/android/src/jsx/props/Image.ts
index cc088b54..da53231c 100644
--- a/packages/android/src/jsx/props/Image.ts
+++ b/packages/android/src/jsx/props/Image.ts
@@ -4,6 +4,7 @@
import type { ReactNode } from 'react'
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type ImageProps = VoltraAndroidBaseProps & {
@@ -18,9 +19,9 @@ export type ImageProps = VoltraAndroidBaseProps & {
/** Opacity (0.0 to 1.0) */
alpha?: number
/** Tint color */
- tintColor?: string
+ tintColor?: AndroidColorValue
/** Background color used when the image is missing */
- fallbackColor?: string
+ fallbackColor?: AndroidColorValue
/** Custom fallback content rendered when the image is missing */
fallback?: ReactNode
}
diff --git a/packages/android/src/jsx/props/LinearProgressIndicator.ts b/packages/android/src/jsx/props/LinearProgressIndicator.ts
index 6b06216e..e1af142d 100644
--- a/packages/android/src/jsx/props/LinearProgressIndicator.ts
+++ b/packages/android/src/jsx/props/LinearProgressIndicator.ts
@@ -1,10 +1,11 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type LinearProgressIndicatorProps = VoltraAndroidBaseProps & {
/** Current progress value (0.0 to 1.0) */
progress?: number
/** Color for the progress indicator */
- color?: string
+ color?: AndroidColorValue
/** Color for the background track */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
}
diff --git a/packages/android/src/jsx/props/OutlineButton.ts b/packages/android/src/jsx/props/OutlineButton.ts
index 9ac5d15c..45cff252 100644
--- a/packages/android/src/jsx/props/OutlineButton.ts
+++ b/packages/android/src/jsx/props/OutlineButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,7 +10,7 @@ export type OutlineButtonProps = VoltraAndroidBaseProps & {
/** Icon to display */
icon?: ImageSource
/** Content (text/icon) color */
- contentColor?: string
+ contentColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/android/src/jsx/props/RadioButton.ts b/packages/android/src/jsx/props/RadioButton.ts
index 80350aa6..81a4b443 100644
--- a/packages/android/src/jsx/props/RadioButton.ts
+++ b/packages/android/src/jsx/props/RadioButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidTextStyleProp } from '../../styles/types.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
@@ -9,9 +10,9 @@ export type RadioButtonProps = VoltraAndroidBaseProps & {
/** Style for the text */
style?: VoltraAndroidTextStyleProp
/** Color when checked */
- checkedColor?: string
+ checkedColor?: AndroidColorValue
/** Color when unchecked */
- uncheckedColor?: string
+ uncheckedColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
/** Whether the radio button is enabled */
diff --git a/packages/android/src/jsx/props/Scaffold.ts b/packages/android/src/jsx/props/Scaffold.ts
index 3107eb95..ecb73631 100644
--- a/packages/android/src/jsx/props/Scaffold.ts
+++ b/packages/android/src/jsx/props/Scaffold.ts
@@ -1,8 +1,9 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type ScaffoldProps = VoltraAndroidBaseProps & {
/** Background color for the scaffold - supports hex, rgb, hsl, and named colors */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Horizontal padding */
horizontalPadding?: number
}
diff --git a/packages/android/src/jsx/props/SquareIconButton.ts b/packages/android/src/jsx/props/SquareIconButton.ts
index deb56027..3ee3ac4e 100644
--- a/packages/android/src/jsx/props/SquareIconButton.ts
+++ b/packages/android/src/jsx/props/SquareIconButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,7 +10,7 @@ export type SquareIconButtonProps = VoltraAndroidBaseProps & {
/** Content description for accessibility */
contentDescription?: string
/** Background color */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Icon color */
- contentColor?: string
+ contentColor?: AndroidColorValue
}
diff --git a/packages/android/src/jsx/props/Switch.ts b/packages/android/src/jsx/props/Switch.ts
index d55b7457..807bb464 100644
--- a/packages/android/src/jsx/props/Switch.ts
+++ b/packages/android/src/jsx/props/Switch.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidTextStyleProp } from '../../styles/types.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
@@ -9,13 +10,13 @@ export type SwitchProps = VoltraAndroidBaseProps & {
/** Style for the text */
style?: VoltraAndroidTextStyleProp
/** Thumb color when checked */
- thumbCheckedColor?: string
+ thumbCheckedColor?: AndroidColorValue
/** Thumb color when unchecked */
- thumbUncheckedColor?: string
+ thumbUncheckedColor?: AndroidColorValue
/** Track color when checked */
- trackCheckedColor?: string
+ trackCheckedColor?: AndroidColorValue
/** Track color when unchecked */
- trackUncheckedColor?: string
+ trackUncheckedColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/android/src/jsx/props/TitleBar.ts b/packages/android/src/jsx/props/TitleBar.ts
index 223b001e..42e0ced1 100644
--- a/packages/android/src/jsx/props/TitleBar.ts
+++ b/packages/android/src/jsx/props/TitleBar.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -7,9 +8,9 @@ export type TitleBarProps = VoltraAndroidBaseProps & {
/** Start icon source */
startIcon: ImageSource
/** Text color - supports hex, rgb, hsl, and named colors */
- textColor?: string
+ textColor?: AndroidColorValue
/** Icon color - supports hex, rgb, hsl, and named colors */
- iconColor?: string
+ iconColor?: AndroidColorValue
/** Font family for the title */
fontFamily?: string
}
diff --git a/packages/android/src/payload/component-ids.ts b/packages/android/src/payload/component-ids.ts
index 5c7b6e97..8d47d5e3 100644
--- a/packages/android/src/payload/component-ids.ts
+++ b/packages/android/src/payload/component-ids.ts
@@ -1,3 +1,4 @@
+/* eslint-disable */
// 🤖 AUTO-GENERATED from data/components.json
// DO NOT EDIT MANUALLY - Changes will be overwritten
// Schema version: 1.0.0
diff --git a/packages/android/src/server.ts b/packages/android/src/server.ts
index f4d614cd..30fc036e 100644
--- a/packages/android/src/server.ts
+++ b/packages/android/src/server.ts
@@ -1,2 +1,3 @@
export { renderAndroidLiveUpdateToString } from './live-update/renderer.js'
export { renderAndroidWidgetToString } from './widgets/renderer.js'
+export type { AndroidColorValue, AndroidDynamicColorRole, AndroidDynamicColorToken } from './dynamic-colors.js'
diff --git a/packages/android/src/styles/types.ts b/packages/android/src/styles/types.ts
index ef068e02..0db9832f 100644
--- a/packages/android/src/styles/types.ts
+++ b/packages/android/src/styles/types.ts
@@ -3,6 +3,8 @@
* These types mirror the supported properties in the Android implementation (Glance).
*/
+import type { AndroidColorValue } from '../dynamic-colors.js'
+
export type StyleProp = T | T[] | null | undefined | false
export type VoltraAndroidViewStyle = {
@@ -61,13 +63,13 @@ export type VoltraAndroidViewStyle = {
zIndex?: number
/** Background color of the component */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Corner radius for the component (requires Android 12+) */
borderRadius?: number
/** Border width (Note: Not yet implemented in Glance) */
borderWidth?: number
/** Border color (Note: Not yet implemented in Glance) */
- borderColor?: string
+ borderColor?: AndroidColorValue
/** Opacity of the component (Note: Not supported in Glance - apply alpha to colors instead) */
opacity?: number
@@ -83,7 +85,7 @@ export type VoltraAndroidViewStyle = {
transform?: ({ rotate: string } | { rotateZ: string } | { scale: number } | { scaleX: number } | { scaleY: number })[]
/** Shadow properties (Note: Not supported in Glance) */
- shadowColor?: string
+ shadowColor?: AndroidColorValue
shadowOffset?: { width: number; height: number }
shadowOpacity?: number
shadowRadius?: number
@@ -94,7 +96,7 @@ export type VoltraAndroidViewStyle = {
export type VoltraAndroidTextStyle = VoltraAndroidViewStyle & {
/** Text color */
- color?: string
+ color?: AndroidColorValue
/** Font size in sp */
fontSize?: number
/** Font weight */
diff --git a/packages/android/src/widgets/renderer.ts b/packages/android/src/widgets/renderer.ts
index b7f2af2e..da9d0b68 100644
--- a/packages/android/src/widgets/renderer.ts
+++ b/packages/android/src/widgets/renderer.ts
@@ -1,3 +1,5 @@
+import { createElement, Fragment as ReactFragment, type ReactNode } from 'react'
+
import { getAndroidComponentId } from '../payload/component-ids.js'
import { ComponentRegistry, createVoltraRenderer } from '../renderer/renderer.js'
import type { AndroidWidgetVariants } from './types.js'
@@ -9,6 +11,8 @@ const androidComponentRegistry: ComponentRegistry = {
getComponentId: (name: string) => getAndroidComponentId(name),
}
+export type AndroidWidgetRenderOptions = Record
+
/**
* Renders Android widget variants to JSON with size breakpoints.
*
@@ -24,13 +28,16 @@ const androidComponentRegistry: ComponentRegistry = {
* "e": [...shared elements...]
* }
*/
-export const renderAndroidWidgetToJson = (variants: AndroidWidgetVariants): Record => {
+export const renderAndroidWidgetToJson = (
+ variants: AndroidWidgetVariants,
+ _options?: AndroidWidgetRenderOptions
+): Record => {
const renderer = createVoltraRenderer(androidComponentRegistry)
// Add each size variant with key format "WIDTHxHEIGHT"
for (const { size, content } of variants) {
const key = `${size.width}x${size.height}`
- renderer.addRootNode(key, content)
+ renderer.addRootNode(key, createElement(ReactFragment, null, content))
}
const rendered = renderer.render()
@@ -55,6 +62,29 @@ export const renderAndroidWidgetToJson = (variants: AndroidWidgetVariants): Reco
/**
* Renders Android widget variants to a JSON string.
*/
-export const renderAndroidWidgetToString = (variants: AndroidWidgetVariants): string => {
- return JSON.stringify(renderAndroidWidgetToJson(variants))
+export const renderAndroidWidgetToString = (
+ variants: AndroidWidgetVariants,
+ options?: AndroidWidgetRenderOptions
+): string => {
+ return JSON.stringify(renderAndroidWidgetToJson(variants, options))
+}
+
+/**
+ * Renders Android JSX to JSON for VoltraView component.
+ */
+export const renderAndroidViewToJson = (
+ children: ReactNode,
+ _options?: AndroidWidgetRenderOptions
+): Record => {
+ const renderer = createVoltraRenderer(androidComponentRegistry)
+
+ renderer.addRootNode('content', createElement(ReactFragment, null, children))
+
+ const rendered = renderer.render()
+ const node = rendered.content
+
+ delete rendered.content
+ rendered.variants = { content: node }
+
+ return rendered
}
diff --git a/packages/core/src/payload/short-names.ts b/packages/core/src/payload/short-names.ts
index 193ddf1a..7beec772 100644
--- a/packages/core/src/payload/short-names.ts
+++ b/packages/core/src/payload/short-names.ts
@@ -1,7 +1,12 @@
+/* eslint-disable */
// 🤖 AUTO-GENERATED from data/components.json
// DO NOT EDIT MANUALLY - Changes will be overwritten
// Schema version: 1.0.0
+/**
+ * Unified mapping from full names to short names
+ * Used for props and style properties
+ */
export const NAME_TO_SHORT: Record = {
absolutePosition: 'ap',
alignItems: 'ai',
@@ -19,6 +24,7 @@ export const NAME_TO_SHORT: Record = {
borderWidth: 'bw',
bottom: 'b',
buttonStyle: 'bs',
+ chartScrollableAxes: 'csa',
checked: 'chk',
clipped: 'clip',
color: 'c',
@@ -161,6 +167,9 @@ export const NAME_TO_SHORT: Record = {
zIndex: 'zi',
}
+/**
+ * Reverse mapping from short names to full names
+ */
export const SHORT_TO_NAME: Record = {
ap: 'absolutePosition',
ai: 'alignItems',
@@ -178,6 +187,7 @@ export const SHORT_TO_NAME: Record = {
bw: 'borderWidth',
b: 'bottom',
bs: 'buttonStyle',
+ csa: 'chartScrollableAxes',
chk: 'checked',
clip: 'clipped',
c: 'color',
@@ -320,10 +330,18 @@ export const SHORT_TO_NAME: Record = {
zi: 'zIndex',
}
+/**
+ * Shorten a name using the unified mapping
+ * Returns the original name if no short form exists
+ */
export function shorten(name: string): string {
return NAME_TO_SHORT[name] ?? name
}
+/**
+ * Expand a short name back to the full name
+ * Returns the original value if no expansion exists
+ */
export function expand(short: string): string {
return SHORT_TO_NAME[short] ?? short
}
diff --git a/packages/ios-server/src/index.ts b/packages/ios-server/src/index.ts
index d3a37cf7..796c1249 100644
--- a/packages/ios-server/src/index.ts
+++ b/packages/ios-server/src/index.ts
@@ -111,7 +111,7 @@ export const renderWidgetToJson = (variants: WidgetVariants): Record)
}
}
diff --git a/packages/ios/src/payload/component-ids.ts b/packages/ios/src/payload/component-ids.ts
index 588dfcda..e7e0fdf7 100644
--- a/packages/ios/src/payload/component-ids.ts
+++ b/packages/ios/src/payload/component-ids.ts
@@ -1,3 +1,4 @@
+/* eslint-disable */
// 🤖 AUTO-GENERATED from data/components.json
// DO NOT EDIT MANUALLY - Changes will be overwritten
// Schema version: 1.0.0
diff --git a/packages/ios/src/widgets/renderer.ts b/packages/ios/src/widgets/renderer.ts
index 32d096d7..7b782c9f 100644
--- a/packages/ios/src/widgets/renderer.ts
+++ b/packages/ios/src/widgets/renderer.ts
@@ -9,7 +9,7 @@ export const renderWidgetToJson = (variants: WidgetVariants): Record WidgetRenderResul
* Contains the widget ID, family, and any auth headers from the request.
*/
export interface WidgetRenderRequest {
+ /** Parsed request URL, including all query parameters. */
+ url: URL
/** The widget ID requesting an update */
widgetId: string
/** The platform the request is coming from */
@@ -180,6 +182,7 @@ export function createWidgetUpdateHandler(options: WidgetUpdateHandlerOptions):
}
const renderRequest: WidgetRenderRequest = {
+ url,
widgetId,
platform,
theme,
diff --git a/packages/voltra/android/src/main/java/voltra/generated/ShortNames.kt b/packages/voltra/android/src/main/java/voltra/generated/ShortNames.kt
index a0a2d72c..0d7ef2e7 100644
--- a/packages/voltra/android/src/main/java/voltra/generated/ShortNames.kt
+++ b/packages/voltra/android/src/main/java/voltra/generated/ShortNames.kt
@@ -31,6 +31,7 @@ object ShortNames {
"bw" to "borderWidth",
"b" to "bottom",
"bs" to "buttonStyle",
+ "csa" to "chartScrollableAxes",
"chk" to "checked",
"clip" to "clipped",
"c" to "color",
diff --git a/packages/voltra/android/src/main/java/voltra/glance/StyleUtils.kt b/packages/voltra/android/src/main/java/voltra/glance/StyleUtils.kt
index 2565fba7..96064236 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/StyleUtils.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/StyleUtils.kt
@@ -15,6 +15,7 @@ data class ResolvedStyle(
val compositeStyle: CompositeStyle?,
)
+@Composable
fun resolveAndApplyStyle(
props: Map?,
sharedStyles: List>?,
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/ButtonRenderers.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/ButtonRenderers.kt
index 467ad9f0..f64a0a76 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/ButtonRenderers.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/ButtonRenderers.kt
@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.glance.ButtonDefaults
import androidx.glance.GlanceModifier
+import androidx.glance.GlanceTheme
import androidx.glance.ImageProvider
import androidx.glance.LocalContext
import androidx.glance.appwidget.components.CircleIconButton
@@ -18,6 +19,7 @@ import voltra.glance.applyClickableIfNeeded
import voltra.glance.resolveAndApplyStyle
import voltra.models.VoltraElement
import voltra.styling.JSColorParser
+import voltra.styling.toColorProvider
private const val TAG = "ButtonRenderers"
private val gson = Gson()
@@ -67,8 +69,8 @@ fun RenderFilledButton(
val fg = JSColorParser.parse(contentColor)
if (bg != null && fg != null) {
ButtonDefaults.buttonColors(
- backgroundColor = ColorProvider(bg),
- contentColor = ColorProvider(fg),
+ backgroundColor = bg.toColorProvider(),
+ contentColor = fg.toColorProvider(),
)
} else {
ButtonDefaults.buttonColors()
@@ -105,7 +107,7 @@ fun RenderOutlineButton(
val contentColorProp = element.p?.get("contentColor") as? String
val contentColor =
if (contentColorProp != null) {
- JSColorParser.parse(contentColorProp)?.let { ColorProvider(it) } ?: ColorProvider(Color.Black)
+ JSColorParser.parse(contentColorProp)?.toColorProvider() ?: ColorProvider(Color.Black)
} else {
ColorProvider(Color.Black)
}
@@ -139,16 +141,16 @@ fun RenderCircleIconButton(
val backgroundColor =
if (backgroundColorProp != null) {
- JSColorParser.parse(backgroundColorProp)?.let { ColorProvider(it) }
+ JSColorParser.parse(backgroundColorProp)?.toColorProvider()
} else {
- androidx.glance.GlanceTheme.colors.background
+ GlanceTheme.colors.background
}
val contentColor =
if (contentColorProp != null) {
- JSColorParser.parse(contentColorProp)?.let { ColorProvider(it) }
+ JSColorParser.parse(contentColorProp)?.toColorProvider()
} else {
- androidx.glance.GlanceTheme.colors.onSurface
+ GlanceTheme.colors.onSurface
}
CircleIconButton(
@@ -158,7 +160,7 @@ fun RenderCircleIconButton(
modifier = computedModifier,
enabled = enabled,
backgroundColor = backgroundColor,
- contentColor = contentColor ?: androidx.glance.GlanceTheme.colors.onSurface,
+ contentColor = contentColor ?: GlanceTheme.colors.onSurface,
)
}
@@ -180,16 +182,16 @@ fun RenderSquareIconButton(
val backgroundColor =
if (backgroundColorProp != null) {
- JSColorParser.parse(backgroundColorProp)?.let { ColorProvider(it) }
+ JSColorParser.parse(backgroundColorProp)?.toColorProvider()
} else {
- androidx.glance.GlanceTheme.colors.primary
+ GlanceTheme.colors.primary
}
val contentColor =
if (contentColorProp != null) {
- JSColorParser.parse(contentColorProp)?.let { ColorProvider(it) }
+ JSColorParser.parse(contentColorProp)?.toColorProvider()
} else {
- androidx.glance.GlanceTheme.colors.onPrimary
+ GlanceTheme.colors.onPrimary
}
SquareIconButton(
@@ -198,8 +200,8 @@ fun RenderSquareIconButton(
onClick = getOnClickAction(LocalContext.current, element.p, context.widgetId, componentId),
modifier = computedModifier,
enabled = enabled,
- backgroundColor = backgroundColor ?: androidx.glance.GlanceTheme.colors.primary,
- contentColor = contentColor ?: androidx.glance.GlanceTheme.colors.onPrimary,
+ backgroundColor = backgroundColor ?: GlanceTheme.colors.primary,
+ contentColor = contentColor ?: GlanceTheme.colors.onPrimary,
)
}
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartBitmapRenderer.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartBitmapRenderer.kt
index 814baede..651f9de0 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartBitmapRenderer.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartBitmapRenderer.kt
@@ -9,6 +9,7 @@ import android.graphics.RectF
import android.util.Log
import androidx.compose.ui.graphics.toArgb
import voltra.styling.JSColorParser
+import voltra.styling.VoltraColorValue
private const val TAG = "ChartBitmapRenderer"
@@ -92,7 +93,10 @@ private fun extractSectorPoints(data: List>?): List {
private fun wireColor(props: Map): Int? {
val colorStr = props["c"] as? String ?: return null
return try {
- JSColorParser.parse(colorStr)?.toArgb()
+ when (val color = JSColorParser.parse(colorStr)) {
+ is VoltraColorValue.Static -> color.color.toArgb()
+ else -> null
+ }
} catch (_: Exception) {
null
}
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartRenderers.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartRenderers.kt
index 4297c732..9b41475d 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartRenderers.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/ChartRenderers.kt
@@ -20,6 +20,8 @@ import voltra.glance.resolveAndApplyStyle
import voltra.models.VoltraElement
import voltra.styling.JSColorParser
import voltra.styling.SizeValue
+import voltra.styling.resolveColor
+import java.util.Locale
private const val TAG = "ChartRenderers"
@@ -49,7 +51,7 @@ fun RenderChart(
return
}
- val marks = parseMarksJson(marksJson)
+ val marks = resolveChartMarksColors(parseMarksJson(marksJson))
if (marks.isEmpty()) {
Log.w(TAG, "Chart element has no valid marks after parsing")
return
@@ -148,24 +150,45 @@ fun RenderChart(
)
}
+@Composable
private fun parseForegroundStyleScale(json: String?): Map? {
if (json.isNullOrEmpty()) return null
- return try {
- val gson = com.google.gson.Gson()
- val type = object : com.google.gson.reflect.TypeToken>>() {}.type
- val pairs: List> = gson.fromJson(json, type)
- val map = mutableMapOf()
- for (pair in pairs) {
- if (pair.size >= 2) {
- val color = JSColorParser.parse(pair[1])
- if (color != null) {
- map[pair[0]] = color.toArgb()
- }
+ val pairs: List> =
+ try {
+ val gson = com.google.gson.Gson()
+ val type = object : com.google.gson.reflect.TypeToken>>() {}.type
+ gson.fromJson(json, type)
+ } catch (e: Exception) {
+ Log.w(TAG, "Failed to parse foregroundStyleScale", e)
+ return null
+ }
+
+ val map = mutableMapOf()
+ for (pair in pairs) {
+ if (pair.size >= 2) {
+ val color = JSColorParser.parse(pair[1])?.resolveColor()
+ if (color != null) {
+ map[pair[0]] = color.toArgb()
}
}
- if (map.isEmpty()) null else map
- } catch (e: Exception) {
- Log.w(TAG, "Failed to parse foregroundStyleScale", e)
- null
}
+
+ return if (map.isEmpty()) null else map
+}
+
+@Composable
+private fun resolveChartMarksColors(marks: List): List =
+ marks.map { mark ->
+ val colorString = mark.props["c"] as? String ?: return@map mark
+ val color = JSColorParser.parse(colorString)?.resolveColor() ?: return@map mark
+ mark.copy(props = mark.props + ("c" to toRgbaHexString(color.toArgb())))
+ }
+
+private fun toRgbaHexString(argb: Int): String {
+ val red = (argb shr 16) and 0xFF
+ val green = (argb shr 8) and 0xFF
+ val blue = argb and 0xFF
+ val alpha = (argb ushr 24) and 0xFF
+
+ return String.format(Locale.US, "#%02x%02x%02x%02x", red, green, blue, alpha)
}
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/ComplexRenderers.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/ComplexRenderers.kt
index 597a79ef..d2b070ec 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/ComplexRenderers.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/ComplexRenderers.kt
@@ -3,12 +3,12 @@ package voltra.glance.renderers
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import androidx.glance.GlanceModifier
+import androidx.glance.GlanceTheme
import androidx.glance.ImageProvider
import androidx.glance.LocalContext
import androidx.glance.appwidget.components.Scaffold
import androidx.glance.appwidget.components.TitleBar
import androidx.glance.text.FontFamily
-import androidx.glance.unit.ColorProvider
import com.google.gson.Gson
import voltra.glance.LocalVoltraRenderContext
import voltra.glance.applyClickableIfNeeded
@@ -17,6 +17,7 @@ import voltra.models.VoltraElement
import voltra.models.VoltraNode
import voltra.payload.ComponentTypeID
import voltra.styling.JSColorParser
+import voltra.styling.toColorProvider
private const val TAG = "ComplexRenderers"
private val gson = Gson()
@@ -45,17 +46,13 @@ fun RenderTitleBar(
val textColor =
element.p?.get("textColor")?.let {
- JSColorParser.parse(it as String)?.let { color ->
- ColorProvider(color)
- }
- } ?: androidx.glance.GlanceTheme.colors.onSurface
+ JSColorParser.parse(it as String)?.toColorProvider()
+ } ?: GlanceTheme.colors.onSurface
val iconColor =
element.p?.get("iconColor")?.let {
- JSColorParser.parse(it as String)?.let { color ->
- ColorProvider(color)
- }
- } ?: androidx.glance.GlanceTheme.colors.onSurface
+ JSColorParser.parse(it as String)?.toColorProvider()
+ } ?: GlanceTheme.colors.onSurface
val fontFamilyString = element.p?.get("fontFamily") as? String
val fontFamily =
@@ -103,10 +100,8 @@ fun RenderScaffold(
val backgroundColor =
element.p?.get("backgroundColor")?.let {
- JSColorParser.parse(it as String)?.let { color ->
- ColorProvider(color)
- }
- } ?: androidx.glance.GlanceTheme.colors.widgetBackground
+ JSColorParser.parse(it as String)?.toColorProvider()
+ } ?: GlanceTheme.colors.widgetBackground
val horizontalPadding = (element.p?.get("horizontalPadding") as? Number)?.toFloat()?.dp ?: 12.dp
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/InputRenderers.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/InputRenderers.kt
index d1ca4f02..ef4b44ab 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/InputRenderers.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/InputRenderers.kt
@@ -15,6 +15,7 @@ import voltra.glance.resolveAndApplyStyle
import voltra.models.VoltraElement
import voltra.styling.JSColorParser
import voltra.styling.StyleConverter
+import voltra.styling.toColorProvider
import voltra.styling.toGlanceTextStyle
@Composable
@@ -54,10 +55,10 @@ fun RenderSwitch(
if (tc != null && tuc != null && trc != null && truc != null) {
SwitchDefaults.colors(
- checkedThumbColor = ColorProvider(tc),
- uncheckedThumbColor = ColorProvider(tuc),
- checkedTrackColor = ColorProvider(trc),
- uncheckedTrackColor = ColorProvider(truc),
+ checkedThumbColor = tc.toColorProvider(),
+ uncheckedThumbColor = tuc.toColorProvider(),
+ checkedTrackColor = trc.toColorProvider(),
+ uncheckedTrackColor = truc.toColorProvider(),
)
} else {
SwitchDefaults.colors()
@@ -109,7 +110,7 @@ fun RenderRadioButton(
val c = JSColorParser.parse(checkedColor)
val uc = JSColorParser.parse(uncheckedColor)
if (c != null && uc != null) {
- RadioButtonDefaults.colors(ColorProvider(c), ColorProvider(uc))
+ RadioButtonDefaults.colors(c.toColorProvider(), uc.toColorProvider())
} else {
RadioButtonDefaults.colors()
}
@@ -160,7 +161,7 @@ fun RenderCheckBox(
val c = JSColorParser.parse(checkedColor)
val uc = JSColorParser.parse(uncheckedColor)
if (c != null && uc != null) {
- CheckboxDefaults.colors(ColorProvider(c), ColorProvider(uc))
+ CheckboxDefaults.colors(c.toColorProvider(), uc.toColorProvider())
} else {
CheckboxDefaults.colors()
}
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/LayoutRenderers.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/LayoutRenderers.kt
index 7152c794..7f4a50e4 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/LayoutRenderers.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/LayoutRenderers.kt
@@ -234,6 +234,7 @@ private fun RowScope.RenderChildWithWeight(child: VoltraNode?) {
}
}
+@Composable
private fun extractWeightFromChild(
child: VoltraNode?,
context: voltra.glance.VoltraRenderContext,
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/ProgressRenderers.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/ProgressRenderers.kt
index 179ec4a5..7506279c 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/ProgressRenderers.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/ProgressRenderers.kt
@@ -5,12 +5,12 @@ import androidx.glance.GlanceModifier
import androidx.glance.appwidget.CircularProgressIndicator
import androidx.glance.appwidget.LinearProgressIndicator
import androidx.glance.appwidget.ProgressIndicatorDefaults
-import androidx.glance.unit.ColorProvider
import voltra.glance.LocalVoltraRenderContext
import voltra.glance.applyClickableIfNeeded
import voltra.glance.resolveAndApplyStyle
import voltra.models.VoltraElement
import voltra.styling.JSColorParser
+import voltra.styling.toColorProvider
@Composable
fun RenderLinearProgress(
@@ -39,7 +39,7 @@ fun RenderLinearProgress(
if (parsedColor !=
null
) {
- ColorProvider(parsedColor)
+ parsedColor.toColorProvider()
} else {
ProgressIndicatorDefaults.IndicatorColorProvider
}
@@ -49,7 +49,7 @@ fun RenderLinearProgress(
if (parsedBgColor !=
null
) {
- ColorProvider(parsedBgColor)
+ parsedBgColor.toColorProvider()
} else {
ProgressIndicatorDefaults.BackgroundColorProvider
}
@@ -95,7 +95,7 @@ fun RenderCircularProgress(
if (parsedCircularColor !=
null
) {
- ColorProvider(parsedCircularColor)
+ parsedCircularColor.toColorProvider()
} else {
ProgressIndicatorDefaults.IndicatorColorProvider
}
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/TextAndImageRenderers.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/TextAndImageRenderers.kt
index 2f96ecba..fdef0017 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/TextAndImageRenderers.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/TextAndImageRenderers.kt
@@ -20,6 +20,9 @@ import voltra.models.VoltraElement
import voltra.models.VoltraNode
import voltra.models.componentProp
import voltra.styling.JSColorParser
+import voltra.styling.VoltraColorValue
+import voltra.styling.resolveColor
+import voltra.styling.toColorProvider
import voltra.styling.toGlanceTextStyle
@Composable
@@ -61,13 +64,17 @@ fun RenderText(
val typeface = loadTypeface(context, textStyle.fontFamily, isBold)
if (typeface != null) {
+ val bitmapTextStyle =
+ textStyle.copy(
+ color = textStyle.color?.let { VoltraColorValue.Static(it.resolveColor(context)) },
+ )
// Use screen width as max constraint
val maxWidthPx = (context.resources.displayMetrics.widthPixels * 0.9f).toInt()
val bitmap =
renderTextBitmap(
context = context,
text = text,
- textStyle = textStyle,
+ textStyle = bitmapTextStyle,
typeface = typeface,
maxWidthPx = maxWidthPx,
)
@@ -119,7 +126,7 @@ fun RenderImage(
val colorFilter =
if (tintColorString != null) {
voltra.styling.JSColorParser.parse(tintColorString)?.let {
- androidx.glance.ColorFilter.tint(androidx.glance.unit.ColorProvider(it))
+ androidx.glance.ColorFilter.tint(it.toColorProvider())
}
} else {
null
diff --git a/packages/voltra/android/src/main/java/voltra/glance/renderers/TextBitmapRenderer.kt b/packages/voltra/android/src/main/java/voltra/glance/renderers/TextBitmapRenderer.kt
index 633bda96..618e505a 100644
--- a/packages/voltra/android/src/main/java/voltra/glance/renderers/TextBitmapRenderer.kt
+++ b/packages/voltra/android/src/main/java/voltra/glance/renderers/TextBitmapRenderer.kt
@@ -14,6 +14,7 @@ import androidx.compose.ui.graphics.toArgb
import voltra.styling.TextAlignment
import voltra.styling.TextDecoration
import voltra.styling.TextStyle
+import voltra.styling.VoltraColorValue
private const val TAG = "TextBitmapRenderer"
@@ -87,7 +88,9 @@ fun renderTextBitmap(
TextPaint(Paint.ANTI_ALIAS_FLAG).apply {
this.typeface = typeface
this.textSize = fontSizePx
- textStyle.color?.let { this.color = it.toArgb() }
+ if (textStyle.color is VoltraColorValue.Static) {
+ this.color = textStyle.color.color.toArgb()
+ }
if (textStyle.letterSpacing.value > 0) {
this.letterSpacing = textStyle.letterSpacing.value / textStyle.fontSize.value
}
diff --git a/packages/voltra/android/src/main/java/voltra/styling/JSColorParser.kt b/packages/voltra/android/src/main/java/voltra/styling/JSColorParser.kt
index 052b15df..fb502595 100644
--- a/packages/voltra/android/src/main/java/voltra/styling/JSColorParser.kt
+++ b/packages/voltra/android/src/main/java/voltra/styling/JSColorParser.kt
@@ -14,33 +14,37 @@ object JSColorParser {
* Parse color value from any format.
* Supports: hex (#RGB, #RRGGBB, #RRGGBBAA), rgb/rgba, hsl/hsla, named colors.
*/
- fun parse(value: Any?): Color? {
+ fun parse(value: Any?): VoltraColorValue? {
val string = value?.toString()?.trim()?.lowercase() ?: return null
if (string.isEmpty()) return null
+ VoltraThemeColorRole.fromToken(string)?.let { role ->
+ return VoltraColorValue.Dynamic(role)
+ }
+
// 1. Hex colors (with or without #)
if (string.startsWith("#")) {
- return parseHex(string)
+ return parseHex(string)?.let { VoltraColorValue.Static(it) }
}
// Check for hex without # prefix (6 or 8 hex digits)
if (isHexColor(string)) {
- return parseHex("#$string")
+ return parseHex("#$string")?.let { VoltraColorValue.Static(it) }
}
// 2. RGB/RGBA
if (string.startsWith("rgb")) {
- return parseRGB(string)
+ return parseRGB(string)?.let { VoltraColorValue.Static(it) }
}
// 3. HSL/HSLA
if (string.startsWith("hsl")) {
- return parseHSL(string)
+ return parseHSL(string)?.let { VoltraColorValue.Static(it) }
}
// 4. Named colors
- return parseNamedColor(string)
+ return parseNamedColor(string)?.let { VoltraColorValue.Static(it) }
}
/**
diff --git a/packages/voltra/android/src/main/java/voltra/styling/JSStyleParser.kt b/packages/voltra/android/src/main/java/voltra/styling/JSStyleParser.kt
index a5af30e3..0dd3595d 100644
--- a/packages/voltra/android/src/main/java/voltra/styling/JSStyleParser.kt
+++ b/packages/voltra/android/src/main/java/voltra/styling/JSStyleParser.kt
@@ -61,7 +61,7 @@ object JSStyleParser {
/**
* Parse color string (delegates to JSColorParser).
*/
- fun color(value: Any?): androidx.compose.ui.graphics.Color? = JSColorParser.parse(value)
+ fun color(value: Any?): VoltraColorValue? = JSColorParser.parse(value)
/**
* Parse edge insets using short property names from JS payload.
diff --git a/packages/voltra/android/src/main/java/voltra/styling/StyleConverter.kt b/packages/voltra/android/src/main/java/voltra/styling/StyleConverter.kt
index 01c0df0a..f6061f64 100644
--- a/packages/voltra/android/src/main/java/voltra/styling/StyleConverter.kt
+++ b/packages/voltra/android/src/main/java/voltra/styling/StyleConverter.kt
@@ -135,7 +135,7 @@ object StyleConverter {
if (borderWidth != null && borderWidth.value > 0) {
val borderColor =
JSStyleParser.color(js["borderColor"])
- ?: androidx.compose.ui.graphics.Color.Transparent
+ ?: VoltraColorValue.Static(androidx.compose.ui.graphics.Color.Transparent)
border = BorderStyle(borderWidth, borderColor)
}
@@ -151,7 +151,7 @@ object StyleConverter {
val finalRadius = shadowRadius ?: 0.dp
val finalOpacity = shadowOpacity ?: 1.0f
val finalOffset = shadowOffset ?: Offset(0.dp, 0.dp)
- val finalColor = shadowColor ?: androidx.compose.ui.graphics.Color.Black
+ val finalColor = shadowColor ?: VoltraColorValue.Static(androidx.compose.ui.graphics.Color.Black)
if (finalOpacity > 0) {
shadow = ShadowStyle(finalRadius, finalColor, finalOpacity, finalOffset)
diff --git a/packages/voltra/android/src/main/java/voltra/styling/StyleModifiers.kt b/packages/voltra/android/src/main/java/voltra/styling/StyleModifiers.kt
index 9d80f55a..01e8c366 100644
--- a/packages/voltra/android/src/main/java/voltra/styling/StyleModifiers.kt
+++ b/packages/voltra/android/src/main/java/voltra/styling/StyleModifiers.kt
@@ -2,6 +2,7 @@ package voltra.styling
import android.os.Build
import android.util.Log
+import androidx.compose.runtime.Composable
import androidx.glance.GlanceModifier
import androidx.glance.appwidget.cornerRadius
import androidx.glance.background
@@ -27,6 +28,7 @@ import androidx.glance.text.TextStyle as GlanceTextStyle
* Usage:
* GlanceModifier.applyStyle(style)
*/
+@Composable
fun GlanceModifier.applyStyle(style: CompositeStyle): GlanceModifier {
var modifier = this
@@ -155,12 +157,13 @@ private fun GlanceModifier.applyLayout(layout: LayoutStyle): GlanceModifier {
* Apply decoration styles to modifier.
* Handles background color, corner radius, and borders.
*/
+@Composable
private fun GlanceModifier.applyDecoration(decoration: DecorationStyle): GlanceModifier {
var modifier = this
// A. Background color
if (decoration.backgroundColor != null) {
- modifier = modifier.background(decoration.backgroundColor)
+ modifier = modifier.background(decoration.backgroundColor.toColorProvider())
}
// B. Corner radius (requires Android 12+/API 31+)
@@ -227,8 +230,10 @@ private fun GlanceModifier.applyRendering(rendering: RenderingStyle): GlanceModi
* Convert TextStyle to GlanceTextStyle.
* Glance has limited text styling compared to SwiftUI.
*/
+@Composable
fun TextStyle.toGlanceTextStyle(): GlanceTextStyle {
var glanceStyle = GlanceTextStyle()
+ val colorProvider = color?.toColorProvider()
// Font size
if (fontSize.value > 0) {
@@ -240,7 +245,7 @@ fun TextStyle.toGlanceTextStyle(): GlanceTextStyle {
glanceStyle =
GlanceTextStyle(
fontSize = fontSize,
- color = ColorProvider(color),
+ color = colorProvider!!,
)
}
@@ -249,8 +254,7 @@ fun TextStyle.toGlanceTextStyle(): GlanceTextStyle {
glanceStyle =
GlanceTextStyle(
fontSize = fontSize,
- color =
- color?.let { ColorProvider(it) } ?: ColorProvider(androidx.compose.ui.graphics.Color.Unspecified),
+ color = colorProvider ?: ColorProvider(androidx.compose.ui.graphics.Color.Unspecified),
fontWeight = fontWeight,
)
}
@@ -280,8 +284,7 @@ fun TextStyle.toGlanceTextStyle(): GlanceTextStyle {
glanceStyle =
GlanceTextStyle(
fontSize = fontSize,
- color =
- color?.let { ColorProvider(it) } ?: ColorProvider(androidx.compose.ui.graphics.Color.Unspecified),
+ color = colorProvider ?: ColorProvider(androidx.compose.ui.graphics.Color.Unspecified),
fontWeight = fontWeight,
textDecoration = glanceDecoration,
)
@@ -305,9 +308,7 @@ fun TextStyle.toGlanceTextStyle(): GlanceTextStyle {
glanceStyle =
GlanceTextStyle(
fontSize = fontSize,
- color =
- color?.let { ColorProvider(it) }
- ?: ColorProvider(androidx.compose.ui.graphics.Color.Unspecified),
+ color = colorProvider ?: ColorProvider(androidx.compose.ui.graphics.Color.Unspecified),
fontWeight = fontWeight,
textDecoration = glanceStyle.textDecoration,
fontFamily = glanceFontFamily,
diff --git a/packages/voltra/android/src/main/java/voltra/styling/StyleStructures.kt b/packages/voltra/android/src/main/java/voltra/styling/StyleStructures.kt
index 559992fc..109a36cf 100644
--- a/packages/voltra/android/src/main/java/voltra/styling/StyleStructures.kt
+++ b/packages/voltra/android/src/main/java/voltra/styling/StyleStructures.kt
@@ -1,6 +1,4 @@
package voltra.styling
-
-import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
@@ -55,7 +53,7 @@ data class LayoutStyle(
* Mirrors iOS DecorationStyle.swift
*/
data class DecorationStyle(
- val backgroundColor: Color? = null,
+ val backgroundColor: VoltraColorValue? = null,
val cornerRadius: Dp? = null,
val clipToOutline: Boolean = false,
val border: BorderStyle? = null,
@@ -73,7 +71,7 @@ data class DecorationStyle(
*/
data class BorderStyle(
val width: Dp,
- val color: Color,
+ val color: VoltraColorValue,
)
/**
@@ -81,7 +79,7 @@ data class BorderStyle(
*/
data class ShadowStyle(
val radius: Dp,
- val color: Color,
+ val color: VoltraColorValue,
val opacity: Float,
val offset: Offset,
)
@@ -114,7 +112,7 @@ data class TransformStyle(
* Mirrors iOS TextStyle.swift
*/
data class TextStyle(
- val color: Color? = null,
+ val color: VoltraColorValue? = null,
val fontSize: TextUnit = 17.sp,
val fontWeight: FontWeight? = null,
val fontFamily: String? = null,
diff --git a/packages/voltra/android/src/main/java/voltra/styling/VoltraColorValue.kt b/packages/voltra/android/src/main/java/voltra/styling/VoltraColorValue.kt
new file mode 100644
index 00000000..18cc2a4f
--- /dev/null
+++ b/packages/voltra/android/src/main/java/voltra/styling/VoltraColorValue.kt
@@ -0,0 +1,101 @@
+package voltra.styling
+
+import android.content.Context
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.glance.GlanceTheme
+import androidx.glance.LocalContext
+import androidx.glance.unit.ColorProvider
+
+enum class VoltraThemeColorRole(
+ val token: String,
+) {
+ PRIMARY("~p"),
+ ON_PRIMARY("~op"),
+ PRIMARY_CONTAINER("~pc"),
+ ON_PRIMARY_CONTAINER("~opc"),
+ SECONDARY("~s"),
+ ON_SECONDARY("~os"),
+ SECONDARY_CONTAINER("~sc"),
+ ON_SECONDARY_CONTAINER("~osc"),
+ TERTIARY("~t"),
+ ON_TERTIARY("~ot"),
+ TERTIARY_CONTAINER("~tc"),
+ ON_TERTIARY_CONTAINER("~otc"),
+ ERROR("~e"),
+ ERROR_CONTAINER("~ec"),
+ ON_ERROR("~oe"),
+ ON_ERROR_CONTAINER("~oec"),
+ BACKGROUND("~b"),
+ ON_BACKGROUND("~ob"),
+ SURFACE("~sf"),
+ ON_SURFACE("~osf"),
+ SURFACE_VARIANT("~sv"),
+ ON_SURFACE_VARIANT("~osv"),
+ OUTLINE("~ol"),
+ INVERSE_ON_SURFACE("~ios"),
+ INVERSE_SURFACE("~is"),
+ INVERSE_PRIMARY("~ip"),
+ WIDGET_BACKGROUND("~wb"),
+ ;
+
+ companion object {
+ fun fromToken(token: String): VoltraThemeColorRole? = entries.firstOrNull { it.token == token }
+ }
+}
+
+sealed interface VoltraColorValue {
+ data class Static(
+ val color: Color,
+ ) : VoltraColorValue
+
+ data class Dynamic(
+ val role: VoltraThemeColorRole,
+ ) : VoltraColorValue
+}
+
+@Composable
+fun VoltraThemeColorRole.toColorProvider(): ColorProvider =
+ when (this) {
+ VoltraThemeColorRole.PRIMARY -> GlanceTheme.colors.primary
+ VoltraThemeColorRole.ON_PRIMARY -> GlanceTheme.colors.onPrimary
+ VoltraThemeColorRole.PRIMARY_CONTAINER -> GlanceTheme.colors.primaryContainer
+ VoltraThemeColorRole.ON_PRIMARY_CONTAINER -> GlanceTheme.colors.onPrimaryContainer
+ VoltraThemeColorRole.SECONDARY -> GlanceTheme.colors.secondary
+ VoltraThemeColorRole.ON_SECONDARY -> GlanceTheme.colors.onSecondary
+ VoltraThemeColorRole.SECONDARY_CONTAINER -> GlanceTheme.colors.secondaryContainer
+ VoltraThemeColorRole.ON_SECONDARY_CONTAINER -> GlanceTheme.colors.onSecondaryContainer
+ VoltraThemeColorRole.TERTIARY -> GlanceTheme.colors.tertiary
+ VoltraThemeColorRole.ON_TERTIARY -> GlanceTheme.colors.onTertiary
+ VoltraThemeColorRole.TERTIARY_CONTAINER -> GlanceTheme.colors.tertiaryContainer
+ VoltraThemeColorRole.ON_TERTIARY_CONTAINER -> GlanceTheme.colors.onTertiaryContainer
+ VoltraThemeColorRole.ERROR -> GlanceTheme.colors.error
+ VoltraThemeColorRole.ERROR_CONTAINER -> GlanceTheme.colors.errorContainer
+ VoltraThemeColorRole.ON_ERROR -> GlanceTheme.colors.onError
+ VoltraThemeColorRole.ON_ERROR_CONTAINER -> GlanceTheme.colors.onErrorContainer
+ VoltraThemeColorRole.BACKGROUND -> GlanceTheme.colors.background
+ VoltraThemeColorRole.ON_BACKGROUND -> GlanceTheme.colors.onBackground
+ VoltraThemeColorRole.SURFACE -> GlanceTheme.colors.surface
+ VoltraThemeColorRole.ON_SURFACE -> GlanceTheme.colors.onSurface
+ VoltraThemeColorRole.SURFACE_VARIANT -> GlanceTheme.colors.surfaceVariant
+ VoltraThemeColorRole.ON_SURFACE_VARIANT -> GlanceTheme.colors.onSurfaceVariant
+ VoltraThemeColorRole.OUTLINE -> GlanceTheme.colors.outline
+ VoltraThemeColorRole.INVERSE_ON_SURFACE -> GlanceTheme.colors.inverseOnSurface
+ VoltraThemeColorRole.INVERSE_SURFACE -> GlanceTheme.colors.inverseSurface
+ VoltraThemeColorRole.INVERSE_PRIMARY -> GlanceTheme.colors.inversePrimary
+ VoltraThemeColorRole.WIDGET_BACKGROUND -> GlanceTheme.colors.widgetBackground
+ }
+
+@Composable
+fun VoltraColorValue.toColorProvider(): ColorProvider =
+ when (this) {
+ is VoltraColorValue.Dynamic -> role.toColorProvider()
+ is VoltraColorValue.Static -> ColorProvider(color)
+ }
+
+@Composable
+fun VoltraColorValue.resolveColor(context: Context = LocalContext.current): Color =
+ when (this) {
+ is VoltraColorValue.Dynamic -> role.toColorProvider().getColor(context)
+ is VoltraColorValue.Static -> color
+ }
diff --git a/packages/voltra/android/src/main/java/voltra/widget/VoltraRefreshActionCallback.kt b/packages/voltra/android/src/main/java/voltra/widget/VoltraRefreshActionCallback.kt
index 3b612487..ef4de2a4 100644
--- a/packages/voltra/android/src/main/java/voltra/widget/VoltraRefreshActionCallback.kt
+++ b/packages/voltra/android/src/main/java/voltra/widget/VoltraRefreshActionCallback.kt
@@ -3,7 +3,6 @@ package voltra.widget
import android.appwidget.AppWidgetManager
import android.content.ComponentName
import android.content.Context
-import android.content.res.Configuration
import android.util.Log
import android.widget.RemoteViews
import androidx.glance.GlanceId
@@ -56,17 +55,7 @@ class VoltraRefreshActionCallback : ActionCallback {
val jsonString =
withContext(Dispatchers.IO) {
try {
- val nightModeFlags =
- context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
- val theme = if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) "dark" else "light"
-
- val urlBuilder = StringBuilder(serverUrl)
- urlBuilder.append(if (serverUrl.contains("?")) "&" else "?")
- urlBuilder.append("widgetId=").append(widgetId)
- urlBuilder.append("&platform=android")
- urlBuilder.append("&theme=").append(theme)
-
- val url = URL(urlBuilder.toString())
+ val url = VoltraWidgetUpdateRequest.buildUrl(serverUrl, widgetId, context)
val connection = url.openConnection() as HttpURLConnection
try {
diff --git a/packages/voltra/android/src/main/java/voltra/widget/VoltraWidgetUpdateRequest.kt b/packages/voltra/android/src/main/java/voltra/widget/VoltraWidgetUpdateRequest.kt
new file mode 100644
index 00000000..4b8fbad3
--- /dev/null
+++ b/packages/voltra/android/src/main/java/voltra/widget/VoltraWidgetUpdateRequest.kt
@@ -0,0 +1,30 @@
+package voltra.widget
+
+import android.content.Context
+import android.content.res.Configuration
+import android.net.Uri
+import java.net.URL
+
+object VoltraWidgetUpdateRequest {
+ fun currentTheme(context: Context): String {
+ val nightModeFlags = context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+ return if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) "dark" else "light"
+ }
+
+ fun buildUrl(
+ serverUrl: String,
+ widgetId: String,
+ context: Context,
+ ): URL {
+ val uri =
+ Uri
+ .parse(serverUrl)
+ .buildUpon()
+ .appendQueryParameter("widgetId", widgetId)
+ .appendQueryParameter("platform", "android")
+ .appendQueryParameter("theme", currentTheme(context))
+ .build()
+
+ return URL(uri.toString())
+ }
+}
diff --git a/packages/voltra/android/src/main/java/voltra/widget/VoltraWidgetUpdateWorker.kt b/packages/voltra/android/src/main/java/voltra/widget/VoltraWidgetUpdateWorker.kt
index 2969b1c0..26011388 100644
--- a/packages/voltra/android/src/main/java/voltra/widget/VoltraWidgetUpdateWorker.kt
+++ b/packages/voltra/android/src/main/java/voltra/widget/VoltraWidgetUpdateWorker.kt
@@ -3,7 +3,6 @@ package voltra.widget
import android.appwidget.AppWidgetManager
import android.content.ComponentName
import android.content.Context
-import android.content.res.Configuration
import android.util.Log
import android.widget.RemoteViews
import androidx.work.CoroutineWorker
@@ -58,17 +57,7 @@ class VoltraWidgetUpdateWorker(
try {
// 1. Build URL with query parameters
- val nightModeFlags =
- applicationContext.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
- val theme = if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) "dark" else "light"
-
- val urlBuilder = StringBuilder(serverUrl)
- urlBuilder.append(if (serverUrl.contains("?")) "&" else "?")
- urlBuilder.append("widgetId=").append(widgetId)
- urlBuilder.append("&platform=android")
- urlBuilder.append("&theme=").append(theme)
-
- val url = URL(urlBuilder.toString())
+ val url = VoltraWidgetUpdateRequest.buildUrl(serverUrl, widgetId, applicationContext)
val connection = url.openConnection() as HttpURLConnection
try {
diff --git a/packages/voltra/data/components.json b/packages/voltra/data/components.json
index b4d96390..64dddb3e 100644
--- a/packages/voltra/data/components.json
+++ b/packages/voltra/data/components.json
@@ -151,6 +151,7 @@
"border": "bd",
"clipped": "clip",
"foregroundStyleScale": "fss",
+ "chartScrollableAxes": "csa",
"legendVisibility": "lgv",
"marks": "mrk",
"xAxisGridStyle": "xgs",
diff --git a/packages/voltra/generator/generate-types.ts b/packages/voltra/generator/generate-types.ts
index 3dc23bb5..3c4c5165 100644
--- a/packages/voltra/generator/generate-types.ts
+++ b/packages/voltra/generator/generate-types.ts
@@ -17,6 +17,10 @@ const TS_PROPS_OUTPUT_DIR = path.join(ROOT_DIR, 'src/jsx/props')
const TS_IOS_PROPS_OUTPUT_DIR = path.join(ROOT_DIR, '..', 'ios', 'src', 'jsx', 'props')
const TS_ANDROID_PROPS_SOURCE_DIR = path.join(ROOT_DIR, 'src/android/jsx/props')
const TS_ANDROID_PROPS_OUTPUT_DIR = path.join(ROOT_DIR, '..', 'android', 'src', 'jsx', 'props')
+const TS_ANDROID_STYLES_SOURCE_DIR = path.join(ROOT_DIR, 'src/android/styles')
+const TS_ANDROID_STYLES_OUTPUT_DIR = path.join(ROOT_DIR, '..', 'android', 'src', 'styles')
+const TS_ANDROID_DYNAMIC_COLORS_SOURCE_PATH = path.join(ROOT_DIR, 'src/android/dynamic-colors.ts')
+const TS_ANDROID_DYNAMIC_COLORS_OUTPUT_PATH = path.join(ROOT_DIR, '..', 'android', 'src', 'dynamic-colors.ts')
const TS_PAYLOAD_OUTPUT_DIR = path.join(ROOT_DIR, 'src/payload')
const TS_IOS_PAYLOAD_OUTPUT_DIR = path.join(ROOT_DIR, '..', 'ios', 'src', 'payload')
const TS_CORE_PAYLOAD_OUTPUT_DIR = path.join(ROOT_DIR, '..', 'core', 'src', 'payload')
@@ -54,6 +58,12 @@ const syncDirectory = (sourceDir: string, outputDir: string) => {
console.log(` ✓ Synced ${path.relative(ROOT_DIR, sourceDir)} -> ${path.relative(ROOT_DIR, outputDir)}`)
}
+const syncFile = (sourcePath: string, outputPath: string) => {
+ ensureDirectoryExists(path.dirname(outputPath))
+ fs.copyFileSync(sourcePath, outputPath)
+ console.log(` ✓ Synced ${path.relative(ROOT_DIR, sourcePath)} -> ${path.relative(ROOT_DIR, outputPath)}`)
+}
+
const runFormatScript = (scriptName: string, stepLabel: string) => {
console.log(`Step ${stepLabel}: Running npm run ${scriptName}...`)
try {
@@ -98,6 +108,8 @@ const main = () => {
writeFiles(TS_PROPS_OUTPUT_DIR, tsJsxResult.props)
writeFiles(TS_IOS_PROPS_OUTPUT_DIR, tsJsxResult.props)
syncDirectory(TS_ANDROID_PROPS_SOURCE_DIR, TS_ANDROID_PROPS_OUTPUT_DIR)
+ syncDirectory(TS_ANDROID_STYLES_SOURCE_DIR, TS_ANDROID_STYLES_OUTPUT_DIR)
+ syncFile(TS_ANDROID_DYNAMIC_COLORS_SOURCE_PATH, TS_ANDROID_DYNAMIC_COLORS_OUTPUT_PATH)
console.log()
// Step 5: Generate Swift parameter types
diff --git a/packages/voltra/ios/shared/ShortNames.swift b/packages/voltra/ios/shared/ShortNames.swift
index 4effc018..7aa94116 100644
--- a/packages/voltra/ios/shared/ShortNames.swift
+++ b/packages/voltra/ios/shared/ShortNames.swift
@@ -28,6 +28,7 @@ public enum ShortNames {
"bw": "borderWidth",
"b": "bottom",
"bs": "buttonStyle",
+ "csa": "chartScrollableAxes",
"chk": "checked",
"clip": "clipped",
"c": "color",
diff --git a/packages/voltra/jest.config.js b/packages/voltra/jest.config.js
index a04ba3d3..108c0d19 100644
--- a/packages/voltra/jest.config.js
+++ b/packages/voltra/jest.config.js
@@ -10,6 +10,7 @@ module.exports = {
moduleNameMapper: {
'^@use-voltra/android$': '/../android/src/index.ts',
'^@use-voltra/android/client$': '/../android/src/client.ts',
+ '^@use-voltra/android/internal$': '/../android/src/internal.ts',
'^@use-voltra/android/server$': '/../android/src/server.ts',
'^@use-voltra/android-server$': '/../android-server/src/index.ts',
'^@use-voltra/core$': '/../core/src/index.ts',
@@ -33,6 +34,7 @@ module.exports = {
moduleNameMapper: {
'^@use-voltra/android$': '/../android/src/index.ts',
'^@use-voltra/android/client$': '/../android/src/client.ts',
+ '^@use-voltra/android/internal$': '/../android/src/internal.ts',
'^@use-voltra/android/server$': '/../android/src/server.ts',
'^@use-voltra/android-server$': '/../android-server/src/index.ts',
'^@use-voltra/core$': '/../core/src/index.ts',
diff --git a/packages/voltra/src/__tests__/android-dynamic-color.node.test.tsx b/packages/voltra/src/__tests__/android-dynamic-color.node.test.tsx
new file mode 100644
index 00000000..289c1229
--- /dev/null
+++ b/packages/voltra/src/__tests__/android-dynamic-color.node.test.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+
+import { AndroidDynamicColors, VoltraAndroid } from '../android/index.js'
+import { renderAndroidViewToJson, renderAndroidWidgetToString } from '../android/widgets/renderer.js'
+
+describe('Android semantic color tokens', () => {
+ it('exports the stable token map', () => {
+ expect(AndroidDynamicColors).toEqual({
+ primary: '~p',
+ onPrimary: '~op',
+ primaryContainer: '~pc',
+ onPrimaryContainer: '~opc',
+ secondary: '~s',
+ onSecondary: '~os',
+ secondaryContainer: '~sc',
+ onSecondaryContainer: '~osc',
+ tertiary: '~t',
+ onTertiary: '~ot',
+ tertiaryContainer: '~tc',
+ onTertiaryContainer: '~otc',
+ error: '~e',
+ errorContainer: '~ec',
+ onError: '~oe',
+ onErrorContainer: '~oec',
+ background: '~b',
+ onBackground: '~ob',
+ surface: '~sf',
+ onSurface: '~osf',
+ surfaceVariant: '~sv',
+ onSurfaceVariant: '~osv',
+ outline: '~ol',
+ inverseOnSurface: '~ios',
+ inverseSurface: '~is',
+ inversePrimary: '~ip',
+ widgetBackground: '~wb',
+ })
+ })
+
+ it('preserves semantic color tokens in rendered widget payloads', () => {
+ const output = renderAndroidWidgetToString([
+ {
+ size: { width: 150, height: 100 },
+ content: (
+
+ ),
+ },
+ ])
+
+ expect(output).toContain('"~p"')
+ expect(output).toContain('"~op"')
+ })
+
+ it('renders Android views without palette context injection', () => {
+ const output = renderAndroidViewToJson(
+ Hello
+ ) as {
+ variants?: Record
+ s?: Array>
+ }
+
+ expect(output.variants?.content?.c).toBe('Hello')
+ expect(JSON.stringify(output.s ?? [])).toContain('~osf')
+ })
+})
diff --git a/packages/voltra/src/__tests__/widget-server.node.test.tsx b/packages/voltra/src/__tests__/widget-server.node.test.tsx
index ac4f07a8..cd15dc91 100644
--- a/packages/voltra/src/__tests__/widget-server.node.test.tsx
+++ b/packages/voltra/src/__tests__/widget-server.node.test.tsx
@@ -1,7 +1,7 @@
import { createAndroidWidgetUpdateHandler, renderAndroidWidgetToString } from '@use-voltra/android-server'
import { createIOSWidgetUpdateHandler, renderWidgetToString, Voltra } from '@use-voltra/ios-server'
import { createWidgetUpdateHandler as createSharedWidgetUpdateHandler } from '@use-voltra/server'
-import { VoltraAndroid } from '../android/index.js'
+import { AndroidDynamicColors, VoltraAndroid } from '../android/index.js'
import { createWidgetUpdateHandler as createCompatibilityWidgetUpdateHandler } from '../widget-server.js'
describe('server package split', () => {
@@ -93,6 +93,24 @@ describe('server package split', () => {
expect(await androidResponse.text()).toBe('{"platform":"android"}')
})
+ it('includes the parsed URL on the render request', async () => {
+ let renderUrl: string | undefined
+
+ const handler = createSharedWidgetUpdateHandler({
+ renderAndroid: async (request) => {
+ renderUrl = request.url.toString()
+ return '{"platform":"android"}'
+ },
+ })
+
+ const response = await handler(
+ new Request('https://example.com/widgets?widgetId=clock&platform=android&theme=dark')
+ )
+
+ expect(response.status).toBe(200)
+ expect(renderUrl).toBe('https://example.com/widgets?widgetId=clock&platform=android&theme=dark')
+ })
+
it('serializes iOS widgets through the iOS server package adapter', async () => {
const variants = {
systemSmall: Hello,
@@ -124,6 +142,31 @@ describe('server package split', () => {
expect(await response.text()).toBe(renderAndroidWidgetToString(variants))
})
+ it('preserves Android semantic color tokens through server handlers', async () => {
+ const variants = [
+ {
+ size: { width: 150, height: 100 },
+ content: (
+
+ ),
+ },
+ ]
+ const handler = createAndroidWidgetUpdateHandler({
+ render: async () => variants,
+ })
+
+ const response = await handler(new Request('https://example.com/widgets?widgetId=clock&platform=android'))
+ const payload = await response.text()
+
+ expect(response.status).toBe(200)
+ expect(payload).toContain('"~p"')
+ expect(payload).toContain('"~op"')
+ })
+
it('keeps the root compatibility handler API unchanged', async () => {
const variants = {
systemSmall: Compat,
diff --git a/packages/voltra/src/android/components/VoltraView.tsx b/packages/voltra/src/android/components/VoltraView.tsx
index b01bd61b..b58d95c4 100644
--- a/packages/voltra/src/android/components/VoltraView.tsx
+++ b/packages/voltra/src/android/components/VoltraView.tsx
@@ -1,76 +1 @@
-import { requireNativeView } from 'expo'
-import React, { ReactNode, useEffect, useMemo } from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
-
-import { addVoltraListener, VoltraInteractionEvent } from '../../events.js'
-import { androidComponentRegistry, createVoltraRenderer } from '../../renderer/renderer.js'
-
-const NativeVoltraView = requireNativeView('VoltraModule')
-
-// Generate a unique ID for views that don't have one
-const generateViewId = () => `voltra-view-android-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
-
-export type VoltraViewProps = {
- /**
- * Unique identifier for this view instance.
- * Used as 'source' in interaction events to identify which view triggered the event.
- * If not provided, a unique ID will be generated automatically.
- */
- id?: string
- /**
- * Voltra JSX components to render
- */
- children: ReactNode
- /**
- * Style for the view container
- */
- style?: StyleProp
- /**
- * Callback when user interacts with components in the view.
- * Events are filtered by this view's id (source).
- */
- onInteraction?: (event: VoltraInteractionEvent) => void
-}
-
-/**
- * A React Native component that renders Voltra UI for Android using Jetpack Compose.
- */
-export function VoltraView({ id, children, style, onInteraction }: VoltraViewProps) {
- // Generate a stable ID if not provided
- const viewId = useMemo(() => id || generateViewId(), [id])
-
- const payload = useMemo(() => {
- const renderer = createVoltraRenderer(androidComponentRegistry)
- renderer.addRootNode('content', children)
- const rendered = renderer.render()
-
- // Move 'content' into 'variants' to match VoltraPayload structure
- const node = rendered.content
- delete rendered.content
- rendered.variants = { content: node }
-
- return JSON.stringify(rendered)
- }, [children])
-
- // Subscribe to interaction events and filter by this view's ID
- useEffect(() => {
- if (!onInteraction) return
-
- const subscription = addVoltraListener('interaction', (event) => {
- // Only forward events from this view
- if (event.source === viewId) {
- onInteraction({
- type: 'interaction',
- source: event.source,
- timestamp: event.timestamp,
- identifier: event.identifier,
- payload: event.payload,
- })
- }
- })
-
- return () => subscription.remove()
- }, [viewId, onInteraction])
-
- return
-}
+export { VoltraView, type VoltraViewProps } from '@use-voltra/android/client'
diff --git a/packages/voltra/src/android/components/VoltraWidgetPreview.tsx b/packages/voltra/src/android/components/VoltraWidgetPreview.tsx
index 54baf59d..6574dca8 100644
--- a/packages/voltra/src/android/components/VoltraWidgetPreview.tsx
+++ b/packages/voltra/src/android/components/VoltraWidgetPreview.tsx
@@ -1,49 +1 @@
-import React from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
-
-import { VoltraView, VoltraViewProps } from './VoltraView.js'
-
-/**
- * Android-specific widget sizes in dp.
- */
-export type AndroidWidgetFamily = 'small' | 'mediumSquare' | 'mediumWide' | 'mediumTall' | 'large' | 'extraLarge'
-
-const WIDGET_DIMENSIONS: Record = {
- small: { width: 150, height: 100 },
- mediumSquare: { width: 200, height: 200 },
- mediumWide: { width: 250, height: 150 },
- mediumTall: { width: 150, height: 250 },
- large: { width: 300, height: 200 },
- extraLarge: { width: 350, height: 300 },
-}
-
-export type VoltraWidgetPreviewProps = Omit & {
- /**
- * Android widget size to preview
- */
- family: AndroidWidgetFamily
- /**
- * Additional styles to apply on top of the widget dimensions
- */
- style?: StyleProp
-}
-
-/**
- * A preview component that renders Voltra Android JSX content at specific dimensions.
- */
-export function VoltraWidgetPreview({ family, style, children, ...voltraViewProps }: VoltraWidgetPreviewProps) {
- const dimensions = WIDGET_DIMENSIONS[family]
- const previewStyle: StyleProp = [
- {
- width: dimensions.width,
- height: dimensions.height,
- },
- style,
- ]
-
- return (
-
- {children}
-
- )
-}
+export { VoltraWidgetPreview, type VoltraWidgetPreviewProps } from '@use-voltra/android/client'
diff --git a/packages/voltra/src/android/dynamic-colors.ts b/packages/voltra/src/android/dynamic-colors.ts
new file mode 100644
index 00000000..ebdb2ad6
--- /dev/null
+++ b/packages/voltra/src/android/dynamic-colors.ts
@@ -0,0 +1,6 @@
+export {
+ AndroidDynamicColors,
+ type AndroidColorValue,
+ type AndroidDynamicColorRole,
+ type AndroidDynamicColorToken,
+} from '@use-voltra/android'
diff --git a/packages/voltra/src/android/jsx/AreaMark.tsx b/packages/voltra/src/android/jsx/AreaMark.tsx
index 7bfb785c..fa12db01 100644
--- a/packages/voltra/src/android/jsx/AreaMark.tsx
+++ b/packages/voltra/src/android/jsx/AreaMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
import { VOLTRA_MARK_TAG } from '../../jsx/BarMark.js'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import type { ChartDataPoint } from './chart-types.js'
export type AreaMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
interpolation?: 'linear' | 'monotone' | 'stepStart' | 'stepEnd' | 'stepCenter' | 'cardinal' | 'catmullRom'
stacking?: 'standard' | 'normalized' | 'unstacked'
}
diff --git a/packages/voltra/src/android/jsx/BarMark.tsx b/packages/voltra/src/android/jsx/BarMark.tsx
index a2377448..34268a2d 100644
--- a/packages/voltra/src/android/jsx/BarMark.tsx
+++ b/packages/voltra/src/android/jsx/BarMark.tsx
@@ -1,13 +1,14 @@
import { createElement } from 'react'
import { VOLTRA_MARK_TAG } from '../../jsx/BarMark.js'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import type { ChartDataPoint } from './chart-types.js'
export { VOLTRA_MARK_TAG } from '../../jsx/BarMark.js'
export type BarMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
stacking?: 'standard' | 'normalized' | 'unstacked' | 'grouped'
cornerRadius?: number
width?: number
diff --git a/packages/voltra/src/android/jsx/LineMark.tsx b/packages/voltra/src/android/jsx/LineMark.tsx
index ba11608c..3f8a0f45 100644
--- a/packages/voltra/src/android/jsx/LineMark.tsx
+++ b/packages/voltra/src/android/jsx/LineMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
import { VOLTRA_MARK_TAG } from '../../jsx/BarMark.js'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import type { ChartDataPoint } from './chart-types.js'
export type LineMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
interpolation?: 'linear' | 'monotone' | 'stepStart' | 'stepEnd' | 'stepCenter' | 'cardinal' | 'catmullRom'
lineWidth?: number
symbol?: string
diff --git a/packages/voltra/src/android/jsx/PointMark.tsx b/packages/voltra/src/android/jsx/PointMark.tsx
index b4526d11..fb0fea50 100644
--- a/packages/voltra/src/android/jsx/PointMark.tsx
+++ b/packages/voltra/src/android/jsx/PointMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
import { VOLTRA_MARK_TAG } from '../../jsx/BarMark.js'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import type { ChartDataPoint } from './chart-types.js'
export type PointMarkProps = {
data: ChartDataPoint[]
- color?: string
+ color?: AndroidColorValue
symbol?: string
symbolSize?: number
}
diff --git a/packages/voltra/src/android/jsx/RuleMark.tsx b/packages/voltra/src/android/jsx/RuleMark.tsx
index f200dda0..b6ef3fc1 100644
--- a/packages/voltra/src/android/jsx/RuleMark.tsx
+++ b/packages/voltra/src/android/jsx/RuleMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
import { VOLTRA_MARK_TAG } from '../../jsx/BarMark.js'
+import type { AndroidColorValue } from '../dynamic-colors.js'
export type RuleMarkProps = {
xValue?: string | number
yValue?: number
- color?: string
+ color?: AndroidColorValue
lineWidth?: number
}
diff --git a/packages/voltra/src/android/jsx/SectorMark.tsx b/packages/voltra/src/android/jsx/SectorMark.tsx
index 51035745..978218e1 100644
--- a/packages/voltra/src/android/jsx/SectorMark.tsx
+++ b/packages/voltra/src/android/jsx/SectorMark.tsx
@@ -1,11 +1,12 @@
import { createElement } from 'react'
import { VOLTRA_MARK_TAG } from '../../jsx/BarMark.js'
+import type { AndroidColorValue } from '../dynamic-colors.js'
import type { SectorDataPoint } from './chart-types.js'
export type SectorMarkProps = {
data: SectorDataPoint[]
- color?: string
+ color?: AndroidColorValue
innerRadius?: number
outerRadius?: number
angularInset?: number
diff --git a/packages/voltra/src/android/jsx/props/CheckBox.ts b/packages/voltra/src/android/jsx/props/CheckBox.ts
index a7dae8dd..3684a057 100644
--- a/packages/voltra/src/android/jsx/props/CheckBox.ts
+++ b/packages/voltra/src/android/jsx/props/CheckBox.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidTextStyleProp } from '../../styles/types.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
@@ -9,9 +10,9 @@ export type CheckBoxProps = VoltraAndroidBaseProps & {
/** Style for the text */
style?: VoltraAndroidTextStyleProp
/** Color when checked */
- checkedColor?: string
+ checkedColor?: AndroidColorValue
/** Color when unchecked */
- uncheckedColor?: string
+ uncheckedColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/voltra/src/android/jsx/props/CircleIconButton.ts b/packages/voltra/src/android/jsx/props/CircleIconButton.ts
index b72b3a98..bf215685 100644
--- a/packages/voltra/src/android/jsx/props/CircleIconButton.ts
+++ b/packages/voltra/src/android/jsx/props/CircleIconButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,7 +10,7 @@ export type CircleIconButtonProps = VoltraAndroidBaseProps & {
/** Content description for accessibility */
contentDescription?: string
/** Background color */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Icon color */
- contentColor?: string
+ contentColor?: AndroidColorValue
}
diff --git a/packages/voltra/src/android/jsx/props/CircularProgressIndicator.ts b/packages/voltra/src/android/jsx/props/CircularProgressIndicator.ts
index 04b1a4e6..acaa7ef9 100644
--- a/packages/voltra/src/android/jsx/props/CircularProgressIndicator.ts
+++ b/packages/voltra/src/android/jsx/props/CircularProgressIndicator.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type CircularProgressIndicatorProps = VoltraAndroidBaseProps & {
@@ -8,5 +9,5 @@ export type CircularProgressIndicatorProps = VoltraAndroidBaseProps & {
*/
progress?: number
/** Color for the progress indicator */
- color?: string
+ color?: AndroidColorValue
}
diff --git a/packages/voltra/src/android/jsx/props/FilledButton.ts b/packages/voltra/src/android/jsx/props/FilledButton.ts
index 6b2581b4..bc9adbe2 100644
--- a/packages/voltra/src/android/jsx/props/FilledButton.ts
+++ b/packages/voltra/src/android/jsx/props/FilledButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,9 +10,9 @@ export type FilledButtonProps = VoltraAndroidBaseProps & {
/** Icon to display */
icon?: ImageSource
/** Background color */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Content (text/icon) color */
- contentColor?: string
+ contentColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/voltra/src/android/jsx/props/Image.ts b/packages/voltra/src/android/jsx/props/Image.ts
index cc088b54..da53231c 100644
--- a/packages/voltra/src/android/jsx/props/Image.ts
+++ b/packages/voltra/src/android/jsx/props/Image.ts
@@ -4,6 +4,7 @@
import type { ReactNode } from 'react'
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type ImageProps = VoltraAndroidBaseProps & {
@@ -18,9 +19,9 @@ export type ImageProps = VoltraAndroidBaseProps & {
/** Opacity (0.0 to 1.0) */
alpha?: number
/** Tint color */
- tintColor?: string
+ tintColor?: AndroidColorValue
/** Background color used when the image is missing */
- fallbackColor?: string
+ fallbackColor?: AndroidColorValue
/** Custom fallback content rendered when the image is missing */
fallback?: ReactNode
}
diff --git a/packages/voltra/src/android/jsx/props/LinearProgressIndicator.ts b/packages/voltra/src/android/jsx/props/LinearProgressIndicator.ts
index 6b06216e..e1af142d 100644
--- a/packages/voltra/src/android/jsx/props/LinearProgressIndicator.ts
+++ b/packages/voltra/src/android/jsx/props/LinearProgressIndicator.ts
@@ -1,10 +1,11 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type LinearProgressIndicatorProps = VoltraAndroidBaseProps & {
/** Current progress value (0.0 to 1.0) */
progress?: number
/** Color for the progress indicator */
- color?: string
+ color?: AndroidColorValue
/** Color for the background track */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
}
diff --git a/packages/voltra/src/android/jsx/props/OutlineButton.ts b/packages/voltra/src/android/jsx/props/OutlineButton.ts
index 9ac5d15c..45cff252 100644
--- a/packages/voltra/src/android/jsx/props/OutlineButton.ts
+++ b/packages/voltra/src/android/jsx/props/OutlineButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,7 +10,7 @@ export type OutlineButtonProps = VoltraAndroidBaseProps & {
/** Icon to display */
icon?: ImageSource
/** Content (text/icon) color */
- contentColor?: string
+ contentColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/voltra/src/android/jsx/props/RadioButton.ts b/packages/voltra/src/android/jsx/props/RadioButton.ts
index 80350aa6..81a4b443 100644
--- a/packages/voltra/src/android/jsx/props/RadioButton.ts
+++ b/packages/voltra/src/android/jsx/props/RadioButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidTextStyleProp } from '../../styles/types.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
@@ -9,9 +10,9 @@ export type RadioButtonProps = VoltraAndroidBaseProps & {
/** Style for the text */
style?: VoltraAndroidTextStyleProp
/** Color when checked */
- checkedColor?: string
+ checkedColor?: AndroidColorValue
/** Color when unchecked */
- uncheckedColor?: string
+ uncheckedColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
/** Whether the radio button is enabled */
diff --git a/packages/voltra/src/android/jsx/props/Scaffold.ts b/packages/voltra/src/android/jsx/props/Scaffold.ts
index 3107eb95..ecb73631 100644
--- a/packages/voltra/src/android/jsx/props/Scaffold.ts
+++ b/packages/voltra/src/android/jsx/props/Scaffold.ts
@@ -1,8 +1,9 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
export type ScaffoldProps = VoltraAndroidBaseProps & {
/** Background color for the scaffold - supports hex, rgb, hsl, and named colors */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Horizontal padding */
horizontalPadding?: number
}
diff --git a/packages/voltra/src/android/jsx/props/SquareIconButton.ts b/packages/voltra/src/android/jsx/props/SquareIconButton.ts
index deb56027..3ee3ac4e 100644
--- a/packages/voltra/src/android/jsx/props/SquareIconButton.ts
+++ b/packages/voltra/src/android/jsx/props/SquareIconButton.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -9,7 +10,7 @@ export type SquareIconButtonProps = VoltraAndroidBaseProps & {
/** Content description for accessibility */
contentDescription?: string
/** Background color */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Icon color */
- contentColor?: string
+ contentColor?: AndroidColorValue
}
diff --git a/packages/voltra/src/android/jsx/props/Switch.ts b/packages/voltra/src/android/jsx/props/Switch.ts
index d55b7457..807bb464 100644
--- a/packages/voltra/src/android/jsx/props/Switch.ts
+++ b/packages/voltra/src/android/jsx/props/Switch.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidTextStyleProp } from '../../styles/types.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
@@ -9,13 +10,13 @@ export type SwitchProps = VoltraAndroidBaseProps & {
/** Style for the text */
style?: VoltraAndroidTextStyleProp
/** Thumb color when checked */
- thumbCheckedColor?: string
+ thumbCheckedColor?: AndroidColorValue
/** Thumb color when unchecked */
- thumbUncheckedColor?: string
+ thumbUncheckedColor?: AndroidColorValue
/** Track color when checked */
- trackCheckedColor?: string
+ trackCheckedColor?: AndroidColorValue
/** Track color when unchecked */
- trackUncheckedColor?: string
+ trackUncheckedColor?: AndroidColorValue
/** Maximum lines for text */
maxLines?: number
}
diff --git a/packages/voltra/src/android/jsx/props/TitleBar.ts b/packages/voltra/src/android/jsx/props/TitleBar.ts
index 223b001e..42e0ced1 100644
--- a/packages/voltra/src/android/jsx/props/TitleBar.ts
+++ b/packages/voltra/src/android/jsx/props/TitleBar.ts
@@ -1,3 +1,4 @@
+import type { AndroidColorValue } from '../../dynamic-colors.js'
import type { VoltraAndroidBaseProps } from '../baseProps.js'
import type { ImageSource } from '../Image.js'
@@ -7,9 +8,9 @@ export type TitleBarProps = VoltraAndroidBaseProps & {
/** Start icon source */
startIcon: ImageSource
/** Text color - supports hex, rgb, hsl, and named colors */
- textColor?: string
+ textColor?: AndroidColorValue
/** Icon color - supports hex, rgb, hsl, and named colors */
- iconColor?: string
+ iconColor?: AndroidColorValue
/** Font family for the title */
fontFamily?: string
}
diff --git a/packages/voltra/src/android/styles/types.ts b/packages/voltra/src/android/styles/types.ts
index ef068e02..0db9832f 100644
--- a/packages/voltra/src/android/styles/types.ts
+++ b/packages/voltra/src/android/styles/types.ts
@@ -3,6 +3,8 @@
* These types mirror the supported properties in the Android implementation (Glance).
*/
+import type { AndroidColorValue } from '../dynamic-colors.js'
+
export type StyleProp = T | T[] | null | undefined | false
export type VoltraAndroidViewStyle = {
@@ -61,13 +63,13 @@ export type VoltraAndroidViewStyle = {
zIndex?: number
/** Background color of the component */
- backgroundColor?: string
+ backgroundColor?: AndroidColorValue
/** Corner radius for the component (requires Android 12+) */
borderRadius?: number
/** Border width (Note: Not yet implemented in Glance) */
borderWidth?: number
/** Border color (Note: Not yet implemented in Glance) */
- borderColor?: string
+ borderColor?: AndroidColorValue
/** Opacity of the component (Note: Not supported in Glance - apply alpha to colors instead) */
opacity?: number
@@ -83,7 +85,7 @@ export type VoltraAndroidViewStyle = {
transform?: ({ rotate: string } | { rotateZ: string } | { scale: number } | { scaleX: number } | { scaleY: number })[]
/** Shadow properties (Note: Not supported in Glance) */
- shadowColor?: string
+ shadowColor?: AndroidColorValue
shadowOffset?: { width: number; height: number }
shadowOpacity?: number
shadowRadius?: number
@@ -94,7 +96,7 @@ export type VoltraAndroidViewStyle = {
export type VoltraAndroidTextStyle = VoltraAndroidViewStyle & {
/** Text color */
- color?: string
+ color?: AndroidColorValue
/** Font size in sp */
fontSize?: number
/** Font weight */
diff --git a/packages/voltra/src/android/widgets/api.ts b/packages/voltra/src/android/widgets/api.ts
index a4af5b48..31cc1b5d 100644
--- a/packages/voltra/src/android/widgets/api.ts
+++ b/packages/voltra/src/android/widgets/api.ts
@@ -1,166 +1,8 @@
-import VoltraModule from '../../VoltraModule.js'
-import { renderAndroidWidgetToString } from './renderer.js'
-import type { AndroidWidgetVariants, UpdateAndroidWidgetOptions, WidgetInfo } from './types.js'
-
-// Re-export types for public API
-export type {
- AndroidWidgetSize,
- AndroidWidgetSizeVariant,
- AndroidWidgetVariants,
- UpdateAndroidWidgetOptions,
- WidgetInfo,
-} from './types.js'
-
-/**
- * Update an Android home screen widget with new content.
- *
- * The content will be stored in SharedPreferences and the widget
- * will be updated to display the new content.
- *
- * @param widgetId - The widget identifier
- * @param variants - An array of size variants with their breakpoints and content.
- * Android will automatically select the best matching variant based on the
- * actual widget dimensions.
- * @param options - Optional settings like deep link URL
- *
- * @example Different content per size
- * ```tsx
- * import { VoltraAndroid, updateAndroidWidget } from 'voltra'
- *
- * await updateAndroidWidget('weather', [
- * {
- * size: { width: 150, height: 100 },
- * content: 72°F
- * },
- * {
- * size: { width: 250, height: 150 },
- * content: (
- *
- * 72°F
- *
- * Sunny
- * High: 78° Low: 65°
- *
- *
- * )
- * }
- * ], { deepLinkUrl: '/weather' })
- * ```
- */
-export const updateAndroidWidget = async (
- widgetId: string,
- variants: AndroidWidgetVariants,
- options?: UpdateAndroidWidgetOptions
-): Promise => {
- const payload = renderAndroidWidgetToString(variants)
-
- return VoltraModule.updateAndroidWidget(widgetId, payload, {
- deepLinkUrl: options?.deepLinkUrl,
- })
-}
-
-/**
- * Reload widget timelines to refresh their content.
- *
- * Use this after updating data that widgets depend on (e.g., after preloading
- * new images) to force them to re-render.
- *
- * @param widgetIds - Optional array of widget IDs to reload. If omitted, reloads all widgets.
- *
- * @example
- * ```typescript
- * // Reload specific widgets
- * await reloadAndroidWidgets(['weather', 'calendar'])
- *
- * // Reload all widgets
- * await reloadAndroidWidgets()
- * ```
- */
-export const reloadAndroidWidgets = async (widgetIds?: string[]): Promise => {
- return VoltraModule.reloadAndroidWidgets(widgetIds ?? null)
-}
-
-/**
- * Clear a widget's stored data.
- *
- * This removes the JSON content and deep link URL for the specified widget,
- * causing it to show its placeholder state.
- *
- * @param widgetId - The widget identifier to clear
- *
- * @example
- * ```typescript
- * await clearAndroidWidget('weather')
- * ```
- */
-export const clearAndroidWidget = async (widgetId: string): Promise => {
- return VoltraModule.clearAndroidWidget(widgetId)
-}
-
-/**
- * Clear all widgets' stored data.
- *
- * This removes the JSON content and deep link URLs for all configured widgets,
- * causing them to show their placeholder states.
- *
- * @example
- * ```typescript
- * await clearAllAndroidWidgets()
- * ```
- */
-export const clearAllAndroidWidgets = async (): Promise => {
- return VoltraModule.clearAllAndroidWidgets()
-}
-
-/**
- * Request to pin a widget to the home screen.
- *
- * This will show the Android system pin widget dialog, allowing the user
- * to add the widget to their home screen. Optionally, you can provide
- * preview dimensions to show a preview of the widget in the pin dialog.
- *
- * See: https://developer.android.com/develop/ui/compose/glance/pin-in-app
- *
- * @param widgetId - The widget identifier to pin
- * @param options - Optional settings for the pin request
- * @param options.previewWidth - Optional preview width in dp (default: 245)
- * @param options.previewHeight - Optional preview height in dp (default: 115)
- * @returns Promise that resolves to true if the pin request was successful
- *
- * @example Basic usage
- * ```typescript
- * const success = await requestPinAndroidWidget('weather')
- * if (success) {
- * console.log('Widget pin request sent')
- * }
- * ```
- *
- * @example With preview dimensions
- * ```typescript
- * const success = await requestPinAndroidWidget('weather', {
- * previewWidth: 245,
- * previewHeight: 115
- * })
- * ```
- */
-export const requestPinAndroidWidget = async (
- widgetId: string,
- options?: { previewWidth?: number; previewHeight?: number }
-): Promise => {
- return VoltraModule.requestPinGlanceAppWidget(widgetId, options)
-}
-
-/**
- * Fetches all active widget instances for the containing app on Android.
- *
- * @returns A promise that resolves to an array of active widget instances.
- *
- * @example
- * ```typescript
- * const widgets = await getActiveWidgets()
- * console.log('Active widgets:', widgets)
- * ```
- */
-export const getActiveWidgets = async (): Promise => {
- return VoltraModule.getActiveWidgets()
-}
+export {
+ clearAllAndroidWidgets,
+ clearAndroidWidget,
+ getActiveWidgets,
+ reloadAndroidWidgets,
+ requestPinAndroidWidget,
+ updateAndroidWidget,
+} from '@use-voltra/android/client'
diff --git a/packages/voltra/src/android/widgets/renderer.ts b/packages/voltra/src/android/widgets/renderer.ts
index a55dadf8..786c0ba6 100644
--- a/packages/voltra/src/android/widgets/renderer.ts
+++ b/packages/voltra/src/android/widgets/renderer.ts
@@ -1,60 +1,6 @@
-import { ComponentRegistry, createVoltraRenderer } from '../../renderer/renderer.js'
-import { getAndroidComponentId } from '../payload/component-ids.js'
-import type { AndroidWidgetVariants } from './types.js'
-
-/**
- * Android component registry that uses Android component ID mappings
- */
-const androidComponentRegistry: ComponentRegistry = {
- getComponentId: (name: string) => getAndroidComponentId(name),
-}
-
-/**
- * Renders Android widget variants to JSON with size breakpoints.
- *
- * Output format:
- * {
- * "v": 1,
- * "variants": {
- * "150x100": { ... node tree ... },
- * "150x200": { ... node tree ... },
- * "215x100": { ... node tree ... }
- * },
- * "s": [...shared styles...],
- * "e": [...shared elements...]
- * }
- */
-export const renderAndroidWidgetToJson = (variants: AndroidWidgetVariants): Record => {
- const renderer = createVoltraRenderer(androidComponentRegistry)
-
- // Add each size variant with key format "WIDTHxHEIGHT"
- for (const { size, content } of variants) {
- const key = `${size.width}x${size.height}`
- renderer.addRootNode(key, content)
- }
-
- const rendered = renderer.render()
-
- // Extract variant keys (everything except v, s, e which are metadata)
- const variantsMap: Record = {}
- const metadataKeys = ['v', 's', 'e']
-
- for (const key of Object.keys(rendered)) {
- if (!metadataKeys.includes(key)) {
- variantsMap[key] = rendered[key]
- delete rendered[key]
- }
- }
-
- // Add variants as a nested object (expected by Kotlin parser)
- rendered.variants = variantsMap
-
- return rendered
-}
-
-/**
- * Renders Android widget variants to a JSON string.
- */
-export const renderAndroidWidgetToString = (variants: AndroidWidgetVariants): string => {
- return JSON.stringify(renderAndroidWidgetToJson(variants))
-}
+export {
+ renderAndroidViewToJson,
+ renderAndroidWidgetToJson,
+ renderAndroidWidgetToString,
+ type AndroidWidgetRenderOptions,
+} from '@use-voltra/android/internal'
diff --git a/packages/voltra/src/widget-server.ts b/packages/voltra/src/widget-server.ts
index c889abaf..6d35accb 100644
--- a/packages/voltra/src/widget-server.ts
+++ b/packages/voltra/src/widget-server.ts
@@ -1,6 +1,9 @@
///
import type { AndroidWidgetVariants } from '@use-voltra/android-server'
+import { renderAndroidWidgetToString } from '@use-voltra/android-server'
+import { renderWidgetToString } from '@use-voltra/ios-server'
+import type { WidgetVariants } from '@use-voltra/ios-server'
import { createWidgetUpdateExpressHandler as createSharedWidgetUpdateExpressHandler } from '@use-voltra/server'
import { createWidgetUpdateHandler as createSharedWidgetUpdateHandler } from '@use-voltra/server'
import { createWidgetUpdateNodeHandler as createSharedWidgetUpdateNodeHandler } from '@use-voltra/server'
@@ -10,9 +13,6 @@ import type {
WidgetUpdateHandler,
WidgetUpdateNodeHandler,
} from '@use-voltra/server'
-import { renderAndroidWidgetToString } from '@use-voltra/android-server'
-import { renderWidgetToString } from '@use-voltra/ios-server'
-import type { WidgetVariants } from '@use-voltra/ios-server'
export { renderAndroidWidgetToString } from '@use-voltra/android-server'
export type { AndroidWidgetVariants } from '@use-voltra/android-server'
@@ -35,30 +35,32 @@ export interface WidgetUpdateHandlerOptions {
validateToken?: (token: string) => Promise | boolean
}
-function toSharedOptions(options: WidgetUpdateHandlerOptions) {
+const toSharedOptions = (options: WidgetUpdateHandlerOptions) => {
+ const renderAndroid = options.renderAndroid
+
return {
validateToken: options.validateToken,
renderIos: async (request: WidgetRenderRequest) => {
const variants = await options.renderIos(request)
return variants ? renderWidgetToString(variants) : null
},
- renderAndroid: options.renderAndroid
+ renderAndroid: renderAndroid
? async (request: WidgetRenderRequest) => {
- const variants = await options.renderAndroid?.(request)
+ const variants = await renderAndroid(request)
return variants ? renderAndroidWidgetToString(variants) : null
}
: undefined,
}
}
-export function createWidgetUpdateHandler(options: WidgetUpdateHandlerOptions): WidgetUpdateHandler {
+export const createWidgetUpdateHandler = (options: WidgetUpdateHandlerOptions): WidgetUpdateHandler => {
return createSharedWidgetUpdateHandler(toSharedOptions(options))
}
-export function createWidgetUpdateNodeHandler(options: WidgetUpdateHandlerOptions): WidgetUpdateNodeHandler {
+export const createWidgetUpdateNodeHandler = (options: WidgetUpdateHandlerOptions): WidgetUpdateNodeHandler => {
return createSharedWidgetUpdateNodeHandler(toSharedOptions(options))
}
-export function createWidgetUpdateExpressHandler(options: WidgetUpdateHandlerOptions): WidgetUpdateExpressHandler {
+export const createWidgetUpdateExpressHandler = (options: WidgetUpdateHandlerOptions): WidgetUpdateExpressHandler => {
return createSharedWidgetUpdateExpressHandler(toSharedOptions(options))
}
diff --git a/packages/voltra/src/widgets/renderer.ts b/packages/voltra/src/widgets/renderer.ts
index 32d096d7..7b782c9f 100644
--- a/packages/voltra/src/widgets/renderer.ts
+++ b/packages/voltra/src/widgets/renderer.ts
@@ -9,7 +9,7 @@ export const renderWidgetToJson = (variants: WidgetVariants): Record
+
+
+ 21°
+
+
+
+
+
+ )
+}
+```
+
+## Where you can use them
+
+You can use `AndroidDynamicColors.*` anywhere Android accepts a color value, including:
+
+- `style.backgroundColor`
+- `style.color`
+- `Image.tintColor`
+- button `backgroundColor` and `contentColor`
+- `TitleBar.textColor` and `TitleBar.iconColor`
+- switch, checkbox, and radio button colors
+- progress indicator colors
+- chart mark colors
+
+## Server-driven widgets
+
+Dynamic color tokens work in server-rendered Android widgets too.
+
+```tsx
+import { AndroidDynamicColors, VoltraAndroid } from 'voltra/android'
+
+const content = (
+
+
+ Server-rendered widget
+
+
+)
+```
+
+The same `AndroidDynamicColors.*` values work whether the widget is rendered in-app or returned from your server.
+
+## Migration notes
+
+Voltra no longer uses the old Android dynamic palette snapshot approach.
+
+- Use `AndroidDynamicColors.*` for Android widgets that should react to system palette changes.
+- Keep using literal colors when you want a fixed color.
+- There is no `useAndroidDynamicColorPalette()` or `getAndroidDynamicColorPalette()` API anymore.
diff --git a/website/docs/android/development/server-driven-widgets.md b/website/docs/android/development/server-driven-widgets.md
index 70f6c614..9740c2d9 100644
--- a/website/docs/android/development/server-driven-widgets.md
+++ b/website/docs/android/development/server-driven-widgets.md
@@ -4,6 +4,8 @@ Server-driven widgets allow your Android Home Screen widgets to periodically fet
Before you start, make sure the widget is registered in the Voltra plugin config and plan to rebuild the native app after adding or changing server-driven widget settings.
+Android semantic color tokens from [`AndroidDynamicColors`](./dynamic-colors) work in server-rendered widgets too, so your backend can return dynamic Material roles instead of fixed hex values.
+
## How it works
1. You configure a `serverUpdate` URL in your Android widget's plugin config
@@ -66,7 +68,7 @@ Voltra provides widget server handlers for the common runtime styles. Use `creat
import { createServer } from 'node:http'
import React from 'react'
import { createWidgetUpdateNodeHandler } from 'voltra/server'
-import { VoltraAndroid } from 'voltra/android'
+import { AndroidDynamicColors, VoltraAndroid } from 'voltra/android'
const handler = createWidgetUpdateNodeHandler({
renderAndroid: async (req) => {
@@ -82,15 +84,15 @@ const handler = createWidgetUpdateNodeHandler({
style={{
width: '100%',
height: '100%',
- backgroundColor: '#101828',
+ backgroundColor: AndroidDynamicColors.surface,
padding: 16,
}}
>
-
+
{weather.temp}°
-
+
{weather.condition}
diff --git a/website/docs/android/development/styling.md b/website/docs/android/development/styling.md
index be7959fa..adb04052 100644
--- a/website/docs/android/development/styling.md
+++ b/website/docs/android/development/styling.md
@@ -2,6 +2,8 @@
You can style Voltra components on Android using React Native-style `style` props. These properties are automatically converted to Jetpack Compose Glance modifiers.
+For Android system-aware colors, use [`AndroidDynamicColors`](./dynamic-colors) from `voltra/android` instead of snapshotting palette values in JavaScript.
+
:::warning Glance Limitations
Android widgets are built using **Jetpack Compose Glance**, which has a significantly more limited styling API compared to standard Compose or SwiftUI. Many common React Native style properties are either not supported or have limited support.
:::
@@ -21,7 +23,7 @@ The following React Native style properties are supported on Android:
### Visual Style
-- `backgroundColor` - Background color (hex strings or color names).
+- `backgroundColor` - Background color (hex strings, color names, or `AndroidDynamicColors.*` tokens).
- `borderRadius` - Corner radius value. **Note:** Requires Android 12+ (API 31). On older versions, this property is ignored.
### Text
@@ -29,7 +31,7 @@ The following React Native style properties are supported on Android:
- `fontSize` - Font size in sp.
- `fontWeight` - Supports `"normal"` and `"bold"`.
- `fontFamily` - Font family name. Built-in values: `"monospace"`, `"serif"`, `"sans-serif"`, `"cursive"`. For custom fonts, see [Custom Fonts](./custom-fonts).
-- `color` - Text color.
+- `color` - Text color (literal colors or `AndroidDynamicColors.*`).
- `textDecorationLine` - Supports `"underline"` and `"line-through"`.
- `textAlign` - Alignment of text within the component (`"left"`, `"center"`, `"right"`).
- `numberOfLines` - Limits the number of lines displayed.
@@ -42,6 +44,35 @@ In addition to general styles, `Image` components support:
- `alpha` - Opacity of the image (0.0 to 1.0).
- `tintColor` - Applies a color filter to the image.
+## Dynamic colors
+
+Android widgets can use semantic Material color roles that resolve through native `GlanceTheme.colors.*` values during rendering.
+
+```tsx
+import { AndroidDynamicColors, VoltraAndroid } from 'voltra/android'
+
+const element = (
+
+
+ Android Widget Text
+
+
+)
+```
+
+This is the preferred approach when you want widgets to follow Android's dynamic palette even when the app is not running. See [Dynamic Colors](./dynamic-colors) for the full role list and server-rendering behavior.
+
## Limitations
The following properties are **NOT supported** on Android due to Glance limitations:
diff --git a/website/docs/android/introduction.md b/website/docs/android/introduction.md
index 501ddf96..3d2d3873 100644
--- a/website/docs/android/introduction.md
+++ b/website/docs/android/introduction.md
@@ -12,6 +12,8 @@ Android widgets have different layout and styling rules compared to iOS Live Act
Voltra abstracts these differences where possible, but provides platform-specific namespaces to ensure your UI looks and behaves correctly on each platform.
+Voltra also exposes Android-specific semantic dynamic colors through `AndroidDynamicColors`, which lets widgets follow the current Material palette without requiring a JavaScript re-render. See [Dynamic Colors](./development/dynamic-colors).
+
### Simple Android Widget
```tsx