@hanzogui/kitchen-sink 3.0.5

package/src/usecases/PopoverHoverableCase.tsx

@@ -0,0 +1,167 @@
+import { Popover, YStack, SizableText, XStack } from '@hanzo/gui'
+
+// each case is isolated for clean testing
+
+export function PopoverHoverableDelayCase() {
+  return (
+    <YStack padding="$10" alignItems="center" gap="$4">
+      <SizableText size="$3" color="$color9">
+        Hover delay: open should delay 400ms, close should delay 400ms
+      </SizableText>
+      <Popover placement="bottom" hoverable={{ delay: 400 }} offset={8}>
+        <Popover.Trigger asChild>
+          <XStack
+            id="delay-trigger"
+            px="$4"
+            py="$2"
+            bg="$color3"
+            rounded="$4"
+            cursor="pointer"
+          >
+            <SizableText>Hover me (delay: 400ms)</SizableText>
+          </XStack>
+        </Popover.Trigger>
+        <Popover.Content
+          id="delay-content"
+          disableFocusScope
+          unstyled
+          transition="200ms"
+          animateOnly={['opacity', 'transform']}
+          enterStyle={{ opacity: 0, y: -4 }}
+          exitStyle={{ opacity: 0, y: -4 }}
+          bg="$color4"
+          rounded="$4"
+          px="$4"
+          py="$3"
+        >
+          <SizableText>Popover content (delay test)</SizableText>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}
+
+export function PopoverHoverableRestMsCase() {
+  return (
+    <YStack padding="$10" alignItems="center" gap="$4">
+      <SizableText size="$3" color="$color9">
+        restMs: opens after 400ms rest, exit should NOT have extra delay
+      </SizableText>
+      <Popover placement="bottom" hoverable={{ restMs: 400 }} offset={8}>
+        <Popover.Trigger asChild>
+          <XStack
+            id="restms-trigger"
+            px="$4"
+            py="$2"
+            bg="$color3"
+            rounded="$4"
+            cursor="pointer"
+          >
+            <SizableText>Hover me (restMs: 400ms)</SizableText>
+          </XStack>
+        </Popover.Trigger>
+        <Popover.Content
+          id="restms-content"
+          disableFocusScope
+          unstyled
+          transition="200ms"
+          animateOnly={['opacity', 'transform']}
+          enterStyle={{ opacity: 0, y: -4 }}
+          exitStyle={{ opacity: 0, y: -4 }}
+          bg="$color4"
+          rounded="$4"
+          px="$4"
+          py="$3"
+        >
+          <SizableText>Popover content (restMs test)</SizableText>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}
+
+// tests restMs re-hover and safePolygon (hovering content via the gap)
+export function PopoverHoverableSafePolygonCase() {
+  return (
+    <YStack padding="$10" alignItems="center" gap="$4">
+      <SizableText size="$3" color="$color9">
+        restMs: 60, offset: 20 - should be able to hover content through gap
+      </SizableText>
+      <Popover placement="bottom" hoverable={{ restMs: 260, delay: 0 }} offset={80}>
+        <Popover.Trigger asChild>
+          <XStack
+            id="safepoly-trigger"
+            px="$4"
+            py="$2"
+            bg="$color3"
+            rounded="$4"
+            cursor="pointer"
+          >
+            <SizableText>Hover me (safePolygon test)</SizableText>
+          </XStack>
+        </Popover.Trigger>
+        <Popover.Content
+          id="safepoly-content"
+          disableFocusScope
+          unstyled
+          transition="200ms"
+          animateOnly={['opacity', 'transform']}
+          enterStyle={{ opacity: 0, y: -4 }}
+          exitStyle={{ opacity: 0, y: -4 }}
+          bg="$color4"
+          rounded="$4"
+          px="$4"
+          py="$3"
+        >
+          <SizableText id="safepoly-text">Popover content (safePolygon)</SizableText>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}
+
+export function PopoverHoverableExitAnimCase() {
+  return (
+    <YStack padding="$10" alignItems="center" gap="$4">
+      <SizableText size="$3" color="$color9">
+        Exit animation: should animate out (not instant disappear)
+      </SizableText>
+
+      {/* target to move mouse to - far from popover */}
+      <XStack id="away-target" position="absolute" bottom="$4" left="$4" opacity={0.01}>
+        <SizableText>away</SizableText>
+      </XStack>
+
+      <Popover placement="bottom" hoverable offset={8}>
+        <Popover.Trigger asChild>
+          <XStack
+            id="exitanim-trigger"
+            px="$4"
+            py="$2"
+            bg="$color3"
+            rounded="$4"
+            cursor="pointer"
+          >
+            <SizableText>Hover me (exit animation)</SizableText>
+          </XStack>
+        </Popover.Trigger>
+        <Popover.Content
+          id="exitanim-content"
+          disableFocusScope
+          unstyled
+          transition="500ms"
+          animateOnly={['opacity', 'transform']}
+          opacity={1}
+          enterStyle={{ opacity: 0, y: -4 }}
+          exitStyle={{ opacity: 0, y: -4 }}
+          bg="$color4"
+          rounded="$4"
+          px="$4"
+          py="$3"
+        >
+          <SizableText>Popover content (exit anim test)</SizableText>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}

package/src/usecases/PopoverHoverableDisableClickCase.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import { Popover, YStack, SizableText, XStack } from '@hanzo/gui'
+
+/**
+ * Tests the disablePressTrigger prop on Popover.Trigger.
+ *
+ * Bug scenario: hoverable popover where user dismisses via onPressIn.
+ * Without disablePressTrigger, the built-in onPress handler fires after onPressIn
+ * and re-opens the popover (state oscillation: close → open → close).
+ *
+ * With disablePressTrigger, the trigger's built-in click toggle is suppressed,
+ * so the user's onPressIn dismiss works cleanly.
+ */
+
+export function PopoverHoverableDisableClickCase() {
+  const [open, setOpen] = useState(false)
+  const [log, setLog] = useState<string[]>([])
+
+  const addLog = (msg: string) => {
+    setLog((prev) => [...prev.slice(-9), msg])
+  }
+
+  return (
+    <YStack padding="$10" alignItems="center" gap="$4">
+      <SizableText size="$3" color="$color9">
+        Hoverable popover with disablePressTrigger - clicking should dismiss via onPressIn
+        only
+      </SizableText>
+
+      <Popover
+        placement="bottom"
+        hoverable={{ delay: 0 }}
+        offset={8}
+        open={open}
+        onOpenChange={(next) => {
+          addLog(`onOpenChange: ${next}`)
+          setOpen(next)
+        }}
+      >
+        <Popover.Trigger
+          asChild
+          disablePressTrigger
+          onPressIn={() => {
+            if (open) {
+              addLog('onPressIn: dismissing')
+              setOpen(false)
+            }
+          }}
+        >
+          <XStack
+            id="disableclick-trigger"
+            px="$4"
+            py="$2"
+            bg="$color3"
+            rounded="$4"
+            cursor="pointer"
+          >
+            <SizableText>Hover me (disablePressTrigger)</SizableText>
+          </XStack>
+        </Popover.Trigger>
+        <Popover.Content
+          id="disableclick-content"
+          disableFocusScope
+          unstyled
+          transition="200ms"
+          animateOnly={['opacity', 'transform']}
+          enterStyle={{ opacity: 0, y: -4 }}
+          exitStyle={{ opacity: 0, y: -4 }}
+          bg="$color4"
+          rounded="$4"
+          px="$4"
+          py="$3"
+        >
+          <SizableText>Popover content (disablePressTrigger test)</SizableText>
+        </Popover.Content>
+      </Popover>
+
+      {/* without disablePressTrigger for comparison */}
+      <Popover placement="bottom" hoverable={{ delay: 0 }} offset={8}>
+        <Popover.Trigger asChild>
+          <XStack
+            id="withclick-trigger"
+            px="$4"
+            py="$2"
+            bg="$color3"
+            rounded="$4"
+            cursor="pointer"
+          >
+            <SizableText>Hover me (normal click)</SizableText>
+          </XStack>
+        </Popover.Trigger>
+        <Popover.Content
+          id="withclick-content"
+          disableFocusScope
+          unstyled
+          transition="200ms"
+          animateOnly={['opacity', 'transform']}
+          enterStyle={{ opacity: 0, y: -4 }}
+          exitStyle={{ opacity: 0, y: -4 }}
+          bg="$color4"
+          rounded="$4"
+          px="$4"
+          py="$3"
+        >
+          <SizableText>Popover content (normal click)</SizableText>
+        </Popover.Content>
+      </Popover>
+
+      <YStack id="open-state-log" gap="$1" mt="$4">
+        {log.map((entry, i) => (
+          <SizableText key={i} size="$2" color="$color8" fontFamily="$mono">
+            {entry}
+          </SizableText>
+        ))}
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/PopoverHoverableRapidCase.tsx

@@ -0,0 +1,103 @@
+import { useState, useCallback, useRef } from 'react'
+import { Popover, YStack, SizableText, XStack } from '@hanzo/gui'
+
+// test case: rapidly moving across many side-by-side triggers with short restMs
+// should track the hovered trigger, not get "stuck" on a past one
+
+type NavId = 'a' | 'b' | 'c' | 'd' | 'e' | 'f'
+const NAV_IDS: NavId[] = ['a', 'b', 'c', 'd', 'e', 'f']
+
+export function PopoverHoverableRapidCase() {
+  const [open, setOpen] = useState(false)
+  const [activeId, setActiveId] = useState<NavId | null>(null)
+  const prevIdRef = useRef<NavId | null>(null)
+  const displayId = activeId || prevIdRef.current
+
+  const handleEnter = useCallback(
+    (id: NavId) => {
+      if (id !== activeId) {
+        prevIdRef.current = activeId
+        setActiveId(id)
+      }
+    },
+    [activeId]
+  )
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <SizableText size="$3" color="$color9">
+        Rapid hover across many triggers - should track current trigger
+      </SizableText>
+
+      <YStack height={60} />
+
+      <Popover
+        scope="rapid"
+        open={open}
+        onOpenChange={setOpen}
+        hoverable={{ restMs: 60, delay: 0 }}
+        offset={8}
+        placement="bottom"
+      >
+        {/* larger gaps to expose the race condition - mouse must cross gap */}
+        <XStack gap="$6" id="rapid-triggers">
+          {NAV_IDS.map((id) => (
+            <Popover.Trigger
+              key={id}
+              scope="rapid"
+              display="contents"
+              asChild="except-style"
+              onMouseEnter={() => handleEnter(id)}
+            >
+              <XStack
+                id={`rapid-trigger-${id}`}
+                px="$4"
+                py="$2"
+                bg={open && displayId === id ? '$color5' : '$color3'}
+                rounded="$4"
+                cursor="pointer"
+                hoverStyle={{ bg: '$color4' }}
+              >
+                <SizableText>{id.toUpperCase()}</SizableText>
+              </XStack>
+            </Popover.Trigger>
+          ))}
+        </XStack>
+
+        <Popover.Content
+          id="rapid-content"
+          scope="rapid"
+          unstyled
+          disableFocusScope
+          transition="100ms"
+          animateOnly={['transform', 'opacity']}
+          opacity={1}
+          enterStyle={{ y: -4, opacity: 0 }}
+          exitStyle={{ y: 4, opacity: 0 }}
+          width={200}
+          height={80}
+        >
+          <YStack
+            bg="$color2"
+            rounded="$5"
+            outlineColor="$color4"
+            outlineWidth={1}
+            outlineStyle="solid"
+            width={200}
+            height={80}
+            overflow="hidden"
+            position="relative"
+            alignItems="center"
+            justifyContent="center"
+          >
+            {displayId && (
+              <SizableText id="rapid-panel-label" size="$5" fontWeight="600">
+                Panel {displayId.toUpperCase()}
+              </SizableText>
+            )}
+          </YStack>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}

package/src/usecases/PopoverHoverableScopedCase.tsx

@@ -0,0 +1,135 @@
+import { useState, useCallback, useRef } from 'react'
+import { AnimatePresence, Popover, YStack, SizableText, XStack, styled } from '@hanzo/gui'
+
+// mirrors the WebsiteHeader pattern:
+// - controlled open state
+// - scope + multiple triggers
+// - hoverable with delay/restMs
+// - animated content panels with AnimatePresence inside
+
+type NavId = 'about' | 'blog' | 'contact'
+const NAV_IDS: NavId[] = ['about', 'blog', 'contact']
+
+const PanelFrame = styled(YStack, {
+  position: 'absolute',
+  inset: 0,
+  padding: '$4',
+  opacity: 1,
+  x: 0,
+  variants: {
+    going: {
+      ':number': (going) => ({
+        enterStyle: { x: going > 0 ? 80 : -80, opacity: 0 },
+        exitStyle: { x: going < 0 ? 80 : -80, opacity: 0 },
+      }),
+    },
+  } as const,
+})
+
+export function PopoverHoverableScopedCase() {
+  const [open, setOpen] = useState(false)
+  const [activeId, setActiveId] = useState<NavId | null>(null)
+  const [going, setGoing] = useState(0)
+  const prevIdRef = useRef<NavId | null>(null)
+  const displayId = activeId || prevIdRef.current
+
+  const handleEnter = useCallback(
+    (id: NavId) => {
+      if (id !== activeId) {
+        if (activeId) {
+          const pi = NAV_IDS.indexOf(activeId)
+          const ni = NAV_IDS.indexOf(id)
+          setGoing(ni > pi ? 1 : -1)
+        }
+        prevIdRef.current = activeId
+        setActiveId(id)
+      }
+    },
+    [activeId]
+  )
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <SizableText size="$3" color="$color9">
+        Scoped hoverable popover - mirrors WebsiteHeader pattern
+      </SizableText>
+
+      {/* large spacer so popover content opens in a clear area below triggers */}
+      <YStack height={60} />
+
+      <Popover
+        scope="nav"
+        open={open}
+        onOpenChange={setOpen}
+        hoverable={{ delay: 300, restMs: 300 }}
+        offset={8}
+        placement="bottom"
+      >
+        <XStack gap="$2" id="nav-triggers">
+          {NAV_IDS.map((id) => (
+            <Popover.Trigger
+              key={id}
+              scope="nav"
+              display="contents"
+              asChild="except-style"
+              onMouseEnter={() => handleEnter(id)}
+            >
+              <XStack
+                id={`nav-trigger-${id}`}
+                px="$4"
+                py="$2"
+                bg={open && displayId === id ? '$color4' : '$color3'}
+                rounded="$4"
+                cursor="pointer"
+                hoverStyle={{ bg: '$color4' }}
+              >
+                <SizableText>{id.charAt(0).toUpperCase() + id.slice(1)}</SizableText>
+              </XStack>
+            </Popover.Trigger>
+          ))}
+        </XStack>
+
+        <Popover.Content
+          id="nav-content"
+          scope="nav"
+          unstyled
+          disableFocusScope
+          animatePosition
+          transition="500ms"
+          animateOnly={['transform', 'opacity']}
+          opacity={1}
+          enterStyle={{ y: -6, opacity: 0 }}
+          exitStyle={{ y: 4, opacity: 0 }}
+          width={300}
+          height={200}
+        >
+          {/* bounding wrapper so position:absolute panels don't escape to the portal root */}
+          <YStack
+            bg="$color2"
+            rounded="$5"
+            outlineColor="$color4"
+            outlineWidth={1}
+            outlineStyle="solid"
+            width={300}
+            height={200}
+            overflow="hidden"
+            position="relative"
+          >
+            <AnimatePresence initial={false} custom={{ going }}>
+              {displayId && (
+                <PanelFrame key={displayId} going={going}>
+                  <SizableText id={`nav-panel-${displayId}`} size="$5" fontWeight="600">
+                    {displayId.charAt(0).toUpperCase() + displayId.slice(1)} Panel
+                  </SizableText>
+                  <SizableText size="$3" color="$color9">
+                    Content for {displayId}
+                  </SizableText>
+                </PanelFrame>
+              )}
+            </AnimatePresence>
+          </YStack>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}

package/src/usecases/PopoverScopedCase.tsx

@@ -0,0 +1,76 @@
+import { Adapt, Button, Paragraph, Popover, Sheet, XStack, YStack } from '@hanzo/gui'
+
+export function PopoverScopedCase() {
+  const shouldAdapt = window.location.search.includes('adapt=true')
+
+  return (
+    <YStack padding="$4" gap="$4">
+      <Popover size="$5" allowFlip stayInFrame offset={15} resize>
+        <TestPopoverContent shouldAdapt={shouldAdapt} name="plain" />
+        <Popover.Trigger asChild>
+          <Button data-testid={`plain-trigger`}>Open Plain</Button>
+        </Popover.Trigger>
+      </Popover>
+
+      <Popover scope="PopoverA" size="$5" allowFlip stayInFrame offset={15} resize>
+        <TestPopoverContent shouldAdapt={shouldAdapt} name="a" />
+
+        <Popover scope="PopoverB" size="$5" allowFlip stayInFrame offset={15} resize>
+          <TestPopoverContent shouldAdapt={shouldAdapt} name="b" />
+
+          <Popover.Trigger asChild scope="PopoverA">
+            <Button data-testid={`a-trigger`}>Open A</Button>
+          </Popover.Trigger>
+
+          <Popover.Trigger asChild scope="PopoverB">
+            <Button data-testid={`b-trigger`}>Open B</Button>
+          </Popover.Trigger>
+        </Popover>
+      </Popover>
+    </YStack>
+  )
+}
+
+const TestPopoverContent = ({ name, shouldAdapt }) => {
+  return (
+    <>
+      <Popover.Content
+        borderWidth={1}
+        borderColor="$borderColor"
+        width={300}
+        height={300}
+        elevate
+      >
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+
+        <YStack data-testid={`${name}-popover-content`} gap="$3">
+          <XStack gap="$3">
+            <Paragraph size="$3">Popover {name}</Paragraph>
+          </XStack>
+
+          <Popover.Close asChild>
+            <Button size="$3" data-testid={`popover-close`}>
+              Close
+            </Button>
+          </Popover.Close>
+        </YStack>
+      </Popover.Content>
+
+      {shouldAdapt && (
+        <Adapt when={true}>
+          <Sheet transition="medium" modal dismissOnSnapToBottom>
+            <Sheet.Frame data-testid={`${name}-sheet-contents`} padding="$4">
+              <Adapt.Contents />
+            </Sheet.Frame>
+            <Sheet.Overlay
+              backgroundColor="$shadowColor"
+              transition="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+            />
+          </Sheet>
+        </Adapt>
+      )}
+    </>
+  )
+}

package/src/usecases/PopoverTriggerIsolationCase.tsx

@@ -0,0 +1,80 @@
+import { memo, useRef, useState } from 'react'
+import { Button, Paragraph, Popover, XStack, YStack, Text, View } from '@hanzo/gui'
+
+/**
+ * Test case for Popover trigger render isolation
+ *
+ * With push-based registration, only the ACTIVE trigger re-renders when
+ * the popover opens - other triggers stay untouched.
+ */
+
+// component that tracks its render count - must be memoized to isolate from parent re-renders
+const RenderCountingTrigger = memo(function RenderCountingTrigger({
+  testId,
+  label,
+  scope,
+}: {
+  testId: string
+  label: string
+  scope: string
+}) {
+  const renderCountRef = useRef(0)
+  renderCountRef.current++
+
+  return (
+    <View>
+      <Popover.Trigger scope={scope} asChild>
+        <Button data-testid={testId}>{label}</Button>
+      </Popover.Trigger>
+      <Text data-testid={`${testId}-render-count`} fontSize="$1" textAlign="center">
+        renders: {renderCountRef.current}
+      </Text>
+    </View>
+  )
+})
+
+export function PopoverTriggerIsolationCase() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <YStack flex={1} gap="$6" p="$4" bg="$background">
+      <Text fontWeight="bold">Trigger isolation: only active trigger re-renders</Text>
+
+      <Popover scope="isolated" open={open} onOpenChange={setOpen}>
+        <XStack gap="$4" justifyContent="center">
+          <RenderCountingTrigger
+            testId="isolated-trigger-1"
+            label="Trigger 1"
+            scope="isolated"
+          />
+          <RenderCountingTrigger
+            testId="isolated-trigger-2"
+            label="Trigger 2"
+            scope="isolated"
+          />
+          <RenderCountingTrigger
+            testId="isolated-trigger-3"
+            label="Trigger 3"
+            scope="isolated"
+          />
+        </XStack>
+
+        <Popover.Content
+          scope="isolated"
+          data-testid="isolated-popover-content"
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+          p="$4"
+        >
+          <Popover.Arrow scope="isolated" />
+          <Paragraph>Shared popover content</Paragraph>
+          <Popover.Close scope="isolated" asChild>
+            <Button data-testid="isolated-close" size="$2" mt="$2">
+              Close
+            </Button>
+          </Popover.Close>
+        </Popover.Content>
+      </Popover>
+    </YStack>
+  )
+}