@hanzogui/kitchen-sink 3.0.5

package/tests/GuiSiteMotion.test.ts

@@ -0,0 +1,481 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * Tests for motion driver issues on gui.hanzo.ai
+ *
+ * These tests run against the actual gui.hanzo.ai site (localhost:4444)
+ * to test motion driver behavior on the real site components.
+ *
+ * SKIPPED: requires gui.hanzo.ai running on localhost:4444
+ */
+
+const SITE_URL = 'http://localhost:4444'
+
+test.use({
+  video: 'on',
+})
+
+test.describe.skip('Gui.dev Motion Issues', () => {
+  test.beforeAll(async () => {
+    // verify site is running
+  })
+
+  test.describe('Logo Jitter Bug', () => {
+    test('dot indicator should not jitter when moving mouse rapidly across HANZO_GUI text', async ({
+      page,
+    }) => {
+      await page.goto(SITE_URL, { waitUntil: 'networkidle' })
+      await page.waitForTimeout(1000)
+
+      // find the logo-words element (in header, not footer)
+      const logoWords = page.locator('header .logo-words').first()
+      await expect(logoWords).toBeVisible()
+
+      const logoBox = await logoWords.boundingBox()
+      if (!logoBox) {
+        throw new Error('Could not find logo-words bounding box')
+      }
+
+      // inject position tracking for the Circle (dot indicator)
+      // the dot is a Circle with position absolute inside logo-words
+      await page.evaluate(() => {
+        ;(window as any).__dotPositions = []
+        ;(window as any).__dotDebug = { found: false, selector: null }
+        const track = () => {
+          // find the circle element inside logo-words
+          // it's in the header, which has render="header" so becomes a <header> tag
+          const header = document.querySelector('header')
+          if (!header) {
+            ;(window as any).__dotDebug.selector = 'no header found'
+            requestAnimationFrame(track)
+            return
+          }
+          const logoWords = header.querySelector('.logo-words')
+          if (!logoWords) {
+            ;(window as any).__dotDebug.selector = 'no logo-words in header'
+            requestAnimationFrame(track)
+            return
+          }
+          // the circle is the first child element with position absolute (the SVG is not absolute)
+          let found = false
+          for (const child of Array.from(logoWords.children)) {
+            const el = child as HTMLElement
+            const computed = getComputedStyle(el)
+            if (computed.position === 'absolute') {
+              found = true
+              ;(window as any).__dotDebug.found = true
+              ;(window as any).__dotDebug.selector = 'found absolute positioned child'
+              const transform = computed.transform
+              if (transform && transform !== 'none') {
+                const match = transform.match(
+                  /matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/
+                )
+                if (match) {
+                  ;(window as any).__dotPositions.push({
+                    x: parseFloat(match[1]),
+                    y: parseFloat(match[2]),
+                    time: Date.now(),
+                    transform,
+                  })
+                }
+              } else {
+                // transform may be in translate form or not set yet
+                const left = parseFloat(computed.left) || 0
+                const top = parseFloat(computed.top) || 0
+                ;(window as any).__dotPositions.push({
+                  x: left,
+                  y: top,
+                  time: Date.now(),
+                  noTransform: true,
+                })
+              }
+              break
+            }
+          }
+          if (!found) {
+            ;(window as any).__dotDebug.selector =
+              'no absolute child - children: ' + logoWords.children.length
+          }
+          requestAnimationFrame(track)
+        }
+        requestAnimationFrame(track)
+      })
+
+      // hover over logo first to activate animation
+      const centerY = logoBox.y + logoBox.height / 2
+      await page.mouse.move(logoBox.x + 10, centerY)
+      await page.waitForTimeout(300)
+
+      // do very rapid back-and-forth to trigger jitter
+      // mimic user quickly flicking mouse back and forth every few frames
+      const screenshots: string[] = []
+      for (let sweep = 0; sweep < 20; sweep++) {
+        // quick flick right then left - this mimics the user pattern that causes jitter
+        // every 2-3 mouse moves we change direction
+        const rightX = logoBox.x + logoBox.width * 0.8
+        const leftX = logoBox.x + logoBox.width * 0.2
+        const midX = logoBox.x + logoBox.width * 0.5
+
+        // rapid: left->right->left in quick succession
+        await page.mouse.move(leftX, centerY)
+        await page.waitForTimeout(16) // ~60fps
+        await page.mouse.move(rightX, centerY)
+        await page.waitForTimeout(16)
+        await page.mouse.move(midX, centerY)
+        await page.waitForTimeout(16)
+
+        // take screenshot every few sweeps to see visual state
+        if (sweep % 5 === 0) {
+          const screenshot = await page.screenshot()
+          screenshots.push(screenshot.toString('base64').slice(0, 50) + '...')
+        }
+      }
+
+      // also do the continuous sweep pattern
+      for (let sweep = 0; sweep < 3; sweep++) {
+        for (let i = 0; i <= 10; i++) {
+          const t = i / 10
+          const x = logoBox.x + logoBox.width * t
+          await page.mouse.move(x, centerY)
+          await page.waitForTimeout(8)
+        }
+        for (let i = 0; i <= 10; i++) {
+          const t = i / 10
+          const x = logoBox.x + logoBox.width - logoBox.width * t
+          await page.mouse.move(x, centerY)
+          await page.waitForTimeout(8)
+        }
+      }
+
+      console.log(`Took ${screenshots.length} screenshots during test`)
+
+      await page.waitForTimeout(500)
+
+      // analyze positions for unexpected jumps
+      const positions = await page.evaluate(() => (window as any).__dotPositions || [])
+      const debug = await page.evaluate(() => (window as any).__dotDebug || {})
+
+      console.log(`Collected ${positions.length} dot positions`)
+      console.log(`Debug:`, debug)
+      if (positions.length > 0) {
+        console.log('First position:', positions[0])
+        console.log('Last position:', positions[positions.length - 1])
+        // show all x values to see the pattern
+        const xValues = positions.map((p: any) => Math.round(p.x))
+        console.log('X values sample (first 50):', xValues.slice(0, 50).join(', '))
+        console.log('X values sample (last 50):', xValues.slice(-50).join(', '))
+      }
+
+      // analyze for jitter patterns:
+      // 1. Large sudden jumps (>20px in one frame)
+      // 2. Rapid back-and-forth oscillations
+      const jumps: any[] = []
+      const oscillations: any[] = []
+
+      for (let i = 1; i < positions.length; i++) {
+        const prev = positions[i - 1]
+        const curr = positions[i]
+        const dx = curr.x - prev.x
+        const timeDelta = curr.time - prev.time
+
+        // detect large jumps: >20px change in a single frame
+        if (Math.abs(dx) > 20 && timeDelta < 30) {
+          jumps.push({
+            idx: i,
+            from: Math.round(prev.x),
+            to: Math.round(curr.x),
+            dx: Math.round(dx),
+            timeDelta,
+          })
+        }
+      }
+
+      // detect oscillations: A->B->A pattern in <100ms
+      for (let i = 2; i < positions.length; i++) {
+        const a = positions[i - 2]
+        const b = positions[i - 1]
+        const c = positions[i]
+        const totalTime = c.time - a.time
+
+        if (totalTime < 100) {
+          // check if c is close to a (returned to original position)
+          const returnDistance = Math.abs(c.x - a.x)
+          const deviationDistance = Math.abs(b.x - a.x)
+          if (returnDistance < 3 && deviationDistance > 8) {
+            oscillations.push({
+              idx: i,
+              pattern: `${Math.round(a.x)} -> ${Math.round(b.x)} -> ${Math.round(c.x)}`,
+              totalTime,
+            })
+          }
+        }
+      }
+
+      console.log(`Large jumps (>20px): ${jumps.length}`)
+      if (jumps.length > 0) {
+        console.log('Jump samples:', jumps.slice(0, 5))
+      }
+      console.log(`Oscillations: ${oscillations.length}`)
+      if (oscillations.length > 0) {
+        console.log('Oscillation samples:', oscillations.slice(0, 5))
+      }
+
+      console.log(`Detected ${jumps.length} jitters`)
+      if (jumps.length > 0) {
+        console.log('First few jitters:', JSON.stringify(jumps.slice(0, 5), null, 2))
+      }
+
+      // allow some jitter but not excessive
+      // in a well-behaved animation, we might get 0-3 jitters at direction changes
+      // the bug causes 10+ jitters
+      expect(jumps.length, `Too many jitters detected: ${jumps.length}`).toBeLessThan(10)
+    })
+  })
+
+  test.describe('PromoLinksRow Tooltip Position Jump', () => {
+    test('tooltip should not jump when moving between promo buttons', async ({
+      page,
+    }) => {
+      await page.goto(SITE_URL, { waitUntil: 'networkidle' })
+      await page.waitForTimeout(1000)
+
+      // resize to ensure promo buttons are visible
+      await page.setViewportSize({ width: 1400, height: 900 })
+      await page.waitForTimeout(500)
+
+      // find the PromoLinksRow buttons (Starter Kit/Takeout, Copy-Paste UI/Bento, Add Even)
+      // these are the buttons that use the scoped tooltip with animatePosition
+      // the buttons show "Starter Kit", "Copy-Paste UI", "Add Even"
+      const takeoutBtn = page.locator('button:has-text("Starter Kit")').first()
+      const bentoBtn = page.locator('button:has-text("Copy-Paste UI")').first()
+      const consultingBtn = page.locator('button:has-text("Hire Us!")').first()
+
+      const takeoutVisible = await takeoutBtn.isVisible().catch(() => false)
+      const bentoVisible = await bentoBtn.isVisible().catch(() => false)
+      const consultingVisible = await consultingBtn.isVisible().catch(() => false)
+
+      if (!takeoutVisible || !bentoVisible || !consultingVisible) {
+        console.log('PromoLinksRow buttons not visible, skipping')
+        console.log('Takeout visible:', takeoutVisible)
+        console.log('Bento visible:', bentoVisible)
+        console.log('Consulting visible:', consultingVisible)
+        test.skip()
+        return
+      }
+
+      const takeoutBox = await takeoutBtn.boundingBox()
+      const bentoBox = await bentoBtn.boundingBox()
+      const consultingBox = await consultingBtn.boundingBox()
+
+      if (!takeoutBox || !bentoBox || !consultingBox) {
+        throw new Error('Could not get bounding boxes for promo buttons')
+      }
+
+      console.log('Button positions:')
+      console.log('  Takeout (left):', takeoutBox.x)
+      console.log('  Bento (middle):', bentoBox.x)
+      console.log('  Consulting (right):', consultingBox.x)
+
+      // inject position tracking for tooltip
+      // the tooltip content has animatePosition and scope="promo-tooltip"
+      await page.evaluate(() => {
+        ;(window as any).__tooltipPositions = []
+        ;(window as any).__jumpLog = []
+        let lastPos: any = null
+
+        const track = () => {
+          // find tooltip by data-placement attribute (set by Popper)
+          const tooltip = document.querySelector('[data-placement]') as HTMLElement
+          if (tooltip) {
+            // get actual rendered position
+            const rect = tooltip.getBoundingClientRect()
+            const transform = getComputedStyle(tooltip).transform
+            let x = rect.x
+            let y = rect.y
+
+            // also extract matrix values if present
+            if (transform && transform !== 'none') {
+              const match = transform.match(
+                /matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/
+              )
+              if (match) {
+                // use rect for tracking since that's where it visually appears
+              }
+            }
+
+            const pos = { x: rect.x, y: rect.y, time: Date.now() }
+            ;(window as any).__tooltipPositions.push(pos)
+
+            // detect jumps in real-time
+            if (lastPos) {
+              const dx = Math.abs(x - lastPos.x)
+              if (dx > 100) {
+                const msg = `JUMP: ${lastPos.x.toFixed(0)} -> ${x.toFixed(0)} (dx: ${dx.toFixed(0)})`
+                ;(window as any).__jumpLog.push(msg)
+                console.log('%c' + msg, 'color: red; font-weight: bold')
+              }
+            }
+            lastPos = pos
+          } else {
+            lastPos = null
+          }
+          requestAnimationFrame(track)
+        }
+        requestAnimationFrame(track)
+      })
+
+      // step 1: hover on rightmost button (Consulting) to open tooltip
+      const consultingCenter = {
+        x: consultingBox.x + consultingBox.width / 2,
+        y: consultingBox.y + consultingBox.height / 2,
+      }
+      await page.mouse.move(consultingCenter.x, consultingCenter.y)
+      await page.waitForTimeout(800) // wait for tooltip to fully appear
+
+      // step 2: FAST move to leftmost button (Takeout)
+      // this is the pattern that triggers the jump bug
+      const takeoutCenter = {
+        x: takeoutBox.x + takeoutBox.width / 2,
+        y: takeoutBox.y + takeoutBox.height / 2,
+      }
+
+      // fast sweep across all 3 buttons
+      const steps = 10
+      for (let i = 1; i <= steps; i++) {
+        const t = i / steps
+        const x = consultingCenter.x + (takeoutCenter.x - consultingCenter.x) * t
+        const y = consultingCenter.y + (takeoutCenter.y - consultingCenter.y) * t
+        await page.mouse.move(x, y)
+        await page.waitForTimeout(10) // fast movement
+      }
+
+      await page.waitForTimeout(400)
+
+      // analyze for position jumps
+      const positions = await page.evaluate(
+        () => (window as any).__tooltipPositions || []
+      )
+      const jumpLog = await page.evaluate(() => (window as any).__jumpLog || [])
+
+      const jumps: any[] = []
+      for (let i = 1; i < positions.length; i++) {
+        const prev = positions[i - 1]
+        const curr = positions[i]
+        const dx = curr.x - prev.x
+        const timeDelta = curr.time - prev.time
+
+        // detect large sudden jumps (>100px in <50ms)
+        if (Math.abs(dx) > 100 && timeDelta < 50) {
+          jumps.push({
+            idx: i,
+            from: Math.round(prev.x),
+            to: Math.round(curr.x),
+            dx: Math.round(dx),
+            timeDelta,
+          })
+        }
+      }
+
+      console.log(`Collected ${positions.length} tooltip positions`)
+      if (positions.length > 0) {
+        const xValues = positions.map((p: any) => Math.round(p.x))
+        console.log('X positions (first 30):', xValues.slice(0, 30).join(', '))
+        console.log('X positions (last 30):', xValues.slice(-30).join(', '))
+      }
+      console.log(`Jump log from browser:`, jumpLog)
+      console.log(`Detected ${jumps.length} position jumps`)
+      if (jumps.length > 0) {
+        console.log('Jumps:', JSON.stringify(jumps.slice(0, 5), null, 2))
+      }
+
+      expect(jumps.length, `Tooltip jumped ${jumps.length} times!`).toBe(0)
+    })
+
+    test('inner content animations should not get stuck at endpoints', async ({
+      page,
+    }) => {
+      await page.goto(SITE_URL, { waitUntil: 'networkidle' })
+      await page.waitForTimeout(1000)
+
+      await page.setViewportSize({ width: 1400, height: 900 })
+      await page.waitForTimeout(500)
+
+      // find header links
+      const coreLink = page.locator('a:has-text("Core")').first()
+      const menuButton = page.locator('button[aria-label="Open the main menu"]').first()
+
+      const coreVisible = await coreLink.isVisible().catch(() => false)
+      if (!coreVisible) {
+        console.log('Core link not visible, skipping')
+        test.skip()
+        return
+      }
+
+      // inject tracking for Frame (inner content) animations
+      await page.evaluate(() => {
+        ;(window as any).__framePositions = []
+        const track = () => {
+          const frames = document.querySelectorAll('.header-popover-frame')
+          frames.forEach((frame, idx) => {
+            const el = frame as HTMLElement
+            const transform = getComputedStyle(el).transform
+            const opacity = getComputedStyle(el).opacity
+            if (transform && transform !== 'none') {
+              const match = transform.match(
+                /matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/
+              )
+              if (match) {
+                ;(window as any).__framePositions.push({
+                  idx,
+                  x: parseFloat(match[1]),
+                  y: parseFloat(match[2]),
+                  opacity: parseFloat(opacity),
+                  time: Date.now(),
+                })
+              }
+            }
+          })
+          requestAnimationFrame(track)
+        }
+        requestAnimationFrame(track)
+      })
+
+      // hover Core
+      await coreLink.hover()
+      await page.waitForTimeout(400)
+
+      // rapidly switch to menu button
+      await menuButton.hover()
+      await page.waitForTimeout(200)
+
+      // back to Core
+      await coreLink.hover()
+      await page.waitForTimeout(200)
+
+      // to menu
+      await menuButton.hover()
+      await page.waitForTimeout(200)
+
+      // to Core
+      await coreLink.hover()
+      await page.waitForTimeout(400)
+
+      const positions = await page.evaluate(() => (window as any).__framePositions || [])
+      console.log(`Collected ${positions.length} frame positions`)
+
+      // analyze for stuck animations (opacity stuck at 0 or x stuck at wrong value)
+      let stuckAtExit = 0
+      for (let i = 0; i < positions.length; i++) {
+        const pos = positions[i]
+        // check for opacity stuck near 0 when it should be 1
+        if (pos.opacity < 0.1 && Math.abs(pos.x) > 30) {
+          stuckAtExit++
+        }
+      }
+
+      console.log(`Frames stuck at exit state: ${stuckAtExit}`)
+      // some exit states during transition are fine, but not excessive
+      expect(stuckAtExit).toBeLessThan(50)
+    })
+  })
+})

package/tests/HeightMediaQueryOverride.test.tsx

@@ -0,0 +1,112 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests for height media query overriding transform props (scale)
+ * Uses v5 config where height-lg breakpoint: minHeight 1024px
+ */
+
+async function getScale(page: Page, testId: string): Promise<number> {
+  return page.evaluate((id) => {
+    const el = document.querySelector(`[data-testid="${id}"]`)
+    if (!el) return -1
+    const transform = getComputedStyle(el).transform
+    if (transform === 'none') return 1
+    const match = transform.match(/matrix\(([^,]+),/)
+    return match ? Number.parseFloat(match[1]) : 1
+  }, testId)
+}
+
+async function getBgColor(page: Page, testId: string): Promise<string> {
+  return page.evaluate((id) => {
+    const el = document.querySelector(`[data-testid="${id}"]`)
+    return el ? getComputedStyle(el).backgroundColor : ''
+  }, testId)
+}
+
+test.describe('Height Media Query Override', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'HeightMediaQueryOverrideCase',
+      type: 'useCase',
+      searchParams: { v5config: 'true' },
+    })
+  })
+
+  test('$height-sm should override base scale=1 when height >= 640', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 700 })
+    await page.waitForTimeout(300)
+
+    const scale = await getScale(page, 'test-height-scale')
+    // should be 2 from $height-sm, not 1 from base
+    expect(scale, 'scale should be 2 at $height-sm, not 1 from base').toBeCloseTo(2, 1)
+  })
+
+  test('$height-lg works when NO base scale is set', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 1100 })
+    await page.waitForTimeout(300)
+
+    const scale = await getScale(page, 'test-height-scale-no-base')
+    expect(scale, 'scale should be 2 at $height-lg').toBeCloseTo(2, 1)
+  })
+
+  test('base scale=1 should apply when height < 640 (below $height-sm)', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await page.waitForTimeout(300)
+
+    const scale = await getScale(page, 'test-height-scale')
+    expect(scale, 'scale should be 1 at base (below $height-sm)').toBeCloseTo(1, 1)
+  })
+
+  test('$sm width query works for comparison', async ({ page }) => {
+    await page.setViewportSize({ width: 800, height: 700 })
+    await page.waitForTimeout(300)
+
+    const scale = await getScale(page, 'test-width-scale')
+    expect(scale, 'scale should be 1.5 at $sm').toBeCloseTo(1.5, 1)
+  })
+
+  test('styled component with scale=1 in definition + $height-sm override', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1200, height: 700 })
+    await page.waitForTimeout(300)
+
+    const scale = await getScale(page, 'test-styled-scale')
+    // styled component has scale=1 in definition, $height-sm should override to 2
+    expect(scale, 'styled component scale should be 2 at $height-sm').toBeCloseTo(2, 1)
+  })
+
+  test('styled component with $height-sm in definition + runtime $height-sm override', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1200, height: 700 })
+    await page.waitForTimeout(300)
+
+    const scale = await getScale(page, 'test-styled-media-override')
+    // styled has $height-sm: scale=0.5 in definition
+    // runtime $height-sm: scale=2 should override
+    expect(
+      scale,
+      'runtime $height-sm should override styled definition $height-sm'
+    ).toBeCloseTo(2, 1)
+  })
+
+  test('ContainerLarge with WIDTH queries in definition + runtime $height-sm scale', async ({
+    page,
+  }) => {
+    // exact scenario from chat app: ContainerLarge has $md/$lg width queries
+    // used with scale=1 and $height-sm={{ scale: 2 }}
+    await page.setViewportSize({ width: 1200, height: 700 })
+    await page.waitForTimeout(300)
+
+    const scale = await getScale(page, 'test-container-large')
+    // should be 2 from $height-sm, not 1 from base
+    expect(
+      scale,
+      'ContainerLarge with width queries should still allow $height-sm to override scale'
+    ).toBeCloseTo(2, 1)
+  })
+})

package/tests/InputAutoFocusAfterMenu.test.tsx

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'InputAutoFocusAfterMenuCase', type: 'useCase' })
+})
+
+test('standalone Input with autoFocus should be focused on mount', async ({ page }) => {
+  const input = page.locator('[data-testid="autofocus-input"]')
+  await expect(input).toBeVisible()
+  await expect(input).toBeFocused()
+})
+
+test('Input with autoFocus should receive focus after menu close', async ({ page }) => {
+  const trigger = page.locator('[data-testid="menu-trigger"]')
+  await trigger.click()
+
+  const menuContent = page.locator('[data-testid="menu-content"]')
+  await expect(menuContent).toBeVisible()
+
+  const menuItem = page.locator('[data-testid="menu-item-show-input"]')
+  await menuItem.click()
+
+  const afterMenuInput = page.locator('[data-testid="after-menu-input"]')
+  await expect(afterMenuInput).toBeVisible()
+
+  await page.waitForTimeout(300)
+  await expect(afterMenuInput).toBeFocused()
+})
+
+test('onCloseAutoFocus preventDefault should prevent default focus restore and allow custom focus', async ({
+  page,
+}) => {
+  const trigger = page.locator('[data-testid="prevent-default-trigger"]')
+  await trigger.click()
+
+  const menuContent = page.locator('[data-testid="prevent-default-menu-content"]')
+  await expect(menuContent).toBeVisible()
+
+  const menuItem = page.locator('[data-testid="prevent-default-menu-item"]')
+  await menuItem.click()
+
+  // menu should close
+  await expect(menuContent).not.toBeVisible()
+
+  await page.waitForTimeout(300)
+
+  // custom focus target should be focused (not the trigger)
+  const customTarget = page.locator('[data-testid="custom-focus-target"]')
+  await expect(customTarget).toBeFocused()
+
+  // trigger should NOT be focused
+  const triggerFocused = await trigger.evaluate((el) => el === document.activeElement)
+  expect(triggerFocused).toBe(false)
+})

package/tests/InputAutoFocusStyled.test.tsx

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'InputAutoFocusStyledCase', type: 'useCase' })
+})
+
+test('plain Input with autoFocus gets focused on mount', async ({ page }) => {
+  await page.locator('[data-testid="show-plain"]').click()
+  const input = page.locator('[data-testid="plain-autofocus"]')
+  await expect(input).toBeVisible()
+  await page.waitForTimeout(200)
+  await expect(input).toBeFocused()
+})
+
+test('styled(Input) with autoFocus gets focused on mount', async ({ page }) => {
+  await page.locator('[data-testid="show-styled"]').click()
+  const input = page.locator('[data-testid="styled-autofocus"]')
+  await expect(input).toBeVisible()
+  await page.waitForTimeout(200)
+  await expect(input).toBeFocused()
+})