@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/toolbar/publish.test.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, p, s, } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { MessagesProvider } from '../messages/index.js';
+import { collectIssues, countIssues, filterIssues, IssuesPanel, publishGate, } from '../panels/issues/index.js';
+import { createPersistence, PersistenceProvider, } from '../persistence/index.js';
+import { createEditorStore, EditorStoreProvider } from '../store/index.js';
+import { ToastProvider } from '../ui/index.js';
+import { PublishDialog } from './publish-dialog.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const widget = {
+    type: 'buildr/widget',
+    version: 1,
+    label: 'Widget',
+    category: 'content',
+    props: { count: p.number({ default: 1, min: 0, max: 10 }) },
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+    slots: { default: {} },
+};
+const page = {
+    ...widget,
+    type: 'buildr/page',
+    label: 'Page',
+    props: {},
+    capabilities: { root: true },
+};
+const registry = createRegistryMeta({ components: [page, widget] });
+/** `count` is a string where a number is expected: an error, but the page still renders. */
+const versions = { 'buildr/page': 1, 'buildr/widget': 1 };
+const broken = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['widget0001'] } },
+        widget0001: { id: 'widget0001', type: 'buildr/widget', props: { count: s('many') } },
+    },
+    components: versions,
+});
+/** No version recorded for the components: the document is damaged. */
+const corrupt = () => ({ ...broken(), components: {} });
+const clean = () => ({
+    ...broken(),
+    nodes: {
+        ...broken().nodes,
+        widget0001: { id: 'widget0001', type: 'buildr/widget' },
+    },
+});
+const item = (over) => ({
+    key: 'k',
+    source: 'validation',
+    severity: 'warning',
+    code: 'x',
+    message: 'm',
+    blocking: false,
+    ...over,
+});
+describe('issue collection and the publish gate', () => {
+    it('orders worst first and drops nodes that are gone', () => {
+        const items = collectIssues({
+            doc: clean(),
+            validation: [
+                {
+                    code: 'a',
+                    message: 'gone',
+                    severity: 'warning',
+                    blocking: false,
+                    path: ['nodes', 'nope'],
+                },
+                {
+                    code: 'b',
+                    message: 'here',
+                    severity: 'error',
+                    blocking: false,
+                    path: ['nodes', 'widget0001', 'props'],
+                },
+            ],
+            a11y: [{ ruleId: 'r', severity: 'info', nodeId: 'widget0001', message: 'note' }],
+        });
+        expect(items.map((entry) => entry.message)).toEqual(['here', 'gone', 'note']);
+        expect(items[0]?.nodeId).toBe('widget0001');
+        expect(items[1]?.nodeId).toBeUndefined();
+        expect(countIssues(items)).toEqual({ all: 3, error: 1, warning: 1, info: 1 });
+        expect(filterIssues(items, 'warning')).toHaveLength(1);
+    });
+    it('blocks on corruption always and on errors only under the block policy', () => {
+        const error = [item({ severity: 'error' })];
+        expect(publishGate(error).blocked).toBe(false);
+        expect(publishGate(error, 'warn').blocked).toBe(false);
+        expect(publishGate(error, 'block')).toMatchObject({ blocked: true, reason: 'errors' });
+        expect(publishGate([item({ blocking: true, severity: 'error' })], 'warn')).toMatchObject({
+            blocked: true,
+            reason: 'blocking',
+        });
+        expect(publishGate([item({})], 'block').blocked).toBe(false);
+    });
+});
+describe('the Issues panel and the publish dialog', () => {
+    let container;
+    let root;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        document.body.innerHTML = '';
+    });
+    function setup(doc, policy, publishResult) {
+        const publish = vi.fn(async () => publishResult ?? { ok: true, revision: 3, updatedAt: 't3' });
+        const adapter = {
+            save: async () => ({ ok: true, revision: 2, updatedAt: 't2' }),
+            publish,
+        };
+        const store = createEditorStore({
+            doc,
+            registry,
+            generateId: createSeededIdGenerator(5),
+            validationDelayMs: null,
+        });
+        const controller = createPersistence({
+            store,
+            adapter,
+            ref: { collection: 'pages', id: '1' },
+            revision: 1,
+        });
+        const view = async (open) => act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: _jsx(ToastProvider, { children: _jsxs(PersistenceProvider, { controller: controller, children: [_jsx(IssuesPanel, {}), _jsx(PublishDialog, { open: open, onOpenChange: () => undefined, policy: policy })] }) }) }) })));
+        return { store, publish, view };
+    }
+    const publishButton = () => [...document.querySelectorAll('button')].find((button) => button.textContent === 'Publish');
+    it('lists an issue and selects its node when it is clicked', async () => {
+        const { store, view } = setup(broken(), 'warn');
+        await view(false);
+        await act(async () => void store.validateNow());
+        const target = container.querySelector('.bd-issue-target');
+        expect(target).not.toBeNull();
+        await act(async () => target.click());
+        expect(store.getState().selectedIds).toEqual(['widget0001']);
+    });
+    it('groups issues by severity, with severity and component icons', 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('');
+        }
+    });
+    it('shows the publish counts as icon badges with a spoken text', 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/);
+    });
+    it('refuses to publish while errors exist under the block policy', async () => {
+        const { publish, view } = setup(broken(), 'block');
+        await view(true);
+        expect(document.body.textContent).toContain('Publishing is blocked');
+        expect(publishButton().disabled).toBe(true);
+        expect(publish).not.toHaveBeenCalled();
+    });
+    it('warns but publishes under the warn policy, after saving', async () => {
+        const { store, publish, view } = setup(broken(), 'warn');
+        await view(true);
+        expect(document.body.textContent).toContain('You can still publish');
+        expect(document.body.textContent).toContain('replaces the live page');
+        await act(async () => {
+            store.dispatch({
+                type: 'node.setAttr',
+                payload: { id: 'widget0001', key: 'name', value: 'A' },
+            });
+        });
+        await act(async () => publishButton().click());
+        expect(publish).toHaveBeenCalledWith(expect.anything(), { baseRevision: 2 });
+        expect(document.body.textContent).toContain('Published.');
+    });
+    it('refuses a damaged document under any policy', async () => {
+        const { publish, view } = setup(corrupt(), 'warn');
+        await view(true);
+        expect(document.body.textContent).toContain('damaged');
+        expect(publishButton().disabled).toBe(true);
+        expect(publish).not.toHaveBeenCalled();
+    });
+    it('publishes a clean document', async () => {
+        const { publish, view } = setup(clean(), 'block');
+        await view(true);
+        await act(async () => publishButton().click());
+        expect(publish).toHaveBeenCalledOnce();
+        expect(document.body.textContent).toContain('Published.');
+    });
+    it('shows why a publication failed', async () => {
+        const { view } = setup(clean(), 'block', { ok: false, kind: 'conflict', currentRevision: 9 });
+        await view(true);
+        await act(async () => publishButton().click());
+        expect(document.body.textContent).toContain('changed elsewhere');
+    });
+});
+describe('PersistenceController.publish', () => {
+    function controllerFor(save, publish) {
+        const store = createEditorStore({
+            doc: clean(),
+            registry,
+            generateId: createSeededIdGenerator(5),
+            validationDelayMs: null,
+        });
+        const controller = createPersistence({
+            store,
+            adapter: { save, publish },
+            ref: { collection: 'pages', id: '1' },
+            revision: 1,
+        });
+        controller.start();
+        act(() => {
+            store.dispatch({
+                type: 'node.setAttr',
+                payload: { id: 'widget0001', key: 'name', value: 'A' },
+            });
+        });
+        return controller;
+    }
+    it('does not publish what it could not save', async () => {
+        const publish = vi.fn();
+        const controller = controllerFor(async () => ({ ok: false, kind: 'invalid', diagnostics: [] }), publish);
+        expect(await controller.publish()).toEqual({ ok: false, kind: 'unsaved' });
+        expect(publish).not.toHaveBeenCalled();
+    });
+    it('turns a rejection into an outcome and keeps the revision on success', async () => {
+        const failing = controllerFor(async () => ({ ok: true, revision: 2, updatedAt: 't' }), async () => {
+            throw new Error('offline');
+        });
+        expect(await failing.publish()).toEqual({ ok: false, kind: 'network', message: 'offline' });
+        const working = controllerFor(async () => ({ ok: true, revision: 2, updatedAt: 't' }), async () => ({ ok: true, revision: 4, updatedAt: 'u' }));
+        expect(await working.publish()).toMatchObject({ ok: true, revision: 4 });
+        expect(working.state.getState().revision).toBe(4);
+    });
+    it('moves to the conflict state when the backend says so', async () => {
+        const controller = controllerFor(async () => ({ ok: true, revision: 2, updatedAt: 't' }), async () => ({ ok: false, kind: 'conflict', currentRevision: 8 }));
+        expect(await controller.publish()).toMatchObject({ ok: false, kind: 'conflict' });
+        expect(controller.state.getState()).toMatchObject({ status: 'conflict', conflictRevision: 8 });
+    });
+});

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

@@ -0,0 +1,18 @@
+import type { DocumentAdapter, DocumentRef } from '../persistence/index.ts';
+/** The choice that leaves the canvas on the adapter's own default entry. */
+export declare const DEFAULT_SAMPLE = "__default__";
+export interface SamplePickerProps {
+    readonly adapter: Pick<DocumentAdapter, 'listSamples'>;
+    readonly docRef: DocumentRef;
+    /** Tells the canvas which entry to render with (`CanvasHost.setContextRef`). */
+    readonly onChange: (contextRef: string | null) => void;
+    /** Where the choice is remembered; `localStorage` unless a test or host gives another. */
+    readonly storage?: Pick<Storage, 'getItem' | 'setItem'> | undefined;
+}
+/**
+ * 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).
+ */
+export declare function SamplePicker({ adapter, docRef, onChange, storage }: SamplePickerProps): import("react").JSX.Element | null;
+//# sourceMappingURL=sample-picker.d.ts.map

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

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

package/dist/toolbar/sample-picker.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, 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. */
+export const DEFAULT_SAMPLE = '__default__';
+const keyOf = (ref) => `buildr:sample:${ref.collection}:${ref.id}`;
+const read = (storage, key) => {
+    try {
+        return (storage ?? globalThis.localStorage).getItem(key);
+    }
+    catch {
+        return null;
+    }
+};
+const write = (storage, key, value) => {
+    try {
+        (storage ?? globalThis.localStorage).setItem(key, value);
+    }
+    catch {
+        // Private windows and blocked storage: the choice just is not remembered.
+    }
+};
+/**
+ * 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).
+ */
+export function SamplePicker({ adapter, docRef, onChange, storage }) {
+    const t = useT();
+    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
+    useEffect(() => {
+        let cancelled = false;
+        const ref = { collection, id };
+        void (async () => {
+            let list = [];
+            try {
+                list = (await adapter.listSamples?.(ref)) ?? [];
+            }
+            catch {
+                list = [];
+            }
+            if (cancelled)
+                return;
+            setSamples(list);
+            const saved = read(storage, keyOf(ref));
+            // 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);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter, collection, id, storage]);
+    if (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: [
+            { value: DEFAULT_SAMPLE, label: t('sample.default') },
+            ...samples.map((sample) => ({ value: sample.id, label: sample.label })),
+        ] }));
+}

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

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

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

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

package/dist/toolbar/sample-picker.test.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { MessagesProvider } from '../messages/index.js';
+import { SamplePicker } from './sample-picker.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const ref = { collection: 'templates', id: '1' };
+const samples = [
+    { id: 'p1', label: 'First post' },
+    { id: 'p2', label: 'Second post' },
+];
+describe('SamplePicker', () => {
+    let container;
+    let root;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        Element.prototype.scrollIntoView ??= () => { };
+        Element.prototype.hasPointerCapture ??= () => false;
+        Element.prototype.setPointerCapture ??= () => { };
+        Element.prototype.releasePointerCapture ??= () => { };
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        document.body.innerHTML = '';
+    });
+    const store = (initial = {}) => {
+        const data = { ...initial };
+        return {
+            data,
+            getItem: (key) => data[key] ?? null,
+            setItem: (key, value) => {
+                data[key] = value;
+            },
+        };
+    };
+    const mount = async (listSamples, onChange, storage = store()) => {
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(SamplePicker, { adapter: { listSamples }, docRef: ref, onChange: onChange, storage: storage }) })));
+    };
+    it('renders nothing when there are no samples', async () => {
+        await mount(undefined, () => undefined);
+        expect(container.innerHTML).toBe('');
+        await mount(async () => [], () => undefined);
+        expect(container.innerHTML).toBe('');
+    });
+    it('sends the remembered entry to the canvas', async () => {
+        const onChange = vi.fn();
+        await mount(async () => samples, onChange, store({ 'buildr:sample:templates:1': 'p2' }));
+        expect(onChange).toHaveBeenCalledWith('p2');
+        expect(container.textContent).toContain('Second post');
+    });
+    it('forgets a remembered entry that is gone, and survives broken storage', async () => {
+        const onChange = vi.fn();
+        await mount(async () => samples, onChange, store({ 'buildr:sample:templates:1': 'gone' }));
+        expect(onChange).not.toHaveBeenCalled();
+        const blocked = () => {
+            throw new Error('blocked');
+        };
+        await mount(async () => samples, onChange, { getItem: blocked, setItem: blocked });
+        expect(container.textContent).toContain('Default entry');
+    });
+    it('switching the entry tells the canvas and remembers it', async () => {
+        const onChange = vi.fn();
+        const storage = store();
+        await mount(async () => samples, onChange, storage);
+        await act(async () => container.querySelector('button[role=combobox]').click());
+        const option = [...document.querySelectorAll('[role=option]')].find((o) => o.textContent?.includes('First post'));
+        await act(async () => {
+            option.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+            option.click();
+        });
+        expect(onChange).toHaveBeenLastCalledWith('p1');
+        expect(storage.data['buildr:sample:templates:1']).toBe('p1');
+    });
+});

package/dist/toolbar/save-indicator.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The save status as an icon and a short text (the same messages as `SaveStatus`). When the row is
+ * tight the text is visually hidden; it stays the status region's content.
+ */
+export declare function SaveIndicator({ compact }: {
+    readonly compact?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=save-indicator.d.ts.map

package/dist/toolbar/save-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-indicator.d.ts","sourceRoot":"","sources":["../../src/toolbar/save-indicator.tsx"],"names":[],"mappings":"AAaA;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAe,EAAE,EAAE;IAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,+BA6BhF"}

package/dist/toolbar/save-indicator.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../messages/index.js';
+import { usePersistence, usePersistenceState } from '../persistence/index.js';
+import { useEditorState } from '../store/index.js';
+import { Button, Icon } from '../ui/index.js';
+const STATUS_ICONS = {
+    clean: 'check',
+    dirty: 'circle',
+    saving: 'loader-circle',
+    error: 'triangle-alert',
+    conflict: 'triangle-alert',
+};
+/**
+ * The save status as an icon and a short text (the same messages as `SaveStatus`). When the row is
+ * tight the text is visually hidden; it stays the status region's content.
+ */
+export function SaveIndicator({ compact = false }) {
+    const t = useT();
+    const controller = usePersistence();
+    const status = usePersistenceState((state) => state.status);
+    const error = usePersistenceState((state) => state.error);
+    const readOnly = useEditorState((state) => state.readOnly);
+    const text = readOnly
+        ? t('save.readOnly')
+        : status === 'error' && error?.kind === 'invalid'
+            ? t('save.invalid')
+            : t(`save.${status}`);
+    const icon = readOnly ? 'lock' : (STATUS_ICONS[status] ?? 'circle');
+    return (_jsxs("span", { className: "bd-save-status", "data-status": readOnly ? 'readOnly' : status, "data-compact": compact, role: "status", title: text, children: [_jsx(Icon, { name: icon }), _jsx("span", { className: compact ? 'bd-visually-hidden' : undefined, children: text }), !readOnly && (status === 'dirty' || status === 'error') && (_jsx(Button, { variant: "ghost", onClick: () => void controller.saveNow(), children: t('save.now') }))] }));
+}

package/dist/toolbar/theme.d.ts

@@ -0,0 +1,22 @@
+export type ThemePreference = 'light' | 'dark' | 'system';
+/** Where the author's choice is remembered (per browser, not per document). */
+export declare const THEME_STORAGE_KEY = "buildr:theme";
+export interface ThemeState {
+    /** What the switch shows: the author's choice, `system` until they make one. */
+    readonly preference: ThemePreference;
+    /** The value for the root's `data-theme`: `system` leaves the attribute off. */
+    readonly attribute: ThemePreference;
+    /** The host fixed the theme (`config.theme`); the switch is hidden and the host's value wins. */
+    readonly forced: boolean;
+    readonly setPreference: (next: ThemePreference) => void;
+}
+/**
+ * The editor's theme (docs/editor.md#toolbar-pb-083): the host's `config.theme` wins when it is
+ * `light` or `dark`; otherwise the author's remembered choice applies, and follows the system
+ * until they make one.
+ */
+export declare function useThemePreference(hostTheme: ThemePreference): ThemeState;
+export declare const ThemeProvider: import("react").Provider<ThemeState | undefined>;
+/** The theme state of the enclosing editor; `undefined` outside one (the switch is then left out). */
+export declare function useTheme(): ThemeState | undefined;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/toolbar/theme.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAEhD,MAAM,WAAW,UAAU;IACzB,gFAAgF;IAChF,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,gFAAgF;IAChF,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,iGAAiG;IACjG,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CACzD;AAsBD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,eAAe,GAAG,UAAU,CAgBzE;AAID,eAAO,MAAM,aAAa,kDAAwB,CAAC;AAEnD,sGAAsG;AACtG,wBAAgB,QAAQ,IAAI,UAAU,GAAG,SAAS,CAEjD"}

package/dist/toolbar/theme.js

@@ -0,0 +1,46 @@
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+/** Where the author's choice is remembered (per browser, not per document). */
+export const THEME_STORAGE_KEY = 'buildr:theme';
+const isPreference = (value) => value === 'light' || value === 'dark' || value === 'system';
+const read = () => {
+    try {
+        const saved = globalThis.localStorage.getItem(THEME_STORAGE_KEY);
+        return isPreference(saved) ? saved : 'system';
+    }
+    catch {
+        return 'system';
+    }
+};
+const write = (value) => {
+    try {
+        globalThis.localStorage.setItem(THEME_STORAGE_KEY, value);
+    }
+    catch {
+        // Private windows and blocked storage: the choice just is not remembered.
+    }
+};
+/**
+ * The editor's theme (docs/editor.md#toolbar-pb-083): the host's `config.theme` wins when it is
+ * `light` or `dark`; otherwise the author's remembered choice applies, and follows the system
+ * until they make one.
+ */
+export function useThemePreference(hostTheme) {
+    const forced = hostTheme !== 'system';
+    const [stored, setStored] = useState(read);
+    const setPreference = useCallback((next) => {
+        setStored(next);
+        write(next);
+    }, []);
+    return useMemo(() => ({
+        preference: forced ? hostTheme : stored,
+        attribute: forced ? hostTheme : stored,
+        forced,
+        setPreference,
+    }), [forced, hostTheme, stored, setPreference]);
+}
+const ThemeContext = createContext(undefined);
+export const ThemeProvider = ThemeContext.Provider;
+/** The theme state of the enclosing editor; `undefined` outside one (the switch is then left out). */
+export function useTheme() {
+    return useContext(ThemeContext);
+}

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

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

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

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

package/dist/toolbar/theme.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { THEME_STORAGE_KEY, useThemePreference } from './theme.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+describe('useThemePreference', () => {
+    let state;
+    const Probe = ({ host }) => {
+        state = useThemePreference(host);
+        return null;
+    };
+    const mount = async (host) => {
+        const root = createRoot(document.createElement('div'));
+        await act(async () => root.render(_jsx(Probe, { host: host })));
+        return root;
+    };
+    beforeEach(() => localStorage.clear());
+    afterEach(() => vi.restoreAllMocks());
+    it('follows the system until the author chooses, then remembers the choice', async () => {
+        const root = await mount('system');
+        expect(state).toMatchObject({ preference: 'system', attribute: 'system', forced: false });
+        await act(async () => state.setPreference('dark'));
+        expect(state.attribute).toBe('dark');
+        expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
+        await act(async () => root.unmount());
+        const again = await mount('system');
+        expect(state.preference).toBe('dark');
+        await act(async () => again.unmount());
+    });
+    it('lets an explicit host theme win over the remembered choice', async () => {
+        localStorage.setItem(THEME_STORAGE_KEY, 'dark');
+        const root = await mount('light');
+        expect(state).toMatchObject({ attribute: 'light', forced: true });
+        await act(async () => root.unmount());
+    });
+    it('ignores an unknown stored value and survives blocked storage', async () => {
+        localStorage.setItem(THEME_STORAGE_KEY, 'purple');
+        const root = await mount('system');
+        expect(state.preference).toBe('system');
+        vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+            throw new Error('blocked');
+        });
+        await act(async () => state.setPreference('light'));
+        expect(state.attribute).toBe('light');
+        await act(async () => root.unmount());
+    });
+});

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

@@ -0,0 +1,13 @@
+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. */
+export declare function ToolbarCentre(props: ToolbarCentreProps): import("react").JSX.Element;
+//# sourceMappingURL=toolbar-centre.d.ts.map

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

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

package/dist/toolbar/toolbar-centre.js

@@ -0,0 +1,7 @@
+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. */
+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 }))] }));
+}

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

@@ -0,0 +1,12 @@
+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;
+}
+/** 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;
+//# sourceMappingURL=toolbar-left.d.ts.map