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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { act } from 'react';
 import { createRoot } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -11,6 +11,8 @@ import { PanelToggle } from '../toolbar/panel-toggles.js';
 import { BuilderEditor } from './builder-editor.js';
 import { resolveConfig } from './config.js';
 import { EditorLayout } from './layout.js';
+import { useShellPanels } from './shell-panels.js';
+import { useStageSlots } from './stage-slots.js';
 expect.extend(matchers);
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 const manifest = {
@@ -51,7 +53,8 @@ describe('BuilderEditor shell', () => {
         expect($('main').getAttribute('aria-label')).toBe(en['editor.canvas']);
         const asides = [...container.querySelectorAll('aside')].map((el) => el.getAttribute('aria-label'));
         expect(asides).toEqual([en['editor.leftPanel'], en['editor.inspector']]);
-        expect($('section').getAttribute('aria-label')).toBe(en['editor.issues']);
+        expect($('main section').getAttribute('aria-label')).toBe(en['issues.drawer']);
+        expect($('.bd-status').getAttribute('aria-label')).toBe(en['statusBar.label']);
     });
     it('speaks the configured interface language, and English for one it does not know', async () => {
         await show(props({ config: { uiLocale: 'pl' } }));
@@ -62,6 +65,9 @@ describe('BuilderEditor shell', () => {
     });
     it('has a Polish translation for every English string', () => {
         expect(Object.keys(pl).sort()).toEqual(Object.keys(en).sort());
+        for (const value of Object.values(pl)) {
+            expect(value).not.toMatch(/\p{L}\?+\p{L}|\?+\p{L}|\p{L}\?{2,}/u);
+        }
         for (const k of Object.keys(en))
             expect(pl[k]).not.toBe('');
         expect(UI_LOCALES).toEqual(['en', 'pl']);
@@ -103,14 +109,18 @@ describe('BuilderEditor shell', () => {
         await pointer('pointerup', 900);
         expect(left?.getAttribute('data-dragging')).toBe('false');
     });
-    it('shows and hides the issues panel', async () => {
+    it('shows and hides the issues drawer, which sits inside the stage', async () => {
         await show(props());
-        const toggle = container.querySelector('.bd-issues button');
-        expect(toggle?.textContent).toBe(en['editor.issues.show']);
+        const toggle = container.querySelector('.bd-status button[aria-expanded]');
         expect(toggle?.getAttribute('aria-expanded')).toBe('false');
+        expect($('main .bd-issues').getAttribute('data-open')).toBe('false');
+        expect(container.querySelector('.bd-status .bd-issues')).toBeNull();
+        await act(async () => toggle?.click());
+        expect(toggle?.getAttribute('aria-expanded')).toBe('true');
+        expect($('main .bd-issues').getAttribute('data-open')).toBe('true');
+        expect(toggle?.getAttribute('aria-controls')).toBe($('main .bd-issues').id);
         await act(async () => toggle?.click());
-        expect(toggle?.textContent).toBe(en['editor.issues.hide']);
-        expect($('.bd-issues').getAttribute('data-open')).toBe('true');
+        expect($('main .bd-issues').getAttribute('data-open')).toBe('false');
     });
     it('resets a panel on double-click and remembers the widths', async () => {
         await show(props());
@@ -142,21 +152,143 @@ describe('BuilderEditor shell', () => {
         getItem.mockRestore();
         setItem.mockRestore();
     });
-    it('shows the issue counts on the status bar toggle', async () => {
-        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorLayout, { issueCounts: { error: 2, warning: 3 }, status: _jsx("span", { children: "info" }) }) })));
-        const toggle = container.querySelector('.bd-issues button');
-        expect(toggle?.querySelector('[data-severity=error]')?.textContent).toBe('2');
-        expect(toggle?.querySelector('[data-severity=warning]')?.textContent).toBe('3');
-        expect(toggle?.textContent).toContain(en['editor.issues.show']);
-        expect($('.bd-issues-bar').textContent).toContain('info');
-        await act(async () => toggle?.click());
-        expect($('.bd-issues').getAttribute('data-open')).toBe('true');
+    const renderLayout = (locale, node) => act(async () => root.render(_jsx(MessagesProvider, { locale: locale, children: node })));
+    it('words the issue counts with plural forms, in English', async () => {
+        await renderLayout('en', _jsx(EditorLayout, { issueCounts: { error: 1, warning: 3 }, status: _jsx("span", { children: "info" }) }));
+        const toggle = $('.bd-status button[aria-expanded]');
+        expect(toggle.querySelector('[data-severity=error]')?.textContent).toBe('1 error');
+        expect(toggle.querySelector('[data-severity=warning]')?.textContent).toBe('3 warnings');
+        expect($('.bd-status').textContent).toContain('info');
+        await renderLayout('en', _jsx(EditorLayout, { issueCounts: { error: 0, warning: 0 } }));
+        expect($('.bd-status button[aria-expanded]').textContent).toBe(en['statusBar.noIssues']);
+    });
+    it('counts notes in the status bar and reports no issues only when all three are zero', async () => {
+        await renderLayout('en', _jsx(EditorLayout, { issueCounts: { error: 0, warning: 0, info: 2 } }));
+        const toggle = $('.bd-status button[aria-expanded]');
+        expect(toggle.querySelector('[data-severity=info]')?.textContent).toBe('2 notes');
+        expect(toggle.textContent).not.toContain(en['statusBar.noIssues']);
+        await renderLayout('en', _jsx(EditorLayout, { issueCounts: { error: 0, warning: 0, info: 0 } }));
+        expect($('.bd-status button[aria-expanded]').textContent).toBe(en['statusBar.noIssues']);
+        await renderLayout('pl', _jsx(EditorLayout, { issueCounts: { error: 0, warning: 0, info: 5 } }));
+        expect($('.bd-status [data-severity=info]').textContent).toBe('5 uwag');
+    });
+    it('words the issue counts with plural forms, in Polish', async () => {
+        const text = async (warning) => {
+            await renderLayout('pl', _jsx(EditorLayout, { issueCounts: { error: 0, warning } }));
+            return $('.bd-status button[aria-expanded]').textContent;
+        };
+        expect(await text(1)).toBe('1 ostrzeżenie');
+        expect(await text(2)).toBe('2 ostrzeżenia');
+        expect(await text(5)).toBe('5 ostrzeżeń');
+    });
+    it('shows the selection path on the left of the status bar', async () => {
+        await renderLayout('en', _jsx(EditorLayout, { breadcrumbs: _jsx("nav", { children: "path" }) }));
+        expect($('.bd-status .bd-status-crumbs nav').textContent).toBe('path');
+    });
+    describe('collapsing the panels', () => {
+        let panels;
+        const Probe = () => {
+            panels = useShellPanels();
+            return null;
+        };
+        const layout = () => (_jsx(EditorLayout, { toolbar: _jsx(Probe, {}), left: _jsx("p", { id: "left-content", children: "left" }), right: _jsx("p", { id: "right-content", children: "right" }) }));
+        const KEY = 'buildr:editor:collapsed';
+        it('shrinks a collapsed panel to a rail, keeps its content mounted and remembers it', async () => {
+            await renderLayout('en', layout());
+            expect($('.bd-body').style.getPropertyValue('--bd-left')).toBe('280px');
+            expect(container.querySelector('.bd-rail')).toBeNull();
+            expect(panels?.leftTab).toBe('blocks');
+            await act(async () => panels?.toggleCollapsed?.('left'));
+            expect($('.bd-body').style.getPropertyValue('--bd-left')).toBe('var(--bd-rail)');
+            expect($('aside[data-side=left]').getAttribute('data-collapsed')).toBe('true');
+            expect($('aside[data-side=left] .bd-panel-content').hidden).toBe(true);
+            expect(container.querySelector('#left-content')).not.toBeNull();
+            expect(container.querySelectorAll('aside[data-side=left] .bd-rail button')).toHaveLength(2);
+            expect($('.bd-body').style.getPropertyValue('--bd-right')).toBe('320px');
+            expect(JSON.parse(window.localStorage.getItem(KEY) ?? '')).toEqual({
+                left: true,
+                right: false,
+            });
+            await act(async () => panels?.collapseAll?.());
+            expect(container.querySelectorAll('.bd-rail')).toHaveLength(2);
+            await act(async () => panels?.expandAll?.());
+            expect(container.querySelector('.bd-rail')).toBeNull();
+        });
+        it('opens a panel from its rail, on the chosen tab', async () => {
+            await renderLayout('en', layout());
+            await act(async () => panels?.collapseAll?.());
+            const structure = container.querySelectorAll('aside[data-side=left] .bd-rail button')[1];
+            expect(structure?.getAttribute('aria-label')).toBe(en['leftPanel.tab.structure']);
+            await act(async () => structure?.click());
+            expect(panels?.leftTab).toBe('structure');
+            expect(panels?.collapsed).toEqual({ left: false, right: true });
+            await act(async () => $('aside[data-side=right] .bd-rail button').click());
+            expect(panels?.collapsed).toEqual({ left: false, right: false });
+        });
+        it('moves focus into an expanded panel and back to the rail on collapse', async () => {
+            await renderLayout('en', _jsx(EditorLayout, { toolbar: _jsx(Probe, {}), left: _jsx("button", { type: "button", id: "left-first", children: "left" }), right: _jsx("button", { type: "button", id: "right-first", children: "right" }) }));
+            expect(document.activeElement).toBe(document.body);
+            await act(async () => panels?.collapseAll?.());
+            const rail = $('aside[data-side=right] .bd-rail button');
+            rail.focus();
+            await act(async () => rail.click());
+            expect(document.activeElement).toBe($('#right-first'));
+            await act(async () => panels?.toggleCollapsed?.('right'));
+            expect(document.activeElement).toBe($('aside[data-side=right] .bd-rail button'));
+        });
+        it('does not steal focus when restoring a stored collapse', async () => {
+            window.localStorage.setItem(KEY, JSON.stringify({ left: true, right: false }));
+            await renderLayout('en', layout());
+            expect(document.activeElement).toBe(document.body);
+        });
+        it('restores a stored collapse and ignores corrupt data', async () => {
+            window.localStorage.setItem(KEY, JSON.stringify({ left: true, right: 'yes' }));
+            await renderLayout('en', layout());
+            expect(panels?.collapsed).toEqual({ left: true, right: false });
+            for (const bad of ['{not json', 'null', '42', '"left"', '[true,true]']) {
+                window.localStorage.setItem(KEY, bad);
+                await act(async () => root.unmount());
+                root = createRoot(container);
+                await renderLayout('en', layout());
+                expect(panels?.collapsed).toEqual({ left: false, right: false });
+            }
+        });
+        it('works while the storage throws', async () => {
+            const getItem = vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+                throw new Error('denied');
+            });
+            const setItem = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+                throw new Error('denied');
+            });
+            await renderLayout('en', layout());
+            await act(async () => panels?.toggleCollapsed?.('right'));
+            expect(panels?.collapsed).toEqual({ left: false, right: true });
+            getItem.mockRestore();
+            setItem.mockRestore();
+        });
+        it('provides the stage and the drawer state to the stage slots', async () => {
+            let slots;
+            const Slots = () => {
+                slots = useStageSlots();
+                return null;
+            };
+            await renderLayout('en', _jsx(EditorLayout, { center: _jsx(Slots, {}) }));
+            expect(slots?.stage).toBe($('main'));
+            expect(slots?.issuesOpen).toBe(false);
+            await act(async () => slots?.setIssuesOpen(true));
+            expect($('main .bd-issues').getAttribute('data-open')).toBe('true');
+        });
     });
     it('turns the panels into toolbar-toggled overlays when the editor is narrow', async () => {
         let notify;
+        const callbacks = [];
         class FakeObserver {
             constructor(callback) {
-                notify = callback;
+                callbacks.push(callback);
+                notify = (entries) => {
+                    for (const each of callbacks)
+                        each(entries);
+                };
             }
             observe() { }
             disconnect() { }
@@ -165,7 +297,6 @@ describe('BuilderEditor shell', () => {
         const width = vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1300);
         await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx("div", { className: "buildr-editor", children: _jsx(EditorLayout, { toolbar: _jsx(PanelToggle, { side: "left" }) }) }) })));
         expect($('.bd-body').getAttribute('data-narrow')).toBe('false');
-        expect(container.querySelector('.bd-toolbar button')).toBeNull();
         await act(async () => notify?.([{ contentRect: { width: 900 } }]));
         expect($('.bd-body').getAttribute('data-narrow')).toBe('true');
         const left = $('aside[data-side=left]');
@@ -182,6 +313,78 @@ describe('BuilderEditor shell', () => {
         width.mockRestore();
         vi.unstubAllGlobals();
     });
+    it('shows a scrim and closable sheets, opens one at a time and flags a phone-wide editor', async () => {
+        let notify;
+        const callbacks = [];
+        class FakeObserver {
+            constructor(callback) {
+                callbacks.push(callback);
+                notify = (entries) => {
+                    for (const each of callbacks)
+                        each(entries);
+                };
+            }
+            observe() { }
+            disconnect() { }
+        }
+        vi.stubGlobal('ResizeObserver', FakeObserver);
+        const width = vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(390);
+        const Toggles = () => (_jsxs(_Fragment, { children: [_jsx(PanelToggle, { side: "left" }), _jsx(PanelToggle, { side: "right" })] }));
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx("div", { className: "buildr-editor", children: _jsx(EditorLayout, { toolbar: _jsx(Toggles, {}), left: _jsx("p", { children: "left" }), right: _jsx("p", { children: "right" }) }) }) })));
+        // The page can never grow wider than the window: nothing in the shell has a width of its own.
+        expect(document.documentElement.scrollWidth).toBeLessThanOrEqual(window.innerWidth);
+        expect($('.bd-body').getAttribute('data-compact')).toBe('true');
+        expect($('.bd-toolbar').getAttribute('data-compact')).toBe('true');
+        expect($('.bd-status').getAttribute('data-compact')).toBe('true');
+        expect($('.bd-scrim')).toBeNull();
+        const [left, right] = [...document.querySelectorAll('.bd-toolbar button')];
+        left?.focus();
+        await act(async () => left?.click());
+        expect($('aside[data-side=left]').hidden).toBe(false);
+        expect($('.bd-scrim')).not.toBeNull();
+        // The open sheet is a non-modal dialog with a name; focus is inside it, the canvas and status bar are inert and the toolbar stays live.
+        const sheet = $('aside[data-side=left]');
+        expect(sheet.getAttribute('role')).toBe('dialog');
+        expect(sheet.hasAttribute('aria-modal')).toBe(false);
+        expect(sheet.getAttribute('aria-label')).toBe(en['editor.leftPanel']);
+        expect(sheet.contains(document.activeElement)).toBe(true);
+        expect($('.bd-toolbar').hasAttribute('inert')).toBe(false);
+        expect($('.bd-canvas').hasAttribute('inert')).toBe(true);
+        expect($('.bd-status').hasAttribute('inert')).toBe(true);
+        expect($('aside[data-side=right]').getAttribute('role')).toBeNull();
+        // Escape closes it, focus goes back to the button that opened it.
+        await act(async () => {
+            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        expect($('aside[data-side=left]').hidden).toBe(true);
+        expect($('.bd-toolbar').hasAttribute('inert')).toBe(false);
+        expect(document.activeElement).toBe(left);
+        await act(async () => left?.click());
+        // Opening the other one closes it.
+        await act(async () => right?.click());
+        expect($('aside[data-side=left]').hidden).toBe(true);
+        expect($('aside[data-side=right]').hidden).toBe(false);
+        // The inspector sheet has its own close button.
+        const close = $('aside[data-side=right] .bd-sheet-close');
+        expect(close.getAttribute('aria-label')).toBe(en['ui.close']);
+        await act(async () => close.click());
+        expect($('aside[data-side=right]').hidden).toBe(true);
+        // The scrim and Escape (from anywhere) close a sheet too.
+        await act(async () => left?.click());
+        await act(async () => $('.bd-scrim').click());
+        expect($('aside[data-side=left]').hidden).toBe(true);
+        await act(async () => right?.click());
+        await act(async () => {
+            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        expect($('aside[data-side=right]').hidden).toBe(true);
+        // A tablet is narrow but not compact.
+        await act(async () => notify?.([{ contentRect: { width: 1000 } }]));
+        expect($('.bd-body').getAttribute('data-narrow')).toBe('true');
+        expect($('.bd-body').getAttribute('data-compact')).toBe('false');
+        width.mockRestore();
+        vi.unstubAllGlobals();
+    });
     it('has no accessibility violations', async () => {
         await show(props());
         expect(await axe(container)).toHaveNoViolations();
@@ -194,6 +397,8 @@ describe('resolveConfig', () => {
         const config = resolveConfig();
         expect(config.breakpoints.map((b) => b.id)).toEqual(['desktop', 'tablet', 'mobile']);
         expect(config.autosave).toEqual({ debounceMs: 2000, maxWaitMs: 20_000 });
+        // Only a window too narrow for the toolbar and the canvas is turned away.
+        expect(config.minViewportWidth).toBe(320);
         expect(resolveConfig({ autosave: { debounceMs: 1, maxWaitMs: 2 }, uiLocale: 'pl' })).toMatchObject({ autosave: { debounceMs: 1, maxWaitMs: 2 }, uiLocale: 'pl' });
     });
 });

package/dist/app/config.d.ts

@@ -1,5 +1,6 @@
-import type { RegistryManifest } from '@next-buildr/core';
+import type { HostCapabilities, RegistryManifest } from '@next-buildr/core';
 import type { DocumentAdapter, DocumentRef } from '../persistence/types.ts';
+import type { EditorStoreOptions } from '../store/types.ts';
 export type { DocumentRef };
 /** One canvas width the toolbar offers (PB-083). */
 export interface BreakpointConfig {
@@ -23,9 +24,16 @@ export interface EditorConfig {
     readonly theme?: 'light' | 'dark' | 'system';
     /**
      * The narrowest window (in CSS pixels) the editor opens in; below it a notice asks the author to
-     * use a computer. Defaults to 1024 (phones and tablets held upright); `0` turns the check off.
+     * use a wider screen. Defaults to 320 (the narrowest phone; the panels are sheets over the
+     * canvas below 1100px); `0` turns the check off.
      */
     readonly minViewportWidth?: number;
+    /**
+     * What the host permits beyond the safe defaults (ADR-026). `authorCode: true` shows the Advanced
+     * fields (custom CSS, classes, attributes) and the Text HTML mode and lets their commands run;
+     * absent or anything but exactly `true` leaves them off. The `capabilities` prop of the editor wins.
+     */
+    readonly capabilities?: HostCapabilities;
 }
 export interface ResolvedEditorConfig {
     readonly breakpoints: readonly BreakpointConfig[];
@@ -37,9 +45,10 @@ export interface ResolvedEditorConfig {
     readonly uiLocale: string;
     readonly theme: 'light' | 'dark' | 'system';
     readonly minViewportWidth: number;
+    readonly capabilities: HostCapabilities;
 }
-/** Below this window width the editor does not open: its panels and the canvas need the room. */
-export declare const DEFAULT_MIN_VIEWPORT_WIDTH = 1024;
+/** Below this window width the editor does not open: not even the toolbar and the canvas fit. */
+export declare const DEFAULT_MIN_VIEWPORT_WIDTH = 320;
 export declare const DEFAULT_BREAKPOINTS: readonly BreakpointConfig[];
 /** Fills in what a host left out. */
 export declare function resolveConfig(config?: EditorConfig): ResolvedEditorConfig;
@@ -55,5 +64,19 @@ export interface BuilderEditorProps {
     readonly canvasUrl: string;
     readonly documentRef: DocumentRef;
     readonly config?: EditorConfig;
+    /** Host permissions (ADR-026); same as `config.capabilities`, and wins over it. Default: all off. */
+    readonly capabilities?: HostCapabilities;
+    /**
+     * Decides whether the author may weaken a lock (`node.setAttr` `lock`), e.g. from the host's own
+     * permission for template editing. Without it the editor can lock a block but never unlock it.
+     * Read when an unlock is attempted, so it may close over current host state.
+     */
+    readonly canUnlock?: NonNullable<EditorStoreOptions['canUnlock']>;
+    /**
+     * The version history of the page. An address makes the toolbar's history icon a link; a function
+     * is called when the icon is pressed (open your own panel or dialog). Without it, and without an
+     * adapter `historyUrl(ref)`, there is no history icon. The prop wins over the adapter.
+     */
+    readonly historyUrl?: string | (() => void);
 }
 //# sourceMappingURL=config.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/app/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5E,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnD,+DAA+D;IAC/D,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,6CAA6C;QAC7C,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAC5B,kEAAkE;QAClE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,QAAQ,EAAE;QAAE,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;CACnC;AAED,iGAAiG;AACjG,eAAO,MAAM,0BAA0B,OAAO,CAAC;AAE/C,eAAO,MAAM,mBAAmB,EAAE,SAAS,gBAAgB,EAI1D,CAAC;AAEF,qCAAqC;AACrC,wBAAgB,aAAa,CAAC,MAAM,GAAE,YAAiB,GAAG,oBAAoB,CAS7E;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,kFAAkF;IAClF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;CAChC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/app/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnD,+DAA+D;IAC/D,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,6CAA6C;QAC7C,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAC5B,kEAAkE;QAClE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;CAC1C;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,QAAQ,EAAE;QAAE,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC;CACzC;AAED,iGAAiG;AACjG,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,eAAO,MAAM,mBAAmB,EAAE,SAAS,gBAAgB,EAI1D,CAAC;AAEF,qCAAqC;AACrC,wBAAgB,aAAa,CAAC,MAAM,GAAE,YAAiB,GAAG,oBAAoB,CAU7E;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,kFAAkF;IAClF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;IAC/B,qGAAqG;IACrG,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;IAClE;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CAC7C"}

package/dist/app/config.js

@@ -1,8 +1,8 @@
-/** Below this window width the editor does not open: its panels and the canvas need the room. */
-export const DEFAULT_MIN_VIEWPORT_WIDTH = 1024;
+/** Below this window width the editor does not open: not even the toolbar and the canvas fit. */
+export const DEFAULT_MIN_VIEWPORT_WIDTH = 320;
 export const DEFAULT_BREAKPOINTS = [
     { id: 'desktop', width: 1280 },
-    { id: 'tablet', width: 820 },
+    { id: 'tablet', width: 768 },
     { id: 'mobile', width: 390 },
 ];
 /** Fills in what a host left out. */
@@ -14,5 +14,6 @@ export function resolveConfig(config = {}) {
         uiLocale: config.uiLocale ?? 'en',
         theme: config.theme ?? 'system',
         minViewportWidth: config.minViewportWidth ?? DEFAULT_MIN_VIEWPORT_WIDTH,
+        capabilities: config.capabilities ?? {},
     };
 }

package/dist/app/contracts.d.ts

@@ -0,0 +1,40 @@
+import type { NodeId } from '@next-buildr/core';
+/** The tabs of the left panel. */
+export type LeftPanelTab = 'blocks' | 'structure';
+export declare const LEFT_PANEL_TABS: readonly LeftPanelTab[];
+/** What the Blocks tab lists: single blocks or ready-made patterns. */
+export type PaletteMode = 'blocks' | 'patterns';
+export declare const PALETTE_MODES: readonly PaletteMode[];
+/** The stage (canvas area) that toasts and the issues drawer portal into, and the drawer's state. */
+export interface StageSlots {
+    readonly stage: HTMLElement | null;
+    readonly issuesOpen: boolean;
+    setIssuesOpen(open: boolean): void;
+}
+/** The two actions of the empty-page placeholder. */
+export interface EmptyPageActions {
+    onAddBlock(): void;
+    onPickPattern(): void;
+}
+/** The device keys of the UI-only shortcuts, in toolbar order (desktop, tablet, phone). */
+export declare const DEVICE_SHORTCUT_KEYS: readonly ['1', '2', '3'];
+export type DeviceShortcutKey = (typeof DEVICE_SHORTCUT_KEYS)[number];
+/** Callbacks of the shortcuts that change only the editor's UI, never the document. */
+export interface ShortcutCallbacks {
+    /** Keys 1, 2, 3: switch the screen size. */
+    setDevice(key: DeviceShortcutKey): void;
+    /** Toggle both side panels. */
+    togglePanels(): void;
+    /** Toggle the block outlines. */
+    toggleGuides(): void;
+    /** Open the shortcuts dialog (?). */
+    openShortcuts(): void;
+    /** Focus the block search (/). */
+    focusBlockSearch(): void;
+}
+/** A pending removal that may need a confirmation: ids to remove and whether any has descendants. */
+export interface RemoveRequest {
+    readonly ids: readonly NodeId[];
+    readonly hasDescendants: boolean;
+}
+//# sourceMappingURL=contracts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contracts.d.ts","sourceRoot":"","sources":["../../src/app/contracts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,kCAAkC;AAClC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,WAAW,CAAC;AAClD,eAAO,MAAM,eAAe,EAAE,SAAS,YAAY,EAA4B,CAAC;AAEhF,uEAAuE;AACvE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAChD,eAAO,MAAM,aAAa,EAAE,SAAS,WAAW,EAA2B,CAAC;AAE5E,qGAAqG;AACrG,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;CACpC;AAED,qDAAqD;AACrD,MAAM,WAAW,gBAAgB;IAC/B,UAAU,IAAI,IAAI,CAAC;IACnB,aAAa,IAAI,IAAI,CAAC;CACvB;AAED,2FAA2F;AAC3F,eAAO,MAAM,oBAAoB,YAAI,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;AAC7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,uFAAuF;AACvF,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACxC,+BAA+B;IAC/B,YAAY,IAAI,IAAI,CAAC;IACrB,iCAAiC;IACjC,YAAY,IAAI,IAAI,CAAC;IACrB,qCAAqC;IACrC,aAAa,IAAI,IAAI,CAAC;IACtB,kCAAkC;IAClC,gBAAgB,IAAI,IAAI,CAAC;CAC1B;AAED,qGAAqG;AACrG,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;CAClC"}

package/dist/app/contracts.js

@@ -0,0 +1,4 @@
+export const LEFT_PANEL_TABS = ['blocks', 'structure'];
+export const PALETTE_MODES = ['blocks', 'patterns'];
+/** The device keys of the UI-only shortcuts, in toolbar order (desktop, tablet, phone). */
+export const DEVICE_SHORTCUT_KEYS = ['1', '2', '3'];

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

@@ -1 +1 @@
-{"version":3,"file":"editor-app.d.ts","sourceRoot":"","sources":["../../src/app/editor-app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EAGnB,YAAY,EACZ,YAAY,EACb,MAAM,mBAAmB,CAAC;AAqD3B,OAAO,EAAE,KAAK,kBAAkB,EAAmC,MAAM,aAAa,CAAC;AAMvF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,sFAAsF;IACtF,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,oIAAoI;IACpI,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,uKAAuK;IACvK,QAAQ,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAC3C;AAsBD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BA0F9C"}
+{"version":3,"file":"editor-app.d.ts","sourceRoot":"","sources":["../../src/app/editor-app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EAGnB,YAAY,EACZ,YAAY,EACb,MAAM,mBAAmB,CAAC;AAuE3B,OAAO,EAAE,KAAK,kBAAkB,EAAmC,MAAM,aAAa,CAAC;AAQvF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,sFAAsF;IACtF,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,oIAAoI;IACpI,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,uKAAuK;IACvK,QAAQ,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAC3C;AAsBD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAyG9C"}