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

package/dist/toolbar/publish.test.js

@@ -4,6 +4,7 @@ import { createRegistryMeta, createSeededIdGenerator, p, s, } from '@next-buildr
 import { act } from 'react';
 import { createRoot } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { StageSlotsContext } from '../app/stage-slots.js';
 import { MessagesProvider } from '../messages/index.js';
 import { collectIssues, countIssues, filterIssues, IssuesPanel, publishGate, } from '../panels/issues/index.js';
 import { createPersistence, PersistenceProvider, } from '../persistence/index.js';
@@ -142,32 +143,75 @@ describe('the Issues panel and the publish dialog', () => {
         await act(async () => target.click());
         expect(store.getState().selectedIds).toEqual(['widget0001']);
     });
-    it('groups issues by severity, with severity and component icons', async () => {
+    it('lists issues worst first as rows with the severity icon, the message and the path', async () => {
         const { store, view } = setup(broken(), 'warn');
         await view(false);
         await act(async () => void store.validateNow());
-        const sections = [...container.querySelectorAll('.bd-issues-severity')];
-        expect(sections.length).toBeGreaterThan(0);
-        const order = sections.map((section) => section.getAttribute('data-severity'));
-        expect(order).toEqual(['error', 'warning', 'info'].filter((sev) => order.includes(sev)));
-        for (const section of sections) {
-            expect(section.querySelector('.bd-issues-heading svg')).not.toBeNull();
-            expect(section.querySelector('.bd-issue-severity[role=img]')).not.toBeNull();
-            expect(section.querySelector('.bd-issue-owner')?.textContent).not.toBe('');
+        const rows = [...container.querySelectorAll('.bd-issues-list .bd-issue')];
+        expect(rows.length).toBeGreaterThan(0);
+        const order = rows.map((row) => row.getAttribute('data-severity'));
+        expect(order).toEqual([...order].sort((x, y) => ['error', 'warning', 'info'].indexOf(x ?? '') -
+            ['error', 'warning', 'info'].indexOf(y ?? '')));
+        for (const row of rows) {
+            expect(row.querySelector('.bd-issue-severity[role=img]')).not.toBeNull();
+            expect(row.querySelector('.bd-issue-message')?.textContent).not.toBe('');
+            expect(row.querySelector('.bd-issue-path')?.textContent).not.toBe('');
         }
+        expect(container.querySelector('.bd-issues-count')?.textContent).toBe(String(rows.length));
+        expect(container.querySelector('.bd-issues-head h2')?.textContent).toBe('Issues on the page');
     });
-    it('shows the publish counts as icon badges with a spoken text', async () => {
+    it('renders the help text of an issue under its message', async () => {
+        const { store, view } = setup(broken(), 'warn');
+        await view(false);
+        await act(async () => {
+            const snapshot = store.validateNow();
+            store.setState({
+                validation: {
+                    ...snapshot,
+                    a11y: [
+                        {
+                            ruleId: 'r',
+                            severity: 'warning',
+                            nodeId: 'widget0001',
+                            message: 'Missing label',
+                            help: 'Give it a label.',
+                        },
+                    ],
+                },
+            });
+        });
+        const helps = [...container.querySelectorAll('.bd-issues-list .bd-issue-help')];
+        expect(helps.map((help) => help.textContent)).toEqual(['Give it a label.']);
+    });
+    it('shows an all-good row when nothing was found', async () => {
+        const { store, view } = setup(clean(), 'warn');
+        await view(false);
+        await act(async () => void store.validateNow());
+        expect(container.querySelector('.bd-issue-ok')?.textContent).toContain('All good');
+        expect(container.querySelector('.bd-issues-count')?.textContent).toBe('0');
+    });
+    it('closes the drawer through the stage slots, and has no close button without them', async () => {
+        const { store, view } = setup(clean(), 'warn');
+        await view(false);
+        expect(container.querySelector('.bd-issues-head button')).toBeNull();
+        const setIssuesOpen = vi.fn();
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: _jsx(StageSlotsContext.Provider, { value: { stage: null, issuesOpen: true, setIssuesOpen }, children: _jsx(IssuesPanel, {}) }) }) })));
+        const close = container.querySelector('.bd-issues-head button[aria-label="Close issues panel"]');
+        expect(close).not.toBeNull();
+        await act(async () => close?.click());
+        expect(setIssuesOpen).toHaveBeenCalledWith(false);
+    });
+    it('shows the publish rows and the counts sentence, with scheduling disabled and the primary action focused', async () => {
         const { view } = setup(broken(), 'warn');
         await view(true);
-        const badges = [...document.querySelectorAll('.bd-publish-badge')];
-        expect(badges.map((badge) => badge.getAttribute('data-severity'))).toEqual([
-            'error',
-            'warning',
-            'info',
-        ]);
-        for (const badge of badges)
-            expect(badge.querySelector('svg')).not.toBeNull();
-        expect(badges[0]?.textContent).toMatch(/[0-9] errors/);
+        const dialog = document.querySelector('[role=dialog]');
+        expect(dialog?.querySelector('.bd-dialog-icon')).not.toBeNull();
+        expect(dialog?.querySelectorAll('.bd-publish-row').length).toBeGreaterThan(0);
+        expect(dialog?.querySelector('.bd-publish-counts')?.textContent).toMatch(/[0-9]+ (error|warning|note)/);
+        const options = [...(dialog?.querySelectorAll('.bd-publish-option') ?? [])];
+        expect(options.map((o) => o.getAttribute('aria-pressed'))).toEqual(['true', 'false']);
+        expect(options[1]?.getAttribute('aria-disabled')).toBe('true');
+        expect(document.activeElement?.textContent).toBe('Publish');
     });
     it('refuses to publish while errors exist under the block policy', async () => {
         const { publish, view } = setup(broken(), 'block');

package/dist/toolbar/safe-history.d.ts

@@ -0,0 +1,3 @@
+/** The version history link of the host: a callback as it is, a URL only when it is a safe one. */
+export declare function safeHistory<T extends string | (() => void) | undefined>(history: T): T | undefined;
+//# sourceMappingURL=safe-history.d.ts.map

package/dist/toolbar/safe-history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-history.d.ts","sourceRoot":"","sources":["../../src/toolbar/safe-history.ts"],"names":[],"mappings":"AAEA,mGAAmG;AACnG,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,EACrE,OAAO,EAAE,CAAC,GACT,CAAC,GAAG,SAAS,CAEf"}

package/dist/toolbar/safe-history.js

@@ -0,0 +1,5 @@
+import { isSafePreviewUrl } from '../preview/index.js';
+/** The version history link of the host: a callback as it is, a URL only when it is a safe one. */
+export function safeHistory(history) {
+    return typeof history === 'string' && !isSafePreviewUrl(history) ? undefined : history;
+}

package/dist/toolbar/sample-picker.d.ts

@@ -9,10 +9,30 @@ export interface SamplePickerProps {
     /** Where the choice is remembered; `localStorage` unless a test or host gives another. */
     readonly storage?: Pick<Storage, 'getItem' | 'setItem'> | undefined;
 }
+export interface SamplesState {
+    readonly samples: readonly {
+        id: string;
+        label: string;
+    }[];
+    /** The chosen sample id, or DEFAULT_SAMPLE. */
+    readonly value: string;
+    /** The chosen entry's label; undefined while the default entry is in use. */
+    readonly label: string | undefined;
+    select(next: string): void;
+}
+/**
+ * The samples the adapter lists for a document and the remembered choice (docs/editor.md#sample-data):
+ * the choice is sent to the canvas as its context and remembered per document. Does nothing without
+ * props; samples stays empty when the adapter lists none (a page, not a template).
+ */
+export declare function useSamples(props: SamplePickerProps | undefined): SamplesState;
+/** The select that chooses the sample entry, for a useSamples state; nothing when there are none. */
+export declare function SampleSelect({ state }: {
+    readonly state: SamplesState;
+}): import("react").JSX.Element | null;
 /**
- * Chooses which entry a template is shown with (docs/editor.md#sample-data): the samples the adapter
- * lists, the choice sent to the canvas as its context and remembered per document. Renders nothing
- * when the adapter lists no samples (a page, not a template).
+ * Chooses which entry a template is shown with (docs/editor.md#sample-data). Renders nothing when the
+ * adapter lists no samples.
  */
-export declare function SamplePicker({ adapter, docRef, onChange, storage }: SamplePickerProps): import("react").JSX.Element | null;
+export declare function SamplePicker(props: SamplePickerProps): import("react").JSX.Element;
 //# sourceMappingURL=sample-picker.d.ts.map

package/dist/toolbar/sample-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sample-picker.d.ts","sourceRoot":"","sources":["../../src/toolbar/sample-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5E,4EAA4E;AAC5E,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACvD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,gFAAgF;IAChF,QAAQ,CAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,0FAA0F;IAC1F,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CACrE;AAmBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,iBAAiB,sCAiDrF"}
+{"version":3,"file":"sample-picker.d.ts","sourceRoot":"","sources":["../../src/toolbar/sample-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5E,4EAA4E;AAC5E,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACvD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,gFAAgF;IAChF,QAAQ,CAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,0FAA0F;IAC1F,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CACrE;AAmBD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,OAAO,EAAE,SAAS;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3D,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,GAAG,YAAY,CAgD7E;AAED,qGAAqG;AACrG,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAA;CAAE,sCAcvE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAEpD"}

package/dist/toolbar/sample-picker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useT } from '../messages/index.js';
 import { Select } from '../ui/index.js';
 /** The choice that leaves the canvas on the adapter's own default entry. */
@@ -22,19 +22,23 @@ const write = (storage, key, value) => {
     }
 };
 /**
- * Chooses which entry a template is shown with (docs/editor.md#sample-data): the samples the adapter
- * lists, the choice sent to the canvas as its context and remembered per document. Renders nothing
- * when the adapter lists no samples (a page, not a template).
+ * The samples the adapter lists for a document and the remembered choice (docs/editor.md#sample-data):
+ * the choice is sent to the canvas as its context and remembered per document. Does nothing without
+ * props; samples stays empty when the adapter lists none (a page, not a template).
  */
-export function SamplePicker({ adapter, docRef, onChange, storage }) {
-    const t = useT();
+export function useSamples(props) {
     const [samples, setSamples] = useState([]);
     const [value, setValue] = useState(DEFAULT_SAMPLE);
-    const collection = docRef.collection;
-    const id = docRef.id;
-    // `onChange` is deliberately not a dependency: the host passes a fresh closure every render.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: see above
+    const adapter = props?.adapter;
+    const storage = props?.storage;
+    const collection = props?.docRef.collection;
+    const id = props?.docRef.id;
+    // The latest callback, so a fresh closure every render does not restart the effect.
+    const onChange = useRef(props?.onChange);
+    onChange.current = props?.onChange;
     useEffect(() => {
+        if (adapter === undefined || collection === undefined || id === undefined)
+            return;
         let cancelled = false;
         const ref = { collection, id };
         void (async () => {
@@ -52,21 +56,41 @@ export function SamplePicker({ adapter, docRef, onChange, storage }) {
             // A remembered entry that no longer exists is forgotten, not sent to the canvas.
             if (saved !== null && list.some((sample) => sample.id === saved)) {
                 setValue(saved);
-                onChange(saved);
+                onChange.current?.(saved);
             }
         })();
         return () => {
             cancelled = true;
         };
     }, [adapter, collection, id, storage]);
-    if (samples.length === 0)
+    const select = (next) => {
+        if (collection === undefined || id === undefined)
+            return;
+        setValue(next);
+        write(storage, keyOf({ collection, id }), next);
+        onChange.current?.(next === DEFAULT_SAMPLE ? null : next);
+    };
+    return {
+        samples,
+        value,
+        label: samples.find((sample) => sample.id === value)?.label,
+        select,
+    };
+}
+/** The select that chooses the sample entry, for a useSamples state; nothing when there are none. */
+export function SampleSelect({ state }) {
+    const t = useT();
+    if (state.samples.length === 0)
         return null;
-    return (_jsx(Select, { label: t('sample.label'), value: value, onValueChange: (next) => {
-            setValue(next);
-            write(storage, keyOf({ collection, id }), next);
-            onChange(next === DEFAULT_SAMPLE ? null : next);
-        }, options: [
+    return (_jsx(Select, { label: t('sample.label'), value: state.value, onValueChange: state.select, options: [
             { value: DEFAULT_SAMPLE, label: t('sample.default') },
-            ...samples.map((sample) => ({ value: sample.id, label: sample.label })),
+            ...state.samples.map((sample) => ({ value: sample.id, label: sample.label })),
         ] }));
 }
+/**
+ * Chooses which entry a template is shown with (docs/editor.md#sample-data). Renders nothing when the
+ * adapter lists no samples.
+ */
+export function SamplePicker(props) {
+    return _jsx(SampleSelect, { state: useSamples(props) });
+}

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

@@ -1,13 +1,5 @@
-import type { BreakpointConfig } from '../app/config.ts';
-import { type Zoom } from './zoom-menu.tsx';
-export interface ToolbarCentreProps {
-    readonly breakpoints: readonly BreakpointConfig[];
-    readonly breakpoint: string;
-    readonly onBreakpointChange: (id: string) => void;
-    /** The canvas zoom and how to change it (`host.setZoom`); the zoom menu is left out without a handler. */
-    readonly zoom?: Zoom | undefined;
-    readonly onZoomChange?: ((zoom: Zoom) => void) | undefined;
-}
-/** The screen-size control and the zoom menu. */
+import { type PageChipProps } from './page-chip.tsx';
+export type ToolbarCentreProps = PageChipProps;
+/** The page chip, which opens the page options. */
 export declare function ToolbarCentre(props: ToolbarCentreProps): import("react").JSX.Element;
 //# sourceMappingURL=toolbar-centre.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar-centre.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar-centre.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,KAAK,IAAI,EAAY,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,kBAAkB;IACjC,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,0GAA0G;IAC1G,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5D;AAED,iDAAiD;AACjD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAatD"}
+{"version":3,"file":"toolbar-centre.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar-centre.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,mDAAmD;AACnD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAMtD"}

package/dist/toolbar/toolbar-centre.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BreakpointControl } from './breakpoint-control.js';
-import { ZoomMenu } from './zoom-menu.js';
-/** The screen-size control and the zoom menu. */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageChip } from './page-chip.js';
+/** The page chip, which opens the page options. */
 export function ToolbarCentre(props) {
-    return (_jsxs("div", { className: "bd-toolbar-zone", "data-zone": "centre", children: [_jsx(BreakpointControl, { breakpoints: props.breakpoints, breakpoint: props.breakpoint, onChange: props.onBreakpointChange }), props.onZoomChange !== undefined && (_jsx(ZoomMenu, { zoom: props.zoom ?? 'fit', onChange: props.onZoomChange }))] }));
+    return (_jsx("div", { className: "bd-toolbar-cluster", "data-zone": "centre", children: _jsx(PageChip, { ...props }) }));
 }

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

@@ -1,12 +1,9 @@
 export interface ToolbarLeftProps {
-    readonly title: string;
-    /** Saves a new page name; without it (the backend cannot rename) the title is plain text. */
-    readonly onRename?: ((title: string) => Promise<void>) | undefined;
-    /** Draft or published; the pill is left out without it. */
-    readonly status?: 'draft' | 'published' | undefined;
     /** The page in the CMS's admin; the link is left out without it, or when it moved to the more menu. */
     readonly cmsUrl?: string | undefined;
+    /** A phone-wide row: only the panel toggle, undo and redo stay (the mark and the back link are left out). */
+    readonly compact?: boolean;
 }
-/** The product mark, back to the CMS as an icon button, the page name and its draft or published pill. */
-export declare function ToolbarLeft({ title, onRename, status, cmsUrl }: ToolbarLeftProps): import("react").JSX.Element;
+/** Back to the CMS, the product mark, a divider, the left panel toggle, undo and redo. */
+export declare function ToolbarLeft({ cmsUrl, compact }: ToolbarLeftProps): import("react").JSX.Element;
 //# sourceMappingURL=toolbar-left.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"toolbar-left.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar-left.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,uGAAuG;IACvG,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,6GAA6G;IAC7G,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,0FAA0F;AAC1F,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAe,EAAE,EAAE,gBAAgB,+BA+CxE"}

package/dist/toolbar/toolbar-left.js

@@ -1,16 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, 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 { useShortcutHint } from '../shortcuts/index.js';
+import { useEditor, useEditorState } from '../store/index.js';
+import { Icon, IconButton, 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 }) {
+import { PanelToggle } from './panel-toggles.js';
+/** Back to the CMS, the product mark, a divider, the left panel toggle, undo and redo. */
+export function ToolbarLeft({ cmsUrl, compact = false }) {
     const t = useT();
+    const store = useEditor();
+    const canUndo = useEditorState((state) => state.canUndo);
+    const canRedo = useEditorState((state) => state.canRedo);
     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]) }))] }));
+    const undoHint = useShortcutHint('edit.undo');
+    const redoHint = useShortcutHint('edit.redo');
+    return (_jsxs("div", { className: "bd-toolbar-cluster", "data-zone": "left", children: [cmsUrl !== undefined && !compact && (_jsx(Tooltip, { content: t('toolbar.backToCms'), children: _jsx("a", { className: "bd-button bd-icon-button bd-toolbar-link", "data-variant": "ghost", href: cmsUrl, "aria-label": t('toolbar.backToCms'), children: _jsx(Icon, { name: "arrow-left" }) }) })), !compact && (_jsxs(_Fragment, { children: [_jsx(Brand, {}), _jsx("span", { className: "bd-toolbar-divider", "aria-hidden": "true" })] })), _jsx(PanelToggle, { side: "left" }), _jsx(IconButton, { label: t('toolbar.undo'), hint: undoHint, icon: "undo-2", variant: "ghost", disabled: !canUndo || readOnly, onClick: () => store.undo() }), _jsx(IconButton, { label: t('toolbar.redo'), hint: redoHint, icon: "redo-2", variant: "ghost", disabled: !canRedo || readOnly, onClick: () => store.redo() })] }));
 }

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

@@ -1,19 +1,34 @@
-import type { ReactNode } from 'react';
+import type { BreakpointConfig } from '../app/config.ts';
+import { type MoreMenuProps } from './more-menu.tsx';
 export interface ToolbarRightProps {
-    /** The locale and sample pickers (the shell's), placed between the save status and Preview. */
-    readonly pickers?: ReactNode;
+    readonly breakpoints: readonly BreakpointConfig[];
+    readonly breakpoint: string;
+    readonly onBreakpointChange: (id: string) => void;
     readonly status: string;
+    readonly onLocaleChange?: ((locale: string) => void) | undefined;
     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;
+    /**
+     * A phone-wide row: the screen size, the content language and Preview move into the more menu, and
+     * Publish keeps its icon (`tight`: without its text).
+     */
+    readonly compact?: boolean;
+    readonly tight?: boolean;
+    /** The version history: an icon link in the row, or an item of the more menu when the row is tight. */
+    readonly historyUrl?: string | (() => void) | undefined;
     readonly historyInMenu: boolean;
     /** The CMS link, when the row had no room for it; the more menu lists it. */
     readonly moreCmsUrl?: string | undefined;
+    readonly sample?: MoreMenuProps['sample'];
+    readonly helpUrl?: string | undefined;
+    readonly onOpenShortcuts?: (() => void) | undefined;
 }
-/** Undo and redo, the save status, the pickers, Preview (secondary), Publish (the one primary) and more. */
+/**
+ * Screen size, save status, content language, version history, Preview, the more menu, the right
+ * panel toggle and Publish (the one primary action).
+ */
 export declare function ToolbarRight(props: ToolbarRightProps): import("react").JSX.Element;
 //# sourceMappingURL=toolbar-right.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"toolbar-right.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar-right.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAMzD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAK/D,MAAM,WAAW,iBAAiB;IAChC,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,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjE,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;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,uGAAuG;IACvG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACxD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC,6EAA6E;IAC7E,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BA+FpD"}

package/dist/toolbar/toolbar-right.js

@@ -1,21 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, 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 { useEditorState } from '../store/index.js';
+import { Button, Icon, Tooltip } from '../ui/index.js';
+import { BreakpointControl } from './breakpoint-control.js';
+import { LocaleChip } from './locale-chip.js';
 import { MoreMenu } from './more-menu.js';
+import { PanelToggle } from './panel-toggles.js';
+import { safeHistory } from './safe-history.js';
 import { SaveIndicator } from './save-indicator.js';
-/** Undo and redo, the save status, the pickers, Preview (secondary), Publish (the one primary) and more. */
+/**
+ * Screen size, save status, content language, version history, Preview, the more menu, the right
+ * panel toggle and Publish (the one primary action).
+ */
 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 })] }));
+    const compact = props.compact === true;
+    const historyUrl = safeHistory(props.historyUrl);
+    const publishDisabled = props.onPublish === undefined ||
+        props.canPublish === false ||
+        readOnly ||
+        props.status === 'conflict';
+    return (_jsxs("div", { className: "bd-toolbar-cluster", "data-zone": "right", children: [!compact && (_jsxs(_Fragment, { children: [_jsx(BreakpointControl, { breakpoints: props.breakpoints, breakpoint: props.breakpoint, onChange: props.onBreakpointChange }), _jsx("span", { className: "bd-toolbar-divider", "aria-hidden": "true" })] })), _jsx(SaveIndicator, { compact: props.compactSave }), !compact && _jsx(LocaleChip, { onChange: props.onLocaleChange }), historyUrl !== undefined &&
+                !props.historyInMenu &&
+                (typeof historyUrl === 'function' ? (_jsx(Tooltip, { content: t('toolbar.versions'), children: _jsx(Button, { variant: "ghost", className: "bd-icon-button", "aria-label": t('toolbar.versions'), onClick: historyUrl, children: _jsx(Icon, { name: "history" }) }) })) : (_jsx(Tooltip, { content: t('toolbar.versions'), children: _jsx("a", { className: "bd-button bd-icon-button bd-toolbar-link", "data-variant": "ghost", href: historyUrl, "aria-label": t('toolbar.versions'), children: _jsx(Icon, { name: "history" }) }) }))), !compact && (_jsx(Tooltip, { content: t('toolbar.preview.newTab'), children: _jsx(Button, { variant: "ghost", className: "bd-icon-button", "aria-label": t('toolbar.preview.page'), onClick: props.onPreview, disabled: props.onPreview === undefined, children: _jsx(Icon, { name: "eye" }) }) })), _jsx(MoreMenu, { compact: compact
+                    ? {
+                        breakpoints: props.breakpoints,
+                        breakpoint: props.breakpoint,
+                        onBreakpointChange: props.onBreakpointChange,
+                        onPreview: props.onPreview,
+                        onLocaleChange: props.onLocaleChange,
+                    }
+                    : undefined, historyUrl: props.historyInMenu ? historyUrl : undefined, cmsUrl: props.moreCmsUrl, sample: props.sample, helpUrl: props.helpUrl, onOpenShortcuts: props.onOpenShortcuts }), _jsx(PanelToggle, { side: "right" }), _jsxs(Button, { variant: "primary", className: "bd-publish", "aria-haspopup": "dialog", "aria-label": props.tight === true ? t('toolbar.publish') : undefined, "data-icon-only": props.tight === true, onClick: props.onPublish, disabled: publishDisabled, children: [compact && _jsx(Icon, { name: "send" }), props.tight !== true && t('toolbar.publish')] })] }));
 }

package/dist/toolbar/toolbar.d.ts

@@ -1,26 +1,32 @@
-import { type ReactNode } from 'react';
 import type { BreakpointConfig } from '../app/config.ts';
-import type { Zoom } from './zoom-menu.tsx';
+import { type SamplePickerProps } from './sample-picker.tsx';
 export interface ToolbarProps {
-    /** The document's title, shown after the link back. */
+    /** The document's title, shown in the page chip and renamed in the page options. */
     readonly title: string;
-    /** Saves a new page name (`adapter.rename`); the title is not editable without it. */
+    /** Saves a new page name (`adapter.rename`); the name is read-only without it. */
     readonly onTitleChange?: ((title: string) => Promise<void>) | undefined;
-    /** Draft or published, as a pill next to the title. */
+    /** The page's address, read-only in the page options; the row is left out without it. */
+    readonly slug?: string | undefined;
+    /** Draft or published, as a small chip in the page chip. */
     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;
+    /** The version history: an address (a link) or a function (a button); the icon is left out without it. */
+    readonly historyUrl?: string | (() => void) | undefined;
+    /** The help page; the Help row of the more menu is left out without it. */
+    readonly helpUrl?: string | undefined;
+    /** Opens the shortcuts dialog from the more menu; without it the shortcut provider's own opener is used. */
+    readonly onOpenShortcuts?: (() => void) | undefined;
+    /** Tells the canvas which content language to render (`CanvasHost.setLocale`). */
+    readonly onLocaleChange?: ((locale: string) => void) | undefined;
+    /** The sample data source (templates); without it there is no sample data. */
+    readonly sample?: SamplePickerProps | undefined;
+    /** The page options dialog's state, when the shell controls it (the inspector's "Page settings" opens it too). */
+    readonly pageOptionsOpen?: boolean | undefined;
+    readonly onPageOptionsOpenChange?: ((open: boolean) => void) | undefined;
     /** Flushes the save and opens the preview (PB-091). */
     readonly onPreview?: (() => void) | undefined;
     /** Opens the publish dialog (PB-088). */
@@ -29,10 +35,10 @@ export interface ToolbarProps {
     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.
+ * The editor's primary actions (docs/editor.md#toolbar-pb-083) in a `1fr / auto / 1fr` grid. Left:
+ * back, mark, left panel toggle, undo, redo. Centre: the page chip (opens the page options). Right:
+ * screen size, save status, content language, history, Preview, more, right panel toggle, Publish.
+ * It reads the store and the persistence controller from context; 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

@@ -1 +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"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,OAAO,EAAE,KAAK,iBAAiB,EAAc,MAAM,qBAAqB,CAAC;AAMzE,MAAM,WAAW,YAAY;IAC3B,oFAAoF;IACpF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IACxE,yFAAyF;IACzF,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,4DAA4D;IAC5D,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,uFAAuF;IACvF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,0GAA0G;IAC1G,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACxD,2EAA2E;IAC3E,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,4GAA4G;IAC5G,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,kFAAkF;IAClF,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjE,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAChD,kHAAkH;IAClH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACzE,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,+BA6D1C"}

package/dist/toolbar/toolbar.js

@@ -1,27 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
+import { useShellPanels } from '../app/shell-panels.js';
 import { usePersistenceState } from '../persistence/index.js';
-import { PanelToggle } from './panel-toggles.js';
+import { useEditorState } from '../store/index.js';
+import { PageOptionsDialog } from './page-options-dialog.js';
+import { useSamples } from './sample-picker.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.
+ * What changes as the row runs out of room, in order (a step is taken only when a zone 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 page name and the product name are hidden.
  */
 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.
+ * The editor's primary actions (docs/editor.md#toolbar-pb-083) in a `1fr / auto / 1fr` grid. Left:
+ * back, mark, left panel toggle, undo, redo. Centre: the page chip (opens the page options). Right:
+ * screen size, save status, content language, history, Preview, more, right panel toggle, Publish.
+ * It reads the store and the persistence controller from context; 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" })] }));
+    const readOnly = useEditorState((state) => state.readOnly);
+    const [ownOpen, setOwnOpen] = useState(false);
+    const optionsOpen = props.pageOptionsOpen ?? ownOpen;
+    const setOptionsOpen = (open) => {
+        setOwnOpen(open);
+        props.onPageOptionsOpenChange?.(open);
+    };
+    const samples = useSamples(props.sample);
+    // A phone-wide editor (the layout says so) collapses the row by design, not by measuring.
+    const panels = useShellPanels();
+    const compact = panels?.compact === true;
+    const tight = panels?.tight === true;
+    const cmsMoved = compact || level >= COLLAPSE.cms;
+    return (_jsxs("div", { className: "bd-toolbar-row", ref: row, "data-level": level, "data-compact": compact, children: [_jsx(ToolbarLeft, { cmsUrl: cmsMoved ? undefined : props.cmsUrl, compact: compact }), _jsx(ToolbarCentre, { title: props.title, status: props.status, open: optionsOpen, onOpen: () => setOptionsOpen(true) }), _jsx(ToolbarRight, { breakpoints: props.breakpoints, breakpoint: props.breakpoint, onBreakpointChange: props.onBreakpointChange, status: status, onLocaleChange: props.onLocaleChange, onPreview: props.onPreview, onPublish: props.onPublish, canPublish: props.canPublish, compactSave: compact || level >= COLLAPSE.saveText, compact: compact, tight: tight, historyUrl: props.historyUrl, historyInMenu: compact || level >= COLLAPSE.versions, moreCmsUrl: cmsMoved ? props.cmsUrl : undefined, sample: samples.samples.length > 0
+                    ? { entry: samples.label, onOpen: () => setOptionsOpen(true) }
+                    : undefined, helpUrl: props.helpUrl, onOpenShortcuts: props.onOpenShortcuts }), _jsx(PageOptionsDialog, { open: optionsOpen, onOpenChange: setOptionsOpen, title: props.title, onRename: props.onTitleChange, slug: props.slug, readOnly: readOnly, samples: samples })] }));
 }