@hanzogui/kitchen-sink 3.0.5

package/tests/PopoverInitialPosition.animated.test.tsx

@@ -0,0 +1,82 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// regression: popover content should appear near its trigger, not fly in
+// from the top-left corner. when floating-ui resets isPositioned on close
+// but x/y retain stale values, the hide logic must still prevent the
+// content from being visible at the wrong position.
+
+// native animation driver has a pre-existing initial position bug
+const driverName = process.env.HANZO_GUI_TEST_ANIMATION_DRIVER || ''
+test.skip(
+  driverName === 'native',
+  'native driver has pre-existing initial position issue'
+)
+
+test.describe('Popover initial position', () => {
+  test('hoverable popover appears near trigger, not at top-left', async ({ page }) => {
+    await setupPage(page, {
+      name: 'PopoverHoverableScopedCase',
+      type: 'useCase',
+    })
+
+    const content = page.locator('#nav-content')
+    const trigger = page.locator('#nav-trigger-about')
+    const triggerBox = await trigger.boundingBox()
+    expect(triggerBox).toBeTruthy()
+
+    // hover trigger to open
+    await trigger.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible()
+
+    const contentBox = await content.boundingBox()
+    expect(contentBox).toBeTruthy()
+
+    // content should be near the trigger, not at the page origin
+    // popover is placed below trigger, so content.y should be close to trigger bottom
+    const triggerBottom = triggerBox!.y + triggerBox!.height
+    expect(contentBox!.y).toBeGreaterThan(triggerBottom - 20)
+    expect(contentBox!.y).toBeLessThan(triggerBottom + 100)
+
+    // content x should be in the general area of the trigger, not at 0
+    expect(contentBox!.x).toBeGreaterThan(triggerBox!.x - contentBox!.width)
+  })
+
+  test('popover does not briefly appear at origin on reopen', async ({ page }) => {
+    await setupPage(page, {
+      name: 'PopoverHoverableScopedCase',
+      type: 'useCase',
+    })
+
+    const content = page.locator('#nav-content')
+    const trigger = page.locator('#nav-trigger-contact')
+
+    // open
+    await trigger.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible()
+
+    // close fully
+    await page.mouse.move(10, 600, { steps: 2 })
+    await page.waitForTimeout(800)
+    await expect(content).not.toBeVisible()
+
+    // reopen on same trigger and check position EARLY
+    await trigger.hover()
+    await page.waitForTimeout(100)
+
+    const earlyBox = await content.boundingBox()
+    if (earlyBox) {
+      const triggerBox = await trigger.boundingBox()
+      // if content is visible, it must NOT be at the top-left corner
+      // (the fly-from-origin bug shows content starting near 0,0)
+      const distFromOrigin = Math.sqrt(earlyBox.x ** 2 + earlyBox.y ** 2)
+      const triggerDist = Math.sqrt(
+        (earlyBox.x - triggerBox!.x) ** 2 + (earlyBox.y - triggerBox!.y) ** 2
+      )
+      // content should be closer to trigger than to the page origin
+      expect(triggerDist).toBeLessThan(distFromOrigin + 50)
+    }
+  })
+})

package/tests/PopoverMiddlewareSkipRegression.animated.test.tsx

@@ -0,0 +1,221 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Regression test for: skipping middleware when closed causes position/arrow
+ * glitches on reopen. When middleware is set to [] while closed, computePosition
+ * runs without offset/arrow/transformOrigin, producing wrong cached position.
+ * On reopen, the animation starts from that wrong position.
+ */
+test.describe('Popover middleware skip regression', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver !== 'css' && driver !== 'motion') {
+      test.skip()
+      return
+    }
+
+    await setupPage(page, {
+      name: 'PopoverHoverableScopedCase',
+      type: 'useCase',
+      searchParams: { animationDriver: driver },
+    })
+    await page.waitForLoadState('networkidle')
+  })
+
+  test('position is stable across close/reopen cycles at same trigger', async ({
+    page,
+  }) => {
+    const about = page.locator('#nav-trigger-about')
+    const content = page.locator('#nav-content')
+
+    // open at "about"
+    await about.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(700)
+
+    // record settled position
+    const pos1 = await content.evaluate((el) => {
+      const r = el.getBoundingClientRect()
+      return { x: r.left, y: r.top }
+    })
+
+    // close
+    await page.mouse.move(0, 0)
+    await page.waitForTimeout(600)
+
+    // reopen at same trigger
+    await about.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(700)
+
+    // record settled position again
+    const pos2 = await content.evaluate((el) => {
+      const r = el.getBoundingClientRect()
+      return { x: r.left, y: r.top }
+    })
+
+    // positions should match (same trigger, same content)
+    expect(
+      Math.abs(pos2.x - pos1.x),
+      `X position shifted by ${(pos2.x - pos1.x).toFixed(1)}px after close/reopen`
+    ).toBeLessThan(2)
+    expect(
+      Math.abs(pos2.y - pos1.y),
+      `Y position shifted by ${(pos2.y - pos1.y).toFixed(1)}px after close/reopen`
+    ).toBeLessThan(2)
+  })
+
+  test('reopen animation starts near final position, not from origin', async ({
+    page,
+  }) => {
+    const about = page.locator('#nav-trigger-about')
+    const content = page.locator('#nav-content')
+
+    // first open to establish position
+    await about.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(700)
+
+    const settledPos = await content.evaluate((el) => {
+      const r = el.getBoundingClientRect()
+      return { x: r.left, y: r.top }
+    })
+
+    // close
+    await page.mouse.move(0, 0)
+    await page.waitForTimeout(600)
+
+    // start tracking positions immediately, then reopen
+    await page.evaluate(() => {
+      ;(window as any).__reopenPositions = []
+      ;(window as any).__trackReopen = true
+      const track = () => {
+        if (!(window as any).__trackReopen) return
+        const el = document.getElementById('nav-content')
+        if (el) {
+          const style = window.getComputedStyle(el)
+          if (parseFloat(style.opacity) > 0.05) {
+            const r = el.getBoundingClientRect()
+            ;(window as any).__reopenPositions.push({
+              x: r.left,
+              y: r.top,
+              opacity: style.opacity,
+              time: Date.now(),
+            })
+          }
+        }
+        requestAnimationFrame(track)
+      }
+      requestAnimationFrame(track)
+    })
+
+    // reopen
+    await about.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(700)
+
+    await page.evaluate(() => {
+      ;(window as any).__trackReopen = false
+    })
+
+    const positions: { x: number; y: number; opacity: string; time: number }[] =
+      await page.evaluate(() => (window as any).__reopenPositions)
+
+    if (positions.length === 0) return
+
+    // the FIRST visible frame should be near the settled position, not at (0,0)
+    // or some other wrong location caused by missing middleware
+    const firstFrame = positions[0]
+    const distFromSettled = Math.sqrt(
+      (firstFrame.x - settledPos.x) ** 2 + (firstFrame.y - settledPos.y) ** 2
+    )
+
+    // allow up to 50px for enter animation movement (enterStyle y: -6)
+    // but reject positions that are hundreds of pixels away (middleware bug)
+    expect(
+      distFromSettled,
+      `First visible frame at (${firstFrame.x.toFixed(0)}, ${firstFrame.y.toFixed(0)}) ` +
+        `is ${distFromSettled.toFixed(0)}px from settled position ` +
+        `(${settledPos.x.toFixed(0)}, ${settledPos.y.toFixed(0)})`
+    ).toBeLessThan(50)
+  })
+
+  test('switching triggers: no position jump on entry', async ({ page }) => {
+    const about = page.locator('#nav-trigger-about')
+    const contact = page.locator('#nav-trigger-contact')
+    const content = page.locator('#nav-content')
+
+    // open on about first
+    await about.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(700)
+
+    // close
+    await page.mouse.move(0, 0)
+    await page.waitForTimeout(600)
+
+    // track positions during reopen at contact
+    await page.evaluate(() => {
+      ;(window as any).__switchPositions = []
+      ;(window as any).__trackSwitch = true
+      const track = () => {
+        if (!(window as any).__trackSwitch) return
+        const el = document.getElementById('nav-content')
+        if (el) {
+          const style = window.getComputedStyle(el)
+          if (parseFloat(style.opacity) > 0.05) {
+            const r = el.getBoundingClientRect()
+            ;(window as any).__switchPositions.push({
+              x: r.left,
+              y: r.top,
+              time: Date.now(),
+            })
+          }
+        }
+        requestAnimationFrame(track)
+      }
+      requestAnimationFrame(track)
+    })
+
+    // open on contact
+    await contact.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(700)
+
+    await page.evaluate(() => {
+      ;(window as any).__trackSwitch = false
+    })
+
+    const contactPos = await content.evaluate((el) => {
+      const r = el.getBoundingClientRect()
+      return { x: r.left, y: r.top }
+    })
+
+    const positions: { x: number; y: number; time: number }[] = await page.evaluate(
+      () => (window as any).__switchPositions
+    )
+
+    if (positions.length < 3) return
+
+    // check that no frame during entry is wildly far from final position
+    // (would indicate middleware was missing during position computation)
+    const wildFrames = positions.filter((p) => {
+      const dist = Math.sqrt((p.x - contactPos.x) ** 2 + (p.y - contactPos.y) ** 2)
+      return dist > 100 // more than 100px from where it should end up
+    })
+
+    expect(
+      wildFrames.length,
+      `${wildFrames.length} frames were >100px from final position. ` +
+        `First wild frame: (${wildFrames[0]?.x.toFixed(0)}, ${wildFrames[0]?.y.toFixed(0)}), ` +
+        `final: (${contactPos.x.toFixed(0)}, ${contactPos.y.toFixed(0)})`
+    ).toBe(0)
+  })
+})

package/tests/PopoverScoped.test.tsx

@@ -0,0 +1,128 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test('scoped popovers work', async ({ page }) => {
+  await setupPage(page, { name: 'PopoverScopedCase', type: 'useCase' })
+
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  async function testPopoverScoped(name: string) {
+    const trigger = page.getByTestId(name + '-trigger')
+    const content = page.getByTestId(name + '-popover-content')
+    const closeButton = page.getByTestId('popover-close')
+
+    // Check initial state
+    await expect(trigger).toBeVisible()
+    await expect(content).not.toBeVisible()
+
+    // Click trigger to open popover
+    await trigger.click()
+
+    // Wait for content to be visible
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // Click close button
+    await closeButton.click()
+
+    // Verify popover is closed
+    await expect(content).not.toBeVisible()
+  }
+
+  await testPopoverScoped('plain')
+  await testPopoverScoped('a')
+  await testPopoverScoped('b')
+})
+
+test('popover scopes are isolated', async ({ page }) => {
+  await setupPage(page, { name: 'PopoverScopedCase', type: 'useCase' })
+
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  const plainTrigger = page.getByTestId('plain-trigger')
+  const aTrigger = page.getByTestId('a-trigger')
+  const bTrigger = page.getByTestId('b-trigger')
+
+  const plainContent = page.getByTestId('plain-popover-content')
+  const aContent = page.getByTestId('a-popover-content')
+  const bContent = page.getByTestId('b-popover-content')
+
+  // Open popover A
+  await aTrigger.click()
+  await expect(aContent).toBeVisible({ timeout: 5000 })
+
+  // Verify other popovers are not visible
+  await expect(plainContent).not.toBeVisible()
+  await expect(bContent).not.toBeVisible()
+
+  // Close popover A
+  await aContent.getByTestId('popover-close').click()
+  await expect(aContent).not.toBeVisible()
+
+  // Open popover B
+  await bTrigger.click()
+  await expect(bContent).toBeVisible({ timeout: 5000 })
+
+  // Verify other popovers are not visible
+  await expect(plainContent).not.toBeVisible()
+  await expect(aContent).not.toBeVisible()
+
+  // Close popover B
+  await bContent.getByTestId('popover-close').click()
+  await expect(bContent).not.toBeVisible()
+
+  // Open plain popover
+  await plainTrigger.click()
+  await expect(plainContent).toBeVisible({ timeout: 5000 })
+
+  // Verify other popovers are not visible
+  await expect(aContent).not.toBeVisible()
+  await expect(bContent).not.toBeVisible()
+
+  // Close plain popover
+  await plainContent.getByTestId('popover-close').click()
+  await expect(plainContent).not.toBeVisible()
+})
+
+test('scoped popovers adapt to sheets', async ({ page }) => {
+  await setupPage(page, {
+    name: 'PopoverScopedCase',
+    type: 'useCase',
+    adapt: true,
+  })
+
+  // Wait for page to load
+  await page.waitForLoadState('networkidle')
+
+  async function testPopoverAdapted(name: string) {
+    const trigger = page.getByTestId(`${name}-trigger`)
+    const popoverContent = page.getByTestId(`${name}-popover-content`)
+
+    // Click trigger to open sheet
+    await trigger.click()
+
+    const sheetContents = page.getByTestId(`${name}-sheet-contents`).first()
+
+    // Wait for sheet to be visible and open
+    await expect(sheetContents).toBeVisible({ timeout: 5000 })
+    await expect(sheetContents).toHaveAttribute('data-state', 'open', { timeout: 5000 })
+
+    // Check that popover content is inside sheet
+    await expect(sheetContents.locator(popoverContent)).toBeVisible()
+
+    const closeButton = sheetContents.getByTestId('popover-close')
+    // Click close button
+    await closeButton.click()
+
+    // Wait for sheet to close by checking data-state attribute
+    await expect(sheetContents).toHaveAttribute('data-state', 'closed', { timeout: 5000 })
+
+    // Verify sheet is visually off-screen
+    await expect(sheetContents).not.toBeInViewport({ ratio: 0.5 })
+  }
+
+  await testPopoverAdapted('plain')
+  await testPopoverAdapted('a')
+  await testPopoverAdapted('b')
+})

package/tests/PopoverScopedPositionGlitch.animated.test.tsx

@@ -0,0 +1,184 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests for position glitches when opening/closing scoped popovers
+ * across multiple targets with animatePosition enabled.
+ *
+ * Tracks frame-by-frame positions to detect:
+ * - Jumps to (0,0) or far-off positions during enter/exit
+ * - Arrow misalignment
+ * - Position instability after multiple open/close cycles
+ */
+test.describe('Popover scoped position glitch detection', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver !== 'css' && driver !== 'motion') {
+      test.skip()
+      return
+    }
+
+    await setupPage(page, {
+      name: 'PopoverHoverableScopedCase',
+      type: 'useCase',
+      searchParams: { animationDriver: driver },
+    })
+    await page.waitForLoadState('networkidle')
+  })
+
+  test('no far-off positions during open/close across targets', async ({ page }) => {
+    const about = page.locator('#nav-trigger-about')
+    const blog = page.locator('#nav-trigger-blog')
+    const contact = page.locator('#nav-trigger-contact')
+    const content = page.locator('#nav-content')
+
+    // get trigger positions for reference
+    const triggerBounds = await page.evaluate(() => {
+      const triggers = ['about', 'blog', 'contact'].map((id) => {
+        const el = document.getElementById(`nav-trigger-${id}`)!
+        const r = el.getBoundingClientRect()
+        return { id, x: r.left, y: r.top, right: r.right, bottom: r.bottom }
+      })
+      return triggers
+    })
+
+    // reasonable bounds: content should be within viewport, near the triggers
+    const viewportWidth = await page.evaluate(() => window.innerWidth)
+    const viewportHeight = await page.evaluate(() => window.innerHeight)
+    const triggerMinX = Math.min(...triggerBounds.map((t) => t.x))
+    const triggerMaxRight = Math.max(...triggerBounds.map((t) => t.right))
+    const triggerBottom = Math.max(...triggerBounds.map((t) => t.bottom))
+
+    // start position tracker
+    await page.evaluate(() => {
+      ;(window as any).__posLog = []
+      ;(window as any).__trackPositions = true
+      const track = () => {
+        if (!(window as any).__trackPositions) return
+        const el = document.getElementById('nav-content')
+        if (el) {
+          const r = el.getBoundingClientRect()
+          const style = window.getComputedStyle(el)
+          ;(window as any).__posLog.push({
+            x: r.left,
+            y: r.top,
+            w: r.width,
+            h: r.height,
+            opacity: style.opacity,
+            transform: style.transform,
+            time: Date.now(),
+          })
+        }
+        requestAnimationFrame(track)
+      }
+      requestAnimationFrame(track)
+    })
+
+    // cycle 1: open on about, wait, close
+    await about.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(600)
+    await page.mouse.move(0, 0)
+    await page.waitForTimeout(500)
+
+    // cycle 2: open on contact
+    await contact.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(600)
+    await page.mouse.move(0, 0)
+    await page.waitForTimeout(500)
+
+    // cycle 3: open on blog
+    await blog.hover()
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 3000 })
+    await page.waitForTimeout(600)
+
+    // cycle 4: switch directly to about (no close in between)
+    await about.hover()
+    await page.waitForTimeout(700)
+
+    // cycle 5: switch directly to contact
+    await contact.hover()
+    await page.waitForTimeout(700)
+
+    // stop tracking
+    await page.evaluate(() => {
+      ;(window as any).__trackPositions = false
+    })
+
+    const positions: {
+      x: number
+      y: number
+      w: number
+      h: number
+      opacity: string
+      transform: string
+      time: number
+    }[] = await page.evaluate(() => (window as any).__posLog)
+
+    // filter to frames where content is visible (opacity > 0)
+    const visibleFrames = positions.filter((p) => parseFloat(p.opacity) > 0.1)
+
+    // check: no frame should have content at a far-off position
+    // "far off" = more than 200px outside the trigger area
+    const badFrames = visibleFrames.filter((p) => {
+      const tooFarLeft = p.x < triggerMinX - 200
+      const tooFarRight = p.x > triggerMaxRight + 200
+      const tooFarUp = p.y < 0
+      const tooFarDown = p.y > viewportHeight + 100
+      const atOrigin = p.x === 0 && p.y === 0
+      return tooFarLeft || tooFarRight || tooFarUp || tooFarDown || atOrigin
+    })
+
+    if (badFrames.length > 0) {
+      console.log('bad frames:', JSON.stringify(badFrames.slice(0, 5), null, 2))
+      console.log(
+        'trigger area:',
+        JSON.stringify({ triggerMinX, triggerMaxRight, triggerBottom })
+      )
+    }
+
+    expect(
+      badFrames.length,
+      `Found ${badFrames.length} frames with far-off positions. ` +
+        `First bad: x=${badFrames[0]?.x}, y=${badFrames[0]?.y}`
+    ).toBe(0)
+
+    // check: no sudden large jumps between consecutive visible frames
+    const jumpThreshold = 150 // px
+    const jumps: { from: (typeof visibleFrames)[0]; to: (typeof visibleFrames)[0] }[] = []
+    for (let i = 1; i < visibleFrames.length; i++) {
+      const dx = Math.abs(visibleFrames[i].x - visibleFrames[i - 1].x)
+      const dy = Math.abs(visibleFrames[i].y - visibleFrames[i - 1].y)
+      if (dx > jumpThreshold || dy > jumpThreshold) {
+        jumps.push({ from: visibleFrames[i - 1], to: visibleFrames[i] })
+      }
+    }
+
+    if (jumps.length > 0) {
+      console.log(
+        'position jumps:',
+        JSON.stringify(
+          jumps.slice(0, 3).map((j) => ({
+            from: { x: j.from.x.toFixed(1), y: j.from.y.toFixed(1) },
+            to: { x: j.to.x.toFixed(1), y: j.to.y.toFixed(1) },
+            dx: Math.abs(j.to.x - j.from.x).toFixed(1),
+            dy: Math.abs(j.to.y - j.from.y).toFixed(1),
+          })),
+          null,
+          2
+        )
+      )
+    }
+
+    // allow some jumps (close→reopen at different target is expected)
+    // but there shouldn't be jumps DURING an animation
+    expect(
+      jumps.length,
+      `Found ${jumps.length} large position jumps (>${jumpThreshold}px)`
+    ).toBeLessThanOrEqual(4) // at most one jump per close→reopen transition
+  })
+})

package/tests/PopoverTriggerIsolation.test.tsx

@@ -0,0 +1,62 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// helper to extract render count from text like "renders: 1"
+function parseRenderCount(text: string | null): number {
+  if (!text) return 0
+  const match = text.match(/renders:\s*(\d+)/)
+  return match ? Number(match[1]) : 0
+}
+
+test.describe('Popover Trigger Render Isolation', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'PopoverTriggerIsolationCase', type: 'useCase' })
+  })
+
+  test('only the active trigger re-renders when popover opens', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // get initial render counts
+    const getRenderCounts = async () => {
+      return {
+        trigger1: parseRenderCount(
+          await page.getByTestId('isolated-trigger-1-render-count').textContent()
+        ),
+        trigger2: parseRenderCount(
+          await page.getByTestId('isolated-trigger-2-render-count').textContent()
+        ),
+        trigger3: parseRenderCount(
+          await page.getByTestId('isolated-trigger-3-render-count').textContent()
+        ),
+      }
+    }
+
+    const initialCounts = await getRenderCounts()
+
+    // click trigger1 to open popover
+    await page.getByTestId('isolated-trigger-1').click()
+
+    // wait for popover to open
+    const content = page.getByTestId('isolated-popover-content')
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // check render counts after opening
+    const afterOpenCounts = await getRenderCounts()
+
+    // trigger1 (active) may re-render to update aria-expanded
+    // but trigger2 and trigger3 (inactive) should NOT re-render
+    expect(afterOpenCounts.trigger2).toBe(initialCounts.trigger2)
+    expect(afterOpenCounts.trigger3).toBe(initialCounts.trigger3)
+
+    // close the popover
+    await page.getByTestId('isolated-close').click()
+    await expect(content).not.toBeVisible({ timeout: 5000 })
+
+    // check render counts after closing
+    const afterCloseCounts = await getRenderCounts()
+
+    // inactive triggers should still not have re-rendered
+    expect(afterCloseCounts.trigger2).toBe(initialCounts.trigger2)
+    expect(afterCloseCounts.trigger3).toBe(initialCounts.trigger3)
+  })
+})