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

package/dist/app/layout.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 export interface IssueCounts {
     readonly error: number;
     readonly warning: number;
+    readonly info?: number;
 }
 export interface EditorLayoutProps {
     readonly toolbar?: ReactNode;
@@ -15,18 +16,26 @@ export interface EditorLayoutProps {
     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). */
+    /** The right of the status bar: device readout and zoom menu. */
     readonly status?: ReactNode;
+    /** The collapsed right panel's rail (the inspector's tabs as icons); the plain expand button without it. */
+    readonly rightRail?: ReactNode;
+    /** The selection path on the left of the status bar. */
+    readonly breadcrumbs?: 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;
+/** At this editor width and below the toolbar and the status bar collapse to what a phone needs. */
+export declare const COMPACT_AT = 768;
+/** At this editor width and below the toolbar keeps only icons. */
+export declare const TIGHT_AT = 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;
+export declare function EditorLayout({ toolbar, left, center, right, issues, issueCounts, status, breadcrumbs, rightRail, }: EditorLayoutProps): import("react").JSX.Element;
 //# sourceMappingURL=layout.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/app/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;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,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,4GAA4G;IAC5G,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;CAClC;AAgED,yHAAyH;AACzH,eAAO,MAAM,YAAY,OAAO,CAAC;AACjC,+EAA+E;AAC/E,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,oGAAoG;AACpG,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,mEAAmE;AACnE,eAAO,MAAM,QAAQ,MAAM,CAAC;AAsB5B;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAM,EACN,WAAW,EACX,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,iBAAiB,+BAgYnB"}

package/dist/app/layout.js

@@ -1,15 +1,39 @@
 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 { usePlural, useT } from '../messages/index.js';
+import { Icon, IconButton, Panel } from '../ui/index.js';
 import { ShellPanelsContext } from './shell-panels.js';
+import { StageSlotsContext } from './stage-slots.js';
 import { useResizable } from './use-resizable.js';
+const COLLAPSE_KEY = 'buildr:editor:collapsed';
+const EXPANDED = { left: false, right: false };
+/** The stored collapse of both panels; anything that is not an object with boolean sides is ignored. */
+function readCollapsed() {
+    try {
+        const parsed = JSON.parse(window.localStorage.getItem(COLLAPSE_KEY) ?? 'null');
+        if (typeof parsed !== 'object' || parsed === null)
+            return EXPANDED;
+        const { left, right } = parsed;
+        return { left: left === true, right: right === true };
+    }
+    catch {
+        return EXPANDED;
+    }
+}
+function writeCollapsed(value) {
+    try {
+        window.localStorage.setItem(COLLAPSE_KEY, JSON.stringify(value));
+    }
+    catch {
+        // Storage is unavailable: the collapse just is not remembered.
+    }
+}
 /**
  * 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 }));
+function Splitter({ resizable, min, max, label, controls, inert = false }) {
+    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: inert ? -1 : 0, "aria-hidden": inert ? true : undefined, className: "bd-splitter", "data-dragging": resizable.dragging, "data-inert": inert, ...resizable.bind }));
 }
 const LEFT = { initial: 280, min: 200, max: 480 };
 const RIGHT = { initial: 320, min: 240, max: 520 };
@@ -17,6 +41,10 @@ const RIGHT = { initial: 320, min: 240, max: 520 };
 export const NARROW_BELOW = 1100;
 /** The canvas never gets narrower than this while the panels sit beside it. */
 export const CANVAS_MIN = 480;
+/** At this editor width and below the toolbar and the status bar collapse to what a phone needs. */
+export const COMPACT_AT = 768;
+/** At this editor width and below the toolbar keeps only icons. */
+export const TIGHT_AT = 480;
 const SPLITTERS = 2;
 /** The editor's own width, watched with a `ResizeObserver`; 0 while unknown (jsdom). */
 function useEditorWidth(ref) {
@@ -45,8 +73,9 @@ function useEditorWidth(ref) {
  * 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, }) {
+export function EditorLayout({ toolbar, left, center, right, issues, issueCounts, status, breadcrumbs, rightRail, }) {
     const t = useT();
+    const plural = usePlural();
     const ids = { left: useId(), right: useId(), issues: useId() };
     const leftSize = useResizable({ ...LEFT, direction: 1, storageKey: 'buildr:editor:left-width' });
     const rightSize = useResizable({
@@ -56,27 +85,159 @@ export function EditorLayout({ toolbar, left, center, right, issues, issueCounts
     });
     const [issuesOpen, setIssuesOpen] = useState(false);
     const [overlay, setOverlay] = useState({ left: false, right: false });
+    const [collapsed, setCollapsed] = useState(readCollapsed);
+    const collapsedRef = useRef(collapsed);
+    collapsedRef.current = collapsed;
+    const [leftTab, setLeftTab] = useState('blocks');
+    const [stage, setStage] = useState(null);
     const toolbarRef = useRef(null);
     const width = useEditorWidth(toolbarRef);
     const narrow = width > 0 && width < NARROW_BELOW;
+    const compact = width > 0 && width <= COMPACT_AT;
+    const tight = width > 0 && width <= TIGHT_AT;
     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]);
+    const closeOverlay = useCallback(() => setOverlay((current) => current.left || current.right ? { left: false, right: false } : current), []);
+    const update = useCallback((change) => {
+        setCollapsed((current) => {
+            const next = change(current);
+            writeCollapsed(next);
+            return next;
+        });
+    }, []);
+    // Focus follows a user-initiated expand or collapse only (never mount or restored state).
+    const focusAfter = useRef(null);
+    const toggleCollapsed = useCallback((side) => {
+        focusAfter.current = { side, open: collapsedRef.current[side] };
+        update((current) => ({ ...current, [side]: !current[side] }));
+    }, [update]);
+    const collapseAll = useCallback(() => {
+        focusAfter.current = { side: 'left', open: false };
+        update(() => ({ left: true, right: true }));
+    }, [update]);
+    const expandAll = useCallback(() => {
+        focusAfter.current = { side: 'left', open: true };
+        update(() => EXPANDED);
+    }, [update]);
+    const panels = useMemo(() => ({
+        narrow,
+        compact,
+        tight,
+        open: overlay,
+        toggle,
+        closeOverlay,
+        collapsed,
+        toggleCollapsed,
+        collapseAll,
+        expandAll,
+        leftTab,
+        setLeftTab,
+    }), [
+        narrow,
+        compact,
+        tight,
+        overlay,
+        toggle,
+        closeOverlay,
+        collapsed,
+        toggleCollapsed,
+        collapseAll,
+        expandAll,
+        leftTab,
+    ]);
+    const slots = useMemo(() => ({ stage, issuesOpen, setIssuesOpen }), [stage, issuesOpen]);
+    // The overlay mode always shows a panel in full; the rail is the wide layout's collapsed state.
+    const rail = { left: !narrow && collapsed.left, right: !narrow && collapsed.right };
     // 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`,
+        '--bd-left': rail.left ? 'var(--bd-rail)' : `${leftShown}px`,
+        '--bd-right': rail.right ? 'var(--bd-rail)' : `${rightShown}px`,
+    };
+    const expand = (side) => {
+        focusAfter.current = { side, open: true };
+        update((current) => ({ ...current, [side]: false }));
     };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs after a collapse change only; the ids are stable
+    useEffect(() => {
+        const pending = focusAfter.current;
+        if (pending === null)
+            return;
+        focusAfter.current = null;
+        const panel = document.getElementById(ids[pending.side]);
+        if (panel === null)
+            return;
+        if (pending.open) {
+            const content = panel.querySelector('.bd-panel-content');
+            const first = content?.querySelector('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
+            (first ?? content)?.focus();
+        }
+        else {
+            panel.querySelector('.bd-rail button')?.focus();
+        }
+    }, [collapsed]);
+    const issueText = (count, kind) => plural(`issues.count.${kind}`, count);
     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 })] })] }));
+    const sheetOpen = narrow && (overlay.left || overlay.right);
+    const sheetSide = !narrow
+        ? null
+        : overlay.left
+            ? 'left'
+            : overlay.right
+                ? 'right'
+                : null;
+    // A sheet takes focus: it moves into it when it opens and returns to what opened it when it closes.
+    const opener = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs when the open sheet changes; the ids are stable
+    useEffect(() => {
+        if (sheetSide === null) {
+            opener.current?.focus();
+            opener.current = null;
+            return;
+        }
+        if (opener.current === null && document.activeElement instanceof HTMLElement) {
+            opener.current = document.activeElement;
+        }
+        const panel = document.getElementById(ids[sheetSide]);
+        const first = panel?.querySelector('.bd-sheet-close, button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
+        (first ?? panel)?.focus();
+    }, [sheetSide]);
+    // The sheet is a non-modal dialog on purpose: the toolbar stays live while it is open, because its
+    // Blocks / Structure / Inspector toggles swap one sheet for the other. So no `aria-modal` (it would
+    // claim the toolbar is unreachable) and the toolbar is not `inert`; the canvas, splitters and status
+    // bar are inert, and the scrim, the close button and Escape close the sheet.
+    const sheetProps = (side) => (sheetSide === side ? { role: 'dialog' } : {});
+    // Escape closes a sheet wherever the focus is (the canvas frame aside), unless a menu or dialog
+    // above it already took the key.
+    useEffect(() => {
+        if (!sheetOpen)
+            return;
+        const onKey = (event) => {
+            if (event.key === 'Escape' && !event.defaultPrevented)
+                closeOverlay();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [sheetOpen, closeOverlay]);
+    // A sheet that no longer is one (the editor grew wide) must not stay open behind the layout.
+    useEffect(() => {
+        if (!narrow)
+            closeOverlay();
+    }, [narrow, closeOverlay]);
+    return (_jsx(ShellPanelsContext.Provider, { value: panels, children: _jsxs(StageSlotsContext.Provider, { value: slots, children: [_jsx("div", { className: "bd-toolbar", role: "toolbar", "aria-label": t('editor.toolbar'), "data-compact": compact, ref: toolbarRef, children: toolbar }), _jsxs("div", { className: "bd-body", style: style, "data-narrow": narrow, "data-compact": compact, "data-dragging": leftSize.dragging || rightSize.dragging, children: [_jsxs(Panel, { as: "aside", id: ids.left, "aria-label": t('editor.leftPanel'), hidden: narrow && !overlay.left, tabIndex: sheetSide === 'left' ? -1 : undefined, ...sheetProps('left'), "data-side": "left", "data-collapsed": rail.left, onKeyDown: closeOnEscape('left'), children: [narrow && (_jsxs("div", { className: "bd-sheet-bar", children: [_jsx("span", { className: "bd-sheet-title", children: t('editor.leftPanel') }), _jsx(IconButton, { size: "sm", icon: "x", label: t('ui.close'), className: "bd-sheet-close", onClick: () => setOverlay((current) => ({ ...current, left: false })) })] })), _jsx("div", { className: "bd-panel-content", hidden: rail.left, tabIndex: -1, children: left }), rail.left && (_jsxs("div", { className: "bd-rail", children: [_jsx(IconButton, { label: t('leftPanel.tab.blocks'), icon: "layout-grid", onClick: () => {
+                                                setLeftTab('blocks');
+                                                expand('left');
+                                            } }), _jsx(IconButton, { label: t('leftPanel.tab.structure'), icon: "list-tree", onClick: () => {
+                                                setLeftTab('structure');
+                                                expand('left');
+                                            } })] }))] }), _jsx(Splitter, { resizable: leftSize, min: LEFT.min, max: LEFT.max, label: t('editor.resize.left'), controls: ids.left, inert: rail.left || sheetOpen }), _jsxs("main", { className: "bd-canvas", "aria-label": t('editor.canvas'), tabIndex: -1, inert: sheetOpen, ref: setStage, children: [_jsx("div", { className: "bd-stage-scroll", children: center }), _jsx("section", { className: "bd-issues", "data-open": issuesOpen, "aria-label": t('issues.drawer'), id: ids.issues, inert: !issuesOpen, children: issues })] }), _jsx(Splitter, { resizable: rightSize, min: RIGHT.min, max: RIGHT.max, label: t('editor.resize.right'), controls: ids.right, inert: rail.right || sheetOpen }), _jsxs(Panel, { as: "aside", id: ids.right, "aria-label": t('editor.inspector'), hidden: narrow && !overlay.right, tabIndex: sheetSide === 'right' ? -1 : undefined, ...sheetProps('right'), "data-side": "right", "data-collapsed": rail.right, onKeyDown: closeOnEscape('right'), children: [narrow && (_jsxs("div", { className: "bd-sheet-bar", children: [_jsx("span", { className: "bd-sheet-title", children: t('editor.inspector') }), _jsx(IconButton, { size: "sm", icon: "x", label: t('ui.close'), className: "bd-sheet-close", onClick: () => setOverlay((current) => ({ ...current, right: false })) })] })), _jsx("div", { className: "bd-panel-content", hidden: rail.right, tabIndex: -1, children: right }), rail.right && (_jsx("div", { className: "bd-rail", children: rightRail ?? (_jsx(IconButton, { label: t('inspector.expand'), icon: "panel-right", onClick: () => expand('right') })) }))] }), sheetOpen && (_jsx("button", { type: "button", className: "bd-scrim", "aria-label": t('ui.close'), tabIndex: -1, onClick: closeOverlay }))] }), _jsxs("section", { className: "bd-status", "aria-label": t('statusBar.label'), "data-compact": compact, inert: sheetOpen, children: [_jsx("div", { className: "bd-status-crumbs", children: breadcrumbs }), _jsx("button", { type: "button", className: "bd-status-btn", "aria-expanded": issuesOpen, "aria-controls": ids.issues, title: t('statusBar.issues.show'), onClick: () => setIssuesOpen((open) => !open), children: issueCounts === undefined ? (t('editor.issues.show')) : issueCounts.error + issueCounts.warning + (issueCounts.info ?? 0) === 0 ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-check" }), t('statusBar.noIssues')] })) : (_jsxs(_Fragment, { children: [issueCounts.error > 0 && (_jsxs("span", { className: "bd-status-count", "data-severity": "error", children: [_jsx(Icon, { name: "circle-alert" }), _jsx("span", { className: "bd-tabular", children: issueText(issueCounts.error, 'error') })] })), issueCounts.warning > 0 && (_jsxs("span", { className: "bd-status-count", "data-severity": "warning", children: [_jsx(Icon, { name: "triangle-alert" }), _jsx("span", { className: "bd-tabular", children: issueText(issueCounts.warning, 'warning') })] })), (issueCounts.info ?? 0) > 0 && (_jsxs("span", { className: "bd-status-count", "data-severity": "info", children: [_jsx(Icon, { name: "info" }), _jsx("span", { className: "bd-tabular", children: issueText(issueCounts.info ?? 0, 'info') })] }))] })) }), _jsx("span", { className: "bd-status-divider", "aria-hidden": "true" }), status] })] }) }));
 }

package/dist/app/manifest.d.ts

@@ -1,12 +1,17 @@
 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`). */
+/**
+ * What the palette, the layers and the inspector know about the components (`toManifest`). The
+ * panels read it with its labels in the interface language (`i18n/localize-manifest.ts`).
+ */
 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). */
+/** The manifest, or `undefined` outside a `ManifestProvider` (the panels then fall back to the component's type). Its labels are in the interface language. */
 export declare function useManifest(): RegistryManifest | undefined;
+/** The manifest as the application registered it, in its own (English) words: what the checks' messages quote. */
+export declare function useSourceManifest(): 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

@@ -1 +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"}
+{"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,EAAuB,MAAM,OAAO,CAAC;AAO3E;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,+BAWA;AAED,+JAA+J;AAC/J,wBAAgB,WAAW,IAAI,gBAAgB,GAAG,SAAS,CAE1D;AAED,kHAAkH;AAClH,wBAAgB,iBAAiB,IAAI,gBAAgB,GAAG,SAAS,CAEhE;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

@@ -1,14 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { localizeManifest } from '../i18n/localize-manifest.js';
+import { useUiLocale } from '../messages/index.js';
 const ManifestContext = createContext(undefined);
-/** What the palette, the layers and the inspector know about the components (`toManifest`). */
+const SourceManifestContext = createContext(undefined);
+/**
+ * What the palette, the layers and the inspector know about the components (`toManifest`). The
+ * panels read it with its labels in the interface language (`i18n/localize-manifest.ts`).
+ */
 export function ManifestProvider(props) {
-    return (_jsx(ManifestContext.Provider, { value: props.manifest, children: props.children }));
+    const locale = useUiLocale();
+    const localized = useMemo(() => localizeManifest(props.manifest, locale), [props.manifest, locale]);
+    return (_jsx(SourceManifestContext.Provider, { value: props.manifest, children: _jsx(ManifestContext.Provider, { value: localized, children: props.children }) }));
 }
-/** The manifest, or `undefined` outside a `ManifestProvider` (the panels then fall back to the component's type). */
+/** The manifest, or `undefined` outside a `ManifestProvider` (the panels then fall back to the component's type). Its labels are in the interface language. */
 export function useManifest() {
     return useContext(ManifestContext);
 }
+/** The manifest as the application registered it, in its own (English) words: what the checks' messages quote. */
+export function useSourceManifest() {
+    return useContext(SourceManifestContext);
+}
 /** 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)

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

@@ -1,3 +1,4 @@
+import type { LeftPanelTab } from './contracts.ts';
 export type PanelSide = 'left' | 'right';
 /**
  * The side panels' overlay mode (below 1100px the layout hides them and the toolbar's toggle
@@ -7,8 +8,22 @@ export type PanelSide = 'left' | 'right';
 export interface ShellPanels {
     /** The editor is narrower than the overlay breakpoint. */
     readonly narrow: boolean;
+    /** The editor is phone or small tablet wide (768px and less): the toolbar and the status bar collapse. */
+    readonly compact?: boolean;
+    /** The editor is phone wide (480px and less): the toolbar keeps only icons. */
+    readonly tight?: boolean;
     readonly open: Readonly<Record<PanelSide, boolean>>;
     toggle(side: PanelSide): void;
+    /** Closes the open overlay (`narrow` only). */
+    closeOverlay?(): void;
+    /** Persisted collapse of each side panel (wide layout). */
+    readonly collapsed?: Readonly<Record<PanelSide, boolean>>;
+    toggleCollapsed?(side: PanelSide): void;
+    collapseAll?(): void;
+    expandAll?(): void;
+    /** The active tab of the left panel. */
+    readonly leftTab?: LeftPanelTab;
+    setLeftTab?(tab: LeftPanelTab): void;
 }
 export declare const ShellPanelsContext: import("react").Context<ShellPanels | undefined>;
 export declare function useShellPanels(): ShellPanels | undefined;

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

@@ -1 +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"}
+{"version":3,"file":"shell-panels.d.ts","sourceRoot":"","sources":["../../src/app/shell-panels.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,0DAA0D;IAC1D,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0GAA0G;IAC1G,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,CAAC,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;IAC9B,+CAA+C;IAC/C,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,2DAA2D;IAC3D,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC1D,eAAe,CAAC,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,IAAI,IAAI,CAAC;IACrB,SAAS,CAAC,IAAI,IAAI,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,UAAU,CAAC,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,kBAAkB,kDAAoD,CAAC;AAEpF,wBAAgB,cAAc,IAAI,WAAW,GAAG,SAAS,CAExD"}

package/dist/app/small-screen.test.js

@@ -99,10 +99,10 @@ describe('useViewportTooNarrow on the server and while hydrating', () => {
     });
 });
 describe('SmallScreenNotice', () => {
-    it('asks for a computer, in the interface language, as an alert', async () => {
+    it('asks for a wider window, in the interface language, as an alert', async () => {
         const view = await mount(_jsx(MessagesProvider, { locale: "pl", children: _jsx(SmallScreenNotice, {}) }));
         const alert = view.querySelector('[role="alert"]');
         expect(alert?.querySelector('h1')?.textContent).toBe('Edytor wymaga większego ekranu');
-        expect(alert?.textContent).toContain('na komputerze');
+        expect(alert?.textContent).toContain('zbyt wąskie');
     });
 });

package/dist/app/stage-slots.d.ts

@@ -0,0 +1,9 @@
+import type { StageSlots } from './contracts.ts';
+/**
+ * The stage element and the issues drawer state. `EditorLayout` provides it; toasts and the issues
+ * drawer read it to portal into the stage. Without a provider (a panel rendered on its own) the
+ * consumers fall back to their previous placement.
+ */
+export declare const StageSlotsContext: import("react").Context<StageSlots | undefined>;
+export declare function useStageSlots(): StageSlots | undefined;
+//# sourceMappingURL=stage-slots.d.ts.map

package/dist/app/stage-slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-slots.d.ts","sourceRoot":"","sources":["../../src/app/stage-slots.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,iDAAmD,CAAC;AAElF,wBAAgB,aAAa,IAAI,UAAU,GAAG,SAAS,CAEtD"}

package/dist/app/stage-slots.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+/**
+ * The stage element and the issues drawer state. `EditorLayout` provides it; toasts and the issues
+ * drawer read it to portal into the stage. Without a provider (a panel rendered on its own) the
+ * consumers fall back to their previous placement.
+ */
+export const StageSlotsContext = createContext(undefined);
+export function useStageSlots() {
+    return useContext(StageSlotsContext);
+}

package/dist/app/status-info.d.ts

@@ -6,9 +6,8 @@ export interface StatusInfoProps {
     readonly breakpoint: string;
 }
 /**
- * The status bar's read-only facts (PB-122): the active breakpoint and its width, the canvas
- * zoom and the save state. They come from the host, the store and the persistence controller;
- * the save state is plain text (the toolbar's status carries the live region).
+ * The status bar's right side: the active screen size with its icon and width (`Komputer · pełna
+ * szerokość`), and the canvas zoom menu (the host's `setZoom`). The save state lives in the toolbar.
  */
 export declare function StatusInfo({ host, breakpoints, breakpoint }: StatusInfoProps): import("react").JSX.Element;
 //# sourceMappingURL=status-info.d.ts.map

package/dist/app/status-info.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-info.d.ts","sourceRoot":"","sources":["../../src/app/status-info.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAkBD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,eAAe,+BA2B5E"}
+{"version":3,"file":"status-info.d.ts","sourceRoot":"","sources":["../../src/app/status-info.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AA2DD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,eAAe,+BA6B5E"}

package/dist/app/status-info.js

@@ -1,34 +1,67 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSyncExternalStore } from 'react';
-import { useT } from '../messages/index.js';
-import { usePersistenceState } from '../persistence/index.js';
-import { useEditorState } from '../store/index.js';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { interpolate, useT } from '../messages/index.js';
+import { ZoomMenu } from '../toolbar/zoom-menu.js';
+import { Icon } from '../ui/index.js';
 const BREAKPOINT_LABELS = {
     desktop: 'toolbar.breakpoint.desktop',
     tablet: 'toolbar.breakpoint.tablet',
     mobile: 'toolbar.breakpoint.mobile',
 };
+const BREAKPOINT_ICONS = {
+    desktop: 'monitor',
+    tablet: 'tablet',
+    mobile: 'smartphone',
+};
 const NO_ZOOM = 'fit';
 function useZoom(host) {
     return useSyncExternalStore((notify) => (host === null ? () => undefined : host.state.subscribe(notify)), () => host?.state.getState().zoom ?? NO_ZOOM, () => NO_ZOOM);
 }
+/** The scale the canvas frame is shown at, in percent, read from the frame (`Fit` is not a number). */
+function useShownPercent(host, zoom, breakpoint) {
+    const [percent, setPercent] = useState(100);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `zoom` and the breakpoint change the frame's scale
+    useEffect(() => {
+        if (typeof zoom === 'number') {
+            setPercent(Math.round(zoom * 100));
+            return;
+        }
+        const read = () => {
+            const frame = document.querySelector('.bd-canvas-frame');
+            if (frame === null || frame.offsetWidth === 0)
+                return;
+            setPercent(Math.round((frame.getBoundingClientRect().width / frame.offsetWidth) * 100));
+        };
+        const timer = setTimeout(read, 0);
+        window.addEventListener('resize', read);
+        const area = document.querySelector('.bd-canvas-stage-area');
+        const observer = typeof ResizeObserver === 'undefined' || area === null ? undefined : new ResizeObserver(read);
+        if (area !== null)
+            observer?.observe(area);
+        const unsubscribe = host?.state.subscribe(read);
+        return () => {
+            clearTimeout(timer);
+            window.removeEventListener('resize', read);
+            observer?.disconnect();
+            unsubscribe?.();
+        };
+    }, [host, zoom, breakpoint]);
+    return percent;
+}
 /**
- * The status bar's read-only facts (PB-122): the active breakpoint and its width, the canvas
- * zoom and the save state. They come from the host, the store and the persistence controller;
- * the save state is plain text (the toolbar's status carries the live region).
+ * The status bar's right side: the active screen size with its icon and width (`Komputer · pełna
+ * szerokość`), and the canvas zoom menu (the host's `setZoom`). The save state lives in the toolbar.
  */
 export function StatusInfo({ host, breakpoints, breakpoint }) {
     const t = useT();
     const zoom = useZoom(host);
-    const status = usePersistenceState((state) => state.status);
-    const error = usePersistenceState((state) => state.error);
-    const readOnly = useEditorState((state) => state.readOnly);
+    const shown = useShownPercent(host, zoom, breakpoint);
     const active = breakpoints.find((item) => item.id === breakpoint);
     const key = BREAKPOINT_LABELS[breakpoint];
-    const save = readOnly
-        ? t('save.readOnly')
-        : status === 'error' && error?.kind === 'invalid'
-            ? t('save.invalid')
-            : t(`save.${status}`);
-    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "bd-status-item", title: t('editor.status.breakpoint'), children: [key === undefined ? breakpoint : t(key), active === undefined ? '' : ` ${active.width}px`] }), _jsx("span", { className: "bd-status-item bd-tabular", title: t('editor.status.zoom'), children: zoom === 'fit' ? t('editor.status.fit') : `${Math.round(zoom * 100)}%` }), _jsx("span", { className: "bd-status-item", "data-status": readOnly ? 'readOnly' : status, children: save })] }));
+    const name = key === undefined ? breakpoint : t(key);
+    const detail = active === undefined || active === breakpoints[0]
+        ? t('statusBar.device.full')
+        : interpolate(t('statusBar.device.width'), { width: active.width });
+    const icon = BREAKPOINT_ICONS[breakpoint];
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "bd-status-btn bd-status-static bd-tabular", title: t('editor.status.breakpoint'), children: [icon === undefined ? null : _jsx(Icon, { name: icon }), name, " \u00B7 ", detail] }), _jsx(ZoomMenu, { zoom: zoom, shown: shown, variant: "status", onChange: (next) => host?.setZoom(next) })] }));
 }

package/dist/canvas-host/canvas-frame.d.ts

@@ -1,4 +1,5 @@
 import type { BreakpointConfig } from '../app/config.ts';
+import type { EmptyPageActions } from '../app/contracts.ts';
 import { type CanvasHost, type CanvasHostOptions } from './host.ts';
 export interface CanvasFrameProps {
     /** The canvas route (`@next-buildr/react/canvas` runs there). */
@@ -13,7 +14,9 @@ export interface CanvasFrameProps {
     readonly handshakeTimeoutMs?: number;
     /** Gets the host once the frame is mounted (and `null` when it goes), for the toolbar and the drag-and-drop engine. */
     readonly onHost?: (host: CanvasHost | null) => void;
-    readonly callbacks?: Pick<CanvasHostOptions, 'onKeyDown' | 'onContextMenu' | 'onNodeDoubleClick' | 'onDropTarget' | 'onCommandError'>;
+    /** The actions of the empty-page state; the buttons show only when it is given. */
+    readonly emptyPage?: EmptyPageActions;
+    readonly callbacks?: Pick<CanvasHostOptions, 'onAction' | 'onInsert' | 'onKeyDown' | 'onContextMenu' | 'onNodeDoubleClick' | 'onDropTarget' | 'onCommandError' | 'onLocked'>;
 }
 /** A random nonce for the canvas URL: 32 hex characters, unguessable by the page in the frame's neighbours. */
 export declare function createSession(): string;
@@ -44,6 +47,15 @@ export declare function stageMetrics(input: {
     readonly roomHeight: number;
     readonly zoom: 'fit' | number;
 }): StageMetrics;
+/**
+ * At most 40 UTF-16 units, as the protocol's `.max(40)` counts, without splitting a surrogate pair
+ * (cutting by code points would let ~21 astral characters through, and the canvas drops the message).
+ */
+export declare function cutLabel(label: string): string;
+/** The localized component names the canvas shows on its chip: only what the protocol accepts, at most 128. */
+export declare function typeLabelsOf(components: Readonly<Record<string, {
+    readonly label?: string | undefined;
+}>> | undefined): Record<string, string>;
 /**
  * The canvas iframe, its channel and its status screens. A "Reload canvas" button (or a fatal
  * error) mounts a new frame with a new session; nothing is lost, because the store holds the

package/dist/canvas-host/canvas-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-frame.d.ts","sourceRoot":"","sources":["../../src/canvas-host/canvas-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAoB,MAAM,WAAW,CAAC;AAEtF,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,uHAAuH;IACvH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,SAAS,CAAC,EAAE,IAAI,CACvB,iBAAiB,EACjB,WAAW,GAAG,eAAe,GAAG,mBAAmB,GAAG,cAAc,GAAG,gBAAgB,CACxF,CAAC;CACH;AAED,+GAA+G;AAC/G,wBAAgB,aAAa,IAAI,MAAM,CAItC;AAED,mFAAmF;AACnF,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAIhG;AAED,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,oGAAoG;IACpG,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;CAC/B,GAAG,YAAY,CAUf;AAQD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA4IlD"}
+{"version":3,"file":"canvas-frame.d.ts","sourceRoot":"","sources":["../../src/canvas-host/canvas-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAO5D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAoB,MAAM,WAAW,CAAC;AAEtF,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,WAAW,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAClD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,uHAAuH;IACvH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,mFAAmF;IACnF,QAAQ,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,IAAI,CACvB,iBAAiB,EACf,UAAU,GACV,UAAU,GACV,WAAW,GACX,eAAe,GACf,mBAAmB,GACnB,cAAc,GACd,gBAAgB,GAChB,UAAU,CACb,CAAC;CACH;AAED,+GAA+G;AAC/G,wBAAgB,aAAa,IAAI,MAAM,CAItC;AAED,mFAAmF;AACnF,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAIhG;AAED,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,oGAAoG;IACpG,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,oDAAoD;IACpD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;CAC/B,GAAG,YAAY,CAUf;AAcD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAO9C;AAED,+GAA+G;AAC/G,wBAAgB,YAAY,CAC1B,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC,CAAC,GAAG,SAAS,GACxF,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgBxB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAyNlD"}