@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/app/editor-app.js

@@ -0,0 +1,206 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CanvasFrame } from '../canvas-host/index.js';
+import { ClipboardProvider, useClipboardActions } from '../clipboard/index.js';
+import { MediaLibraryProvider } from '../dialogs/index.js';
+import { DragProvider, useDragEngine, useRegisterCanvas, useRegisterDragHost, } from '../dnd/index.js';
+import { MessagesProvider, useT } from '../messages/index.js';
+import { Breadcrumbs, countIssues, InsertPanel, Inspector, InspectorDataProvider, IssuesPanel, LayersPanel, StyleInspector, useIssues, } from '../panels/index.js';
+import { createPersistence, loadDocument, PersistenceProvider, useSaveAction, } from '../persistence/index.js';
+import { usePreview } from '../preview/index.js';
+import { ShortcutProvider, useForwardedKeys } from '../shortcuts/index.js';
+import { createEditorStore, createLocaleStore, EditorStoreProvider, LocaleProvider, useLocaleState, } from '../store/index.js';
+import { LocaleSwitcher, PublishDialog, SamplePicker, ThemeProvider, Toolbar, useThemePreference, } from '../toolbar/index.js';
+import { PortalContainerProvider, Tabs, ToastProvider, useToast } from '../ui/index.js';
+import { resolveConfig } from './config.js';
+import { EditorLayout } from './layout.js';
+import { ManifestProvider } from './manifest.js';
+import { SmallScreenNotice, useViewportTooNarrow } from './small-screen.js';
+import { StatusInfo } from './status-info.js';
+const SINGLE_LOCALE = {
+    locales: ['en'],
+    default: 'en',
+    fallback: true,
+    intl: { en: 'English' },
+};
+/**
+ * The whole editor (docs/editor.md#the-editor-app): loads the document of `documentRef` through
+ * the adapter, creates its store and autosave, and composes the toolbar, the panels, the canvas
+ * and the dialogs. `BuilderEditor` is the bare shell; hosts mount this one.
+ */
+export function EditorApp(props) {
+    const config = useMemo(() => resolveConfig(props.config), [props.config]);
+    const { adapter, documentRef, registry } = props;
+    // The host's `config.theme` wins; otherwise the author's remembered light / dark / system choice.
+    const theme = useThemePreference(config.theme);
+    // Menus, popovers and dialogs render inside the root, so they inherit its `data-theme`.
+    const [root, setRoot] = useState(null);
+    const [phase, setPhase] = useState({ kind: 'loading' });
+    // A window too narrow to edit in keeps the editor from opening (nothing is loaded); one that is
+    // already open stays open when the window shrinks, so no work is torn down.
+    const narrow = useViewportTooNarrow(config.minViewportWidth);
+    // `undefined`: not measured yet (server render, hydration) - show the loading state, load nothing.
+    const blocked = narrow === true && phase.kind !== 'ready';
+    const waiting = narrow === undefined && phase.kind !== 'ready';
+    const refKey = `${documentRef.collection}:${documentRef.id}`;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `documentRef` is identified by `refKey`
+    useEffect(() => {
+        if (blocked || waiting)
+            return;
+        let cancelled = false;
+        setPhase({ kind: 'loading' });
+        void (async () => {
+            try {
+                const [loaded, session] = await Promise.all([
+                    loadDocument(adapter, documentRef),
+                    adapter.getSession(documentRef),
+                ]);
+                if (cancelled)
+                    return;
+                const locales = props.locales ?? session.locales ?? SINGLE_LOCALE;
+                const store = createEditorStore({
+                    doc: loaded.document,
+                    registry,
+                    readOnly: loaded.readOnly === true,
+                    locales,
+                });
+                const persistence = createPersistence({
+                    store,
+                    adapter,
+                    ref: documentRef,
+                    revision: loaded.revision,
+                    debounceMs: config.autosave.debounceMs,
+                    maxWaitMs: config.autosave.maxWaitMs,
+                });
+                setPhase({
+                    kind: 'ready',
+                    loaded,
+                    store,
+                    persistence,
+                    canPublish: session.canPublish,
+                    localeStore: createLocaleStore(locales),
+                });
+            }
+            catch {
+                if (!cancelled)
+                    setPhase({ kind: 'error' });
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        adapter,
+        refKey,
+        registry,
+        props.locales,
+        blocked,
+        waiting,
+        config.autosave.debounceMs,
+        config.autosave.maxWaitMs,
+    ]);
+    return (_jsx(MessagesProvider, { locale: config.uiLocale, children: _jsx(ThemeProvider, { value: theme, children: _jsx(PortalContainerProvider, { container: root, children: _jsx("div", { ref: setRoot, className: "buildr-editor", lang: config.uiLocale, ...(theme.attribute !== 'system' ? { 'data-theme': theme.attribute } : {}), children: blocked ? (_jsx(SmallScreenNotice, {})) : phase.kind === 'ready' ? (_jsx(Session, { ...props, ready: phase })) : (_jsx(Status, { failed: !waiting && phase.kind === 'error' })) }) }) }) }));
+}
+function Status({ failed }) {
+    const t = useT();
+    return (_jsx("p", { className: "bd-app-status", role: failed ? 'alert' : 'status', children: t(failed ? 'app.error' : 'app.loading') }));
+}
+function Session(props) {
+    const { ready, adapter, manifest } = props;
+    const config = useMemo(() => resolveConfig(props.config), [props.config]);
+    return (_jsx(ToastProvider, { children: _jsx(EditorStoreProvider, { store: ready.store, children: _jsx(LocaleProvider, { store: ready.localeStore, children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(PersistenceProvider, { controller: ready.persistence, children: _jsx(MediaLibraryProvider, { media: adapter.media, children: _jsx(DragProvider, { children: _jsx(ClipboardProvider, { migrations: props.migrations, children: _jsx(Keys, { overrides: config.shortcuts, children: _jsx(Shell, { ...props }) }) }) }) }) }) }) }) }) }));
+}
+/** The shortcuts, with the actions the clipboard and the persistence provide. */
+function Keys(props) {
+    const clipboard = useClipboardActions();
+    const save = useSaveAction();
+    const actions = useMemo(() => ({ ...clipboard, save }), [clipboard, save]);
+    return (_jsx(ShortcutProvider, { overrides: props.overrides, actions: actions, children: props.children }));
+}
+function useDataContext(adapter, ref) {
+    const [schema, setSchema] = useState();
+    const [context, setContext] = useState();
+    const key = `${ref.collection}:${ref.id}`;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `ref` is identified by `key`
+    useEffect(() => {
+        let cancelled = false;
+        void adapter.getDataSchema(ref).then((next) => !cancelled && setSchema(next), () => undefined);
+        void adapter.getContext(ref).then((next) => !cancelled && setContext(next), () => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter, key]);
+    return { schema, context };
+}
+function Shell(props) {
+    const t = useT();
+    const { adapter, documentRef, canvasUrl, manifest, ready } = props;
+    const config = useMemo(() => resolveConfig(props.config), [props.config]);
+    const locales = useLocaleState((state) => state.config);
+    const locale = useLocaleState((state) => state.locale);
+    const wireLocales = useMemo(() => ({ ...locales, locales: [...locales.locales], intl: { ...locales.intl } }), [locales]);
+    const [host, setHost] = useState(null);
+    const [breakpoint, setBreakpoint] = useState(config.breakpoints[0]?.id ?? 'desktop');
+    const [zoom, setZoom] = useState('fit');
+    const [publishOpen, setPublishOpen] = useState(false);
+    const [diagnostics, setDiagnostics] = useState([]);
+    const area = useRef(null);
+    const engine = useDragEngine();
+    const forward = useForwardedKeys();
+    const data = useDataContext(adapter, documentRef);
+    const preview = usePreview({ adapter, docRef: documentRef });
+    const toast = useToast();
+    const previewError = preview.error;
+    const [title, setTitle] = useState(ready.loaded.title);
+    const canRename = adapter.rename !== undefined;
+    const changeTitle = useCallback(async (next) => {
+        try {
+            const saved = await adapter.rename?.(documentRef, next);
+            if (saved !== undefined)
+                setTitle(saved.title);
+        }
+        catch (error) {
+            toast.show({ id: 'rename', variant: 'error', message: t('toolbar.title.renameFailed') });
+            throw error;
+        }
+    }, [adapter, documentRef, toast, t]);
+    useEffect(() => {
+        if (previewError === '')
+            toast.dismiss('preview');
+        else
+            toast.show({ id: 'preview', variant: 'error', message: previewError });
+    }, [previewError, toast]);
+    const issueCounts = countIssues(useIssues(diagnostics));
+    useRegisterDragHost(host);
+    useRegisterCanvas(() => {
+        const frame = area.current?.querySelector('iframe');
+        if (frame === null || frame === undefined)
+            return undefined;
+        const box = frame.getBoundingClientRect();
+        return {
+            frame: { left: box.left, top: box.top, width: box.width, height: box.height },
+            scale: frame.offsetWidth > 0 ? box.width / frame.offsetWidth : 1,
+        };
+    });
+    useEffect(() => {
+        if (host === null)
+            return;
+        return host.state.subscribe((state) => {
+            setDiagnostics(state.diagnostics);
+            setZoom(state.zoom);
+        });
+    }, [host]);
+    const changeBreakpoint = useCallback((id) => {
+        setBreakpoint(id);
+        host?.setBreakpoint(id);
+    }, [host]);
+    return (_jsxs(_Fragment, { children: [_jsx(EditorLayout, { toolbar: _jsx(Toolbar, { title: title, onTitleChange: canRename ? changeTitle : undefined, status: ready.loaded.status, breakpoints: config.breakpoints, breakpoint: breakpoint, onBreakpointChange: changeBreakpoint, zoom: zoom, onZoomChange: (next) => host?.setZoom(next), cmsUrl: adapter.cmsUrl?.(documentRef), onPreview: preview.preview, onPublish: () => setPublishOpen(true), canPublish: ready.canPublish, pickers: _jsxs(_Fragment, { children: [_jsx(LocaleSwitcher, { onChange: (next) => host?.setLocale(next) }), _jsx(SamplePicker, { adapter: adapter, docRef: documentRef, onChange: (contextRef) => host?.setContextRef(contextRef ?? ready.loaded.contextRef ?? null) })] }) }), left: _jsx(Tabs, { label: t('editor.leftPanel'), items: [
+                        { value: 'insert', label: t('insert.title'), content: _jsx(InsertPanel, {}) },
+                        { value: 'layers', label: t('layers.title'), content: _jsx(LayersPanel, {}) },
+                    ] }), center: _jsxs("div", { className: "bd-app-canvas", ref: area, children: [_jsx(CanvasFrame, { canvasUrl: canvasUrl, manifestHash: manifest.hash, locales: wireLocales, locale: locale, breakpoints: config.breakpoints, breakpoint: breakpoint, contextRef: ready.loaded.contextRef ?? null, onHost: setHost, callbacks: {
+                                onKeyDown: (event) => {
+                                    forward({ key: event.key, mods: event.mods });
+                                },
+                                onDropTarget: (event) => engine.receiveTarget(event.target, event.reason),
+                            } }), _jsx(Breadcrumbs, {})] }), right: _jsx(InspectorDataProvider, { schema: data.schema, context: data.context, children: _jsx(Inspector, { locale: locale, defaultLocale: locales.default, renderStyle: (node) => (_jsx(StyleInspector, { node: node, ...(breakpoint === config.breakpoints[0]?.id ? {} : { breakpoint }) })) }) }), issues: _jsx(IssuesPanel, { canvasDiagnostics: diagnostics }), issueCounts: issueCounts, status: _jsx(StatusInfo, { host: host, breakpoints: config.breakpoints, breakpoint: breakpoint }) }), _jsx(PublishDialog, { open: publishOpen, onOpenChange: setPublishOpen, canvasDiagnostics: diagnostics }), preview.overlay] }));
+}

package/dist/app/editor-app.test.d.ts

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

package/dist/app/editor-app.test.d.ts.map

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

package/dist/app/editor-app.test.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, toManifest, } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { EditorApp } from './editor-app.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const item = {
+    type: 'buildr/item',
+    version: 1,
+    label: 'Item',
+    category: 'content',
+    props: {},
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+    slots: { default: {} },
+};
+const page = {
+    ...item,
+    type: 'buildr/page',
+    label: 'Page',
+    capabilities: { root: true },
+};
+const registry = createRegistryMeta({ components: [page, item] });
+const document = {
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['itemAAAAA1'] } },
+        itemAAAAA1: { id: 'itemAAAAA1', type: 'buildr/item', name: 'First' },
+    },
+    components: { 'buildr/page': 1, 'buildr/item': 1 },
+};
+const adapter = (overrides = {}) => ({
+    getSession: async () => ({ canEdit: true, canPublish: true }),
+    load: async () => ({
+        title: 'My page',
+        status: 'draft',
+        updatedAt: '2026-01-01T00:00:00.000Z',
+        revision: 1,
+        document,
+    }),
+    save: async (_ref, { baseRevision }) => ({ ok: true, revision: baseRevision + 1, updatedAt: '' }),
+    publish: async (_ref, { baseRevision }) => ({
+        ok: true,
+        revision: baseRevision,
+        updatedAt: '',
+    }),
+    getDataSchema: async () => ({ scopes: {}, entities: {} }),
+    getContext: async () => ({
+        scopes: {},
+        locale: 'en',
+        locales: { default: 'en', fallback: true, intl: { en: 'English' } },
+        timeZone: 'UTC',
+        mode: 'preview',
+    }),
+    media: { search: async () => ({ items: [] }) },
+    previewUrl: () => '/preview',
+    ...overrides,
+});
+describe('EditorApp', () => {
+    let container;
+    let root;
+    beforeEach(() => {
+        container = window.document.createElement('div');
+        window.document.body.append(container);
+        root = createRoot(container);
+        Element.prototype.scrollIntoView ??= () => { };
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        container.remove();
+    });
+    const props = (a) => ({
+        adapter: a,
+        manifest: toManifest(registry),
+        registry,
+        canvasUrl: 'http://localhost:9/canvas',
+        documentRef: { collection: 'pages', id: '1' },
+    });
+    const show = async (a) => {
+        await act(async () => root.render(_jsx(EditorApp, { ...props(a) })));
+        // The load and the data requests settle after the first render.
+        await act(async () => undefined);
+    };
+    it('says it is loading, then shows the toolbar, the panels and the canvas', async () => {
+        let release = () => undefined;
+        const gate = new Promise((resolve) => {
+            release = resolve;
+        });
+        const a = adapter({
+            getSession: async () => {
+                await gate;
+                return { canEdit: true, canPublish: true };
+            },
+        });
+        await act(async () => root.render(_jsx(EditorApp, { ...props(a) })));
+        expect(container.querySelector('[role=status]')?.textContent).toContain('Loading');
+        await act(async () => {
+            release();
+        });
+        await act(async () => undefined);
+        expect(container.querySelector('h1')?.textContent).toBe('My page');
+        expect(container.querySelector('iframe')).not.toBeNull();
+        expect(container.textContent).toContain('Insert');
+        expect(container.textContent).toContain('Publish');
+    });
+    it('shows an error when the document cannot be opened', async () => {
+        await show(adapter({
+            load: async () => {
+                throw new Error('nope');
+            },
+        }));
+        expect(container.querySelector('[role=alert]')?.textContent).toContain('could not be opened');
+    });
+    it('offers the Layers tab and does not save an untouched document', async () => {
+        vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
+        try {
+            const save = vi.fn(async (_ref, { baseRevision }) => ({
+                ok: true,
+                revision: baseRevision + 1,
+                updatedAt: '',
+            }));
+            await show(adapter({ save: save }));
+            const layers = [...container.querySelectorAll('[role=tab]')].find((tab) => tab.textContent === 'Layers');
+            expect(layers).toBeDefined();
+            expect(save).not.toHaveBeenCalled();
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+});

package/dist/app/layout.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+export interface IssueCounts {
+    readonly error: number;
+    readonly warning: number;
+}
+export interface EditorLayoutProps {
+    readonly toolbar?: ReactNode;
+    /** The insert and layers panels. */
+    readonly left?: ReactNode;
+    /** The canvas. */
+    readonly center?: ReactNode;
+    /** The inspector. */
+    readonly right?: ReactNode;
+    /** The issues panel's content. */
+    readonly issues?: ReactNode;
+    /** Error and warning counts shown on the status bar's issues toggle. */
+    readonly issueCounts?: IssueCounts | undefined;
+    /** Read-only facts on the right of the status bar (breakpoint, zoom, save state). */
+    readonly status?: ReactNode;
+}
+/** Below this editor width the side panels become overlays (the editor may be embedded: measured, not a media query). */
+export declare const NARROW_BELOW = 1100;
+/** The canvas never gets narrower than this while the panels sit beside it. */
+export declare const CANVAS_MIN = 480;
+/**
+ * The shell's three columns and the status bar: toolbar on top, the left panel, the canvas and
+ * the inspector between two splitters, the status bar with the collapsible issues drawer at the
+ * bottom. Each region is a landmark with a translated name; the panels themselves are slots the
+ * later tasks fill. Below `NARROW_BELOW` the side panels are overlays the toolbar toggles.
+ */
+export declare function EditorLayout({ toolbar, left, center, right, issues, issueCounts, status, }: EditorLayoutProps): import("react").JSX.Element;
+//# sourceMappingURL=layout.d.ts.map

package/dist/app/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/app/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,oCAAoC;IACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB;IAClB,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,qBAAqB;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,wEAAwE;IACxE,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/C,qFAAqF;IACrF,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B;AAmCD,yHAAyH;AACzH,eAAO,MAAM,YAAY,OAAO,CAAC;AACjC,+EAA+E;AAC/E,eAAO,MAAM,UAAU,MAAM,CAAC;AAsB9B;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAM,EACN,WAAW,EACX,MAAM,GACP,EAAE,iBAAiB,+BAiInB"}

package/dist/app/layout.js

@@ -0,0 +1,82 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { useT } from '../messages/index.js';
+import { Button, Icon, Panel } from '../ui/index.js';
+import { ShellPanelsContext } from './shell-panels.js';
+import { useResizable } from './use-resizable.js';
+/**
+ * A vertical separator that can be dragged or moved with the keyboard (the WAI-ARIA window
+ * splitter); double-click puts it back. It draws a 1px line and has a wider invisible hit area.
+ */
+function Splitter({ resizable, min, max, label, controls }) {
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": label, "aria-controls": controls, "aria-valuenow": resizable.size, "aria-valuemin": min, "aria-valuemax": max, tabIndex: 0, className: "bd-splitter", "data-dragging": resizable.dragging, ...resizable.bind }));
+}
+const LEFT = { initial: 280, min: 200, max: 480 };
+const RIGHT = { initial: 320, min: 240, max: 520 };
+/** Below this editor width the side panels become overlays (the editor may be embedded: measured, not a media query). */
+export const NARROW_BELOW = 1100;
+/** The canvas never gets narrower than this while the panels sit beside it. */
+export const CANVAS_MIN = 480;
+const SPLITTERS = 2;
+/** The editor's own width, watched with a `ResizeObserver`; 0 while unknown (jsdom). */
+function useEditorWidth(ref) {
+    const [width, setWidth] = useState(0);
+    useEffect(() => {
+        const element = ref.current;
+        const root = element?.closest('.buildr-editor') ?? element?.parentElement;
+        if (root === null || root === undefined)
+            return;
+        setWidth(root.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const box = entries[0]?.contentRect;
+            if (box !== undefined)
+                setWidth(box.width);
+        });
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+/**
+ * The shell's three columns and the status bar: toolbar on top, the left panel, the canvas and
+ * the inspector between two splitters, the status bar with the collapsible issues drawer at the
+ * bottom. Each region is a landmark with a translated name; the panels themselves are slots the
+ * later tasks fill. Below `NARROW_BELOW` the side panels are overlays the toolbar toggles.
+ */
+export function EditorLayout({ toolbar, left, center, right, issues, issueCounts, status, }) {
+    const t = useT();
+    const ids = { left: useId(), right: useId(), issues: useId() };
+    const leftSize = useResizable({ ...LEFT, direction: 1, storageKey: 'buildr:editor:left-width' });
+    const rightSize = useResizable({
+        ...RIGHT,
+        direction: -1,
+        storageKey: 'buildr:editor:right-width',
+    });
+    const [issuesOpen, setIssuesOpen] = useState(false);
+    const [overlay, setOverlay] = useState({ left: false, right: false });
+    const toolbarRef = useRef(null);
+    const width = useEditorWidth(toolbarRef);
+    const narrow = width > 0 && width < NARROW_BELOW;
+    const toggle = useCallback((side) => setOverlay((current) => ({
+        left: side === 'left' && !current.left,
+        right: side === 'right' && !current.right,
+    })), []);
+    const panels = useMemo(() => ({ narrow, open: overlay, toggle }), [narrow, overlay, toggle]);
+    // Beside the canvas, the panels give way so it keeps CANVAS_MIN (never below their own minimum).
+    const room = width > 0 && !narrow ? width - CANVAS_MIN - SPLITTERS : Number.POSITIVE_INFINITY;
+    const leftShown = Math.max(LEFT.min, Math.min(leftSize.size, room - RIGHT.min));
+    const rightShown = Math.max(RIGHT.min, Math.min(rightSize.size, room - leftShown));
+    const style = {
+        '--bd-left': `${leftShown}px`,
+        '--bd-right': `${rightShown}px`,
+    };
+    const closeOnEscape = (side) => (event) => {
+        if (narrow && event.key === 'Escape' && overlay[side]) {
+            event.stopPropagation();
+            setOverlay((current) => ({ ...current, [side]: false }));
+        }
+    };
+    return (_jsxs(ShellPanelsContext.Provider, { value: panels, children: [_jsx("div", { className: "bd-toolbar", role: "toolbar", "aria-label": t('editor.toolbar'), ref: toolbarRef, children: toolbar }), _jsxs("div", { className: "bd-body", style: style, "data-narrow": narrow, children: [_jsx(Panel, { as: "aside", id: ids.left, "aria-label": t('editor.leftPanel'), hidden: narrow && !overlay.left, "data-side": "left", onKeyDown: closeOnEscape('left'), children: left }), _jsx(Splitter, { resizable: leftSize, min: LEFT.min, max: LEFT.max, label: t('editor.resize.left'), controls: ids.left }), _jsx("main", { className: "bd-canvas", "aria-label": t('editor.canvas'), children: center }), _jsx(Splitter, { resizable: rightSize, min: RIGHT.min, max: RIGHT.max, label: t('editor.resize.right'), controls: ids.right }), _jsx(Panel, { as: "aside", id: ids.right, "aria-label": t('editor.inspector'), hidden: narrow && !overlay.right, "data-side": "right", onKeyDown: closeOnEscape('right'), children: right })] }), _jsxs("section", { className: "bd-issues", "data-open": issuesOpen, "aria-label": t('editor.issues'), children: [_jsxs("div", { className: "bd-issues-bar", children: [_jsxs(Button, { variant: "ghost", className: "bd-status-toggle", "aria-expanded": issuesOpen, "aria-controls": ids.issues, onClick: () => setIssuesOpen((open) => !open), children: [issueCounts !== undefined && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "bd-status-count", "data-severity": "error", title: t('editor.status.errors'), children: [_jsx(Icon, { name: "circle-alert" }), issueCounts.error] }), _jsxs("span", { className: "bd-status-count", "data-severity": "warning", title: t('editor.status.warnings'), children: [_jsx(Icon, { name: "triangle-alert" }), issueCounts.warning] })] })), issuesOpen ? t('editor.issues.hide') : t('editor.issues.show')] }), _jsx("span", { className: "bd-toolbar-spacer" }), status] }), _jsx("div", { id: ids.issues, hidden: !issuesOpen, children: issues })] })] }));
+}

package/dist/app/manifest.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentMeta, RegistryManifest } from '@next-buildr/core';
+import { type ReactNode } from 'react';
+/** What the palette, the layers and the inspector know about the components (`toManifest`). */
+export declare function ManifestProvider(props: {
+    readonly manifest: RegistryManifest;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+/** The manifest, or `undefined` outside a `ManifestProvider` (the panels then fall back to the component's type). */
+export declare function useManifest(): RegistryManifest | undefined;
+/** One component's metadata, or `undefined` when the manifest does not have it. */
+export declare function componentMeta(manifest: RegistryManifest | undefined, type: string): ComponentMeta | undefined;
+//# sourceMappingURL=manifest.d.ts.map

package/dist/app/manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../../src/app/manifest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAIlE,+FAA+F;AAC/F,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,+BAIA;AAED,qHAAqH;AACrH,wBAAgB,WAAW,IAAI,gBAAgB,GAAG,SAAS,CAE1D;AAED,mFAAmF;AACnF,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,gBAAgB,GAAG,SAAS,EACtC,IAAI,EAAE,MAAM,GACX,aAAa,GAAG,SAAS,CAI3B"}

package/dist/app/manifest.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const ManifestContext = createContext(undefined);
+/** What the palette, the layers and the inspector know about the components (`toManifest`). */
+export function ManifestProvider(props) {
+    return (_jsx(ManifestContext.Provider, { value: props.manifest, children: props.children }));
+}
+/** The manifest, or `undefined` outside a `ManifestProvider` (the panels then fall back to the component's type). */
+export function useManifest() {
+    return useContext(ManifestContext);
+}
+/** One component's metadata, or `undefined` when the manifest does not have it. */
+export function componentMeta(manifest, type) {
+    return manifest !== undefined && Object.hasOwn(manifest.components, type)
+        ? manifest.components[type]
+        : undefined;
+}

package/dist/app/shell-panels.d.ts

@@ -0,0 +1,15 @@
+export type PanelSide = 'left' | 'right';
+/**
+ * The side panels' overlay mode (below 1100px the layout hides them and the toolbar's toggle
+ * buttons open one at a time). Provided by `EditorLayout`; without it (a toolbar outside the
+ * layout) there is nothing to toggle.
+ */
+export interface ShellPanels {
+    /** The editor is narrower than the overlay breakpoint. */
+    readonly narrow: boolean;
+    readonly open: Readonly<Record<PanelSide, boolean>>;
+    toggle(side: PanelSide): void;
+}
+export declare const ShellPanelsContext: import("react").Context<ShellPanels | undefined>;
+export declare function useShellPanels(): ShellPanels | undefined;
+//# sourceMappingURL=shell-panels.d.ts.map

package/dist/app/shell-panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-panels.d.ts","sourceRoot":"","sources":["../../src/app/shell-panels.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,0DAA0D;IAC1D,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,kBAAkB,kDAAoD,CAAC;AAEpF,wBAAgB,cAAc,IAAI,WAAW,GAAG,SAAS,CAExD"}

package/dist/app/shell-panels.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const ShellPanelsContext = createContext(undefined);
+export function useShellPanels() {
+    return useContext(ShellPanelsContext);
+}

package/dist/app/small-screen.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether the window is narrower than `minWidth` CSS pixels, kept current as it is resized or
+ * rotated. `0` (or less) never is; without `matchMedia` (a test) the window is taken as wide enough.
+ *
+ * `undefined` means "not known yet": the server has no window, and a hydrating client must render
+ * what the server rendered, so both start unknown and the client resolves it right after hydration
+ * (a plain client render resolves it at once). Callers render a neutral state meanwhile.
+ */
+export declare function useViewportTooNarrow(minWidth: number): boolean | undefined;
+/** Shown instead of the editor in a window too small to edit in (docs/editor.md#small-screens). */
+export declare function SmallScreenNotice(): import("react").JSX.Element;
+//# sourceMappingURL=small-screen.d.ts.map

package/dist/app/small-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"small-screen.d.ts","sourceRoot":"","sources":["../../src/app/small-screen.tsx"],"names":[],"mappings":"AAOA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAmB1E;AAED,mGAAmG;AACnG,wBAAgB,iBAAiB,gCAiBhC"}

package/dist/app/small-screen.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useSyncExternalStore } from 'react';
+import { useT } from '../messages/index.js';
+import { BrandMark } from '../toolbar/brand.js';
+import { Icon } from '../ui/index.js';
+const unknownViewport = () => undefined;
+/**
+ * Whether the window is narrower than `minWidth` CSS pixels, kept current as it is resized or
+ * rotated. `0` (or less) never is; without `matchMedia` (a test) the window is taken as wide enough.
+ *
+ * `undefined` means "not known yet": the server has no window, and a hydrating client must render
+ * what the server rendered, so both start unknown and the client resolves it right after hydration
+ * (a plain client render resolves it at once). Callers render a neutral state meanwhile.
+ */
+export function useViewportTooNarrow(minWidth) {
+    const query = `(max-width: ${Math.max(minWidth, 1) - 1}px)`;
+    const subscribe = useCallback((onChange) => {
+        if (minWidth <= 0 || typeof window.matchMedia !== 'function')
+            return () => undefined;
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query, minWidth]);
+    const getSnapshot = useCallback(() => minWidth > 0 && typeof window.matchMedia === 'function'
+        ? window.matchMedia(query).matches
+        : false, [query, minWidth]);
+    return useSyncExternalStore(subscribe, getSnapshot, unknownViewport);
+}
+/** Shown instead of the editor in a window too small to edit in (docs/editor.md#small-screens). */
+export function SmallScreenNotice() {
+    const t = useT();
+    return (_jsx("main", { className: "bd-small-screen", role: "alert", "aria-labelledby": "bd-small-screen-title", children: _jsxs("div", { className: "bd-small-screen-card", children: [_jsx(BrandMark, { size: 32 }), _jsx("span", { className: "bd-small-screen-icon", children: _jsx(Icon, { name: "monitor", size: "md" }) }), _jsx("h1", { id: "bd-small-screen-title", className: "bd-small-screen-title", children: t('app.smallScreen.title') }), _jsx("p", { className: "bd-small-screen-body", children: t('app.smallScreen.body') }), _jsx("p", { className: "bd-small-screen-hint", children: t('app.smallScreen.hint') })] }) }));
+}

package/dist/app/small-screen.test.d.ts

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

package/dist/app/small-screen.test.d.ts.map

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