@hanzogui/kitchen-sink 3.0.5

package/src/usecases/ThemeChange.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { Button, Card, Square, Theme, YStack, Text } from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+export function ThemeChange() {
+  return (
+    <>
+      <Inner level={0}>
+        <Inner level={1}>
+          <Card width={100} height={100} />
+        </Inner>
+      </Inner>
+    </>
+  )
+}
+
+export function Inner({
+  children,
+  level,
+}: {
+  children?: React.ReactNode
+  level: number
+}) {
+  const themes = [
+    'yellow',
+    'blue',
+    'orange',
+    'green',
+    'purple',
+    'pink',
+    'red',
+    'gray',
+  ] as const
+  const [themeIndex, setThemeIndex] = React.useState(0)
+  const theme = themes[themeIndex]
+
+  const cycleTheme = () => {
+    setThemeIndex((prevIndex) => (prevIndex + 1) % themes.length)
+  }
+
+  return (
+    <YStack
+      borderWidth={1}
+      borderColor="red"
+      padding="$4"
+      alignItems="center"
+      justifyContent="center"
+      gap="$5"
+    >
+      <Text id={`${TEST_IDS.themeInfo}-${level}`}>
+        <Text fontWeight="bold">Inner</Text> {JSON.stringify({ theme })}
+      </Text>
+
+      <Button
+        id={`${TEST_IDS.changeThemeButton}-${level}`}
+        onPress={() => {
+          cycleTheme()
+        }}
+      >
+        Change Theme
+      </Button>
+
+      <Theme name={theme}>
+        <SandboxThemeChildStatic level={level} />
+        <SandboxThemeChildDynamic level={level} />
+        <YStack gap="$2">
+          <Theme name="accent">
+            <Button>Accent</Button>
+          </Theme>
+          <Button>Normal</Button>
+        </YStack>
+
+        {children}
+      </Theme>
+    </YStack>
+  )
+}
+
+const SandboxThemeChildStatic = React.memo(({ level }: { level: number }) => {
+  return (
+    <Square
+      id={`${TEST_IDS.staticSquare}-${level}`}
+      size={20}
+      backgroundColor="$color10"
+    />
+  )
+})
+
+const SandboxThemeChildDynamic = React.memo(({ level }: { level: number }) => {
+  return (
+    <Square
+      id={`${TEST_IDS.dynamicSquare}-${level}`}
+      transition="bouncy"
+      size={20}
+      backgroundColor="$color10"
+      animateOnly={['backgroundColor']}
+    />
+  )
+})

package/src/usecases/ThemeChangeBasic.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { Button, Text, Theme, YStack } from '@hanzo/gui'
+
+/**
+ * Basic theme change test - no animations involved.
+ * Tests that <Theme name="X"> correctly updates child styling when X changes.
+ *
+ * This is the simplest possible theme change scenario:
+ * 1. View with bg="$color4" inside Theme
+ * 2. Button to toggle theme between "red" and "blue"
+ * 3. View color should change accordingly
+ *
+ * Bug report: with react-native and reanimated animation drivers,
+ * the theme change does not visually update. The verbose log shows:
+ * useTheme(«id») getNextState => null needsUpdate false shouldRerender false
+ */
+export function ThemeChangeBasic() {
+  const [themeName, setThemeName] = useState<'red' | 'blue'>('red')
+
+  return (
+    <YStack padding="$4" gap="$4" alignItems="center" testID="theme-change-basic-root">
+      <Text testID="theme-change-basic-label">Current theme: {themeName}</Text>
+
+      <Button
+        testID="theme-change-basic-toggle"
+        onPress={() => setThemeName((t) => (t === 'red' ? 'blue' : 'red'))}
+      >
+        Toggle Theme
+      </Button>
+
+      <Theme name={themeName}>
+        {/*
+          This exact pattern was reported as broken with native/reanimated drivers.
+          The YStack's bg="$color4" should change color when theme changes.
+        */}
+        <YStack
+          testID="theme-change-basic-square"
+          width={200}
+          height={200}
+          alignItems="center"
+          justifyContent="center"
+          backgroundColor="$color4"
+          borderRadius={14}
+        >
+          <Text color="$color12" fontWeight="bold">
+            {themeName.toUpperCase()}
+          </Text>
+        </YStack>
+      </Theme>
+    </YStack>
+  )
+}

package/src/usecases/ThemeComponentResolution.tsx

@@ -0,0 +1,119 @@
+import { Square, Text, Theme, useThemeName, YStack } from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+/**
+ * Test cases for theme component resolution (commit 5839319146 goals)
+ *
+ * These tests verify that the theme resolution algorithm correctly handles:
+ * 1. Explicit scheme overrides (e.g., dark_green inside blue parent)
+ * 2. Inheriting scheme from parent for component themes
+ * 3. Preserving sub-themes when only componentName is provided (no backtracking)
+ */
+
+function ThemeNameDisplay({ id }: { id: string }) {
+  const themeName = useThemeName()
+  return (
+    <Square
+      id={id}
+      bg="$background"
+      size={100}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Text fontSize="$2" color="$color">
+        {themeName}
+      </Text>
+    </Square>
+  )
+}
+
+export function ThemeComponentResolution() {
+  return (
+    <YStack gap="$4" padding="$4">
+      <Text fontWeight="bold" fontSize="$6">
+        Theme Component Resolution Tests
+      </Text>
+
+      {/* Goal 1a: Explicit scheme override */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Goal 1a: Explicit scheme override</Text>
+        <Text fontSize="$2">
+          When theme="dark_green" is set explicitly, it should be used even inside a blue
+          parent
+        </Text>
+
+        {/* Direct: dark_green theme */}
+        <YStack gap="$1">
+          <Text>Direct dark_green:</Text>
+          <Theme name="dark_green">
+            <ThemeNameDisplay id={TEST_IDS.themeExplicitSchemeDirect} />
+          </Theme>
+        </YStack>
+
+        {/* Nested: blue parent, dark_green child */}
+        <YStack gap="$1">
+          <Text>Nested: blue → dark_green (should match above):</Text>
+          <Theme name="blue">
+            <Theme name="dark_green">
+              <ThemeNameDisplay id={TEST_IDS.themeExplicitSchemeNested} />
+            </Theme>
+          </Theme>
+        </YStack>
+      </YStack>
+
+      {/* Goal 1b: Inherit scheme for component */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Goal 1b: Inherit scheme from parent</Text>
+        <Text fontSize="$2">
+          When theme="green" (no scheme), it should inherit light/dark from parent
+        </Text>
+
+        {/* Direct: light_green theme */}
+        <YStack gap="$1">
+          <Text>Direct light_green:</Text>
+          <Theme name="light_green">
+            <ThemeNameDisplay id={TEST_IDS.themeInheritSchemeDirect} />
+          </Theme>
+        </YStack>
+
+        {/* Nested: light → green should become light_green */}
+        <YStack gap="$1">
+          <Text>Nested: light → green (should become light_green):</Text>
+          <Theme name="light">
+            <Theme name="green">
+              <ThemeNameDisplay id={TEST_IDS.themeInheritSchemeNested} />
+            </Theme>
+          </Theme>
+        </YStack>
+      </YStack>
+
+      {/* Goal 2: Component-only preserves sub-theme */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Goal 2: Sub-theme preservation</Text>
+        <Text fontSize="$2">
+          When inside surface1 sub-theme, components should NOT backtrack to find a
+          component theme
+        </Text>
+
+        {/* Direct: light_blue_surface1 */}
+        <YStack gap="$1">
+          <Text>Direct light_blue_surface1:</Text>
+          <Theme name="light_blue_surface1">
+            <ThemeNameDisplay id={TEST_IDS.themeSurface1Direct} />
+          </Theme>
+        </YStack>
+
+        {/* Nested: blue → surface1, then a Button (should stay on surface1, not get Button theme) */}
+        <YStack gap="$1">
+          <Text>Nested: blue → surface1 (component should stay on surface1):</Text>
+          <Theme name="blue">
+            <Theme name="surface1">
+              <ThemeNameDisplay id={TEST_IDS.themeSurface1WithComponent} />
+            </Theme>
+          </Theme>
+        </YStack>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/ThemeConditionalName.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { Button, Square, Text, Theme, YStack } from '@hanzo/gui'
+
+/**
+ * Tests that <Theme name={active ? 'accent' : undefined}> correctly
+ * reverts to the parent theme when the condition becomes false.
+ *
+ * Regression test for: commit c85f5e72ecbc6599bb164f702edcaef147214e87
+ * The optimization in getNextState incorrectly returned stale theme state
+ * when name changed from a value to undefined.
+ */
+export function ThemeConditionalName() {
+  const [active, setActive] = useState(false)
+
+  return (
+    <YStack padding="$4" gap="$4" alignItems="center">
+      <Text id="theme-conditional-label">active: {String(active)}</Text>
+
+      <Button id="theme-conditional-toggle" onPress={() => setActive((a) => !a)}>
+        Toggle
+      </Button>
+
+      {/* parent theme square for color comparison */}
+      <Square id="theme-conditional-parent" size={60} backgroundColor="$background" />
+
+      <Theme name={active ? 'accent' : undefined}>
+        <Square id="theme-conditional-child" size={60} backgroundColor="$background" />
+      </Theme>
+    </YStack>
+  )
+}

package/src/usecases/ThemeMediaAnimationCase.tsx

@@ -0,0 +1,39 @@
+import { Square, YStack, Text } from '@hanzo/gui'
+
+/**
+ * Test case for $theme-dark/$theme-light with animation drivers.
+ *
+ * Bug: When using an inline animation driver (e.g., motion), base styles are
+ * applied as inline styles which override theme media CSS classes due to
+ * CSS specificity. This means $theme-dark and $theme-light have no effect.
+ */
+export function ThemeMediaAnimationCase() {
+  return (
+    <YStack p="$4" gap="$4">
+      <Text fontSize="$5" fontWeight="bold">
+        Theme Media + Animation
+      </Text>
+
+      <Square
+        testID="theme-media-animated"
+        data-testid="theme-media-animated"
+        size={100}
+        bg="$color1"
+        transition="quick"
+        $theme-dark={{
+          bg: '$color3',
+        }}
+      />
+
+      <Square
+        testID="theme-media-static"
+        data-testid="theme-media-static"
+        size={100}
+        bg="$color1"
+        $theme-dark={{
+          bg: '$color3',
+        }}
+      />
+    </YStack>
+  )
+}

package/src/usecases/ThemeMutation.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { addTheme, updateTheme } from '@hanzogui/theme'
+import {
+  Button,
+  Square,
+  Text,
+  Theme,
+  YStack,
+  useIsomorphicLayoutEffect,
+} from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+/**
+ * Test case for theme mutation with DynamicColorIOS optimization.
+ *
+ * This tests that when updateTheme() is called, components correctly
+ * re-render to show the new theme values - even when using DynamicColorIOS
+ * optimization on iOS (which normally avoids tracking theme keys).
+ *
+ * The fix ensures forceUpdateThemes() properly triggers re-renders
+ * regardless of whether theme keys were tracked.
+ */
+export function ThemeMutation() {
+  const [themeName, setThemeName] = React.useState<string | null>(null)
+  const [currentColor, setCurrentColor] = React.useState('red')
+
+  // Create the custom theme on mount
+  useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: 'mutation-test',
+      insertCSS: true,
+      theme: {
+        background: 'red',
+      },
+    })
+    setThemeName('mutation-test')
+  }, [])
+
+  const colors = ['red', 'blue', 'green', 'purple', 'orange'] as const
+
+  const cycleColor = () => {
+    const currentIndex = colors.indexOf(currentColor as (typeof colors)[number])
+    const nextIndex = (currentIndex + 1) % colors.length
+    const nextColor = colors[nextIndex]
+
+    updateTheme({
+      name: 'mutation-test',
+      theme: {
+        background: nextColor,
+      },
+    })
+
+    // Update state to track what color we expect
+    // Note: We do NOT call useForceUpdate() here - the fix should make
+    // forceUpdateThemes() (called internally by updateTheme) work properly
+    setCurrentColor(nextColor)
+  }
+
+  if (!themeName) {
+    return (
+      <YStack padding="$4" alignItems="center" gap="$4">
+        <Text>Loading theme...</Text>
+      </YStack>
+    )
+  }
+
+  return (
+    <YStack padding="$4" alignItems="center" gap="$4">
+      <Text testID={TEST_IDS.themeMutationColorText}>Expected color: {currentColor}</Text>
+
+      <Theme name={themeName as any}>
+        <Square
+          testID={TEST_IDS.themeMutationSquare}
+          size={100}
+          backgroundColor="$background"
+          borderRadius="$4"
+        />
+      </Theme>
+
+      <Button testID={TEST_IDS.themeMutationButton} onPress={cycleColor}>
+        Change Theme Color
+      </Button>
+    </YStack>
+  )
+}

package/src/usecases/ThemeNested.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { Square, Theme, YStack, Text } from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+/**
+ * Test case for GitHub issue #3673: Nested theme regression
+ *
+ * When using nested themes like <Theme name="blue"><Theme name="surface3">,
+ * the parent color context (blue) should be preserved, resulting in
+ * light_blue_surface3 theme being applied.
+ *
+ * The bug causes the nested theme to lose the color context, resulting in
+ * just light_surface3 being applied instead.
+ */
+export function ThemeNested() {
+  return (
+    <YStack gap="$4" padding="$4">
+      <Text fontWeight="bold" fontSize="$6">
+        Nested Theme Test (Issue #3673)
+      </Text>
+
+      {/* Test Case 1: Direct theme vs nested theme comparison */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 1: Direct light_blue_surface3</Text>
+        <Theme name="light_blue_surface3">
+          <Square id={TEST_IDS.nestedThemeDirect} bg="$background" size={100} />
+        </Theme>
+      </YStack>
+
+      <YStack gap="$2">
+        <Text fontWeight="bold">
+          Case 2: Nested blue → surface3 (should match Case 1)
+        </Text>
+        <Theme name="blue">
+          <Theme name="surface3">
+            <Square id={TEST_IDS.nestedThemeNested} bg="$background" size={100} />
+          </Theme>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 2: With explicit light parent */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 3: Nested light → blue → surface3</Text>
+        <Theme name="light">
+          <Theme name="blue">
+            <Theme name="surface3">
+              <Square id={TEST_IDS.nestedThemeWithParent} bg="$background" size={100} />
+            </Theme>
+          </Theme>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 3: Different color - red */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 4: Direct light_red_surface3</Text>
+        <Theme name="light_red_surface3">
+          <Square id={TEST_IDS.nestedThemeRedDirect} bg="$background" size={100} />
+        </Theme>
+      </YStack>
+
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 5: Nested red → surface3 (should match Case 4)</Text>
+        <Theme name="red">
+          <Theme name="surface3">
+            <Square id={TEST_IDS.nestedThemeRedNested} bg="$background" size={100} />
+          </Theme>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 4: Verify blue and red are different */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 6: Direct light_surface3 (no color - baseline)</Text>
+        <Theme name="light_surface3">
+          <Square id={TEST_IDS.nestedThemeNoColor} bg="$background" size={100} />
+        </Theme>
+      </YStack>
+
+      {/* Test Case 5: Exact reproduction from issue #3673 - surface1 → surface3 */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">
+          Case 7: Direct light_blue_surface3 (expected result)
+        </Text>
+        <Theme name="light_blue_surface3">
+          <Square id={TEST_IDS.nestedSurface1To3Direct} bg="$background" size={100} />
+        </Theme>
+      </YStack>
+
+      <YStack gap="$2">
+        <Text fontWeight="bold">
+          Case 8: Nested blue → surface1 → surface3 (should match Case 7)
+        </Text>
+        <Theme name="blue">
+          <Theme name="surface1">
+            <Theme name="surface3">
+              <Square id={TEST_IDS.nestedSurface1To3Nested} bg="$background" size={100} />
+            </Theme>
+          </Theme>
+        </Theme>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/ThemeReset.tsx

@@ -0,0 +1,62 @@
+import { Button, Square, Theme, YStack, Text } from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+export function ThemeReset() {
+  return (
+    <YStack gap="$4" padding="$4">
+      <Text fontWeight="bold" fontSize="$6">
+        Theme Reset Test Cases
+      </Text>
+
+      {/* Test Case 1: Reset from nested themes */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 1: Reset from dark → pink → blue</Text>
+        <Theme name="dark">
+          <Theme name="pink">
+            <Theme name="blue">
+              <Theme reset>
+                <Button id={TEST_IDS.resetButton1}>
+                  Button should be dark (grandparent)
+                </Button>
+              </Theme>
+            </Theme>
+          </Theme>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 2: Reset from dark → pink (documentation example) */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 2: Reset from dark → pink (doc example)</Text>
+        <Theme name="dark">
+          <Theme name="pink">
+            <Theme reset>
+              <Square id={TEST_IDS.resetSquare1} bg="$background" size={50} />
+            </Theme>
+          </Theme>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 3: Reset from dark only */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 3: Reset from dark only</Text>
+        <Theme name="dark">
+          <Theme reset>
+            <Square id={TEST_IDS.resetSquare2} bg="$background" size={50} />
+          </Theme>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 4: Reset from dark with button */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Case 4: Reset from dark with button</Text>
+        <Theme name="dark">
+          <Button id={TEST_IDS.darkButton}>I was born in the dark</Button>
+          <Theme reset>
+            <Button id={TEST_IDS.resetButton2}>I want to go back to the light</Button>
+          </Theme>
+        </Theme>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/ThemeShallowCase.tsx

@@ -0,0 +1,83 @@
+import { Square, View, Text, Theme, YStack } from '@hanzo/gui'
+
+import { TEST_IDS } from '../constants/test-ids'
+
+/**
+ * Test case for themeShallow prop behavior
+ *
+ * The themeShallow prop should NOT affect DOM structure (span wrapping).
+ * It only affects whether grandchildren inherit the theme change.
+ *
+ * This test verifies that toggling themeShallow doesn't cause DOM reparenting.
+ */
+export function ThemeShallowCase() {
+  return (
+    <YStack gap="$4" padding="$4">
+      <Text fontWeight="bold" fontSize="$6">
+        Theme Shallow DOM Structure Test
+      </Text>
+
+      {/* Test Case 1: Without themeShallow - normal theme wrapping */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">Without themeShallow (normal)</Text>
+        <Theme name="dark">
+          <View
+            id={TEST_IDS.themeShallowNormal}
+            backgroundColor="$background"
+            padding="$4"
+          >
+            <Text color="$color">Normal theme - children get dark theme</Text>
+            <Theme name="light">
+              <Square backgroundColor="$background" size={50}>
+                <Text color="$color" fontSize="$1">
+                  Light
+                </Text>
+              </Square>
+            </Theme>
+          </View>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 2: With themeShallow - theme doesn't propagate to grandchildren */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">With themeShallow</Text>
+        <Theme name="dark">
+          <View
+            id={TEST_IDS.themeShallowEnabled}
+            themeShallow
+            backgroundColor="$background"
+            padding="$4"
+          >
+            <Text color="$color">
+              Shallow theme - grandchildren reset to parent theme
+            </Text>
+            <Theme name="light">
+              <Square backgroundColor="$background" size={50}>
+                <Text color="$color" fontSize="$1">
+                  Light
+                </Text>
+              </Square>
+            </Theme>
+          </View>
+        </Theme>
+      </YStack>
+
+      {/* Test Case 3: Component with themeShallow for DOM structure comparison */}
+      <YStack gap="$2">
+        <Text fontWeight="bold">DOM structure comparison container</Text>
+        <View id={TEST_IDS.themeShallowContainer}>
+          <Theme name="dark">
+            <View
+              id={TEST_IDS.themeShallowInner}
+              themeShallow
+              backgroundColor="$background"
+              padding="$2"
+            >
+              <Text color="$color">Inner content</Text>
+            </View>
+          </Theme>
+        </View>
+      </YStack>
+    </YStack>
+  )
+}