@hanzogui/kitchen-sink 3.0.5

package/src/usecases/SheetDragResistCase.web.tsx

@@ -0,0 +1,359 @@
+import { useState, useRef, useCallback } from 'react'
+import { Button, Sheet, Text, YStack, Paragraph } from '@hanzo/gui'
+
+/**
+ * Web test case for Sheet drag resistance behavior
+ *
+ * Tests three scenarios:
+ * 1. Sheet without ScrollView - drag up should show resistance
+ * 2. Sheet with ScrollView but NO scrollable content - drag should move sheet, not scroll
+ * 3. Sheet with ScrollView and scrollable content - drag up at top should show resistance
+ */
+export function SheetDragResistCase() {
+  return (
+    <YStack padding="$4" gap="$4" data-testid="sheet-drag-resist-screen">
+      <Text fontSize="$5" fontWeight="bold">
+        Sheet Drag Resistance Tests (Web)
+      </Text>
+      <NoScrollViewSheet />
+      <NonScrollableContentSheet />
+      <ScrollableContentSheet />
+    </YStack>
+  )
+}
+
+/**
+ * Test 1: Sheet without ScrollView
+ * Expected: dragging up at the top snap point should show visual resistance
+ */
+function NoScrollViewSheet() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+  const [maxDragUp, setMaxDragUp] = useState(0)
+  const [lastDragY, setLastDragY] = useState(0)
+  const startY = useRef(0)
+
+  return (
+    <YStack gap="$2">
+      <Button data-testid="no-scroll-trigger" onPress={() => setOpen(true)}>
+        Test 1: No ScrollView
+      </Button>
+      <Paragraph data-testid="no-scroll-position">Position: {position}</Paragraph>
+      <Paragraph data-testid="no-scroll-max-drag">
+        Max drag up: {maxDragUp.toFixed(0)}px
+      </Paragraph>
+      <Paragraph data-testid="no-scroll-last-drag">
+        Last drag Y: {lastDragY.toFixed(0)}px
+      </Paragraph>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[70, 40]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={setPosition}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="no-scroll-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="no-scroll-handle" />
+        <Sheet.Frame
+          data-testid="no-scroll-frame"
+          padding="$4"
+          gap="$4"
+          onTouchStart={(e: any) => {
+            startY.current = e.nativeEvent?.pageY ?? e.touches?.[0]?.pageY ?? 0
+          }}
+          onTouchMove={(e: any) => {
+            const currentY = e.nativeEvent?.pageY ?? e.touches?.[0]?.pageY ?? 0
+            const dy = startY.current - currentY
+            setLastDragY(currentY)
+            if (dy > maxDragUp) {
+              setMaxDragUp(dy)
+            }
+          }}
+        >
+          <Paragraph data-testid="no-scroll-snap-indicator">
+            Current snap point: {position}
+          </Paragraph>
+          <Paragraph>
+            Drag UP on this sheet when at top position (0). The sheet should resist and
+            show visual feedback.
+          </Paragraph>
+          <Paragraph
+            data-testid="no-scroll-drag-indicator"
+            bg="$blue3"
+            padding="$2"
+            borderRadius="$2"
+          >
+            Max upward drag detected: {maxDragUp.toFixed(0)}px
+          </Paragraph>
+          <YStack flex={1} justifyContent="center" alignItems="center">
+            <Paragraph opacity={0.5}>Sheet content (no ScrollView)</Paragraph>
+          </YStack>
+          <Button
+            data-testid="no-scroll-reset"
+            onPress={() => {
+              setMaxDragUp(0)
+              setLastDragY(0)
+            }}
+            theme="red"
+            size="$3"
+          >
+            Reset Drag Tracking
+          </Button>
+          <Button data-testid="no-scroll-close" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </Sheet.Frame>
+      </Sheet>
+    </YStack>
+  )
+}
+
+/**
+ * Test 2: Sheet with ScrollView but content fits (not scrollable)
+ * Expected: dragging should move the sheet, NOT scroll the non-scrollable content
+ */
+function NonScrollableContentSheet() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+  const [scrollY, setScrollY] = useState(0)
+  const [scrollEventCount, setScrollEventCount] = useState(0)
+  const [dragEventCount, setDragEventCount] = useState(0)
+
+  return (
+    <YStack gap="$2">
+      <Button data-testid="non-scrollable-trigger" onPress={() => setOpen(true)}>
+        Test 2: Non-Scrollable ScrollView
+      </Button>
+      <Paragraph data-testid="non-scrollable-position">Position: {position}</Paragraph>
+      <Paragraph data-testid="non-scrollable-scroll-y">
+        Scroll Y: {scrollY.toFixed(0)}
+      </Paragraph>
+      <Paragraph data-testid="non-scrollable-scroll-count">
+        Scroll events: {scrollEventCount}
+      </Paragraph>
+      <Paragraph data-testid="non-scrollable-drag-count">
+        Drag events: {dragEventCount}
+      </Paragraph>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[70, 40]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={(pos) => {
+          setPosition(pos)
+          setDragEventCount((c) => c + 1)
+        }}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="non-scrollable-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="non-scrollable-handle" />
+        <Sheet.Frame data-testid="non-scrollable-frame">
+          <Sheet.ScrollView
+            data-testid="non-scrollable-scrollview"
+            onScroll={(e: any) => {
+              setScrollY(e.nativeEvent.contentOffset.y)
+              setScrollEventCount((c) => c + 1)
+            }}
+            scrollEventThrottle={16}
+          >
+            <YStack padding="$4" gap="$3">
+              <Paragraph data-testid="non-scrollable-snap-indicator">
+                Current snap point: {position}
+              </Paragraph>
+              <Paragraph>
+                This content FITS in the sheet (not scrollable). Dragging should move the
+                SHEET, not scroll.
+              </Paragraph>
+              <YStack bg="$yellow3" padding="$3" borderRadius="$2">
+                <Text fontWeight="bold">Expected behavior:</Text>
+                <Text>• Dragging down: sheet moves to next snap point</Text>
+                <Text>• Dragging up: sheet resists at top</Text>
+                <Text>• ScrollView should NOT capture gestures</Text>
+              </YStack>
+              <Paragraph
+                data-testid="non-scrollable-status"
+                bg="$blue3"
+                padding="$2"
+                borderRadius="$2"
+              >
+                Scroll events: {scrollEventCount} | Position changes: {dragEventCount}
+              </Paragraph>
+              <Button
+                data-testid="non-scrollable-reset"
+                onPress={() => {
+                  setScrollEventCount(0)
+                  setDragEventCount(0)
+                }}
+                theme="red"
+                size="$3"
+              >
+                Reset Counters
+              </Button>
+              <Button data-testid="non-scrollable-close" onPress={() => setOpen(false)}>
+                Close
+              </Button>
+            </YStack>
+          </Sheet.ScrollView>
+        </Sheet.Frame>
+      </Sheet>
+    </YStack>
+  )
+}
+
+/**
+ * Test 3: Sheet with ScrollView and scrollable content
+ * Expected: at top of scroll and top snap point, dragging up should show resistance
+ */
+function ScrollableContentSheet() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+  const [scrollY, setScrollY] = useState(0)
+  const [maxDragUp, setMaxDragUp] = useState(0)
+  const [isAtScrollTop, setIsAtScrollTop] = useState(true)
+  const startY = useRef(0)
+
+  const handleScrollViewTouch = useCallback(
+    (pageY: number) => {
+      if (!isAtScrollTop) return
+      if (position !== 0) return
+
+      const dy = startY.current - pageY
+      if (dy > maxDragUp) {
+        setMaxDragUp(dy)
+      }
+    },
+    [isAtScrollTop, position, maxDragUp]
+  )
+
+  return (
+    <YStack gap="$2">
+      <Button data-testid="scrollable-trigger" onPress={() => setOpen(true)}>
+        Test 3: Scrollable ScrollView
+      </Button>
+      <Paragraph data-testid="scrollable-position">Position: {position}</Paragraph>
+      <Paragraph data-testid="scrollable-scroll-y">
+        Scroll Y: {scrollY.toFixed(0)}
+      </Paragraph>
+      <Paragraph data-testid="scrollable-max-drag">
+        Max drag up (at top): {maxDragUp.toFixed(0)}px
+      </Paragraph>
+      <Paragraph data-testid="scrollable-at-top">
+        At scroll top: {isAtScrollTop ? 'YES' : 'NO'}
+      </Paragraph>
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[80, 50]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={setPosition}
+        dismissOnSnapToBottom
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          data-testid="scrollable-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle data-testid="scrollable-handle" />
+        <Sheet.Frame data-testid="scrollable-frame">
+          <Sheet.ScrollView
+            data-testid="scrollable-scrollview"
+            onScroll={(e: any) => {
+              const y = e.nativeEvent.contentOffset.y
+              setScrollY(y)
+              setIsAtScrollTop(y <= 0)
+            }}
+            scrollEventThrottle={16}
+            onTouchStart={(e: any) => {
+              startY.current = e.nativeEvent?.pageY ?? e.touches?.[0]?.pageY ?? 0
+            }}
+            onTouchMove={(e: any) => {
+              const pageY = e.nativeEvent?.pageY ?? e.touches?.[0]?.pageY ?? 0
+              handleScrollViewTouch(pageY)
+            }}
+          >
+            <YStack padding="$4" gap="$3">
+              <Paragraph data-testid="scrollable-snap-indicator">
+                Position: {position} | Scroll Y: {scrollY.toFixed(0)}
+              </Paragraph>
+              <Paragraph
+                data-testid="scrollable-status"
+                bg="$blue3"
+                padding="$2"
+                borderRadius="$2"
+              >
+                Max upward drag (at top): {maxDragUp.toFixed(0)}px
+              </Paragraph>
+              <Button
+                data-testid="scrollable-reset"
+                onPress={() => setMaxDragUp(0)}
+                theme="red"
+                size="$3"
+              >
+                Reset Drag Tracking
+              </Button>
+              <Paragraph>
+                This content IS scrollable. When at the top of scroll and top snap point,
+                dragging UP should show resistance.
+              </Paragraph>
+              <YStack bg="$green3" padding="$3" borderRadius="$2">
+                <Text fontWeight="bold">Expected behavior:</Text>
+                <Text>• Scroll down in content: normal scroll</Text>
+                <Text>• At scroll top, drag up: resistance effect</Text>
+                <Text>• Drag down from scroll top: sheet moves</Text>
+              </YStack>
+
+              {/* lots of items to make it scrollable */}
+              {Array.from({ length: 20 }).map((_, i) => (
+                <YStack
+                  key={i}
+                  data-testid={`scrollable-item-${i}`}
+                  padding="$3"
+                  bg="$background"
+                  borderRadius="$2"
+                  borderWidth={1}
+                  borderColor="$borderColor"
+                >
+                  <Text>Scrollable Item {i + 1}</Text>
+                </YStack>
+              ))}
+
+              <Button data-testid="scrollable-close" onPress={() => setOpen(false)}>
+                Close
+              </Button>
+            </YStack>
+          </Sheet.ScrollView>
+        </Sheet.Frame>
+      </Sheet>
+    </YStack>
+  )
+}

package/src/usecases/SheetKeyboardDragCase.tsx

@@ -0,0 +1,328 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { Keyboard, Platform } from 'react-native'
+import ActionSheet, {
+  type ActionSheetRef,
+  ScrollView as ActionScrollView,
+} from 'react-native-actions-sheet'
+import { Button, Input, Sheet, Text, XStack, YStack } from '@hanzo/gui'
+import { getGestureHandler, isKeyboardControllerEnabled } from '@hanzogui/native'
+
+/**
+ * Test case for Sheet + Keyboard + Drag interaction
+ *
+ * SMOOTH KEYBOARD HANDOFF requirements:
+ * 1. Open keyboard (tap input) -> sheet moves up smoothly
+ * 2. Drag sheet down while keyboard open -> keyboard dismisses FIRST, then sheet drags
+ * 3. Dismiss keyboard (tap outside) -> sheet returns to original position
+ * 4. Fast keyboard show/hide shouldn't cause jank
+ */
+export function SheetKeyboardDragCase() {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState(0)
+  const actionsSheetRef = useRef<ActionSheetRef>(null)
+  const [keyboardHeight, setKeyboardHeight] = useState(0)
+  const [keyboardVisible, setKeyboardVisible] = useState(false)
+  const [events, setEvents] = useState<string[]>([])
+  const [inputValue, setInputValue] = useState('')
+
+  const rnghEnabled = getGestureHandler().isEnabled
+  const kbcEnabled = isKeyboardControllerEnabled()
+
+  useEffect(() => {
+    console.warn('[SheetKeyboardDrag] RNGH enabled:', rnghEnabled)
+    console.warn('[SheetKeyboardDrag] Keyboard Controller enabled:', kbcEnabled)
+  }, [rnghEnabled, kbcEnabled])
+
+  // track keyboard events for debugging
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'
+
+    const showListener = Keyboard.addListener(showEvent, (e) => {
+      const height = e.endCoordinates.height
+      setKeyboardHeight(height)
+      setKeyboardVisible(true)
+      addEvent(`kb-show:${height.toFixed(0)}`)
+    })
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0)
+      setKeyboardVisible(false)
+      addEvent('kb-hide')
+    })
+
+    return () => {
+      showListener.remove()
+      hideListener.remove()
+    }
+  }, [])
+
+  const addEvent = useCallback((event: string) => {
+    setEvents((prev) => [...prev.slice(-6), event])
+  }, [])
+
+  return (
+    <YStack padding="$4" gap="$4" testID="sheet-keyboard-drag-screen">
+      <Text testID="sheet-keyboard-drag-title" fontSize="$5" fontWeight="bold">
+        Sheet + Keyboard Drag Test
+      </Text>
+
+      <XStack gap="$3">
+        <Text
+          testID="sheet-keyboard-drag-rngh-status"
+          fontSize="$2"
+          color={rnghEnabled ? '$green10' : '$red10'}
+          fontWeight="bold"
+        >
+          RNGH: {rnghEnabled ? '✓' : '✗'}
+        </Text>
+        <Text
+          testID="sheet-keyboard-drag-kbc-status"
+          fontSize="$2"
+          color={kbcEnabled ? '$green10' : '$yellow10'}
+          fontWeight="bold"
+        >
+          KBC: {kbcEnabled ? '✓' : '○'}
+        </Text>
+      </XStack>
+
+      <Text testID="sheet-keyboard-drag-instructions" fontSize="$3" color="$gray11">
+        Test keyboard + sheet interaction: tap input to show keyboard, drag sheet while
+        keyboard is open.
+      </Text>
+
+      <YStack flexDirection="row" gap="$2">
+        <Button
+          testID="sheet-keyboard-drag-trigger"
+          onPress={() => setOpen(true)}
+          flex={1}
+        >
+          Open Sheet
+        </Button>
+        <Button
+          testID="sheet-keyboard-drag-action-trigger"
+          onPress={() => actionsSheetRef.current?.show()}
+          theme="blue"
+        >
+          Open ActionSheet
+        </Button>
+      </YStack>
+      <Button
+        testID="sheet-keyboard-drag-reset"
+        onPress={() => {
+          setEvents([])
+          setInputValue('')
+        }}
+        theme="red"
+      >
+        Reset
+      </Button>
+
+      <YStack gap="$2" padding="$3" bg="$backgroundHover" borderRadius="$2">
+        <Text testID="sheet-keyboard-drag-position">Sheet position: {position}</Text>
+        <Text testID="sheet-keyboard-drag-kb-height">
+          Keyboard height: {keyboardHeight}
+        </Text>
+        <Text testID="sheet-keyboard-drag-kb-visible">
+          Keyboard: {keyboardVisible ? 'visible' : 'hidden'}
+        </Text>
+        <Text testID="sheet-keyboard-drag-events">
+          Events: {events.join(', ') || '(none)'}
+        </Text>
+      </YStack>
+
+      <YStack gap="$1" padding="$2" bg="$blue3" borderRadius="$2">
+        <Text fontSize="$2" fontWeight="bold">
+          Expected behavior:
+        </Text>
+        <Text fontSize="$2">
+          1. Tap input → keyboard shows → sheet moves up{'\n'}
+          2. Drag sheet down → keyboard dismisses FIRST{'\n'}
+          3. Tap outside input → keyboard hides → sheet restores
+        </Text>
+      </YStack>
+
+      <Sheet
+        modal
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[80, 50]}
+        snapPointsMode="percent"
+        position={position}
+        onPositionChange={(pos) => {
+          setPosition(pos)
+          addEvent(`snap:${pos}`)
+        }}
+        dismissOnSnapToBottom
+        moveOnKeyboardChange
+        zIndex={100000}
+        transition="medium"
+      >
+        <Sheet.Overlay
+          testID="sheet-keyboard-drag-overlay"
+          transition="lazy"
+          bg="$color"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <Sheet.Handle testID="sheet-keyboard-drag-handle" />
+        <Sheet.Frame testID="sheet-keyboard-drag-frame">
+          <Sheet.ScrollView
+            keyboardShouldPersistTaps="handled"
+            keyboardDismissMode="interactive"
+          >
+            <YStack gap="$4" padding="$4">
+              <Text
+                testID="sheet-keyboard-drag-sheet-title"
+                fontSize="$5"
+                fontWeight="bold"
+              >
+                Keyboard Test Sheet
+              </Text>
+
+              <YStack gap="$2" padding="$3" bg="$backgroundHover" borderRadius="$2">
+                <Text fontSize="$2">Position: {position}</Text>
+                <Text fontSize="$2">KB Height: {keyboardHeight}</Text>
+                <Text fontSize="$2">KB Visible: {keyboardVisible ? 'yes' : 'no'}</Text>
+              </YStack>
+
+              <YStack gap="$2">
+                <Text fontSize="$3" fontWeight="bold">
+                  Test Input (tap to show keyboard):
+                </Text>
+                <Input
+                  testID="sheet-keyboard-drag-input"
+                  placeholder="Type something..."
+                  value={inputValue}
+                  onChangeText={setInputValue}
+                  onFocus={() => addEvent('input-focus')}
+                  onBlur={() => addEvent('input-blur')}
+                />
+              </YStack>
+
+              <YStack gap="$2">
+                <Text fontSize="$3" fontWeight="bold">
+                  Second Input:
+                </Text>
+                <Input
+                  testID="sheet-keyboard-drag-input-2"
+                  placeholder="Another input..."
+                  onFocus={() => addEvent('input2-focus')}
+                  onBlur={() => addEvent('input2-blur')}
+                />
+              </YStack>
+
+              <Button
+                testID="sheet-keyboard-drag-dismiss-kb"
+                onPress={() => {
+                  Keyboard.dismiss()
+                  addEvent('manual-kb-dismiss')
+                }}
+              >
+                Dismiss Keyboard
+              </Button>
+
+              <Button testID="sheet-keyboard-drag-close" onPress={() => setOpen(false)}>
+                Close Sheet
+              </Button>
+
+              {/* spacer for testing scroll + keyboard */}
+              <YStack
+                height={300}
+                bg="$gray3"
+                borderRadius="$2"
+                padding="$4"
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Text color="$gray11">Spacer area</Text>
+                <Text color="$gray11" fontSize="$2">
+                  Drag here to test sheet drag
+                </Text>
+              </YStack>
+            </YStack>
+          </Sheet.ScrollView>
+        </Sheet.Frame>
+      </Sheet>
+
+      {/* ActionSheet for comparison */}
+      <ActionSheet
+        ref={actionsSheetRef}
+        snapPoints={[80, 50]}
+        initialSnapIndex={0}
+        gestureEnabled
+        keyboardHandlerEnabled
+        containerStyle={{ maxHeight: '100%', height: '100%' }}
+      >
+        <ActionScrollView
+          style={{ width: '100%', flexShrink: 1 }}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="interactive"
+        >
+          <YStack gap="$4" padding="$4">
+            <Text fontSize="$5" fontWeight="bold">
+              ActionSheet (Reference)
+            </Text>
+            <Text fontSize="$3" color="$gray11">
+              Compare keyboard + drag behavior
+            </Text>
+
+            <YStack gap="$2" padding="$3" bg="$backgroundHover" borderRadius="$2">
+              <Text fontSize="$2">KB Height: {keyboardHeight}</Text>
+              <Text fontSize="$2">KB Visible: {keyboardVisible ? 'yes' : 'no'}</Text>
+            </YStack>
+
+            <YStack gap="$2">
+              <Text fontSize="$3" fontWeight="bold">
+                Test Input (tap to show keyboard):
+              </Text>
+              <Input
+                placeholder="Type something..."
+                onFocus={() => addEvent('as-input-focus')}
+                onBlur={() => addEvent('as-input-blur')}
+              />
+            </YStack>
+
+            <YStack gap="$2">
+              <Text fontSize="$3" fontWeight="bold">
+                Second Input:
+              </Text>
+              <Input
+                placeholder="Another input..."
+                onFocus={() => addEvent('as-input2-focus')}
+                onBlur={() => addEvent('as-input2-blur')}
+              />
+            </YStack>
+
+            <Button
+              onPress={() => {
+                Keyboard.dismiss()
+                addEvent('as-manual-kb-dismiss')
+              }}
+            >
+              Dismiss Keyboard
+            </Button>
+
+            <Button onPress={() => actionsSheetRef.current?.hide()}>Close Sheet</Button>
+
+            {/* spacer for testing scroll + keyboard */}
+            <YStack
+              height={300}
+              bg="$gray3"
+              borderRadius="$2"
+              padding="$4"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text color="$gray11">Spacer area</Text>
+              <Text color="$gray11" fontSize="$2">
+                Drag here to test sheet drag
+              </Text>
+            </YStack>
+          </YStack>
+        </ActionScrollView>
+      </ActionSheet>
+    </YStack>
+  )
+}