@hanzogui/kitchen-sink 3.0.5

package/tests/OnLayoutStress.test.tsx

@@ -0,0 +1,304 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// layout poll interval is ~233ms (14 frames)
+const POLL_WAIT = 500
+// CI environments are slower - give more time for layouts to settle
+const INITIAL_SETTLE_TIME = process.env.CI ? 3000 : 1500
+
+// gating thresholds - fail if exceeded
+const MAX_IO_DELAY_MS = 100 // fail if IO callback takes > 100ms
+const MAX_WARNINGS_PER_TEST = 3 // fail if too many warnings
+
+async function collectConsoleWarnings(
+  page: Page
+): Promise<{ count: number; avgDelay: number; maxDelay: number }> {
+  const result = await page.evaluate(() => {
+    const warnings = (window as any).__ioDelayWarnings || []
+    if (warnings.length === 0) return { count: 0, avgDelay: 0, maxDelay: 0 }
+    const sum = warnings.reduce((a: number, b: number) => a + b, 0)
+    const max = Math.max(...warnings)
+    return {
+      count: warnings.length,
+      avgDelay: Math.round(sum / warnings.length),
+      maxDelay: max,
+    }
+  })
+  return result
+}
+
+async function getStats(
+  page: Page
+): Promise<{ total: number; lastBatch: number; lastTime: number; max: number }> {
+  const total = await page.getByTestId('stat-total').innerText()
+  const lastBatch = await page.getByTestId('stat-last-batch').innerText()
+  const lastTime = await page.getByTestId('stat-last-time').innerText()
+  const max = await page.getByTestId('stat-max').innerText()
+
+  return {
+    total: parseInt(total.replace('total: ', ''), 10) || 0,
+    lastBatch: parseInt(lastBatch.replace('lastBatch: ', ''), 10) || 0,
+    lastTime: parseInt(lastTime.replace('lastTime: ', ''), 10) || 0,
+    max: parseInt(max.replace('max: ', '').replace('ms', ''), 10) || 0,
+  }
+}
+
+test.describe('onLayout stress test', () => {
+  // stress tests are flaky in CI - give them extra retries
+  test.describe.configure({ retries: 3 })
+
+  test.beforeEach(async ({ page }) => {
+    // set up console warning tracking
+    // BUG FIX: console.warn('[onLayout-io-delay]', delay + 'ms', ...) puts delay in args[1]
+    await page.addInitScript(() => {
+      ;(window as any).__ioDelayWarnings = []
+      const originalWarn = console.warn
+      console.warn = (...args: any[]) => {
+        const prefix = args[0]
+        const delayArg = args[1] // delay is in second argument
+        if (typeof prefix === 'string' && prefix.includes('[onLayout-io-delay]')) {
+          if (typeof delayArg === 'string') {
+            const match = delayArg.match(/(\d+)ms/)
+            if (match) {
+              ;(window as any).__ioDelayWarnings.push(parseInt(match[1], 10))
+            }
+          }
+        }
+        originalWarn.apply(console, args)
+      }
+    })
+
+    await setupPage(page, { name: 'OnLayoutStressCase', type: 'useCase' })
+  })
+
+  test('initial render should not exceed threshold', async ({ page }) => {
+    // wait for initial layout callbacks to settle
+    await page.waitForTimeout(INITIAL_SETTLE_TIME)
+
+    const stats = await getStats(page)
+    const warnings = await collectConsoleWarnings(page)
+
+    console.log('=== INITIAL RENDER BENCHMARK ===')
+    console.log(`total callbacks: ${stats.total}`)
+    console.log(`last batch size: ${stats.lastBatch}`)
+    console.log(`max batch time: ${stats.max}ms`)
+    console.log(`IO delay warnings: ${warnings.count}`)
+    if (warnings.count > 0) {
+      console.log(`avg IO delay: ${warnings.avgDelay}ms`)
+      console.log(`max IO delay: ${warnings.maxDelay}ms`)
+    }
+
+    // gating assertions
+    expect(stats.total, 'should have onLayout callbacks').toBeGreaterThan(50)
+    expect(warnings.maxDelay, `IO delay should be < ${MAX_IO_DELAY_MS}ms`).toBeLessThan(
+      MAX_IO_DELAY_MS
+    )
+  })
+
+  test('resize should trigger batch updates efficiently', async ({ page }) => {
+    await page.waitForTimeout(INITIAL_SETTLE_TIME)
+
+    // scroll sibling section into view — onLayout only fires for visible elements
+    await page.getByTestId('section-siblings').scrollIntoViewIfNeeded()
+    await page.waitForTimeout(POLL_WAIT)
+
+    // reset stats after initial render
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(200)
+
+    // trigger width resize
+    await page.getByTestId('btn-resize-width').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+
+    const stats = await getStats(page)
+    const warnings = await collectConsoleWarnings(page)
+
+    console.log('=== WIDTH RESIZE BENCHMARK ===')
+    console.log(`callbacks after resize: ${stats.total}`)
+    console.log(`last batch size: ${stats.lastBatch}`)
+    console.log(`last batch time: ${stats.lastTime}ms`)
+    console.log(`IO delay warnings: ${warnings.count}`)
+
+    // gating assertions
+    expect(stats.total, 'resize should trigger callbacks').toBeGreaterThan(0)
+    expect(
+      warnings.count,
+      `should have fewer than ${MAX_WARNINGS_PER_TEST} warnings`
+    ).toBeLessThan(MAX_WARNINGS_PER_TEST)
+  })
+
+  test('grid resize should trigger efficient updates', async ({ page }) => {
+    await page.waitForTimeout(INITIAL_SETTLE_TIME)
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+
+    await page.getByTestId('btn-resize-grid').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+
+    const stats = await getStats(page)
+    const warnings = await collectConsoleWarnings(page)
+
+    console.log('=== GRID RESIZE BENCHMARK ===')
+    console.log(`callbacks: ${stats.total}`)
+    console.log(`batch time: ${stats.lastTime}ms`)
+    console.log(`IO delay warnings: ${warnings.count}`)
+
+    // gating assertions - 40 grid items should trigger ~40 callbacks
+    expect(stats.total, 'grid resize should trigger callbacks').toBeGreaterThan(20)
+    expect(warnings.maxDelay, `IO delay should be < ${MAX_IO_DELAY_MS}ms`).toBeLessThan(
+      MAX_IO_DELAY_MS
+    )
+  })
+
+  test('list expand should trigger efficient updates', async ({ page }) => {
+    await page.waitForTimeout(INITIAL_SETTLE_TIME)
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+
+    await page.getByTestId('btn-toggle-expand').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+
+    const stats = await getStats(page)
+    const warnings = await collectConsoleWarnings(page)
+
+    console.log('=== LIST EXPAND BENCHMARK ===')
+    console.log(`callbacks: ${stats.total}`)
+    console.log(`batch time: ${stats.lastTime}ms`)
+    console.log(`IO delay warnings: ${warnings.count}`)
+
+    // gating assertions - 20 list items should trigger ~20 callbacks
+    expect(stats.total, 'list expand should trigger callbacks').toBeGreaterThan(10)
+    expect(warnings.maxDelay, `IO delay should be < ${MAX_IO_DELAY_MS}ms`).toBeLessThan(
+      MAX_IO_DELAY_MS
+    )
+  })
+
+  test('container resize affects all children', async ({ page }) => {
+    await page.waitForTimeout(INITIAL_SETTLE_TIME)
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+
+    await page.getByTestId('btn-resize-container').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+
+    const stats = await getStats(page)
+    const warnings = await collectConsoleWarnings(page)
+
+    console.log('=== CONTAINER RESIZE BENCHMARK ===')
+    console.log(`callbacks: ${stats.total}`)
+    console.log(`batch time: ${stats.lastTime}ms`)
+    console.log(`IO delay warnings: ${warnings.count}`)
+
+    // gating assertion
+    expect(warnings.maxDelay, `IO delay should be < ${MAX_IO_DELAY_MS}ms`).toBeLessThan(
+      MAX_IO_DELAY_MS
+    )
+  })
+
+  test('rapid successive resizes', async ({ page }) => {
+    await page.waitForTimeout(INITIAL_SETTLE_TIME)
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+
+    // rapid fire multiple resize operations
+    for (let i = 0; i < 5; i++) {
+      await page.getByTestId('btn-resize-width').click()
+      await page.waitForTimeout(50)
+      await page.getByTestId('btn-resize-grid').click()
+      await page.waitForTimeout(50)
+    }
+
+    await page.waitForTimeout(POLL_WAIT * 3)
+
+    const stats = await getStats(page)
+    const warnings = await collectConsoleWarnings(page)
+
+    console.log('=== RAPID RESIZE BENCHMARK ===')
+    console.log(`total callbacks: ${stats.total}`)
+    console.log(`max batch time: ${stats.max}ms`)
+    console.log(`IO delay warnings: ${warnings.count}`)
+    if (warnings.count > 0) {
+      console.log(`avg IO delay: ${warnings.avgDelay}ms`)
+      console.log(`max IO delay: ${warnings.maxDelay}ms`)
+    }
+
+    // gating assertion - rapid resize is stressful but shouldn't explode
+    expect(
+      warnings.maxDelay,
+      `IO delay should be < ${MAX_IO_DELAY_MS}ms even under stress`
+    ).toBeLessThan(MAX_IO_DELAY_MS)
+  })
+
+  test('full benchmark suite', async ({ page }) => {
+    const results: Record<string, any> = {}
+
+    // initial render
+    await page.waitForTimeout(INITIAL_SETTLE_TIME)
+    results.initial = {
+      ...(await getStats(page)),
+      warnings: await collectConsoleWarnings(page),
+    }
+
+    // width resize
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+    await page.getByTestId('btn-resize-width').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+    results.widthResize = {
+      ...(await getStats(page)),
+      warnings: await collectConsoleWarnings(page),
+    }
+
+    // grid resize
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+    await page.getByTestId('btn-resize-grid').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+    results.gridResize = {
+      ...(await getStats(page)),
+      warnings: await collectConsoleWarnings(page),
+    }
+
+    // expand list
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+    await page.getByTestId('btn-toggle-expand').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+    results.listExpand = {
+      ...(await getStats(page)),
+      warnings: await collectConsoleWarnings(page),
+    }
+
+    // container resize
+    await page.getByTestId('btn-reset-stats').click()
+    await page.waitForTimeout(100)
+    await page.getByTestId('btn-resize-container').click()
+    await page.waitForTimeout(POLL_WAIT * 3)
+    results.containerResize = {
+      ...(await getStats(page)),
+      warnings: await collectConsoleWarnings(page),
+    }
+
+    console.log('\n========== FULL BENCHMARK RESULTS ==========')
+    console.log(JSON.stringify(results, null, 2))
+    console.log('=============================================\n')
+
+    // calculate aggregate metrics
+    const allMaxDelays = Object.values(results).map((r: any) => r.warnings?.maxDelay || 0)
+    const overallMaxDelay = Math.max(...allMaxDelays)
+    const totalWarnings = Object.values(results).reduce(
+      (sum: number, r: any) => sum + (r.warnings?.count || 0),
+      0
+    )
+
+    console.log(
+      `AGGREGATE: ${totalWarnings} total warnings, ${overallMaxDelay}ms max IO delay`
+    )
+
+    // gating assertions for the full suite
+    expect(
+      overallMaxDelay,
+      `max IO delay across all tests should be < ${MAX_IO_DELAY_MS}ms`
+    ).toBeLessThan(MAX_IO_DELAY_MS)
+  })
+})

package/tests/ParagraphSpanFontInheritance.test.tsx

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test'
+
+import { getStyles } from './utils'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ParagraphSpanFontInheritance', type: 'useCase' })
+})
+
+test(`Span inherits $mono fontFamily from Paragraph`, async ({ page }) => {
+  const parentStyles = await getStyles(page.getByTestId('parent-mono').first())
+  const nestedStyles = await getStyles(page.getByTestId('nested-span-mono').first())
+
+  // parent should have mono font family
+  expect(parentStyles.fontFamily).toContain('mono')
+
+  // span should inherit the mono font family
+  expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
+})
+
+test(`Span inherits $body fontFamily from Paragraph`, async ({ page }) => {
+  const parentStyles = await getStyles(page.getByTestId('parent-body').first())
+  const nestedStyles = await getStyles(page.getByTestId('nested-span-body').first())
+
+  // span should inherit the body font family
+  expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
+})
+
+test(`nested Text inherits $mono fontFamily from Text (baseline)`, async ({ page }) => {
+  const parentStyles = await getStyles(page.getByTestId('parent-text-mono').first())
+  const nestedStyles = await getStyles(page.getByTestId('nested-text-mono').first())
+
+  // parent should have mono font family
+  expect(parentStyles.fontFamily).toContain('mono')
+
+  // nested text should inherit the mono font family
+  expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
+})
+
+test(`Span explicit fontFamily override works`, async ({ page }) => {
+  const parentStyles = await getStyles(page.getByTestId('parent-mono-override').first())
+  const nestedStyles = await getStyles(page.getByTestId('nested-span-override').first())
+
+  // parent should have mono font family
+  expect(parentStyles.fontFamily).toContain('mono')
+
+  // span with explicit $body should NOT inherit mono
+  expect(nestedStyles.fontFamily).not.toBe(parentStyles.fontFamily)
+})
+
+test(`SizableText keeps its explicit fontFamily (does not inherit)`, async ({ page }) => {
+  const parentStyles = await getStyles(page.getByTestId('parent-mono-sizable').first())
+  const nestedStyles = await getStyles(page.getByTestId('nested-sizable-body').first())
+
+  // parent should have mono font family
+  expect(parentStyles.fontFamily).toContain('mono')
+
+  // SizableText has explicit fontFamily: '$body' in its static config,
+  // so it should NOT inherit mono but keep its body font
+  expect(nestedStyles.fontFamily).not.toBe(parentStyles.fontFamily)
+  expect(nestedStyles.fontFamily).toContain('Inter')
+})
+
+test(`Text (like Link) inside Paragraph inherits fontFamily`, async ({ page }) => {
+  const parentStyles = await getStyles(page.getByTestId('parent-para-link').first())
+  const nestedStyles = await getStyles(page.getByTestId('nested-link-text').first())
+
+  // parent should have mono font family
+  expect(parentStyles.fontFamily).toContain('mono')
+
+  // nested Text should inherit the mono font family
+  expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
+})

package/tests/PointerEvents.test.tsx

@@ -0,0 +1,123 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'PointerEventsCase', type: 'useCase' })
+})
+
+test('pointer events - down and up fire on click', async ({ page }) => {
+  const target = page.locator('[data-testid="pointer-target"]')
+  const downCount = page.locator('[data-testid="down-count"]')
+  const upCount = page.locator('[data-testid="up-count"]')
+
+  await expect(downCount).toHaveText('Down: 0')
+  await expect(upCount).toHaveText('Up: 0')
+
+  await target.click()
+
+  await expect(downCount).toHaveText('Down: 1')
+  await expect(upCount).toHaveText('Up: 1')
+})
+
+test('pointer events - enter and leave fire on hover', async ({ page }) => {
+  const target = page.locator('[data-testid="pointer-target"]')
+  const enterCount = page.locator('[data-testid="enter-count"]')
+  const leaveCount = page.locator('[data-testid="leave-count"]')
+
+  await expect(enterCount).toHaveText('Enter: 0')
+  await expect(leaveCount).toHaveText('Leave: 0')
+
+  // hover over target
+  await target.hover()
+  await expect(enterCount).toHaveText('Enter: 1')
+
+  // move away from target
+  await page.mouse.move(0, 0)
+  await expect(leaveCount).toHaveText('Leave: 1')
+})
+
+test('pointer events - move fires during drag', async ({ page }) => {
+  const target = page.locator('[data-testid="pointer-target"]')
+  const moveCount = page.locator('[data-testid="move-count"]')
+
+  await expect(moveCount).toHaveText('Move: 0')
+
+  // get the bounding box and move within it
+  const box = await target.boundingBox()
+  if (!box) throw new Error('Could not get bounding box')
+
+  // move mouse across the target
+  const startX = box.x + 10
+  const startY = box.y + 10
+  const endX = box.x + box.width - 10
+  const endY = box.y + box.height - 10
+
+  await page.mouse.move(startX, startY)
+  await page.mouse.move(endX, endY, { steps: 5 })
+
+  // should have fired multiple move events
+  const text = await moveCount.textContent()
+  const count = parseInt(text?.replace('Move: ', '') || '0')
+  expect(count).toBeGreaterThan(0)
+})
+
+test('pointer events - box-none allows clicks to pass through parent to element behind', async ({
+  page,
+}) => {
+  const parentCount = page.locator('[data-testid="box-none-parent-count"]')
+  const childCount = page.locator('[data-testid="box-none-child-count"]')
+  const behindCount = page.locator('[data-testid="box-none-behind-count"]')
+  const behind = page.locator('[data-testid="box-none-behind"]')
+
+  // initial state
+  await expect(parentCount).toHaveText('BoxNoneParent: 0')
+  await expect(childCount).toHaveText('BoxNoneChild: 0')
+  await expect(behindCount).toHaveText('BoxNoneBehind: 0')
+
+  // click directly on parent area (where behind element is underneath)
+  // box-none should let the click pass through to the behind element
+  const behindBox = await behind.boundingBox()
+  if (!behindBox) throw new Error('Could not get behind bounding box')
+
+  // get center of the behind element which is covered by the parent
+  const centerX = behindBox.x + behindBox.width / 2
+  const centerY = behindBox.y + behindBox.height / 2
+
+  // clicking at this position should:
+  // 1. NOT trigger the parent's onPress (box-none means parent ignores pointer events)
+  // 2. Trigger the behind element's onPress (click passes through)
+  await page.mouse.click(centerX, centerY)
+
+  // parent should not have received the click
+  await expect(parentCount).toHaveText('BoxNoneParent: 0')
+  // behind element should have received the click
+  await expect(behindCount).toHaveText('BoxNoneBehind: 1')
+})
+
+test('pointer events - box-none child still receives clicks', async ({ page }) => {
+  const childCount = page.locator('[data-testid="box-none-child-count"]')
+  const child = page.locator('[data-testid="box-none-child"]')
+
+  await expect(childCount).toHaveText('BoxNoneChild: 0')
+
+  // clicking on child should work (children can still receive events)
+  await child.click()
+  await expect(childCount).toHaveText('BoxNoneChild: 1')
+})
+
+test('pointer events - box-none applies correct CSS', async ({ page }) => {
+  const parent = page.locator('[data-testid="box-none-parent"]')
+  const child = page.locator('[data-testid="box-none-child"]')
+
+  // parent should have pointer-events: none
+  const parentPointerEvents = await parent.evaluate(
+    (el) => window.getComputedStyle(el).pointerEvents
+  )
+  expect(parentPointerEvents).toBe('none')
+
+  // direct children should have pointer-events: auto (due to box-none polyfill)
+  const childPointerEvents = await child.evaluate(
+    (el) => window.getComputedStyle(el).pointerEvents
+  )
+  expect(childPointerEvents).toBe('auto')
+})