@hanzogui/kitchen-sink 3.0.5

package/tests/TooltipGlobalPattern.animated.test.tsx

@@ -0,0 +1,208 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Global tooltip pattern: single scoped tooltip with triggers in opposite corners.
+ *
+ * Two behaviors to verify:
+ * 1. While open, switching triggers → smooth position animation
+ * 2. Close at A, reopen at B → snap position (animateOnly: []), then animate in
+ */
+
+test.describe('Tooltip Global Pattern', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver !== 'motion') {
+      test.skip()
+      return
+    }
+
+    await setupPage(page, { name: 'TooltipGlobalPatternCase', type: 'useCase' })
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(500)
+  })
+
+  test('while open: smoothly animates position when switching triggers', async ({
+    page,
+  }) => {
+    const triggerTL = page.locator('[data-testid="trigger-tl"]')
+    const triggerBR = page.locator('[data-testid="trigger-br"]')
+    const content = page.locator('[data-testid="global-tip-content"]')
+
+    const tlBox = await triggerTL.boundingBox()
+    const brBox = await triggerBR.boundingBox()
+    expect(tlBox).toBeTruthy()
+    expect(brBox).toBeTruthy()
+
+    const tlCenter = {
+      x: tlBox!.x + tlBox!.width / 2,
+      y: tlBox!.y + tlBox!.height / 2,
+    }
+    const brCenter = {
+      x: brBox!.x + brBox!.width / 2,
+      y: brBox!.y + brBox!.height / 2,
+    }
+
+    // hover top-left trigger to open
+    await page.mouse.move(tlCenter.x, tlCenter.y)
+    await page.waitForTimeout(100)
+    await page.mouse.move(tlCenter.x + 1, tlCenter.y + 1)
+    await page.waitForTimeout(800)
+    await expect(content).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    const posA = await content.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return { x: rect.left, y: rect.top }
+    })
+
+    // track positions
+    await page.evaluate(() => {
+      ;(window as any).__positions = []
+      const track = () => {
+        const el = document.querySelector('[data-testid="global-tip-content"]')
+        if (el) {
+          const rect = el.getBoundingClientRect()
+          ;(window as any).__positions.push({
+            x: rect.left,
+            y: rect.top,
+            time: Date.now(),
+          })
+        }
+        ;(window as any).__rafId = requestAnimationFrame(track)
+      }
+      ;(window as any).__rafId = requestAnimationFrame(track)
+    })
+
+    // switch to bottom-right (tooltip stays open via triggerElements)
+    await page.mouse.move(brCenter.x, brCenter.y)
+    await page.waitForTimeout(100)
+    await page.mouse.move(brCenter.x + 1, brCenter.y + 1)
+    await page.waitForTimeout(400)
+
+    await page.evaluate(() => cancelAnimationFrame((window as any).__rafId))
+
+    const posB = await content.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return { x: rect.left, y: rect.top }
+    })
+
+    const positions: { x: number; y: number }[] = await page.evaluate(
+      () => (window as any).__positions
+    )
+
+    const xDiff = Math.abs(posB.x - posA.x)
+    expect(xDiff).toBeGreaterThan(100)
+
+    const minX = Math.min(posA.x, posB.x)
+    const maxX = Math.max(posA.x, posB.x)
+    const margin = xDiff * 0.15
+
+    const intermediatePositions = positions.filter(
+      (p) => p.x > minX + margin && p.x < maxX - margin
+    )
+
+    expect(
+      intermediatePositions.length,
+      `Should smoothly animate while open. ` +
+        `posA.x=${posA.x.toFixed(1)}, posB.x=${posB.x.toFixed(1)}, ` +
+        `intermediate=${intermediatePositions.length}/${positions.length}`
+    ).toBeGreaterThan(2)
+  })
+
+  test('close then reopen: snaps position, does not slide from old position', async ({
+    page,
+  }) => {
+    const triggerTL = page.locator('[data-testid="trigger-tl"]')
+    const triggerBR = page.locator('[data-testid="trigger-br"]')
+    const content = page.locator('[data-testid="global-tip-content"]')
+
+    const tlBox = await triggerTL.boundingBox()
+    const brBox = await triggerBR.boundingBox()
+    expect(tlBox).toBeTruthy()
+    expect(brBox).toBeTruthy()
+
+    const tlCenter = {
+      x: tlBox!.x + tlBox!.width / 2,
+      y: tlBox!.y + tlBox!.height / 2,
+    }
+    const brCenter = {
+      x: brBox!.x + brBox!.width / 2,
+      y: brBox!.y + brBox!.height / 2,
+    }
+
+    // open at top-left
+    await page.mouse.move(tlCenter.x, tlCenter.y)
+    await page.waitForTimeout(100)
+    await page.mouse.move(tlCenter.x + 1, tlCenter.y + 1)
+    await page.waitForTimeout(800)
+    await expect(content).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(300)
+
+    const posA = await content.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return { x: rect.left, y: rect.top }
+    })
+
+    // close: move mouse far away
+    await page.mouse.move(400, 300)
+    await page.waitForTimeout(1000)
+    await expect(content).not.toBeVisible({ timeout: 5000 })
+
+    // start tracking
+    await page.evaluate(() => {
+      ;(window as any).__positions = []
+      const track = () => {
+        const el = document.querySelector('[data-testid="global-tip-content"]')
+        if (el) {
+          const rect = el.getBoundingClientRect()
+          const style = getComputedStyle(el)
+          ;(window as any).__positions.push({
+            x: rect.left,
+            y: rect.top,
+            opacity: parseFloat(style.opacity),
+            time: Date.now(),
+          })
+        }
+        ;(window as any).__rafId = requestAnimationFrame(track)
+      }
+      ;(window as any).__rafId = requestAnimationFrame(track)
+    })
+
+    // reopen at bottom-right
+    await page.mouse.move(brCenter.x, brCenter.y)
+    await page.waitForTimeout(100)
+    await page.mouse.move(brCenter.x + 1, brCenter.y + 1)
+    await page.waitForTimeout(1000)
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    await page.evaluate(() => cancelAnimationFrame((window as any).__rafId))
+
+    const posB = await content.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return { x: rect.left, y: rect.top }
+    })
+
+    const positions: { x: number; y: number; opacity: number }[] = await page.evaluate(
+      () => (window as any).__positions
+    )
+
+    const totalDistance = Math.sqrt((posB.x - posA.x) ** 2 + (posB.y - posA.y) ** 2)
+    expect(totalDistance).toBeGreaterThan(200)
+
+    // no VISIBLE frame should be in the "middle zone" between A and B
+    // the tooltip should snap to B's position, not slide from A
+    const threshold = totalDistance * 0.25
+    const middlePositions = positions.filter((p) => {
+      if (p.opacity < 0.1) return false
+      const distFromA = Math.sqrt((p.x - posA.x) ** 2 + (p.y - posA.y) ** 2)
+      const distFromB = Math.sqrt((p.x - posB.x) ** 2 + (p.y - posB.y) ** 2)
+      return distFromA > threshold && distFromB > threshold
+    })
+
+    expect(
+      middlePositions.length,
+      `Close→reopen should snap, not slide. Found ${middlePositions.length} frames in middle zone`
+    ).toBeLessThanOrEqual(2)
+  })
+})

package/tests/TooltipGroup.animated.test.tsx

@@ -0,0 +1,79 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * TooltipGroup Tests
+ *
+ * TooltipGroup enables grouped delay behavior:
+ * - First tooltip in group: waits for full delay
+ * - Subsequent tooltips: show immediately while within the group's timeout window
+ *
+ * This is implemented via FloatingDelayGroup from @hanzogui/floating.
+ */
+
+async function tooltipVisible(page: Page, testId: string): Promise<boolean> {
+  return page.evaluate((id) => !!document.querySelector(`[data-testid="${id}"]`), testId)
+}
+
+test.describe('TooltipGroup', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'TooltipGroupCase', type: 'useCase' })
+  })
+
+  test('subsequent grouped tooltips skip delay', async ({ page }) => {
+    // Config: 1000ms open delay, 500ms timeout
+    const DELAY = 1000
+
+    // Show first tooltip (with delay)
+    await page.getByTestId('tooltip-trigger-1').hover()
+    await page.waitForTimeout(DELAY + 200)
+    expect(await tooltipVisible(page, 'tooltip-content-1')).toBe(true)
+
+    // Move to second tooltip - should appear quickly (no full delay)
+    await page.getByTestId('tooltip-trigger-2').hover()
+    await page.waitForTimeout(300)
+
+    expect(
+      await tooltipVisible(page, 'tooltip-content-2'),
+      'Second grouped tooltip should appear without waiting for full delay'
+    ).toBe(true)
+  })
+
+  test('first grouped tooltip respects delay', async ({ page }) => {
+    const DELAY = 1000
+
+    await page.getByTestId('tooltip-trigger-1').hover()
+
+    // Should NOT appear before delay
+    await page.waitForTimeout(200)
+    expect(
+      await tooltipVisible(page, 'tooltip-content-1'),
+      'Should not appear before delay'
+    ).toBe(false)
+
+    // Should appear after delay
+    await page.waitForTimeout(DELAY)
+    expect(
+      await tooltipVisible(page, 'tooltip-content-1'),
+      'Should appear after delay'
+    ).toBe(true)
+  })
+
+  test('standalone tooltips always have delay', async ({ page }) => {
+    const DELAY = 1000
+
+    // Show standalone A
+    await page.getByTestId('tooltip-trigger-standalone-a').hover()
+    await page.waitForTimeout(DELAY + 200)
+    expect(await tooltipVisible(page, 'tooltip-content-standalone-a')).toBe(true)
+
+    // Move to standalone B - should NOT appear quickly (has its own delay)
+    await page.getByTestId('tooltip-trigger-standalone-b').hover()
+    await page.waitForTimeout(300)
+
+    expect(
+      await tooltipVisible(page, 'tooltip-content-standalone-b'),
+      'Standalone tooltips should always wait for their delay'
+    ).toBe(false)
+  })
+})

package/tests/TooltipMultiTrigger.test.tsx

@@ -0,0 +1,116 @@
+import { expect, test } from '@playwright/test'
+import { getBoundingRect, setupPage } from './test-utils'
+
+test.describe('Tooltip multi-trigger rapid hover', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'TooltipMultiTriggerCase',
+      type: 'useCase',
+    })
+    await page.waitForLoadState('networkidle')
+  })
+
+  test('rapid sweep: tooltip stays open and tracks final trigger', async ({ page }) => {
+    const content = page.locator('#tip-content')
+
+    // hover first trigger to open
+    await page.locator('#tip-trigger-a').hover()
+    await page.waitForTimeout(200)
+    await expect(content).toBeVisible({ timeout: 3000 })
+
+    // sweep through triggers with gaps
+    const ids = ['a', 'b', 'c']
+    for (let i = 0; i < ids.length - 1; i++) {
+      const curr = page.locator(`#tip-trigger-${ids[i]}`)
+      const next = page.locator(`#tip-trigger-${ids[i + 1]}`)
+      const currBox = await curr.boundingBox()
+      const nextBox = await next.boundingBox()
+      if (currBox && nextBox) {
+        // move to gap between triggers
+        const gapX =
+          currBox.x + currBox.width + (nextBox.x - (currBox.x + currBox.width)) / 2
+        const gapY = currBox.y + currBox.height / 2
+        await page.mouse.move(gapX, gapY)
+        await page.waitForTimeout(30)
+        // move to next trigger
+        await page.mouse.move(
+          nextBox.x + nextBox.width / 2,
+          nextBox.y + nextBox.height / 2
+        )
+        await page.waitForTimeout(20)
+      }
+    }
+
+    await page.waitForTimeout(200)
+    await expect(content).toBeVisible({ timeout: 2000 })
+
+    const label = page.locator('#tip-label')
+    await expect(label).toContainText('Expert', { timeout: 2000 })
+  })
+
+  test('arrow stays aligned with hovered trigger after switch', async ({ page }) => {
+    const content = page.locator('#tip-content')
+
+    // hover first trigger to open
+    await page.locator('#tip-trigger-a').hover()
+    await page.waitForTimeout(200)
+    await expect(content).toBeVisible({ timeout: 3000 })
+
+    // verify arrow is near trigger A
+    const arrowA = await getBoundingRect(page, '#tip-arrow')
+    const triggerARect = await getBoundingRect(page, '#tip-trigger-a')
+    expect(arrowA).toBeTruthy()
+    const arrowACX = arrowA!.x + arrowA!.width / 2
+    const triggerACX = triggerARect!.x + triggerARect!.width / 2
+    // arrow should be within 30px of trigger center
+    expect(Math.abs(arrowACX - triggerACX)).toBeLessThan(30)
+
+    // quickly jump to trigger C (2 steps = very fast mouse move)
+    const triggerC = page.locator('#tip-trigger-c')
+    const cBox = await triggerC.boundingBox()
+    await page.mouse.move(cBox!.x + cBox!.width / 2, cBox!.y + cBox!.height / 2, {
+      steps: 2,
+    })
+
+    // wait for position to settle (animatePosition transition)
+    await page.waitForTimeout(500)
+    await expect(content).toBeVisible({ timeout: 2000 })
+
+    // arrow should now be near trigger C, not still near trigger A
+    const arrowC = await getBoundingRect(page, '#tip-arrow')
+    const triggerCRect = await getBoundingRect(page, '#tip-trigger-c')
+    const contentRect = await getBoundingRect(page, '#tip-content')
+    expect(arrowC).toBeTruthy()
+    expect(contentRect).toBeTruthy()
+
+    const arrowCCX = arrowC!.x + arrowC!.width / 2
+    const triggerCCX = triggerCRect!.x + triggerCRect!.width / 2
+    const contentCCX = contentRect!.x + contentRect!.width / 2
+
+    // arrow center should be within content bounds
+    expect(arrowCCX).toBeGreaterThanOrEqual(contentRect!.x)
+    expect(arrowCCX).toBeLessThanOrEqual(contentRect!.x + contentRect!.width)
+
+    // arrow should be reasonably near trigger C (not still at A)
+    // with offset=20 and animatePosition, arrow should track the trigger
+    expect(
+      Math.abs(arrowCCX - triggerCCX),
+      `arrow center (${arrowCCX}) should be near trigger C center (${triggerCCX}), content center at ${contentCCX}`
+    ).toBeLessThan(40)
+  })
+
+  test('tooltip closes when cursor leaves all triggers', async ({ page }) => {
+    const content = page.locator('#tip-content')
+
+    // hover to open
+    await page.locator('#tip-trigger-b').hover()
+    await page.waitForTimeout(200)
+    await expect(content).toBeVisible({ timeout: 3000 })
+
+    // move cursor far away from triggers
+    await page.mouse.move(10, 10)
+    await page.waitForTimeout(500)
+
+    await expect(content).not.toBeVisible({ timeout: 3000 })
+  })
+})

package/tests/TooltipPositionJump.animated.test.tsx

@@ -0,0 +1,229 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * TOOLTIP POSITION JUMP TEST (Motion Driver Only)
+ *
+ * Bug: When using animatePosition with a scoped tooltip,
+ * rapidly moving between triggers causes the tooltip to JUMP to wrong position
+ * (often near origin/top-left) before animating back.
+ *
+ * Key: Must actually MOVE the mouse across, not just call hover() which teleports.
+ */
+
+test.describe('Tooltip Position Jump', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    // only test with motion driver - this is where the bug manifests
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver !== 'motion') {
+      test.skip()
+      return
+    }
+
+    await setupPage(page, { name: 'TooltipPositionJumpCase', type: 'useCase' })
+    await page.waitForTimeout(500)
+  })
+
+  test('scoped tooltip should not jump when moving quickly between triggers', async ({
+    page,
+  }) => {
+    // get button positions
+    const hireBtn = page.locator('[data-testid="tooltip-trigger-hire"]')
+    const bentoBtn = page.locator('[data-testid="tooltip-trigger-bento"]')
+    const takeoutBtn = page.locator('[data-testid="tooltip-trigger-takeout"]')
+
+    const hireBox = await hireBtn.boundingBox()
+    const bentoBox = await bentoBtn.boundingBox()
+    const takeoutBox = await takeoutBtn.boundingBox()
+
+    if (!hireBox || !bentoBox || !takeoutBox) {
+      throw new Error('Could not find button positions')
+    }
+
+    // inject position tracking script
+    await page.evaluate(() => {
+      ;(window as any).__tooltipPositions = []
+      ;(window as any).__trackTooltip = () => {
+        const el = document.querySelector(
+          '[data-testid="tooltip-jump-content"]'
+        ) as HTMLElement
+        if (!el) return null
+
+        const style = getComputedStyle(el)
+        const transform = style.transform
+        if (!transform || transform === 'none') return null
+
+        const match = transform.match(
+          /matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/
+        )
+        if (!match) return null
+
+        const pos = { x: parseFloat(match[1]), y: parseFloat(match[2]), time: Date.now() }
+        ;(window as any).__tooltipPositions.push(pos)
+        return pos
+      }
+
+      // start tracking at 60fps
+      const track = () => {
+        ;(window as any).__trackTooltip()
+        requestAnimationFrame(track)
+      }
+      requestAnimationFrame(track)
+    })
+
+    // step 1: hover on rightmost button (HIRE) and wait for tooltip to fully appear
+    const hireCenter = {
+      x: hireBox.x + hireBox.width / 2,
+      y: hireBox.y + hireBox.height / 2,
+    }
+    await page.mouse.move(hireCenter.x, hireCenter.y)
+    await page.waitForTimeout(800)
+
+    // step 2: move mouse QUICKLY across to leftmost button (TAKEOUT)
+    // must actually traverse the path, not teleport
+    const takeoutCenter = {
+      x: takeoutBox.x + takeoutBox.width / 2,
+      y: takeoutBox.y + takeoutBox.height / 2,
+    }
+
+    // do fast sweep: HIRE -> TAKEOUT in ~100ms total
+    const steps = 10
+    const totalTime = 100
+    const stepDelay = totalTime / steps
+
+    for (let i = 1; i <= steps; i++) {
+      const t = i / steps
+      const x = hireCenter.x + (takeoutCenter.x - hireCenter.x) * t
+      const y = hireCenter.y + (takeoutCenter.y - hireCenter.y) * t
+      await page.mouse.move(x, y)
+      await page.waitForTimeout(stepDelay)
+    }
+
+    await page.waitForTimeout(300)
+
+    // analyze for jumps
+    const positions = await page.evaluate(() => (window as any).__tooltipPositions)
+    const jumps: any[] = []
+
+    for (let i = 1; i < positions.length; i++) {
+      const prev = positions[i - 1]
+      const curr = positions[i]
+      const dx = Math.abs(curr.x - prev.x)
+      const dy = Math.abs(curr.y - prev.y)
+      const delta = Math.sqrt(dx * dx + dy * dy)
+      const timeDelta = curr.time - prev.time
+
+      // jump: large delta in short time, going toward origin
+      if (timeDelta < 50 && delta > 100) {
+        const jumpingLeft = curr.x < prev.x - 100
+        const jumpingUp = curr.y < prev.y - 50
+        const jumpToNearOrigin = curr.x < 200 && curr.y < 200 && prev.x > 300
+
+        if (jumpingLeft || jumpingUp || jumpToNearOrigin) {
+          jumps.push({ from: prev, to: curr, delta: Math.round(delta) })
+        }
+      }
+    }
+
+    console.log(`Collected ${positions.length} positions, found ${jumps.length} jumps`)
+    if (jumps.length > 0) {
+      console.log('Jumps:', JSON.stringify(jumps, null, 2))
+    }
+
+    expect(jumps.length, `Detected ${jumps.length} position jumps!`).toBe(0)
+  })
+
+  test('rapid back-and-forth should not cause jumps', async ({ page }) => {
+    const hireBtn = page.locator('[data-testid="tooltip-trigger-hire"]')
+    const takeoutBtn = page.locator('[data-testid="tooltip-trigger-takeout"]')
+
+    const hireBox = await hireBtn.boundingBox()
+    const takeoutBox = await takeoutBtn.boundingBox()
+
+    if (!hireBox || !takeoutBox) {
+      throw new Error('Could not find button positions')
+    }
+
+    // inject tracking
+    await page.evaluate(() => {
+      ;(window as any).__tooltipPositions = []
+      const track = () => {
+        const el = document.querySelector(
+          '[data-testid="tooltip-jump-content"]'
+        ) as HTMLElement
+        if (el) {
+          const transform = getComputedStyle(el).transform
+          if (transform && transform !== 'none') {
+            const match = transform.match(
+              /matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/
+            )
+            if (match) {
+              ;(window as any).__tooltipPositions.push({
+                x: parseFloat(match[1]),
+                y: parseFloat(match[2]),
+                time: Date.now(),
+              })
+            }
+          }
+        }
+        requestAnimationFrame(track)
+      }
+      requestAnimationFrame(track)
+    })
+
+    const hireCenter = {
+      x: hireBox.x + hireBox.width / 2,
+      y: hireBox.y + hireBox.height / 2,
+    }
+    const takeoutCenter = {
+      x: takeoutBox.x + takeoutBox.width / 2,
+      y: takeoutBox.y + takeoutBox.height / 2,
+    }
+
+    // hover HIRE first
+    await page.mouse.move(hireCenter.x, hireCenter.y)
+    await page.waitForTimeout(600)
+
+    // do 3 rapid back-and-forth sweeps
+    for (let sweep = 0; sweep < 3; sweep++) {
+      for (let i = 0; i <= 8; i++) {
+        const t = i / 8
+        await page.mouse.move(
+          hireCenter.x + (takeoutCenter.x - hireCenter.x) * t,
+          hireCenter.y + (takeoutCenter.y - hireCenter.y) * t
+        )
+        await page.waitForTimeout(10)
+      }
+      for (let i = 0; i <= 8; i++) {
+        const t = i / 8
+        await page.mouse.move(
+          takeoutCenter.x + (hireCenter.x - takeoutCenter.x) * t,
+          takeoutCenter.y + (hireCenter.y - takeoutCenter.y) * t
+        )
+        await page.waitForTimeout(10)
+      }
+    }
+
+    await page.waitForTimeout(300)
+
+    const positions = await page.evaluate(() => (window as any).__tooltipPositions)
+    const jumps: any[] = []
+
+    for (let i = 1; i < positions.length; i++) {
+      const prev = positions[i - 1]
+      const curr = positions[i]
+      const delta = Math.sqrt((curr.x - prev.x) ** 2 + (curr.y - prev.y) ** 2)
+      const timeDelta = curr.time - prev.time
+
+      if (timeDelta < 50 && delta > 100) {
+        const jumpingTowardOrigin = curr.x < prev.x - 50 && curr.x < 200
+        if (jumpingTowardOrigin) {
+          jumps.push({ from: prev, to: curr, delta: Math.round(delta) })
+        }
+      }
+    }
+
+    console.log(`Found ${jumps.length} jumps in back-and-forth test`)
+    expect(jumps.length).toBe(0)
+  })
+})