@hanzogui/kitchen-sink 3.0.5

package/tests/MultiDriverAnimation.test.tsx

@@ -0,0 +1,207 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * Tests for multi-driver animation config: { default: motion, css: cssDriver }
+ *
+ * This test ONLY runs with ?animationDriver=multi which sets up:
+ *   animations: { default: animationsMotion, css: animationsCSS }
+ *
+ * Verifies:
+ * 1. animatedBy="default" uses motion driver (JS-based animation)
+ * 2. animatedBy="css" uses CSS driver (CSS transitions)
+ * 3. no animatedBy defaults to motion driver
+ */
+
+test.describe('Multi-driver animation config', () => {
+  test.beforeEach(async ({ page }) => {
+    // specifically load with multi-driver config
+    await page.goto('/?test=MultiDriverAnimation&animationDriver=multi')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(300)
+  })
+
+  test('animatedBy="default" uses motion driver (animates smoothly)', async ({
+    page,
+  }) => {
+    const element = page.getByTestId('driver-default')
+
+    const initialOpacity = await element.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+    expect(initialOpacity).toBeCloseTo(0.3, 1)
+
+    // use in-browser rAF polling to reliably capture mid-animation frames
+    // (Playwright waitForTimeout is too slow on CI to catch intermediate values)
+    const samples: number[] = await page.evaluate(() => {
+      return new Promise<number[]>((resolve) => {
+        const el = document.querySelector('[data-testid="driver-default"]')!
+        const vals: number[] = []
+        const start = performance.now()
+        function tick() {
+          vals.push(Number(getComputedStyle(el).opacity))
+          if (performance.now() - start < 500) requestAnimationFrame(tick)
+          else resolve(vals)
+        }
+        ;(document.querySelector('[data-testid="toggle-multi"]') as HTMLElement).click()
+        requestAnimationFrame(tick)
+      })
+    })
+
+    const finalOpacity = samples[samples.length - 1]
+    expect(finalOpacity).toBeGreaterThan(0.9)
+
+    // motion driver should show intermediate values (not jump instantly)
+    const intermediates = samples.filter((v) => v > 0.35 && v < 0.95)
+    expect(
+      intermediates.length,
+      `Motion driver should animate with interpolation (got ${intermediates.length} intermediate frames). ` +
+        `Samples: [${samples
+          .slice(0, 8)
+          .map((s) => s.toFixed(2))
+          .join(', ')}...]`
+    ).toBeGreaterThanOrEqual(2)
+  })
+
+  test('animatedBy="css" uses CSS driver (CSS transitions)', async ({ page }) => {
+    const element = page.getByTestId('driver-css')
+
+    const initialOpacity = await element.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+    expect(initialOpacity).toBeCloseTo(0.3, 1)
+
+    // trigger animation
+    await page.getByTestId('toggle-multi').click()
+
+    // css driver uses CSS transitions - 200ms
+    await page.waitForTimeout(350)
+    const finalOpacity = await element.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+
+    expect(finalOpacity).toBeGreaterThan(0.9)
+
+    // verify it's using CSS transition
+    const transition = await element.evaluate((el) => getComputedStyle(el).transition)
+    expect(transition.length).toBeGreaterThan(0)
+  })
+
+  test('no animatedBy defaults to motion driver', async ({ page }) => {
+    const initialOpacity = await page
+      .getByTestId('driver-none')
+      .evaluate((el) => Number(getComputedStyle(el).opacity))
+    expect(initialOpacity).toBeCloseTo(0.3, 1)
+
+    // poll via rAF to capture intermediate values reliably in slow CI
+    const samples: number[] = await page.evaluate(() => {
+      return new Promise<number[]>((resolve) => {
+        const el = document.querySelector('[data-testid="driver-none"]')!
+        const vals: number[] = []
+        const start = performance.now()
+        function tick() {
+          vals.push(Number(getComputedStyle(el).opacity))
+          if (performance.now() - start < 500) requestAnimationFrame(tick)
+          else resolve(vals)
+        }
+        ;(document.querySelector('[data-testid="toggle-multi"]') as HTMLElement).click()
+        requestAnimationFrame(tick)
+      })
+    })
+
+    const finalOpacity = samples[samples.length - 1]
+    expect(finalOpacity).toBeGreaterThan(0.9)
+
+    // verify motion driver: multiple frames of interpolation between 0.3 and ~1.0
+    const intermediates = samples.filter((v) => v > 0.35 && v < 0.95)
+    expect(
+      intermediates.length,
+      `Default should use motion with real interpolation (got ${intermediates.length} intermediate frames). ` +
+        `Samples: [${samples
+          .slice(0, 8)
+          .map((s) => s.toFixed(2))
+          .join(', ')}...]`
+    ).toBeGreaterThanOrEqual(2)
+
+    // first frames should still be near start (animation has real duration)
+    const earlyEnd = samples.slice(0, 3).every((v) => v > 0.95)
+    expect(earlyEnd, 'Animation should not complete in first 3 frames').toBe(false)
+  })
+
+  test('different drivers produce different animation behavior', async ({ page }) => {
+    // trigger animation
+    await page.getByTestId('toggle-multi').click()
+
+    // capture at same moment
+    await page.waitForTimeout(100)
+
+    const [defaultOpacity, cssOpacity] = await Promise.all([
+      page
+        .getByTestId('driver-default')
+        .evaluate((el) => Number(getComputedStyle(el).opacity)),
+      page
+        .getByTestId('driver-css')
+        .evaluate((el) => Number(getComputedStyle(el).opacity)),
+    ])
+
+    // both should be animating but may have different values due to different drivers
+    // this just verifies both are in valid range
+    expect(defaultOpacity).toBeGreaterThanOrEqual(0.3)
+    expect(defaultOpacity).toBeLessThanOrEqual(1)
+    expect(cssOpacity).toBeGreaterThanOrEqual(0.3)
+    expect(cssOpacity).toBeLessThanOrEqual(1)
+  })
+})
+
+test.describe('Multi-driver group hover transitions', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/?test=MultiDriverAnimation&animationDriver=multi')
+    await page.waitForLoadState('networkidle')
+    await page.waitForTimeout(300)
+  })
+
+  test('group hover with motion driver animates child', async ({ page }) => {
+    const group = page.getByTestId('group-motion')
+    const child = page.getByTestId('group-motion-child')
+
+    const initialOpacity = await child.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+    expect(initialOpacity).toBeCloseTo(0.5, 1)
+
+    // hover over group - 100ms enter transition
+    await group.hover()
+    await page.waitForTimeout(200)
+
+    const hoverOpacity = await child.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+    expect(hoverOpacity).toBeGreaterThan(0.9)
+
+    // exit hover - 500ms exit transition
+    await page.mouse.move(0, 0)
+    await page.waitForTimeout(700)
+
+    const exitOpacity = await child.evaluate((el) => Number(getComputedStyle(el).opacity))
+    expect(exitOpacity).toBeCloseTo(0.5, 1)
+  })
+
+  test('group hover with css driver uses CSS transitions', async ({ page }) => {
+    const group = page.getByTestId('group-css')
+    const child = page.getByTestId('group-css-child')
+
+    const initialOpacity = await child.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+    expect(initialOpacity).toBeCloseTo(0.5, 1)
+
+    await group.hover()
+    // css driver hover transition should complete
+    await page.waitForTimeout(400)
+
+    const hoverOpacity = await child.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+    // CSS driver group hover should animate to full opacity
+    expect(hoverOpacity).toBeGreaterThan(0.8)
+  })
+})

package/tests/NewInputBasic.test.tsx

@@ -0,0 +1,50 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'NewInputBasic', type: 'useCase' })
+})
+
+test('renders basic input', async ({ page }) => {
+  const input = page.locator('[data-testid="basic-input"]')
+  await expect(input).toBeVisible()
+  await expect(input).toHaveAttribute('placeholder', 'Basic input')
+})
+
+test('renders password input with correct type', async ({ page }) => {
+  const input = page.locator('[data-testid="password-input"]')
+  await expect(input).toBeVisible()
+  await expect(input).toHaveAttribute('type', 'password')
+})
+
+test('renders email input with correct type', async ({ page }) => {
+  const input = page.locator('[data-testid="email-input"]')
+  await expect(input).toBeVisible()
+  await expect(input).toHaveAttribute('type', 'email')
+})
+
+test('renders number input with correct type', async ({ page }) => {
+  const input = page.locator('[data-testid="number-input"]')
+  await expect(input).toBeVisible()
+  await expect(input).toHaveAttribute('type', 'number')
+})
+
+test('renders disabled input', async ({ page }) => {
+  const input = page.locator('[data-testid="disabled-input"]')
+  await expect(input).toBeVisible()
+  await expect(input).toBeDisabled()
+})
+
+test('renders readonly input', async ({ page }) => {
+  const input = page.locator('[data-testid="readonly-input"]')
+  await expect(input).toBeVisible()
+  await expect(input).toHaveAttribute('readonly', '')
+  await expect(input).toHaveValue('Read only value')
+})
+
+test('renders textarea', async ({ page }) => {
+  const textarea = page.locator('[data-testid="basic-textarea"]')
+  await expect(textarea).toBeVisible()
+  // Textarea should be rendered as textarea element
+  await expect(textarea).toHaveAttribute('placeholder', 'Basic textarea')
+})

package/tests/NewInputEvents.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: 'NewInputEvents', type: 'useCase' })
+})
+
+test('onChange updates value display', async ({ page }) => {
+  const input = page.locator('[data-testid="event-input"]')
+  const valueDisplay = page.locator('[data-testid="value-display"]')
+
+  await input.fill('hello world')
+
+  await expect(valueDisplay).toContainText('Value: hello world')
+})
+
+test('onChange increments change count', async ({ page }) => {
+  const input = page.locator('[data-testid="event-input"]')
+  const changeCount = page.locator('[data-testid="change-count"]')
+
+  await expect(changeCount).toContainText('Changes: 0')
+
+  await input.fill('a')
+  await expect(changeCount).toContainText('Changes: 1')
+
+  await input.fill('ab')
+  await expect(changeCount).toContainText('Changes: 2')
+})
+
+test('onSubmitEditing fires on Enter', async ({ page }) => {
+  const input = page.locator('[data-testid="event-input"]')
+  const submitCount = page.locator('[data-testid="submit-count"]')
+
+  await expect(submitCount).toContainText('Submits: 0')
+
+  await input.focus()
+  await input.press('Enter')
+
+  await expect(submitCount).toContainText('Submits: 1')
+})
+
+test('typing and submitting works together', async ({ page }) => {
+  const input = page.locator('[data-testid="event-input"]')
+  const valueDisplay = page.locator('[data-testid="value-display"]')
+  const submitCount = page.locator('[data-testid="submit-count"]')
+
+  await input.fill('test value')
+  await expect(valueDisplay).toContainText('Value: test value')
+
+  await input.press('Enter')
+  await expect(submitCount).toContainText('Submits: 1')
+
+  // Value should still be there after submit
+  await expect(valueDisplay).toContainText('Value: test value')
+})

package/tests/OnLayout.test.tsx

@@ -0,0 +1,163 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// poll interval is ~233ms (14 frames), give generous margin
+const POLL_WAIT = 800
+
+function parseLayout(text: string) {
+  // format: "A:120x60@0,0#1"
+  const m = text.match(/^([AB]):(\d+)x(\d+)@(-?\d+),(-?\d+)#(\d+)$/)
+  if (!m) throw new Error(`bad layout string: ${text}`)
+  return {
+    label: m[1],
+    width: Number(m[2]),
+    height: Number(m[3]),
+    x: Number(m[4]),
+    y: Number(m[5]),
+    count: Number(m[6]),
+  }
+}
+
+async function getLayout(page: Page, testId: string) {
+  const text = await page.getByTestId(testId).innerText()
+  return parseLayout(text)
+}
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'OnLayoutCase', type: 'useCase' })
+})
+
+test('fires on mount with correct dimensions', async ({ page }) => {
+  // onLayout should fire at least once on mount with accurate size
+  await page.waitForTimeout(POLL_WAIT)
+  const a = await getLayout(page, 'layout-a')
+  expect(a.count).toBeGreaterThanOrEqual(1)
+  expect(a.width).toBe(120)
+  expect(a.height).toBe(60)
+  // x should be 0 (no margin) relative to parent
+  expect(a.x).toBe(0)
+
+  // box B should also have fired
+  const b = await getLayout(page, 'layout-b')
+  expect(b.count).toBeGreaterThanOrEqual(1)
+  expect(b.width).toBe(200)
+  expect(b.height).toBe(50)
+})
+
+test('detects position change', async ({ page }) => {
+  await page.waitForTimeout(POLL_WAIT)
+  const before = await getLayout(page, 'layout-a')
+  expect(before.x).toBe(0)
+
+  await page.getByTestId('btn-move').click()
+  await page.waitForTimeout(POLL_WAIT)
+
+  const after = await getLayout(page, 'layout-a')
+  expect(after.x).toBe(100)
+  expect(after.count).toBeGreaterThan(before.count)
+})
+
+test('detects size change', async ({ page }) => {
+  await page.waitForTimeout(POLL_WAIT)
+  const before = await getLayout(page, 'layout-a')
+  expect(before.width).toBe(120)
+  expect(before.height).toBe(60)
+
+  await page.getByTestId('btn-resize').click()
+  await page.waitForTimeout(POLL_WAIT)
+
+  const after = await getLayout(page, 'layout-a')
+  expect(after.width).toBe(180)
+  expect(after.height).toBe(80)
+  expect(after.count).toBeGreaterThan(before.count)
+})
+
+test('detects parent size change via child resize', async ({ page }) => {
+  // parent shrinking alone won't re-fire onLayout if the child rect is unchanged.
+  // combine parent resize + child resize to verify the parent rect is picked up.
+  await page.waitForTimeout(POLL_WAIT)
+  const before = await getLayout(page, 'layout-a')
+
+  // resize both parent and child
+  await page.getByTestId('btn-parent-resize').click()
+  await page.getByTestId('btn-resize').click()
+  await page.waitForTimeout(POLL_WAIT)
+
+  const after = await getLayout(page, 'layout-a')
+  expect(after.count).toBeGreaterThan(before.count)
+  // child resized to 180x80
+  expect(after.width).toBe(180)
+  expect(after.height).toBe(80)
+})
+
+test('unmount cleans up and remount re-fires', async ({ page }) => {
+  await page.waitForTimeout(POLL_WAIT)
+  const before = await getLayout(page, 'layout-a')
+  expect(before.count).toBeGreaterThanOrEqual(1)
+
+  // unmount
+  await page.getByTestId('btn-toggle-mount').click()
+  await page.waitForTimeout(200)
+  // layout text should reset to zeros since state resets
+  const unmounted = await getLayout(page, 'layout-a')
+  // count shouldn't have increased (component reset its state)
+  // but we can't assert count=0 because state persists in parent
+  // instead verify box-a is gone from DOM
+  await expect(page.getByTestId('box-a')).not.toBeVisible()
+
+  // remount
+  await page.getByTestId('btn-toggle-mount').click()
+  await page.waitForTimeout(POLL_WAIT)
+  const remounted = await getLayout(page, 'layout-a')
+  expect(remounted.count).toBeGreaterThan(unmounted.count)
+  expect(remounted.width).toBe(120)
+  expect(remounted.height).toBe(60)
+})
+
+test('node swap fires onLayout for new element', async ({ page }) => {
+  await page.waitForTimeout(POLL_WAIT)
+  const before = await getLayout(page, 'layout-a')
+  expect(before.count).toBeGreaterThanOrEqual(1)
+
+  // swap replaces the element via different key (box-a-default -> box-a-alt)
+  await page.getByTestId('btn-swap').click()
+  await page.waitForTimeout(POLL_WAIT)
+
+  const after = await getLayout(page, 'layout-a')
+  // should have fired for the new node
+  expect(after.count).toBeGreaterThan(before.count)
+  // dimensions should be the same since props match
+  expect(after.width).toBe(120)
+  expect(after.height).toBe(60)
+
+  // verify the background color changed (proves DOM node actually swapped)
+  const bg = await page.getByTestId('box-a').evaluate((el) => {
+    return getComputedStyle(el).backgroundColor
+  })
+  // blue8 instead of red8 — just check it's not the original red
+  expect(bg).not.toContain('rgb(229, 72, 77)')
+})
+
+test('multiple instances do not cross-contaminate', async ({ page }) => {
+  await page.waitForTimeout(POLL_WAIT)
+  const a = await getLayout(page, 'layout-a')
+  const b = await getLayout(page, 'layout-b')
+
+  // both should have independent correct values
+  expect(a.width).toBe(120)
+  expect(b.width).toBe(200)
+
+  // move box A — box B should not change
+  await page.getByTestId('btn-move').click()
+  await page.waitForTimeout(POLL_WAIT)
+
+  const a2 = await getLayout(page, 'layout-a')
+  const b2 = await getLayout(page, 'layout-b')
+
+  expect(a2.x).toBe(100)
+  // B's values should be unchanged
+  expect(b2.width).toBe(b.width)
+  expect(b2.height).toBe(b.height)
+  expect(b2.x).toBe(b.x)
+  expect(b2.y).toBe(b.y)
+})

package/tests/OnLayoutScale.test.tsx

@@ -0,0 +1,100 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * tests for onLayout with CSS scale transform.
+ *
+ * default behavior (no flag):
+ * - onLayout reports transformed dimensions (getBoundingClientRect behavior)
+ * - a 200x200 element with scale(0.5) reports 100x100
+ *
+ * with __HANZO_GUI_ONLAYOUT_PRETRANSFORM = true:
+ * - onLayout should report pre-transform dimensions (matching RN behavior)
+ * - a 200x200 element with scale(0.5) should report 200x200
+ *
+ * see: https://github.com/hanzoai/gui/pull/2329
+ */
+
+test.describe('onLayout with CSS scale', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'OnLayoutScaleCase',
+      type: 'useCase',
+      waitExtra: true,
+    })
+  })
+
+  test('unscaled box always reports correct dimensions (200x200)', async ({ page }) => {
+    await page.waitForTimeout(500)
+
+    const layoutText = await page.getByTestId('layout-no-scale').textContent()
+
+    expect(layoutText).toContain('200')
+    expect(layoutText).toMatch(/200.*200/)
+  })
+
+  test('scaled box reports transformed dimensions by default (100x100)', async ({
+    page,
+  }) => {
+    // ensure flag is OFF
+    await page.evaluate(() => {
+      ;(globalThis as any).__HANZO_GUI_ONLAYOUT_PRETRANSFORM = false
+    })
+
+    // trigger relayout to pick up the flag change
+    await page.getByTestId('trigger-relayout').click()
+    await page.waitForTimeout(500)
+
+    const layoutText = await page.getByTestId('layout-with-scale').textContent()
+
+    // without flag: 200x200 with scale(0.5) should report 100x100 (transformed)
+    expect(layoutText).toContain('100')
+    expect(layoutText).toMatch(/100.*100/)
+  })
+
+  test('scaled box reports pre-transform dimensions with flag enabled (200x200)', async ({
+    page,
+  }) => {
+    // enable the flag
+    await page.evaluate(() => {
+      ;(globalThis as any).__HANZO_GUI_ONLAYOUT_PRETRANSFORM = true
+    })
+
+    // trigger relayout to pick up the flag change
+    await page.getByTestId('trigger-relayout').click()
+    await page.waitForTimeout(500)
+
+    const layoutText = await page.getByTestId('layout-with-scale').textContent()
+
+    // with flag: 200x200 with scale(0.5) should report 200x200 (pre-transform, RN behavior)
+    expect(layoutText).toContain('200')
+    expect(layoutText).toMatch(/200.*200/)
+  })
+
+  test('both boxes report same dimensions with flag enabled', async ({ page }) => {
+    // enable the flag
+    await page.evaluate(() => {
+      ;(globalThis as any).__HANZO_GUI_ONLAYOUT_PRETRANSFORM = true
+    })
+
+    // trigger relayout
+    await page.getByTestId('trigger-relayout').click()
+    await page.waitForTimeout(500)
+
+    const noScaleText = await page.getByTestId('layout-no-scale').textContent()
+    const withScaleText = await page.getByTestId('layout-with-scale').textContent()
+
+    // extract dimensions
+    const noScaleMatch = noScaleText?.match(/(\d+)x(\d+)/)
+    const withScaleMatch = withScaleText?.match(/(\d+)x(\d+)/)
+
+    expect(noScaleMatch).toBeTruthy()
+    expect(withScaleMatch).toBeTruthy()
+
+    if (noScaleMatch && withScaleMatch) {
+      // with flag enabled, both should report same pre-transform dimensions
+      expect(withScaleMatch[1]).toBe(noScaleMatch[1])
+      expect(withScaleMatch[2]).toBe(noScaleMatch[2])
+    }
+  })
+})