@next-buildr/editor 0.0.0-stage → 2.0.1

package/dist/toolbar/brand.d.ts

@@ -0,0 +1,7 @@
+/** The Buildr mark: a rounded tile holding three stacked 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. */
+export declare function Brand(): import("react").JSX.Element;
+//# sourceMappingURL=brand.d.ts.map

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

@@ -0,0 +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"}

package/dist/toolbar/brand.js

@@ -0,0 +1,11 @@
+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 product identity in the top left corner: 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

@@ -0,0 +1,9 @@
+import type { BreakpointConfig } from '../app/config.ts';
+export interface BreakpointControlProps {
+    readonly breakpoints: readonly BreakpointConfig[];
+    readonly breakpoint: string;
+    readonly onChange: (id: string) => void;
+}
+/** A segmented control: one icon per screen size, the width in the tooltip. */
+export declare function BreakpointControl({ breakpoints, breakpoint, onChange }: BreakpointControlProps): import("react").JSX.Element;
+//# sourceMappingURL=breakpoint-control.d.ts.map

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

@@ -0,0 +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"}

package/dist/toolbar/breakpoint-control.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useT } from '../messages/index.js';
+import { Button, Icon, Tooltip } from '../ui/index.js';
+const BREAKPOINT_LABELS = {
+    desktop: 'toolbar.breakpoint.desktop',
+    tablet: 'toolbar.breakpoint.tablet',
+    mobile: 'toolbar.breakpoint.mobile',
+};
+const BREAKPOINT_ICONS = {
+    desktop: 'monitor',
+    tablet: 'tablet',
+    mobile: 'smartphone',
+};
+/** A segmented control: one icon per screen size, the width in the tooltip. */
+export function BreakpointControl({ breakpoints, breakpoint, onChange }) {
+    const t = useT();
+    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));
+        }) }));
+}

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

@@ -0,0 +1,14 @@
+export interface EditableTitleProps {
+    readonly title: string;
+    /** 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;
+}
+/** Longest name the backends take (`createDocumentRequestSchema` in the Payload contract). */
+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;
+//# sourceMappingURL=editable-title.d.ts.map

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

@@ -0,0 +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"}

package/dist/toolbar/editable-title.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useT } from '../messages/index.js';
+/** Longest name the backends take (`createDocumentRequestSchema` in the Payload contract). */
+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 }) {
+    const t = useT();
+    const [draft, setDraft] = useState(title);
+    const editing = useRef(false);
+    const cancelled = useRef(false);
+    // A rename that came from elsewhere (a reload, another tab) replaces the text unless it is being typed.
+    useEffect(() => {
+        if (!editing.current)
+            setDraft(title);
+    }, [title]);
+    const commit = () => {
+        editing.current = false;
+        if (cancelled.current) {
+            cancelled.current = false;
+            return;
+        }
+        const next = draft.trim();
+        if (next === '' || next === title) {
+            setDraft(title);
+            return;
+        }
+        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) => {
+            editing.current = true;
+            event.currentTarget.select();
+        }, onChange: (event) => setDraft(event.target.value), onBlur: commit, onKeyDown: (event) => {
+            if (event.key === 'Enter')
+                event.currentTarget.blur();
+            else if (event.key === 'Escape') {
+                cancelled.current = true;
+                setDraft(title);
+                event.currentTarget.blur();
+            }
+        } }));
+}

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { MessagesProvider } from '../messages/index.js';
+import { EditableTitle } from './editable-title.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root;
+afterEach(() => act(() => root?.unmount()));
+const mount = async (onRename) => {
+    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: onRename }) })));
+    const input = container.querySelector('input');
+    await act(async () => input.focus());
+    return input;
+};
+const type = async (input, text) => act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, text);
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+});
+const key = (input, name) => act(async () => {
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: name, bubbles: true }));
+});
+describe('EditableTitle', () => {
+    it('saves a trimmed name on Enter', async () => {
+        const onRename = vi.fn().mockResolvedValue(undefined);
+        const input = await mount(onRename);
+        await type(input, '  About ');
+        await key(input, 'Enter');
+        expect(onRename).toHaveBeenCalledWith('About');
+    });
+    it('puts the old name back on Escape and never saves an empty name', async () => {
+        const onRename = vi.fn().mockResolvedValue(undefined);
+        const input = await mount(onRename);
+        await type(input, 'Other');
+        await key(input, 'Escape');
+        expect(input.value).toBe('Home');
+        await act(async () => input.focus());
+        await type(input, '   ');
+        await act(async () => input.blur());
+        expect(onRename).not.toHaveBeenCalled();
+        expect(input.value).toBe('Home');
+    });
+    it('reverts when the backend refuses', async () => {
+        const input = await mount(() => Promise.reject(new Error('no')));
+        await type(input, 'Nope');
+        await key(input, 'Enter');
+        expect(input.value).toBe('Home');
+    });
+});

package/dist/toolbar/index.d.ts

@@ -0,0 +1,12 @@
+export type { LocaleSwitcherProps } from './locale-switcher.tsx';
+export { LocaleSwitcher } from './locale-switcher.tsx';
+export type { PublishDialogProps } from './publish-dialog.tsx';
+export { PublishDialog } from './publish-dialog.tsx';
+export type { SamplePickerProps } from './sample-picker.tsx';
+export { DEFAULT_SAMPLE, SamplePicker } from './sample-picker.tsx';
+export type { ThemePreference, ThemeState } from './theme.tsx';
+export { THEME_STORAGE_KEY, ThemeProvider, useTheme, useThemePreference } from './theme.tsx';
+export type { ToolbarProps } from './toolbar.tsx';
+export { Toolbar } from './toolbar.tsx';
+export type { Zoom } from './zoom-menu.tsx';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC7F,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/toolbar/index.js

@@ -0,0 +1,5 @@
+export { LocaleSwitcher } from './locale-switcher.js';
+export { PublishDialog } from './publish-dialog.js';
+export { DEFAULT_SAMPLE, SamplePicker } from './sample-picker.js';
+export { THEME_STORAGE_KEY, ThemeProvider, useTheme, useThemePreference } from './theme.js';
+export { Toolbar } from './toolbar.js';

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

@@ -0,0 +1,10 @@
+export interface LocaleSwitcherProps {
+    /** Tells the canvas which language to render (`CanvasHost.setLocale`). */
+    readonly onChange?: ((locale: string) => void) | undefined;
+}
+/**
+ * Chooses the language of the content being edited (docs/editor.md#content-language). Renders
+ * nothing when there is only one language.
+ */
+export declare function LocaleSwitcher({ onChange }: LocaleSwitcherProps): import("react").JSX.Element | null;
+//# sourceMappingURL=locale-switcher.d.ts.map

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

@@ -0,0 +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"}

package/dist/toolbar/locale-switcher.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useT } from '../messages/index.js';
+import { useLocaleState } from '../store/index.js';
+import { Select } from '../ui/index.js';
+/**
+ * Chooses the language of the content being edited (docs/editor.md#content-language). Renders
+ * nothing when there is only one language.
+ */
+export function LocaleSwitcher({ onChange }) {
+    const t = useT();
+    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;
+    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 })) }));
+}

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

@@ -0,0 +1,12 @@
+export interface MoreMenuProps {
+    /** The version history in the CMS; listed here only when it no longer fits the row. */
+    readonly historyUrl?: string | undefined;
+    /** The page in the CMS; listed here only when it no longer fits the row. */
+    readonly cmsUrl?: string | 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.
+ */
+export declare function MoreMenu({ historyUrl, cmsUrl }: MoreMenuProps): import("react").JSX.Element | null;
+//# sourceMappingURL=more-menu.d.ts.map

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

@@ -0,0 +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"}

package/dist/toolbar/more-menu.js

@@ -0,0 +1,47 @@
+import { 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 { useTheme } from './theme.js';
+const THEMES = [
+    { value: 'light', icon: 'sun' },
+    { value: 'dark', icon: 'moon' },
+    { value: 'system', icon: 'monitor' },
+];
+/** A canonical combination (`shift+?`) as the key press the registry handles. */
+function inputOf(combo, platform) {
+    const parts = combo.split('+');
+    const key = parts.pop() ?? '';
+    const has = (name) => parts.includes(name);
+    const primary = has('mod');
+    return {
+        key,
+        mods: {
+            shift: has('shift'),
+            alt: has('alt'),
+            ctrl: has('ctrl') || (primary && platform === 'other'),
+            meta: has('meta') || (primary && platform === 'mac'),
+        },
+    };
+}
+/**
+ * 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.
+ */
+export function MoreMenu({ historyUrl, cmsUrl }) {
+    const t = useT();
+    const theme = useTheme();
+    const registry = useOptionalShortcutRegistry();
+    const [open, setOpen] = useState(false);
+    const helpCombo = registry?.keysFor('help.shortcuts')[0];
+    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: () => {
+                        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))) })] }))] }) }));
+}

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

@@ -0,0 +1,9 @@
+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.
+ */
+export declare function PanelToggle({ side }: {
+    readonly side: PanelSide;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=panel-toggles.d.ts.map

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

@@ -0,0 +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"}

package/dist/toolbar/panel-toggles.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useShellPanels } from '../app/shell-panels.js';
+import { useT } from '../messages/index.js';
+import { IconButton } from '../ui/index.js';
+const LABELS = {
+    left: 'editor.panels.left',
+    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.
+ */
+export function PanelToggle({ side }) {
+    const t = useT();
+    const panels = useShellPanels();
+    if (panels === undefined || !panels.narrow)
+        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) }));
+}

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

@@ -0,0 +1,18 @@
+import type { Diagnostic } from '@next-buildr/core';
+import { type PublishPolicy } from '../panels/issues/index.ts';
+export interface PublishDialogProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    /** `block` refuses to publish while errors exist; `warn` (the default) only says so. */
+    readonly policy?: PublishPolicy | undefined;
+    readonly canvasDiagnostics?: readonly Diagnostic[] | undefined;
+    /** Called after the backend accepted the publication. */
+    readonly onPublished?: (() => void) | undefined;
+}
+/**
+ * The publish dialog (docs/editor.md#issues-and-publishing): re-runs the checks, summarises what
+ * they found, applies the publish policy, says that publishing replaces the live page as a whole,
+ * and publishes after saving whatever is unsaved (`PersistenceController.publish`).
+ */
+export declare function PublishDialog(props: PublishDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=publish-dialog.d.ts.map

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

@@ -0,0 +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"}

package/dist/toolbar/publish-dialog.js

@@ -0,0 +1,49 @@
+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 { usePersistence, usePersistenceState } from '../persistence/index.js';
+import { useEditor, useEditorState } from '../store/index.js';
+import { Button, Dialog, Icon } from '../ui/index.js';
+const FAILURE_KEY = {
+    conflict: 'publish.failed.conflict',
+    invalid: 'publish.failed.invalid',
+    unsaved: 'publish.failed.unsaved',
+    network: 'publish.failed.network',
+};
+/**
+ * The publish dialog (docs/editor.md#issues-and-publishing): re-runs the checks, summarises what
+ * they found, applies the publish policy, says that publishing replaces the live page as a whole,
+ * and publishes after saving whatever is unsaved (`PersistenceController.publish`).
+ */
+export function PublishDialog(props) {
+    const { open, onOpenChange, policy, canvasDiagnostics, onPublished } = props;
+    const t = useT();
+    const store = useEditor();
+    const persistence = usePersistence();
+    const readOnly = useEditorState((state) => state.readOnly);
+    const status = usePersistenceState((state) => state.status);
+    const items = useIssues(canvasDiagnostics);
+    const gate = publishGate(items, policy);
+    const [working, setWorking] = useState(false);
+    const [outcome, setOutcome] = useState();
+    // The checks run a moment after the last edit; the dialog must not judge an older document.
+    useEffect(() => {
+        if (!open)
+            return;
+        setOutcome(undefined);
+        store.validateNow();
+    }, [open, store]);
+    const publish = async () => {
+        setWorking(true);
+        setOutcome(undefined);
+        store.validateNow();
+        const result = await persistence.publish();
+        setWorking(false);
+        setOutcome(result);
+        if (result.ok)
+            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] }));
+}

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

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

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

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