@hanzogui/kitchen-sink 3.0.5

package/src/usecases/SheetKeyboardFitContentCase.tsx

@@ -0,0 +1,165 @@
+import { useState, useCallback } from 'react'
+import { Keyboard } from 'react-native'
+import { Button, Image, Input, Sheet, Text, XStack, YStack } from '@hanzo/gui'
+
+const MOCK_URLS = {
+  tall: 'https://picsum.photos/400/600',
+  short: 'https://picsum.photos/400/150',
+}
+
+/**
+ * Test case for Sheet + Keyboard + Dynamic fit content
+ *
+ * Press a button to load a mock image URL. The image height is
+ * taller or shorter than the placeholder, testing whether the
+ * sheet adjusts its fit-content height correctly.
+ */
+export function SheetKeyboardFitContentCase() {
+  const [open, setOpen] = useState(false)
+  const [events, setEvents] = useState<string[]>([])
+  const [caption, setCaption] = useState('')
+  const [imageUrl, setImageUrl] = useState<string | null>(null)
+
+  const addEvent = useCallback((event: string) => {
+    setEvents((prev) => [...prev.slice(-6), event])
+  }, [])
+
+  return (
+    <YStack padding="$4" gap="$4" testID="sheet-kb-fit-screen">
+      <Text fontSize="$5" fontWeight="bold">
+        Sheet + Keyboard + Fit Content
+      </Text>
+
+      <Text fontSize="$3" color="$gray11">
+        Load a mock image URL to change content height while keyboard may be open.
+      </Text>
+
+      <Button testID="sheet-kb-fit-trigger" theme="green" onPress={() => setOpen(true)}>
+        Open Sheet
+      </Button>
+
+      <YStack gap="$2" padding="$3" bg="$backgroundHover" borderRadius="$2">
+        <Text>Events: {events.join(', ') || '(none)'}</Text>
+      </YStack>
+
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPointsMode="fit"
+        dismissOnSnapToBottom
+        moveOnKeyboardChange
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Frame testID="sheet-kb-fit-frame" padding="$4">
+          <YStack gap="$4">
+            <Text fontSize="$5" fontWeight="bold">
+              Create Post
+            </Text>
+
+            <Input
+              testID="sheet-kb-fit-input"
+              placeholder="What's on your mind?"
+              value={caption}
+              onChangeText={setCaption}
+              onFocus={() => addEvent('focus')}
+              onBlur={() => addEvent('blur')}
+            />
+
+            {/* Image area — always rendered, height changes with URL */}
+            {imageUrl ? (
+              <Image
+                testID="sheet-kb-fit-image"
+                source={{ uri: imageUrl }}
+                width="100%"
+                height={imageUrl === MOCK_URLS.tall ? 300 : 100}
+                borderRadius="$4"
+                bg="$backgroundHover"
+              />
+            ) : (
+              <YStack
+                testID="sheet-kb-fit-placeholder"
+                height={150}
+                borderWidth={2}
+                borderColor="$borderColor"
+                borderStyle="dashed"
+                borderRadius="$4"
+                alignItems="center"
+                justifyContent="center"
+                bg="$backgroundHover"
+              >
+                <Text color="$gray11">No image loaded</Text>
+              </YStack>
+            )}
+
+            <XStack gap="$2">
+              <Button
+                testID="sheet-kb-fit-load-tall"
+                size="$3"
+                theme="green"
+                flex={1}
+                onPress={() => {
+                  setImageUrl(MOCK_URLS.tall)
+                  addEvent('load-tall')
+                }}
+              >
+                Load Tall (300)
+              </Button>
+              <Button
+                testID="sheet-kb-fit-load-short"
+                size="$3"
+                theme="blue"
+                flex={1}
+                onPress={() => {
+                  setImageUrl(MOCK_URLS.short)
+                  addEvent('load-short')
+                }}
+              >
+                Load Short (100)
+              </Button>
+              <Button
+                testID="sheet-kb-fit-reset"
+                size="$3"
+                flex={1}
+                onPress={() => {
+                  setImageUrl(null)
+                  addEvent('reset')
+                }}
+              >
+                Reset (150)
+              </Button>
+            </XStack>
+
+            <Button
+              testID="sheet-kb-fit-dismiss-kb"
+              size="$3"
+              onPress={() => {
+                Keyboard.dismiss()
+                addEvent('dismiss-kb')
+              }}
+            >
+              Dismiss Keyboard
+            </Button>
+
+            <Button
+              testID="sheet-kb-fit-close"
+              size="$3"
+              theme="red"
+              onPress={() => setOpen(false)}
+            >
+              Close
+            </Button>
+          </YStack>
+        </Sheet.Frame>
+      </Sheet>
+    </YStack>
+  )
+}

package/src/usecases/SheetOnAnimationCompleteCase.tsx

@@ -0,0 +1,54 @@
+import { useState, useCallback } from 'react'
+import { Button, Paragraph, Sheet, YStack } from '@hanzo/gui'
+
+export function SheetOnAnimationCompleteCase() {
+  const [open, setOpen] = useState(false)
+  const [lastEvent, setLastEvent] = useState('')
+  const [eventCount, setEventCount] = useState(0)
+
+  const handleAnimationComplete = useCallback((info: { open: boolean }) => {
+    setLastEvent(info.open ? 'opened' : 'closed')
+    setEventCount((c) => c + 1)
+  }, [])
+
+  return (
+    <YStack gap="$4" padding="$4">
+      <Button
+        onPress={() => setOpen(true)}
+        testID="sheet-open-trigger"
+        data-testid="sheet-open-trigger"
+      >
+        Open Sheet
+      </Button>
+
+      <Paragraph data-testid="last-event">{lastEvent}</Paragraph>
+      <Paragraph data-testid="event-count">{eventCount}</Paragraph>
+
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        onAnimationComplete={handleAnimationComplete}
+        transition="quick"
+        modal
+        dismissOnSnapToBottom
+        snapPoints={[40]}
+      >
+        <Sheet.Overlay
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Frame padding="$4" bg="$background" data-testid="sheet-frame">
+          <Paragraph>Sheet content</Paragraph>
+          <Button
+            onPress={() => setOpen(false)}
+            testID="sheet-close"
+            data-testid="sheet-close"
+          >
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </YStack>
+  )
+}

package/src/usecases/SheetScrollLockCase.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react'
+import { Button, H2, Paragraph, Sheet, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for Sheet scroll lock behavior
+ * Tests that body doesn't scroll when sheet is open and dragged
+ * Also tests Sheet.ScrollView handoff behavior
+ */
+export function SheetScrollLockCase() {
+  return (
+    <YStack
+      $platform-web={{
+        minHeight: '200vh',
+      }}
+      padding="$4"
+      gap="$4"
+    >
+      <H2>Sheet Scroll Lock Test</H2>
+      <Paragraph data-testid="scroll-indicator">
+        This page has a lot of content that makes the body scrollable. When the sheet is
+        open, the body should NOT scroll.
+      </Paragraph>
+
+      {/* some content before buttons to require scrolling */}
+      {Array.from({ length: 8 }).map((_, i) => (
+        <Paragraph key={`pre-${i}`}>
+          Scroll down to find the sheet buttons. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua.
+        </Paragraph>
+      ))}
+
+      <BasicScrollLockSheet />
+      <SheetWithScrollView />
+
+      {/* lots of content to make body scrollable */}
+      {Array.from({ length: 30 }).map((_, i) => (
+        <Paragraph key={i} data-testid={`body-content-${i}`}>
+          Body content paragraph {i + 1}. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+          ut aliquip ex ea commodo consequat.
+        </Paragraph>
+      ))}
+    </YStack>
+  )
+}
+
+/**
+ * Basic sheet to test body scroll lock
+ */
+function BasicScrollLockSheet() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+
+  return (
+    <>
+      <Button data-testid="basic-scroll-lock-trigger" onPress={() => setOpen(true)}>
+        Open Basic Sheet
+      </Button>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[70, 40]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={setPosition}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="basic-scroll-lock-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="basic-scroll-lock-handle" />
+        <Sheet.Frame data-testid="basic-scroll-lock-frame" padding="$4" gap="$4">
+          <Paragraph data-testid="basic-scroll-lock-snap-indicator">
+            Current snap point: {position}
+          </Paragraph>
+          <Paragraph>
+            Drag the handle to test scroll lock. The body behind this sheet should NOT
+            scroll while dragging.
+          </Paragraph>
+          <YStack flex={1} justifyContent="center" alignItems="center">
+            <Paragraph opacity={0.5}>Sheet content area</Paragraph>
+          </YStack>
+          <Button data-testid="basic-scroll-lock-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}
+
+/**
+ * Sheet with ScrollView to test handoff behavior
+ * The Sheet.ScrollView should allow scrolling inside when at top snap point,
+ * but pass control to the sheet drag when pulled down from scroll position 0
+ */
+function SheetWithScrollView() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+
+  return (
+    <>
+      <Button data-testid="scrollview-sheet-trigger" onPress={() => setOpen(true)}>
+        Open Sheet with ScrollView
+      </Button>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[85, 50]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={setPosition}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="scrollview-sheet-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="scrollview-sheet-handle" />
+        <Sheet.Frame data-testid="scrollview-sheet-frame" padding="$4">
+          <Paragraph data-testid="scrollview-sheet-snap-indicator">
+            Current snap point: {position}
+          </Paragraph>
+          <Sheet.ScrollView data-testid="scrollview-sheet-scrollview">
+            <YStack gap="$4" padding="$2">
+              <Paragraph fontWeight="bold">
+                This content is inside Sheet.ScrollView.
+              </Paragraph>
+              <Paragraph>
+                When scrolled to top and pulling down, the sheet should drag. When there's
+                scroll content above, the content should scroll.
+              </Paragraph>
+              {Array.from({ length: 20 }).map((_, i) => (
+                <Paragraph key={i} data-testid={`scrollview-content-${i}`}>
+                  ScrollView paragraph {i + 1}. Lorem ipsum dolor sit amet, consectetur
+                  adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+                  magna aliqua.
+                </Paragraph>
+              ))}
+              <Button data-testid="scrollview-sheet-close" onPress={() => setOpen(false)}>
+                Close
+              </Button>
+            </YStack>
+          </Sheet.ScrollView>
+        </Sheet.Frame>
+      </Sheet>
+    </>
+  )
+}

package/src/usecases/SheetScrollableDrag.tsx

@@ -0,0 +1,249 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { ScrollView as RNScrollView } from 'react-native'
+import { Button, Sheet, Text, YStack } from '@hanzo/gui'
+import { getGestureHandler } from '@hanzogui/native'
+
+/**
+ * Test case for Sheet + ScrollView drag interaction
+ *
+ * SMOOTH HANDOFF requirements:
+ * 1. Drag sheet down, then up until it hits top snap point -> should THEN start scrolling content
+ * 2. Scroll content, then drag down until scrollY=0 -> should SWITCH BACK to dragging sheet
+ * 3. No "stuck" states - always be able to scroll or drag as appropriate
+ */
+export function SheetScrollableDrag() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+  const [scrollY, setScrollY] = useState(0)
+  const [dragEvents, setDragEvents] = useState<string[]>([])
+  const [scrollEventCount, setScrollEventCount] = useState(0)
+  const [minScrollY, setMinScrollY] = useState(0)
+  const [maxScrollY, setMaxScrollY] = useState(0)
+  const [itemCount, setItemCount] = useState(20)
+  const [maxPosition, setMaxPosition] = useState(0)
+  const [unexpectedClose, setUnexpectedClose] = useState(false)
+  const lastScrollY = useRef(0)
+
+  const rnghEnabled = getGestureHandler().isEnabled
+
+  useEffect(() => {
+    console.log('[SheetScrollableDrag] RNGH enabled:', rnghEnabled)
+  }, [rnghEnabled])
+
+  const addEvent = useCallback((event: string) => {
+    setDragEvents((prev) => [...prev.slice(-4), event])
+  }, [])
+
+  return (
+    <YStack padding="$4" gap="$4" testID="sheet-scrollable-drag-screen">
+      <Text testID="sheet-scrollable-drag-title" fontSize="$5" fontWeight="bold">
+        Sheet + ScrollView Drag Test (v4)
+      </Text>
+
+      <Text
+        testID="sheet-scrollable-drag-rngh-status"
+        fontSize="$3"
+        color={rnghEnabled ? '$green10' : '$red10'}
+        fontWeight="bold"
+      >
+        RNGH: {rnghEnabled ? '✓ enabled' : '✗ disabled'}
+      </Text>
+
+      {/* Debug: test if plain RN ScrollView fires onScroll */}
+      <RNScrollView
+        style={{ height: 60, backgroundColor: '#eef' }}
+        onScroll={(e) => {
+          console.log('[TEST RNScrollView] onScroll:', e.nativeEvent.contentOffset.y)
+        }}
+        scrollEventThrottle={16}
+      >
+        <Text style={{ padding: 8 }}>Scroll me to test (outside sheet) - 1</Text>
+        <Text style={{ padding: 8 }}>Scroll me to test (outside sheet) - 2</Text>
+        <Text style={{ padding: 8 }}>Scroll me to test (outside sheet) - 3</Text>
+        <Text style={{ padding: 8 }}>Scroll me to test (outside sheet) - 4</Text>
+      </RNScrollView>
+
+      <Text testID="sheet-scrollable-drag-instructions" fontSize="$3" color="$gray11">
+        Test smooth handoff: drag down then up to scroll, scroll up then drag down to drag
+        sheet.
+      </Text>
+
+      <YStack flexDirection="row" gap="$2">
+        <Button
+          testID="sheet-scrollable-drag-trigger"
+          onPress={() => setOpen(true)}
+          flex={1}
+        >
+          Open Sheet
+        </Button>
+        <Button
+          testID="sheet-scrollable-drag-reset"
+          onPress={() => {
+            setScrollEventCount(0)
+            setMinScrollY(0)
+            setMaxScrollY(0)
+            setMaxPosition(0)
+            setDragEvents([])
+            setItemCount(10)
+            lastScrollY.current = 0
+          }}
+          theme="red"
+        >
+          Reset
+        </Button>
+      </YStack>
+
+      <YStack gap="$2" padding="$3" bg="$backgroundHover" borderRadius="$2">
+        <Text testID="sheet-scrollable-drag-position">Sheet position: {position}</Text>
+        <Text testID="sheet-scrollable-drag-scroll-y">
+          ScrollView Y: {scrollY.toFixed(0)}
+        </Text>
+        <Text testID="sheet-scrollable-drag-scroll-count">
+          Scroll events: {scrollEventCount}
+        </Text>
+        <Text testID="sheet-scrollable-drag-min-scroll-y">
+          Min scroll Y: {minScrollY.toFixed(0)}
+        </Text>
+        <Text testID="sheet-scrollable-drag-max-scroll-y">
+          Max scroll Y: {maxScrollY.toFixed(0)}
+        </Text>
+        <Text testID="sheet-scrollable-drag-max-position">
+          Max position: {maxPosition}
+        </Text>
+        <Text testID="sheet-scrollable-drag-unexpected-close">
+          Unexpected close: {unexpectedClose ? 'yes' : 'no'}
+        </Text>
+        <Text testID="sheet-scrollable-drag-events">
+          Events: {dragEvents.join(', ') || '(none)'}
+        </Text>
+      </YStack>
+
+      <YStack gap="$1" padding="$2" bg="$green3" borderRadius="$2">
+        <Text fontSize="$2" fontWeight="bold">
+          Smooth handoff test:
+        </Text>
+        <Text fontSize="$2">
+          1. Drag sheet down → then up → hits top → starts scrolling{'\n'}
+          2. Scroll down → drag up → hits scrollY=0 → starts dragging sheet
+        </Text>
+      </YStack>
+
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={(val) => {
+          if (!val && open) {
+            // sheet closing while it was open - track this
+            setUnexpectedClose(true)
+          }
+          setOpen(val)
+        }}
+        snapPoints={[85, 50]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={(pos) => {
+          setPosition(pos)
+          setMaxPosition((prev) => Math.max(prev, pos))
+          addEvent(`snap:${pos}`)
+        }}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          testID="sheet-scrollable-drag-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle testID="sheet-scrollable-drag-handle" />
+        <Sheet.Frame testID="sheet-scrollable-drag-frame">
+          <Sheet.ScrollView
+            testID="sheet-scrollable-drag-scrollview"
+            onScroll={(e) => {
+              const y = e.nativeEvent.contentOffset.y
+              setScrollY(y)
+              setScrollEventCount((c) => c + 1)
+              if (y < minScrollY) {
+                setMinScrollY(y)
+              }
+              if (y > maxScrollY) {
+                setMaxScrollY(y)
+              }
+              if (Math.abs(y - lastScrollY.current) > 5) {
+                addEvent(`scroll:${y.toFixed(0)}`)
+                lastScrollY.current = y
+              }
+            }}
+            onScrollBeginDrag={() => {
+              addEvent('dragStart')
+            }}
+            onScrollEndDrag={() => {
+              addEvent('dragEnd')
+            }}
+            scrollEventThrottle={16}
+          >
+            <YStack gap="$3" padding="$4">
+              <Text
+                testID="sheet-scrollable-drag-snap-label"
+                fontSize="$3"
+                color="$gray11"
+              >
+                Snap: {position} | Scroll Y: {scrollY.toFixed(0)} | Items: {itemCount}
+              </Text>
+
+              <Text
+                testID="sheet-scrollable-drag-content-top"
+                fontWeight="bold"
+                fontSize="$4"
+              >
+                ↕ Drag here to test handoff ↕
+              </Text>
+
+              <Button
+                testID="sheet-scrollable-drag-add-items"
+                onPress={() => setItemCount((c) => c + 5)}
+                size="$3"
+              >
+                Add 5 Items ({itemCount} total)
+              </Button>
+
+              <Text
+                testID="sheet-scrollable-drag-scroll-indicator"
+                padding="$2"
+                bg="$blue3"
+                borderRadius="$2"
+              >
+                Scroll Y: {scrollY.toFixed(0)}
+              </Text>
+
+              {Array.from({ length: itemCount }).map((_, i) => (
+                <YStack
+                  key={i}
+                  testID={`sheet-scrollable-drag-item-${i}`}
+                  padding="$3"
+                  bg="$background"
+                  borderRadius="$2"
+                  borderWidth={1}
+                  borderColor="$borderColor"
+                >
+                  <Text>Item {i + 1}</Text>
+                </YStack>
+              ))}
+
+              <Button
+                testID="sheet-scrollable-drag-close"
+                onPress={() => setOpen(false)}
+                marginTop="$4"
+              >
+                Close Sheet
+              </Button>
+            </YStack>
+          </Sheet.ScrollView>
+        </Sheet.Frame>
+      </Sheet>
+    </YStack>
+  )
+}