@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/toolbar/toolbar-left.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-left.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar-left.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,6FAA6F;IAC7F,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IACnE,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;IACpD,uGAAuG;IACvG,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAOD,0GAA0G;AAC1G,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,+BAkChF"}

package/dist/toolbar/toolbar-left.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../messages/index.js';
+import { useEditorState } from '../store/index.js';
+import { Icon, Tooltip } from '../ui/index.js';
+import { Brand } from './brand.js';
+import { EditableTitle } from './editable-title.js';
+const STATUS_LABELS = {
+    draft: 'toolbar.status.draft',
+    published: 'toolbar.status.published',
+};
+/** The product mark, back to the CMS as an icon button, the page name and its draft or published pill. */
+export function ToolbarLeft({ title, onRename, status, cmsUrl }) {
+    const t = useT();
+    const readOnly = useEditorState((state) => state.readOnly);
+    return (_jsxs("div", { className: "bd-toolbar-zone", "data-zone": "left", children: [_jsx(Brand, {}), cmsUrl !== undefined && (_jsx(Tooltip, { content: t('toolbar.back'), children: _jsx("a", { className: "bd-button bd-icon-button bd-toolbar-link", "data-variant": "ghost", href: cmsUrl, "aria-label": t('toolbar.back'), children: _jsx(Icon, { name: "arrow-left" }) }) })), onRename === undefined ? (_jsx("h1", { className: "bd-toolbar-title", title: title, children: title })) : (_jsx("h1", { className: "bd-toolbar-heading", children: _jsx(EditableTitle, { title: title, onRename: onRename, disabled: readOnly }) })), status !== undefined && (_jsx("span", { className: "bd-status-pill", "data-status": status, children: t(STATUS_LABELS[status]) }))] }));
+}

package/dist/toolbar/toolbar-right.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface ToolbarRightProps {
+    /** The locale and sample pickers (the shell's), placed between the save status and Preview. */
+    readonly pickers?: ReactNode;
+    readonly status: string;
+    readonly onPreview?: (() => void) | undefined;
+    readonly onPublish?: (() => void) | undefined;
+    readonly canPublish?: boolean | undefined;
+    /** The save text is visually hidden (the row is tight). */
+    readonly compactSave: boolean;
+    /** The version history: a link in the row, or an item of the more menu when the row is tight. */
+    readonly historyUrl?: string | undefined;
+    readonly historyInMenu: boolean;
+    /** The CMS link, when the row had no room for it; the more menu lists it. */
+    readonly moreCmsUrl?: string | undefined;
+}
+/** Undo and redo, the save status, the pickers, Preview (secondary), Publish (the one primary) and more. */
+export declare function ToolbarRight(props: ToolbarRightProps): import("react").JSX.Element;
+//# sourceMappingURL=toolbar-right.d.ts.map

package/dist/toolbar/toolbar-right.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-right.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar-right.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,WAAW,iBAAiB;IAChC,+FAA+F;IAC/F,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1C,2DAA2D;IAC3D,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,iGAAiG;IACjG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC,6EAA6E;IAC7E,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1C;AAED,4GAA4G;AAC5G,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAgEpD"}

package/dist/toolbar/toolbar-right.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../messages/index.js';
+import { useShortcutHint } from '../shortcuts/index.js';
+import { useEditor, useEditorState } from '../store/index.js';
+import { Button, Icon, IconButton, Tooltip } from '../ui/index.js';
+import { MoreMenu } from './more-menu.js';
+import { SaveIndicator } from './save-indicator.js';
+/** Undo and redo, the save status, the pickers, Preview (secondary), Publish (the one primary) and more. */
+export function ToolbarRight(props) {
+    const t = useT();
+    const store = useEditor();
+    const canUndo = useEditorState((state) => state.canUndo);
+    const canRedo = useEditorState((state) => state.canRedo);
+    const readOnly = useEditorState((state) => state.readOnly);
+    const undoHint = useShortcutHint('edit.undo');
+    const redoHint = useShortcutHint('edit.redo');
+    return (_jsxs("div", { className: "bd-toolbar-zone", "data-zone": "right", children: [_jsxs("fieldset", { className: "bd-toolbar-group", "aria-label": t('toolbar.history'), children: [_jsx(IconButton, { label: t('shortcut.undo'), hint: undoHint, icon: "undo-2", variant: "ghost", disabled: !canUndo || readOnly, onClick: () => store.undo() }), _jsx(IconButton, { label: t('shortcut.redo'), hint: redoHint, icon: "redo-2", variant: "ghost", disabled: !canRedo || readOnly, onClick: () => store.redo() })] }), _jsx(SaveIndicator, { compact: props.compactSave }), props.pickers, props.historyUrl !== undefined && !props.historyInMenu && (_jsx(Tooltip, { content: t('toolbar.versions'), children: _jsx("a", { className: "bd-button bd-icon-button bd-toolbar-link", "data-variant": "ghost", href: props.historyUrl, "aria-label": t('toolbar.versions'), children: _jsx(Icon, { name: "history" }) }) })), _jsx(Button, { onClick: props.onPreview, disabled: props.onPreview === undefined, children: t('toolbar.preview') }), _jsx(Button, { variant: "primary", onClick: props.onPublish, disabled: props.onPublish === undefined ||
+                    props.canPublish === false ||
+                    readOnly ||
+                    props.status === 'conflict', children: t('toolbar.publish') }), _jsx(MoreMenu, { historyUrl: props.historyInMenu ? props.historyUrl : undefined, cmsUrl: props.moreCmsUrl })] }));
+}

package/dist/toolbar/toolbar.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import type { BreakpointConfig } from '../app/config.ts';
+import type { Zoom } from './zoom-menu.tsx';
+export interface ToolbarProps {
+    /** The document's title, shown after the link back. */
+    readonly title: string;
+    /** Saves a new page name (`adapter.rename`); the title is not editable without it. */
+    readonly onTitleChange?: ((title: string) => Promise<void>) | undefined;
+    /** Draft or published, as a pill next to the title. */
+    readonly status?: 'draft' | 'published' | undefined;
+    readonly breakpoints: readonly BreakpointConfig[];
+    readonly breakpoint: string;
+    readonly onBreakpointChange: (id: string) => void;
+    /** The canvas zoom (`host.setZoom`); `fit` when left out. */
+    readonly zoom?: Zoom | undefined;
+    /** Changes the canvas zoom; the zoom menu is left out without it. */
+    readonly onZoomChange?: ((zoom: Zoom) => void) | undefined;
+    /** The page in the CMS's admin (`adapter.cmsUrl`); the link is left out without it. */
+    readonly cmsUrl?: string | undefined;
+    /** The version history in the CMS; the link is left out without it. */
+    readonly historyUrl?: string | undefined;
+    /** The locale and sample pickers, rendered on the right between the save status and Preview. */
+    readonly pickers?: ReactNode;
+    /** Flushes the save and opens the preview (PB-091). */
+    readonly onPreview?: (() => void) | undefined;
+    /** Opens the publish dialog (PB-088). */
+    readonly onPublish?: (() => void) | undefined;
+    /** The session may publish (`adapter.getSession().canPublish`). */
+    readonly canPublish?: boolean | undefined;
+}
+/**
+ * The editor's primary actions (docs/editor.md#toolbar-pb-083) in three zones: the link back, title
+ * and status on the left; screen size and zoom in the centre; undo/redo, save status, pickers,
+ * Preview, Publish and the more menu on the right. It reads the store and the persistence
+ * controller from context; the shortcuts show in the tooltips.
+ */
+export declare function Toolbar(props: ToolbarProps): import("react").JSX.Element;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/toolbar/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sFAAsF;IACtF,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IACxE,uDAAuD;IACvD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;IACpD,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACjC,qEAAqE;IACrE,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,uFAAuF;IACvF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,uEAAuE;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,gGAAgG;IAChG,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,yCAAyC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,mEAAmE;IACnE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC3C;AASD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BAsC1C"}

package/dist/toolbar/toolbar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { usePersistenceState } from '../persistence/index.js';
+import { PanelToggle } from './panel-toggles.js';
+import { ToolbarCentre } from './toolbar-centre.js';
+import { ToolbarLeft } from './toolbar-left.js';
+import { ToolbarRight } from './toolbar-right.js';
+import { useOverflowLevel } from './use-overflow-level.js';
+/**
+ * What changes as the row runs out of room, in order (a step is taken only when the content
+ * overflows): 1 the version history moves into the more menu, 2 the save text becomes icon only,
+ * 3 the link back to the CMS moves into the more menu, 4 the title may shrink.
+ */
+const COLLAPSE = { versions: 1, saveText: 2, cms: 3, title: 4 };
+/**
+ * The editor's primary actions (docs/editor.md#toolbar-pb-083) in three zones: the link back, title
+ * and status on the left; screen size and zoom in the centre; undo/redo, save status, pickers,
+ * Preview, Publish and the more menu on the right. It reads the store and the persistence
+ * controller from context; the shortcuts show in the tooltips.
+ */
+export function Toolbar(props) {
+    const row = useRef(null);
+    const level = useOverflowLevel(row, COLLAPSE.title);
+    const status = usePersistenceState((state) => state.status);
+    const cmsMoved = level >= COLLAPSE.cms;
+    return (_jsxs("div", { className: "bd-toolbar-row", ref: row, "data-level": level, children: [_jsx(PanelToggle, { side: "left" }), _jsx(ToolbarLeft, { title: props.title, onRename: props.onTitleChange, status: props.status, cmsUrl: cmsMoved ? undefined : props.cmsUrl }), _jsx("span", { className: "bd-toolbar-spacer" }), _jsx(ToolbarCentre, { breakpoints: props.breakpoints, breakpoint: props.breakpoint, onBreakpointChange: props.onBreakpointChange, zoom: props.zoom, onZoomChange: props.onZoomChange }), _jsx("span", { className: "bd-toolbar-spacer" }), _jsx(ToolbarRight, { pickers: props.pickers, status: status, onPreview: props.onPreview, onPublish: props.onPublish, canPublish: props.canPublish, compactSave: level >= COLLAPSE.saveText, historyUrl: props.historyUrl, historyInMenu: level >= COLLAPSE.versions, moreCmsUrl: cmsMoved ? props.cmsUrl : undefined }), _jsx(PanelToggle, { side: "right" })] }));
+}

package/dist/toolbar/toolbar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toolbar.test.d.ts.map

package/dist/toolbar/toolbar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.test.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.test.tsx"],"names":[],"mappings":""}

package/dist/toolbar/toolbar.test.js

@@ -0,0 +1,289 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { axe } from 'vitest-axe';
+import * as matchers from 'vitest-axe/matchers';
+import { MessagesProvider } from '../messages/index.js';
+import { createPersistence, PersistenceProvider, } from '../persistence/index.js';
+import { ShortcutProvider } from '../shortcuts/index.js';
+import { createEditorStore, EditorStoreProvider } from '../store/index.js';
+import { ToastProvider } from '../ui/index.js';
+import { ThemeProvider } from './theme.js';
+import { Toolbar } from './toolbar.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const item = {
+    type: 'buildr/item',
+    version: 1,
+    label: 'Item',
+    category: 'content',
+    props: {},
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+    slots: { default: {} },
+};
+const page = {
+    ...item,
+    type: 'buildr/page',
+    label: 'Page',
+    capabilities: { root: true },
+};
+const registryMeta = createRegistryMeta({ components: [page, item] });
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['itemAAAAA1'] } },
+        itemAAAAA1: { id: 'itemAAAAA1', type: 'buildr/item' },
+    },
+    components: {},
+});
+const adapter = {
+    save: async () => ({ ok: true, revision: 2, updatedAt: 't2' }),
+};
+const breakpoints = [
+    { id: 'desktop', width: 1280 },
+    { id: 'tablet', width: 820 },
+    { id: 'mobile', width: 390 },
+];
+describe('Toolbar', () => {
+    let container;
+    let root;
+    let controller;
+    const buttons = () => [...container.querySelectorAll('button')];
+    const byName = (name) => buttons().find((b) => (b.getAttribute('aria-label') ?? b.textContent ?? '').includes(name));
+    async function mount(overrides = {}, options = {}) {
+        const store = createEditorStore({
+            doc: fixture(),
+            registry: registryMeta,
+            generateId: createSeededIdGenerator(3),
+            validationDelayMs: null,
+        });
+        if (options.readOnly === true)
+            store.setReadOnly(true);
+        controller = createPersistence({
+            store,
+            adapter,
+            ref: { collection: 'pages', id: '1' },
+            revision: 1,
+        });
+        const props = {
+            title: 'Home',
+            breakpoints,
+            breakpoint: 'desktop',
+            onBreakpointChange: () => undefined,
+            ...overrides,
+        };
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: _jsx(ShortcutProvider, { platform: "other", children: _jsx(ToastProvider, { children: _jsx(PersistenceProvider, { controller: controller, children: _jsx(ThemeProvider, { value: options.theme, children: _jsx("div", { role: "toolbar", "aria-label": "Toolbar", children: _jsx(Toolbar, { ...props }) }) }) }) }) }) }) })));
+        return store;
+    }
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        document.body.innerHTML = '';
+    });
+    it('shows the title and switches the breakpoint', async () => {
+        const onBreakpointChange = vi.fn();
+        await mount({ onBreakpointChange, breakpoint: 'tablet' });
+        expect(container.querySelector('h1')?.textContent).toBe('Home');
+        expect(byName('Tablet')?.getAttribute('aria-pressed')).toBe('true');
+        expect(byName('Desktop')?.getAttribute('aria-pressed')).toBe('false');
+        await act(async () => byName('Mobile')?.click());
+        expect(onBreakpointChange).toHaveBeenCalledWith('mobile');
+    });
+    it('enables undo and redo only when there is something to undo or redo', async () => {
+        const store = await mount();
+        const undo = () => byName('Undo');
+        const redo = () => byName('Redo');
+        expect(undo().disabled).toBe(true);
+        expect(redo().disabled).toBe(true);
+        await act(async () => {
+            store.dispatch({
+                type: 'node.setAttr',
+                payload: { id: 'itemAAAAA1', key: 'name', value: 'a' },
+            });
+        });
+        expect(undo().disabled).toBe(false);
+        await act(async () => undo().click());
+        expect(undo().disabled).toBe(true);
+        expect(redo().disabled).toBe(false);
+        await act(async () => redo().click());
+        expect(store.getState().doc.nodes['itemAAAAA1']?.name).toBe('a');
+    });
+    it('disables undo and redo of a read-only document', async () => {
+        await mount({}, { readOnly: true });
+        expect(byName('Undo').disabled).toBe(true);
+        expect(container.textContent).toContain('Read only');
+    });
+    it('shows the save status', async () => {
+        const store = await mount();
+        expect(container.querySelector('[role=status]')?.textContent).toContain('All changes saved');
+        await act(async () => {
+            store.dispatch({
+                type: 'node.setAttr',
+                payload: { id: 'itemAAAAA1', key: 'name', value: 'a' },
+            });
+        });
+        expect(container.querySelector('[role=status]')?.textContent).toContain('Unsaved changes');
+    });
+    it('calls preview and publish, which are off without a handler or the right', async () => {
+        const onPreview = vi.fn();
+        const onPublish = vi.fn();
+        await mount({ onPreview, onPublish });
+        await act(async () => byName('Preview')?.click());
+        await act(async () => byName('Publish')?.click());
+        expect(onPreview).toHaveBeenCalledOnce();
+        expect(onPublish).toHaveBeenCalledOnce();
+        await mount({ onPublish, canPublish: false });
+        expect(byName('Publish').disabled).toBe(true);
+        expect(byName('Preview').disabled).toBe(true);
+    });
+    it('links to the CMS and the version history only when it has them', async () => {
+        await mount();
+        expect(container.querySelector('a')).toBeNull();
+        await mount({ cmsUrl: '/admin/pages/1', historyUrl: '/admin/pages/1/versions' });
+        const links = [...container.querySelectorAll('a')];
+        expect(links.map((a) => a.getAttribute('href'))).toEqual([
+            '/admin/pages/1',
+            '/admin/pages/1/versions',
+        ]);
+        expect(links[0]?.getAttribute('aria-label')).toBe('Back to CMS');
+        expect(links[1]?.getAttribute('aria-label')).toBe('Version history');
+    });
+    it('has no accessibility violations', async () => {
+        await mount({
+            cmsUrl: '/admin',
+            historyUrl: '/versions',
+            onPreview: () => undefined,
+            onPublish: () => undefined,
+        });
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('names the buttons without the shortcuts, which appear in the tooltips', async () => {
+        await mount();
+        const undo = byName('Undo');
+        expect(undo.getAttribute('aria-label')).toBe('Undo');
+        await act(async () => {
+            undo.focus();
+            undo.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+        });
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 20));
+        });
+        // Radix opens the tooltip on keyboard focus; its text carries the shortcut.
+        const tip = document.querySelector('[role=tooltip]');
+        expect(tip?.textContent).toContain('Ctrl+Z');
+    });
+    const menuButtons = () => [...document.querySelectorAll('.bd-menu-list button')];
+    const openMore = async () => act(async () => byName('More actions').click());
+    it('shows the breakpoints as icon buttons with the width in the tooltip', async () => {
+        await mount({ breakpoint: 'tablet' });
+        const tablet = byName('Tablet');
+        expect(tablet.textContent).toBe('');
+        expect(tablet.querySelector('svg')).not.toBeNull();
+        await act(async () => {
+            tablet.focus();
+            tablet.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+        });
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 20));
+        });
+        expect(document.querySelector('[role=tooltip]')?.textContent).toContain('Tablet · 820px');
+    });
+    it('shows the status pill of the document', async () => {
+        await mount({ status: 'published' });
+        expect(container.querySelector('.bd-status-pill')?.textContent).toBe('Published');
+    });
+    it('changes the zoom through the menu', async () => {
+        const onZoomChange = vi.fn();
+        await mount({ onZoomChange, zoom: 'fit' });
+        const trigger = byName('Zoom');
+        expect(trigger.getAttribute('aria-label')).toBe('Zoom: Fit');
+        await act(async () => trigger.click());
+        expect(menuButtons().map((b) => b.textContent)).toEqual(['Fit', '50%', '75%', '100%', '125%']);
+        await act(async () => menuButtons().find((b) => b.textContent === '75%').click());
+        expect(onZoomChange).toHaveBeenCalledWith(0.75);
+    });
+    it('leaves the zoom menu out without a handler', async () => {
+        await mount();
+        expect(byName('Zoom')).toBeUndefined();
+    });
+    it('keeps every action reachable in a narrow row by moving them into the more menu', async () => {
+        // jsdom has no layout: the row overflows until the toolbar has collapsed every step.
+        const proto = HTMLElement.prototype;
+        const client = Object.getOwnPropertyDescriptor(proto, 'clientWidth');
+        const scroll = Object.getOwnPropertyDescriptor(proto, 'scrollWidth');
+        Object.defineProperty(proto, 'clientWidth', {
+            configurable: true,
+            get() {
+                return this.classList.contains('bd-toolbar-row') ? 1024 : 0;
+            },
+        });
+        Object.defineProperty(proto, 'scrollWidth', {
+            configurable: true,
+            get() {
+                if (!this.classList.contains('bd-toolbar-row'))
+                    return 0;
+                return 1024 + (4 - Number(this.getAttribute('data-level'))) * 100;
+            },
+        });
+        try {
+            await mount({ cmsUrl: '/admin', historyUrl: '/versions', onPreview: () => undefined });
+            expect(container.querySelector('.bd-toolbar-row')?.getAttribute('data-level')).toBe('4');
+            expect(container.querySelector('a')).toBeNull();
+            await openMore();
+            const links = [...document.querySelectorAll('.bd-menu-list a')];
+            expect(links.map((a) => a.getAttribute('href'))).toEqual(['/admin', '/versions']);
+            expect(document.querySelector('.bd-menu-list')?.textContent).toContain('Keyboard shortcuts');
+            for (const name of ['Undo', 'Redo', 'Desktop', 'Tablet', 'Mobile', 'Preview', 'Publish']) {
+                expect(byName(name)).toBeDefined();
+            }
+        }
+        finally {
+            if (client !== undefined)
+                Object.defineProperty(proto, 'clientWidth', client);
+            else
+                Reflect.deleteProperty(proto, 'clientWidth');
+            if (scroll !== undefined)
+                Object.defineProperty(proto, 'scrollWidth', scroll);
+            else
+                Reflect.deleteProperty(proto, 'scrollWidth');
+        }
+    });
+    it('opens the shortcut help from the more menu', async () => {
+        await mount();
+        await openMore();
+        const item = menuButtons().find((b) => (b.textContent ?? '').includes('Keyboard shortcuts'));
+        await act(async () => item.click());
+        expect(document.querySelector('[role=dialog]')?.textContent).toContain('Keyboard shortcuts');
+    });
+    it('switches the theme from the more menu, unless the host fixed it', async () => {
+        const setPreference = vi.fn();
+        const theme = {
+            preference: 'system',
+            attribute: 'system',
+            forced: false,
+            setPreference,
+        };
+        await mount({}, { theme });
+        await openMore();
+        const group = document.querySelector('[aria-label=Theme]');
+        const choice = (name) => [...(group?.querySelectorAll('button') ?? [])].find((b) => b.textContent?.includes(name));
+        expect(choice('System')?.getAttribute('aria-pressed')).toBe('true');
+        await act(async () => choice('Dark').click());
+        expect(setPreference).toHaveBeenCalledWith('dark');
+        await act(async () => root.unmount());
+        root = createRoot(container);
+        await mount({}, { theme: { ...theme, forced: true, preference: 'dark', attribute: 'dark' } });
+        await openMore();
+        expect(document.querySelector('[aria-label=Theme]')).toBeNull();
+    });
+});

package/dist/toolbar/use-overflow-level.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+/**
+ * How many steps of collapsing (0..`max`) the toolbar needs to fit its row. It measures the row
+ * itself with a `ResizeObserver`, not the window, because the editor may be embedded in a box of
+ * any width. A step is taken when the content overflows; it is undone once the row is as wide as
+ * the content was when that step was taken.
+ */
+export declare function useOverflowLevel(ref: RefObject<HTMLElement | null>, max: number): number;
+//# sourceMappingURL=use-overflow-level.d.ts.map

package/dist/toolbar/use-overflow-level.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-overflow-level.d.ts","sourceRoot":"","sources":["../../src/toolbar/use-overflow-level.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAgD,MAAM,OAAO,CAAC;AAErF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAkCxF"}

package/dist/toolbar/use-overflow-level.js

@@ -0,0 +1,40 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+/**
+ * How many steps of collapsing (0..`max`) the toolbar needs to fit its row. It measures the row
+ * itself with a `ResizeObserver`, not the window, because the editor may be embedded in a box of
+ * any width. A step is taken when the content overflows; it is undone once the row is as wide as
+ * the content was when that step was taken.
+ */
+export function useOverflowLevel(ref, max) {
+    const [level, setLevel] = useState(0);
+    // The content width at which each level overflowed, to know when it fits again.
+    const needed = useRef([]);
+    const measure = () => {
+        const el = ref.current;
+        if (el === null)
+            return;
+        const room = el.clientWidth;
+        if (el.scrollWidth > room + 1 && level < max) {
+            needed.current[level] = el.scrollWidth;
+            setLevel(level + 1);
+            return;
+        }
+        const previous = needed.current[level - 1];
+        if (level > 0 && previous !== undefined && room >= previous)
+            setLevel(level - 1);
+    };
+    const latest = useRef(measure);
+    latest.current = measure;
+    // Every commit: a new level, a longer title or a picker that appeared can all change the width.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `measure` is redefined each render on purpose
+    useLayoutEffect(measure);
+    useEffect(() => {
+        const el = ref.current;
+        if (el === null || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => latest.current());
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ref]);
+    return level;
+}

package/dist/toolbar/zoom-menu.d.ts

@@ -0,0 +1,10 @@
+export type Zoom = 'fit' | number;
+/** The zoom levels the menu offers; `host.setZoom` takes the scale as a fraction (1 is 100%). */
+export declare const ZOOM_LEVELS: readonly Zoom[];
+export interface ZoomMenuProps {
+    readonly zoom: Zoom;
+    readonly onChange: (zoom: Zoom) => void;
+}
+/** The canvas zoom: Fit, 50, 75, 100 and 125 percent (the host's `setZoom`). */
+export declare function ZoomMenu({ zoom, onChange }: ZoomMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=zoom-menu.d.ts.map

package/dist/toolbar/zoom-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-menu.d.ts","sourceRoot":"","sources":["../../src/toolbar/zoom-menu.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAElC,iGAAiG;AACjG,eAAO,MAAM,WAAW,EAAE,SAAS,IAAI,EAAgC,CAAC;AAExE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACzC;AAID,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAuCzD"}

package/dist/toolbar/zoom-menu.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useT } from '../messages/index.js';
+import { Button, Icon, Popover } from '../ui/index.js';
+/** The zoom levels the menu offers; `host.setZoom` takes the scale as a fraction (1 is 100%). */
+export const ZOOM_LEVELS = ['fit', 0.5, 0.75, 1, 1.25];
+const percent = (zoom) => `${Math.round(zoom * 100)}%`;
+/** The canvas zoom: Fit, 50, 75, 100 and 125 percent (the host's `setZoom`). */
+export function ZoomMenu({ zoom, onChange }) {
+    const t = useT();
+    const [open, setOpen] = useState(false);
+    const text = (value) => (value === 'fit' ? t('toolbar.zoom.fit') : percent(value));
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, contentClassName: "bd-menu-popover", label: t('toolbar.zoom'), trigger: _jsxs(Button, { variant: "ghost", className: "bd-zoom-trigger bd-tabular", "aria-label": `${t('toolbar.zoom')}: ${text(zoom)}`, children: [_jsx("span", { "aria-hidden": "true", children: text(zoom) }), _jsx(Icon, { name: "chevron-down" })] }), children: _jsx("div", { className: "bd-menu-list", children: ZOOM_LEVELS.map((level) => (_jsx("button", { type: "button", className: "bd-menu-item bd-tabular", "aria-pressed": level === zoom, onClick: () => {
+                    onChange(level);
+                    setOpen(false);
+                }, children: text(level) }, level))) }) }));
+}

package/dist/ui/icon.d.ts

@@ -0,0 +1,102 @@
+import { type LucideIcon } from 'lucide-react';
+/** The icons the editor's own chrome uses. */
+declare const EDITOR_ICONS: {
+    readonly 'text-align-center': LucideIcon;
+    readonly 'align-center-vertical': LucideIcon;
+    readonly 'align-end-vertical': LucideIcon;
+    readonly 'align-horizontal-justify-center': LucideIcon;
+    readonly 'align-horizontal-justify-end': LucideIcon;
+    readonly 'align-horizontal-justify-start': LucideIcon;
+    readonly 'align-horizontal-space-around': LucideIcon;
+    readonly 'align-horizontal-space-between': LucideIcon;
+    readonly 'text-align-justify': LucideIcon;
+    readonly 'text-align-start': LucideIcon;
+    readonly 'text-align-end': LucideIcon;
+    readonly 'align-start-vertical': LucideIcon;
+    readonly 'arrow-right': LucideIcon;
+    readonly braces: LucideIcon;
+    readonly calendar: LucideIcon;
+    readonly database: LucideIcon;
+    readonly hash: LucideIcon;
+    readonly image: LucideIcon;
+    readonly sigma: LucideIcon;
+    readonly 'stretch-vertical': LucideIcon;
+    readonly 'toggle-left': LucideIcon;
+    readonly type: LucideIcon;
+    readonly ban: LucideIcon;
+    readonly 'case-lower': LucideIcon;
+    readonly 'case-sensitive': LucideIcon;
+    readonly 'case-upper': LucideIcon;
+    readonly italic: LucideIcon;
+    readonly 'link-2': LucideIcon;
+    readonly strikethrough: LucideIcon;
+    readonly underline: LucideIcon;
+    readonly 'unlink-2': LucideIcon;
+    readonly 'arrow-down': LucideIcon;
+    readonly 'arrow-left': LucideIcon;
+    readonly 'arrow-up': LucideIcon;
+    readonly box: LucideIcon;
+    readonly check: LucideIcon;
+    readonly 'chevron-down': LucideIcon;
+    readonly 'chevron-right': LucideIcon;
+    readonly circle: LucideIcon;
+    readonly copy: LucideIcon;
+    readonly 'circle-alert': LucideIcon;
+    readonly 'circle-check': LucideIcon;
+    readonly ellipsis: LucideIcon;
+    readonly eye: LucideIcon;
+    readonly history: LucideIcon;
+    readonly keyboard: LucideIcon;
+    readonly 'layout-grid': LucideIcon;
+    readonly info: LucideIcon;
+    readonly link: LucideIcon;
+    readonly list: LucideIcon;
+    readonly 'list-ordered': LucideIcon;
+    readonly 'loader-circle': LucideIcon;
+    readonly lock: LucideIcon;
+    readonly monitor: LucideIcon;
+    readonly 'monitor-smartphone': LucideIcon;
+    readonly moon: LucideIcon;
+    readonly 'mouse-pointer-click': LucideIcon;
+    readonly 'panel-left': LucideIcon;
+    readonly 'panel-right': LucideIcon;
+    readonly 'redo-2': LucideIcon;
+    readonly 'rotate-ccw': LucideIcon;
+    readonly smartphone: LucideIcon;
+    readonly sun: LucideIcon;
+    readonly tablet: LucideIcon;
+    readonly 'trash-2': LucideIcon;
+    readonly search: LucideIcon;
+    readonly 'triangle-alert': LucideIcon;
+    readonly 'undo-2': LucideIcon;
+    readonly x: LucideIcon;
+};
+export type IconName = keyof typeof EDITOR_ICONS;
+/** The names `ComponentIcon` resolves (everything else shows the neutral `box`). */
+export declare const componentIconNames: readonly string[];
+declare const SIZES: {
+    readonly sm: 16;
+    readonly md: 20;
+};
+export interface IconProps {
+    readonly name: IconName;
+    /** 16px in dense rows (default), 20px in palette tiles. */
+    readonly size?: keyof typeof SIZES;
+    /** Makes the icon meaningful (`role="img"` with this name); without it the icon is decorative. */
+    readonly label?: string | undefined;
+    readonly className?: string;
+}
+/** One of the editor's own icons, drawn in `currentColor`. */
+export declare function Icon({ name, size, label, className }: IconProps): import("react").JSX.Element;
+export interface ComponentIconProps {
+    /** A component's metadata (only `icon` is read). */
+    readonly meta: {
+        readonly icon?: string | undefined;
+    } | undefined;
+    readonly size?: keyof typeof SIZES;
+    readonly className?: string;
+}
+/** The icon of a component; a missing or unknown name gives a neutral box, never a letter. */
+export declare function ComponentIcon({ meta, size, className }: ComponentIconProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=icon.d.ts.map

package/dist/ui/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAiEL,KAAK,UAAU,EAgEhB,MAAM,cAAc,CAAC;AAStB,8CAA8C;AAC9C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE6B,CAAC;AAEhD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AAwFjD,oFAAoF;AACpF,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAAiC,CAAC;AAElF,QAAA,MAAM,KAAK;aAAK,EAAE,EAAE,EAAE;aAAE,EAAE,EAAE,EAAE;CAAW,CAAC;AAG1C,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IACnC,kGAAkG;IAClG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAuBD,8DAA8D;AAC9D,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,+BAEtE;AAED,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,GAAG,SAAS,CAAC;IAClE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,8FAA8F;AAC9F,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BAYjF"}