@prenta/admin 0.93.0 → 0.94.0

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/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()
+  })
+})

package/src/components/EditorRail.tsx

@@ -96,7 +96,7 @@ export function EditorRail({ collapsedLabel, children }: EditorRailProps) {
   if (!open) {
     return (
       <div
-        className="bg-card border-border flex shrink-0 flex-col items-center gap-3 border-r py-3"
+        className="prenta-editor-rail-collapsed bg-card border-border flex shrink-0 flex-col items-center gap-3 border-r py-3"
         style={{ width: RAIL_COLLAPSED_WIDTH }}
       >
         <button
@@ -104,14 +104,14 @@ export function EditorRail({ collapsedLabel, children }: EditorRailProps) {
           onClick={() => setOpen(true)}
           aria-label={`Expand ${collapsedLabel} panel`}
           title={`Expand ${collapsedLabel} panel`}
-          className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
+          className="prenta-touch-target text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
         >
           <PanelLeftOpen className="h-4 w-4" aria-hidden />
         </button>
         {/* Vertical label so the strip still says which panel is hidden. The
             button's accessible name already carries it, hence aria-hidden. */}
         <span
-          className="text-muted-foreground text-[10px] font-bold tracking-[0.8px] whitespace-nowrap uppercase [writing-mode:vertical-rl]"
+          className="prenta-rail-label text-muted-foreground text-[10px] font-bold tracking-[0.8px] whitespace-nowrap uppercase [writing-mode:vertical-rl]"
           aria-hidden
         >
           {collapsedLabel}
@@ -123,7 +123,7 @@ export function EditorRail({ collapsedLabel, children }: EditorRailProps) {
   return (
     <div
       ref={railRef}
-      className={`bg-card border-border relative flex shrink-0 flex-col border-r ${
+      className={`prenta-editor-rail bg-card border-border relative flex shrink-0 flex-col border-r ${
         // A width transition during a drag fights the pointer: the panel
         // chases the cursor a frame behind and the resize feels broken.
         dragging ? '' : 'motion-safe:transition-[width] motion-safe:duration-(--mo-slow)'
@@ -209,7 +209,7 @@ export function RailHeader({
           onClick={onCollapse}
           aria-label={`Collapse ${title} panel`}
           title={`Collapse ${title} panel`}
-          className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
+          className="prenta-touch-target text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
         >
           <PanelLeftClose className="h-4 w-4" aria-hidden />
         </button>

package/src/components/page-tab/DirectiveSwitch.tsx

@@ -74,7 +74,10 @@ export function DirectiveSwitch({
           onCheckedChange={onChange}
           disabled={disabled}
           aria-label={`${label} — currently ${token}`}
-          className={`focus-visible:ring-ring relative h-[19px] w-[34px] shrink-0 rounded-full transition-colors duration-(--mo-base) focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50 ${
+          // `prenta-touch-hit`, not `prenta-touch-target`: growing the track to
+          // 44px would strand the thumb, which is positioned against it. The
+          // hit area grows; the switch keeps its measured 34×19.
+          className={`prenta-touch-hit focus-visible:ring-ring relative h-[19px] w-[34px] shrink-0 rounded-full transition-colors duration-(--mo-base) focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50 ${
             checked ? 'bg-success' : 'bg-destructive/55'
           }`}
         >

package/src/layout/primitives/AdminShell.tsx

@@ -71,6 +71,16 @@ export function AdminShell({
           : { display: 'block', position: 'relative' }
       }
     >
+      {/*
+       * First focusable thing in the admin, so a keyboard user's very first
+       * Tab offers a jump past the sidebar's ~20 nav items. Off-screen until
+       * focused; styling lives in `responsive.css` because it has to survive
+       * a consumer whose Tailwind build does not scan this file.
+       */}
+      <a className="prenta-skip-link" href="#prenta-main">
+        Skip to content
+      </a>
+
       {!isDesktop && mobileSidebarOpen && (
         <div
           aria-hidden
@@ -111,7 +121,9 @@ export function AdminShell({
       >
         {header}
         {breadcrumbs}
-        <main className="min-h-0 flex-1 overflow-y-auto">{children}</main>
+        <main id="prenta-main" className="min-h-0 flex-1 overflow-y-auto">
+          {children}
+        </main>
       </div>
     </div>
   )