@prenta/admin 2.6.1 → 2.8.0

package/dist/__tests__/components/shell-primitives.render.test.js

@@ -0,0 +1,716 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @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) => el?.getAttribute('class') ?? '';
+describe('PageHeader', () => {
+    it('renders title, subtitle, actions and an optional breadcrumb', () => {
+        render(_jsx(PageHeader, { title: "Post Types", subtitle: "Define content models and their fields.", actions: _jsx(Button, { children: "New Post Type" }), breadcrumb: _jsx(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(_jsx(PageHeader, { title: "Jobs" }));
+        expect(classOf(container.querySelector('header'))).toContain('px-[var(--gut)] pt-3.5');
+        rerender(_jsx(PageHeader, { title: "Jobs", flush: true }));
+        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(_jsx(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(_jsx(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(_jsx(Breadcrumb, { items: [{ label: 'Appearance' }, { label: 'Widgets' }] }));
+        expect(screen.queryByRole('link')).toBeNull();
+        expect(screen.queryByRole('button')).toBeNull();
+        rerender(_jsx(Breadcrumb, { items: [] }));
+        expect(container.innerHTML).toBe('');
+    });
+});
+describe('CountChip', () => {
+    it('renders static, link and button chips with the kit look', () => {
+        const onClick = vi.fn();
+        render(_jsxs(_Fragment, { children: [_jsx(CountChip, { n: 12, label: "total" }), _jsx(CountChip, { n: 3, label: "unread", onClick: onClick, selected: true }), _jsx(CountChip, { n: 4, label: "active", tone: "ok", href: "/admin/script-tags" }), _jsx(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(_jsxs(_Fragment, { children: [_jsx(CountChip, { n: "2.4 GB", label: "Storage used" }), _jsx(CountChip, { n: 1, label: "Inactive", tone: "muted" }), _jsx(CountChip, { n: 5, label: "Consent-gated", icon: _jsx("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(_jsxs(_Fragment, { children: [_jsx(CountChip, { n: 3, label: "unread", onClick: () => { }, selected: true }), _jsx(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: _jsx("svg", { "data-testid": "icon" }) },
+        { id: 'users', label: 'Users', count: 6 },
+        { id: 'api-keys', label: 'API Keys', count: 4, badge: _jsx("b", { children: "Live" }) },
+    ];
+    function Harness({ initial = 'general' }) {
+        const [tab, setTab] = useState(initial);
+        return (_jsxs(_Fragment, { children: [_jsx(UnderlineTabs, { label: "Settings", idBase: "settings", tabs: TABS, value: tab, onChange: setTab }), TABS.map((t) => t.id === tab ? (_jsxs(UnderlineTabPanel, { idBase: "settings", tabId: t.id, children: [t.label, " panel"] }, t.id)) : null)] }));
+    }
+    it('marks the active tab with the inset box-shadow, never a border', () => {
+        render(_jsx(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(_jsx(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(_jsx(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, initialWidth, tabWidth = 200) {
+        const list = screen.getByRole('tablist');
+        let left = 0;
+        let clientWidth = initialWidth;
+        const clamp = (v) => 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) => {
+                left = clamp(v);
+            },
+        });
+        // Called from a click handler, already inside act: a plain event, not fireEvent.
+        const scrollBy = vi.fn((options) => {
+            left = clamp(left + (options.left ?? 0));
+            list.dispatchEvent(new Event('scroll'));
+        });
+        list.scrollBy = 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) => {
+            left = clamp(v);
+            fireEvent.scroll(list);
+        };
+        /** Narrow or widen the strip's window (the observer is the caller's to fire). */
+        const resize = (width) => {
+            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) => document.querySelector(`[data-tabs-scroll="${side}"]`);
+    it('shows no fade and no scroll buttons while every tab fits', () => {
+        render(_jsx(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(_jsx(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(_jsx(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'].map((key) => [key, Object.getOwnPropertyDescriptor(proto, key)]);
+        const lefts = new WeakMap();
+        const behaviours = [];
+        const isList = (el) => el.getAttribute('role') === 'tablist';
+        const isTab = (el) => el.getAttribute('role') === 'tab';
+        Object.defineProperties(proto, {
+            scrollWidth: { configurable: true, get: () => 600 },
+            clientWidth: { configurable: true, get: () => 300 },
+            scrollLeft: {
+                configurable: true,
+                get() {
+                    return lefts.get(this) ?? 0;
+                },
+                set(v) {
+                    if (isList(this))
+                        behaviours.push(this.style.scrollBehavior);
+                    lefts.set(this, Math.max(0, Math.min(v, 300)));
+                },
+            },
+            offsetLeft: {
+                configurable: true,
+                get() {
+                    return isTab(this) ? [...this.parentElement.children].indexOf(this) * 200 : 0;
+                },
+            },
+            offsetWidth: {
+                configurable: true,
+                get() {
+                    return isTab(this) ? 200 : 0;
+                },
+            },
+        });
+        try {
+            render(_jsx(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[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(_jsx(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(_jsx(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 = [];
+        const Original = globalThis.ResizeObserver;
+        globalThis.ResizeObserver = class {
+            constructor(callback) {
+                callbacks.push(callback);
+            }
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        };
+        try {
+            render(_jsx(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)([], {}));
+            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)([], {}));
+            expect(list.scrollLeft).toBe(0);
+            // The strip narrows: API Keys (400–600px) comes back into view.
+            resize(250);
+            act(() => callbacks.at(-1)([], {}));
+            // 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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsxs(_Fragment, { children: [_jsx(Switch, { checked: false, onCheckedChange: onChange, "aria-label": "Accent" }), _jsx(Toggle, { checked: true, 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(_jsx(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(_jsx(UnsavedBar, { dirty: true, 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(_jsx(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(_jsx(UnsavedBar, { dirty: true, 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(_jsx(UnsavedBar, { dirty: true, 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(_jsx(UnsavedBar, { dirty: true, 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(_jsxs(Card, { "data-testid": "card", children: [_jsxs(CardHeader, { "data-testid": "head", children: [_jsx(CardTitle, { as: "h2", children: "Variant" }), _jsx(CardDescription, { children: "Site default." })] }), _jsx(CardContent, { "data-testid": "body", children: "Body" })] }));
+        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(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "secondary", size: "sm", children: "Small" }), _jsx(Button, { variant: "ghost", children: "Ghost" }), _jsx(Button, { variant: "danger", children: "Danger" }), _jsx(Button, { variant: "ai", children: "AI Copilot" }), _jsx(Button, { variant: "icon", size: "icon", "aria-label": "Row action" }), _jsx(Button, { variant: "icon", size: "icon-lg", "aria-label": "Topbar action" })] }));
+        const cls = (name) => 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(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ai", children: "AI Copilot" }), _jsx(Button, { variant: "secondary", children: "Export" })] }));
+        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(_jsx(Button, { loading: true, children: "Save" }));
+        const button = screen.getByRole('button', { name: 'Save' });
+        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(_jsx(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(_jsx(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(_jsx(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(_jsxs(_Fragment, { children: [_jsx(UnderlineTabs, { label: "Tabs", value: "missing", onChange: () => { }, tabs: [
+                        { id: 'a', label: 'A' },
+                        { id: 'b', label: 'B' },
+                    ] }), _jsx(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(_jsx(CardHeader, { "data-testid": "head", children: _jsx(CardTitle, { children: "Branding" }) }));
+        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(_jsx(CountChip, { n: 6, label: "unread", onClick: () => { }, selected: true }));
+        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(_jsx(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(_jsx(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(_jsx(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;
+        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;
+        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(_jsx(Toaster, {}));
+        const wrapped = toast.error;
+        expect(wrapped).not.toBe(original);
+        const second = render(_jsx(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();
+        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(_jsx(AdminLinksProvider, { value: { href: (path) => `/admin${path === '/' ? '' : path}`, navigate }, children: _jsx(Breadcrumb, { items: [
+                    { label: 'Dashboard', path: '/' },
+                    { label: 'Posts', path: '/posts' },
+                    { label: 'Trash' },
+                ] }) }));
+        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(_jsx(PageHeader, { title: "Edit Hello", subtitle: _jsxs(_Fragment, { children: [_jsx("span", { children: "DRAFT" }), _jsx("div", { children: "Presence" })] }) }));
+        expect(screen.getByText('Presence').parentElement?.tagName).toBe('DIV');
+    });
+    it('pads the scroll area so a focused field clears the floating bar', () => {
+        render(_jsx(AdminShell, { sidebar: null, children: "Body" }));
+        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');
+    });
+});
+//# sourceMappingURL=shell-primitives.render.test.js.map