@hanzogui/kitchen-sink 3.0.5

package/src/usecases/ActionsSheetComparison.tsx

@@ -0,0 +1,194 @@
+import { useState, useRef } from 'react'
+import { View, Text as RNText, StyleSheet } from 'react-native'
+import ActionSheet, {
+  type ActionSheetRef,
+  ScrollView as ActionScrollView,
+} from 'react-native-actions-sheet'
+import { Button, Sheet, Text, YStack } from '@hanzo/gui'
+
+/**
+ * Side-by-side comparison of Hanzo GUI Sheet vs react-native-actions-sheet
+ * to verify gesture smoothness
+ */
+export function ActionsSheetComparison() {
+  const [guiOpen, setGuiOpen] = useState(false)
+  const [guiPosition, setGuiPosition] = useState(0)
+  const actionsSheetRef = useRef<ActionSheetRef>(null)
+
+  return (
+    <YStack padding="$4" gap="$4" flex={1}>
+      <Text fontSize="$6" fontWeight="bold">
+        Sheet Comparison
+      </Text>
+
+      <Text fontSize="$3" color="$gray11">
+        Compare gesture smoothness between Hanzo GUI Sheet and react-native-actions-sheet
+      </Text>
+
+      <YStack gap="$3">
+        <Button onPress={() => actionsSheetRef.current?.show()} theme="blue" size="$5">
+          Open Actions Sheet (Reference)
+        </Button>
+
+        <Button onPress={() => setGuiOpen(true)} theme="green" size="$5">
+          Open Hanzo GUI Sheet
+        </Button>
+      </YStack>
+
+      <YStack gap="$2" padding="$3" bg="$backgroundHover" borderRadius="$2">
+        <Text fontWeight="bold">Test instructions:</Text>
+        <Text fontSize="$2">1. Open each sheet</Text>
+        <Text fontSize="$2">2. Drag down to lower snap point</Text>
+        <Text fontSize="$2">3. Drag up - watch for jitter when sheet hits top</Text>
+        <Text fontSize="$2">
+          4. Scroll content, then drag down - watch for jitter at scroll=0
+        </Text>
+      </YStack>
+
+      {/* Hanzo GUI Sheet */}
+      <Sheet
+        modal
+        open={guiOpen}
+        onOpenChange={setGuiOpen}
+        snapPoints={[85, 50]}
+        snapPointsMode="percent"
+        position={guiPosition}
+        onPositionChange={setGuiPosition}
+        dismissOnSnapToBottom
+        zIndex={100000}
+      >
+        <Sheet.Overlay bg="$color" opacity={0.5} />
+        <Sheet.Handle />
+        <Sheet.Frame>
+          <Sheet.ScrollView>
+            <YStack gap="$3" padding="$4">
+              <Text fontSize="$5" fontWeight="bold">
+                Hanzo GUI Sheet
+              </Text>
+              <Text color="$gray11">Position: {guiPosition}</Text>
+
+              {Array.from({ length: 30 }).map((_, i) => (
+                <YStack
+                  key={i}
+                  padding="$3"
+                  bg="$background"
+                  borderRadius="$2"
+                  borderWidth={1}
+                  borderColor="$borderColor"
+                >
+                  <Text>Item {i + 1}</Text>
+                </YStack>
+              ))}
+
+              <Button onPress={() => setGuiOpen(false)} marginTop="$4">
+                Close
+              </Button>
+            </YStack>
+          </Sheet.ScrollView>
+        </Sheet.Frame>
+      </Sheet>
+
+      {/* Actions Sheet - using their ScrollView component */}
+      <ActionSheet
+        ref={actionsSheetRef}
+        snapPoints={[50, 100]}
+        initialSnapIndex={0}
+        gestureEnabled
+        containerStyle={{
+          maxHeight: '100%',
+          height: '100%',
+        }}
+      >
+        <View
+          style={{
+            paddingHorizontal: 16,
+            paddingTop: 20,
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          <RNText style={styles.sheetTitle}>Actions Sheet (Reference)</RNText>
+          <RNText style={styles.sheetSubtitle}>Using their ScrollView component</RNText>
+          <ActionScrollView
+            style={{
+              width: '100%',
+              flexShrink: 1,
+            }}
+          >
+            {Array.from({ length: 50 }).map((_, i) => (
+              <View key={i} style={styles.itemTall}>
+                <RNText style={styles.itemTextLarge}>Item {i + 1}</RNText>
+                <RNText style={styles.itemSubtext}>
+                  Scroll me and test drag handoff
+                </RNText>
+              </View>
+            ))}
+          </ActionScrollView>
+        </View>
+      </ActionSheet>
+    </YStack>
+  )
+}
+
+const styles = StyleSheet.create({
+  actionsSheetContainer: {
+    backgroundColor: '#fff',
+  },
+  sheetContent: {
+    flex: 1,
+    padding: 16,
+    height: '100%',
+  },
+  sheetContentTall: {
+    flex: 1,
+    padding: 16,
+    minHeight: 600,
+  },
+  sheetTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  sheetSubtitle: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 16,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollViewTall: {
+    flex: 1,
+    minHeight: 500,
+  },
+  scrollContentContainer: {
+    paddingBottom: 100,
+  },
+  item: {
+    padding: 16,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    marginBottom: 8,
+  },
+  itemTall: {
+    padding: 20,
+    backgroundColor: '#e8f4e8',
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#c0d8c0',
+  },
+  itemText: {
+    fontSize: 16,
+  },
+  itemTextLarge: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#2d5a2d',
+  },
+  itemSubtext: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+  },
+})

package/src/usecases/AnimatePresenceEnterExitCase.tsx

@@ -0,0 +1,255 @@
+import { useState, useRef, useCallback } from 'react'
+import { AnimatePresence } from '@hanzogui/animate-presence'
+import { Button, Circle, Paragraph, Square, Text, XStack, YStack } from '@hanzo/gui'
+
+/**
+ * Tests that enterStyle/exitStyle actually animate (opacity changes)
+ * when using AnimatePresence with conditional rendering.
+ *
+ * Bug: motion driver doesn't animate enter/exit styles at all,
+ * while CSS driver works fine.
+ */
+
+declare global {
+  interface Window {
+    __enterExitFrames: Record<string, number[]>
+    __enterExitReady: Record<string, boolean>
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.__enterExitFrames = {}
+  window.__enterExitReady = {}
+}
+
+function useOpacityTracker(id: string, testId: string) {
+  const rafRef = useRef<number>(0)
+
+  const startTracking = useCallback(() => {
+    if (typeof window === 'undefined') return
+    window.__enterExitFrames[id] = []
+
+    const track = () => {
+      const el = document.querySelector(`[data-testid="${testId}"]`)
+      if (el) {
+        const opacity = parseFloat(getComputedStyle(el).opacity)
+        window.__enterExitFrames[id].push(opacity)
+      }
+      rafRef.current = requestAnimationFrame(track)
+    }
+    rafRef.current = requestAnimationFrame(track)
+  }, [id, testId])
+
+  const stopTracking = useCallback(() => {
+    cancelAnimationFrame(rafRef.current)
+  }, [])
+
+  return { startTracking, stopTracking }
+}
+
+export function AnimatePresenceEnterExitCase() {
+  return (
+    <YStack gap="$4" padding="$4">
+      <Paragraph fontWeight="bold" fontSize="$5">
+        AnimatePresence Enter/Exit Animation Test
+      </Paragraph>
+
+      <Scenario01_BasicEnterExit />
+      <Scenario02_CircleBadge />
+      <Scenario03_InitialFalse />
+    </YStack>
+  )
+}
+
+/**
+ * Scenario 01: basic square with enterStyle/exitStyle opacity
+ */
+function Scenario01_BasicEnterExit() {
+  const [show, setShow] = useState(false)
+  const tracker = useOpacityTracker('01', 'enter-exit-01-target')
+
+  const handleToggle = () => {
+    tracker.startTracking()
+    setShow((v) => !v)
+    // stop tracking after animation should be done
+    setTimeout(() => {
+      tracker.stopTracking()
+      if (typeof window !== 'undefined') {
+        window.__enterExitReady['01'] = true
+      }
+    }, 1000)
+  }
+
+  return (
+    <YStack gap="$2">
+      <Paragraph size="$2">Scenario 01: Basic enter/exit opacity</Paragraph>
+      <Button testID="enter-exit-01-trigger" onPress={handleToggle}>
+        Toggle
+      </Button>
+      <XStack height={80} items="center">
+        <AnimatePresence>
+          {show ? (
+            <Square
+              key="test-square"
+              testID="enter-exit-01-target"
+              transition="medium"
+              size={60}
+              bg="$blue10"
+              enterStyle={{
+                opacity: 0,
+              }}
+              exitStyle={{
+                opacity: 0,
+              }}
+            />
+          ) : null}
+        </AnimatePresence>
+      </XStack>
+    </YStack>
+  )
+}
+
+/**
+ * Scenario 02: circle badge with initial={false}
+ * Exact match for the real-world bug case in SidebarActionButtons
+ */
+function Scenario03_InitialFalse() {
+  const [count, setCount] = useState(0)
+  const countString = count > 0 ? `${count}` : ''
+
+  const handleIncrement = () => {
+    setCount((c) => c + 1)
+    setTimeout(() => {
+      if (typeof window !== 'undefined') {
+        window.__enterExitReady['03'] = true
+      }
+    }, 1000)
+  }
+
+  const handleClear = () => {
+    setCount(0)
+    setTimeout(() => {
+      if (typeof window !== 'undefined') {
+        window.__enterExitReady['03-exit'] = true
+      }
+    }, 1000)
+  }
+
+  return (
+    <YStack gap="$2">
+      <Paragraph size="$2">Scenario 03: initial=false (exact real-world case)</Paragraph>
+      <XStack gap="$2">
+        <Button testID="enter-exit-03-increment" onPress={handleIncrement}>
+          Add
+        </Button>
+        <Button testID="enter-exit-03-clear" onPress={handleClear}>
+          Clear
+        </Button>
+      </XStack>
+      <XStack height={40} items="center" position="relative">
+        <AnimatePresence initial={false}>
+          {countString ? (
+            <Circle
+              key="count-badge-03"
+              testID="enter-exit-03-target"
+              transition="medium"
+              bg="$color12"
+              size={16}
+              position="absolute"
+              t={4}
+              r={6}
+              items="center"
+              justify="center"
+              enterStyle={{
+                opacity: 0,
+                y: -3,
+              }}
+              exitStyle={{
+                opacity: 0,
+                y: -3,
+              }}
+            >
+              <Text color="$color1" fontFamily="$mono" fontSize={10} lineHeight={10}>
+                {countString}
+              </Text>
+            </Circle>
+          ) : null}
+        </AnimatePresence>
+      </XStack>
+    </YStack>
+  )
+}
+
+/**
+ * Scenario 02: circle badge (matches the real-world bug case)
+ * Same pattern as SidebarActionButtons notification badge
+ */
+function Scenario02_CircleBadge() {
+  const [count, setCount] = useState(0)
+  const tracker = useOpacityTracker('02', 'enter-exit-02-target')
+  const countString = count > 0 ? `${count}` : ''
+
+  const handleIncrement = () => {
+    tracker.startTracking()
+    setCount((c) => c + 1)
+    setTimeout(() => {
+      tracker.stopTracking()
+      if (typeof window !== 'undefined') {
+        window.__enterExitReady['02'] = true
+      }
+    }, 1000)
+  }
+
+  const handleClear = () => {
+    tracker.startTracking()
+    setCount(0)
+    setTimeout(() => {
+      tracker.stopTracking()
+      if (typeof window !== 'undefined') {
+        window.__enterExitReady['02-exit'] = true
+      }
+    }, 1000)
+  }
+
+  return (
+    <YStack gap="$2">
+      <Paragraph size="$2">Scenario 02: Circle badge (real-world case)</Paragraph>
+      <XStack gap="$2">
+        <Button testID="enter-exit-02-increment" onPress={handleIncrement}>
+          Add
+        </Button>
+        <Button testID="enter-exit-02-clear" onPress={handleClear}>
+          Clear
+        </Button>
+      </XStack>
+      <XStack height={40} items="center" position="relative">
+        <AnimatePresence>
+          {countString ? (
+            <Circle
+              key="count-badge"
+              testID="enter-exit-02-target"
+              transition="medium"
+              bg="$color12"
+              size={24}
+              position="absolute"
+              items="center"
+              justify="center"
+              enterStyle={{
+                opacity: 0,
+                y: -3,
+              }}
+              exitStyle={{
+                opacity: 0,
+                y: -3,
+              }}
+            >
+              <Text color="$color1" fontFamily="$mono" fontSize={12}>
+                {countString}
+              </Text>
+            </Circle>
+          ) : null}
+        </AnimatePresence>
+      </XStack>
+    </YStack>
+  )
+}

package/src/usecases/AnimatePresenceExitTest.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import { Button, Square, YStack, Paragraph } from '@hanzo/gui'
+import { AnimatePresence } from '@hanzogui/animate-presence'
+
+// test case: animateOnly=[] should complete exit immediately
+// tests the useInsertionEffect fix for the race condition
+
+export function AnimatePresenceExitTest() {
+  const [visible, setVisible] = useState(true)
+  const [exitCount, setExitCount] = useState(0)
+  const [exitTime, setExitTime] = useState<number | null>(null)
+  const [startTime, setStartTime] = useState<number | null>(null)
+
+  const handleToggle = () => {
+    if (visible) {
+      setStartTime(Date.now())
+    }
+    setVisible(!visible)
+  }
+
+  const handleExitComplete = () => {
+    const elapsed = startTime ? Date.now() - startTime : 0
+    setExitTime(elapsed)
+    setExitCount((c) => c + 1)
+    console.log(`[EXIT_COMPLETE] elapsed=${elapsed}ms count=${exitCount + 1}`)
+  }
+
+  const passed = exitTime !== null && exitTime < 100
+
+  return (
+    <YStack flex={1} alignItems="center" justifyContent="center" gap="$4" padding="$4">
+      <Paragraph size="$6" fontWeight="bold">
+        AnimatePresence Exit Test
+      </Paragraph>
+
+      <Paragraph textAlign="center" maxWidth={300}>
+        animateOnly=[] should complete exit immediately
+      </Paragraph>
+
+      <Button onPress={handleToggle}>{visible ? 'Hide (trigger exit)' : 'Show'}</Button>
+
+      <YStack height={100} alignItems="center" justifyContent="center">
+        <AnimatePresence onExitComplete={handleExitComplete}>
+          {visible && (
+            <Square
+              key="test-square"
+              transition="300ms"
+              animateOnly={[]}
+              size={60}
+              bg="$blue10"
+              exitStyle={{ opacity: 0, scale: 0.5 }}
+            />
+          )}
+        </AnimatePresence>
+      </YStack>
+
+      <YStack gap="$2" alignItems="center">
+        <Paragraph>Exit count: {exitCount}</Paragraph>
+        <Paragraph>Exit time: {exitTime !== null ? `${exitTime}ms` : 'N/A'}</Paragraph>
+        <Paragraph
+          color={passed ? '$green10' : exitTime !== null ? '$red10' : '$gray10'}
+          fontWeight="bold"
+        >
+          {exitTime !== null ? (passed ? '✓ PASS' : '✗ FAIL') : 'Tap Hide to test'}
+        </Paragraph>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/AnimatedByProp.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { Button, Square, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for the animatedBy prop.
+ * Tests that animatedBy="default" correctly selects the animation driver.
+ */
+export function AnimatedByProp() {
+  const [active, setActive] = useState(false)
+
+  return (
+    <YStack gap="$4" padding="$4">
+      {/* Uses animatedBy="default" to explicitly select the default driver */}
+      <Square
+        testID="explicit-default"
+        animatedBy="default"
+        size={100}
+        backgroundColor={active ? '$blue10' : '$red10'}
+        opacity={active ? 1 : 0.5}
+        scale={active ? 1.2 : 1}
+        transition="bouncy"
+      />
+
+      {/* No animatedBy - uses context default (should behave same) */}
+      <Square
+        testID="context-driver"
+        size={100}
+        backgroundColor={active ? '$green10' : '$purple10'}
+        opacity={active ? 1 : 0.5}
+        scale={active ? 1.2 : 1}
+        transition="bouncy"
+      />
+
+      <Button testID="toggle-trigger" onPress={() => setActive(!active)}>
+        Toggle Animation
+      </Button>
+    </YStack>
+  )
+}