@next-buildr/editor 2.0.1 → 3.0.0-rc.0

package/dist/toolbar/toolbar.test.js

@@ -1,15 +1,15 @@
 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 { ShellPanelsContext } from '../app/shell-panels.js';
 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 { createEditorStore, createLocaleStore, EditorStoreProvider, LocaleProvider, } from '../store/index.js';
 import { ToastProvider } from '../ui/index.js';
 import { ThemeProvider } from './theme.js';
 import { Toolbar } from './toolbar.js';
@@ -71,6 +71,12 @@ describe('Toolbar', () => {
             ref: { collection: 'pages', id: '1' },
             revision: 1,
         });
+        const localeStore = createLocaleStore(options.locales ?? {
+            locales: ['en'],
+            default: 'en',
+            fallback: true,
+            intl: { en: 'English' },
+        });
         const props = {
             title: 'Home',
             breakpoints,
@@ -78,7 +84,7 @@ describe('Toolbar', () => {
             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 }) }) }) }) }) }) }) })));
+        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(LocaleProvider, { store: localeStore, children: _jsx(ShellPanelsContext.Provider, { value: options.panels, children: _jsx("div", { role: "toolbar", "aria-label": "Toolbar", children: _jsx(Toolbar, { ...props }) }) }) }) }) }) }) }) }) })));
         return store;
     }
     beforeEach(() => {
@@ -93,7 +99,7 @@ describe('Toolbar', () => {
     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('Home')?.textContent).toContain('Home');
         expect(byName('Tablet')?.getAttribute('aria-pressed')).toBe('true');
         expect(byName('Desktop')?.getAttribute('aria-pressed')).toBe('false');
         await act(async () => byName('Mobile')?.click());
@@ -155,9 +161,27 @@ describe('Toolbar', () => {
             '/admin/pages/1',
             '/admin/pages/1/versions',
         ]);
-        expect(links[0]?.getAttribute('aria-label')).toBe('Back to CMS');
+        expect(links[0]?.getAttribute('aria-label')).toBe('Back to the CMS panel');
         expect(links[1]?.getAttribute('aria-label')).toBe('Version history');
     });
+    it('hides a version history link that is not a safe web address', async () => {
+        await mount({ historyUrl: 'javascript:alert(1)' });
+        expect(container.querySelector('[aria-label="Version history"]')).toBeNull();
+        await mount({ historyUrl: 'data:text/html,x' });
+        expect(container.querySelector('[aria-label="Version history"]')).toBeNull();
+        await mount({ historyUrl: 'https://cms.test/versions' });
+        expect(container.querySelector('a[aria-label="Version history"]')?.getAttribute('href')).toBe('https://cms.test/versions');
+    });
+    it('renders a function history as a button that calls it, and nothing without it', async () => {
+        const open = vi.fn();
+        await mount({ historyUrl: open });
+        const button = byName('Version history');
+        expect(button.tagName).toBe('BUTTON');
+        await act(async () => button.click());
+        expect(open).toHaveBeenCalledTimes(1);
+        await mount();
+        expect(container.querySelector('[aria-label="Version history"]')).toBeNull();
+    });
     it('has no accessibility violations', async () => {
         await mount({
             cmsUrl: '/admin',
@@ -183,7 +207,7 @@ describe('Toolbar', () => {
         expect(tip?.textContent).toContain('Ctrl+Z');
     });
     const menuButtons = () => [...document.querySelectorAll('.bd-menu-list button')];
-    const openMore = async () => act(async () => byName('More actions').click());
+    const openMore = async () => act(async () => byName('More options').click());
     it('shows the breakpoints as icon buttons with the width in the tooltip', async () => {
         await mount({ breakpoint: 'tablet' });
         const tablet = byName('Tablet');
@@ -196,24 +220,41 @@ describe('Toolbar', () => {
         await act(async () => {
             await new Promise((resolve) => setTimeout(resolve, 20));
         });
-        expect(document.querySelector('[role=tooltip]')?.textContent).toContain('Tablet · 820px');
+        expect(document.querySelector('[role=tooltip]')?.textContent).toContain('Tablet · 820 px');
+    });
+    it('marks device overrides on the selected node without changing the document', async () => {
+        const store = await mount();
+        const doc = fixture();
+        const node = doc.nodes['itemAAAAA1'];
+        if (node === undefined)
+            throw new Error('Missing fixture node');
+        const responsive = {
+            ...doc,
+            nodes: {
+                ...doc.nodes,
+                itemAAAAA1: {
+                    ...node,
+                    styles: { bp: { tablet: { typography: { fontSize: '24px' } } } },
+                },
+            },
+        };
+        await act(async () => {
+            store.replaceDocument(responsive);
+            store.select('itemAAAAA1');
+        });
+        expect(byName('Tablet')?.getAttribute('data-override')).toBe('true');
+        expect(byName('Mobile')?.getAttribute('data-override')).toBe('false');
+        expect(byName('Tablet')?.getAttribute('aria-description')).toBe('Overrides for this device');
+        expect(store.getState().doc).toEqual(responsive);
+        await act(async () => store.select('root'));
+        expect(byName('Tablet')?.getAttribute('data-override')).toBe('false');
     });
     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(container.querySelector('.bd-page-chip-status')?.textContent).toBe('Published');
+    });
+    it('has no zoom control, which lives in the status bar', async () => {
+        await mount({});
         expect(byName('Zoom')).toBeUndefined();
     });
     it('keeps every action reachable in a narrow row by moving them into the more menu', async () => {
@@ -263,8 +304,23 @@ describe('Toolbar', () => {
         await openMore();
         const item = menuButtons().find((b) => (b.textContent ?? '').includes('Keyboard shortcuts'));
         await act(async () => item.click());
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 10));
+        });
         expect(document.querySelector('[role=dialog]')?.textContent).toContain('Keyboard shortcuts');
     });
+    it('opens the shortcuts through onOpenShortcuts, not by replaying the key', async () => {
+        const onOpenShortcuts = vi.fn();
+        await mount({ onOpenShortcuts });
+        await openMore();
+        const item = menuButtons().find((b) => (b.textContent ?? '').includes('Keyboard shortcuts'));
+        await act(async () => item.click());
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 10));
+        });
+        expect(onOpenShortcuts).toHaveBeenCalledOnce();
+        expect(document.querySelector('[role=dialog]')).toBeNull();
+    });
     it('switches the theme from the more menu, unless the host fixed it', async () => {
         const setPreference = vi.fn();
         const theme = {
@@ -275,7 +331,7 @@ describe('Toolbar', () => {
         };
         await mount({}, { theme });
         await openMore();
-        const group = document.querySelector('[aria-label=Theme]');
+        const group = document.querySelector('[aria-label="Editor 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());
@@ -284,6 +340,165 @@ describe('Toolbar', () => {
         root = createRoot(container);
         await mount({}, { theme: { ...theme, forced: true, preference: 'dark', attribute: 'dark' } });
         await openMore();
-        expect(document.querySelector('[aria-label=Theme]')).toBeNull();
+        expect(document.querySelector('[aria-label="Editor theme"]')).toBeNull();
+    });
+    const wait = (ms = 10) => act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, ms));
+    });
+    const dialog = () => document.querySelector('[role=dialog][data-state=open]');
+    it('shows the page chip with the status and opens the page options dialog', async () => {
+        await mount({ status: 'draft', slug: 'home' });
+        const chip = byName('page options');
+        expect(chip.getAttribute('aria-label')).toBe('Home – page options');
+        expect(chip.getAttribute('aria-haspopup')).toBe('dialog');
+        expect(chip.querySelector('.bd-page-chip-status')?.textContent).toBe('Draft');
+        expect(dialog()).toBeNull();
+        await act(async () => chip.click());
+        expect(dialog()?.textContent).toContain('Page options');
+    });
+    it('renames the page from the dialog through the rename path, address read-only', async () => {
+        const onTitleChange = vi.fn(async () => undefined);
+        await mount({ onTitleChange, slug: 'home' });
+        await act(async () => byName('page options').click());
+        const name = dialog()?.querySelector('input[aria-label="Page name"]');
+        expect(name.value).toBe('Home');
+        await act(async () => name.focus());
+        await act(async () => {
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(name, 'About');
+            name.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        await act(async () => {
+            name.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        });
+        expect(onTitleChange).toHaveBeenCalledWith('About');
+        const address = [...(dialog()?.querySelectorAll('input') ?? [])].find((input) => input.value === 'home');
+        expect(address?.readOnly).toBe(true);
+    });
+    it('keeps the name read-only without a rename path and closes the dialog on Done', async () => {
+        await mount({});
+        await act(async () => byName('page options').click());
+        const name = dialog()?.querySelector('input');
+        expect(name.readOnly).toBe(true);
+        expect(dialog()?.textContent).not.toContain('Address');
+        const done = [...(dialog()?.querySelectorAll('button') ?? [])].find((b) => b.textContent === 'Done');
+        await act(async () => done?.click());
+        await wait(50);
+        expect(dialog()).toBeNull();
+    });
+    const panelsOf = (overrides = {}) => ({
+        narrow: false,
+        open: { left: false, right: false },
+        toggle: vi.fn(),
+        collapsed: { left: false, right: true },
+        toggleCollapsed: vi.fn(),
+        ...overrides,
+    });
+    it('drives the panel collapse from the toggles when the layout is wide', async () => {
+        const panels = panelsOf();
+        await mount({}, { panels });
+        const left = byName('Left panel');
+        const right = byName('Inspector panel');
+        expect(left.getAttribute('aria-pressed')).toBe('true');
+        expect(right.getAttribute('aria-pressed')).toBe('false');
+        await act(async () => left.click());
+        await act(async () => right.click());
+        expect(panels.toggleCollapsed).toHaveBeenNthCalledWith(1, 'left');
+        expect(panels.toggleCollapsed).toHaveBeenNthCalledWith(2, 'right');
+        expect(panels.toggle).not.toHaveBeenCalled();
+    });
+    it('opens the panels as an overlay when the layout is narrow', async () => {
+        const panels = panelsOf({ narrow: true, open: { left: true, right: false } });
+        await mount({}, { panels });
+        expect(byName('Left panel').getAttribute('aria-pressed')).toBe('true');
+        await act(async () => byName('Inspector panel').click());
+        expect(panels.toggle).toHaveBeenCalledWith('right');
+        expect(panels.toggleCollapsed).not.toHaveBeenCalled();
+    });
+    it('puts undo and redo on the left, and the screen size and Publish on the right', async () => {
+        await mount({ onPublish: () => undefined });
+        const zone = (name) => container.querySelector(`[data-zone=${name}]`);
+        const names = (el) => [...el.querySelectorAll('button')].map((b) => b.getAttribute('aria-label') ?? b.textContent);
+        expect(names(zone('left'))).toEqual(['Undo', 'Redo']);
+        expect(names(zone('centre'))).toEqual(['Home – page options']);
+        const right = names(zone('right'));
+        expect(right.slice(0, 3)).toEqual(['Desktop', 'Tablet', 'Mobile']);
+        expect(right.at(-1)).toBe('Publish');
+        expect(zone('right').querySelector('.bd-publish svg')).toBeNull();
+    });
+    const locales = {
+        locales: ['en', 'pl'],
+        default: 'en',
+        fallback: true,
+        intl: { en: 'English', pl: 'Polski' },
+    };
+    it('switches the content language from the locale chip', async () => {
+        const onLocaleChange = vi.fn();
+        await mount({ onLocaleChange }, { locales });
+        const chip = byName('Content language');
+        expect(chip.getAttribute('aria-label')).toBe('Content language: English');
+        expect(chip.textContent).toBe('EN');
+        await act(async () => chip.click());
+        const items = menuButtons();
+        expect(items.map((b) => b.textContent)).toEqual(['EnglishEN', 'PolskiPL']);
+        expect(items[0]?.getAttribute('aria-pressed')).toBe('true');
+        await act(async () => items[1].click());
+        expect(onLocaleChange).toHaveBeenCalledWith('pl');
+        expect(byName('Content language').textContent).toBe('PL');
+    });
+    it('has no locale chip for a single language', async () => {
+        await mount();
+        expect(byName('Content language')).toBeUndefined();
+    });
+    it('lists the more options: theme, shortcuts with its key, no sample data for a page', async () => {
+        const theme = {
+            preference: 'light',
+            attribute: 'light',
+            forced: false,
+            setPreference: () => undefined,
+        };
+        await mount({}, { theme });
+        await openMore();
+        const text = document.querySelector('.bd-menu-list')?.textContent ?? '';
+        expect(text).toContain('Editor theme');
+        expect(text).toContain('Keyboard shortcuts');
+        expect(text).not.toContain('Sample data');
+        const shortcuts = menuButtons().find((b) => b.textContent?.includes('Keyboard shortcuts'));
+        expect(shortcuts?.querySelector('kbd')?.textContent).toBe('Shift+?');
+    });
+    it('switches the block outlines from the more options, and Help falls back to the shortcuts', async () => {
+        await mount();
+        await openMore();
+        const outlines = () => menuButtons().find((b) => b.textContent?.includes('Show block outlines'));
+        expect(outlines()?.querySelector('kbd')?.textContent).toBe('Off');
+        await act(async () => outlines().click());
+        expect(outlines()?.getAttribute('aria-pressed')).toBe('true');
+        expect(outlines()?.querySelector('kbd')?.textContent).toBe('On');
+        expect(menuButtons().some((b) => b.textContent?.includes('Help'))).toBe(true);
+    });
+    it('puts the sample data in the page options and lists it in the more options', async () => {
+        const onChange = vi.fn();
+        const adapter = { listSamples: async () => [{ id: 's1', label: 'Spring' }] };
+        const storage = { getItem: () => 's1', setItem: () => undefined };
+        await mount({
+            sample: { adapter, docRef: { collection: 'pages', id: '1' }, onChange, storage },
+        });
+        await wait();
+        expect(onChange).toHaveBeenCalledWith('s1');
+        await openMore();
+        const row = menuButtons().find((b) => b.textContent?.includes('Sample data'));
+        expect(row?.querySelector('kbd')?.textContent).toBe('Entry: Spring');
+        await act(async () => row.click());
+        expect(dialog()?.textContent).toContain('Sample data');
+        expect(dialog()?.querySelector('[role=combobox]')?.textContent).toContain('Spring');
+    });
+    it('closes the more menu with Escape', async () => {
+        await mount();
+        await openMore();
+        expect(document.querySelector('.bd-menu-list')).not.toBeNull();
+        await act(async () => {
+            document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        await wait(50);
+        expect(document.querySelector('.bd-menu-list')).toBeNull();
     });
 });

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

@@ -3,7 +3,8 @@ 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.
+ * the content was when that step was taken. A zone (`.bd-toolbar-cluster`) that is wider than its grid
+ * track counts as overflow too, since the tracks are equal and a full zone would otherwise overlap.
  */
 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

@@ -1 +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"}
+{"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;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAuCxF"}

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

@@ -3,7 +3,8 @@ 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.
+ * the content was when that step was taken. A zone (`.bd-toolbar-cluster`) that is wider than its grid
+ * track counts as overflow too, since the tracks are equal and a full zone would otherwise overlap.
  */
 export function useOverflowLevel(ref, max) {
     const [level, setLevel] = useState(0);
@@ -14,8 +15,13 @@ export function useOverflowLevel(ref, max) {
         if (el === null)
             return;
         const room = el.clientWidth;
-        if (el.scrollWidth > room + 1 && level < max) {
-            needed.current[level] = el.scrollWidth;
+        let zones = 0;
+        for (const zone of el.querySelectorAll('.bd-toolbar-cluster')) {
+            zones += Math.max(0, zone.scrollWidth - zone.clientWidth);
+        }
+        const width = Math.max(el.scrollWidth, room + zones);
+        if (width > room + 1 && level < max) {
+            needed.current[level] = width;
             setLevel(level + 1);
             return;
         }

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

@@ -4,7 +4,11 @@ export declare const ZOOM_LEVELS: readonly Zoom[];
 export interface ZoomMenuProps {
     readonly zoom: Zoom;
     readonly onChange: (zoom: Zoom) => void;
+    /** `status` is the flat trigger of the status bar; `toolbar` (default) is the ghost button. */
+    readonly variant?: 'toolbar' | 'status';
+    /** The percent `Fit` currently comes to; the status trigger shows it instead of the word. */
+    readonly shown?: number | undefined;
 }
 /** 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;
+export declare function ZoomMenu({ zoom, onChange, variant, shown }: ZoomMenuProps): import("react").JSX.Element;
 //# sourceMappingURL=zoom-menu.d.ts.map

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

@@ -1 +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"}
+{"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;IACxC,+FAA+F;IAC/F,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACxC,6FAA6F;IAC7F,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAID,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAmB,EAAE,KAAK,EAAE,EAAE,aAAa,+BAoDrF"}

package/dist/toolbar/zoom-menu.js

@@ -6,11 +6,12 @@ import { Button, Icon, Popover } from '../ui/index.js';
 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 }) {
+export function ZoomMenu({ zoom, onChange, variant = 'toolbar', shown }) {
     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: () => {
+    const current = variant === 'status' && zoom === 'fit' && shown !== undefined ? `${shown}%` : text(zoom);
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, contentClassName: "bd-menu-popover", label: t('toolbar.zoom'), trigger: variant === 'status' ? (_jsxs("button", { type: "button", className: "bd-status-btn bd-tabular", "aria-label": t('statusBar.zoom').replace('{value}', current), children: [_jsx("span", { "aria-hidden": "true", children: current }), _jsx(Icon, { name: "chevron-down" })] })) : (_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

@@ -70,6 +70,59 @@ declare const EDITOR_ICONS: {
     readonly 'triangle-alert': LucideIcon;
     readonly 'undo-2': LucideIcon;
     readonly x: LucideIcon;
+    readonly 'chevron-up': LucideIcon;
+    readonly 'chevrons-down-up': LucideIcon;
+    readonly 'chevrons-left': LucideIcon;
+    readonly 'circle-question-mark': LucideIcon;
+    readonly 'clipboard-paste': LucideIcon;
+    readonly 'corner-left-up': LucideIcon;
+    readonly crosshair: LucideIcon;
+    readonly 'ellipsis-vertical': LucideIcon;
+    readonly 'eye-off': LucideIcon;
+    readonly 'grip-vertical': LucideIcon;
+    readonly 'list-filter': LucideIcon;
+    readonly 'list-tree': LucideIcon;
+    readonly 'lock-open': LucideIcon;
+    readonly minus: LucideIcon;
+    readonly 'mouse-pointer-2': LucideIcon;
+    readonly palette: LucideIcon;
+    readonly 'pencil-line': LucideIcon;
+    readonly plus: LucideIcon;
+    readonly save: LucideIcon;
+    readonly send: LucideIcon;
+    readonly 'sliders-vertical': LucideIcon;
+    readonly 'square-check-big': LucideIcon;
+    readonly upload: LucideIcon;
+    readonly globe: LucideIcon;
+    readonly play: LucideIcon;
+    readonly table: LucideIcon;
+    readonly 'panel-top': LucideIcon;
+    readonly heading: LucideIcon;
+    readonly pilcrow: LucideIcon;
+    readonly 'rows-2': LucideIcon;
+    readonly 'columns-3': LucideIcon;
+    readonly 'square-dashed': LucideIcon;
+    readonly file: LucideIcon;
+    readonly 'chevrons-up-down': LucideIcon;
+    readonly 'file-text': LucideIcon;
+    readonly layers: LucideIcon;
+    readonly 'circle-help': LucideIcon;
+    readonly 'arrow-up-left': LucideIcon;
+    readonly 'circle-plus': LucideIcon;
+    readonly unlink: LucideIcon;
+    readonly bold: LucideIcon;
+    readonly video: LucideIcon;
+    readonly clock: LucideIcon;
+    readonly sparkles: LucideIcon;
+    readonly droplet: LucideIcon;
+    readonly 'rotate-cw': LucideIcon;
+    readonly scale: LucideIcon;
+    readonly 'align-start-horizontal': LucideIcon;
+    readonly 'align-center-horizontal': LucideIcon;
+    readonly 'align-end-horizontal': LucideIcon;
+    readonly 'external-link': LucideIcon;
+    readonly move: LucideIcon;
+    readonly blend: LucideIcon;
 };
 export type IconName = keyof typeof EDITOR_ICONS;
 /** The names `ComponentIcon` resolves (everything else shows the neutral `box`). */

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

@@ -1 +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"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAwFL,KAAK,UAAU,EA+EhB,MAAM,cAAc,CAAC;AAStB,8CAA8C;AAC9C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2H6B,CAAC;AAEhD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AA4FjD,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"}

package/dist/ui/icon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AlignCenterVertical, AlignEndVertical, AlignHorizontalJustifyCenter, AlignHorizontalJustifyEnd, AlignHorizontalJustifyStart, AlignHorizontalSpaceAround, AlignHorizontalSpaceBetween, AlignStartVertical, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Ban, Box, Braces, Calendar, CaseLower, CaseSensitive, CaseUpper, ChartColumn, Check, ChevronDown, ChevronRight, ChevronsUpDown, Circle, CircleAlert, CircleCheck, ClipboardList, Clock, Code, Columns2, Columns3, Copy, CreditCard, Database, Dot, Ellipsis, Eye, File, FileText, Folder, GalleryHorizontal, Globe, Grid3x3, Hash, Heading, Heart, History, Image, Images, Info, Italic, Keyboard, Layers, LayoutGrid, LayoutTemplate, Link, Link2, List, ListChecks, ListOrdered, LoaderCircle, Lock, Mail, MapPin, Megaphone, Menu, MessageSquare, Monitor, MonitorSmartphone, Moon, MousePointerClick, Music, Navigation, PanelBottom, PanelLeft, PanelRight, PanelTop, Phone, Pilcrow, Play, Quote, Radio, RectangleHorizontal, RectangleVertical, Redo2, Repeat, RotateCcw, Rows2, Rows3, Search, SeparatorHorizontal, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, Smartphone, Sparkles, Square, SquareCheck, SquareChevronDown, SquareDashed, SquarePen, Star, StretchVertical, Strikethrough, Sun, Table, Tablet, Tag, TextAlignCenter, TextAlignEnd, TextAlignJustify, TextAlignStart, TextCursorInput, ToggleLeft, Trash2, TriangleAlert, Type, Underline, Undo2, Unlink2, User, Users, Video, X, } from 'lucide-react';
+import { AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignHorizontalJustifyCenter, AlignHorizontalJustifyEnd, AlignHorizontalJustifyStart, AlignHorizontalSpaceAround, AlignHorizontalSpaceBetween, AlignStartHorizontal, AlignStartVertical, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, Award, Ban, Blend, Bold, Box, Braces, Calendar, CaseLower, CaseSensitive, CaseUpper, ChartColumn, Check, ChevronDown, ChevronRight, ChevronsDownUp, ChevronsLeft, ChevronsUpDown, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePlus, CircleQuestionMark, ClipboardList, ClipboardPaste, Clock, Code, Columns2, Columns3, Copy, CornerLeftUp, CreditCard, Crosshair, Database, Dot, Droplet, Ellipsis, EllipsisVertical, ExternalLink, Eye, EyeOff, File, FileText, Folder, GalleryHorizontal, Globe, Grid3x3, GripVertical, Hash, Heading, Heart, History, Image, Images, Info, Italic, Keyboard, Layers, LayoutGrid, LayoutTemplate, Link, Link2, List, ListChecks, ListFilter, ListOrdered, ListTree, LoaderCircle, Lock, LockOpen, Mail, MapPin, Megaphone, Menu, MessageSquare, Minus, Monitor, MonitorSmartphone, Moon, MousePointer2, MousePointerClick, Move, Music, Navigation, Palette, PanelBottom, PanelLeft, PanelRight, PanelTop, PencilLine, Phone, Pilcrow, Play, Plus, Quote, Radio, RectangleHorizontal, RectangleVertical, Redo2, Repeat, RotateCcw, RotateCw, Rows2, Rows3, Save, Scale, Search, Send, SeparatorHorizontal, ShieldCheck, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, SlidersVertical, Smartphone, Sparkles, Square, SquareCheck, SquareCheckBig, SquareChevronDown, SquareDashed, SquarePen, Star, StretchVertical, Strikethrough, Sun, Table, Tablet, Tag, TextAlignCenter, TextAlignEnd, TextAlignJustify, TextAlignStart, TextCursorInput, ToggleLeft, Trash2, TriangleAlert, Type, Underline, Undo2, Unlink, Unlink2, Upload, User, Users, Video, X, } from 'lucide-react';
 /*
  * The icon vocabulary of the editor. Both maps are static and curated on purpose: each icon is
  * imported by name so the bundler keeps only these (no `DynamicIcon`, no whole-set import).
@@ -77,9 +77,65 @@ const EDITOR_ICONS = {
     'triangle-alert': TriangleAlert,
     'undo-2': Undo2,
     x: X,
+    'chevron-up': ChevronUp,
+    'chevrons-down-up': ChevronsDownUp,
+    'chevrons-left': ChevronsLeft,
+    'circle-question-mark': CircleQuestionMark,
+    'clipboard-paste': ClipboardPaste,
+    'corner-left-up': CornerLeftUp,
+    crosshair: Crosshair,
+    'ellipsis-vertical': EllipsisVertical,
+    'eye-off': EyeOff,
+    'grip-vertical': GripVertical,
+    'list-filter': ListFilter,
+    'list-tree': ListTree,
+    'lock-open': LockOpen,
+    minus: Minus,
+    'mouse-pointer-2': MousePointer2,
+    palette: Palette,
+    'pencil-line': PencilLine,
+    plus: Plus,
+    save: Save,
+    send: Send,
+    'sliders-vertical': SlidersVertical,
+    'square-check-big': SquareCheckBig,
+    upload: Upload,
+    globe: Globe,
+    play: Play,
+    table: Table,
+    'panel-top': PanelTop,
+    heading: Heading,
+    pilcrow: Pilcrow,
+    'rows-2': Rows2,
+    'columns-3': Columns3,
+    'square-dashed': SquareDashed,
+    file: File,
+    'chevrons-up-down': ChevronsUpDown,
+    'file-text': FileText,
+    layers: Layers,
+    'circle-help': CircleHelp,
+    'arrow-up-left': ArrowUpLeft,
+    'circle-plus': CirclePlus,
+    unlink: Unlink,
+    bold: Bold,
+    video: Video,
+    clock: Clock,
+    sparkles: Sparkles,
+    droplet: Droplet,
+    'rotate-cw': RotateCw,
+    scale: Scale,
+    'align-start-horizontal': AlignStartHorizontal,
+    'align-center-horizontal': AlignCenterHorizontal,
+    'align-end-horizontal': AlignEndHorizontal,
+    'external-link': ExternalLink,
+    move: Move,
+    blend: Blend,
 };
 /** Icons a component's `meta.icon` may name: the built-in catalogue plus a common vocabulary. */
 const COMPONENT_ICONS = {
+    space: ChevronsUpDown,
+    hash: Hash,
+    group: SquareDashed,
     // built-in components
     file: File,
     'rectangle-horizontal': RectangleHorizontal,
@@ -139,6 +195,7 @@ const COMPONENT_ICONS = {
     heart: Heart,
     award: Award,
     // form
+    'shield-check': ShieldCheck,
     'square-pen': SquarePen,
     circle: Circle,
     radio: Radio,