feat: resolvable dynamic values for widgets

example/app.json

@@ -53,6 +53,20 @@
                 "intervalMinutes": 15,
                 "refresh": true
               }
+            },
+            {
+              "id": "resolvable_playground",
+              "displayName": "Resolvable Values",
+              "description": "Minimal widget playground for runtime env resolution",
+              "supportedFamilies": [
+                "systemSmall",
+                "systemMedium",
+                "systemLarge",
+                "accessoryCircular",
+                "accessoryRectangular",
+                "accessoryInline"
+              ],
+              "initialStatePath": "./widgets/ios/ios-resolvable-playground-initial.tsx"
             }
           ],
           "android": {

example/app/_layout.tsx

@@ -1,9 +1,13 @@
 import { Stack } from 'expo-router'
+import { useEffect } from 'react'
+import { Platform } from 'react-native'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { reloadWidgets, updateWidget } from 'voltra/client'
 
 import { BackgroundWrapper } from '~/components/BackgroundWrapper'
 import { useVoltraEvents } from '~/hooks/useVoltraEvents'
 import { updateAndroidVoltraWidget } from '~/widgets/android/updateAndroidVoltraWidget'
+import { resolvablePlaygroundVariants } from '~/widgets/ios/IosResolvablePlaygroundWidget'
 
 updateAndroidVoltraWidget({ width: 300, height: 200 })
 
@@ -19,6 +23,20 @@ export const unstable_settings = {
 export default function Layout() {
   useVoltraEvents()
 
+  useEffect(() => {
+    if (Platform.OS !== 'ios') {
+      return
+    }
+    void (async () => {
+      try {
+        await updateWidget('resolvable_playground', resolvablePlaygroundVariants)
+        await reloadWidgets(['resolvable_playground'])
+      } catch {
+        // Widget host may be unavailable (e.g. simulator without extension).
+      }
+    })()
+  }, [])
+
   return (
     <SafeAreaProvider>
       <Stack

example/screens/testing-grounds/AndroidOngoingNotificationTestingScreen.tsx

@@ -288,7 +288,7 @@ export default function AndroidOngoingNotificationTestingScreen() {
 
   const handleUpsertPayload = async () => {
     try {
-      const payloadString = renderedPayload || renderAndroidOngoingNotificationPayload(content)
+      const payloadString = renderAndroidOngoingNotificationPayload(content)
       const payload = JSON.parse(payloadString) as AndroidOngoingNotificationPayload
       const result = await upsertAndroidOngoingNotification(payload, getOngoingNotificationOptions())
       syncActiveState(result.notificationId)

example/widgets/android/AndroidMaterialColorsWidget.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AndroidDynamicColors, VoltraAndroid } from 'voltra/android'
+import { env, VoltraAndroid, type AndroidColorValue } from 'voltra/android'
 
 export type AndroidMaterialColorsRenderSource = 'client' | 'server' | 'initial'
 
@@ -20,8 +20,8 @@ const Swatch = ({
   textColor,
 }: {
   label: string
-  backgroundColor: string
-  textColor: string
+  backgroundColor: AndroidColorValue
+  textColor: AndroidColorValue
 }) => {
   return (
     <VoltraAndroid.Column
@@ -38,47 +38,43 @@ const Swatch = ({
         {label}
       </VoltraAndroid.Text>
       <VoltraAndroid.Spacer style={{ height: 6 }} />
-      <VoltraAndroid.Text style={{ fontSize: 13, fontWeight: '700', color: textColor }}>
-        {backgroundColor.slice(0, 7).toUpperCase()}
-      </VoltraAndroid.Text>
+      <VoltraAndroid.Text style={{ fontSize: 13, fontWeight: '700', color: textColor }}>Dynamic</VoltraAndroid.Text>
     </VoltraAndroid.Column>
   )
 }
 
 export const AndroidMaterialColorsWidget = ({ source, renderedAt }: AndroidMaterialColorsWidgetProps) => {
-  const colors = AndroidDynamicColors
-
   return (
     <VoltraAndroid.Box
       style={{
         width: '100%',
         height: '100%',
-        backgroundColor: colors.widgetBackground,
+        backgroundColor: env.widgetBackground,
         borderRadius: 28,
         padding: 16,
       }}
     >
       <VoltraAndroid.Column style={{ width: '100%', height: '100%' }}>
         <VoltraAndroid.Row style={{ width: '100%' }} verticalAlignment="center-vertically">
           <VoltraAndroid.Column style={{ flex: 1 }}>
-            <VoltraAndroid.Text style={{ fontSize: 11, fontWeight: '600', color: colors.onSurfaceVariant }}>
+            <VoltraAndroid.Text style={{ fontSize: 11, fontWeight: '600', color: env.onSurfaceVariant }}>
               Material You
             </VoltraAndroid.Text>
             <VoltraAndroid.Spacer style={{ height: 4 }} />
-            <VoltraAndroid.Text style={{ fontSize: 18, fontWeight: '700', color: colors.onBackground }}>
+            <VoltraAndroid.Text style={{ fontSize: 18, fontWeight: '700', color: env.onBackground }}>
               Dynamic Colors
             </VoltraAndroid.Text>
           </VoltraAndroid.Column>
 
           <VoltraAndroid.Box
             style={{
-              backgroundColor: colors.primaryContainer,
+              backgroundColor: env.primaryContainer,
               borderRadius: 999,
               paddingHorizontal: 10,
               paddingVertical: 6,
             }}
           >
-            <VoltraAndroid.Text style={{ fontSize: 10, fontWeight: '700', color: colors.onPrimaryContainer }}>
+            <VoltraAndroid.Text style={{ fontSize: 10, fontWeight: '700', color: env.onPrimaryContainer }}>
               {SOURCE_LABELS[source]}
             </VoltraAndroid.Text>
           </VoltraAndroid.Box>
@@ -87,9 +83,9 @@ export const AndroidMaterialColorsWidget = ({ source, renderedAt }: AndroidMater
         <VoltraAndroid.Spacer style={{ height: 14 }} />
 
         <VoltraAndroid.Row style={{ width: '100%' }}>
-          <Swatch label="Primary" backgroundColor={colors.primary} textColor={colors.onPrimary} />
-          <Swatch label="Secondary" backgroundColor={colors.secondary} textColor={colors.onSecondary} />
-          <Swatch label="Tertiary" backgroundColor={colors.tertiary} textColor={colors.onTertiary} />
+          <Swatch label="Primary" backgroundColor={env.primary} textColor={env.onPrimary} />
+          <Swatch label="Secondary" backgroundColor={env.secondary} textColor={env.onSecondary} />
+          <Swatch label="Tertiary" backgroundColor={env.tertiary} textColor={env.onTertiary} />
         </VoltraAndroid.Row>
 
         <VoltraAndroid.Spacer style={{ height: 12 }} />
@@ -98,17 +94,17 @@ export const AndroidMaterialColorsWidget = ({ source, renderedAt }: AndroidMater
           style={{
             width: '100%',
             flex: 1,
-            backgroundColor: colors.surface,
+            backgroundColor: env.surface,
             borderRadius: 20,
             padding: 12,
           }}
         >
           <VoltraAndroid.Column style={{ width: '100%', height: '100%' }}>
-            <VoltraAndroid.Text style={{ fontSize: 13, fontWeight: '600', color: colors.onSurface }}>
+            <VoltraAndroid.Text style={{ fontSize: 13, fontWeight: '600', color: env.onSurface }}>
               The widget should match your wallpaper-driven palette.
             </VoltraAndroid.Text>
             <VoltraAndroid.Spacer style={{ flex: 1 }} />
-            <VoltraAndroid.Text style={{ fontSize: 11, color: colors.onSurfaceVariant }}>
+            <VoltraAndroid.Text style={{ fontSize: 11, color: env.onSurfaceVariant }}>
               Updated {renderedAt}
             </VoltraAndroid.Text>
           </VoltraAndroid.Column>