@prenta/admin 2.6.0 → 2.7.0

package/src/__tests__/layout/shell-nav.render.test.tsx

@@ -0,0 +1,983 @@
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { hydrateRoot, type Root } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const fetchFormsSidebarCounts = vi.fn(async () => [
+  { formId: 'f1', name: 'Contact Us', slug: 'contact-us', status: 'active', unread: 4 },
+  { formId: 'f2', name: 'Free RFP', slug: 'free-rfp', status: 'active', unread: 2 },
+])
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchFormsSidebarCounts: () => fetchFormsSidebarCounts(),
+}))
+
+vi.mock('../../components/ThemeProvider.js', () => ({
+  useTheme: () => ({
+    adminBrand: { primaryUrl: null, markUrl: null, darkUrl: null, initials: 'BW' },
+    resolvedTheme: 'light',
+    density: 'default',
+  }),
+}))
+
+// The real Header pulls in the command palette, notifications and locale
+// switcher; the Layout tests only need its menu button.
+vi.mock('../../layout/Header.js', () => ({
+  Header: ({ onToggleSidebar }: { onToggleSidebar: () => void }) => (
+    <button type="button" onClick={onToggleSidebar}>
+      Menu
+    </button>
+  ),
+}))
+
+const { Sidebar } = await import('../../layout/Sidebar.js')
+const { MobileTabBar } = await import('../../layout/MobileTabBar.js')
+const { Layout } = await import('../../layout/Layout.js')
+const { AdminShell, DRAWER_ID } = await import('../../layout/primitives/AdminShell.js')
+const { Toaster } = await import('../../components/ui/Toaster.js')
+const { toast } = await import('sonner')
+const {
+  activeChildPath,
+  applyFormsNav,
+  buildNavItems,
+  isPathActive,
+  SETTINGS_TABS,
+  withSettingsTabs,
+} = await import('../../layout/nav-config.js')
+
+afterEach(() => {
+  cleanup()
+  vi.unstubAllGlobals()
+})
+
+/**
+ * happy-dom has no real media queries; answer them from a fixed width. Reads
+ * `min-width` / `max-width` and range syntax (`width < 769px`,
+ * `769px <= width < 1025px`), joined by `and`.
+ */
+function matchesWidth(query: string, width: number): boolean {
+  const compare = (a: number, op: string, b: number) =>
+    op === '<' ? a < b : op === '<=' ? a <= b : op === '>' ? a > b : a >= b
+  return query.split(/\)\s*and\s*\(/).every((raw) => {
+    const part = raw.replace(/[()\s]/g, '')
+    const min = /^min-width:(\d+(?:\.\d+)?)px$/.exec(part)
+    if (min) return width >= Number(min[1])
+    const max = /^max-width:(\d+(?:\.\d+)?)px$/.exec(part)
+    if (max) return width <= Number(max[1])
+    const range = /^(?:(\d+(?:\.\d+)?)px(<=?|>=?))?width(?:(<=?|>=?)(\d+(?:\.\d+)?)px)?$/.exec(part)
+    if (!range) throw new Error(`stubWidth can't read ${query}`)
+    const [, lo, loOp, hiOp, hi] = range
+    return (
+      (lo === undefined || compare(Number(lo), loOp!, width)) &&
+      (hi === undefined || compare(width, hiOp!, Number(hi)))
+    )
+  })
+}
+
+function stubWidth(width: number) {
+  vi.stubGlobal('matchMedia', (query: string) => {
+    const matches = matchesWidth(query, width)
+    return {
+      matches,
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }
+  })
+}
+
+/**
+ * Whether a rail flyout is open, read from its trigger. (Radix hides the
+ * menu with `visibility: hidden` once happy-dom's zero-size layout puts it
+ * "out of view", so role queries can't tell open from closed.)
+ */
+const isOpen = (trigger: HTMLElement) => trigger.getAttribute('aria-expanded') === 'true'
+
+function renderSidebar(currentPath: string, collapsed = false, onNavigate = vi.fn()) {
+  render(
+    <Sidebar
+      collapsed={collapsed}
+      onToggleCollapse={() => {}}
+      currentPath={currentPath}
+      onNavigate={onNavigate}
+    />,
+  )
+  return onNavigate
+}
+
+/**
+ * P-02 shell & nav (docs/design/prenta/TRACKING.md, specs/SHELL.md §2).
+ */
+describe('nav config', () => {
+  it('lists the Forms children in the kit order, with per-form rows one level down', () => {
+    const forms = applyFormsNav(buildNavItems({}), [
+      { formId: 'f1', name: 'Contact Us', slug: 'contact-us', status: 'active', unread: 4 },
+      { formId: 'f2', name: 'Free RFP', slug: 'free-rfp', status: 'active', unread: 2 },
+    ] as never)
+    const item = forms.find((i) => i.label === 'Forms')
+    const label = (c: { label: string; badge?: number }) =>
+      `${c.label}${c.badge ? ` (${c.badge})` : ''}`
+    expect(item?.badge).toBe(6)
+    expect(item?.children?.map(label)).toEqual([
+      'All Entries (6)',
+      'All Forms',
+      'Spam',
+      'SMTP Log',
+      'Form Settings',
+    ])
+    // cms-layouts.js "3rd-level nav nesting": Entries and Forms → per-form.
+    expect(item?.children?.[0]?.children?.map(label)).toEqual(['Contact Us (4)', 'Free RFP (2)'])
+    expect(item?.children?.[0]?.children?.[0]?.path).toBe('/forms/f1/submissions')
+    expect(item?.children?.[1]?.children?.map((c) => c.path)).toEqual([
+      '/forms/f1/edit',
+      '/forms/f2/edit',
+    ])
+  })
+
+  it('lets the most specific sibling own the page', () => {
+    const pages = buildNavItems({}).find((i) => i.label === 'Pages')!
+    expect(activeChildPath(pages.children!, '/pages/trash')).toBe('/pages/trash')
+    expect(activeChildPath(pages.children!, '/pages/abc/edit')).toBe('/pages')
+  })
+
+  it('keeps config and plugin entries out of the tab bar set', () => {
+    const items = buildNavItems({
+      collections: {
+        pages: { slug: 'pages', type: 'page' },
+        faqs: { slug: 'faqs', labels: { plural: 'FAQs' } },
+        team: { slug: 'team', labels: { plural: 'Team' }, admin: { group: 'Company' } },
+      },
+      _pluginNavItems: [{ label: 'Redirect log', path: '/redirect-log' }],
+    })
+    expect(items.filter((i) => i.extra).map((i) => `${i.group}:${i.label}`)).toEqual([
+      'Content:FAQs',
+      'Content:Redirect log',
+      'Company:Team',
+    ])
+    // Config groups sit after CONTENT and before SETTINGS.
+    const labels = items.map((i) => i.label)
+    expect(labels.indexOf('Team')).toBeGreaterThan(labels.indexOf('Script Tags'))
+    expect(labels.indexOf('Team')).toBeLessThan(labels.indexOf('Jobs'))
+  })
+})
+
+describe('Sidebar', () => {
+  it('puts Jobs above Settings under the SETTINGS label', () => {
+    stubWidth(1280)
+    renderSidebar('/')
+    const nav = screen.getByRole('navigation', { name: 'Primary' })
+    const text = nav.textContent ?? ''
+    expect(text.indexOf('Settings')).toBeLessThan(text.indexOf('Jobs'))
+    expect(text.indexOf('Jobs')).toBeLessThan(text.lastIndexOf('Settings'))
+    // Pages, Posts and Appearance come before the CONTENT label.
+    expect(text.indexOf('Appearance')).toBeLessThan(text.indexOf('Content'))
+    expect(text.indexOf('Content')).toBeLessThan(text.indexOf('Media'))
+  })
+
+  it('toggles a parent on click at ≥1025px instead of navigating', () => {
+    stubWidth(1280)
+    const onNavigate = renderSidebar('/', false)
+    fireEvent.click(screen.getByRole('button', { name: 'Pages' }))
+    expect(onNavigate).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'All Pages' })).toBeTruthy()
+    expect(
+      screen.getByRole('button', { name: 'Collapse Pages' }).getAttribute('aria-expanded'),
+    ).toBe('true')
+  })
+
+  it('navigates from a parent in the mobile drawer (below 1025px)', () => {
+    stubWidth(600)
+    const onNavigate = renderSidebar('/', false)
+    fireEvent.click(screen.getByRole('button', { name: 'Pages' }))
+    expect(onNavigate).toHaveBeenCalledWith('/pages')
+  })
+
+  it('shows the Forms unread total as a kit badge, in the rail too', async () => {
+    stubWidth(924)
+    renderSidebar('/', true)
+    const forms = await screen.findByRole('button', { name: /Forms/ })
+    await waitFor(() => expect(within(forms).getByLabelText('6 unread')).toBeTruthy())
+    const badge = within(forms).getByLabelText('6 unread')
+    expect(badge.className).toContain('bg-err')
+    expect(badge.className).toContain('text-badge')
+    // Rail labels stay in the accessibility tree.
+    expect(within(forms).getByText('Forms').className).toContain('sr-only')
+  })
+
+  it('hides section labels in the ≤1024px rail', () => {
+    stubWidth(924)
+    renderSidebar('/', true)
+    const label = screen.getByText('Content')
+    expect(label.className).toContain('tablet:hidden')
+    expect(label.className).toContain('opacity-0')
+  })
+})
+
+describe('Forms third level', () => {
+  it('opens the per-form rows when one is the current page, and toggles them', async () => {
+    stubWidth(1280)
+    renderSidebar('/forms/f2/submissions')
+    const rfp = await screen.findByRole('button', { name: /^Free RFP/ })
+    expect(rfp.getAttribute('aria-current')).toBe('page')
+    expect(rfp.className).toContain('pl-[30px]')
+    // All Forms' rows stay closed; All Entries' are open.
+    const allForms = screen.getByRole('button', { name: 'Expand All Forms' })
+    expect(allForms.getAttribute('aria-expanded')).toBe('false')
+    const entries = screen.getByRole('button', { name: 'Collapse All Entries' })
+    fireEvent.click(entries)
+    expect(screen.queryByRole('button', { name: /^Free RFP/ })).toBeNull()
+  })
+
+  it('leaves per-form rows out of the rail flyout', async () => {
+    stubWidth(924)
+    renderSidebar('/', true)
+    const forms = await screen.findByRole('button', { name: /^Forms/ })
+    fireEvent.mouseEnter(forms.parentElement as HTMLElement)
+    await waitFor(() => expect(screen.getByText('All Entries')).toBeTruthy())
+    expect(screen.getByText('Form Settings')).toBeTruthy()
+    expect(screen.queryByText('Contact Us')).toBeNull()
+  })
+})
+
+describe('MobileTabBar', () => {
+  it('shows one tab per kit destination plus More, and leaves extras to the drawer', () => {
+    const items = applyFormsNav(
+      buildNavItems({
+        collections: {
+          pages: { slug: 'pages', type: 'page' },
+          blog: { slug: 'blog', type: 'post' },
+          faqs: { slug: 'faqs', labels: { plural: 'FAQs' } },
+        },
+      }),
+      [
+        { formId: 'f1', name: 'Contact Us', slug: 'contact-us', status: 'active', unread: 3 },
+      ] as never,
+    )
+    const onNavigate = vi.fn()
+    const onMore = vi.fn()
+    render(
+      <MobileTabBar
+        items={items}
+        currentPath="/forms/entries"
+        onNavigate={onNavigate}
+        onMore={onMore}
+        moreOpen={false}
+      />,
+    )
+    const bar = screen.getByRole('navigation', { name: 'Tab bar' })
+    const tabs = within(bar)
+      .getAllByRole('button')
+      .map((b) => b.textContent)
+    expect(tabs).toEqual([
+      'Dashboard',
+      'Pages',
+      'Posts',
+      'Appearance',
+      'Media',
+      'Forms3',
+      'SEO',
+      'Script Tags',
+      'Jobs',
+      'Settings',
+      'More',
+    ])
+    // A child page marks its parent tab.
+    expect(
+      within(bar)
+        .getByRole('button', { name: /^Forms/ })
+        .getAttribute('aria-current'),
+    ).toBe('page')
+    fireEvent.click(within(bar).getByRole('button', { name: 'Pages' }))
+    expect(onNavigate).toHaveBeenCalledWith('/pages')
+    const more = within(bar).getByRole('button', { name: 'More' })
+    expect(more.getAttribute('aria-expanded')).toBe('false')
+    fireEvent.click(more)
+    expect(onMore).toHaveBeenCalledOnce()
+  })
+})
+
+describe('AdminShell', () => {
+  it('renders the tab bar on mobile only and keeps the closed drawer inert', async () => {
+    stubWidth(600)
+    const { rerender } = render(
+      <AdminShell
+        desktopBreakpoint={769}
+        sidebar={<button type="button">Drawer link</button>}
+        tabBar={<div>Tab bar</div>}
+      >
+        Body
+      </AdminShell>,
+    )
+    expect(screen.getByText('Tab bar')).toBeTruthy()
+    const drawer = screen.getByText('Drawer link').parentElement as HTMLElement & {
+      inert?: boolean
+    }
+    await waitFor(() => expect(drawer.inert).toBe(true))
+    // (happy-dom drops the `calc(… env(safe-area-inset-bottom))` padding, so it
+    // isn't asserted here; the tab bar test checks the safe-area classes.)
+
+    rerender(
+      <AdminShell
+        desktopBreakpoint={769}
+        mobileSidebarOpen
+        sidebar={<button type="button">Drawer link</button>}
+        tabBar={<div>Tab bar</div>}
+      >
+        Body
+      </AdminShell>,
+    )
+    await waitFor(() => expect(drawer.inert).toBe(false))
+
+    cleanup()
+    stubWidth(1280)
+    await act(async () => {
+      render(
+        <AdminShell
+          desktopBreakpoint={769}
+          sidebar={<button type="button">Drawer link</button>}
+          tabBar={<div>Tab bar</div>}
+        >
+          Body
+        </AdminShell>,
+      )
+    })
+    expect(screen.queryByText('Tab bar')).toBeNull()
+  })
+})
+
+/** Fixes from the second review of the P-02 commit. */
+describe('P-02 review fixes', () => {
+  it('reads every tier query the same way at fractional widths', () => {
+    // Layout's and Sidebar's queries: exactly one tier matches at any width.
+    const tiers = ['(width < 769px)', '(769px <= width < 1025px)', '(min-width: 1025px)']
+    for (const width of [320, 768, 768.5, 769, 924, 1024, 1024.5, 1025, 1440]) {
+      expect(tiers.filter((q) => matchesWidth(q, width))).toHaveLength(1)
+      // AdminShell's desktop query is the mobile tier's complement.
+      expect(matchesWidth('(min-width: 769px)', width)).toBe(!matchesWidth(tiers[0]!, width))
+    }
+  })
+
+  it('leaves focus where it was when a rail flyout opens on hover', async () => {
+    stubWidth(924)
+    render(
+      <>
+        <input aria-label="Title" />
+        <Sidebar collapsed onToggleCollapse={() => {}} currentPath="/" onNavigate={vi.fn()} />
+      </>,
+    )
+    const input = screen.getByRole('textbox', { name: 'Title' })
+    input.focus()
+    expect(document.activeElement).toBe(input)
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    expect(document.activeElement).toBe(input)
+    // Esc still closes it, though focus isn't in it.
+    fireEvent.keyDown(input, { key: 'Escape' })
+    await waitFor(() => expect(isOpen(pages)).toBe(false))
+  })
+
+  it('reports the group state on a parent row that toggles it (≥1025px)', () => {
+    stubWidth(1280)
+    renderSidebar('/')
+    const row = screen.getByRole('button', { name: 'Pages' })
+    const chevron = screen.getByRole('button', { name: 'Expand Pages' })
+    expect(row.getAttribute('aria-expanded')).toBe('false')
+    expect(row.getAttribute('aria-controls')).toBe(chevron.getAttribute('aria-controls'))
+    fireEvent.click(row)
+    expect(row.getAttribute('aria-expanded')).toBe('true')
+    expect(document.getElementById(row.getAttribute('aria-controls')!)).toBeTruthy()
+    // 24px chevrons that grow to the touch target on coarse pointers.
+    const collapse = screen.getByRole('button', { name: 'Collapse Pages' })
+    expect(collapse.className).toContain('prenta-touch-hit')
+    expect(collapse.className).toContain('h-6 w-6')
+  })
+
+  it('leaves aria-expanded off a parent row that navigates (drawer)', () => {
+    stubWidth(600)
+    renderSidebar('/')
+    expect(screen.getByRole('button', { name: 'Pages' }).hasAttribute('aria-expanded')).toBe(false)
+  })
+
+  it('outlines the current row for forced colors', () => {
+    stubWidth(1280)
+    renderSidebar('/media')
+    const media = screen.getByRole('button', { name: 'Media' })
+    expect(media.getAttribute('aria-current')).toBe('page')
+    expect(media.className).toContain('forced-colors:outline-solid')
+  })
+
+  it('names the Header & Footer row as the kit does', () => {
+    stubWidth(1280)
+    renderSidebar('/appearance/header')
+    expect(screen.getByRole('button', { name: 'Header & Footer' })).toBeTruthy()
+  })
+
+  it('shows the rail label for mouse and keyboard, dismisses it on Esc, not for touch', () => {
+    stubWidth(924)
+    renderSidebar('/', true)
+    const wrapper = screen.getByRole('button', { name: 'Dashboard' }).parentElement as HTMLElement
+    const labels = () => screen.queryAllByText('Dashboard').length
+    expect(labels()).toBe(1) // the button's own sr-only label
+    fireEvent.pointerEnter(wrapper, { pointerType: 'touch' })
+    expect(labels()).toBe(1)
+    fireEvent.pointerEnter(wrapper, { pointerType: 'mouse' })
+    expect(labels()).toBe(2)
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(labels()).toBe(1)
+  })
+
+  it('hides Expand sidebar in the 769–1024px rail', () => {
+    stubWidth(924)
+    renderSidebar('/', true)
+    const toggle = screen.getByRole('button', { name: /expand sidebar/i })
+    expect(toggle.closest('div')?.className).toContain('not-narrow:block')
+  })
+
+  it('lists the Settings tabs under Settings, each active on its own tab', () => {
+    const items = withSettingsTabs(buildNavItems({}), {})
+    const settings = items.find((i) => i.path === '/settings')!
+    expect(settings.children?.map((c) => c.label)).toEqual([
+      'General',
+      'Admin appearance',
+      'Security',
+      'Users',
+      'MCP',
+      'API Keys',
+      'SEO',
+      'Email (SMTP)',
+      'Webhooks',
+      'AI',
+      'Updates',
+    ])
+    // The same list as the Settings strip (P-06), so each tab reads the same.
+    expect(settings.children?.map((c) => [c.label, c.icon])).toEqual(
+      SETTINGS_TABS.filter((t) => t.id !== 'layout').map((t) => [t.label, t.icon]),
+    )
+    expect(settings.children?.every((c) => c.iconSize === 14)).toBe(true)
+    expect(activeChildPath(settings.children!, '/settings')).toBe('/settings?tab=general')
+    expect(activeChildPath(settings.children!, '/settings?tab=security')).toBe(
+      '/settings?tab=security',
+    )
+    expect(isPathActive('/settings/other', '/settings?tab=general')).toBe(false)
+    // Layout only exists when the site defines regions.
+    const withLayout = withSettingsTabs(buildNavItems({}), { layout: { regions: { header: {} } } })
+    expect(withLayout.find((i) => i.path === '/settings')?.children?.map((c) => c.label)).toContain(
+      'Layout',
+    )
+  })
+
+  it('keeps 44px tabs and offers the drawer from More', () => {
+    render(
+      <MobileTabBar
+        items={buildNavItems({})}
+        currentPath="/"
+        onNavigate={vi.fn()}
+        onMore={vi.fn()}
+        moreOpen={false}
+        drawerId="drawer"
+      />,
+    )
+    const bar = screen.getByRole('navigation', { name: 'Tab bar' })
+    for (const tab of within(bar).getAllByRole('button')) {
+      expect(tab.className).toContain('min-h-11')
+      expect(tab.className).toContain('min-w-[60px]')
+    }
+    expect(within(bar).getByRole('button', { name: 'More' }).getAttribute('aria-controls')).toBe(
+      'drawer',
+    )
+    // Below every overlay layer, and clear of the home indicator.
+    expect(bar.className).toContain('z-[var(--z-tabbar)]')
+    expect(bar.className).toContain('pb-[env(safe-area-inset-bottom)]')
+  })
+
+  it('makes the open drawer a modal dialog: focus in, trapped, Esc, focus back', async () => {
+    stubWidth(600)
+    const onClose = vi.fn()
+    const shell = (open: boolean) => (
+      <AdminShell
+        desktopBreakpoint={769}
+        mobileSidebarOpen={open}
+        onMobileSidebarClose={onClose}
+        sidebar={
+          <>
+            <button type="button">First link</button>
+            <button type="button">Last link</button>
+          </>
+        }
+        tabBar={
+          <button type="button" aria-controls={DRAWER_ID}>
+            More
+          </button>
+        }
+      >
+        <button type="button">Body button</button>
+      </AdminShell>
+    )
+    const { rerender } = render(shell(false))
+    const more = await screen.findByRole('button', { name: 'More' })
+    expect(screen.queryByRole('dialog')).toBeNull()
+    more.focus()
+
+    rerender(shell(true))
+    const dialog = await screen.findByRole('dialog', { name: 'Navigation' })
+    expect(dialog.id).toBe(DRAWER_ID)
+    expect(dialog.getAttribute('aria-modal')).toBe('true')
+    // The drawer's own close button comes first and takes focus.
+    const first = screen.getByRole('button', { name: 'Close navigation' })
+    const last = screen.getByRole('button', { name: 'Last link' })
+    await waitFor(() => expect(document.activeElement).toBe(first))
+    type Inert = HTMLElement & { inert?: boolean }
+    const content = document.getElementById('prenta-main')!.parentElement as Inert
+    expect(content.inert).toBe(true)
+    expect((more.parentElement as Inert).inert).toBe(true)
+
+    // Tab wraps at both ends.
+    last.focus()
+    fireEvent.keyDown(last, { key: 'Tab' })
+    expect(document.activeElement).toBe(first)
+    fireEvent.keyDown(first, { key: 'Tab', shiftKey: true })
+    expect(document.activeElement).toBe(last)
+
+    fireEvent.keyDown(last, { key: 'Escape' })
+    expect(onClose).toHaveBeenCalledOnce()
+    rerender(shell(false))
+    await waitFor(() => expect(document.activeElement).toBe(more))
+    expect(content.inert).toBe(false)
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+
+  it('slides the drawer with a motion-safe class the Reduce motion setting can stop', () => {
+    stubWidth(600)
+    render(
+      <AdminShell desktopBreakpoint={769} sidebar={<span>Nav</span>}>
+        Body
+      </AdminShell>,
+    )
+    const drawer = document.getElementById(DRAWER_ID)!
+    expect(drawer.style.transition).toBe('')
+    expect(drawer.className).toContain('motion-safe:transition-transform')
+  })
+
+  it('wires the drawer to More and lists Settings tabs in it on mobile', async () => {
+    stubWidth(600)
+    render(
+      <Layout config={{}} session={null} currentPath="/settings?tab=security" onNavigate={vi.fn()}>
+        Body
+      </Layout>,
+    )
+    const bar = await screen.findByRole('navigation', { name: 'Tab bar' })
+    const more = within(bar).getByRole('button', { name: 'More' })
+    expect(more.getAttribute('aria-controls')).toBe(DRAWER_ID)
+    more.focus()
+    fireEvent.click(more)
+    const dialog = await screen.findByRole('dialog', { name: 'Navigation' })
+    const security = within(dialog).getByRole('button', { name: 'Security' })
+    expect(security.getAttribute('aria-current')).toBe('page')
+    fireEvent.keyDown(security, { key: 'Escape' })
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(document.activeElement).toBe(more))
+  })
+
+  it('keeps Settings a single row in the desktop sidebar', async () => {
+    stubWidth(1280)
+    render(
+      <Layout config={{}} session={null} currentPath="/settings" onNavigate={vi.fn()}>
+        Body
+      </Layout>,
+    )
+    await screen.findByRole('navigation', { name: 'Primary' })
+    expect(screen.queryByRole('button', { name: 'Security' })).toBeNull()
+  })
+
+  it('lifts toasts above the tab bar', async () => {
+    const { container } = render(<Toaster aboveTabBar />)
+    act(() => {
+      toast('Saved')
+    })
+    await screen.findByText('Saved')
+    const list = container.querySelector<HTMLElement>('[data-sonner-toaster]')!
+    expect(list.style.getPropertyValue('--offset-bottom')).toContain('var(--tabbar-h)')
+    expect(list.style.getPropertyValue('--mobile-offset-bottom')).toContain(
+      'env(safe-area-inset-bottom)',
+    )
+  })
+})
+
+/**
+ * happy-dom applies no stylesheet, so Tailwind's `hidden` (display: none)
+ * leaves boxes. Give elements under it no client rects, as a browser does.
+ */
+function hideTailwindHidden() {
+  return vi.spyOn(HTMLElement.prototype, 'getClientRects').mockImplementation(function (
+    this: HTMLElement,
+  ) {
+    return (this.closest('.hidden') ? [] : [{}]) as unknown as DOMRectList
+  })
+}
+
+/** `stubWidth` whose width can change, firing the queries' change listeners. */
+function stubResizableWidth(initial: number) {
+  let width = initial
+  const listeners = new Set<() => void>()
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    media: query,
+    get matches() {
+      return matchesWidth(query, width)
+    },
+    addEventListener: (_: string, listener: () => void) => listeners.add(listener),
+    removeEventListener: (_: string, listener: () => void) => listeners.delete(listener),
+  }))
+  return (next: number) => {
+    width = next
+    act(() => {
+      for (const listener of [...listeners]) listener()
+    })
+  }
+}
+
+/** Fixes from the third review of the P-02 commits. */
+describe('P-02 third review', () => {
+  it('traps Tab among the visible rows of the real sidebar, with a close button first', async () => {
+    stubWidth(600)
+    const rects = hideTailwindHidden()
+    const onClose = vi.fn()
+    render(
+      <AdminShell
+        desktopBreakpoint={769}
+        mobileSidebarOpen
+        onMobileSidebarClose={onClose}
+        sidebar={
+          <Sidebar
+            collapsed={false}
+            onToggleCollapse={() => {}}
+            currentPath="/"
+            onNavigate={vi.fn()}
+          />
+        }
+        tabBar={<button type="button">More</button>}
+      >
+        Body
+      </AdminShell>,
+    )
+    const dialog = await screen.findByRole('dialog', { name: 'Navigation' })
+    const close = within(dialog).getByRole('button', { name: 'Close navigation' })
+    await waitFor(() => expect(document.activeElement).toBe(close))
+    // The collapse footer is in the DOM but not rendered below 1025px.
+    const visible = within(dialog)
+      .getAllByRole('button')
+      .filter((b) => !b.closest('.hidden'))
+    const last = visible[visible.length - 1]!
+    expect(last.textContent).toBe('Settings')
+
+    last.focus()
+    fireEvent.keyDown(last, { key: 'Tab' })
+    expect(document.activeElement).toBe(close)
+    fireEvent.keyDown(close, { key: 'Tab', shiftKey: true })
+    expect(document.activeElement).toBe(last)
+
+    // Nothing behind the modal takes focus, the skip link included.
+    const skip = document.querySelector('.prenta-skip-link') as HTMLElement & { inert?: boolean }
+    expect(skip.inert).toBe(true)
+
+    fireEvent.click(close)
+    expect(onClose).toHaveBeenCalledOnce()
+    rects.mockRestore()
+  })
+
+  it('leaves Esc from a layer portaled out of the drawer to that layer', async () => {
+    stubWidth(600)
+    const onClose = vi.fn()
+    render(
+      <AdminShell
+        desktopBreakpoint={769}
+        mobileSidebarOpen
+        onMobileSidebarClose={onClose}
+        sidebar={
+          <>
+            <button type="button">Row</button>
+            {createPortal(<button type="button">Menu item</button>, document.body)}
+          </>
+        }
+      >
+        Body
+      </AdminShell>,
+    )
+    await screen.findByRole('dialog', { name: 'Navigation' })
+    fireEvent.keyDown(screen.getByRole('button', { name: 'Menu item' }), { key: 'Escape' })
+    expect(onClose).not.toHaveBeenCalled()
+    // Handled already inside the drawer (default prevented): not ours either.
+    const row = screen.getByRole('button', { name: 'Row' })
+    const claim = (e: Event) => e.preventDefault()
+    row.addEventListener('keydown', claim)
+    fireEvent.keyDown(row, { key: 'Escape' })
+    expect(onClose).not.toHaveBeenCalled()
+    row.removeEventListener('keydown', claim)
+    fireEvent.keyDown(row, { key: 'Escape' })
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('closes the drawer when the window widens past the mobile tier', async () => {
+    const resize = stubResizableWidth(600)
+    render(
+      <Layout config={{}} session={null} currentPath="/" onNavigate={vi.fn()}>
+        Body
+      </Layout>,
+    )
+    const bar = await screen.findByRole('navigation', { name: 'Tab bar' })
+    fireEvent.click(within(bar).getByRole('button', { name: 'More' }))
+    await screen.findByRole('dialog', { name: 'Navigation' })
+    resize(1280)
+    expect(screen.queryByRole('dialog')).toBeNull()
+    resize(600)
+    const again = await screen.findByRole('navigation', { name: 'Tab bar' })
+    expect(screen.queryByRole('dialog')).toBeNull()
+    expect(within(again).getByRole('button', { name: 'More' }).getAttribute('aria-expanded')).toBe(
+      'false',
+    )
+  })
+
+  it('keeps Ctrl/Cmd+K from opening the command palette behind the open drawer', async () => {
+    stubWidth(600)
+    const palette = vi.fn()
+    const listen = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) palette()
+    }
+    document.addEventListener('keydown', listen)
+    const shell = (open: boolean) => (
+      <AdminShell
+        desktopBreakpoint={769}
+        mobileSidebarOpen={open}
+        onMobileSidebarClose={() => {}}
+        sidebar={<button type="button">Row</button>}
+      >
+        Body
+      </AdminShell>
+    )
+    const { rerender } = render(shell(true))
+    await screen.findByRole('dialog', { name: 'Navigation' })
+    const row = screen.getByRole('button', { name: 'Row' })
+    // fireEvent returns false when the default action was prevented.
+    expect(fireEvent.keyDown(row, { key: 'k', ctrlKey: true })).toBe(false)
+    expect(fireEvent.keyDown(row, { key: 'k', metaKey: true })).toBe(false)
+    expect(fireEvent.keyDown(row, { key: 'K', ctrlKey: true, shiftKey: true })).toBe(true)
+    expect(palette).not.toHaveBeenCalled()
+    rerender(shell(false))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    fireEvent.keyDown(document.body, { key: 'k', ctrlKey: true })
+    expect(palette).toHaveBeenCalledOnce()
+    document.removeEventListener('keydown', listen)
+  })
+
+  it('moves focus into a flyout opened from the keyboard after an earlier hover', async () => {
+    stubWidth(924)
+    renderSidebar('/', true)
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    const wrapper = pages.parentElement as HTMLElement
+    fireEvent.mouseEnter(wrapper)
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    fireEvent.mouseLeave(wrapper)
+    await waitFor(() => expect(isOpen(pages)).toBe(false)) // the 120ms hover close
+    pages.focus()
+    // happy-dom delivers the focusin a task later; let it land first.
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.keyDown(pages, { key: 'Enter' })
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    const menu = document.querySelector('[role="menu"]')!
+    await waitFor(() => expect(menu.contains(document.activeElement)).toBe(true))
+  })
+
+  it('leaves focus in the field when Esc closes a hover-opened flyout', async () => {
+    stubWidth(924)
+    render(
+      <>
+        <input aria-label="Title" />
+        <Sidebar collapsed onToggleCollapse={() => {}} currentPath="/" onNavigate={vi.fn()} />
+      </>,
+    )
+    const input = screen.getByRole('textbox', { name: 'Title' })
+    input.focus()
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    fireEvent.keyDown(input, { key: 'Escape' })
+    await waitFor(() => expect(isOpen(pages)).toBe(false))
+    expect(document.activeElement).toBe(input)
+  })
+
+  // These two mount inside a marked admin root, as AdminRoot does, so the
+  // flyout portals into a stable container. (Without one, the portal target
+  // falls back to the first `.prenta-admin` in the document, which is the
+  // open flyout panel itself, and the panel ends up detached.)
+  const railInAdminRoot = (extra?: ReactNode) =>
+    render(
+      <div data-prenta-admin-root="" className="prenta-admin">
+        {extra}
+        <Sidebar collapsed onToggleCollapse={() => {}} currentPath="/" onNavigate={vi.fn()} />
+      </div>,
+    )
+
+  it('returns focus to the trigger when a hover-opened flyout closes after focus moved into it', async () => {
+    stubWidth(924)
+    railInAdminRoot(<input aria-label="Title" />)
+    screen.getByRole('textbox', { name: 'Title' }).focus()
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    await waitFor(() => expect(document.querySelector('[role="menuitem"]')).not.toBeNull())
+    // Radix focuses menu items under the pointer; stand in for that move.
+    const item = document.querySelector<HTMLElement>('[role="menuitem"]')!
+    act(() => item.focus())
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.keyDown(item, { key: 'Escape' })
+    await waitFor(() => expect(isOpen(pages)).toBe(false))
+    await waitFor(() => expect(document.activeElement).toBe(pages))
+  })
+
+  it('keeps the keyboard focus return when the pointer crosses an open flyout trigger', async () => {
+    stubWidth(924)
+    railInAdminRoot()
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    pages.focus()
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.keyDown(pages, { key: 'Enter' })
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    const menu = document.querySelector('[role="menu"]')!
+    await waitFor(() => expect(menu.contains(document.activeElement)).toBe(true))
+    // The mouse passes over the trigger while the keyboard-opened menu is up.
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'Escape' })
+    await waitFor(() => expect(isOpen(pages)).toBe(false))
+    await waitFor(() => expect(document.activeElement).toBe(pages))
+  })
+
+  it('keeps the next hover flyout open when the pointer moves on from one that held focus', async () => {
+    stubWidth(924)
+    railInAdminRoot()
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    const posts = screen.getByRole('button', { name: 'Posts' })
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(document.querySelector('[role="menuitem"]')).not.toBeNull())
+    act(() => document.querySelector<HTMLElement>('[role="menuitem"]')!.focus())
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.mouseLeave(pages.parentElement as HTMLElement)
+    fireEvent.mouseEnter(posts.parentElement as HTMLElement)
+    await waitFor(() => expect(isOpen(posts)).toBe(true))
+    // Past the 120ms hover close of Pages, plus a tick for Radix's focus return.
+    await act(() => new Promise((resolve) => setTimeout(resolve, 250)))
+    // Documents the intended behaviour. happy-dom doesn't route Radix's
+    // close focus-return to the trigger on this path, so this can't fail on
+    // the regression by itself; the close-cause guard in RailFlyout is what
+    // prevents the trigger focus that dismissed the next flyout in browsers.
+    expect(isOpen(pages)).toBe(false)
+    expect(isOpen(posts)).toBe(true)
+    expect(document.activeElement).not.toBe(pages)
+  })
+
+  it('keeps a keyboard-opened flyout open while the pointer crosses the rail', async () => {
+    stubWidth(924)
+    railInAdminRoot()
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    pages.focus()
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.keyDown(pages, { key: 'Enter' })
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    fireEvent.mouseLeave(pages.parentElement as HTMLElement)
+    await act(() => new Promise((resolve) => setTimeout(resolve, 250)))
+    expect(isOpen(pages)).toBe(true)
+  })
+
+  it('moves focus into a flyout opened by a touch tap, even after an earlier mouse hover', async () => {
+    stubWidth(924)
+    railInAdminRoot()
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    fireEvent.mouseLeave(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(isOpen(pages)).toBe(false))
+    fireEvent.pointerDown(pages, { pointerType: 'touch', button: 0, ctrlKey: false })
+    await waitFor(() => expect(isOpen(pages)).toBe(true))
+    const menu = document.querySelector('[role="menu"]')!
+    await waitFor(() => expect(menu.contains(document.activeElement)).toBe(true))
+  })
+
+  it('takes the keyboard into a flyout the mouse already opened', async () => {
+    stubWidth(924)
+    railInAdminRoot()
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    pages.focus()
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(document.querySelector('[role="menuitem"]')).not.toBeNull())
+    expect(document.activeElement).toBe(pages)
+    fireEvent.keyDown(pages, { key: 'ArrowDown' })
+    expect(isOpen(pages)).toBe(true)
+    expect(document.activeElement).toBe(document.querySelector('[role="menuitem"]'))
+  })
+
+  it('returns focus to the trigger without a focus ring after a mouse pick', async () => {
+    stubWidth(924)
+    const onNavigate = vi.fn()
+    render(
+      <div data-prenta-admin-root="" className="prenta-admin">
+        <Sidebar collapsed onToggleCollapse={() => {}} currentPath="/" onNavigate={onNavigate} />
+      </div>,
+    )
+    const pages = screen.getByRole('button', { name: 'Pages' })
+    const focus = vi.spyOn(pages, 'focus')
+    fireEvent.mouseEnter(pages.parentElement as HTMLElement)
+    await waitFor(() => expect(document.querySelector('[role="menuitem"]')).not.toBeNull())
+    const item = document.querySelector<HTMLElement>('[role="menuitem"]')!
+    act(() => item.focus())
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.click(item, { detail: 1 })
+    expect(onNavigate).toHaveBeenCalled()
+    await waitFor(() => expect(document.activeElement).toBe(pages))
+    expect(focus).toHaveBeenCalledWith(expect.objectContaining({ focusVisible: false }))
+  })
+
+  it('gives the rail labels a positioned ancestor inside the sidebar', () => {
+    stubWidth(924)
+    renderSidebar('/', true)
+    expect(screen.getByRole('navigation', { name: 'Primary' }).className).toMatch(/\brelative\b/)
+  })
+})
+
+describe('Sidebar hydration', () => {
+  it('renders parent rows the same on the server and in the first client render', async () => {
+    // Below 1025px the row navigates and reports no group state, but only
+    // after mount: the server can't know the width. happy-dom gives
+    // renderToString a window, so take matchMedia away as a server has none.
+    const tree = (
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/"
+        onNavigate={vi.fn()}
+        items={buildNavItems({})}
+      />
+    )
+    vi.stubGlobal('matchMedia', undefined)
+    const html = renderToString(tree)
+    stubWidth(600)
+    const container = document.createElement('div')
+    container.innerHTML = html
+    document.body.appendChild(container)
+    const errors = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const recoverable = vi.fn()
+    let root: Root | undefined
+    await act(async () => {
+      root = hydrateRoot(container, tree, { onRecoverableError: recoverable })
+    })
+    expect(errors).not.toHaveBeenCalled()
+    expect(recoverable).not.toHaveBeenCalled()
+    const pages = within(container).getByRole('button', { name: 'Pages' })
+    expect(pages.hasAttribute('aria-expanded')).toBe(false)
+    act(() => root!.unmount())
+    container.remove()
+    errors.mockRestore()
+  })
+})