@lovett/ui 0.0.9 → 0.0.11

package/src/__tests__/tooltip.test.tsx

@@ -0,0 +1,355 @@
+/**
+ * Tooltip — hover / focus label on lib/anchor + lib/layer-stack.
+ *
+ * Contract under test: the child is the trigger (no wrapper), role=tooltip
+ * + aria-describedby wiring while open, the 300 ms hover delay and 0 ms
+ * close, immediate open on keyboard focus but NOT on pointer focus,
+ * press-to-dismiss, Escape through the layer stack (a tooltip in a Modal
+ * closes alone), never focusable / pointer-events none, controlled state,
+ * child handler + ref composition, and positioning with mocked geometry.
+ */
+import { createRef } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Modal from '../modal'
+import { Tooltip } from '../tooltip'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+const trigger = () => screen.getByRole('button', { name: 'Archive' })
+const tip = () => screen.getByRole('tooltip')
+const advance = (ms: number) =>
+  act(() => {
+    vi.advanceTimersByTime(ms)
+  })
+
+describe('Tooltip', () => {
+  let user: ReturnType<typeof userEvent.setup>
+  beforeEach(() => {
+    vi.useFakeTimers()
+    // RTL's asyncWrapper drains with a real setTimeout(0) unless it finds a
+    // jest-style advanceTimersByTime; without this shim every user-event
+    // call hangs under vitest fake timers.
+    vi.stubGlobal('jest', {
+      advanceTimersByTime: (ms: number) => vi.advanceTimersByTime(ms),
+    })
+    user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+
+  function Basic(props: Partial<React.ComponentProps<typeof Tooltip>> = {}) {
+    return (
+      <Tooltip content="Archive this task" {...props}>
+        <button type="button" aria-label="Archive">
+          A
+        </button>
+      </Tooltip>
+    )
+  }
+
+  describe('rendering', () => {
+    it('renders the child as-is: no wrapper, no tooltip, no aria-describedby while closed', () => {
+      const { container } = render(<Basic />)
+      expect(container.firstElementChild).toBe(trigger())
+      expect(screen.queryByRole('tooltip')).toBeNull()
+      expect(trigger()).not.toHaveAttribute('aria-describedby')
+    })
+
+    it('forwards the child ref', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(
+        <Tooltip content="x">
+          <button ref={ref} type="button" aria-label="Archive" />
+        </Tooltip>,
+      )
+      expect(ref.current).toBe(trigger())
+    })
+
+    it('throws for a non-element child', () => {
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      expect(() =>
+        render(
+          // @ts-expect-error — the contract is one element child; this pins the runtime guard.
+          <Tooltip content="x">plain text</Tooltip>,
+        ),
+      ).toThrow(/exactly one element child/)
+      spy.mockRestore()
+    })
+
+    it('with null content, the child passes through and nothing ever opens', async () => {
+      render(<Basic content={null} />)
+      await user.hover(trigger())
+      advance(1000)
+      expect(screen.queryByRole('tooltip')).toBeNull()
+    })
+  })
+
+  describe('hover', () => {
+    it('opens after the 300 ms delay, portaled to body, and wires aria-describedby', async () => {
+      const { container } = render(<Basic />)
+      await user.hover(trigger())
+      expect(screen.queryByRole('tooltip')).toBeNull()
+      advance(299)
+      expect(screen.queryByRole('tooltip')).toBeNull()
+      advance(1)
+      const t = tip()
+      expect(t).toHaveTextContent('Archive this task')
+      expect(t.parentElement).toBe(document.body)
+      expect(container.contains(t)).toBe(false)
+      expect(trigger()).toHaveAttribute('aria-describedby', t.id)
+      expect(t).toHaveAttribute('data-slot', 'tooltip')
+    })
+
+    it('closes immediately on unhover and drops aria-describedby', async () => {
+      render(<Basic />)
+      await user.hover(trigger())
+      advance(300)
+      expect(tip()).toBeInTheDocument()
+      await user.unhover(trigger())
+      expect(screen.queryByRole('tooltip')).toBeNull()
+      expect(trigger()).not.toHaveAttribute('aria-describedby')
+    })
+
+    it('leaving before the delay cancels the open', async () => {
+      render(<Basic />)
+      await user.hover(trigger())
+      advance(150)
+      await user.unhover(trigger())
+      advance(1000)
+      expect(screen.queryByRole('tooltip')).toBeNull()
+    })
+
+    it('honours custom openDelay / closeDelay', async () => {
+      render(<Basic openDelay={50} closeDelay={100} />)
+      await user.hover(trigger())
+      advance(50)
+      expect(tip()).toBeInTheDocument()
+      await user.unhover(trigger())
+      expect(tip()).toBeInTheDocument()
+      advance(100)
+      expect(screen.queryByRole('tooltip')).toBeNull()
+    })
+
+    it('merges an existing aria-describedby rather than replacing it', async () => {
+      render(
+        <>
+          <p id="hint">hint</p>
+          <Tooltip content="x">
+            <button type="button" aria-label="Archive" aria-describedby="hint" />
+          </Tooltip>
+        </>,
+      )
+      await user.hover(trigger())
+      advance(300)
+      expect(trigger().getAttribute('aria-describedby')).toBe(`hint ${tip().id}`)
+      await user.unhover(trigger())
+      expect(trigger()).toHaveAttribute('aria-describedby', 'hint')
+    })
+  })
+
+  describe('focus', () => {
+    it('opens immediately on keyboard focus and closes on blur', async () => {
+      render(
+        <>
+          <Basic />
+          <button type="button">Next</button>
+        </>,
+      )
+      await user.tab()
+      expect(document.activeElement).toBe(trigger())
+      expect(tip()).toBeInTheDocument()
+      expect(trigger()).toHaveAttribute('aria-describedby', tip().id)
+      await user.tab()
+      expect(screen.queryByRole('tooltip')).toBeNull()
+    })
+
+    it('a focus that arrives by pointer (a click) does not open it', async () => {
+      render(<Basic />)
+      await user.click(trigger())
+      expect(document.activeElement).toBe(trigger())
+      advance(1000)
+      expect(screen.queryByRole('tooltip')).toBeNull()
+    })
+
+    it('pressing the trigger dismisses an open tooltip', async () => {
+      render(<Basic />)
+      await user.hover(trigger())
+      advance(300)
+      expect(tip()).toBeInTheDocument()
+      await user.pointer({ keys: '[MouseLeft>]', target: trigger() })
+      expect(screen.queryByRole('tooltip')).toBeNull()
+      await user.pointer({ keys: '[/MouseLeft]', target: trigger() })
+    })
+
+    it('removes its document press listeners on release and on unmount (no stale closure per interrupted press)', async () => {
+      const added = vi.spyOn(document, 'addEventListener')
+      const removed = vi.spyOn(document, 'removeEventListener')
+      try {
+        const { unmount } = render(<Basic />)
+        const pressListeners = () =>
+          added.mock.calls.filter(([type]) => type === 'pointerup' || type === 'pointercancel')
+        const removedPressListeners = () =>
+          removed.mock.calls.filter(([type]) => type === 'pointerup' || type === 'pointercancel')
+
+        // A full press: the listeners go on at pointerdown and come off at pointerup.
+        await user.pointer({ keys: '[MouseLeft>]', target: trigger() })
+        expect(pressListeners()).toHaveLength(2)
+        await user.pointer({ keys: '[/MouseLeft]', target: trigger() })
+        expect(removedPressListeners().map(([, fn]) => fn)).toEqual(
+          pressListeners().map(([, fn]) => fn),
+        )
+
+        // An interrupted press: unmount mid-press must remove them too.
+        added.mockClear()
+        removed.mockClear()
+        await user.pointer({ keys: '[MouseLeft>]', target: trigger() })
+        expect(pressListeners()).toHaveLength(2)
+        unmount()
+        expect(removedPressListeners().map(([, fn]) => fn)).toEqual(
+          pressListeners().map(([, fn]) => fn),
+        )
+      } finally {
+        added.mockRestore()
+        removed.mockRestore()
+      }
+    })
+
+    it('never traps or moves focus: the tip is not focusable and does not take the pointer', async () => {
+      render(<Basic />)
+      await user.tab()
+      const t = tip()
+      expect(t).not.toHaveAttribute('tabindex')
+      expect(t).toHaveClass('pointer-events-none')
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('composes the child handlers', async () => {
+      const onFocus = vi.fn()
+      const onPointerEnter = vi.fn()
+      render(
+        <Tooltip content="x">
+          <button type="button" aria-label="Archive" onFocus={onFocus} onPointerEnter={onPointerEnter} />
+        </Tooltip>,
+      )
+      await user.hover(trigger())
+      await user.tab()
+      expect(onPointerEnter).toHaveBeenCalledTimes(1)
+      expect(onFocus).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Escape + layers', () => {
+    it('Escape dismisses and leaves focus where it was', async () => {
+      render(<Basic />)
+      await user.tab()
+      expect(tip()).toBeInTheDocument()
+      await user.keyboard('{Escape}')
+      expect(screen.queryByRole('tooltip')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('inside a Modal, Escape closes only the tooltip; the next Escape closes the modal', async () => {
+      const onClose = vi.fn()
+      render(
+        <Modal isOpen onClose={onClose} title="Settings">
+          <Basic />
+        </Modal>,
+      )
+      await user.hover(trigger())
+      advance(300)
+      expect(tip()).toBeInTheDocument()
+      await user.keyboard('{Escape}')
+      expect(screen.queryByRole('tooltip')).toBeNull()
+      expect(onClose).not.toHaveBeenCalled()
+      await user.keyboard('{Escape}')
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not listen for Escape while closed', async () => {
+      const onOpenChange = vi.fn()
+      render(<Basic onOpenChange={onOpenChange} />)
+      await user.keyboard('{Escape}')
+      expect(onOpenChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('controlled / uncontrolled', () => {
+    it('defaultOpen renders it open', () => {
+      render(<Basic defaultOpen />)
+      expect(tip()).toBeInTheDocument()
+    })
+
+    it('controlled `open` renders regardless of hover; onOpenChange reports intent', async () => {
+      const onOpenChange = vi.fn()
+      render(<Basic open={false} onOpenChange={onOpenChange} />)
+      await user.hover(trigger())
+      advance(300)
+      expect(onOpenChange).toHaveBeenCalledWith(true)
+      expect(screen.queryByRole('tooltip')).toBeNull()
+    })
+
+    it('controlled open=true shows it and unhover reports false', async () => {
+      const onOpenChange = vi.fn()
+      render(<Basic open onOpenChange={onOpenChange} />)
+      expect(tip()).toBeInTheDocument()
+      await user.hover(trigger())
+      await user.unhover(trigger())
+      expect(onOpenChange).toHaveBeenCalledWith(false)
+      expect(tip()).toBeInTheDocument()
+    })
+  })
+
+  describe('surface + positioning (mocked geometry)', () => {
+    let restore: () => void
+    beforeEach(() => {
+      restore = mockGeometry()
+      setViewport(1000, 800)
+    })
+    afterEach(() => restore())
+
+    it('sits above the trigger, centred, with the popover-family chrome and the entry motion', async () => {
+      render(
+        <Tooltip content="x" className="mine">
+          <button type="button" aria-label="Archive" data-rect="400,300,80,32" />
+        </Tooltip>,
+      )
+      await user.tab()
+      const t = tip()
+      expect(t.style.position).toBe('fixed')
+      expect(t).toHaveAttribute('data-side', 'top')
+      expect(t).toHaveAttribute('data-align', 'center')
+      expect(t.style.left).toBe('440px')
+      expect(t.style.top).toBe(`${300 - 6}px`)
+      expect(t).toHaveAttribute('data-positioned', 'true')
+      expect(t).toHaveClass('ds-enter-pop', 'mine')
+      expect(t.style.background).toContain('--popover')
+      expect(t.style.padding).toContain('--space-1')
+    })
+
+    it('flips below the trigger at the top of the viewport', async () => {
+      render(
+        <Tooltip content="x">
+          <button type="button" aria-label="Archive" data-rect="400,4,80,32" />
+        </Tooltip>,
+      )
+      await user.tab()
+      expect(tip()).toHaveAttribute('data-side', 'bottom')
+      expect(tip().style.top).toBe(`${4 + 32 + 6}px`)
+    })
+
+    it('honours side / align / offset', async () => {
+      render(
+        <Tooltip content="x" side="right" align="start" offset={10}>
+          <button type="button" aria-label="Archive" data-rect="400,300,80,32" />
+        </Tooltip>,
+      )
+      await user.tab()
+      expect(tip()).toHaveAttribute('data-side', 'right')
+      expect(tip().style.left).toBe(`${480 + 10}px`)
+      expect(tip().style.top).toBe('300px')
+    })
+  })
+})

package/src/calculator-shell-v2.tsx

@@ -11,6 +11,9 @@
  *   layout="shell" (default) — a single contained card (radius 24,
  *     --shell-shadow): flat header + padded body + bordered footer.
  *     For compact calculators.
+ *   Responsive (ADR-145 amendment): header / body / footer tighten to
+ *     16px padding below `sm` and the footer wraps, so a calculator reads
+ *     on a phone without the shell owning any width logic.
  *   layout="open" — the header becomes a rounded banner and the Frames
  *     sit directly on the page in a vertical stack; the footer is
  *     borderless/transparent. Scales to long forms (funnels).
@@ -21,17 +24,18 @@
  * `[lead, accentWord]` tuple for explicit control. No completion ring.
  *
  * Data seam (D9): `prefill` + `benchmarkSlot` are accepted but STUBBED
- * this ADR — `prefill` is typed and not read. Per ADR-076 Amendment 1 E,
- * `benchmarkSlot` now renders a muted "Benchmark unavailable in manual
- * mode" placeholder when absent (was: nothing). The live data wiring is a
- * separate future ADR.
+ * this ADR — `prefill` is typed and not read; `benchmarkSlot` renders only
+ * when a caller passes one. (ADR-076 Amendment 1 E's "Benchmark unavailable
+ * in manual mode" placeholder was retired by owner directive 2026-09-04 —
+ * ADR-145 amendment: a permanent "unavailable" strip on every calculator
+ * read as broken, not promising.) The live data wiring is a separate
+ * future ADR.
  *
  * Amendment 1 additions (2026-06-05):
  *   - `assumptions` (B) — manual-vs-connected inputs, "directional planning
  *     math, not observed performance," and the config/formula version.
  *     Rendered as a compact hover popover in the FOOTER (next to the footer
  *     note), not a body strip, so honest framing never lengthens the shell.
- *   - benchmark placeholder (E) — see above.
  *   - `copyReport` (F) — the footer Copy action emits a structured
  *     mini-report (inputs + result + StatRow chain + assumptions +
  *     benchmark status), not the bare number. Shell-owned so every
@@ -39,7 +43,7 @@
  */
 
 import { useState, type CSSProperties, type ReactNode } from 'react'
-import { BarChart3, Copy, Info } from 'lucide-react'
+import { Copy, Info } from 'lucide-react'
 import { Button } from './button'
 import { toast } from './toast'
 
@@ -90,8 +94,8 @@ export interface CalculatorShellV2Props {
   copyReport?: string | (() => string)
   /** STUBBED (D9) — typed, not read this ADR. */
   prefill?: CalcPrefill
-  /** "vs. benchmark" rail. When absent, the shell renders a muted
-   *  "Benchmark unavailable in manual mode" placeholder (Amendment 1 E). */
+  /** "vs. benchmark" rail. Rendered only when provided (the Amendment 1 E
+   *  placeholder is retired — ADR-145 amendment). */
   benchmarkSlot?: ReactNode
 }
 
@@ -119,29 +123,6 @@ function HeaderTitle({ title }: { title: string | [string, string] }) {
   )
 }
 
-/** Muted rail shown in place of `benchmarkSlot` until the benchmark data
- *  layer exists (Amendment 1 E) — reinforces the data-backed promise. */
-function BenchmarkPlaceholder() {
-  return (
-    <div
-      className="flex items-center"
-      style={{
-        gap: 10,
-        padding: '12px 16px',
-        borderRadius: 'var(--radius-lg)',
-        background: 'rgb(var(--muted))',
-        border: '1px dashed rgb(var(--border))',
-        color: 'rgb(var(--text-muted))',
-      }}
-    >
-      <BarChart3 size={15} />
-      <span style={{ fontSize: 12, fontWeight: 500 }}>
-        Benchmark unavailable in manual mode
-      </span>
-    </div>
-  )
-}
-
 /** Footer assumptions affordance (Amendment 1 B). A compact "Assumptions"
  *  trigger that reveals the full disclaimer in a hover/focus popover. The
  *  popover is absolutely positioned, so it never lengthens the shell — the
@@ -237,10 +218,9 @@ export function CalculatorShellV2({
 
   const header = (
     <header
-      className="flex items-center"
+      className="flex items-center px-4 py-4 sm:px-6 sm:py-5"
       style={{
         gap: 16,
-        padding: '20px 24px',
         background: 'rgb(var(--brand-ink))',
         borderRadius: isOpen ? 'var(--radius-xl)' : 0,
       }}
@@ -260,7 +240,8 @@ export function CalculatorShellV2({
       </span>
       <div className="flex-1 min-w-0">
         <div
-          className="font-semibold uppercase"
+          className="font-semibold uppercase truncate"
+          title={eyebrow}
           style={{
             fontFamily: 'var(--font-mono)',
             fontSize: 11,
@@ -287,10 +268,9 @@ export function CalculatorShellV2({
 
   const footer = (
     <footer
-      className="flex items-center"
+      className="flex flex-wrap items-center px-4 py-4 sm:px-6"
       style={{
         gap: 12,
-        padding: '16px 24px',
         borderTop: isOpen ? 'none' : '1px solid rgb(var(--border))',
         marginTop: isOpen ? 4 : 0,
         background: isOpen ? 'transparent' : 'rgb(var(--bg-card))',
@@ -336,7 +316,7 @@ export function CalculatorShellV2({
     <>
       {inputs}
       {result}
-      {benchmarkSlot ?? <BenchmarkPlaceholder />}
+      {benchmarkSlot}
     </>
   )
 
@@ -367,8 +347,8 @@ export function CalculatorShellV2({
         >
           {header}
           <div
-            className="flex flex-col"
-            style={{ padding: 'var(--space-6)', gap: 'var(--space-4)' }}
+            className="flex flex-col p-4 sm:p-6"
+            style={{ gap: 'var(--space-4)' }}
           >
             {body}
           </div>

package/src/code-block.tsx

@@ -12,32 +12,21 @@
 import { useEffect, useState, type HTMLAttributes } from 'react'
 import { Check, Copy } from 'lucide-react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
-// The `/index.js` is REQUIRED and is not a style preference.
-//
-// `react-syntax-highlighter/dist/esm/styles/prism` is a DIRECTORY. Vite's
-// resolver follows a directory import; **Node's ESM resolver does not**, and
-// `tsup` externalises this specifier verbatim into `dist/index.js`. So the
-// package built green and published, and any consumer loading it under Node ESM
-// — vitest, most obviously — failed at IMPORT, before a single assertion ran.
-//
-// Reported by the studios plane against `@lovett/ui@0.0.7` and reproduced from
-// the registry: two of three suites failed to load, not to assert. A green build
-// and dead tests, with nothing connecting the two facts.
-import { vscDarkPlus, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism/index.js'
-
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash.js'
-import css from 'react-syntax-highlighter/dist/esm/languages/prism/css.js'
-import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff.js'
-import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js'
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json.js'
-import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx.js'
-import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown.js'
-import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup.js'
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python.js'
-import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql.js'
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx.js'
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js'
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml.js'
+import { vscDarkPlus, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash'
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css'
+import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff'
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json'
+import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
+import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown'
+import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup'
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python'
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql'
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml'
 
 import { cn } from './lib/utils'