@prenta/admin 2.6.1 → 2.7.0

package/src/__tests__/components/shell-primitives.render.test.tsx

@@ -0,0 +1,951 @@
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import { useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { toast } from 'sonner'
+
+import { Breadcrumb } from '../../components/ui/Breadcrumb.js'
+import { Button } from '../../components/ui/Button.js'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/Card.js'
+import { CountChip } from '../../components/ui/CountChip.js'
+import { PageHeader } from '../../components/ui/PageHeader.js'
+import { Segmented } from '../../components/ui/Segmented.js'
+import { Switch, Toggle } from '../../components/ui/Toggle.js'
+import { Toaster } from '../../components/ui/Toaster.js'
+import { UnderlineTabPanel, UnderlineTabs } from '../../components/ui/UnderlineTabs.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { AdminLinksProvider } from '../../components/ui/admin-links.js'
+import { AdminShell } from '../../layout/primitives/AdminShell.js'
+
+afterEach(cleanup)
+
+/**
+ * P-03 shared primitives (docs/design/prenta/specs/SHELL.md §4–7). This file is
+ * the "test page": it renders every primitive and every variant, and pins the
+ * kit values each one must carry.
+ */
+
+const classOf = (el: Element | null) => el?.getAttribute('class') ?? ''
+
+describe('PageHeader', () => {
+  it('renders title, subtitle, actions and an optional breadcrumb', () => {
+    render(
+      <PageHeader
+        title="Post Types"
+        subtitle="Define content models and their fields."
+        actions={<Button>New Post Type</Button>}
+        breadcrumb={
+          <Breadcrumb items={[{ label: 'Dashboard', href: '/' }, { label: 'Post Types' }]} />
+        }
+      />,
+    )
+    const heading = screen.getByRole('heading', { level: 1, name: 'Post Types' })
+    expect(classOf(heading)).toContain('text-page')
+    expect(screen.getByText('Define content models and their fields.')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'New Post Type' })).toBeTruthy()
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeTruthy()
+  })
+
+  it('pads to the page gutter unless flush', () => {
+    const { container, rerender } = render(<PageHeader title="Jobs" />)
+    expect(classOf(container.querySelector('header'))).toContain('px-[var(--gut)] pt-3.5')
+    rerender(<PageHeader title="Jobs" flush />)
+    expect(classOf(container.querySelector('header'))).not.toContain('px-[var(--gut)]')
+    expect(screen.queryByRole('navigation')).toBeNull()
+  })
+})
+
+describe('Breadcrumb', () => {
+  it('marks the current page and hides the separators', () => {
+    const onPosts = vi.fn()
+    render(
+      <Breadcrumb
+        items={[
+          { label: 'Dashboard', href: '/admin' },
+          { label: 'Posts', onClick: onPosts },
+          { label: 'Post Types' },
+        ]}
+      />,
+    )
+    const nav = screen.getByRole('navigation', { name: 'Breadcrumb' })
+    expect(screen.getByRole('link', { name: 'Dashboard' }).getAttribute('href')).toBe('/admin')
+    fireEvent.click(screen.getByRole('button', { name: 'Posts' }))
+    expect(onPosts).toHaveBeenCalledOnce()
+    const current = within(nav).getByText('Post Types')
+    expect(current.getAttribute('aria-current')).toBe('page')
+    expect(classOf(current)).toContain('font-[550]')
+    const separators = nav.querySelectorAll('li[aria-hidden="true"]')
+    expect(separators).toHaveLength(2)
+    expect(separators[0]?.textContent).toBe('/')
+  })
+
+  it('routes plain clicks on a link with onClick in-app, but leaves modified clicks alone', () => {
+    const onClick = vi.fn()
+    render(
+      <Breadcrumb items={[{ label: 'Forms', href: '/admin/forms', onClick }, { label: 'Spam' }]} />,
+    )
+    const link = screen.getByRole('link', { name: 'Forms' })
+    fireEvent.click(link)
+    expect(onClick).toHaveBeenCalledOnce()
+    fireEvent.click(link, { metaKey: true })
+    expect(onClick).toHaveBeenCalledOnce()
+  })
+
+  it('renders a plain ancestor when it has nowhere to go, and nothing for no items', () => {
+    const { container, rerender } = render(
+      <Breadcrumb items={[{ label: 'Appearance' }, { label: 'Widgets' }]} />,
+    )
+    expect(screen.queryByRole('link')).toBeNull()
+    expect(screen.queryByRole('button')).toBeNull()
+    rerender(<Breadcrumb items={[]} />)
+    expect(container.innerHTML).toBe('')
+  })
+})
+
+describe('CountChip', () => {
+  it('renders static, link and button chips with the kit look', () => {
+    const onClick = vi.fn()
+    render(
+      <>
+        <CountChip n={12} label="total" />
+        <CountChip n={3} label="unread" onClick={onClick} selected />
+        <CountChip n={4} label="active" tone="ok" href="/admin/script-tags" />
+        <CountChip n={2} label="failed" tone="bad" />
+      </>,
+    )
+    const total = screen.getByText('total')
+    expect(classOf(total)).toContain('font-[450]')
+    expect(classOf(total)).toContain('rounded-pill')
+    expect(classOf(total)).toContain('whitespace-nowrap')
+    expect(classOf(total.querySelector('b'))).toContain('tabular-nums')
+
+    const unread = screen.getByRole('button', { name: '3 unread' })
+    expect(unread.getAttribute('aria-pressed')).toBe('true')
+    expect(classOf(unread)).toContain('bg-acc-l')
+    fireEvent.click(unread)
+    expect(onClick).toHaveBeenCalledOnce()
+
+    const active = screen.getByRole('link', { name: '4 active' })
+    expect(classOf(active.querySelector('b'))).toContain('text-suc')
+    expect(classOf(screen.getByText('failed'))).toContain('text-err')
+  })
+
+  // P-06: Media's and Script Tags' header counts moved onto CountChip.
+  it('takes a formatted value, a muted number and a leading icon', () => {
+    render(
+      <>
+        <CountChip n="2.4 GB" label="Storage used" />
+        <CountChip n={1} label="Inactive" tone="muted" />
+        <CountChip n={5} label="Consent-gated" icon={<svg data-testid="shield" />} />
+      </>,
+    )
+    expect(screen.getByText('2.4 GB').tagName).toBe('B')
+    expect(classOf(screen.getByText('Inactive').querySelector('b'))).toContain('text-faint')
+    const icon = screen.getByTestId('shield').parentElement!
+    expect(icon.getAttribute('aria-hidden')).toBe('true')
+    expect(classOf(icon)).toContain('[&>svg]:h-3')
+    expect(screen.getByText('Consent-gated').textContent).toBe('5Consent-gated')
+  })
+
+  it('keeps a selected chip visible in forced-colors mode', () => {
+    render(
+      <>
+        <CountChip n={3} label="unread" onClick={() => {}} selected />
+        <CountChip n={2} label="starred" onClick={() => {}} selected={false} />
+      </>,
+    )
+    expect(classOf(screen.getByRole('button', { name: '3 unread' }))).toContain(
+      'forced-colors:outline-2',
+    )
+    expect(classOf(screen.getByRole('button', { name: '2 starred' }))).not.toContain(
+      'forced-colors:',
+    )
+  })
+})
+
+describe('UnderlineTabs', () => {
+  const TABS = [
+    { id: 'general', label: 'General', icon: <svg data-testid="icon" /> },
+    { id: 'users', label: 'Users', count: 6 },
+    { id: 'api-keys', label: 'API Keys', count: 4, badge: <b>Live</b> },
+  ]
+
+  function Harness({ initial = 'general' }: { initial?: string }) {
+    const [tab, setTab] = useState(initial)
+    return (
+      <>
+        <UnderlineTabs
+          label="Settings"
+          idBase="settings"
+          tabs={TABS}
+          value={tab}
+          onChange={setTab}
+        />
+        {TABS.map((t) =>
+          t.id === tab ? (
+            <UnderlineTabPanel key={t.id} idBase="settings" tabId={t.id}>
+              {t.label} panel
+            </UnderlineTabPanel>
+          ) : null,
+        )}
+      </>
+    )
+  }
+
+  it('marks the active tab with the inset box-shadow, never a border', () => {
+    render(<Harness />)
+    const general = screen.getByRole('tab', { name: 'General' })
+    expect(general.getAttribute('aria-selected')).toBe('true')
+    expect(classOf(general)).toContain('shadow-[inset_0_-2px_0_var(--acc)]')
+    expect(classOf(general)).not.toContain('border-b')
+    expect(classOf(screen.getByRole('tablist'))).toContain('shadow-[inset_0_-1px_0_var(--bdr)]')
+    expect(screen.getByTestId('icon')).toBeTruthy()
+    expect(screen.getByRole('tab', { name: 'Users 6' })).toBeTruthy()
+    expect(screen.getByRole('tab', { name: 'API Keys 4 Live' })).toBeTruthy()
+  })
+
+  it('wires each tab to its panel', () => {
+    render(<Harness />)
+    const tab = screen.getByRole('tab', { name: 'General' })
+    const panel = screen.getByRole('tabpanel')
+    expect(tab.getAttribute('aria-controls')).toBe(panel.id)
+    expect(panel.getAttribute('aria-labelledby')).toBe(tab.id)
+  })
+
+  it('moves with arrow keys, Home and End, with a roving tab stop', () => {
+    render(<Harness />)
+    const list = screen.getByRole('tablist')
+    fireEvent.keyDown(list, { key: 'ArrowRight' })
+    const users = screen.getByRole('tab', { name: 'Users 6' })
+    expect(users.getAttribute('aria-selected')).toBe('true')
+    expect(users.getAttribute('tabindex')).toBe('0')
+    expect(document.activeElement).toBe(users)
+    expect(screen.getByRole('tab', { name: 'General' }).getAttribute('tabindex')).toBe('-1')
+    fireEvent.keyDown(list, { key: 'End' })
+    expect(screen.getByRole('tabpanel').textContent).toBe('API Keys panel')
+    fireEvent.keyDown(list, { key: 'ArrowRight' })
+    expect(screen.getByRole('tabpanel').textContent).toBe('General panel')
+    fireEvent.keyDown(list, { key: 'ArrowLeft' })
+    expect(screen.getByRole('tabpanel').textContent).toBe('API Keys panel')
+    fireEvent.keyDown(list, { key: 'Home' })
+    expect(screen.getByRole('tabpanel').textContent).toBe('General panel')
+  })
+
+  /**
+   * Gives the strip a box: `scrollWidth` of content in a `clientWidth` window,
+   * tabs laid out at `tabWidth` each. happy-dom has no layout of its own.
+   */
+  function stubStrip(scrollWidth: number, initialWidth: number, tabWidth = 200) {
+    const list = screen.getByRole('tablist')
+    let left = 0
+    let clientWidth = initialWidth
+    const clamp = (v: number) => Math.max(0, Math.min(v, scrollWidth - clientWidth))
+    Object.defineProperty(list, 'scrollWidth', { configurable: true, get: () => scrollWidth })
+    Object.defineProperty(list, 'clientWidth', { configurable: true, get: () => clientWidth })
+    Object.defineProperty(list, 'scrollLeft', {
+      configurable: true,
+      get: () => left,
+      set: (v: number) => {
+        left = clamp(v)
+      },
+    })
+    // Called from a click handler, already inside act: a plain event, not fireEvent.
+    const scrollBy = vi.fn((options: ScrollToOptions) => {
+      left = clamp(left + (options.left ?? 0))
+      list.dispatchEvent(new Event('scroll'))
+    })
+    list.scrollBy = scrollBy as unknown as typeof list.scrollBy
+    screen.getAllByRole('tab').forEach((tab, index) => {
+      Object.defineProperty(tab, 'offsetLeft', { configurable: true, get: () => index * tabWidth })
+      Object.defineProperty(tab, 'offsetWidth', { configurable: true, get: () => tabWidth })
+    })
+    const scrollTo = (v: number) => {
+      left = clamp(v)
+      fireEvent.scroll(list)
+    }
+    /** Narrow or widen the strip's window (the observer is the caller's to fire). */
+    const resize = (width: number) => {
+      clientWidth = width
+    }
+    return { list, scrollBy, scrollTo, resize }
+  }
+
+  const END_FADE = '[mask-image:linear-gradient(90deg,black_calc(100%-48px),transparent)]'
+  const START_FADE = '[mask-image:linear-gradient(90deg,transparent,black_48px)]'
+  const BOTH_FADES =
+    '[mask-image:linear-gradient(90deg,transparent,black_48px,black_calc(100%-48px),transparent)]'
+  const scrollButton = (side: 'start' | 'end') =>
+    document.querySelector<HTMLButtonElement>(`[data-tabs-scroll="${side}"]`)
+
+  it('shows no fade and no scroll buttons while every tab fits', () => {
+    render(<Harness />)
+    expect(classOf(screen.getByRole('tablist'))).not.toContain('mask-image')
+    expect(scrollButton('start')).toBeNull()
+    expect(scrollButton('end')).toBeNull()
+  })
+
+  it('fades only the edges that hide tabs, each with a scroll button for the mouse', () => {
+    render(<Harness />)
+    const { list, scrollBy, scrollTo } = stubStrip(600, 300)
+    fireEvent.scroll(list)
+    expect(classOf(list)).toContain(END_FADE)
+    expect(list.getAttribute('data-overflow-end')).toBe('true')
+    expect(scrollButton('start')).toBeNull()
+
+    // Hidden from the keyboard and screen readers, which reach every tab
+    // through the tab list; a click never takes focus.
+    const end = scrollButton('end')!
+    expect(end.getAttribute('aria-hidden')).toBe('true')
+    expect(end.getAttribute('tabindex')).toBe('-1')
+    expect(fireEvent.mouseDown(end)).toBe(false)
+
+    // One page minus the two fades.
+    fireEvent.click(end)
+    expect(scrollBy).toHaveBeenCalledWith({ left: 204 })
+    expect(classOf(list)).toContain(BOTH_FADES)
+    expect(scrollButton('start')).toBeTruthy()
+    expect(scrollButton('end')).toBeTruthy()
+
+    scrollTo(300)
+    expect(classOf(list)).toContain(START_FADE)
+    expect(scrollButton('end')).toBeNull()
+    fireEvent.click(scrollButton('start')!)
+    expect(scrollBy).toHaveBeenLastCalledWith({ left: -204 })
+    expect(list.scrollLeft).toBe(96)
+  })
+
+  it('scrolls a tab chosen from the keyboard clear of the fades, never the page', () => {
+    render(<Harness />)
+    const { list } = stubStrip(600, 300)
+    const original = Element.prototype.scrollIntoView
+    const scrollIntoView = vi.fn()
+    Element.prototype.scrollIntoView = scrollIntoView
+    try {
+      fireEvent.scroll(list)
+
+      fireEvent.keyDown(list, { key: 'End' })
+      expect(list.scrollLeft).toBe(300)
+      expect(classOf(list)).toContain(START_FADE)
+      expect(list.hasAttribute('data-overflow-end')).toBe(false)
+
+      fireEvent.keyDown(list, { key: 'Home' })
+      expect(list.scrollLeft).toBe(0)
+      expect(classOf(list)).toContain(END_FADE)
+      expect(scrollIntoView).not.toHaveBeenCalled()
+    } finally {
+      Element.prototype.scrollIntoView = original
+    }
+  })
+
+  it('opens scrolled to a selected tab that starts out hidden, without a glide', () => {
+    // Layout before the first render: the strip is 300px of 600, tabs 200px each.
+    const proto = HTMLElement.prototype
+    const saved = (
+      ['scrollWidth', 'clientWidth', 'scrollLeft', 'offsetLeft', 'offsetWidth'] as const
+    ).map((key) => [key, Object.getOwnPropertyDescriptor(proto, key)] as const)
+    const lefts = new WeakMap<HTMLElement, number>()
+    const behaviours: string[] = []
+    const isList = (el: HTMLElement) => el.getAttribute('role') === 'tablist'
+    const isTab = (el: HTMLElement) => el.getAttribute('role') === 'tab'
+    Object.defineProperties(proto, {
+      scrollWidth: { configurable: true, get: () => 600 },
+      clientWidth: { configurable: true, get: () => 300 },
+      scrollLeft: {
+        configurable: true,
+        get(this: HTMLElement) {
+          return lefts.get(this) ?? 0
+        },
+        set(this: HTMLElement, v: number) {
+          if (isList(this)) behaviours.push(this.style.scrollBehavior)
+          lefts.set(this, Math.max(0, Math.min(v, 300)))
+        },
+      },
+      offsetLeft: {
+        configurable: true,
+        get(this: HTMLElement) {
+          return isTab(this) ? [...this.parentElement!.children].indexOf(this) * 200 : 0
+        },
+      },
+      offsetWidth: {
+        configurable: true,
+        get(this: HTMLElement) {
+          return isTab(this) ? 200 : 0
+        },
+      },
+    })
+    try {
+      render(<Harness initial="api-keys" />)
+      const list = screen.getByRole('tablist')
+      expect(list.scrollLeft).toBe(300)
+      expect(behaviours).toEqual(['auto'])
+      expect(list.style.scrollBehavior).toBe('')
+      expect(classOf(list)).toContain(START_FADE)
+    } finally {
+      for (const [key, descriptor] of saved) {
+        if (descriptor) Object.defineProperty(proto, key, descriptor)
+        else delete (proto as unknown as Record<string, unknown>)[key]
+      }
+    }
+  })
+
+  // Fixes from the independent review of P-06.
+  it('treats the open tab as no change, from a click or Home/End', () => {
+    const onChange = vi.fn()
+    render(<UnderlineTabs label="Tabs" tabs={TABS} value="general" onChange={onChange} />)
+    fireEvent.click(screen.getByRole('tab', { name: 'General' }))
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'Home' })
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'End' })
+    expect(onChange).toHaveBeenCalledWith('api-keys')
+  })
+
+  it('leaves modified arrows to the browser (Alt+Left is Back)', () => {
+    const onChange = vi.fn()
+    render(<UnderlineTabs label="Tabs" tabs={TABS} value="users" onChange={onChange} />)
+    const list = screen.getByRole('tablist')
+    for (const modifier of ['altKey', 'ctrlKey', 'metaKey', 'shiftKey']) {
+      expect(fireEvent.keyDown(list, { key: 'ArrowLeft', [modifier]: true })).toBe(true)
+    }
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('brings the selected tab back into view when the strip changes width', () => {
+    const callbacks: ResizeObserverCallback[] = []
+    const Original = globalThis.ResizeObserver
+    globalThis.ResizeObserver = class {
+      constructor(callback: ResizeObserverCallback) {
+        callbacks.push(callback)
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver
+    try {
+      render(<Harness initial="api-keys" />)
+      const { list, resize, scrollTo } = stubStrip(600, 300)
+      // The strip gets its 300px box: API Keys is revealed.
+      act(() => callbacks.at(-1)!([], {} as ResizeObserver))
+      expect(list.scrollLeft).toBe(300)
+      // Scrolled back by hand, then a tab alone resizes (a count arriving):
+      // same strip width, so nothing moves.
+      scrollTo(0)
+      act(() => callbacks.at(-1)!([], {} as ResizeObserver))
+      expect(list.scrollLeft).toBe(0)
+      // The strip narrows: API Keys (400–600px) comes back into view.
+      resize(250)
+      act(() => callbacks.at(-1)!([], {} as ResizeObserver))
+      // 400 + 200 + 48 − 250 = 398, clamped to the end of the strip (350).
+      expect(list.scrollLeft).toBe(350)
+      expect(classOf(list)).toContain(START_FADE)
+    } finally {
+      globalThis.ResizeObserver = Original
+    }
+  })
+
+  it('keeps a spent scroll button under the pointer, inert, so a double click stays put', () => {
+    render(<Harness />)
+    const { list, scrollBy } = stubStrip(600, 300)
+    fireEvent.scroll(list)
+    const end = scrollButton('end')!
+    fireEvent.pointerEnter(end)
+    fireEvent.click(end)
+    expect(list.scrollLeft).toBe(204)
+    // The second click reaches the end; the button stays where the pointer is.
+    fireEvent.click(scrollButton('end')!)
+    expect(list.scrollLeft).toBe(300)
+    const spent = scrollButton('end')!
+    expect(spent).toBe(end)
+    expect(spent.hasAttribute('data-inactive')).toBe(true)
+    expect(classOf(spent)).toContain('opacity-0')
+    fireEvent.click(spent)
+    expect(scrollBy).toHaveBeenCalledTimes(2)
+    expect(screen.getByRole('tab', { selected: true }).textContent).toBe('General')
+    fireEvent.pointerLeave(spent)
+    expect(scrollButton('end')).toBeNull()
+  })
+
+  it('outlines the selected tab and divides the strip in forced-colors mode', () => {
+    render(<UnderlineTabs label="Tabs" tabs={TABS} value="users" onChange={() => {}} />)
+    expect(classOf(screen.getByRole('tab', { name: 'Users 6' }))).toContain(
+      'forced-colors:outline-2',
+    )
+    expect(classOf(screen.getByRole('tab', { name: 'General' }))).not.toContain('forced-colors:')
+    expect(classOf(screen.getByRole('tablist'))).toContain('forced-colors:border-b')
+  })
+
+  it("draws the page variant as Settings.html's .pg-tab", () => {
+    render(
+      <UnderlineTabs variant="page" label="Tabs" tabs={TABS} value="users" onChange={() => {}} />,
+    )
+    const general = screen.getByRole('tab', { name: 'General' })
+    expect(classOf(general)).toContain('font-medium')
+    expect(classOf(general)).toContain('text-faint')
+    expect(classOf(general)).toContain('px-4')
+    expect(classOf(screen.getByRole('tablist'))).not.toContain('gap-0.5')
+    const users = screen.getByRole('tab', { name: 'Users 6' })
+    expect(classOf(users)).toContain('text-acc')
+    expect(classOf(users)).toContain('shadow-[inset_0_-2px_0_var(--acc)]')
+  })
+
+  it("draws the drawer variant as the Jobs drawer's .jd-tabs, with no divider", () => {
+    render(
+      <UnderlineTabs variant="drawer" label="Tabs" tabs={TABS} value="users" onChange={() => {}} />,
+    )
+    const general = screen.getByRole('tab', { name: 'General' })
+    expect(classOf(general)).toContain('px-[11px]')
+    expect(classOf(general)).toContain('py-[9px]')
+    expect(classOf(general)).toContain('gap-1.5')
+    expect(classOf(general)).toContain('font-semibold')
+    expect(classOf(general)).toContain('text-sub')
+    const list = classOf(screen.getByRole('tablist'))
+    expect(list).toContain('gap-0.5')
+    expect(list).not.toContain('shadow-[inset_0_-1px_0_var(--bdr)]')
+    expect(list).not.toContain('forced-colors:border-b')
+    expect(classOf(screen.getByRole('tab', { name: 'Users 6' }))).toContain(
+      'shadow-[inset_0_-2px_0_var(--acc)]',
+    )
+  })
+
+  it('leaves aria-controls off when the caller renders no panels', () => {
+    render(<UnderlineTabs label="Tabs" tabs={TABS} value="general" onChange={() => {}} />)
+    expect(screen.getByRole('tab', { name: 'General' }).hasAttribute('aria-controls')).toBe(false)
+  })
+})
+
+describe('Segmented', () => {
+  it('raises the active segment and shows counts from either source', () => {
+    render(
+      <Segmented
+        label="Status"
+        value="all"
+        onChange={() => {}}
+        counts={{ active: 2 }}
+        options={[
+          { id: 'all', label: 'All', count: 4 },
+          { id: 'active', label: 'Active' },
+          { id: 'failed', label: 'Failed' },
+        ]}
+      />,
+    )
+    const all = screen.getByRole('tab', { name: 'All 4' })
+    expect(classOf(all)).toContain('bg-card')
+    expect(classOf(all)).toContain('shadow-shd')
+    expect(classOf(all.querySelector('b'))).toContain('text-acc')
+    const active = screen.getByRole('tab', { name: 'Active 2' })
+    expect(classOf(active.querySelector('b'))).toContain('text-faint')
+    expect(screen.getByRole('tab', { name: 'Failed' })).toBeTruthy()
+  })
+
+  it('moves with the arrow keys', () => {
+    const onChange = vi.fn()
+    render(
+      <Segmented
+        label="Density"
+        value="comfortable"
+        onChange={onChange}
+        options={[
+          { id: 'comfortable', label: 'Comfortable' },
+          { id: 'compact', label: 'Compact' },
+        ]}
+      />,
+    )
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'ArrowRight' })
+    expect(onChange).toHaveBeenCalledWith('compact')
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'ArrowLeft' })
+    expect(onChange).toHaveBeenLastCalledWith('compact')
+  })
+})
+
+describe('Switch', () => {
+  it('is a 34×19 role="switch" with aria-checked, in both variants', () => {
+    const onChange = vi.fn()
+    render(
+      <>
+        <Switch checked={false} onCheckedChange={onChange} aria-label="Accent" />
+        <Toggle checked variant="enabled" onCheckedChange={() => {}} aria-label="Enabled" />
+      </>,
+    )
+    const accent = screen.getByRole('switch', { name: 'Accent' })
+    expect(accent.getAttribute('aria-checked')).toBe('false')
+    expect(classOf(accent)).toContain('h-[19px] w-[34px]')
+    fireEvent.click(accent)
+    expect(onChange).toHaveBeenCalledWith(true)
+    const enabled = screen.getByRole('switch', { name: 'Enabled' })
+    expect(enabled.getAttribute('aria-checked')).toBe('true')
+    expect(classOf(enabled)).toContain('data-[state=checked]:bg-suc')
+  })
+})
+
+describe('UnsavedBar', () => {
+  it('shows no bar until dirty, then floats as the dark pill', () => {
+    const { rerender } = render(<UnsavedBar dirty={false} onDiscard={() => {}} onSave={() => {}} />)
+    expect(screen.queryByRole('region', { name: 'Unsaved changes' })).toBeNull()
+    expect(screen.queryByRole('button')).toBeNull()
+
+    const onSave = vi.fn()
+    const onDiscard = vi.fn()
+    rerender(<UnsavedBar dirty onDiscard={onDiscard} onSave={onSave} />)
+    const bar = screen.getByRole('region', { name: 'Unsaved changes' })
+    for (const cls of [
+      'sticky',
+      'bottom-4',
+      'ml-auto',
+      'w-[min(520px,100%)]',
+      'bg-txt',
+      'text-bg',
+      'rounded-12',
+      'shadow-bar',
+      // Focus rings on the dark pill are drawn in --bg (responsive.css).
+      'prenta-inverse',
+    ]) {
+      expect(classOf(bar)).toContain(cls)
+    }
+    expect(within(bar).getByText('Unsaved changes')).toBeTruthy()
+    // Discard is dimmed at rest but not while focused.
+    expect(classOf(screen.getByRole('button', { name: 'Discard' }))).toContain(
+      'focus-visible:opacity-100',
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Discard' }))
+    expect(onSave).toHaveBeenCalledOnce()
+    expect(onDiscard).toHaveBeenCalledOnce()
+  })
+
+  it('announces through a live region that exists before the form gets dirty', () => {
+    const { rerender } = render(<UnsavedBar dirty={false} onDiscard={() => {}} onSave={() => {}} />)
+    const live = screen.getByRole('status')
+    expect(live.getAttribute('aria-live')).toBe('polite')
+    // Fixed, so it can't stretch the shell's scroll area from the end of a long tab.
+    expect(classOf(live)).toContain('fixed!')
+    expect(live.textContent).toBe('')
+    rerender(<UnsavedBar dirty onDiscard={() => {}} onSave={() => {}} />)
+    // Same node, new text: the region was already in the tree.
+    expect(screen.getByRole('status')).toBe(live)
+    expect(live.textContent).toBe('Unsaved changes')
+  })
+
+  it('takes custom copy', () => {
+    render(
+      <UnsavedBar
+        dirty
+        label="Unsaved menu changes"
+        saveLabel="Save menus"
+        onDiscard={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    const bar = screen.getByRole('region', { name: 'Unsaved changes' })
+    expect(within(bar).getByText('Unsaved menu changes')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Save menus' })).toBeTruthy()
+  })
+
+  it('has the Settings card look (Settings.html .ap-save)', () => {
+    render(
+      <UnsavedBar
+        dirty
+        variant="card"
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        onDiscard={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    const bar = screen.getByRole('region', { name: 'Unsaved changes' })
+    for (const cls of [
+      'sticky',
+      'bottom-0',
+      'bg-card',
+      'border-bdr',
+      'rounded-12',
+      'shadow-save',
+    ]) {
+      expect(classOf(bar)).toContain(cls)
+    }
+    expect(classOf(bar)).not.toContain('bg-txt')
+    expect(bar.querySelector('.bg-warn')).toBeTruthy()
+    expect(classOf(screen.getByRole('button', { name: 'Reset' }))).toContain('prenta-touch-target')
+    expect(classOf(screen.getByRole('button', { name: 'Save changes' }))).toContain(
+      'prenta-touch-target',
+    )
+    expect(screen.getByRole('button', { name: 'Reset' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Save changes' })).toBeTruthy()
+  })
+})
+
+describe('Card', () => {
+  it('uses radius 12, the resting shadow and a 13px 16px header row', () => {
+    render(
+      <Card data-testid="card">
+        <CardHeader data-testid="head">
+          <CardTitle as="h2">Variant</CardTitle>
+          <CardDescription>Site default.</CardDescription>
+        </CardHeader>
+        <CardContent data-testid="body">Body</CardContent>
+      </Card>,
+    )
+    expect(classOf(screen.getByTestId('card'))).toContain('rounded-12')
+    expect(classOf(screen.getByTestId('card'))).toContain('shadow-shd')
+    expect(classOf(screen.getByTestId('head'))).toContain('px-4 py-[13px]')
+    expect(classOf(screen.getByTestId('head'))).toContain('border-b')
+    const title = screen.getByRole('heading', { level: 2, name: 'Variant' })
+    expect(classOf(title)).toContain('font-[650]')
+    expect(classOf(screen.getByTestId('body'))).toContain('px-4 py-3.5')
+  })
+})
+
+describe('Button', () => {
+  it('renders every kit variant', () => {
+    render(
+      <>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="secondary" size="sm">
+          Small
+        </Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="ai">AI Copilot</Button>
+        <Button variant="icon" size="icon" aria-label="Row action" />
+        <Button variant="icon" size="icon-lg" aria-label="Topbar action" />
+      </>,
+    )
+    const cls = (name: string) => classOf(screen.getByRole('button', { name }))
+    expect(cls('Primary')).toContain('h-[34px]')
+    expect(cls('Primary')).toContain('text-body')
+    expect(cls('Primary')).toContain('font-semibold')
+    expect(cls('Primary')).toContain('bg-acc')
+    expect(cls('Secondary')).toContain('bg-card')
+    expect(cls('Secondary')).toContain('border-bdr')
+    expect(cls('Small')).toContain('h-7')
+    expect(cls('Small')).toContain('text-meta')
+    expect(cls('Ghost')).toContain('border-transparent')
+    expect(cls('Danger')).toContain('text-err')
+    expect(cls('Danger')).toContain('color-mix(in_srgb,var(--err)_35%,var(--bdr))')
+    expect(cls('AI Copilot')).toContain('linear-gradient(135deg,var(--ai1),var(--ai2))')
+    expect(cls('Row action')).toContain('h-[30px] w-[30px]')
+    expect(cls('Topbar action')).toContain('h-[34px] w-[34px]')
+  })
+
+  it('marks AI buttons so the responsive collapse keeps their label', () => {
+    render(
+      <>
+        <Button variant="ai">AI Copilot</Button>
+        <Button variant="secondary">Export</Button>
+      </>,
+    )
+    expect(screen.getByRole('button', { name: 'AI Copilot' }).hasAttribute('data-keep-label')).toBe(
+      true,
+    )
+    expect(screen.getByRole('button', { name: 'Export' }).hasAttribute('data-keep-label')).toBe(
+      false,
+    )
+  })
+
+  it('is busy and disabled while loading', () => {
+    render(<Button loading>Save</Button>)
+    const button = screen.getByRole('button', { name: 'Save' }) as HTMLButtonElement
+    expect(button.disabled).toBe(true)
+    expect(button.getAttribute('aria-busy')).toBe('true')
+  })
+})
+
+describe('Toaster', () => {
+  it('paints sonner toasts as the kit toast, bottom-centre', async () => {
+    const { container } = render(<Toaster />)
+    act(() => {
+      toast('Saved · site revalidated')
+    })
+    const message = await screen.findByText('Saved · site revalidated')
+    const item = message.closest('[data-sonner-toast]')
+    expect(item).toBeTruthy()
+    for (const cls of [
+      'bg-txt',
+      'text-bg',
+      'rounded-9',
+      'px-4',
+      'py-2.5',
+      'text-body',
+      'font-medium',
+    ]) {
+      expect(classOf(item)).toContain(cls)
+    }
+    const list = container.querySelector('[data-sonner-toaster]')
+    expect(list?.getAttribute('data-y-position')).toBe('bottom')
+    expect(list?.getAttribute('data-x-position')).toBe('center')
+  })
+
+  it('drops the icon on success toasts and keeps it on errors', async () => {
+    render(<Toaster />)
+    act(() => {
+      toast.success('Menus saved')
+      toast.error('Save failed')
+    })
+    const ok = (await screen.findByText('Menus saved')).closest('[data-sonner-toast]')
+    const bad = (await screen.findByText('Save failed')).closest('[data-sonner-toast]')
+    expect(classOf(ok)).toContain('[&_[data-icon]]:hidden!')
+    expect(classOf(bad)).not.toContain('[&_[data-icon]]:hidden!')
+  })
+})
+
+/** Fixes from the independent review of the P-03 commit. */
+describe('P-03 review fixes', () => {
+  it('keeps the 44px touch hit area on the 34×19 switch', () => {
+    render(<Switch checked={false} onCheckedChange={() => {}} aria-label="Hit" />)
+    expect(classOf(screen.getByRole('switch', { name: 'Hit' }))).toContain('prenta-touch-hit')
+  })
+
+  it('selects nothing when the value matches no tab, but keeps a tab stop', () => {
+    render(
+      <>
+        <UnderlineTabs
+          label="Tabs"
+          value="missing"
+          onChange={() => {}}
+          tabs={[
+            { id: 'a', label: 'A' },
+            { id: 'b', label: 'B' },
+          ]}
+        />
+        <Segmented
+          label="Seg"
+          value="missing"
+          onChange={() => {}}
+          options={[
+            { id: 'x', label: 'X' },
+            { id: 'y', label: 'Y' },
+          ]}
+        />
+      </>,
+    )
+    for (const name of ['A', 'B', 'X', 'Y']) {
+      expect(screen.getByRole('tab', { name }).getAttribute('aria-selected')).toBe('false')
+    }
+    expect(screen.getByRole('tab', { name: 'A' }).getAttribute('tabindex')).toBe('0')
+    expect(screen.getByRole('tab', { name: 'X' }).getAttribute('tabindex')).toBe('0')
+    expect(classOf(screen.getByRole('tab', { name: 'A' }))).not.toContain('shadow-[inset_0_-2px')
+  })
+
+  it('lays the card header out as the kit row', () => {
+    render(
+      <CardHeader data-testid="head">
+        <CardTitle>Branding</CardTitle>
+      </CardHeader>,
+    )
+    expect(classOf(screen.getByTestId('head'))).toContain('flex items-center gap-2.5')
+    expect(classOf(screen.getByRole('heading', { name: 'Branding' }))).toContain('flex-1')
+  })
+
+  it('colors a selected chip number with the accent', () => {
+    render(<CountChip n={6} label="unread" onClick={() => {}} selected />)
+    const chip = screen.getByRole('button', { name: '6 unread' })
+    expect(classOf(chip.querySelector('b'))).toContain('text-acc')
+  })
+
+  it('gives the toast icon slot a box and keeps stacked toasts quiet', async () => {
+    render(<Toaster />)
+    act(() => {
+      toast.loading('Uploading')
+    })
+    const item = (await screen.findByText('Uploading')).closest('[data-sonner-toast]')
+    expect(classOf(item)).toContain('prenta-inverse')
+    expect(classOf(item)).toContain('[&[data-expanded=false][data-front=false]>*]:opacity-0')
+    expect(classOf(item?.querySelector('[data-icon]') ?? null)).toContain('size-4')
+  })
+
+  it('keeps errors and warnings up longer while the admin toaster is mounted', () => {
+    const error = vi.spyOn(toast, 'error')
+    const warning = vi.spyOn(toast, 'warning')
+    const { unmount } = render(<Toaster />)
+    toast.error('Server said no')
+    toast.warning('Careful', { duration: 1000 })
+    expect(error).toHaveBeenCalledWith('Server said no', { duration: 6000 })
+    expect(warning).toHaveBeenCalledWith('Careful', { duration: 1000 })
+    unmount()
+    expect(toast.error).toBe(error)
+    error.mockRestore()
+    warning.mockRestore()
+  })
+
+  it('gives toast.promise errors the longer lifetime too', async () => {
+    const promise = vi.spyOn(toast, 'promise')
+    const { unmount } = render(<Toaster />)
+    toast.promise(Promise.resolve(), { loading: 'Saving', success: 'Saved', error: 'Failed' })
+    const data = promise.mock.calls[0]![1]!
+    expect(data.success).toBe('Saved')
+    const error = data.error as (reason: unknown) => Promise<unknown>
+    await expect(error(new Error('boom'))).resolves.toEqual({ message: 'Failed', duration: 6000 })
+    // A duration the caller set for the whole promise toast still wins.
+    toast.promise(Promise.resolve(), { loading: 'Saving', error: 'Failed', duration: 1500 })
+    const own = promise.mock.calls[1]![1]!.error as (reason: unknown) => Promise<unknown>
+    await expect(own(new Error('boom'))).resolves.toEqual({ message: 'Failed', duration: 1500 })
+    unmount()
+    promise.mockRestore()
+  })
+
+  it('installs once for several toasters and restores only its own wrappers', () => {
+    const original = toast.error
+    const first = render(<Toaster />)
+    const wrapped = toast.error
+    expect(wrapped).not.toBe(original)
+    const second = render(<Toaster />)
+    expect(toast.error).toBe(wrapped)
+    first.unmount()
+    expect(toast.error).toBe(wrapped)
+    // Someone else replaced it meanwhile: leave theirs in place.
+    const theirs = vi.fn() as unknown as typeof toast.error
+    toast.error = theirs
+    second.unmount()
+    expect(toast.error).toBe(theirs)
+    toast.error = original
+  })
+
+  it('renders path crumbs as real links that navigate in-app', () => {
+    const navigate = vi.fn()
+    render(
+      <AdminLinksProvider value={{ href: (path) => `/admin${path === '/' ? '' : path}`, navigate }}>
+        <Breadcrumb
+          items={[
+            { label: 'Dashboard', path: '/' },
+            { label: 'Posts', path: '/posts' },
+            { label: 'Trash' },
+          ]}
+        />
+      </AdminLinksProvider>,
+    )
+    const posts = screen.getByRole('link', { name: 'Posts' })
+    expect(posts.getAttribute('href')).toBe('/admin/posts')
+    expect(screen.getByRole('link', { name: 'Dashboard' }).getAttribute('href')).toBe('/admin')
+    fireEvent.click(posts)
+    expect(navigate).toHaveBeenCalledWith('/posts')
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('puts a rich subtitle in a block wrapper, not a paragraph', () => {
+    render(
+      <PageHeader
+        title="Edit Hello"
+        subtitle={
+          <>
+            <span>DRAFT</span>
+            <div>Presence</div>
+          </>
+        }
+      />,
+    )
+    expect(screen.getByText('Presence').parentElement?.tagName).toBe('DIV')
+  })
+
+  it('pads the scroll area so a focused field clears the floating bar', () => {
+    render(<AdminShell sidebar={null}>Body</AdminShell>)
+    const main = document.getElementById('prenta-main')
+    expect(classOf(main)).toContain('scroll-pb-[84px]')
+    // Positioned, so absolutely positioned sr-only text stays in main's scroll area.
+    expect(classOf(main).split(/\s+/)).toContain('relative')
+  })
+})