@prenta/admin 0.93.0 → 0.95.0

package/src/__tests__/styles/responsive-layer.test.ts

@@ -0,0 +1,152 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * The responsive + accessibility layer (`src/styles/responsive.css`), ported
+ * from the design bundle's `design-system/cms-responsive.css`.
+ *
+ * Every way this breaks is invisible: a stylesheet that stops being imported,
+ * a rule whose class hook was renamed in a component, or a token override
+ * placed before the token it overrides all produce a page that renders
+ * perfectly and simply lacks the behaviour. None of it raises an error, and
+ * none of it shows up in a screenshot taken at a desktop width with a mouse.
+ *
+ * Reads the source rather than a compiled bundle so the suite does not depend
+ * on a build step; the entry-point assertion is what ties the two together.
+ */
+
+const PKG = fileURLToPath(new URL('../../../', import.meta.url))
+const read = (rel: string) => readFileSync(PKG + rel, 'utf8')
+
+const responsive = read('src/styles/responsive.css')
+const theme = read('src/styles/theme.css')
+const tokens = read('src/styles/prenta-tokens.css')
+
+describe('responsive + accessibility layer', () => {
+  it('is imported by theme.css, which both entry points pull in', () => {
+    // `build-input.css` (precompiled) and `tailwind.css` (advanced) each
+    // import theme.css and nothing else of ours, so importing from there is
+    // what puts this layer in front of every consumer.
+    expect(theme).toContain("@import './responsive.css'")
+    expect(read('src/styles/build-input.css')).toContain("@import './theme.css'")
+    expect(read('src/styles/tailwind.css')).toContain("@import './theme.css'")
+  })
+
+  it('is imported AFTER the token block it overrides', () => {
+    // Same specificity, so source order alone decides. Imported first, the
+    // prefers-contrast block would parse, match, and change nothing.
+    expect(theme.indexOf("@import './prenta-tokens.css'")).toBeLessThan(
+      theme.indexOf("@import './responsive.css'"),
+    )
+  })
+
+  it('scopes every rule to the admin root', () => {
+    // The admin renders inside consumer applications. A bare `:focus-visible`
+    // or `@media print` rule here would restyle the host's own pages.
+    const selectors = responsive
+      .replace(/\/\*[\s\S]*?\*\//g, '')
+      .split('\n')
+      .map((line) => line.trim())
+      .filter((line) => line.endsWith('{') && !line.startsWith('@'))
+
+    expect(selectors.length).toBeGreaterThan(10)
+    for (const selector of selectors) {
+      expect(selector, `unscoped selector: ${selector}`).toMatch(/\.prenta-admin/)
+    }
+  })
+
+  it('raises contrast rather than lowering it, in both themes', () => {
+    // The shipped --muted is already an AA correction over the handoff's own
+    // value (see prenta-tokens.css). A "more contrast" preference that moved
+    // it the other way would be worse than not honouring the preference.
+    const luminance = (hex: string) => {
+      const n = parseInt(hex.slice(1), 16)
+      return ((n >> 16) & 255) * 0.299 + ((n >> 8) & 255) * 0.587 + (n & 255) * 0.114
+    }
+    const declaration = (css: string, name: string, from = 0) => {
+      const match = new RegExp(`${name}:\\s*(#[0-9a-f]{6})`, 'i').exec(css.slice(from))
+      return match?.[1] ?? null
+    }
+
+    const contrastBlock = responsive.slice(responsive.indexOf('@media (prefers-contrast: more)'))
+    const darkStart = contrastBlock.indexOf('[data-theme=')
+
+    for (const name of ['--muted', '--sub', '--bdr']) {
+      const base = declaration(tokens, name)!
+      const raised = declaration(contrastBlock.slice(0, darkStart), name)!
+      // Light theme: darker text and borders on a light surface.
+      expect(luminance(raised), `light ${name}`).toBeLessThan(luminance(base))
+
+      const darkBase = declaration(
+        tokens,
+        name,
+        tokens.indexOf(".prenta-admin[data-theme='dark']"),
+      )!
+      const darkRaised = declaration(contrastBlock.slice(darkStart), name)!
+      // Dark theme: lighter, on a dark surface.
+      expect(luminance(darkRaised), `dark ${name}`).toBeGreaterThan(luminance(darkBase))
+    }
+  })
+
+  it('grows touch targets only under a coarse pointer', () => {
+    const coarse = responsive.slice(
+      responsive.indexOf('@media (pointer: coarse)'),
+      responsive.indexOf('@media (min-width: 2000px)'),
+    )
+    expect(coarse).toContain('min-height: 44px')
+    expect(coarse).toContain('min-width: 44px')
+    // A 26px button is right with a mouse. No control floor is imposed outside
+    // this block — the 44px that appears in the stacked-layout rules is the
+    // collapsed strip's own height, not a minimum applied to a control.
+    const elsewhere = responsive.replace(coarse, '').replace(/\/\*[\s\S]*?\*\//g, '')
+    expect(elsewhere).not.toMatch(/min-(height|width):\s*44px/)
+  })
+
+  it('grows the switch by its hit area, never by its box', () => {
+    // A switch positions its thumb against the track. Stretching the track to
+    // 44px leaves the thumb floating in dead space — the one carve-out the
+    // design bundle makes, and for this reason.
+    const hit = responsive.slice(responsive.indexOf('.prenta-touch-hit::after'))
+    expect(hit).toContain('position: absolute')
+    expect(hit.slice(0, hit.indexOf('}'))).not.toContain('min-height')
+  })
+
+  it('overrides the rail width with !important, because it is set inline', () => {
+    // The rail is drag-resizable and its width is an inline style, which no
+    // class can beat. Without this the stacked layout silently keeps a
+    // 360px-wide rail on a 390px screen.
+    const stacked = responsive.slice(responsive.indexOf('@media (max-width: 900px)'))
+    expect(stacked).toMatch(/\.prenta-editor-rail\s*\{[^}]*width:\s*100%\s*!important/)
+  })
+})
+
+describe('class hooks the layer targets', () => {
+  // A rule whose hook was renamed in a component is dead CSS with no error.
+  const hooks: Array<[string, string]> = [
+    ['prenta-skip-link', 'src/layout/primitives/AdminShell.tsx'],
+    ['prenta-editor-rail', 'src/components/EditorRail.tsx'],
+    ['prenta-editor-rail-collapsed', 'src/components/EditorRail.tsx'],
+    ['prenta-rail-label', 'src/components/EditorRail.tsx'],
+    ['prenta-editor-body', 'src/views/page-editor/PageSectionEditor.tsx'],
+    ['prenta-editor-header', 'src/views/page-editor/EditorTopBar.tsx'],
+    ['prenta-editor-inspector', 'src/views/page-editor/SectionInspector.tsx'],
+    ['prenta-canvas-scroll', 'src/views/page-editor/EditorCanvas.tsx'],
+    ['prenta-canvas-fit', 'src/views/page-editor/EditorCanvas.tsx'],
+    ['prenta-touch-target', 'src/components/EditorRail.tsx'],
+    ['prenta-touch-hit', 'src/components/page-tab/DirectiveSwitch.tsx'],
+  ]
+
+  for (const [hook, file] of hooks) {
+    it(`${hook} is applied in ${file.split('/').pop()}`, () => {
+      expect(responsive, `${hook} is unused in responsive.css`).toContain(hook)
+      expect(read(file), `${hook} is not applied by any component`).toContain(hook)
+    })
+  }
+
+  it('points the skip link at a target that exists', () => {
+    const shell = read('src/layout/primitives/AdminShell.tsx')
+    expect(shell).toContain('href="#prenta-main"')
+    expect(shell).toContain('id="prenta-main"')
+  })
+})

package/src/__tests__/views/canvas-review-mode.render.test.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { SectionRenderer } from '../../views/page-editor/sections/SectionRenderer.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+afterEach(cleanup)
+
+const SECTION: PageSection = {
+  id: 's1',
+  sectionType: 'hero',
+  name: 'Hero Banner',
+  visible: true,
+  content: { heading: 'A headline' },
+  settings: {},
+}
+
+function sectionEl(): HTMLElement {
+  const el = document.querySelector('[data-section-id="s1"]')
+  if (!el) throw new Error('section not rendered')
+  return el as HTMLElement
+}
+
+describe('SectionRenderer — review mode', () => {
+  it('marks a changed section and names the change in its label', () => {
+    render(<SectionRenderer section={SECTION} editable reviewing changed />)
+
+    expect(screen.getByText('Hero Banner — changed')).toBeTruthy()
+    expect(sectionEl().getAttribute('data-changed')).toBe('true')
+    expect(sectionEl().className).toContain('outline-dashed')
+  })
+
+  it('leaves an unchanged section unlabelled and unoutlined', () => {
+    render(<SectionRenderer section={SECTION} editable reviewing changed={false} />)
+
+    expect(screen.queryByText(/— changed/)).toBeNull()
+    expect(sectionEl().getAttribute('data-changed')).toBeNull()
+    expect(sectionEl().className).not.toContain('outline-dashed')
+  })
+
+  it('keeps the changed label even though review mode suppresses editing chrome', () => {
+    // The trap the handoff calls out by name: review mode and site-preview
+    // mode both drop the cursor, the hover outline and the section label, so
+    // it is tempting to share one suppression rule. Doing that hides the one
+    // label review mode exists to show.
+    render(<SectionRenderer section={SECTION} editable reviewing changed selected />)
+
+    expect(sectionEl().getAttribute('data-editable')).toBeNull()
+    expect(sectionEl().className).not.toContain('cursor-pointer')
+    // The selection label is gone…
+    expect(screen.queryByText('Hero Banner')).toBeNull()
+    // …and the changed label is not.
+    expect(screen.getByText('Hero Banner — changed')).toBeTruthy()
+  })
+
+  it('does not select a section while reviewing — that would edit the current page', () => {
+    const onSelect = vi.fn()
+    render(<SectionRenderer section={SECTION} editable reviewing changed onSelect={onSelect} />)
+
+    fireEvent.click(sectionEl())
+
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('still selects normally when not reviewing', () => {
+    const onSelect = vi.fn()
+    render(<SectionRenderer section={SECTION} editable onSelect={onSelect} />)
+
+    fireEvent.click(sectionEl())
+
+    expect(onSelect).toHaveBeenCalledWith('s1')
+    expect(sectionEl().getAttribute('data-editable')).toBe('true')
+  })
+
+  it('names the change in the accessible name, not only in colour and a dashed border', () => {
+    render(<SectionRenderer section={SECTION} editable reviewing changed />)
+    expect(sectionEl().getAttribute('aria-label')).toBe(
+      'Hero Banner section — changed in this version',
+    )
+  })
+
+  it('keeps a hidden section muted in a snapshot, as it was when saved', () => {
+    render(
+      <SectionRenderer
+        section={{ ...SECTION, visible: false }}
+        editable
+        reviewing
+        changed={false}
+      />,
+    )
+    expect(sectionEl().className).toContain('opacity-40')
+    expect(screen.getByText('Hidden')).toBeTruthy()
+  })
+})

package/src/__tests__/views/editor-top-bar.render.test.tsx

@@ -109,3 +109,45 @@ describe('EditorTopBar view-on-site vs view-live', () => {
     expect(screen.queryByRole('button', { name: /View (live|draft)/ })).toBeNull()
   })
 })
+
+describe('EditorTopBar history button', () => {
+  it('reports whether history is showing, since it takes over the rail rather than opening a dialog', () => {
+    const { unmount } = render(<EditorTopBar {...baseProps} onHistory={vi.fn()} />)
+    expect(
+      screen.getByRole('button', { name: 'Version history' }).getAttribute('aria-pressed'),
+    ).toBe('false')
+    unmount()
+
+    render(<EditorTopBar {...baseProps} onHistory={vi.fn()} historyOpen />)
+    const open = screen.getByRole('button', { name: 'Version history' })
+    expect(open.getAttribute('aria-pressed')).toBe('true')
+    expect(open.getAttribute('title')).toBe('Close version history')
+  })
+
+  it('gives every icon-only control a touch target', () => {
+    // These buttons are 32px square, which is a fine mouse target and an
+    // unusable thumb one. `prenta-touch-target` is what grows them under a
+    // coarse pointer — and it is applied per control, so a button written with
+    // a conditional className is easy to leave out. Exactly that happened to
+    // the history button, whose pressed state made it the odd one out.
+    render(
+      <EditorTopBar
+        {...baseProps}
+        onHistory={vi.fn()}
+        onViewOnSite={vi.fn()}
+        onToggleSitePreview={vi.fn()}
+      />,
+    )
+
+    for (const name of [
+      'Page settings',
+      'Version history',
+      'Preview page',
+      'Inline site preview',
+      'View draft on site',
+    ]) {
+      const button = screen.getByRole('button', { name })
+      expect(button.className, `${name} has no touch target`).toContain('prenta-touch-target')
+    }
+  })
+})

package/src/__tests__/views/section-edit-form.render.test.tsx

@@ -0,0 +1,162 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { SectionEditForm } from '../../views/page-editor/SectionEditForm.js'
+import { SectionsList } from '../../views/page-editor/SectionsPanel.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+afterEach(cleanup)
+
+function section(over: Partial<PageSection> = {}): PageSection {
+  return {
+    id: 's1',
+    sectionType: 'hero',
+    name: 'Hero Banner',
+    visible: true,
+    content: { heading: 'Existing headline' },
+    settings: { backgroundType: 'solid', backgroundColor: 'purple', paddingY: 'lg' },
+    ...over,
+  } as PageSection
+}
+
+function renderForm(over: Partial<Parameters<typeof SectionEditForm>[0]> = {}) {
+  const onContentChange = vi.fn()
+  const onMetaChange = vi.fn()
+  render(
+    <SectionEditForm
+      section={section()}
+      canEdit
+      onContentChange={onContentChange}
+      onMetaChange={onMetaChange}
+      {...over}
+    />,
+  )
+  return { onContentChange, onMetaChange }
+}
+
+describe('SectionEditForm — content only', () => {
+  it('renders the type’s content fields', () => {
+    renderForm()
+    expect(screen.getByDisplayValue('Existing headline')).toBeTruthy()
+    // Exact: the hero type also declares "Primary button URL", and a loose
+    // match would find both and fail for the wrong reason.
+    expect(screen.getByLabelText('Primary button')).toBeTruthy()
+    expect(screen.getByLabelText('Primary button URL')).toBeTruthy()
+  })
+
+  it('edits content through the patch sink', () => {
+    const { onContentChange } = renderForm()
+    fireEvent.change(screen.getByDisplayValue('Existing headline'), {
+      target: { value: 'New headline' },
+    })
+    expect(onContentChange).toHaveBeenCalledWith({ heading: 'New headline' })
+  })
+
+  /**
+   * The reason this component exists rather than a trimmed inspector. This CMS
+   * edits words, images and embed code; `docs/design-owned-sections.md` says
+   * the editor never changes styling, and the old panel offered background,
+   * colour, spacing and a CSS class one panel away from that sentence.
+   */
+  it('offers no styling controls at all', () => {
+    renderForm()
+    for (const label of [/^Background$/i, /^Color$/i, /^Spacing$/i, /CSS class/i]) {
+      expect(screen.queryByLabelText(label), `${label} is still editable`).toBeNull()
+    }
+    expect(screen.queryByText(/Appearance/i)).toBeNull()
+    expect(screen.queryByRole('combobox')).toBeNull()
+  })
+
+  it('says where the missing controls went, so their absence reads as deliberate', () => {
+    renderForm()
+    expect(screen.getByText(/come from the template/i)).toBeTruthy()
+  })
+
+  it('keeps the naming fields, which are not styling', () => {
+    const { onMetaChange } = renderForm()
+    fireEvent.change(screen.getByLabelText('Section name'), { target: { value: 'Intro' } })
+    expect(onMetaChange).toHaveBeenCalledWith({ name: 'Intro' })
+    expect(screen.getByLabelText('Internal label')).toBeTruthy()
+  })
+
+  it('explains an unmanaged section instead of rendering an empty form', () => {
+    renderForm({ section: section({ sectionType: 'opal-pricing', unmanaged: true }) })
+    expect(screen.getByText(/Managed outside the editor/i)).toBeTruthy()
+    expect(screen.queryByLabelText('Section name')).toBeNull()
+  })
+
+  it('disables every control for a read-only user', () => {
+    renderForm({ canEdit: false })
+    // Asserted on the fieldset, not the input: a disabled ancestor fieldset is
+    // what actually disables the controls, and `input.disabled` reports only
+    // the element's own attribute, so checking the input passes either way.
+    const field = screen.getByDisplayValue('Existing headline')
+    const fieldset = field.closest('fieldset')
+    expect(fieldset).toBeTruthy()
+    expect(fieldset!.disabled).toBe(true)
+  })
+})
+
+describe('SectionsList — the editor opens inside its row', () => {
+  const sections = [section(), section({ id: 's2', name: 'CTA Banner', sectionType: 'cta' })]
+
+  function renderList(selectedId: string | null, withEditor = true) {
+    const onSelect = vi.fn()
+    render(
+      <SectionsList
+        sections={sections}
+        selectedId={selectedId}
+        canEdit
+        onSelect={onSelect}
+        onToggleVisibility={vi.fn()}
+        renderEditor={
+          withEditor
+            ? (s) => <div data-testid={`editor-${s.id}`}>editor for {s.name}</div>
+            : undefined
+        }
+      />,
+    )
+    return { onSelect }
+  }
+
+  it('renders the editor for the selected row and no other', () => {
+    renderList('s1')
+    expect(screen.getByTestId('editor-s1')).toBeTruthy()
+    expect(screen.queryByTestId('editor-s2')).toBeNull()
+  })
+
+  it('renders no editor when nothing is selected', () => {
+    renderList(null)
+    expect(screen.queryByTestId('editor-s1')).toBeNull()
+  })
+
+  it('gives the row a disclosure control that reports its state', () => {
+    renderList('s1')
+    // The chevron is what says the row opens at all — without one the list
+    // reads as links to somewhere else, which is what it was.
+    const open = screen.getByRole('button', { name: 'Close Hero Banner' })
+    expect(open.getAttribute('aria-expanded')).toBe('true')
+    expect(
+      screen.getByRole('button', { name: 'Edit CTA Banner' }).getAttribute('aria-expanded'),
+    ).toBe('false')
+  })
+
+  it('points the disclosure at the editor it opens', () => {
+    renderList('s1')
+    const control = screen.getByRole('button', { name: 'Close Hero Banner' })
+    const target = control.getAttribute('aria-controls')
+    expect(target).toBe('section-editor-s1')
+    expect(document.getElementById(target!)).toBeTruthy()
+  })
+
+  it('selects a closed row when its chevron is used', () => {
+    const { onSelect } = renderList('s1')
+    fireEvent.click(screen.getByRole('button', { name: 'Edit CTA Banner' }))
+    expect(onSelect).toHaveBeenCalledWith('s2')
+  })
+
+  it('shows no disclosure when the list renders no editor (template list)', () => {
+    renderList('s1', false)
+    expect(screen.queryByRole('button', { name: /^(Edit|Close) / })).toBeNull()
+  })
+})

package/src/__tests__/views/section-inspector-media.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { companionDimensionKeys } from '../../views/page-editor/SectionInspector.js'
+import { companionDimensionKeys } from '../../views/page-editor/section-fields.js'
 
 describe('companionDimensionKeys', () => {
   it('maps a *Url field to *Width / *Height (feature, hero)', () => {

package/src/__tests__/views/section-inspector-repeater.render.test.tsx

@@ -3,7 +3,8 @@ import { describe, expect, it, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 import { createSection } from '../../lib/page-editor-service.js'
-import { SectionInspector, repeaterRowSummary } from '../../views/page-editor/SectionInspector.js'
+import { SectionInspector } from '../../views/page-editor/SectionInspector.js'
+import { repeaterRowSummary } from '../../views/page-editor/section-fields.js'
 import type { SectionFieldDef } from '../../views/page-editor/section-types.js'
 
 /**

package/src/__tests__/views/version-history-panel.render.test.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import { VersionHistoryPanel } from '../../views/page-editor/VersionHistoryPanel.js'
+import type { PageVersion } from '../../lib/version-history.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+afterEach(cleanup)
+
+function section(id: string, content: Record<string, unknown>): PageSection {
+  return { id, sectionType: 'hero', name: 'Hero Banner', visible: true, content, settings: {} }
+}
+
+const NOW = new Date()
+const iso = (hoursAgo: number) => new Date(NOW.getTime() - hoursAgo * 3_600_000).toISOString()
+
+const VERSIONS: PageVersion[] = [
+  {
+    id: 'v3',
+    changeType: 'PUBLISH',
+    createdAt: iso(1),
+    author: { id: 'u1', name: 'Sarah Mills' },
+    sections: [section('s1', { heading: 'Third headline' })],
+  },
+  {
+    id: 'v2',
+    changeType: 'UPDATE',
+    createdAt: iso(2),
+    author: { id: 'u2', name: 'Dan Ito' },
+    sections: [section('s1', { heading: 'Second headline' })],
+  },
+  {
+    id: 'v1',
+    changeType: 'CREATE',
+    createdAt: iso(30),
+    author: { id: 'u1', name: 'Sarah Mills' },
+    sections: [section('s1', { heading: 'First headline' })],
+  },
+]
+
+function renderPanel(props: Partial<React.ComponentProps<typeof VersionHistoryPanel>> = {}) {
+  const onSelect = vi.fn()
+  const onRestore = vi.fn()
+  const onClose = vi.fn()
+  render(
+    <VersionHistoryPanel
+      versions={VERSIONS}
+      loading={false}
+      error={null}
+      selectedIndex={0}
+      onSelect={onSelect}
+      onClose={onClose}
+      onRestore={onRestore}
+      restoring={false}
+      canRestore
+      {...props}
+    />,
+  )
+  return { onSelect, onRestore, onClose }
+}
+
+describe('VersionHistoryPanel', () => {
+  it('groups entries under sticky day headings', () => {
+    renderPanel()
+    expect(screen.getByRole('heading', { name: 'Today' })).toBeTruthy()
+    // v1 is 30 hours back, so it lands on its own day.
+    expect(screen.getAllByRole('heading', { level: 3 }).length).toBeGreaterThan(1)
+  })
+
+  it('marks the newest entry as current and shows the published pill', () => {
+    renderPanel()
+    expect(screen.getByText('Current')).toBeTruthy()
+    expect(screen.getByText('Published')).toBeTruthy()
+    // No pill claims "Draft" — nothing in this codebase records one.
+    expect(screen.queryByText('Draft')).toBeNull()
+  })
+
+  it('summarises each entry by what that save changed', () => {
+    renderPanel()
+    // v3 changed one field against v2.
+    expect(screen.getByText(/Sarah Mills · 1 change$/)).toBeTruthy()
+    // v1 has no predecessor in the list, so it reports no computed changes
+    // rather than claiming it created everything.
+    expect(screen.getByText(/Sarah Mills · no content changes/)).toBeTruthy()
+  })
+
+  it('shows the computed field diff, old struck through and new after it', () => {
+    renderPanel()
+    // The newest changed entry auto-expands.
+    expect(screen.getByText('Heading')).toBeTruthy()
+    const oldValue = screen.getByText('Second headline')
+    const newValue = screen.getByText('Third headline')
+    expect(oldValue.className).toContain('line-through')
+    expect(newValue.className).not.toContain('line-through')
+  })
+
+  it('selects the version when its row is activated, which is what drives the canvas', () => {
+    const { onSelect } = renderPanel()
+    fireEvent.click(screen.getByText(/Dan Ito/))
+    expect(onSelect).toHaveBeenCalledWith(1)
+  })
+
+  it('offers Restore only on the selected older row', () => {
+    renderPanel({ selectedIndex: 0 })
+    // Selected row is the current one — restoring it is a no-op.
+    expect(screen.queryByRole('button', { name: /Restore this version/ })).toBeNull()
+
+    cleanup()
+    renderPanel({ selectedIndex: 1 })
+    const restore = screen.getByRole('button', { name: /Restore this version/ })
+    expect(restore).toBeTruthy()
+  })
+
+  it('shows the diff for whichever version is selected, including one selected from outside', () => {
+    // The review bar and the canvas both move the selection without the panel
+    // being clicked. When disclosure was tracked separately from selection,
+    // the diff described one version while the canvas rendered another — and
+    // Restore sat on a row that was not open.
+    renderPanel({ selectedIndex: 1 })
+    expect(screen.getByText('First headline')).toBeTruthy()
+    expect(screen.getByText('Second headline')).toBeTruthy()
+    expect(screen.queryByText('Third headline')).toBeNull()
+    expect(screen.getByRole('button', { name: /Restore this version/ })).toBeTruthy()
+  })
+
+  it('collapses the row it is already on rather than reselecting it', () => {
+    const { onSelect } = renderPanel({ selectedIndex: 0 })
+    expect(screen.getByText('Heading')).toBeTruthy()
+
+    fireEvent.click(screen.getByText(/Sarah Mills · 1 change/))
+
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(screen.queryByText('Heading')).toBeNull()
+  })
+
+  it('can restore the oldest version, which by definition has no diff to show', () => {
+    // Restore used to live inside the diff block, so a version with no
+    // computed changes — the oldest one held, or a metadata-only save — was
+    // reviewable and not restorable. That is the wrong way round: the oldest
+    // version is the one a rollback most often wants.
+    renderPanel({ selectedIndex: 2 })
+
+    expect(screen.getByText(/No section changes to show/)).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Restore this version/ })).toBeTruthy()
+  })
+
+  it('hides Restore from a user who cannot edit', () => {
+    renderPanel({ selectedIndex: 1, canRestore: false })
+    expect(screen.queryByRole('button', { name: /Restore this version/ })).toBeNull()
+  })
+
+  it('restores the version whose row was clicked', () => {
+    const { onRestore } = renderPanel({ selectedIndex: 1 })
+    fireEvent.click(screen.getByRole('button', { name: /Restore this version/ }))
+    expect(onRestore).toHaveBeenCalledWith(expect.objectContaining({ id: 'v2' }))
+  })
+
+  it('renders two non-adjacent groups sharing a day label without colliding', () => {
+    // `groupVersionsByDay` walks CONSECUTIVE runs, so an out-of-order page
+    // legitimately yields ['Today', 'Yesterday', 'Today'] — its own test
+    // asserts that. Keyed on the label, the second "Today" collides with the
+    // first and React mis-associates the two sections' contents.
+    const outOfOrder: PageVersion[] = [
+      { ...VERSIONS[0]!, id: 'a', createdAt: iso(1) },
+      { ...VERSIONS[1]!, id: 'b', createdAt: iso(30) },
+      { ...VERSIONS[2]!, id: 'c', createdAt: iso(2) },
+    ]
+
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    renderPanel({ versions: outOfOrder })
+
+    expect(screen.getAllByRole('heading', { name: 'Today' })).toHaveLength(2)
+    expect(
+      spy.mock.calls.some((call) => String(call[0]).includes('same key')),
+      'React reported duplicate keys',
+    ).toBe(false)
+    spy.mockRestore()
+  })
+
+  it('reports an empty history rather than an empty box', () => {
+    renderPanel({ versions: [] })
+    expect(screen.getByText(/No versions yet/)).toBeTruthy()
+  })
+
+  it('surfaces a load failure', () => {
+    renderPanel({ versions: [], error: 'Network unreachable' })
+    expect(screen.getByText('Network unreachable')).toBeTruthy()
+  })
+
+  it('announces itself as a named region so it is reachable without sight of the overlay', () => {
+    renderPanel()
+    const region = screen.getByRole('region', { name: 'Version history' })
+    expect(within(region).getByRole('button', { name: 'Close version history' })).toBeTruthy()
+  })
+})