@prenta/admin 2.6.0 → 2.7.0

package/dist/__tests__/layout/shell-nav.render.test.js

@@ -0,0 +1,736 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { createPortal } from 'react-dom';
+import { hydrateRoot } 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 }) => (_jsx("button", { type: "button", onClick: onToggleSidebar, children: "Menu" })),
+}));
+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, width) {
+    const compare = (a, op, b) => 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) {
+    vi.stubGlobal('matchMedia', (query) => {
+        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) => trigger.getAttribute('aria-expanded') === 'true';
+function renderSidebar(currentPath, collapsed = false, onNavigate = vi.fn()) {
+    render(_jsx(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 },
+        ]);
+        const item = forms.find((i) => i.label === 'Forms');
+        const label = (c) => `${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);
+        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 },
+        ]);
+        const onNavigate = vi.fn();
+        const onMore = vi.fn();
+        render(_jsx(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(_jsx(AdminShell, { desktopBreakpoint: 769, sidebar: _jsx("button", { type: "button", children: "Drawer link" }), tabBar: _jsx("div", { children: "Tab bar" }), children: "Body" }));
+        expect(screen.getByText('Tab bar')).toBeTruthy();
+        const drawer = screen.getByText('Drawer link').parentElement;
+        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(_jsx(AdminShell, { desktopBreakpoint: 769, mobileSidebarOpen: true, sidebar: _jsx("button", { type: "button", children: "Drawer link" }), tabBar: _jsx("div", { children: "Tab bar" }), children: "Body" }));
+        await waitFor(() => expect(drawer.inert).toBe(false));
+        cleanup();
+        stubWidth(1280);
+        await act(async () => {
+            render(_jsx(AdminShell, { desktopBreakpoint: 769, sidebar: _jsx("button", { type: "button", children: "Drawer link" }), tabBar: _jsx("div", { children: "Tab bar" }), children: "Body" }));
+        });
+        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(_jsxs(_Fragment, { children: [_jsx("input", { "aria-label": "Title" }), _jsx(Sidebar, { collapsed: true, 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);
+        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;
+        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(_jsx(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) => (_jsx(AdminShell, { desktopBreakpoint: 769, mobileSidebarOpen: open, onMobileSidebarClose: onClose, sidebar: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", children: "First link" }), _jsx("button", { type: "button", children: "Last link" })] }), tabBar: _jsx("button", { type: "button", "aria-controls": DRAWER_ID, children: "More" }), children: _jsx("button", { type: "button", children: "Body button" }) }));
+        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));
+        const content = document.getElementById('prenta-main').parentElement;
+        expect(content.inert).toBe(true);
+        expect(more.parentElement.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(_jsx(AdminShell, { desktopBreakpoint: 769, sidebar: _jsx("span", { children: "Nav" }), children: "Body" }));
+        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(_jsx(Layout, { config: {}, session: null, currentPath: "/settings?tab=security", onNavigate: vi.fn(), children: "Body" }));
+        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(_jsx(Layout, { config: {}, session: null, currentPath: "/settings", onNavigate: vi.fn(), children: "Body" }));
+        await screen.findByRole('navigation', { name: 'Primary' });
+        expect(screen.queryByRole('button', { name: 'Security' })).toBeNull();
+    });
+    it('lifts toasts above the tab bar', async () => {
+        const { container } = render(_jsx(Toaster, { aboveTabBar: true }));
+        act(() => {
+            toast('Saved');
+        });
+        await screen.findByText('Saved');
+        const list = container.querySelector('[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 () {
+        return (this.closest('.hidden') ? [] : [{}]);
+    });
+}
+/** `stubWidth` whose width can change, firing the queries' change listeners. */
+function stubResizableWidth(initial) {
+    let width = initial;
+    const listeners = new Set();
+    vi.stubGlobal('matchMedia', (query) => ({
+        media: query,
+        get matches() {
+            return matchesWidth(query, width);
+        },
+        addEventListener: (_, listener) => listeners.add(listener),
+        removeEventListener: (_, listener) => listeners.delete(listener),
+    }));
+    return (next) => {
+        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(_jsx(AdminShell, { desktopBreakpoint: 769, mobileSidebarOpen: true, onMobileSidebarClose: onClose, sidebar: _jsx(Sidebar, { collapsed: false, onToggleCollapse: () => { }, currentPath: "/", onNavigate: vi.fn() }), tabBar: _jsx("button", { type: "button", children: "More" }), children: "Body" }));
+        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');
+        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(_jsx(AdminShell, { desktopBreakpoint: 769, mobileSidebarOpen: true, onMobileSidebarClose: onClose, sidebar: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", children: "Row" }), createPortal(_jsx("button", { type: "button", children: "Menu item" }), document.body)] }), children: "Body" }));
+        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) => 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(_jsx(Layout, { config: {}, session: null, currentPath: "/", onNavigate: vi.fn(), children: "Body" }));
+        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) => {
+            if (e.key === 'k' && (e.metaKey || e.ctrlKey))
+                palette();
+        };
+        document.addEventListener('keydown', listen);
+        const shell = (open) => (_jsx(AdminShell, { desktopBreakpoint: 769, mobileSidebarOpen: open, onMobileSidebarClose: () => { }, sidebar: _jsx("button", { type: "button", children: "Row" }), children: "Body" }));
+        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;
+        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(_jsxs(_Fragment, { children: [_jsx("input", { "aria-label": "Title" }), _jsx(Sidebar, { collapsed: true, 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);
+        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) => render(_jsxs("div", { "data-prenta-admin-root": "", className: "prenta-admin", children: [extra, _jsx(Sidebar, { collapsed: true, onToggleCollapse: () => { }, currentPath: "/", onNavigate: vi.fn() })] }));
+    it('returns focus to the trigger when a hover-opened flyout closes after focus moved into it', async () => {
+        stubWidth(924);
+        railInAdminRoot(_jsx("input", { "aria-label": "Title" }));
+        screen.getByRole('textbox', { name: 'Title' }).focus();
+        const pages = screen.getByRole('button', { name: 'Pages' });
+        fireEvent.mouseEnter(pages.parentElement);
+        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('[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);
+        fireEvent.keyDown(document.activeElement, { 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);
+        await waitFor(() => expect(document.querySelector('[role="menuitem"]')).not.toBeNull());
+        act(() => document.querySelector('[role="menuitem"]').focus());
+        await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+        fireEvent.mouseLeave(pages.parentElement);
+        fireEvent.mouseEnter(posts.parentElement);
+        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);
+        fireEvent.mouseLeave(pages.parentElement);
+        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);
+        await waitFor(() => expect(isOpen(pages)).toBe(true));
+        fireEvent.mouseLeave(pages.parentElement);
+        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);
+        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(_jsx("div", { "data-prenta-admin-root": "", className: "prenta-admin", children: _jsx(Sidebar, { collapsed: true, onToggleCollapse: () => { }, currentPath: "/", onNavigate: onNavigate }) }));
+        const pages = screen.getByRole('button', { name: 'Pages' });
+        const focus = vi.spyOn(pages, 'focus');
+        fireEvent.mouseEnter(pages.parentElement);
+        await waitFor(() => expect(document.querySelector('[role="menuitem"]')).not.toBeNull());
+        const item = document.querySelector('[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 = (_jsx(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;
+        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();
+    });
+});
+//# sourceMappingURL=shell-nav.render.test.js.map