@hanzogui/kitchen-sink 3.0.5

package/tests/TooltipPositionJumpNotes.md

@@ -0,0 +1,219 @@
+# Motion Driver Tooltip Position Jump Bug
+
+## Problem Summary
+
+When using `animatePosition` with a shared tooltip (scope pattern) in the motion driver, rapidly moving between triggers causes the tooltip to JUMP to a wrong position (often far left or near origin) before animating back.
+
+## Reproduction Pattern
+
+1. Hover on rightmost button (HIRE US), wait ~1 second for tooltip to fully appear
+2. Move mouse FAST to the left, briefly hitting the middle button (BENTO)
+3. Within ~33ms (1 frame at 30fps), continue to the leftmost button (TAKEOUT)
+4. The tooltip JUMPS to wrong position then animates back
+
+## Video Analysis (CleanShot 2026-01-22 at 22.46.02.mp4)
+
+- **Frame rate**: 30fps (~33ms per frame)
+- **Frame 50**: User leaves the left button (TAKEOUT), moving right
+- **Frame 56**: Tooltip correctly positioned below middle button (COPY-PASTE UI / BENTO), shows "Bento — Free + paid pre-made UI"
+- **Frame 57**: **THE JUMP** - Tooltip jumps to wrong position overlapping the buttons, text changes to "Takeout — universal RN starter kit"
+- **Jump characteristics**: ~100px UP in Y, shifted left in X, happens in exactly 1 frame
+
+## Timing Constraints
+
+- Total movement time: ~50-150ms for the bug to trigger
+- Key factor: Brief hover on middle button (~33ms) then immediately to left button
+- The bug seems to occur when animation is interrupted mid-flight by rapid position changes
+
+## Affected Code
+
+- `/code/core/animations-motion/src/createAnimations.tsx` - Motion driver implementation
+- `/code/ui/popper/src/Popper.tsx` - PopperContent handles position with floating-ui
+- `flushAnimation()` - handles animation updates
+- `getDiff()` - computes what properties changed
+
+## Files for Reproduction
+
+- `/code/gui.hanzo.ai/features/site/home/PromoLinksRow.tsx` - Original component with the bug
+- `/code/kitchen-sink/src/usecases/TooltipPositionJumpCase.tsx` - Test case
+- `/code/kitchen-sink/scripts/repro-tooltip-jump.ts` - Playwright reproduction script
+
+## Jump Detection Criteria
+
+- dx > 300px or dy > 300px in a single frame
+- Jump from reasonable position (x > 100, y > 100) to near origin (x < 50 or y < 50)
+
+## Previous Fix Attempts
+
+1. Parsed matrix transform to find X/Y - broke other animations (immediate movement instead of animated)
+2. Issue: Hard to distinguish between legitimate position changes and bug jumps
+
+## Hypothesis
+
+The motion driver's animation state gets out of sync when:
+
+1. Animation A starts (moving to middle button position)
+2. Before A completes, animation B starts (moving to left button position)
+3. The animation system calculates diff from wrong base position (possibly 0,0 or stale value)
+4. Result: Large jump because diff is computed against wrong starting point
+
+## Testing Notes
+
+- Bug is **motion-driver specific** - other drivers (css, native, reanimated) may not have this issue
+- Run kitchen-sink on port 9000: `yarn start:web`
+- Run gui.hanzo.ai on port 8282: `yarn dev --port 8282` (v2 branch)
+- Animation driver can be changed via URL param or config
+
+## Playwright Reproduction Results (SUCCESS!)
+
+Script: `/code/kitchen-sink/scripts/repro-tooltip-jump.ts`
+
+**Attempt 2 detected 2 jumps:**
+
+1. `(0,-4) -> (609,162)` delta:(609,166) - Tooltip appearing (expected, from initial position)
+2. `(609,166) -> (106,36)` delta:(503,130) - **THE BUG!** Jump from correct position to near-origin
+
+The second jump is the bug - tooltip goes from reasonable position (609,166) to near-origin (106,36) in one frame.
+
+## Analysis So Far
+
+### The Jump Pattern
+
+- Consistent reproduction: `(609,166) -> (~127-195, ~42-65)`
+- Jump goes TO LEFT and UP (toward origin direction)
+- Target X (~127-195) is LESS than leftmost button X (393)
+- This suggests animation is computing from WRONG starting position
+
+### Code Flow
+
+1. `flushAnimation()` is called when position changes
+2. `getDiff()` computes changed properties (e.g., `{ x: newValue }`)
+3. `animate(scope.current, diff, animationOptions)` animates element
+4. Motion library reads current transform and animates TO the diff target
+
+### Hypothesis: Transform State Corruption
+
+When rapidly changing triggers:
+
+1. Animation A starts: x 609 → 537 (HIRE → BENTO)
+2. Before A completes, Animation B starts: x → 393 (to TAKEOUT)
+3. Motion reads current transform which may be in corrupted/transitional state
+4. Animation animates from wrong value causing visual jump
+
+### Attempted Fixes
+
+1. `controls.current.complete()` before new animation - didn't help (bundled server issue)
+2. Need to verify fix actually reaches browser
+
+### Debugging Challenge
+
+- gui.hanzo.ai on 8282 uses bundled code, doesn't pick up local changes
+- kitchen-sink on 9000 doesn't trigger tooltips in headless mode
+- Need to either fix bundling or find different test approach
+
+## Key Discovery - Transform Jump Pattern
+
+From Playwright reproduction, the transform jumps like this:
+
+```
+Before: matrix(1, 0, 0, 1, 609, 166)
+After:  matrix(1, 0, 0, 1, 128, 43)
+```
+
+This happens in ONE FRAME, not animated. The motion library's `animate()` is supposed to animate from the current position to the target, but it's snapping instantly.
+
+## Root Cause Analysis
+
+The jump happens when:
+
+1. Animation A is running (tooltip moving from trigger 1 to trigger 2)
+2. Animation B starts immediately (tooltip should move from trigger 2 to trigger 3)
+3. Motion's animate() gets called with just the DIFF (new target values)
+4. BUT the animation starts from the WRONG position (possibly 0,0 or stale value)
+
+Potential causes:
+
+1. Motion library reads stale transform when animation is in flight
+2. Something clears/resets the element's transform before motion reads it
+3. The `controls.current.stop()` or animation interruption isn't working correctly
+4. Race condition between animation frames and new animation start
+
+## Files Involved
+
+- `/code/core/animations-motion/src/createAnimations.tsx` - Motion driver
+  - `flushAnimation()` - Called when position changes
+  - `getDiff()` - Calculates what properties changed
+  - `animate(scope.current, diff, animationOptions)` - Starts animation
+
+- `/code/ui/popper/src/Popper.tsx` - PopperContent
+  - `animatePosition` prop enables x/y animation
+  - Passes x/y from floating-ui to the animated element
+
+## TODO
+
+- [x] Reliably reproduce with Playwright script (1 iteration = 1 jump)
+- [ ] Verify other drivers don't have this issue
+- [x] Add debug logging to trace values during jump
+- [x] Test with `controls.current.stop()` before new animation (implemented)
+- [ ] Consider using motion's `useMotionValue` for x/y instead of animate()
+- [ ] Fix without breaking normal animations
+- [ ] **FINAL STEP**: Create standalone reproduction repo and open PR on https://github.com/motiondivision/motion (n8 knows matt the author, highly responsive to thorough repros)
+
+## FINAL FIX (in createAnimations.tsx)
+
+The fix handles position animation interruptions by:
+
+1. Detecting when a transform with translate is changing
+2. Reading the current animated position BEFORE calling stop() (important - stop() resets it!)
+3. Using keyframes to explicitly animate FROM current position TO target
+
+```typescript
+const hasTransformWithTranslate =
+  typeof diff.transform === 'string' && diff.transform.includes('translate')
+
+if (hasTransformWithTranslate && controls.current) {
+  // IMPORTANT: Read transform BEFORE stopping - stop() may reset it!
+  const computedStyle = getComputedStyle(node)
+  const currentTransform = computedStyle.transform
+
+  controls.current.stop()
+
+  // set transform to captured value to prevent flicker
+  node.style.transform = currentTransform
+  node.offsetHeight // force reflow
+
+  if (currentTransform && currentTransform !== 'none') {
+    // extract current position from matrix(1, 0, 0, 1, tx, ty)
+    const matrixMatch = currentTransform.match(
+      /matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/
+    )
+    if (matrixMatch) {
+      const currentX = parseFloat(matrixMatch[1])
+      const currentY = parseFloat(matrixMatch[2])
+
+      // build start transform from current animated position
+      const startTransform = `translateX(${currentX}px) translateY(${currentY}px)`
+      const targetTransform = diff.transform as string
+
+      // use keyframes to animate from current position to target
+      const keyframeDiff = { ...diff }
+      keyframeDiff.transform = [startTransform, targetTransform]
+
+      controls.current = animate(scope.current, keyframeDiff, animationOptions)
+      return
+    }
+  }
+}
+```
+
+## Key Insights
+
+1. **Gui converts x/y props to CSS transform**: When you use `x={100}`, Hanzo GUI converts it to `transform: translateX(100px)` before passing to the motion driver.
+
+2. **motion's stop() resets the transform**: When you call `controls.current.stop()`, the element's transform may reset to `matrix(1, 0, 0, 1, 0, 0)`. You MUST read the current position BEFORE calling stop().
+
+3. **Keyframes work for smooth interruption**: By using `transform: [startTransform, targetTransform]` as keyframes, motion knows exactly where to start from and animate to, preventing jumps.
+
+## Motion Version
+
+- Upgraded to motion 12.29.0 (from 12.28.1) on 2026-01-22

package/tests/TooltipRapidSwitch.animated.test.tsx

@@ -0,0 +1,399 @@
+import { expect, test, type CDPSession, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// helper: use CDP Input.dispatchMouseEvent to simulate rapid mouse movement
+// this generates real browser-level input events at high frequency,
+// unlike Playwright's mouse.move which uses a synthetic approach
+async function cdpMouseMove(
+  cdp: CDPSession,
+  fromX: number,
+  fromY: number,
+  toX: number,
+  toY: number,
+  steps: number,
+  delayMs = 2
+) {
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps
+    const x = Math.round(fromX + (toX - fromX) * t)
+    const y = Math.round(fromY + (toY - fromY) * t)
+    await cdp.send('Input.dispatchMouseEvent', {
+      type: 'mouseMoved',
+      x,
+      y,
+      button: 'none',
+      modifiers: 0,
+    })
+    if (delayMs > 0 && i < steps) {
+      await new Promise((r) => setTimeout(r, delayMs))
+    }
+  }
+}
+
+async function getTriggerCenter(page: Page, id: string) {
+  const box = await page.locator(`#${id}`).boundingBox()
+  if (!box) throw new Error(`trigger #${id} not found`)
+  return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+}
+
+test.describe('Tooltip rapid trigger switch bugs', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'TooltipMultiTriggerCase',
+      type: 'useCase',
+    })
+    await page.waitForLoadState('networkidle')
+  })
+
+  test('enter animation completes to full opacity after rapid CDP trigger switch', async ({
+    page,
+  }) => {
+    const content = page.locator('#tip-content')
+    const cdp = await page.context().newCDPSession(page)
+
+    const a = await getTriggerCenter(page, 'tip-trigger-a')
+    const c = await getTriggerCenter(page, 'tip-trigger-c')
+
+    // move into trigger A to start tooltip enter animation
+    await cdpMouseMove(cdp, a.x - 50, a.y, a.x, a.y, 10, 2)
+
+    // wait just enough for tooltip to mount and enter animation to start
+    // but NOT enough for it to complete (~medium transition is 200-300ms)
+    await page.waitForTimeout(60)
+
+    // rapidly sweep to trigger C — this should NOT interrupt the enter animation
+    // use many small steps to pass through the gap between triggers,
+    // which may briefly trigger mouseleave on A before mouseenter on C
+    await cdpMouseMove(cdp, a.x, a.y, c.x, c.y, 30, 1)
+
+    // wait for all animations to settle
+    await page.waitForTimeout(800)
+
+    await expect(content).toBeVisible({ timeout: 3000 })
+
+    const opacity = await content.evaluate((el) => {
+      return parseFloat(getComputedStyle(el).opacity)
+    })
+    expect(
+      opacity,
+      `tooltip should be fully opaque after trigger switch, got ${opacity}`
+    ).toBeGreaterThan(0.95)
+  })
+
+  test('enter animation completes when trigger switch happens during first 50ms', async ({
+    page,
+  }) => {
+    const content = page.locator('#tip-content')
+    const cdp = await page.context().newCDPSession(page)
+
+    const a = await getTriggerCenter(page, 'tip-trigger-a')
+    const b = await getTriggerCenter(page, 'tip-trigger-b')
+    const c = await getTriggerCenter(page, 'tip-trigger-c')
+
+    // rapidly sweep across all three triggers without pausing
+    // this creates the pattern: enter A → leave A → enter B → leave B → enter C
+    // all within ~100ms total, well within the enter animation duration
+    await cdpMouseMove(cdp, a.x - 30, a.y, a.x, a.y, 5, 1)
+    await cdpMouseMove(cdp, a.x, a.y, b.x, b.y, 8, 1)
+    await cdpMouseMove(cdp, b.x, b.y, c.x, c.y, 8, 1)
+
+    // wait for animations to settle
+    await page.waitForTimeout(800)
+
+    await expect(content).toBeVisible({ timeout: 3000 })
+
+    const opacity = await content.evaluate((el) =>
+      parseFloat(getComputedStyle(el).opacity)
+    )
+    expect(
+      opacity,
+      `tooltip should be fully opaque after rapid 3-trigger sweep, got ${opacity}`
+    ).toBeGreaterThan(0.95)
+
+    // also check the y transform isn't stuck at an intermediate value
+    const transform = await content.evaluate((el) => getComputedStyle(el).transform)
+    if (transform && transform !== 'none') {
+      // extract translateY from matrix — matrix(a,b,c,d,tx,ty)
+      const match = transform.match(/matrix\(([^)]+)\)/)
+      if (match) {
+        const values = match[1].split(',').map(Number)
+        const ty = values[5] // translateY component
+        // the enter animation goes from y:-4 to y:0, so ty should be close
+        // to the final popper-calculated position, not stuck at an offset
+        // we can't know the exact value, but it should NOT be NaN
+        expect(Number.isNaN(ty), 'transform should not be NaN').toBe(false)
+      }
+    }
+  })
+
+  test('enter animation completes after rapid back-and-forth CDP sweep', async ({
+    page,
+  }) => {
+    const content = page.locator('#tip-content')
+    const cdp = await page.context().newCDPSession(page)
+
+    const a = await getTriggerCenter(page, 'tip-trigger-a')
+    const c = await getTriggerCenter(page, 'tip-trigger-c')
+
+    // move into trigger A
+    await cdpMouseMove(cdp, a.x - 50, a.y, a.x, a.y, 8, 2)
+    await page.waitForTimeout(40)
+
+    // rapid sweep: A → C → A → C (mimics real fast back-and-forth)
+    await cdpMouseMove(cdp, a.x, a.y, c.x, c.y, 12, 1)
+    await page.waitForTimeout(20)
+    await cdpMouseMove(cdp, c.x, c.y, a.x, a.y, 12, 1)
+    await page.waitForTimeout(20)
+    await cdpMouseMove(cdp, a.x, a.y, c.x, c.y, 12, 1)
+
+    // wait for animations to settle
+    await page.waitForTimeout(800)
+
+    await expect(content).toBeVisible({ timeout: 3000 })
+
+    const opacity = await content.evaluate((el) =>
+      parseFloat(getComputedStyle(el).opacity)
+    )
+    expect(
+      opacity,
+      `tooltip should be fully opaque after rapid sweep, got ${opacity}`
+    ).toBeGreaterThan(0.95)
+  })
+
+  test('enter animation completes after zero-delay CDP trigger switch', async ({
+    page,
+  }) => {
+    // the stuck-opacity bug requires switching triggers during the very
+    // first frames of the enter animation — use zero delay between events
+    const content = page.locator('#tip-content')
+    const cdp = await page.context().newCDPSession(page)
+
+    const a = await getTriggerCenter(page, 'tip-trigger-a')
+    const b = await getTriggerCenter(page, 'tip-trigger-b')
+    const c = await getTriggerCenter(page, 'tip-trigger-c')
+
+    // move into trigger A with zero-delay CDP events (maximum speed)
+    await cdpMouseMove(cdp, a.x - 30, a.y, a.x, a.y, 5, 0)
+
+    // no wait at all — switch to C immediately while tooltip is still mounting
+    await cdpMouseMove(cdp, a.x, a.y, c.x, c.y, 20, 0)
+
+    // wait for enter animation to complete
+    await page.waitForTimeout(800)
+
+    // check content visibility and opacity
+    const isVisible = await content.isVisible().catch(() => false)
+    if (!isVisible) {
+      // tooltip might have closed — re-hover trigger C to reopen
+      await cdpMouseMove(cdp, c.x - 20, c.y, c.x, c.y, 5, 1)
+      await page.waitForTimeout(800)
+    }
+
+    await expect(content).toBeVisible({ timeout: 3000 })
+    const opacity = await content.evaluate((el) =>
+      parseFloat(getComputedStyle(el).opacity)
+    )
+    expect(
+      opacity,
+      `tooltip should be fully opaque after zero-delay switch, got ${opacity}`
+    ).toBeGreaterThan(0.95)
+  })
+
+  test('enter animation completes after immediate A→B→C sweep with no pauses', async ({
+    page,
+  }) => {
+    // simulate "as fast as possible" trigger switching — all events
+    // dispatched with 0ms delay between steps
+    const content = page.locator('#tip-content')
+    const cdp = await page.context().newCDPSession(page)
+
+    const a = await getTriggerCenter(page, 'tip-trigger-a')
+    const b = await getTriggerCenter(page, 'tip-trigger-b')
+    const c = await getTriggerCenter(page, 'tip-trigger-c')
+
+    // blast through all triggers at maximum CDP speed
+    await cdpMouseMove(cdp, a.x - 20, a.y, a.x, a.y, 3, 0)
+    await cdpMouseMove(cdp, a.x, a.y, b.x, b.y, 5, 0)
+    await cdpMouseMove(cdp, b.x, b.y, c.x, c.y, 5, 0)
+
+    // wait for animations
+    await page.waitForTimeout(800)
+
+    await expect(content).toBeVisible({ timeout: 3000 })
+    const opacity = await content.evaluate((el) =>
+      parseFloat(getComputedStyle(el).opacity)
+    )
+    expect(
+      opacity,
+      `tooltip should be fully opaque after instant A→B→C sweep, got ${opacity}`
+    ).toBeGreaterThan(0.95)
+  })
+
+  test('tooltip does not flash to position (0,0) during rapid trigger switching', async ({
+    page,
+  }) => {
+    // capture motion driver debug logs
+    const motionLogs: string[] = []
+    page.on('console', (msg) => {
+      const text = msg.text()
+      if (text.includes('[motion-debug-popper]')) {
+        motionLogs.push(text)
+      }
+    })
+
+    const content = page.locator('#tip-content')
+    const cdp = await page.context().newCDPSession(page)
+
+    const a = await getTriggerCenter(page, 'tip-trigger-a')
+    const c = await getTriggerCenter(page, 'tip-trigger-c')
+
+    // start by hovering trigger A to open tooltip
+    await cdpMouseMove(cdp, a.x - 50, a.y, a.x, a.y, 10, 2)
+    await page.waitForTimeout(300) // let tooltip fully open and enter animation complete
+
+    // enable animation driver debug logging
+    await page.evaluate(() => {
+      ;(window as any).__motionDebug = true
+      ;(window as any).__motionDebugLog = []
+    })
+
+    // intercept style.transform writes on the outer position element
+    await page.evaluate(() => {
+      const inner = document.getElementById('tip-content')
+      if (!inner) return
+      const outer = (inner.closest('[data-popper-animate-position]') ||
+        inner.parentElement) as HTMLElement | null
+      if (!outer) return
+      ;(window as any).__transformWriteLog = []
+      const log = (window as any).__transformWriteLog
+      const realDescriptor = Object.getOwnPropertyDescriptor(
+        CSSStyleDeclaration.prototype,
+        'transform'
+      )
+      if (!realDescriptor) return
+      Object.defineProperty(outer.style, 'transform', {
+        get() {
+          return realDescriptor.get!.call(this)
+        },
+        set(value: string) {
+          log.push({
+            value: String(value).substring(0, 100),
+            t: performance.now(),
+            stack: new Error().stack?.split('\n').slice(1, 5).join(' | '),
+          })
+          return realDescriptor.set!.call(this, value)
+        },
+        configurable: true,
+      })
+    })
+
+    // set up in-browser rAF monitoring for highest fidelity
+    // monitor BOTH the inner content element AND the outer position wrapper
+    await page.evaluate(() => {
+      const inner = document.getElementById('tip-content')
+      if (!inner) return
+      // the outer position wrapper has data-popper-animate-position
+      const outer = (inner.closest('[data-popper-animate-position]') ||
+        inner.parentElement) as HTMLElement | null
+      ;(window as any).__posLog = []
+      ;(window as any).__transformLog = []
+      ;(window as any).__outerLog = []
+      const log = (window as any).__posLog
+      const tLog = (window as any).__transformLog
+      const oLog = (window as any).__outerLog
+      function sample() {
+        if (!inner || !inner.isConnected) return
+        const rect = inner.getBoundingClientRect()
+        log.push({ x: rect.x, y: rect.y, t: performance.now() })
+        tLog.push({
+          inline: inner.style.transform,
+          computed: getComputedStyle(inner).transform,
+          t: performance.now(),
+        })
+        if (outer && outer.isConnected) {
+          const outerRect = outer.getBoundingClientRect()
+          oLog.push({
+            x: outerRect.x,
+            y: outerRect.y,
+            inlineTransform: outer.style.transform,
+            computedTransform: getComputedStyle(outer).transform,
+            popperX: outer.getAttribute('data-popper-x'),
+            popperY: outer.getAttribute('data-popper-y'),
+            effX: outer.getAttribute('data-popper-eff-x'),
+            effY: outer.getAttribute('data-popper-eff-y'),
+            positioned: outer.getAttribute('data-popper-positioned'),
+            t: performance.now(),
+          })
+        }
+        requestAnimationFrame(sample)
+      }
+      requestAnimationFrame(sample)
+    })
+
+    // rapid back-and-forth sweeps
+    for (let i = 0; i < 4; i++) {
+      await cdpMouseMove(cdp, a.x, a.y, c.x, c.y, 10, 1)
+      await page.waitForTimeout(10)
+      await cdpMouseMove(cdp, c.x, c.y, a.x, a.y, 10, 1)
+      await page.waitForTimeout(10)
+    }
+
+    // wait for animations to settle
+    await page.waitForTimeout(500)
+
+    // collect results
+    const { posLog, transformLog, outerLog } = await page.evaluate(() => ({
+      posLog: (window as any).__posLog as { x: number; y: number; t: number }[],
+      transformLog: (window as any).__transformLog as {
+        inline: string
+        computed: string
+        t: number
+      }[],
+      outerLog: (window as any).__outerLog as {
+        x: number
+        y: number
+        inlineTransform: string
+        computedTransform: string
+        classList: string
+        t: number
+      }[],
+    }))
+
+    // check for (0,0) flashes — tooltip triggers are far from origin
+    const flashToOrigin = posLog.filter(
+      (p) => p.x >= 0 && p.x < 20 && p.y >= 0 && p.y < 20
+    )
+
+    // log diagnostic info for debugging
+    if (flashToOrigin.length > 0) {
+      const firstFlash = flashToOrigin[0]
+      const flashIdx = posLog.indexOf(firstFlash)
+      const context = posLog.slice(Math.max(0, flashIdx - 2), flashIdx + 3)
+      const tContext = transformLog.slice(Math.max(0, flashIdx - 2), flashIdx + 3)
+      console.log('flash context (positions):', JSON.stringify(context))
+      console.log('flash context (transforms):', JSON.stringify(tContext))
+      // show outer element state around the flash
+      const oContext = outerLog.slice(Math.max(0, flashIdx - 2), flashIdx + 3)
+      console.log('flash context (outer element):', JSON.stringify(oContext))
+      // dump transform write logs — these show WHO writes to style.transform
+      const writeLogs = await page.evaluate(
+        () => (window as any).__transformWriteLog || []
+      )
+      // show writes around the flash time
+      const flashT = firstFlash.t
+      const nearFlash = writeLogs.filter((w: any) => Math.abs(w.t - flashT) < 50)
+      console.log(
+        `transform writes near flash (${nearFlash.length} of ${writeLogs.length}):`
+      )
+      for (const w of nearFlash.slice(0, 15)) {
+        console.log(`  t=${w.t.toFixed(1)} val=${w.value}`)
+        console.log(`    ${w.stack}`)
+      }
+    }
+
+    expect(
+      flashToOrigin.length,
+      `tooltip should never flash to (0,0), found ${flashToOrigin.length} occurrences`
+    ).toBe(0)
+  })
+})

package/tests/TooltipTriggerInline.test.tsx

@@ -0,0 +1,65 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('TooltipTrigger display inline', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'TooltipTriggerInlineCase', type: 'useCase' })
+  })
+
+  test('tooltip trigger with display="inline" renders inline', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('inline-tooltip-trigger')
+    await expect(trigger).toBeVisible()
+
+    // Check that the trigger has inline display
+    const display = await trigger.evaluate((el) => {
+      return window.getComputedStyle(el).display
+    })
+
+    // Should be inline, inline-block, or inline-flex - not block/flex
+    expect(display).toMatch(/^inline/)
+  })
+
+  test('inline tooltip triggers appear within text flow', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('inline-tooltip-trigger')
+    const text = page.getByTestId('inline-tooltip-text')
+
+    // The trigger and its text should be visible
+    await expect(trigger).toBeVisible()
+    await expect(text).toBeVisible()
+
+    // The text content should be inline within the paragraph
+    const triggerBox = await trigger.boundingBox()
+    const textBox = await text.boundingBox()
+
+    // Text should be contained within or equal to trigger bounds
+    expect(triggerBox).toBeTruthy()
+    expect(textBox).toBeTruthy()
+  })
+
+  test('tooltip still works with inline display', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('inline-tooltip-trigger')
+    const content = page.getByTestId('inline-tooltip-content')
+
+    // Initially content should not be visible
+    await expect(content).not.toBeVisible()
+
+    // Hover over trigger to show tooltip
+    await trigger.hover()
+
+    // Wait for tooltip to appear
+    await expect(content).toBeVisible({ timeout: 5000 })
+
+    // Move away from trigger
+    await page.mouse.move(0, 0)
+
+    // Wait for tooltip to hide
+    await page.waitForTimeout(500)
+    await expect(content).not.toBeVisible()
+  })
+})