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

package/dist/toolbar/brand.d.ts

@@ -1,7 +1,7 @@
-/** The Buildr mark: a rounded tile holding three stacked blocks. Decorative, the name is beside it. */
+/** The Buildr mark: two overlapping blocks. Decorative, the name is beside it. */
 export declare function BrandMark({ size }: {
     readonly size?: number;
 }): import("react").JSX.Element;
-/** The product identity in the top left corner: the mark and the name. */
+/** The product identity: the mark and the name. */
 export declare function Brand(): import("react").JSX.Element;
 //# sourceMappingURL=brand.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/toolbar/brand.tsx"],"names":[],"mappings":"AAEA,uGAAuG;AACvG,wBAAgB,SAAS,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAgBlE;AAED,0EAA0E;AAC1E,wBAAgB,KAAK,gCAQpB"}
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/toolbar/brand.tsx"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,wBAAgB,SAAS,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAclE;AAED,mDAAmD;AACnD,wBAAgB,KAAK,gCAQpB"}

package/dist/toolbar/brand.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useT } from '../messages/index.js';
-/** The Buildr mark: a rounded tile holding three stacked blocks. Decorative, the name is beside it. */
-export function BrandMark({ size = 24 }) {
-    return (_jsxs("svg", { className: "bd-brand-mark", width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { className: "bd-brand-tile", width: "24", height: "24", rx: "6" }), _jsx("rect", { className: "bd-brand-block", x: "5", y: "5", width: "6", height: "6", rx: "1.5" }), _jsx("rect", { className: "bd-brand-block", x: "13", y: "5", width: "6", height: "6", rx: "1.5" }), _jsx("rect", { className: "bd-brand-block", x: "5", y: "13", width: "14", height: "6", rx: "1.5" })] }));
+/** The Buildr mark: two overlapping blocks. Decorative, the name is beside it. */
+export function BrandMark({ size = 22 }) {
+    return (_jsxs("svg", { className: "bd-brand-mark", width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { className: "bd-brand-back", x: "2", y: "11", width: "13", height: "11", rx: "3" }), _jsx("rect", { className: "bd-brand-front", x: "9", y: "2", width: "13", height: "13", rx: "3" })] }));
 }
-/** The product identity in the top left corner: the mark and the name. */
+/** The product identity: the mark and the name. */
 export function Brand() {
     const t = useT();
     return (_jsxs("span", { className: "bd-brand", children: [_jsx(BrandMark, {}), _jsx("span", { className: "bd-brand-name", children: t('toolbar.brand') })] }));

package/dist/toolbar/breakpoint-control.d.ts

@@ -1,4 +1,8 @@
 import type { BreakpointConfig } from '../app/config.ts';
+import { type MessageKey } from '../messages/index.tsx';
+import { type IconName } from '../ui/index.ts';
+export declare const BREAKPOINT_LABELS: Readonly<Record<string, MessageKey>>;
+export declare const BREAKPOINT_ICONS: Readonly<Record<string, IconName>>;
 export interface BreakpointControlProps {
     readonly breakpoints: readonly BreakpointConfig[];
     readonly breakpoint: string;

package/dist/toolbar/breakpoint-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint-control.d.ts","sourceRoot":"","sources":["../../src/toolbar/breakpoint-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAgBzD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,+EAA+E;AAC/E,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,sBAAsB,+BAwB9F"}
+{"version":3,"file":"breakpoint-control.d.ts","sourceRoot":"","sources":["../../src/toolbar/breakpoint-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAgB,KAAK,QAAQ,EAAW,MAAM,gBAAgB,CAAC;AAEtE,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAIlE,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAI/D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,+EAA+E;AAC/E,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,sBAAsB,+BAyC9F"}

package/dist/toolbar/breakpoint-control.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useT } from '../messages/index.js';
+import { useEditorState } from '../store/index.js';
 import { Button, Icon, Tooltip } from '../ui/index.js';
-const BREAKPOINT_LABELS = {
+export const BREAKPOINT_LABELS = {
     desktop: 'toolbar.breakpoint.desktop',
     tablet: 'toolbar.breakpoint.tablet',
     mobile: 'toolbar.breakpoint.mobile',
 };
-const BREAKPOINT_ICONS = {
+export const BREAKPOINT_ICONS = {
     desktop: 'monitor',
     tablet: 'tablet',
     mobile: 'smartphone',
@@ -14,10 +15,16 @@ const BREAKPOINT_ICONS = {
 /** A segmented control: one icon per screen size, the width in the tooltip. */
 export function BreakpointControl({ breakpoints, breakpoint, onChange }) {
     const t = useT();
+    const styles = useEditorState((state) => state.anchorId === null ? undefined : state.doc.nodes[state.anchorId]?.styles);
     return (_jsx("fieldset", { className: "bd-breakpoints bd-segmented", "aria-label": t('toolbar.breakpoints'), children: breakpoints.map((item) => {
             const key = BREAKPOINT_LABELS[item.id];
             const label = key === undefined ? item.id : t(key);
             const icon = BREAKPOINT_ICONS[item.id];
-            return (_jsx(Tooltip, { content: `${label} · ${item.width}px`, children: _jsx(Button, { variant: "ghost", className: "bd-segment", "aria-pressed": item.id === breakpoint, "aria-label": label, onClick: () => onChange(item.id), children: icon === undefined ? label : _jsx(Icon, { name: icon }) }) }, item.id));
+            const override = styles?.bp?.[item.id];
+            const hasOverride = override !== undefined &&
+                Object.values(override).some((group) => group !== undefined && Object.keys(group).length > 0);
+            return (_jsx(Tooltip, { content: t('toolbar.device.size')
+                    .replace('{name}', label)
+                    .replace('{width}', String(item.width)), children: _jsxs(Button, { variant: "ghost", className: "bd-segment", "aria-pressed": item.id === breakpoint, "aria-label": label, "aria-description": hasOverride ? t('toolbar.device.override') : undefined, "data-override": hasOverride, onClick: () => onChange(item.id), children: [icon === undefined ? label : _jsx(Icon, { name: icon }), hasOverride && _jsx("span", { className: "bd-device-override", "aria-hidden": "true" })] }) }, item.id));
         }) }));
 }

package/dist/toolbar/editable-title.d.ts

@@ -3,6 +3,9 @@ export interface EditableTitleProps {
     /** Saves a new name; it rejects when the backend refused, and the name then goes back. */
     readonly onRename: (title: string) => Promise<void>;
     readonly disabled?: boolean;
+    /** `field` looks like a text field (the page options dialog); `title` (default) like a heading. */
+    readonly variant?: 'title' | 'field';
+    readonly id?: string;
 }
 /** Longest name the backends take (`createDocumentRequestSchema` in the Payload contract). */
 export declare const MAX_TITLE_LENGTH = 200;
@@ -10,5 +13,5 @@ export declare const MAX_TITLE_LENGTH = 200;
  * The page name as a field that looks like a heading: Enter or leaving it saves, Escape puts the
  * old name back, an empty name is not saved. The field grows with the name.
  */
-export declare function EditableTitle({ title, onRename, disabled }: EditableTitleProps): import("react").JSX.Element;
+export declare function EditableTitle({ title, onRename, disabled, variant, id, }: EditableTitleProps): import("react").JSX.Element;
 //# sourceMappingURL=editable-title.d.ts.map

package/dist/toolbar/editable-title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable-title.d.ts","sourceRoot":"","sources":["../../src/toolbar/editable-title.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,8FAA8F;AAC9F,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAoD9E"}
+{"version":3,"file":"editable-title.d.ts","sourceRoot":"","sources":["../../src/toolbar/editable-title.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,mGAAmG;IACnG,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,8FAA8F;AAC9F,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAiB,EACjB,EAAE,GACH,EAAE,kBAAkB,+BAqDpB"}

package/dist/toolbar/editable-title.js

@@ -7,7 +7,7 @@ export const MAX_TITLE_LENGTH = 200;
  * The page name as a field that looks like a heading: Enter or leaving it saves, Escape puts the
  * old name back, an empty name is not saved. The field grows with the name.
  */
-export function EditableTitle({ title, onRename, disabled }) {
+export function EditableTitle({ title, onRename, disabled, variant = 'title', id, }) {
     const t = useT();
     const [draft, setDraft] = useState(title);
     const editing = useRef(false);
@@ -31,7 +31,7 @@ export function EditableTitle({ title, onRename, disabled }) {
         setDraft(next);
         onRename(next).catch(() => setDraft(title));
     };
-    return (_jsx("input", { className: "bd-toolbar-title bd-title-input", value: draft, title: draft, size: Math.min(Math.max(draft.length, 8), 40), maxLength: MAX_TITLE_LENGTH, disabled: disabled === true, "aria-label": t('toolbar.title.rename'), autoComplete: "off", spellCheck: false, onFocus: (event) => {
+    return (_jsx("input", { id: id, className: variant === 'field' ? 'bd-input' : 'bd-toolbar-title bd-title-input', value: draft, title: draft, size: variant === 'field' ? undefined : Math.min(Math.max(draft.length, 8), 40), maxLength: MAX_TITLE_LENGTH, disabled: disabled === true, "aria-label": t('toolbar.title.rename'), autoComplete: "off", spellCheck: false, onFocus: (event) => {
             editing.current = true;
             event.currentTarget.select();
         }, onChange: (event) => setDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {

package/dist/toolbar/editable-title.test.js

@@ -50,4 +50,14 @@ describe('EditableTitle', () => {
         await key(input, 'Enter');
         expect(input.value).toBe('Home');
     });
+    it('renders as a plain text field in the page options', async () => {
+        const container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        await act(async () => root?.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditableTitle, { title: "Home", onRename: async () => undefined, variant: "field", id: "n" }) })));
+        const input = container.querySelector('input');
+        expect(input.id).toBe('n');
+        expect(input.className).toBe('bd-input');
+        expect(input.hasAttribute('size')).toBe(false);
+    });
 });

package/dist/toolbar/locale-chip.d.ts

@@ -0,0 +1,10 @@
+export interface LocaleChipProps {
+    /** Tells the canvas which language to render (`CanvasHost.setLocale`). */
+    readonly onChange?: ((locale: string) => void) | undefined;
+}
+/**
+ * The content language as a globe and the language code; it opens a menu of the languages
+ * (docs/editor.md#content-language). Renders nothing when there is only one language.
+ */
+export declare function LocaleChip({ onChange }: LocaleChipProps): import("react").JSX.Element | null;
+//# sourceMappingURL=locale-chip.d.ts.map

package/dist/toolbar/locale-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-chip.d.ts","sourceRoot":"","sources":["../../src/toolbar/locale-chip.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5D;AAkBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,sCA2CvD"}

package/dist/toolbar/locale-chip.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useT } from '../messages/index.js';
+import { useLocaleState } from '../store/index.js';
+import { Button, Icon, Popover, Tooltip } from '../ui/index.js';
+function LocaleButton({ label, tip, code, ...rest }) {
+    return (_jsx(Tooltip, { content: tip, children: _jsxs(Button, { ...rest, className: "bd-locale-chip", variant: "ghost", "aria-label": label, children: [_jsx(Icon, { name: "globe" }), _jsx("span", { className: "bd-locale-code", children: code })] }) }));
+}
+/**
+ * The content language as a globe and the language code; it opens a menu of the languages
+ * (docs/editor.md#content-language). Renders nothing when there is only one language.
+ */
+export function LocaleChip({ onChange }) {
+    const t = useT();
+    const [open, setOpen] = useState(false);
+    const config = useLocaleState((state) => state.config);
+    const locale = useLocaleState((state) => state.locale);
+    const setLocale = useLocaleState((state) => state.setLocale);
+    if (config.locales.length < 2)
+        return null;
+    const name = (code) => config.intl[code] ?? code;
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, align: "end", contentClassName: "bd-menu-popover", label: t('locale.label'), trigger: _jsx(LocaleButton, { label: t('toolbar.contentLanguage').replace('{language}', name(locale)), tip: t('locale.label'), code: locale.toUpperCase() }), children: _jsx("div", { className: "bd-menu-list", children: config.locales.map((code) => (_jsxs("button", { type: "button", className: "bd-menu-item", "aria-pressed": code === locale, onClick: () => {
+                    setOpen(false);
+                    setLocale(code);
+                    onChange?.(code);
+                }, children: [_jsx("span", { className: "bd-menu-item-label", children: name(code) }), _jsx("span", { className: "bd-locale-code", children: code.toUpperCase() })] }, code))) }) }));
+}

package/dist/toolbar/locale-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locale-switcher.d.ts","sourceRoot":"","sources":["../../src/toolbar/locale-switcher.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,sCAiB/D"}
+{"version":3,"file":"locale-switcher.d.ts","sourceRoot":"","sources":["../../src/toolbar/locale-switcher.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,sCAoB/D"}

package/dist/toolbar/locale-switcher.js

@@ -16,5 +16,8 @@ export function LocaleSwitcher({ onChange }) {
     return (_jsx(Select, { label: t('locale.label'), value: locale, onValueChange: (next) => {
             setLocale(next);
             onChange?.(next);
-        }, options: config.locales.map((code) => ({ value: code, label: config.intl[code] ?? code })) }));
+        }, options: config.locales.map((code) => ({
+            value: code,
+            label: config.intl[code] ?? code,
+        })) }));
 }

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

@@ -1,12 +1,34 @@
+import type { BreakpointConfig } from '../app/config.ts';
+/** What a phone-wide row moves into the menu: the screen size, Preview, the content language. */
+export interface CompactMenu {
+    readonly breakpoints: readonly BreakpointConfig[];
+    readonly breakpoint: string;
+    readonly onBreakpointChange: (id: string) => void;
+    readonly onPreview?: (() => void) | undefined;
+    readonly onLocaleChange?: ((locale: string) => void) | undefined;
+}
 export interface MoreMenuProps {
+    /** Set in a phone-wide row: the actions the row has no room for. */
+    readonly compact?: CompactMenu | undefined;
     /** The version history in the CMS; listed here only when it no longer fits the row. */
-    readonly historyUrl?: string | undefined;
+    readonly historyUrl?: string | (() => void) | undefined;
     /** The page in the CMS; listed here only when it no longer fits the row. */
     readonly cmsUrl?: string | undefined;
+    /** The sample data row (templates with samples only): the chosen entry's name and how to change it. */
+    readonly sample?: {
+        readonly entry: string | undefined;
+        readonly onOpen: () => void;
+    } | undefined;
+    /** The help page; the Help row is left out without it. */
+    readonly helpUrl?: string | undefined;
+    /** Opens the shortcuts dialog directly; without it the provider's own opener, else the key is replayed. */
+    readonly onOpenShortcuts?: (() => void) | undefined;
 }
 /**
- * The `more` menu: the theme switch (hidden when the host fixes the theme), the shortcuts help, and
- * the links the row had no room for. Renders nothing when it would be empty.
+ * The more options menu: the editor theme (hidden when the host fixes it), the block outlines
+ * switch (the view state, also in the status bar), sample data, the shortcuts dialog with its key,
+ * help (the help page, or the shortcuts when the host has none) and the links the row had no room
+ * for.
  */
-export declare function MoreMenu({ historyUrl, cmsUrl }: MoreMenuProps): import("react").JSX.Element | null;
+export declare function MoreMenu({ compact, historyUrl: rawHistoryUrl, cmsUrl, sample, helpUrl, onOpenShortcuts, }: MoreMenuProps): import("react").JSX.Element;
 //# sourceMappingURL=more-menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"more-menu.d.ts","sourceRoot":"","sources":["../../src/toolbar/more-menu.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC5B,uFAAuF;IACvF,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAyBD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,aAAa,sCAkE7D"}
+{"version":3,"file":"more-menu.d.ts","sourceRoot":"","sources":["../../src/toolbar/more-menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAgBzD,iGAAiG;AACjG,MAAM,WAAW,WAAW;IAC1B,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,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAClE;AAED,MAAM,WAAW,aAAa;IAC5B,oEAAoE;IACpE,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAC3C,uFAAuF;IACvF,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACxD,4EAA4E;IAC5E,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,uGAAuG;IACvG,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,SAAS,CAAC;IAClG,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,2GAA2G;IAC3G,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAyBD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,UAAU,EAAE,aAAa,EACzB,MAAM,EACN,MAAM,EACN,OAAO,EACP,eAAe,GAChB,EAAE,aAAa,+BA6Of"}

package/dist/toolbar/more-menu.js

@@ -1,8 +1,13 @@
-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 { useState } from 'react';
 import { useT } from '../messages/index.js';
-import { useOptionalShortcutRegistry } from '../shortcuts/index.js';
-import { Icon, IconButton, Popover } from '../ui/index.js';
+import { usePersistence, usePersistenceState } from '../persistence/index.js';
+import { useOpenShortcuts, useOptionalShortcutRegistry, useShortcutHint, } from '../shortcuts/index.js';
+import { useLocaleState } from '../store/index.js';
+import { useViewState } from '../store/react.js';
+import { Icon, IconButton, Kbd, Popover } from '../ui/index.js';
+import { BREAKPOINT_ICONS, BREAKPOINT_LABELS } from './breakpoint-control.js';
+import { safeHistory } from './safe-history.js';
 import { useTheme } from './theme.js';
 const THEMES = [
     { value: 'light', icon: 'sun' },
@@ -26,22 +31,64 @@ function inputOf(combo, platform) {
     };
 }
 /**
- * The `more` menu: the theme switch (hidden when the host fixes the theme), the shortcuts help, and
- * the links the row had no room for. Renders nothing when it would be empty.
+ * The more options menu: the editor theme (hidden when the host fixes it), the block outlines
+ * switch (the view state, also in the status bar), sample data, the shortcuts dialog with its key,
+ * help (the help page, or the shortcuts when the host has none) and the links the row had no room
+ * for.
  */
-export function MoreMenu({ historyUrl, cmsUrl }) {
+export function MoreMenu({ compact, historyUrl: rawHistoryUrl, cmsUrl, sample, helpUrl, onOpenShortcuts, }) {
     const t = useT();
+    const historyUrl = safeHistory(rawHistoryUrl);
     const theme = useTheme();
     const registry = useOptionalShortcutRegistry();
+    const fromProvider = useOpenShortcuts();
+    const openShortcuts = onOpenShortcuts ?? fromProvider;
     const [open, setOpen] = useState(false);
+    const view = useViewState();
+    const controller = usePersistence();
+    const saveStatus = usePersistenceState((state) => state.status);
+    const localeConfig = useLocaleState((state) => state.config);
+    const locale = useLocaleState((state) => state.locale);
+    const setLocale = useLocaleState((state) => state.setLocale);
     const helpCombo = registry?.keysFor('help.shortcuts')[0];
+    const helpHint = useShortcutHint('help.shortcuts');
     const showTheme = theme !== undefined && !theme.forced;
-    if (historyUrl === undefined && cmsUrl === undefined && helpCombo === undefined && !showTheme) {
-        return null;
-    }
-    return (_jsx(Popover, { open: open, onOpenChange: setOpen, align: "end", contentClassName: "bd-menu-popover", label: t('toolbar.more'), trigger: _jsx(IconButton, { label: t('toolbar.more'), icon: "ellipsis", variant: "ghost" }), children: _jsxs("div", { className: "bd-menu-list", children: [cmsUrl !== undefined && (_jsxs("a", { className: "bd-menu-item", href: cmsUrl, children: [_jsx(Icon, { name: "arrow-left" }), " ", t('toolbar.back')] })), historyUrl !== undefined && (_jsxs("a", { className: "bd-menu-item", href: historyUrl, children: [_jsx(Icon, { name: "history" }), " ", t('toolbar.versions')] })), registry !== undefined && helpCombo !== undefined && (_jsxs("button", { type: "button", className: "bd-menu-item", onClick: () => {
+    const hasLinks = cmsUrl !== undefined || historyUrl !== undefined;
+    const hasShortcuts = openShortcuts !== undefined || (registry !== undefined && helpCombo !== undefined);
+    const showShortcuts = () => {
+        setOpen(false);
+        if (openShortcuts !== undefined) {
+            openShortcuts();
+            return;
+        }
+        // Fallback: replay the key. After the menu has left the page, as the shortcut
+        // ignores keys while an overlay is open.
+        if (registry === undefined || helpCombo === undefined)
+            return;
+        setTimeout(() => {
+            registry.handle(inputOf(helpCombo, registry.platform), { typing: false });
+        }, 0);
+    };
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, align: "end", contentClassName: compact === undefined ? 'bd-menu-popover' : 'bd-menu-popover bd-menu-touch', label: t('toolbar.moreOptions'), trigger: _jsx(IconButton, { label: t('toolbar.moreOptions'), icon: "ellipsis", variant: "ghost" }), children: _jsxs("div", { className: "bd-menu-list", children: [compact !== undefined && (_jsxs(_Fragment, { children: [_jsxs("fieldset", { className: "bd-menu-theme", "aria-label": t('toolbar.breakpoints'), children: [_jsx("legend", { className: "bd-menu-caption", children: t('toolbar.breakpoints') }), _jsx("div", { className: "bd-segmented", children: compact.breakpoints.map((item) => {
+                                        const key = BREAKPOINT_LABELS[item.id];
+                                        const icon = BREAKPOINT_ICONS[item.id];
+                                        const label = key === undefined ? item.id : t(key);
+                                        return (_jsx("button", { type: "button", className: "bd-button bd-segment", "data-variant": "ghost", "aria-pressed": item.id === compact.breakpoint, "aria-label": label, title: label, onClick: () => compact.onBreakpointChange(item.id), children: icon === undefined ? label : _jsx(Icon, { name: icon }) }, item.id));
+                                    }) })] }), _jsx("hr", { className: "bd-menu-separator" }), compact.onPreview !== undefined && (_jsxs("button", { type: "button", className: "bd-menu-item", onClick: () => {
+                                setOpen(false);
+                                compact.onPreview?.();
+                            }, children: [_jsx(Icon, { name: "eye" }), _jsx("span", { className: "bd-menu-item-label", children: t('toolbar.preview.page') })] })), (saveStatus === 'dirty' || saveStatus === 'error') && (_jsxs("button", { type: "button", className: "bd-menu-item", onClick: () => {
+                                setOpen(false);
+                                void controller.saveNow();
+                            }, children: [_jsx(Icon, { name: "save" }), _jsx("span", { className: "bd-menu-item-label", children: t('save.now') })] })), localeConfig.locales.length > 1 && (_jsxs("fieldset", { className: "bd-menu-theme", "aria-label": t('locale.label'), children: [_jsx("legend", { className: "bd-menu-caption", children: t('locale.label') }), localeConfig.locales.map((code) => (_jsxs("button", { type: "button", className: "bd-menu-item", "aria-pressed": code === locale, onClick: () => {
+                                        setOpen(false);
+                                        setLocale(code);
+                                        compact.onLocaleChange?.(code);
+                                    }, children: [_jsx(Icon, { name: "globe" }), _jsx("span", { className: "bd-menu-item-label", children: localeConfig.intl[code] ?? code }), _jsx("span", { className: "bd-locale-code", children: code.toUpperCase() })] }, code)))] })), _jsx("hr", { className: "bd-menu-separator" })] })), cmsUrl !== undefined && (_jsxs("a", { className: "bd-menu-item", href: cmsUrl, children: [_jsx(Icon, { name: "arrow-left" }), " ", t('toolbar.backToCms')] })), typeof historyUrl === 'function' ? (_jsxs("button", { type: "button", className: "bd-menu-item", onClick: () => {
+                        setOpen(false);
+                        historyUrl();
+                    }, children: [_jsx(Icon, { name: "history" }), _jsx("span", { className: "bd-menu-item-label", children: t('toolbar.versions') })] })) : historyUrl !== undefined ? (_jsxs("a", { className: "bd-menu-item", href: historyUrl, children: [_jsx(Icon, { name: "history" }), " ", t('toolbar.versions')] })) : null, hasLinks && _jsx("hr", { className: "bd-menu-separator" }), showTheme && (_jsxs(_Fragment, { children: [_jsxs("fieldset", { className: "bd-menu-theme", "aria-label": t('toolbar.themeLabel'), children: [_jsx("legend", { className: "bd-menu-caption", children: t('toolbar.themeLabel') }), _jsx("div", { className: "bd-segmented", children: THEMES.map((item) => (_jsxs("button", { type: "button", className: "bd-button bd-segment", "data-variant": "ghost", "aria-pressed": theme.preference === item.value, onClick: () => theme.setPreference(item.value), children: [_jsx(Icon, { name: item.icon }), " ", t(`toolbar.theme.${item.value}`)] }, item.value))) })] }), _jsx("hr", { className: "bd-menu-separator" })] })), _jsxs("button", { type: "button", className: "bd-menu-item", "aria-pressed": view.outlines, onClick: view.toggleOutlines, children: [_jsx(Icon, { name: "square-dashed" }), _jsx("span", { className: "bd-menu-item-label", children: t('toolbar.guides') }), _jsx(Kbd, { className: "bd-menu-kbd", "aria-hidden": true, children: t(view.outlines ? 'statusBar.guides.on' : 'statusBar.guides.off') })] }), sample !== undefined && (_jsxs("button", { type: "button", className: "bd-menu-item", "aria-haspopup": "dialog", onClick: () => {
                         setOpen(false);
-                        // The help dialog belongs to the shortcut provider, which opens it on its own key.
-                        registry.handle(inputOf(helpCombo, registry.platform), { typing: false });
-                    }, children: [_jsx(Icon, { name: "keyboard" }), " ", t('shortcut.title')] })), showTheme && (_jsxs("fieldset", { className: "bd-menu-group", "aria-label": t('toolbar.theme'), children: [_jsx("legend", { className: "bd-menu-label", children: t('toolbar.theme') }), _jsx("div", { className: "bd-segmented", children: THEMES.map((item) => (_jsxs("button", { type: "button", className: "bd-button bd-segment", "data-variant": "ghost", "aria-pressed": theme.preference === item.value, onClick: () => theme.setPreference(item.value), children: [_jsx(Icon, { name: item.icon }), " ", t(`toolbar.theme.${item.value}`)] }, item.value))) })] }))] }) }));
+                        sample.onOpen();
+                    }, children: [_jsx(Icon, { name: "database" }), _jsx("span", { className: "bd-menu-item-label", children: t('toolbar.sampleData') }), sample.entry !== undefined && (_jsx(Kbd, { className: "bd-menu-kbd", "aria-hidden": true, children: t('toolbar.sampleData.entry').replace('{name}', sample.entry) }))] })), (hasShortcuts || helpUrl !== undefined) && _jsx("hr", { className: "bd-menu-separator" }), hasShortcuts && (_jsxs("button", { type: "button", className: "bd-menu-item", "aria-haspopup": "dialog", "aria-keyshortcuts": helpCombo, onClick: showShortcuts, children: [_jsx(Icon, { name: "keyboard" }), _jsx("span", { className: "bd-menu-item-label", children: t('toolbar.shortcuts') }), helpHint !== undefined && (_jsx(Kbd, { className: "bd-menu-kbd", "aria-hidden": true, children: helpHint }))] })), helpUrl !== undefined ? (_jsxs("a", { className: "bd-menu-item", href: helpUrl, target: "_blank", rel: "noreferrer", children: [_jsx(Icon, { name: "circle-question-mark" }), _jsx("span", { className: "bd-menu-item-label", children: t('toolbar.help') })] })) : hasShortcuts ? (_jsxs("button", { type: "button", className: "bd-menu-item", "aria-haspopup": "dialog", onClick: showShortcuts, children: [_jsx(Icon, { name: "circle-question-mark" }), _jsx("span", { className: "bd-menu-item-label", children: t('toolbar.help') })] })) : null] }) }));
 }

package/dist/toolbar/page-chip.d.ts

@@ -0,0 +1,10 @@
+export interface PageChipProps {
+    readonly title: string;
+    /** Draft or published; the small chip is left out without it. */
+    readonly status?: 'draft' | 'published' | undefined;
+    readonly open: boolean;
+    readonly onOpen: () => void;
+}
+/** The page in the middle of the toolbar: icon, name, status chip and chevron; it opens the page options. */
+export declare function PageChip({ title, status, open, onOpen }: PageChipProps): import("react").JSX.Element;
+//# sourceMappingURL=page-chip.d.ts.map

package/dist/toolbar/page-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-chip.d.ts","sourceRoot":"","sources":["../../src/toolbar/page-chip.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;IACpD,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,6GAA6G;AAC7G,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,aAAa,+BAsBtE"}

package/dist/toolbar/page-chip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../messages/index.js';
+import { Button, Icon, Tooltip } from '../ui/index.js';
+const STATUS_LABELS = {
+    draft: 'toolbar.status.draft',
+    published: 'toolbar.status.published',
+};
+/** The page in the middle of the toolbar: icon, name, status chip and chevron; it opens the page options. */
+export function PageChip({ title, status, open, onOpen }) {
+    const t = useT();
+    return (_jsx(Tooltip, { content: t('toolbar.pageOptions.hint'), children: _jsxs(Button, { className: "bd-page-chip", "aria-label": t('toolbar.pageOptions.named').replace('{name}', title), "aria-haspopup": "dialog", "aria-expanded": open, onClick: onOpen, children: [_jsx(Icon, { name: "file-text" }), _jsx("span", { className: "bd-page-chip-title", children: title }), status !== undefined && (_jsx("span", { className: "bd-page-chip-status", "data-status": status, children: t(STATUS_LABELS[status]) })), _jsx(Icon, { name: "chevron-down" })] }) }));
+}

package/dist/toolbar/page-options-dialog.d.ts

@@ -0,0 +1,16 @@
+import { type SamplesState } from './sample-picker.tsx';
+export interface PageOptionsDialogProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly title: string;
+    /** Saves a new page name (`adapter.rename`); the name is read-only without it. */
+    readonly onRename?: ((title: string) => Promise<void>) | undefined;
+    /** The page's address; the row is left out without it. Never editable here. */
+    readonly slug?: string | undefined;
+    readonly readOnly?: boolean;
+    /** The sample entry choice (templates only). */
+    readonly samples?: SamplesState | undefined;
+}
+/** The page options: name (renamed through the adapter), read-only address and the sample data. */
+export declare function PageOptionsDialog({ open, onOpenChange, title, onRename, slug, readOnly, samples, }: PageOptionsDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=page-options-dialog.d.ts.map

package/dist/toolbar/page-options-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-options-dialog.d.ts","sourceRoot":"","sources":["../../src/toolbar/page-options-dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEtE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IACnE,+EAA+E;IAC/E,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,gDAAgD;IAChD,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CAC7C;AAED,mGAAmG;AACnG,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE,sBAAsB,+BA+CxB"}

package/dist/toolbar/page-options-dialog.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useT } from '../messages/index.js';
+import { Button, Dialog } from '../ui/index.js';
+import { EditableTitle } from './editable-title.js';
+import { SampleSelect } from './sample-picker.js';
+/** The page options: name (renamed through the adapter), read-only address and the sample data. */
+export function PageOptionsDialog({ open, onOpenChange, title, onRename, slug, readOnly, samples, }) {
+    const t = useT();
+    const nameId = useId();
+    const addressId = useId();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, icon: "file-text", title: t('dialog.pageOptions.title'), description: t('dialog.pageOptions.description'), footer: _jsx(Button, { variant: "primary", onClick: () => onOpenChange(false), children: t('dialog.pageOptions.done') }), children: _jsxs("div", { className: "bd-page-options", children: [_jsxs("div", { className: "bd-page-options-field", children: [_jsx("label", { htmlFor: nameId, children: t('dialog.pageOptions.name') }), onRename === undefined ? (_jsx("input", { id: nameId, className: "bd-input", value: title, readOnly: true })) : (_jsx(EditableTitle, { title: title, onRename: onRename, disabled: readOnly === true, variant: "field", id: nameId }))] }), slug !== undefined && (_jsxs("div", { className: "bd-page-options-field", children: [_jsx("label", { htmlFor: addressId, children: t('dialog.pageOptions.address') }), _jsx("input", { id: addressId, className: "bd-input", value: slug, readOnly: true })] })), samples !== undefined && samples.samples.length > 0 && (_jsxs("div", { className: "bd-page-options-field", children: [_jsx("span", { children: t('dialog.pageOptions.sampleData') }), _jsx(SampleSelect, { state: samples })] }))] }) }));
+}

package/dist/toolbar/panel-toggles.d.ts

@@ -1,7 +1,8 @@
 import { type PanelSide } from '../app/shell-panels.tsx';
 /**
- * The button that opens or closes one side panel while the editor is narrow (PB-122). It renders
- * nothing when the panels sit beside the canvas.
+ * The button that shows or hides one side panel at every width. Wide: it collapses the panel to its
+ * rail (persisted); narrow (PB-122): it opens the panel as an overlay, one at a time. It renders
+ * nothing outside the layout (no `ShellPanels`).
  */
 export declare function PanelToggle({ side }: {
     readonly side: PanelSide;

package/dist/toolbar/panel-toggles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-toggles.d.ts","sourceRoot":"","sources":["../../src/toolbar/panel-toggles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AASzE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;CAAE,sCAajE"}
+{"version":3,"file":"panel-toggles.d.ts","sourceRoot":"","sources":["../../src/toolbar/panel-toggles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AASzE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;CAAE,sCAgBjE"}

package/dist/toolbar/panel-toggles.js

@@ -7,13 +7,18 @@ const LABELS = {
     right: 'editor.panels.right',
 };
 /**
- * The button that opens or closes one side panel while the editor is narrow (PB-122). It renders
- * nothing when the panels sit beside the canvas.
+ * The button that shows or hides one side panel at every width. Wide: it collapses the panel to its
+ * rail (persisted); narrow (PB-122): it opens the panel as an overlay, one at a time. It renders
+ * nothing outside the layout (no `ShellPanels`).
  */
 export function PanelToggle({ side }) {
     const t = useT();
     const panels = useShellPanels();
-    if (panels === undefined || !panels.narrow)
+    if (panels === undefined)
         return null;
-    return (_jsx(IconButton, { label: t(LABELS[side]), icon: side === 'left' ? 'panel-left' : 'panel-right', variant: "ghost", "aria-pressed": panels.open[side], onClick: () => panels.toggle(side) }));
+    const wide = !panels.narrow;
+    if (wide && (panels.collapsed === undefined || panels.toggleCollapsed === undefined))
+        return null;
+    const pressed = wide ? panels.collapsed?.[side] !== true : panels.open[side];
+    return (_jsx(IconButton, { label: t(LABELS[side]), icon: side === 'left' ? 'panel-left' : 'panel-right', variant: "ghost", "aria-pressed": pressed, onClick: () => (wide ? panels.toggleCollapsed?.(side) : panels.toggle(side)) }));
 }

package/dist/toolbar/publish-dialog.d.ts

@@ -6,6 +6,9 @@ export interface PublishDialogProps {
     /** `block` refuses to publish while errors exist; `warn` (the default) only says so. */
     readonly policy?: PublishPolicy | undefined;
     readonly canvasDiagnostics?: readonly Diagnostic[] | undefined;
+    /** The page's name and its public address, for the "visible at" line; the line is left out without an address. */
+    readonly pageName?: string | undefined;
+    readonly address?: string | undefined;
     /** Called after the backend accepted the publication. */
     readonly onPublished?: (() => void) | undefined;
 }

package/dist/toolbar/publish-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"publish-dialog.d.ts","sourceRoot":"","sources":["../../src/toolbar/publish-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,2BAA2B,CAAC;AAKnC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,wFAAwF;IACxF,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;IAC/D,yDAAyD;IACzD,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACjD;AASD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAkFtD"}
+{"version":3,"file":"publish-dialog.d.ts","sourceRoot":"","sources":["../../src/toolbar/publish-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,OAAO,EAEL,KAAK,aAAa,EAInB,MAAM,2BAA2B,CAAC;AAKnC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,wFAAwF;IACxF,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;IAC/D,kHAAkH;IAClH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,yDAAyD;IACzD,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACjD;AASD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAqKtD"}

package/dist/toolbar/publish-dialog.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useT } from '../messages/index.js';
-import { publishGate, SEVERITY_ICON, useIssues, } from '../panels/issues/index.js';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { useManifest } from '../app/manifest.js';
+import { useStageSlots } from '../app/stage-slots.js';
+import { interpolate, usePlural, useT } from '../messages/index.js';
+import { issuePath, publishGate, SEVERITY_ICON, useIssues, } from '../panels/issues/index.js';
 import { usePersistence, usePersistenceState } from '../persistence/index.js';
 import { useEditor, useEditorState } from '../store/index.js';
-import { Button, Dialog, Icon } from '../ui/index.js';
+import { Button, Dialog, Icon, Tooltip } from '../ui/index.js';
 const FAILURE_KEY = {
     conflict: 'publish.failed.conflict',
     invalid: 'publish.failed.invalid',
@@ -17,11 +19,17 @@ const FAILURE_KEY = {
  * and publishes after saving whatever is unsaved (`PersistenceController.publish`).
  */
 export function PublishDialog(props) {
-    const { open, onOpenChange, policy, canvasDiagnostics, onPublished } = props;
+    const { open, onOpenChange, policy, canvasDiagnostics, onPublished, pageName, address } = props;
+    const primary = useRef(null);
+    const scheduleReason = useId();
     const t = useT();
+    const plural = usePlural();
+    const slots = useStageSlots();
+    const manifest = useManifest();
     const store = useEditor();
     const persistence = usePersistence();
     const readOnly = useEditorState((state) => state.readOnly);
+    const doc = useEditorState((state) => state.doc);
     const status = usePersistenceState((state) => state.status);
     const items = useIssues(canvasDiagnostics);
     const gate = publishGate(items, policy);
@@ -45,5 +53,24 @@ export function PublishDialog(props) {
             onPublished?.();
     };
     const done = outcome?.ok === true;
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: t('publish.title'), description: t('publish.description'), footer: _jsx(Button, { variant: "primary", disabled: gate.blocked || readOnly || working || done || status === 'conflict', onClick: () => void publish(), children: working ? t('publish.working') : t('toolbar.publish') }), children: [_jsx("p", { className: "bd-publish-notice", children: t('publish.notice') }), _jsx("ul", { className: "bd-publish-summary", "aria-label": t('publish.summary'), children: ['error', 'warning', 'info'].map((severity) => (_jsxs("li", { className: "bd-publish-badge", "data-severity": severity, children: [_jsx(Icon, { name: SEVERITY_ICON[severity] }), _jsx("span", { "aria-hidden": "true", children: gate.counts[severity] }), _jsx("span", { className: "bd-visually-hidden", children: t(`publish.count.${severity}`).replace('{count}', String(gate.counts[severity])) })] }, severity))) }), gate.blocked ? (_jsx("p", { role: "alert", className: "bd-publish-blocked", children: t(gate.reason === 'blocking' ? 'publish.blocked.corrupt' : 'publish.blocked.errors') })) : gate.counts.error + gate.counts.warning > 0 ? (_jsx("p", { className: "bd-field-hint", children: t('publish.warn') })) : null, status === 'conflict' ? (_jsx("p", { role: "alert", className: "bd-publish-blocked", children: t('publish.failed.conflict') })) : null, outcome !== undefined && !outcome.ok ? (_jsx("p", { role: "alert", className: "bd-publish-blocked", children: t(FAILURE_KEY[outcome.kind]) })) : null, done ? (_jsx("p", { role: "status", className: "bd-publish-done", children: t('publish.done') })) : null] }));
+    const counts = ['error', 'warning', 'info']
+        .filter((severity) => gate.counts[severity] > 0)
+        .map((severity) => plural(`issues.count.${severity}`, gate.counts[severity]))
+        .join(', ');
+    const showIssues = () => {
+        slots?.setIssuesOpen(true);
+        onOpenChange(false);
+    };
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, icon: "send", initialFocus: primary, title: t('dialog.publish.title'), description: t('publish.description'), footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => onOpenChange(false), children: t('dialog.cancel') }), _jsx(Button, { ref: primary, variant: "primary", disabled: gate.blocked || readOnly || working || done || status === 'conflict', onClick: () => void publish(), children: working ? t('publish.working') : t('dialog.publish.confirm') })] }), children: [address === undefined ? null : (_jsx("p", { className: "bd-publish-address", children: interpolate(t('dialog.publish.visibleAt'), {
+                    name: pageName ?? '',
+                    address,
+                }) })), _jsx("p", { className: "bd-publish-notice", children: t('publish.notice') }), _jsx("ul", { className: "bd-publish-list", "aria-label": t('publish.summary'), 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
+                tabIndex: 0, children: items.length === 0 ? (_jsxs("li", { className: "bd-publish-row", "data-severity": "ok", children: [_jsx(Icon, { name: "circle-check", className: "bd-publish-row-icon" }), _jsx("span", { className: "bd-publish-row-text", children: t('issues.allGood') })] })) : (items.map((item) => {
+                    const path = item.nodeId === undefined ? '' : issuePath(doc, manifest, item.nodeId);
+                    const content = (_jsxs(_Fragment, { children: [_jsx(Icon, { name: SEVERITY_ICON[item.severity], label: t(`issues.filter.${item.severity}`), className: "bd-publish-row-icon" }), _jsx("span", { className: "bd-publish-row-text", children: item.message }), path === '' ? null : _jsx("small", { className: "bd-publish-row-path", children: path })] }));
+                    return (_jsx("li", { className: "bd-publish-row", "data-severity": item.severity, children: slots === undefined ? (content) : (_jsx("button", { type: "button", className: "bd-publish-row-button", onClick: showIssues, children: content })) }, item.key));
+                })) }), gate.blocked ? (_jsx("p", { role: "alert", className: "bd-publish-blocked", children: t(gate.reason === 'blocking' ? 'publish.blocked.corrupt' : 'publish.blocked.errors') })) : counts !== '' ? (_jsx("p", { className: "bd-publish-counts", children: gate.counts.error > 0
+                    ? `${t('publish.warn')} (${counts})`
+                    : interpolate(t('dialog.publish.warningsDontBlock'), { issues: counts }) })) : null, _jsxs("fieldset", { className: "bd-publish-when", "aria-label": t('dialog.publish.when'), children: [_jsxs("button", { type: "button", "aria-pressed": "true", className: "bd-publish-option", children: [_jsx("b", { children: t('dialog.publish.now') }), _jsx("span", { children: t('dialog.publish.nowHint') })] }), _jsx(Tooltip, { content: t('dialog.publish.soon'), children: _jsxs("button", { type: "button", "aria-pressed": "false", "aria-disabled": "true", "aria-describedby": scheduleReason, className: "bd-publish-option", "data-unavailable": "", children: [_jsx("b", { children: t('dialog.publish.schedule') }), _jsx("span", { children: t('dialog.publish.scheduleHint') }), _jsx("small", { id: scheduleReason, className: "bd-publish-option-reason", children: t('dialog.publish.scheduleUnavailable') })] }) })] }), status === 'conflict' ? (_jsx("p", { role: "alert", className: "bd-publish-blocked", children: t('publish.failed.conflict') })) : null, outcome !== undefined && !outcome.ok ? (_jsx("p", { role: "alert", className: "bd-publish-blocked", children: t(FAILURE_KEY[outcome.kind]) })) : null, done ? (_jsx("p", { role: "status", className: "bd-publish-done", children: t('publish.done') })) : null] }));
 }