@hanzogui/kitchen-sink 3.0.5

package/src/usecases/DialogNestedCase.tsx

@@ -0,0 +1,121 @@
+import { X } from '@hanzogui/lucide-icons-2'
+import {
+  Adapt,
+  Button,
+  Dialog,
+  Paragraph,
+  Sheet,
+  Unspaced,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+export function DialogNestedCase() {
+  return (
+    <YStack gap="$4" justifyContent="center" alignItems="center" padding="$4">
+      <DialogInstance />
+    </YStack>
+  )
+}
+
+function DialogInstance({ level = 1 }: { level?: number }) {
+  const testId = level === 1 ? 'parent' : level === 2 ? 'nested' : `level-${level}`
+
+  return (
+    <Dialog modal>
+      <Dialog.Trigger asChild>
+        <Button data-testid={`${testId}-dialog-trigger`}>
+          <Button.Text>Show Dialog (Level {level})</Button.Text>
+        </Button>
+      </Dialog.Trigger>
+
+      <Adapt when="maxMd" platform="touch">
+        <Sheet
+          transition="medium"
+          zIndex={200000}
+          modal
+          dismissOnSnapToBottom
+          unmountChildrenWhenHidden
+        >
+          <Sheet.Frame padding="$4" gap="$4">
+            <Adapt.Contents />
+          </Sheet.Frame>
+          <Sheet.Overlay
+            transition="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Sheet>
+      </Adapt>
+
+      <Dialog.Portal>
+        <Dialog.Overlay
+          key="overlay"
+          transition="quick"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+
+        <Dialog.Content
+          bordered
+          elevate
+          key="content"
+          transition={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          width={450}
+          padding="$6"
+          gap="$4"
+        >
+          <YStack data-testid={`${testId}-dialog-content`} gap="$4">
+            <Dialog.Title>Dialog Level {level}</Dialog.Title>
+            <Dialog.Description>
+              This is dialog level {level}.{' '}
+              {level < 3 ? 'You can open another dialog inside.' : ''}
+            </Dialog.Description>
+
+            <Paragraph data-testid={`${testId}-dialog-paragraph`}>
+              Content for level {level}
+            </Paragraph>
+
+            <XStack alignSelf="flex-end" gap="$4">
+              {/* Nested dialog - only show if level is less than 3 */}
+              {level < 3 && <DialogInstance level={level + 1} />}
+
+              <Dialog.Close displayWhenAdapted asChild>
+                <Button
+                  theme="blue"
+                  aria-label="Close"
+                  data-testid={`${testId}-dialog-close`}
+                >
+                  Close
+                </Button>
+              </Dialog.Close>
+            </XStack>
+
+            <Unspaced>
+              <Dialog.Close asChild>
+                <Button
+                  position="absolute"
+                  right="$3"
+                  top="$3"
+                  size="$2"
+                  circular
+                  icon={X}
+                />
+              </Dialog.Close>
+            </Unspaced>
+          </YStack>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

package/src/usecases/DialogOpenControlled.tsx

@@ -0,0 +1,49 @@
+import { Button, Dialog, View, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for issue #3565
+ * This tests that Dialog works when controlled with open={true}
+ * In JSDOM (Jest), this would fail with "node.show is not a function"
+ * because JSDOM doesn't implement the HTMLDialogElement.show() method
+ */
+export function DialogOpenControlled() {
+  return (
+    <YStack padding="$4" gap="$4">
+      {/* Dialog that starts open - this is the problematic case in JSDOM */}
+      <Dialog open={true} modal>
+        <Dialog.Trigger asChild>
+          <Button data-testid="dialog-trigger">Show Dialog</Button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <Dialog.Overlay
+            key="overlay"
+            transition="quick"
+            opacity={0.5}
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+          <Dialog.Content
+            key="content"
+            bordered
+            elevate
+            transition="quick"
+            enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+            exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+            width={400}
+            padding="$6"
+            gap="$4"
+          >
+            <Dialog.Title>Dialog Test</Dialog.Title>
+            <Dialog.Description>
+              This dialog is controlled with open=true
+            </Dialog.Description>
+            <View data-testid="dialog-content">Hiya!</View>
+            <Dialog.Close asChild>
+              <Button data-testid="dialog-close">Close</Button>
+            </Dialog.Close>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </YStack>
+  )
+}

package/src/usecases/DialogPointerEventsCase.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { Button, Dialog, View, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for dialog pointer events unlock timing
+ * Uses a slow exit animation to verify that pointer events on elements
+ * behind the dialog are restored immediately when the dialog closes,
+ * NOT after the animation completes.
+ */
+export function DialogPointerEventsCase() {
+  const [open, setOpen] = useState(false)
+  const [clickCount, setClickCount] = useState(0)
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <Button data-testid="background-button" onPress={() => setClickCount((c) => c + 1)}>
+        Background Button (clicked: {clickCount})
+      </Button>
+
+      <View data-testid="click-count">{clickCount}</View>
+
+      <Dialog open={open} onOpenChange={setOpen} modal>
+        <Dialog.Trigger asChild>
+          <Button data-testid="dialog-trigger">Open Dialog</Button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <Dialog.Overlay
+            key="overlay"
+            transition="lazy"
+            opacity={0.5}
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+          <Dialog.Content
+            key="content"
+            bordered
+            elevate
+            transition="lazy"
+            enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+            exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+            width={400}
+            padding="$6"
+            gap="$4"
+          >
+            <Dialog.Title>Slow Animation Dialog</Dialog.Title>
+            <Dialog.Description>
+              This dialog has a slow exit animation. When closed, the background button
+              should be clickable immediately, not after the animation finishes.
+            </Dialog.Description>
+            <Dialog.Close asChild>
+              <Button data-testid="dialog-close">Close</Button>
+            </Dialog.Close>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </YStack>
+  )
+}

package/src/usecases/DialogScopedCase.tsx

@@ -0,0 +1,106 @@
+import { Adapt, Button, Dialog, Input, Label, Sheet, XStack, YStack } from '@hanzo/gui'
+
+export function DialogScopedCase() {
+  const shouldAdapt = window.location.search.includes('adapt=true')
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <Dialog modal>
+        <TestDialogContent name="plain" shouldAdapt={shouldAdapt} />
+        <Dialog.Trigger asChild>
+          <Button data-testid={`plain-trigger`}>Open Plain</Button>
+        </Dialog.Trigger>
+      </Dialog>
+
+      <Dialog scope="DialogA" modal>
+        <TestDialogContent name="a" shouldAdapt={shouldAdapt} />
+
+        <Dialog scope="DialogB" modal>
+          <TestDialogContent name="b" shouldAdapt={shouldAdapt} />
+
+          <Dialog.Trigger asChild scope="DialogA">
+            <Button data-testid={`a-trigger`}>Open A</Button>
+          </Dialog.Trigger>
+
+          <Dialog.Trigger asChild scope="DialogB">
+            <Button data-testid={`b-trigger`}>Open B</Button>
+          </Dialog.Trigger>
+        </Dialog>
+      </Dialog>
+    </YStack>
+  )
+}
+
+const TestDialogContent = ({ name, shouldAdapt }) => {
+  return (
+    <>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          key="overlay"
+          transition="quick"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+
+        <Dialog.Content
+          bordered
+          elevate
+          key="content"
+          transition={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          width={400}
+          height={300}
+          padding="$6"
+          gap="$4"
+        >
+          <YStack data-testid={`${name}-dialog-content`} gap="$4">
+            <Dialog.Title>Dialog {name}</Dialog.Title>
+            <Dialog.Description>
+              This is a test dialog for scoped behavior - {name}
+            </Dialog.Description>
+
+            <YStack gap="$3">
+              <Label htmlFor={`name-${name}`}>Name</Label>
+              <Input id={`name-${name}`} placeholder="Enter name" />
+            </YStack>
+
+            <XStack gap="$3" justifyContent="flex-end">
+              <Dialog.Close asChild>
+                <Button variant="outlined" data-testid={`${name}-dialog-close`}>
+                  Cancel
+                </Button>
+              </Dialog.Close>
+              <Button data-testid={`dialog-save`}>Save</Button>
+            </XStack>
+          </YStack>
+        </Dialog.Content>
+      </Dialog.Portal>
+
+      {shouldAdapt && (
+        <Adapt when={true}>
+          <Sheet transition="medium" modal dismissOnSnapToBottom>
+            <Sheet.Frame data-testid={`${name}-sheet-contents`} padding="$4">
+              <Adapt.Contents />
+            </Sheet.Frame>
+            <Sheet.Overlay
+              id={`${name}-sheet-overlay`}
+              backgroundColor="$shadowColor"
+              transition="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+            />
+          </Sheet>
+        </Adapt>
+      )}
+    </>
+  )
+}

package/src/usecases/DialogSheetAdaptCase.tsx

@@ -0,0 +1,178 @@
+import { useState } from 'react'
+import {
+  Adapt,
+  Button,
+  Dialog,
+  Input,
+  Paragraph,
+  Sheet,
+  styled,
+  XStack,
+  YStack,
+} from '@hanzo/gui'
+
+const CONTENT_RADIUS = '$6' as const
+
+/**
+ * Test case for Dialog with onPress on Overlay - Android crash reproduction
+ *
+ * BUG: Adding `onPress` to `Dialog.Overlay` crashes on Android only (iOS works fine)
+ *
+ * Error: "Cannot read property '_internalInstanceHandle' of null"
+ * Location: ReactFabricPublicInstance.js:145, createComponent.native.js:109
+ *
+ * Root cause:
+ * - On Android with Fabric, when onPress is added to Dialog.Overlay inside Dialog.Portal
+ * - The gesture handler setup tries to access the native view's internal handle
+ * - During AnimatePresence mount/unmount, publicInstance._internalInstanceHandle is null
+ * - iOS handles this timing differently and doesn't crash
+ *
+ * To reproduce the crash, add onPress to Dialog.Overlay:
+ * ```
+ * <Dialog.Overlay onPress={() => onOpenChange(false)} />
+ * ```
+ */
+export function DialogSheetAdaptCase() {
+  const [dialogState, setDialogState] = useState<{ open: boolean } | null>(null)
+
+  return (
+    <YStack padding="$4" gap="$4" items="center">
+      <Button testID="open-dialog" onPress={() => setDialogState({ open: true })}>
+        Open Dialog (Adapt to Sheet)
+      </Button>
+
+      {/* Always-mounted dialog pattern matching takeout3 */}
+      <TakeoutStyleDialog
+        open={!!dialogState?.open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDialogState(null)
+          }
+        }}
+      />
+    </YStack>
+  )
+}
+
+/**
+ * This component matches the takeout3 Dialog pattern exactly
+ * Key characteristics:
+ * - Always mounted at layout level
+ * - Controlled via external state (starts closed)
+ * - Uses Dialog.Adapt with Sheet for mobile/touch
+ * - Sheet uses moveOnKeyboardChange which requires gesture handler
+ */
+function TakeoutStyleDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  return (
+    <Dialog modal open={open} onOpenChange={onOpenChange}>
+      {/* Simplified to match DialogDemo exactly */}
+      <Adapt platform="touch" when="maxMd">
+        <Sheet
+          transition="medium"
+          zIndex={200000}
+          modal
+          dismissOnSnapToBottom
+          unmountChildrenWhenHidden
+        >
+          <Sheet.Frame p="$4" gap="$4">
+            <Adapt.Contents />
+          </Sheet.Frame>
+          <Sheet.Overlay
+            bg="$background"
+            opacity={0.5}
+            transition="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Sheet>
+      </Adapt>
+
+      <Dialog.Portal z={500_000}>
+        <DialogOverlay
+          key="overlay"
+          bg="$shadow6"
+          transition="quick"
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+          onPress={() => {
+            console.log('Overlay pressed')
+          }}
+        />
+
+        <Dialog.FocusScope focusOnIdle>
+          <DialogContent key="content" rounded={CONTENT_RADIUS} overflow="hidden" p="$3">
+            <YStack pointerEvents="box-none" gap="$2">
+              <Dialog.Title fontFamily="$mono" size="$5" text="center">
+                Dialog with Sheet Adapt
+              </Dialog.Title>
+              <Dialog.Description size="$4" color="$color10">
+                On mobile/touch, this adapts to a Sheet with gesture handling.
+              </Dialog.Description>
+            </YStack>
+
+            <Input placeholder="Enter your name" />
+
+            <YStack gap="$3">
+              <Paragraph>
+                This tests the gesture handler integration when Sheet renders inside
+                AnimatePresence via Dialog.Adapt.
+              </Paragraph>
+            </YStack>
+
+            <XStack justify="flex-end" gap="$3">
+              <Dialog.Close asChild displayWhenAdapted>
+                <Button testID="close-dialog" theme="accent">
+                  Close
+                </Button>
+              </Dialog.Close>
+            </XStack>
+          </DialogContent>
+        </Dialog.FocusScope>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+const DialogOverlay = styled(Dialog.Overlay, {
+  transition: '200ms',
+  opacity: 1,
+  backdropFilter: 'blur(3px)',
+  enterStyle: { opacity: 0 },
+  exitStyle: { opacity: 0 },
+})
+
+const DialogContent = styled(Dialog.Content, {
+  unstyled: true,
+  z: 1000000,
+  transition: '200ms',
+  bg: 'transparent',
+  borderWidth: 0.5,
+  rounded: CONTENT_RADIUS,
+  borderColor: '$color3',
+  position: 'relative',
+  backdropFilter: 'blur(25px)',
+  shadowColor: '$shadow3',
+  shadowRadius: 20,
+  shadowOffset: { height: 20, width: 0 },
+  maxH: 600,
+  width: '60%',
+  minW: 200,
+  maxW: 500,
+  p: '$4',
+  opacity: 1,
+  y: 0,
+  enterStyle: { x: 0, y: -5, opacity: 0, scale: 0.985 },
+  exitStyle: { x: 0, y: 5, opacity: 0 },
+
+  focusStyle: {
+    outlineWidth: 2,
+    outlineColor: '$background02',
+    outlineStyle: 'solid',
+  },
+})

package/src/usecases/DialogSheetAdaptResizeCase.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { Button, Dialog, Paragraph, ScrollView, Sheet, XStack, YStack } from '@hanzo/gui'
+
+/**
+ * Test case for Dialog → Sheet adapt on viewport resize
+ *
+ * BUG: When a Dialog is open and the viewport resizes from wide (Dialog) to narrow
+ * (Sheet via Adapt), the Sheet appears empty - the portal content is not transferred.
+ *
+ * Expected: Dialog content should appear inside the Sheet after resize
+ * Actual: Sheet is empty after resize
+ *
+ * To reproduce:
+ * 1. Open at wide viewport (> 768px) - Dialog appears
+ * 2. Resize viewport to narrow (< 768px) - Sheet should appear with content
+ * 3. Content is missing from the Sheet
+ */
+export function DialogSheetAdaptResizeCase() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <YStack padding="$4" gap="$4" items="center">
+      <Button testID="open-dialog" onPress={() => setOpen(true)}>
+        Open Dialog
+      </Button>
+
+      <Dialog modal open={open} onOpenChange={setOpen}>
+        {/* adapt to sheet on narrow viewports */}
+        <Dialog.Adapt when="maxMd">
+          <Sheet zIndex={200000} modal dismissOnSnapToBottom>
+            <Sheet.Frame padding="$4" gap="$4">
+              <Sheet.ScrollView>
+                <Dialog.Adapt.Contents />
+              </Sheet.ScrollView>
+            </Sheet.Frame>
+            <Sheet.Overlay
+              bg="$shadow4"
+              transition="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+            />
+          </Sheet>
+        </Dialog.Adapt>
+
+        <Dialog.Portal>
+          <Dialog.Overlay
+            key="overlay"
+            transition="medium"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+
+          <Dialog.Content
+            bordered
+            elevate
+            key="content"
+            transition="quick"
+            enterStyle={{ y: -10, opacity: 0, scale: 0.975 }}
+            exitStyle={{ y: 10, opacity: 0, scale: 0.975 }}
+            width="90%"
+            maxWidth={600}
+          >
+            <ScrollView>
+              <YStack gap="$4" padding="$2">
+                <Dialog.Title testID="dialog-title">Dialog Title</Dialog.Title>
+
+                <Dialog.Description testID="dialog-description">
+                  This content should be visible both when shown as a Dialog (wide
+                  viewport) and when adapted to a Sheet (narrow viewport).
+                </Dialog.Description>
+
+                <Paragraph testID="dialog-content">
+                  If you can see this text in both the Dialog and the Sheet after
+                  resizing, the portal logic is working correctly.
+                </Paragraph>
+
+                <YStack gap="$2">
+                  <Paragraph>Additional content to make the test more robust:</Paragraph>
+                  <Paragraph testID="extra-content-1">Extra content line 1</Paragraph>
+                  <Paragraph testID="extra-content-2">Extra content line 2</Paragraph>
+                  <Paragraph testID="extra-content-3">Extra content line 3</Paragraph>
+                </YStack>
+              </YStack>
+            </ScrollView>
+
+            <XStack justify="flex-end" gap="$3" padding="$2">
+              <Dialog.Close asChild displayWhenAdapted>
+                <Button testID="close-dialog" theme="accent">
+                  Close
+                </Button>
+              </Dialog.Close>
+            </XStack>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </YStack>
+  )
+}