@lovett/ui 0.0.10 → 0.1.0

package/src/delta-chip.tsx

@@ -0,0 +1,263 @@
+/**
+ * DeltaChip — the period-over-period change chip that sits beside a KPI value.
+ *
+ * Promoted in ADR-146 D5 (stat layer). It subsumes three independent forks
+ * that were all the same `ArrowUp` / `ArrowDown` / `Minus` ternary:
+ *
+ *   • `Delta`  — `components/ui/admin/stat-tile.tsx:10`   (percent, `--success`/`--destructive` ink, no fill)
+ *   • `DeltaChip` — `design-system/spec/shell-preview.tsx:254` (tinted fill, no border, up/down only — no flat)
+ *   • `Trend`  — `components/ui/community/primitives.tsx:117` (absolute count, down painted MUTED not red)
+ *
+ * Between them they cover percent, absolute and flat, so this primitive
+ * covers all three.
+ *
+ * CONSUMERS — measured 2026-09-06 (real `from '@lovett/ui'` imports under
+ * `apps/workspace/src`; the design-system gallery is a demo harness and does
+ * NOT count toward the ADR-008 D3 gate).
+ *   TODAY (1 direct — gate NOT MET):
+ *     • `components/ui/community/leaderboard.tsx` — points trend, absolute
+ *   INDIRECT, and deliberately not counted: `components/ui/admin/stat-tile.tsx`
+ *   renders one, but through `StatCard`'s `delta` prop — it never imports
+ *   `DeltaChip`, so it is not a second direct consumer.
+ *   PLANNED: no second direct consumer is named yet. The `Delta` fork above
+ *   is deleted; the `DeltaChip` fork at `design-system/spec/shell-preview.tsx:254`
+ *   is gallery code and cannot count. Tracked in
+ *   `docs/follow-ups/_pending/adr-146-consumer-gate.md`.
+ *
+ * Migration of the remaining forks is ADR-146 D13
+ * (`converge-delta-chips.md`), not this file's job.
+ *
+ * THREE SIGNALS, NOT ONE — fill + border + ink
+ * --------------------------------------------
+ * The source kit measures a pale tinted fill PLUS a mid-tint border PLUS a
+ * saturated label — three signals, not one (METORIC-ANALYTICS-SPEC §5.2, the
+ * exact values are recorded there). The border is not decoration: a fill-only
+ * chip at ~10% alpha disappears against one of the two surfaces it has to
+ * live on — the white panel (`--surface-card`) and the grey tray
+ * (`--surface-frame`). Two of the three forks above shipped fill-only or
+ * ink-only for exactly this reason and are illegible on one surface each.
+ * Keep all three signals.
+ *
+ * DIRECTION IS NEVER COLOUR ALONE
+ * -------------------------------
+ * The arrow carries direction independently of the hue (ADR-146 D10.1, and
+ * the "don't rely on colour alone" design principle), and an `sr-only` word
+ * carries it for assistive tech. A red/green swap alone would be unreadable
+ * for a deuteranope and silent to a screen reader.
+ *
+ * UP IS NOT ALWAYS GOOD
+ * ---------------------
+ * `invert` exists because roughly half our metrics are cost-shaped — CPA,
+ * CPC, spend, bounce rate, time-to-first-response — where DOWN is the good
+ * outcome. Hardcoding "up is green" is wrong for all of them. `direction`
+ * (the arrow) and tone (the colour) are resolved separately: the arrow
+ * always follows the sign, the colour follows the sign XOR `invert`.
+ *
+ * Token discipline: every colour is a frozen `rgb(var(--token))` literal in
+ * `DELTA_TONE` — no constructed token names (ADR-146 D8), no colour literals.
+ * `--success-bg` / `--destructive-bg` already carry their alpha, so they are
+ * consumed bare and NEVER given a second one; the border alphas hang off the
+ * bare `--success` / `--destructive` triples, which is legal. Geometry is
+ * `--radius-full` + the `--space` scale; the 2px vertical pad the kit
+ * measures is written `calc(var(--space-1) / 2)` so it stays derived from the
+ * scale rather than becoming a magic number.
+ */
+
+import { ArrowDown, ArrowUp, Minus, type LucideIcon } from 'lucide-react'
+import { cn } from './lib/utils'
+import { formatNumber, formatPercent } from './format'
+
+/** Which way the arrow points. Inferred from the sign unless overridden. */
+export type DeltaDirection = 'up' | 'down' | 'flat'
+
+/** How the magnitude is rendered. `percent` appends `%`. */
+export type DeltaFormat = 'percent' | 'absolute'
+
+/** Whether the change reads as good, bad or neither. Never set directly — it
+ *  is derived from `direction` and `invert`. */
+type DeltaTone = 'positive' | 'negative' | 'neutral'
+
+interface DeltaToneStyle {
+  background: string
+  border: string
+  color: string
+}
+
+/**
+ * Frozen literal lookup — the same shape as `metric-card.tsx`'s `TONE_COLOR`.
+ * Never build these strings at runtime: a constructed custom-property name
+ * that misses produces invalid CSS which the browser silently discards, with
+ * every gate green (ADR-146 D8, ENGINEERING-AXES.md:186).
+ */
+/** Whether the direction is an outcome to be judged, or just a direction. */
+export type DeltaSentiment = 'directional' | 'none'
+
+const DELTA_TONE: Record<DeltaTone, DeltaToneStyle> = {
+  positive: {
+    background: 'rgb(var(--success-bg))',
+    border: '1px solid rgb(var(--success) / 0.30)',
+    color: 'rgb(var(--success-ink))',
+  },
+  negative: {
+    background: 'rgb(var(--destructive-bg))',
+    border: '1px solid rgb(var(--destructive) / 0.30)',
+    color: 'rgb(var(--destructive-ink))',
+  },
+  neutral: {
+    background: 'rgb(var(--muted))',
+    border: '1px solid rgb(var(--border))',
+    color: 'rgb(var(--text-secondary))',
+  },
+}
+
+const DELTA_ICON: Record<DeltaDirection, LucideIcon> = {
+  up: ArrowUp,
+  down: ArrowDown,
+  flat: Minus,
+}
+
+/** Spoken direction, so the chip is not colour- or glyph-only for AT. */
+const DELTA_WORD: Record<DeltaDirection, string> = {
+  up: 'Up',
+  down: 'Down',
+  flat: 'No change,',
+}
+
+/**
+ * Direction from the sign OF THE NUMBER WE PRINT, not of the raw input.
+ *
+ * The two disagree whenever a change rounds away at the displayed
+ * precision: `+0.04` at one decimal prints "0.0%", and taking direction
+ * from the raw sign shipped that as a GREEN UP ARROW beside a zero. The
+ * chip would be claiming a rise it is simultaneously reporting as none.
+ * Rounding first makes the glyph, the hue and the numeral agree — which is
+ * the whole point of carrying direction in three channels.
+ *
+ * Non-finite input (NaN from a division by zero, a missing denominator)
+ * reads as flat rather than throwing — the formatters render it as an
+ * em-dash, so the chip degrades to "no change, —".
+ */
+function directionOf(value: number, decimals: number): DeltaDirection {
+  if (!Number.isFinite(value)) return 'flat'
+  const shown = Number(value.toFixed(decimals))
+  if (shown === 0) return 'flat'
+  return shown > 0 ? 'up' : 'down'
+}
+
+function toneOf(
+  direction: DeltaDirection,
+  invert: boolean,
+  sentiment: DeltaSentiment,
+): DeltaTone {
+  if (direction === 'flat') return 'neutral'
+  // Some numbers move without either direction being an outcome. The arrow
+  // still reports WHICH way; the colour declines to judge it.
+  if (sentiment === 'none') return 'neutral'
+  const good = invert ? direction === 'down' : direction === 'up'
+  return good ? 'positive' : 'negative'
+}
+
+export interface DeltaChipProps {
+  /**
+   * The change itself. For `format: 'percent'` this is in PERCENT UNITS, not
+   * a 0-1 fraction — pass `12.5` for "12.5%" (ADR-146 D11; `formatPercent`
+   * takes percent units, `format.ts:57-68`). The sign drives the arrow; the
+   * chip renders the magnitude, so the sign is never printed twice.
+   */
+  value: number
+  /** `'percent'` (default) appends `%`; `'absolute'` renders a plain count. */
+  format?: DeltaFormat
+  /**
+   * Force the arrow. Defaults to the sign of `value`. Override only when the
+   * caller knows something the sign does not — e.g. a rank where "moved from
+   * 4 to 2" is an improvement expressed as a negative number.
+   */
+  direction?: DeltaDirection
+  /**
+   * `true` when DOWN is the good outcome — cost, CPA, CPC, spend, bounce
+   * rate, latency. Flips the colour only; the arrow still follows the sign.
+   */
+  invert?: boolean
+  /**
+   * Whether the direction carries a good/bad judgement at all.
+   *
+   * `'directional'` (default) is the KPI case: up is good, or down is when
+   * `invert` is set. `'none'` renders both directions in the neutral tone —
+   * the arrow still reports which way the number moved, but the colour makes
+   * no claim about it.
+   *
+   * Use `'none'` for counts that simply vary and are attached to a PERSON —
+   * a contributor's monthly total, a volunteer's hours. Painting those
+   * `--destructive` states that someone failed, spends the error channel on
+   * something that is not an error, and is the regression that reverted this
+   * chip's first leaderboard consumer (ADR-146 amendment, phase audit H1).
+   */
+  sentiment?: DeltaSentiment
+  /** Decimal places. Defaults to 1 for percent, 0 for absolute. */
+  decimals?: number
+  /**
+   * Character slot reserved for the numeral so a ticking value cannot resize
+   * the chip (design principles → Layout stability). Sized for the largest
+   * plausible value; the chip still grows past it rather than clipping.
+   * Default 5 — fits "12.5%" and "1,204".
+   */
+  reserveChars?: number
+  /** Optional class override for the outer chip. */
+  className?: string
+}
+
+export function DeltaChip({
+  value,
+  format = 'percent',
+  direction,
+  invert = false,
+  sentiment = 'directional',
+  decimals,
+  reserveChars = 5,
+  className,
+}: DeltaChipProps) {
+  const places = decimals ?? (format === 'percent' ? 1 : 0)
+  const dir = direction ?? directionOf(value, places)
+  const tone = DELTA_TONE[toneOf(dir, invert, sentiment)]
+  const Icon = DELTA_ICON[dir]
+
+  const magnitude = Math.abs(value)
+  // percent units, not a fraction — see `value` above.
+  const text =
+    format === 'percent'
+      ? formatPercent(magnitude, { decimals: places })
+      : formatNumber(magnitude, { decimals: places })
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center shrink-0 align-middle',
+        'text-[12px] font-semibold leading-none tabular-nums',
+        // Colour is the only thing that animates here, and a data change
+        // eases out — never springs (ADR-146 D9). Reduced motion drops it.
+        'transition-colors duration-[var(--dur-base)] ease-[var(--ease-out)]',
+        'motion-reduce:transition-none',
+        className,
+      )}
+      style={{
+        gap: 'var(--space-1)',
+        // 2px/4px in the source kit. 2px is not on the --space scale, so it
+        // is derived from it rather than written as a literal.
+        padding: 'calc(var(--space-1) / 2) var(--space-1)',
+        borderRadius: 'var(--radius-full)',
+        background: tone.background,
+        border: tone.border,
+        color: tone.color,
+      }}
+    >
+      <span className="sr-only">{DELTA_WORD[dir]}</span>
+      <Icon size={16} strokeWidth={2} aria-hidden="true" className="shrink-0" />
+      <span
+        className="text-center"
+        style={{ minWidth: `${reserveChars}ch` }}
+      >
+        {text}
+      </span>
+    </span>
+  )
+}

package/src/detail/__tests__/activity-pane.test.tsx

@@ -0,0 +1,186 @@
+/**
+ * ActivityPane — three tabs, ONE composer.
+ *
+ * The load-bearing test is the last one: the composer must be the SAME element
+ * before and after a tab change, including on Activity. Anything that mounts a
+ * composer per tab passes a "the composer is visible" assertion and still
+ * throws away what you were typing when you glance at the history.
+ */
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ActivityPane } from '../activity-pane'
+import type { ThreadComment } from '../../thread/types'
+import type { ActivityEntry } from '../types'
+
+const NOW = new Date(2026, 8, 15, 12, 0, 0).getTime()
+
+const comments: ThreadComment[] = [
+  {
+    id: 'c1',
+    author: { id: 'u1', name: 'Ada Lovelace' },
+    bodyMd: 'Looks right to me.',
+    createdAt: NOW - 60_000,
+  },
+]
+
+const activity: ActivityEntry[] = [
+  {
+    id: 'a1',
+    at: NOW - 120_000,
+    actor: { id: 'u2', name: 'Grace Hopper' },
+    field: 'Status',
+    from: 'Building',
+    to: 'Review',
+  },
+]
+
+function Host(props: { onSubmit?: (body: string) => void }) {
+  const [draft, setDraft] = useState('')
+  return (
+    <ActivityPane
+      comments={comments}
+      activity={activity}
+      draft={draft}
+      onDraftChange={setDraft}
+      onSubmit={props.onSubmit ?? (() => {})}
+      now={NOW}
+      locale="en-US"
+    />
+  )
+}
+
+function composer(): HTMLElement {
+  return screen.getByRole('textbox', { name: 'Add a comment' })
+}
+
+function panel(name: string): HTMLElement {
+  const node = document.querySelector<HTMLElement>(`[role="tabpanel"][aria-label="${name}"]`)
+  if (node === null) throw new Error(`no ${name} panel`)
+  return node
+}
+
+describe('ActivityPane', () => {
+  it('opens on Everything with both kinds of entry, in time order', () => {
+    render(<Host />)
+    const everything = panel('Everything')
+    expect(everything).toBeVisible()
+    expect(everything).toHaveTextContent('Grace Hopper')
+    expect(everything).toHaveTextContent('changed Status from Building to Review')
+    expect(everything).toHaveTextContent('Looks right to me.')
+  })
+
+  it('shows only the history on Activity', async () => {
+    render(<Host />)
+    await userEvent.click(screen.getByRole('tab', { name: /Activity/ }))
+    expect(panel('Activity')).toBeVisible()
+    expect(panel('Everything')).not.toBeVisible()
+    expect(panel('Activity')).not.toHaveTextContent('Looks right to me.')
+  })
+
+  it('draws exactly one composer, on every tab, and keeps it mounted', async () => {
+    render(<Host />)
+    const first = composer()
+    await userEvent.type(first, 'half a thought')
+
+    for (const tab of ['Comments', 'Activity', 'Everything']) {
+      await userEvent.click(screen.getByRole('tab', { name: new RegExp(tab) }))
+      expect(screen.getAllByRole('textbox', { name: 'Add a comment' })).toHaveLength(1)
+      // The SAME node, with what was typed into it still there.
+      expect(composer()).toBe(first)
+      expect(first).toHaveValue('half a thought')
+    }
+  })
+
+  it('submits the draft as a root comment', async () => {
+    const onSubmit = vi.fn()
+    render(<Host onSubmit={onSubmit} />)
+    await userEvent.type(composer(), 'Shipping this')
+    await userEvent.click(screen.getByRole('button', { name: 'Comment' }))
+    expect(onSubmit).toHaveBeenCalledWith('Shipping this')
+  })
+
+  it('speaks in the interface voice when a tab is empty', async () => {
+    render(
+      <ActivityPane
+        comments={[]}
+        activity={[]}
+        draft=""
+        onDraftChange={() => {}}
+        onSubmit={() => {}}
+        now={NOW}
+      />,
+    )
+    expect(panel('Everything')).toHaveTextContent(
+      'Comments and changes to this record show up together.',
+    )
+    await userEvent.click(screen.getByRole('tab', { name: /Activity/ }))
+    expect(panel('Activity')).toHaveTextContent('Every change to this record is recorded here.')
+  })
+})
+
+/**
+ * A host with no comment backend — Lightwork, and anything else that wants a
+ * history feed without a conversation.
+ *
+ * The pane used to REQUIRE `comments`, `draft`, `onDraftChange` and `onSubmit`,
+ * which meant a host with nowhere to post had two bad options: pass no-op
+ * handlers and ship a composer that silently discards what you type, or fork
+ * the file. One consumer did fork it — 77% duplicated — which is what these
+ * props exist to make unnecessary.
+ */
+describe('without a comment backend', () => {
+  const ACTIVITY = [
+    { id: 'a1', at: 1_700_000_000_000, field: 'Status', from: 'Planned', to: 'Live' },
+  ]
+
+  it('drops the Comments tab rather than rendering it empty', () => {
+    render(<ActivityPane activity={ACTIVITY} />)
+    expect(screen.getByRole('tab', { name: /everything/i })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: /activity/i })).toBeInTheDocument()
+    expect(screen.queryByRole('tab', { name: /comments/i })).toBeNull()
+  })
+
+  it('draws no composer — there is nowhere to post', () => {
+    render(<ActivityPane activity={ACTIVITY} />)
+    expect(screen.queryByRole('textbox')).toBeNull()
+    expect(document.querySelector('[data-slot="activity-composer"]')).toBeNull()
+  })
+
+  it('still shows the history', () => {
+    render(<ActivityPane activity={ACTIVITY} />)
+    // Every panel stays MOUNTED and is hidden rather than unmounted (so a
+    // scroll position and a half-read feed survive a tab change), so the same
+    // entry legitimately appears twice in the DOM. Scope to the visible one.
+    const shown = document.querySelector('[role="tabpanel"]:not([hidden])')
+    expect(shown).not.toBeNull()
+    expect(within(shown as HTMLElement).getByText(/Planned/)).toBeInTheDocument()
+    expect(within(shown as HTMLElement).getByText(/Live/)).toBeInTheDocument()
+  })
+
+  it('never lands on a tab it does not render', () => {
+    // `comments` as the requested tab, with no backend: the pane must fall
+    // back rather than show a panel that was never mounted.
+    render(<ActivityPane activity={ACTIVITY} defaultTab="comments" />)
+    const selected = screen
+      .getAllByRole('tab')
+      .filter((t) => t.getAttribute('aria-selected') === 'true')
+    expect(selected).toHaveLength(1)
+    expect(selected[0]).toHaveTextContent(/everything/i)
+  })
+
+  it('is unchanged for a host that DOES supply a backend', () => {
+    render(
+      <ActivityPane
+        activity={ACTIVITY}
+        comments={[]}
+        draft=""
+        onDraftChange={() => {}}
+        onSubmit={() => {}}
+      />,
+    )
+    expect(screen.getByRole('tab', { name: /comments/i })).toBeInTheDocument()
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+})

package/src/detail/__tests__/detail-chrome.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * DetailHeader and DetailMenu — the slots, and the rule that governs them.
+ *
+ * §7 names three controls with no backing system, and the owner's standing
+ * rule is that a rendered control does what it says. Both components express
+ * that the same way: a slot the host does not fill is not drawn. These tests
+ * assert the ABSENCE, because a dead control is exactly the kind of regression
+ * that no other check catches.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DetailHeader } from '../detail-header'
+import { DetailMenu } from '../detail-menu'
+
+const noop = () => {}
+const NOW = new Date(2026, 8, 15, 12, 0, 0).getTime()
+
+describe('DetailHeader', () => {
+  it('draws nothing for a slot the host did not fill', () => {
+    render(<DetailHeader title="Slice B" onClose={noop} />)
+    expect(screen.queryByRole('button', { name: /complete/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /favourite/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Previous item/ })).toBeNull()
+    expect(document.querySelector('[data-slot="detail-reminder"]')).toBeNull()
+    expect(document.querySelector('[data-slot="detail-menu-slot"]')).toBeNull()
+    // A title with no change handler is a heading, not a field.
+    expect(screen.getByRole('heading', { name: 'Slice B' })).toBeInTheDocument()
+    expect(screen.queryByRole('textbox')).toBeNull()
+  })
+
+  it('reflects completion in the label, not only in colour', async () => {
+    const onCompleteChange = vi.fn()
+    const view = render(
+      <DetailHeader
+        title="Slice B"
+        onClose={noop}
+        complete={false}
+        onCompleteChange={onCompleteChange}
+      />,
+    )
+    const toggle = screen.getByRole('button', { name: 'Mark complete' })
+    expect(toggle).toHaveAttribute('aria-pressed', 'false')
+    await userEvent.click(toggle)
+    expect(onCompleteChange).toHaveBeenCalledWith(true)
+
+    view.rerender(
+      <DetailHeader title="Slice B" onClose={noop} complete onCompleteChange={onCompleteChange} />,
+    )
+    expect(screen.getByRole('button', { name: 'Completed' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    )
+  })
+
+  it('disables the step at the end it has no handler for', () => {
+    render(<DetailHeader title="Slice B" onClose={noop} onNext={noop} />)
+    expect(screen.getByRole('button', { name: 'Previous item' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Next item' })).toBeEnabled()
+  })
+
+  it('edits the title in place, committing on Enter', async () => {
+    const onTitleChange = vi.fn()
+    const onTitleCommit = vi.fn()
+    render(
+      <DetailHeader
+        title="Slice B"
+        onClose={noop}
+        onTitleChange={onTitleChange}
+        onTitleCommit={onTitleCommit}
+      />,
+    )
+    const field = screen.getByRole('textbox', { name: 'Item title' })
+    await userEvent.type(field, '!{Enter}')
+    expect(onTitleChange).toHaveBeenCalledWith('Slice B!')
+    expect(onTitleCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('reads out when the item was updated', () => {
+    render(<DetailHeader title="Slice B" onClose={noop} updatedAt={NOW - 3_600_000} now={NOW} />)
+    expect(document.querySelector('[data-slot="detail-updated"]')).toHaveTextContent('Updated 1h')
+  })
+})
+
+describe('DetailMenu', () => {
+  it('renders only the actions the host supplied, in the brief order', async () => {
+    render(
+      <DetailMenu
+        mode="full"
+        onModeChange={noop}
+        actions={{ move: { onSelect: noop }, print: { onSelect: noop }, delete: { onSelect: noop } }}
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    const items = screen.getAllByRole('menuitem').map((item) => item.dataset['action'])
+    expect(items).toEqual(['move', 'print', 'delete'])
+    // Repeat has no scheduling engine behind it (§7), so it is not drawn.
+    expect(screen.queryByRole('menuitem', { name: /Repeat/ })).toBeNull()
+  })
+
+  it('offers the three modes, with the current one pressed', async () => {
+    const onModeChange = vi.fn()
+    render(<DetailMenu mode="panel" onModeChange={onModeChange} />)
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    expect(screen.getByRole('button', { name: 'Open in side panel' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open full screen' }))
+    expect(onModeChange).toHaveBeenCalledWith('full')
+  })
+
+  it('asks twice before deleting', async () => {
+    const onDelete = vi.fn()
+    render(
+      <DetailMenu mode="full" onModeChange={noop} actions={{ delete: { onSelect: onDelete } }} />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    expect(onDelete).not.toHaveBeenCalled()
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Confirm delete' }))
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('offers the record id to the clipboard', async () => {
+    const onCopy = vi.fn()
+    render(
+      <DetailMenu mode="full" onModeChange={noop} recordId="itm_123" onCopyRecordId={onCopy} />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }))
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Copy record id itm_123' }))
+    expect(onCopy).toHaveBeenCalledWith('itm_123')
+  })
+})