@lovett/ui 0.0.11 → 0.2.0

package/src/__tests__/chart-series.test.ts

@@ -0,0 +1,339 @@
+// @vitest-environment node
+//
+// Pure source scan — reads tokens.css and the primitive sources off disk.
+// jsdom rewrites import.meta.url to an http URL that fileURLToPath rejects,
+// and there is nothing here that needs a DOM.
+/**
+ * The ADR-146 D8 guard: series colour is resolved by a static lookup, and the
+ * tokens that lookup names actually exist.
+ *
+ * WHY THIS TEST EXISTS
+ * --------------------
+ * `ENGINEERING-AXES.md:186` records the defect. A constructed custom-property
+ * name (`--folder-${key}`) produced `--folder-folder-violet`, which is
+ * undefined, which makes the enclosing `rgb()` invalid, which the browser
+ * **silently discards** — shipping white-on-white tiles with typecheck, lint,
+ * tests, build and the token gate all green. Nothing that reads source can
+ * see it, because the source is syntactically perfect. The only detector is a
+ * test that resolves each name against the declarations.
+ *
+ * WHY IT MUTATES (ENGINEERING-AXES.md:196-201)
+ * --------------------------------------------
+ * A guard that has never been observed failing is not a guard — it is a
+ * `expect(true).toBe(true)` with extra steps. Every assertion below is paired
+ * with a MUTATION that drives the same checker in the failing direction:
+ *
+ *   • rename `--series-3` in a copy of tokens.css        → the checker names it
+ *   • typo one entry of a SERIES-shaped array            → the checker names it
+ *   • bake an alpha into `--series-5`                    → the alpha check fires
+ *   • reorder / duplicate a slot                         → the order check fires
+ *   • write `--series-${i}` in a source file             → the scan fires
+ *
+ * So if a `--series-*` token is ever renamed or dropped in tokens.css, this
+ * file goes RED — and the mutation cases prove that claim rather than
+ * asserting it.
+ */
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+import {
+  SCATTER_SLOT_COUNT,
+  SERIES,
+  SERIES_SCATTER,
+  SERIES_SLOT_COUNT,
+  isScatterSlot,
+  isSeriesSlot,
+  paletteColor,
+  scatterColor,
+  seriesColor,
+  slotColor,
+} from '../lib/series'
+
+const SRC = fileURLToPath(new URL('..', import.meta.url))
+const TOKENS_CSS = readFileSync(join(SRC, 'tokens.css'), 'utf8')
+
+/* ── the checkers (pure, so the mutations can drive the same code) ────── */
+
+/**
+ * Every custom property `css` declares, mapped to its declared values (a
+ * token appears once per theme block).
+ */
+function declaredTokens(css: string): Map<string, string[]> {
+  const out = new Map<string, string[]>()
+  for (const match of css.matchAll(/^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);/gm)) {
+    const name = match[1]
+    const value = match[2]
+    if (name === undefined || value === undefined) continue
+    const list = out.get(name) ?? []
+    list.push(value.trim())
+    out.set(name, list)
+  }
+  return out
+}
+
+/** The token name inside `rgb(var(--x))`, or `null` if the entry isn't that shape. */
+function tokenOf(entry: string): string | null {
+  const match = /^rgb\(var\((--[a-z0-9-]+)\)\)$/.exec(entry)
+  return match?.[1] ?? null
+}
+
+/**
+ * THE GUARD. Every palette entry must be `rgb(var(--token))` naming a custom
+ * property `css` actually declares. Returns the offending entries — empty
+ * means clean.
+ */
+function undeclaredEntries(entries: readonly string[], css: string): string[] {
+  const declared = declaredTokens(css)
+  const bad: string[] = []
+  for (const entry of entries) {
+    const token = tokenOf(entry)
+    if (token === null) {
+      bad.push(`${entry} — not a plain rgb(var(--token)) reference`)
+    } else if (!declared.has(token)) {
+      bad.push(`${entry} — ${token} is not declared in tokens.css`)
+    }
+  }
+  return bad
+}
+
+/**
+ * A series token must be a BARE RGB TRIPLE. Call sites apply their own alpha
+ * (`rgb(var(--series-1) / 0.12)` for an area fill); a baked-in alpha would
+ * expand to `rgb(2 137 234 / 0.3 / 0.12)`, which is invalid and dropped.
+ */
+function alphaCarryingEntries(entries: readonly string[], css: string): string[] {
+  const declared = declaredTokens(css)
+  const bad: string[] = []
+  for (const entry of entries) {
+    const token = tokenOf(entry)
+    if (token === null) continue
+    for (const value of declared.get(token) ?? []) {
+      if (value.includes('/')) bad.push(`${token}: ${value}`)
+    }
+  }
+  return bad
+}
+
+/** Palette entries whose token does not match its 1-based slot number. */
+function misorderedEntries(entries: readonly string[]): string[] {
+  return entries.flatMap((entry, index) => {
+    const expected = `rgb(var(--series-${index + 1}))`
+    return entry === expected ? [] : [`slot ${index}: ${entry} ≠ ${expected}`]
+  })
+}
+
+/**
+ * Blank comments while preserving line numbers, so a violation still reports
+ * the line it is on. Without this the scan flags its own doc-blocks — every
+ * header in this package that spells the broken form out in order to warn
+ * against it. Same helper, same reason, as `token-shape.test.ts`.
+ *
+ * Line comments are only stripped when the line STARTS with `//`, so a
+ * `https://` inside a string survives.
+ */
+function stripComments(source: string): string {
+  return source
+    .replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' '))
+    .split('\n')
+    .map((line) => (/^\s*\/\//.test(line) ? '' : line))
+    .join('\n')
+}
+
+/**
+ * Source lines that BUILD a `--series-*` name instead of naming one — the
+ * exact shape ADR-146 D8 forbids. Comments are blanked first: a warning about
+ * the defect is not the defect.
+ */
+function constructedNameHits(source: string): string[] {
+  const hits: string[] = []
+  stripComments(source)
+    .split('\n')
+    .forEach((line, i) => {
+      if (/--series-\$\{|['"`]--series-['"`]\s*\+|concat\(\s*['"`]--series-/.test(line)) {
+        hits.push(`${i + 1}: ${line.trim()}`)
+      }
+    })
+  return hits
+}
+
+/* ── source inventory ────────────────────────────────────────────────── */
+
+function sourceFiles(dir: string, acc: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (entry === 'node_modules' || entry === '__tests__') continue
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) sourceFiles(full, acc)
+    else if (/\.tsx?$/.test(entry)) acc.push(full)
+  }
+  return acc
+}
+
+const FILES = sourceFiles(SRC)
+
+/* ── the guard, against reality ──────────────────────────────────────── */
+
+describe('SERIES resolves to tokens tokens.css actually declares', () => {
+  it('scans a real tokens.css and a real source tree', () => {
+    // If either input silently emptied, every assertion below would pass
+    // vacuously. Pin them.
+    expect(declaredTokens(TOKENS_CSS).size).toBeGreaterThan(100)
+    expect(FILES.length).toBeGreaterThan(50)
+  })
+
+  it('has exactly eight slots, in D2 order', () => {
+    expect(SERIES).toHaveLength(8)
+    expect(SERIES_SLOT_COUNT).toBe(8)
+    expect(misorderedEntries(SERIES)).toEqual([])
+  })
+
+  it('names only declared custom properties', () => {
+    expect(undeclaredEntries(SERIES, TOKENS_CSS)).toEqual([])
+  })
+
+  it('names only bare-triple tokens, so a call site may add its own alpha', () => {
+    expect(alphaCarryingEntries(SERIES, TOKENS_CSS)).toEqual([])
+  })
+
+  it('caps the all-pairs palette at slots 1, 6 and 7', () => {
+    expect(SERIES_SCATTER).toHaveLength(3)
+    expect(SCATTER_SLOT_COUNT).toBe(3)
+    expect([...SERIES_SCATTER]).toEqual([SERIES[0], SERIES[5], SERIES[6]])
+    expect(undeclaredEntries(SERIES_SCATTER, TOKENS_CSS)).toEqual([])
+  })
+
+  it('never constructs a --series-* name anywhere in the package', () => {
+    const violations = FILES.flatMap((file) =>
+      constructedNameHits(readFileSync(file, 'utf8')).map(
+        (hit) => `${file.slice(SRC.length)}:${hit}`,
+      ),
+    )
+    expect(violations).toEqual([])
+  })
+})
+
+/* ── MUTATION VERIFY — the guard fails in the failing direction ───────── */
+
+describe('the guard fails when it should (mutation verify)', () => {
+  it('goes red when a --series-* token is RENAMED in tokens.css', () => {
+    // The exact regression this file exists to catch: someone renames a
+    // token in tokens.css and the lookup keeps naming the old one. Real
+    // tokens.css, one surgical rename.
+    const mutated = TOKENS_CSS.replace(
+      /^(\s*)--series-3:/m,
+      '$1--series-3-renamed:',
+    )
+    expect(mutated).not.toBe(TOKENS_CSS) // the mutation actually applied
+
+    const failures = undeclaredEntries(SERIES, mutated)
+    expect(failures).toHaveLength(1)
+    expect(failures[0]).toContain('--series-3')
+    expect(failures[0]).toContain('not declared')
+  })
+
+  it('goes red when a --series-* token is DELETED from tokens.css', () => {
+    const mutated = TOKENS_CSS.replace(/^\s*--series-8:[^;]+;.*$/m, '')
+    expect(mutated).not.toBe(TOKENS_CSS)
+    expect(undeclaredEntries(SERIES, mutated)).toHaveLength(1)
+  })
+
+  it('goes red when a palette entry has a typo in its token name', () => {
+    const mutated = SERIES.map((entry) =>
+      entry === 'rgb(var(--series-4))' ? 'rgb(var(--serie-4))' : entry,
+    )
+    const failures = undeclaredEntries(mutated, TOKENS_CSS)
+    expect(failures).toHaveLength(1)
+    expect(failures[0]).toContain('--serie-4')
+  })
+
+  it('goes red when a palette entry is not a plain rgb(var(--token)) reference', () => {
+    // Two realistic slips: the rgb() wrapper dropped, and an alpha baked into
+    // the entry (which would then stack with a call site's own alpha).
+    const unwrapped = SERIES.map((entry, i) => (i === 0 ? 'var(--series-1)' : entry))
+    const preAlpha = SERIES.map((entry, i) =>
+      i === 1 ? 'rgb(var(--series-2) / 0.5)' : entry,
+    )
+    expect(undeclaredEntries(unwrapped, TOKENS_CSS)).toHaveLength(1)
+    expect(undeclaredEntries(preAlpha, TOKENS_CSS)).toHaveLength(1)
+  })
+
+  it('goes red when a series token grows a baked-in alpha', () => {
+    const mutated = TOKENS_CSS.replace(
+      /^(\s*--series-5:\s*)([^;]+);/m,
+      '$1$2 / 0.3;',
+    )
+    expect(mutated).not.toBe(TOKENS_CSS)
+
+    const failures = alphaCarryingEntries(SERIES, mutated)
+    expect(failures).toHaveLength(1)
+    expect(failures[0]).toContain('--series-5')
+  })
+
+  it('goes red when two slots are swapped or one is duplicated', () => {
+    const swapped = [SERIES[1], SERIES[0], ...SERIES.slice(2)]
+    expect(misorderedEntries(swapped)).toHaveLength(2)
+
+    const duplicated = [SERIES[0], SERIES[0], ...SERIES.slice(2)]
+    expect(misorderedEntries(duplicated)).toHaveLength(1)
+  })
+
+  it('goes red when a source file constructs a --series-* name', () => {
+    // The literal shape ADR-146 D8 forbids. Built from parts so this test
+    // file does not itself trip its own scan above.
+    const dashes = '--'
+    const broken = `const color = \`rgb(var(${dashes}series-\${slot}))\``
+    expect(constructedNameHits(broken)).toHaveLength(1)
+
+    // ...and stays quiet on the correct shape.
+    expect(constructedNameHits('const color = SERIES[slot]')).toEqual([])
+
+    // Comments are blanked (a warning about the defect is not the defect),
+    // but blanking must not also blind the scan to real code on other lines.
+    expect(constructedNameHits(`// never write ${broken}`)).toEqual([])
+    expect(constructedNameHits(`/* ${broken} */\n${broken}`)).toHaveLength(1)
+  })
+})
+
+/* ── the resolver API ────────────────────────────────────────────────── */
+
+describe('slot resolution', () => {
+  it('maps every legal slot to its own entry', () => {
+    expect(seriesColor(0)).toBe(SERIES[0])
+    expect(seriesColor(7)).toBe(SERIES[7])
+    expect(scatterColor(0)).toBe(SERIES_SCATTER[0])
+    expect(scatterColor(2)).toBe(SERIES_SCATTER[2])
+  })
+
+  it('narrows plain numbers, rejecting out-of-range and non-integers', () => {
+    expect(isSeriesSlot(0)).toBe(true)
+    expect(isSeriesSlot(7)).toBe(true)
+    expect(isSeriesSlot(8)).toBe(false)
+    expect(isSeriesSlot(-1)).toBe(false)
+    expect(isSeriesSlot(1.5)).toBe(false)
+    expect(isSeriesSlot(Number.NaN)).toBe(false)
+
+    expect(isScatterSlot(2)).toBe(true)
+    expect(isScatterSlot(3)).toBe(false)
+  })
+
+  it('returns undefined past a palette cap rather than wrapping around', () => {
+    // Wrapping would paint two different entities in one hue — a wrong
+    // chart that no gate can see. ADR-146 D2 folds to "Other" instead.
+    expect(paletteColor('scatter', 3)).toBeUndefined()
+    expect(paletteColor('default', 8)).toBeUndefined()
+    expect(paletteColor('default', 0)).toBe(SERIES[0])
+    expect(paletteColor('scatter', 1)).toBe(SERIES[5])
+  })
+
+  it("renders the 'other' fold as a neutral, never as a hue", () => {
+    const other = slotColor('other', 'default')
+    expect(other).toBe('rgb(var(--text-muted))')
+    expect(SERIES).not.toContain(other)
+    expect(declaredTokens(TOKENS_CSS).has('--text-muted')).toBe(true)
+
+    // A scatter chart's fourth series folds too, rather than reusing blue.
+    expect(slotColor(3, 'scatter')).toBe(other)
+    expect(slotColor(3, 'default')).toBe(SERIES[3])
+  })
+})

package/src/__tests__/code-block.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * CodeBlock / MarkdownCode / MarkdownPre — a code BLOCK is decided by where
+ * the code sits (inside react-markdown's `pre`), not by whether the fence
+ * names a language.
+ *
+ * Before this, a bare ``` fence — the rich composer's default (ADR-148 D3) —
+ * rendered as an inline chip because the only discriminator was the
+ * `language-*` className. The block surface is recognisable by its header:
+ * a language label and the "Copy code" button.
+ */
+
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import { MarkdownCode, MarkdownPre } from '../code-block'
+import { MarkdownRenderer } from '../markdown'
+
+const COPY = 'button[aria-label="Copy code"]'
+/** The inline chip: a bare `<code>` carrying the chip classes, never inside a block. */
+const CHIP = 'code.rounded'
+
+function md(markdown: string): HTMLElement {
+  return render(<MarkdownRenderer>{markdown}</MarkdownRenderer>).container
+}
+
+describe('MarkdownRenderer code', () => {
+  it('a bare fence renders a plain code block, not a chip', () => {
+    const container = md('```\nconst a = 1\n```')
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.querySelector('pre')?.textContent).toBe('const a = 1')
+    expect(container.textContent).toContain('plaintext')
+    expect(container.querySelector(CHIP)).toBeNull()
+  })
+
+  it('a fence with a language renders a highlighted code block', () => {
+    const container = md('```ts\nconst a = 1\n```')
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.textContent).toContain('typescript')
+    // The highlighter owns a real <pre><code> of its own.
+    expect(container.querySelector('pre code')).not.toBeNull()
+    expect(container.querySelector('pre')?.textContent).toBe('const a = 1')
+    expect(container.querySelector(CHIP)).toBeNull()
+  })
+
+  it('single-backtick code stays inline', () => {
+    const container = md('run `pnpm dev:all` now')
+    const chip = container.querySelector(CHIP)
+    expect(chip?.textContent).toBe('pnpm dev:all')
+    expect(container.querySelector('pre')).toBeNull()
+    expect(container.querySelector(COPY)).toBeNull()
+  })
+
+  it('a fence whose first line looks like a language is code with that content', () => {
+    const container = md('```\njs\n```')
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.querySelector('pre')?.textContent).toBe('js')
+    expect(container.textContent).toContain('plaintext')
+    expect(container.textContent).not.toContain('javascript')
+  })
+
+  it('an empty fence still renders a block', () => {
+    const container = md('```\n```')
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.querySelector('pre')?.textContent).toBe('')
+    expect(container.querySelector(CHIP)).toBeNull()
+  })
+
+  it('an indented code block renders a block', () => {
+    const container = md('    indented')
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.querySelector('pre')?.textContent).toBe('indented')
+  })
+
+  it('a code span that wraps onto a second line stays inline', () => {
+    const container = md('a `b\nc` d')
+    expect(container.querySelector(CHIP)?.textContent).toBe('b c')
+    expect(container.querySelector('pre')).toBeNull()
+  })
+
+  it('inline code inside a list item stays inline', () => {
+    const container = md('- run `x`')
+    expect(container.querySelector('li ' + CHIP)?.textContent).toBe('x')
+    expect(container.querySelector(COPY)).toBeNull()
+  })
+
+  it('a block and a chip in one document are told apart', () => {
+    const container = md('use `a`\n\n```\nb\n```')
+    expect(container.querySelector(CHIP)?.textContent).toBe('a')
+    expect(container.querySelector('pre')?.textContent).toBe('b')
+    expect(container.querySelectorAll(COPY)).toHaveLength(1)
+  })
+})
+
+describe('MarkdownCode used directly', () => {
+  it('bare is inline', () => {
+    const { container } = render(<MarkdownCode>pnpm dev:all</MarkdownCode>)
+    expect(container.querySelector(CHIP)?.textContent).toBe('pnpm dev:all')
+    expect(container.querySelector(COPY)).toBeNull()
+  })
+
+  it('a language-* className is a highlighted block', () => {
+    const { container } = render(<MarkdownCode className="language-json">{'{ "a": 1 }'}</MarkdownCode>)
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.textContent).toContain('json')
+  })
+
+  it('a className that is not a language is still a block (the documented gotcha)', () => {
+    const { container } = render(<MarkdownCode className="text-sm">still a block</MarkdownCode>)
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.textContent).toContain('plaintext')
+  })
+
+  it('inside MarkdownPre, bare code is a block', () => {
+    const { container } = render(
+      <MarkdownPre>
+        <MarkdownCode>{'x\n'}</MarkdownCode>
+      </MarkdownPre>,
+    )
+    expect(container.querySelector(COPY)).not.toBeNull()
+    expect(container.querySelector('pre')?.textContent).toBe('x')
+    expect(container.querySelector(CHIP)).toBeNull()
+  })
+
+  it('MarkdownPre renders no element of its own', () => {
+    const { container } = render(
+      <MarkdownPre>
+        <MarkdownCode>x</MarkdownCode>
+      </MarkdownPre>,
+    )
+    // The block's own container is the first child; nothing wraps it.
+    expect(container.children).toHaveLength(1)
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+    expect(container.querySelectorAll('pre')).toHaveLength(1)
+  })
+})

package/src/__tests__/display-popover.test.tsx

@@ -0,0 +1,195 @@
+/**
+ * DisplayPopover + its row primitives.
+ *
+ * The contract is mostly about what CANNOT happen, because each of these
+ * primitives exists to make one of the source's defects unreachable
+ * (`docs/design-briefs/tasks-board-header-primitives.md` §4):
+ *
+ *   - `ToggleRow` owns the id/htmlFor pair, so clicking the LABEL toggles.
+ *     Theirs is hand-written at three call sites.
+ *   - every `ChipToggleGroup` chip is `type="button"` with `aria-pressed`.
+ *     Theirs is neither — inside a form it submits, and a screen reader is
+ *     told nothing about which chips are on.
+ *   - `PopoverFooterActions` renders NO primary unless one is supplied.
+ *     Theirs is a `<button>` with no `onClick` in three files.
+ *   - the panel keeps Tab inside itself, closes on Escape and hands focus
+ *     back to its trigger.
+ */
+import { useState } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  ChipToggleGroup,
+  DisplayPopover,
+  PopoverFooterActions,
+  SelectRow,
+  ToggleRow,
+} from '../display-popover'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+describe('ToggleRow', () => {
+  it('pairs the label with the control so clicking the label toggles', async () => {
+    const user = userEvent.setup()
+    const onCheckedChange = vi.fn()
+    render(
+      <ToggleRow
+        label="Show empty columns"
+        checked={false}
+        onCheckedChange={onCheckedChange}
+      />,
+    )
+
+    // getByLabelText only resolves when the htmlFor/id pair is real.
+    const control = screen.getByLabelText('Show empty columns')
+    expect(control).toHaveAttribute('type', 'checkbox')
+
+    await user.click(screen.getByText('Show empty columns'))
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+  })
+
+  it('mints a unique id per row, so two rows do not collide', () => {
+    render(
+      <>
+        <ToggleRow label="First" checked={false} onCheckedChange={() => {}} />
+        <ToggleRow label="Second" checked={false} onCheckedChange={() => {}} />
+      </>,
+    )
+    const first = screen.getByLabelText('First')
+    const second = screen.getByLabelText('Second')
+    expect(first.id).not.toBe('')
+    expect(first.id).not.toBe(second.id)
+  })
+})
+
+describe('SelectRow', () => {
+  it('names the control from the row label when none is given', () => {
+    render(
+      <SelectRow
+        label="Grouping"
+        value="column"
+        onValueChange={() => {}}
+        options={[
+          { value: 'column', label: 'Column' },
+          { value: 'assignee', label: 'Assignee' },
+        ]}
+      />,
+    )
+    expect(screen.getByRole('combobox', { name: 'Grouping' })).toBeInTheDocument()
+  })
+})
+
+describe('ChipToggleGroup', () => {
+  it('gives every chip type=button and aria-pressed', () => {
+    render(
+      <ChipToggleGroup
+        aria-label="Card properties"
+        items={[
+          { key: 'priority', label: 'Priority' },
+          { key: 'due', label: 'Due date' },
+        ]}
+        value={{ priority: true }}
+        onToggle={() => {}}
+      />,
+    )
+    const priority = screen.getByRole('button', { name: 'Priority', pressed: true })
+    const due = screen.getByRole('button', { name: 'Due date', pressed: false })
+    // A chip without type="button" submits the form it sits in.
+    expect(priority).toHaveAttribute('type', 'button')
+    expect(due).toHaveAttribute('type', 'button')
+  })
+
+  it('reports the key and the NEXT state, not just the key', async () => {
+    const user = userEvent.setup()
+    const onToggle = vi.fn()
+    render(
+      <ChipToggleGroup
+        aria-label="Card properties"
+        items={[{ key: 'priority', label: 'Priority' }]}
+        value={{ priority: true }}
+        onToggle={onToggle}
+      />,
+    )
+    await user.click(screen.getByRole('button', { name: 'Priority' }))
+    expect(onToggle).toHaveBeenCalledWith('priority', false)
+  })
+})
+
+describe('PopoverFooterActions', () => {
+  it('renders no primary action when none is supplied', () => {
+    render(<PopoverFooterActions onReset={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Reset to defaults' })).toBeInTheDocument()
+    // Exactly one button: the dead "Set default for everyone" cannot happen.
+    expect(screen.getAllByRole('button')).toHaveLength(1)
+  })
+
+  it('renders the primary when one is supplied', () => {
+    const onClick = vi.fn()
+    render(
+      <PopoverFooterActions
+        onReset={() => {}}
+        primaryAction={{ label: 'Apply', onClick }}
+      />,
+    )
+    expect(screen.getAllByRole('button')).toHaveLength(2)
+  })
+
+  it('disables reset when the panel is already at its defaults', () => {
+    render(<PopoverFooterActions onReset={() => {}} resetDisabled />)
+    expect(screen.getByRole('button', { name: 'Reset to defaults' })).toBeDisabled()
+  })
+})
+
+describe('DisplayPopover', () => {
+  let restore: () => void
+
+  beforeEach(() => {
+    restore = mockGeometry()
+    setViewport(1280, 800)
+  })
+  afterEach(() => restore())
+
+  function Panel() {
+    const [flag, setFlag] = useState(false)
+    return (
+      <DisplayPopover
+        label="Display options"
+        trigger={<button type="button">Display</button>}
+      >
+        <DisplayPopover.Section>
+          <ToggleRow label="Show empty columns" checked={flag} onCheckedChange={setFlag} />
+        </DisplayPopover.Section>
+        <DisplayPopover.Section>
+          <PopoverFooterActions onReset={() => setFlag(false)} />
+        </DisplayPopover.Section>
+      </DisplayPopover>
+    )
+  }
+
+  it('opens, closes on Escape, and returns focus to its trigger', async () => {
+    const user = userEvent.setup()
+    render(<Panel />)
+    const trigger = screen.getByRole('button', { name: 'Display' })
+
+    await user.click(trigger)
+    expect(screen.getByRole('dialog', { name: 'Display options' })).toBeInTheDocument()
+
+    await user.keyboard('{Escape}')
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+  })
+
+  it('keeps Tab inside the panel', async () => {
+    const user = userEvent.setup()
+    render(<Panel />)
+    await user.click(screen.getByRole('button', { name: 'Display' }))
+
+    const panel = screen.getByRole('dialog', { name: 'Display options' })
+    const reset = screen.getByRole('button', { name: 'Reset to defaults' })
+
+    reset.focus()
+    await user.tab()
+    // Without the trap, focus walks out of the portal onto the page behind.
+    expect(panel.contains(document.activeElement)).toBe(true)
+  })
+})