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

package/dist/app/editor-app.js

@@ -1,20 +1,24 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { authorCodeEnabled, createIndex } from '@next-buildr/core';
+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 { MediaLibraryProvider, RemoveConfirm } 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 { interpolate, MessagesProvider, usePlural, useT } from '../messages/index.js';
+import { Breadcrumbs, countIssues, InsertPanel, Inspector, InspectorDataProvider, InspectorRail, IssuesPanel, LayersPanel, LeftPanel, SectionsToggle, StyleInspector, StyleSectionsProvider, useIssues, } from '../panels/index.js';
 import { createPersistence, loadDocument, PersistenceProvider, useSaveAction, } from '../persistence/index.js';
-import { usePreview } from '../preview/index.js';
+import { isSafePreviewUrl, 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 { hasDescendants } from '../shortcuts/navigation.js';
+import { createEditorStore, createLocaleStore, EditorStoreProvider, isNodeStructureLocked, LocaleProvider, structureLockedIds, useEditor, useEditorState, useLocaleState, } from '../store/index.js';
+import { useViewState } from '../store/react.js';
+import { PublishDialog, ThemeProvider, Toolbar, useThemePreference } from '../toolbar/index.js';
+import { Icon, PortalContainerProvider, ToastProvider, useStructureLockedNotice, useToast, } from '../ui/index.js';
 import { resolveConfig } from './config.js';
 import { EditorLayout } from './layout.js';
-import { ManifestProvider } from './manifest.js';
+import { componentMeta, ManifestProvider } from './manifest.js';
+import { useShellPanels } from './shell-panels.js';
 import { SmallScreenNotice, useViewportTooNarrow } from './small-screen.js';
 import { StatusInfo } from './status-info.js';
 const SINGLE_LOCALE = {
@@ -43,6 +47,13 @@ export function EditorApp(props) {
     const blocked = narrow === true && phase.kind !== 'ready';
     const waiting = narrow === undefined && phase.kind !== 'ready';
     const refKey = `${documentRef.collection}:${documentRef.id}`;
+    // The host's `canUnlock` is read at the moment of an unlock, so a new function never reloads the editor.
+    const canUnlockRef = useRef(props.canUnlock);
+    canUnlockRef.current = props.canUnlock;
+    const hasCanUnlock = props.canUnlock !== undefined;
+    // ADR-026: only an explicit `true` permits author code; the prop wins over `config.capabilities`.
+    const authorCode = authorCodeEnabled(props.capabilities ?? config.capabilities);
+    const unlockFromHost = useCallback((request) => canUnlockRef.current?.(request) === true, []);
     // biome-ignore lint/correctness/useExhaustiveDependencies: `documentRef` is identified by `refKey`
     useEffect(() => {
         if (blocked || waiting)
@@ -59,6 +70,8 @@ export function EditorApp(props) {
                     return;
                 const locales = props.locales ?? session.locales ?? SINGLE_LOCALE;
                 const store = createEditorStore({
+                    ...(hasCanUnlock ? { canUnlock: unlockFromHost } : {}),
+                    ...(authorCode ? { capabilities: { authorCode: true } } : {}),
                     doc: loaded.document,
                     registry,
                     readOnly: loaded.readOnly === true,
@@ -98,6 +111,9 @@ export function EditorApp(props) {
         waiting,
         config.autosave.debounceMs,
         config.autosave.maxWaitMs,
+        hasCanUnlock,
+        unlockFromHost,
+        authorCode,
     ]);
     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' })) }) }) }) }));
 }
@@ -108,14 +124,22 @@ function Status({ failed }) {
 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 }) }) }) }) }) }) }) }) }) }));
+    const bridge = useRef({});
+    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, bridge: bridge, children: _jsx(Shell, { ...props, bridge: bridge }) }) }) }) }) }) }) }) }) }));
 }
 /** 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 }));
+    const { bridge } = props;
+    const callbacks = useMemo(() => ({
+        setDevice: (key) => bridge.current.setDevice?.(key),
+        togglePanels: () => bridge.current.togglePanels?.(),
+        focusBlockSearch: () => bridge.current.focusBlockSearch?.(),
+    }), [bridge]);
+    const onRemove = useCallback((request) => bridge.current.onRemove?.(request), [bridge]);
+    return (_jsx(ShortcutProvider, { overrides: props.overrides, actions: actions, callbacks: callbacks, onRemove: onRemove, children: props.children }));
 }
 function useDataContext(adapter, ref) {
     const [schema, setSchema] = useState();
@@ -132,17 +156,84 @@ function useDataContext(adapter, ref) {
     }, [adapter, key]);
     return { schema, context };
 }
+/** A link an adapter may offer beyond the contract (`historyUrl`, `helpUrl`); `undefined` when it does not. */
+function optionalUrl(adapter, name, ref) {
+    const read = adapter[name];
+    return typeof read === 'function' ? read.call(adapter, ref) : undefined;
+}
+/** The page's public address as it shows in the publish dialog: the adapter's non-draft preview URL, when it is a safe one. */
+function publicAddress(adapter, ref) {
+    try {
+        const url = adapter.previewUrl(ref, { draft: false });
+        if (!isSafePreviewUrl(url))
+            return undefined;
+        const parsed = new URL(url, window.location.href);
+        return `${parsed.host}${parsed.pathname}`;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Hands the shell's panel controls (collapse, tab) to the shell component above the layout. */
+function PanelsTap({ into }) {
+    into.current = useShellPanels();
+    return null;
+}
+/** Brings the left panel into view on a tab: out of its rail, or open as an overlay when narrow. */
+function revealLeft(panels, tab) {
+    if (panels === undefined)
+        return;
+    panels.setLeftTab?.(tab);
+    if (panels.narrow) {
+        if (!panels.open.left)
+            panels.toggle('left');
+    }
+    else if (panels.collapsed?.left === true) {
+        panels.toggleCollapsed?.('left');
+    }
+}
+function LeftColumn({ mode, onModeChange, searchRef, onRemoveRequest }) {
+    const panels = useShellPanels();
+    return (_jsx(LeftPanel, { tab: panels?.leftTab ?? 'blocks', onTabChange: (next) => panels?.setLeftTab?.(next), onCollapse: () => panels?.narrow ? panels.toggle('left') : panels?.toggleCollapsed?.('left'), blocks: _jsx(InsertPanel, { mode: mode, onModeChange: onModeChange, searchRef: searchRef }), structure: _jsx(LayersPanel, { onRemoveRequest: onRemoveRequest }) }));
+}
+function RightRail(props) {
+    const panels = useShellPanels();
+    return (_jsx(InspectorRail, { tab: props.tab, onTabChange: props.onTabChange, onExpand: () => panels?.toggleCollapsed?.('right') }));
+}
 function Shell(props) {
     const t = useT();
-    const { adapter, documentRef, canvasUrl, manifest, ready } = props;
+    const plural = usePlural();
+    const view = useViewState();
+    const [canvasMenu, setCanvasMenu] = useState(null);
+    const [renameId, setRenameId] = useState(null);
+    const canvasMenuRef = useRef(null);
+    useEffect(() => {
+        if (!canvasMenu)
+            return;
+        canvasMenuRef.current?.querySelector('button')?.focus();
+        const dismiss = (event) => {
+            if (event.target instanceof Node && !canvasMenuRef.current?.contains(event.target))
+                setCanvasMenu(null);
+        };
+        document.addEventListener('pointerdown', dismiss);
+        return () => document.removeEventListener('pointerdown', dismiss);
+    }, [canvasMenu]);
+    const { adapter, documentRef, canvasUrl, manifest, ready, bridge } = 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 store = useEditor();
     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 [pageOptionsOpen, setPageOptionsOpen] = useState(false);
+    const [inspectorTab, setInspectorTab] = useState('content');
+    const [paletteMode, setPaletteMode] = useState('blocks');
+    const [removal, setRemoval] = useState(null);
+    const [searchFocus, setSearchFocus] = useState(0);
+    const searchRef = useRef(null);
+    const panelsRef = useRef(undefined);
     const [diagnostics, setDiagnostics] = useState([]);
     const area = useRef(null);
     const engine = useDragEngine();
@@ -150,6 +241,7 @@ function Shell(props) {
     const data = useDataContext(adapter, documentRef);
     const preview = usePreview({ adapter, docRef: documentRef });
     const toast = useToast();
+    const notifyLocked = useStructureLockedNotice();
     const previewError = preview.error;
     const [title, setTitle] = useState(ready.loaded.title);
     const canRename = adapter.rename !== undefined;
@@ -170,7 +262,30 @@ function Shell(props) {
         else
             toast.show({ id: 'preview', variant: 'error', message: previewError });
     }, [previewError, toast]);
-    const issueCounts = countIssues(useIssues(diagnostics));
+    const publicUrl = useMemo(() => publicAddress(adapter, documentRef), [adapter, documentRef]);
+    const issueItems = useIssues(diagnostics);
+    const checked = useEditorState((state) => state.validation !== undefined);
+    // The store only schedules the checks after a change, so a freshly opened page would stay
+    // "unchecked" (an empty drawer and a green status bar) until something ran them by hand.
+    useEffect(() => {
+        if (!checked)
+            store.validateNow();
+    }, [checked, store]);
+    const issueCounts = checked ? countIssues(issueItems) : undefined;
+    // Below the overlay breakpoint the inspector is a sheet: a block the author picks on the canvas
+    // opens it. Only a pick on the canvas does (the focus sits in its frame then); a selection that
+    // came from a panel, a shortcut or a command leaves the sheets as they are.
+    const selectedIds = useEditorState((state) => state.selectedIds);
+    useEffect(() => {
+        if (selectedIds.length === 0)
+            return;
+        const panels = panelsRef.current;
+        if (panels === undefined || !panels.narrow || panels.open.right)
+            return;
+        const frame = area.current?.querySelector('iframe');
+        if (frame !== null && frame !== undefined && document.activeElement === frame)
+            panels.toggle('right');
+    }, [selectedIds]);
     useRegisterDragHost(host);
     useRegisterCanvas(() => {
         const frame = area.current?.querySelector('iframe');
@@ -187,20 +302,197 @@ function Shell(props) {
             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] }));
+    // Removing: a node without blocks inside goes at once, with an Undo toast; one with blocks asks first.
+    const removeNow = (request) => {
+        const { doc } = store.getState();
+        const [first] = request.ids;
+        const node = first === undefined ? undefined : doc.nodes[first];
+        const base = node?.name ?? componentMeta(manifest, node?.type ?? '')?.label ?? node?.type ?? '';
+        const name = request.ids.length > 1 ? `${base} +${request.ids.length - 1}` : base;
+        const result = store.dispatch({ type: 'node.remove', payload: { ids: [...request.ids] } });
+        if (!result.ok) {
+            toast.show({ id: 'remove.undo', variant: 'error', message: result.error.message });
+            return;
+        }
+        const version = store.getState().docVersion;
+        toast.show({
+            id: 'remove.undo',
+            variant: 'success',
+            message: request.ids.length > 1
+                ? plural('toast.deletedCount', request.ids.length)
+                : interpolate(t('toast.deleted'), { name }),
+            action: {
+                label: t('toast.undo'),
+                onSelect: () => {
+                    // Never undo a later, unrelated edit from an old notification.
+                    if (store.getState().docVersion === version)
+                        store.undo();
+                    toast.dismiss('remove.undo');
+                },
+            },
+        });
+    };
+    const requestRemoveRef = useRef((_request) => { });
+    requestRemoveRef.current = (request) => {
+        if (structureLockedIds(store.getState().doc, request.ids).length > 0) {
+            notifyLocked(request.ids);
+            return;
+        }
+        if (request.hasDescendants)
+            setRemoval(request);
+        else
+            removeNow(request);
+    };
+    const requestRemove = useCallback((request) => requestRemoveRef.current(request), []);
+    const focusSearch = () => {
+        revealLeft(panelsRef.current, 'blocks');
+        setPaletteMode('blocks');
+        setSearchFocus((count) => count + 1);
+    };
+    // Once the Blocks tab is mounted and the panel is open, put the caret in the search field.
+    useEffect(() => {
+        if (searchFocus === 0)
+            return;
+        searchRef.current?.focus();
+        searchRef.current?.select();
+    }, [searchFocus]);
+    bridge.current.setDevice = (key) => {
+        const target = config.breakpoints[Number(key) - 1];
+        if (target !== undefined)
+            changeBreakpoint(target.id);
+    };
+    bridge.current.togglePanels = () => {
+        const panels = panelsRef.current;
+        if (panels === undefined)
+            return;
+        if (panels.narrow) {
+            // Below the overlay breakpoint the panels are overlays: close the open one, else open the left.
+            panels.toggle(panels.open.right ? 'right' : 'left');
+            return;
+        }
+        const anyOpen = panels.collapsed?.left !== true || panels.collapsed?.right !== true;
+        if (anyOpen)
+            panels.collapseAll?.();
+        else
+            panels.expandAll?.();
+    };
+    bridge.current.focusBlockSearch = focusSearch;
+    bridge.current.onRemove = requestRemove;
+    return (_jsxs(_Fragment, { children: [_jsx(EditorLayout, { toolbar: _jsx(Toolbar, { title: title, onTitleChange: canRename ? changeTitle : undefined, slug: ready.loaded.slug, status: ready.loaded.status, breakpoints: config.breakpoints, breakpoint: breakpoint, onBreakpointChange: changeBreakpoint, cmsUrl: adapter.cmsUrl?.(documentRef), historyUrl: props.historyUrl ?? optionalUrl(adapter, 'historyUrl', documentRef), helpUrl: optionalUrl(adapter, 'helpUrl', documentRef), onPreview: preview.preview, onPublish: () => setPublishOpen(true), canPublish: ready.canPublish, onLocaleChange: (next) => host?.setLocale(next), sample: {
+                        adapter,
+                        docRef: documentRef,
+                        onChange: (contextRef) => host?.setContextRef(contextRef ?? ready.loaded.contextRef ?? null),
+                    }, pageOptionsOpen: pageOptionsOpen, onPageOptionsOpenChange: setPageOptionsOpen }), left: _jsx(LeftColumn, { mode: paletteMode, onModeChange: setPaletteMode, searchRef: searchRef, onRemoveRequest: requestRemove }), center: _jsx("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, emptyPage: {
+                            onAddBlock: focusSearch,
+                            onPickPattern: () => {
+                                revealLeft(panelsRef.current, 'blocks');
+                                setPaletteMode('patterns');
+                            },
+                        }, callbacks: {
+                            onLocked: notifyLocked,
+                            onAction: (event) => {
+                                const { id, action } = event;
+                                const { doc } = store.getState();
+                                const index = createIndex(doc);
+                                const parentId = index.parentOf[id];
+                                if (action === 'selectParent') {
+                                    if (parentId && parentId !== doc.root)
+                                        store.select(parentId);
+                                    else
+                                        store.clearSelection();
+                                }
+                                else if (action === 'remove')
+                                    requestRemove({ ids: [id], hasDescendants: hasDescendants(doc, [id]) });
+                                else if (action === 'duplicate')
+                                    store.dispatch({ type: 'node.duplicate', payload: { ids: [id] } });
+                                else if (action === 'align')
+                                    store.dispatch({
+                                        type: 'node.setStyle',
+                                        payload: {
+                                            id,
+                                            layer: {},
+                                            group: 'typography',
+                                            property: 'textAlign',
+                                            value: event.value,
+                                        },
+                                    });
+                                else if (action === 'more') {
+                                    const rect = area.current?.querySelector('iframe')?.getBoundingClientRect();
+                                    const frame = area.current?.querySelector('iframe');
+                                    const scale = rect && frame?.offsetWidth ? rect.width / frame.offsetWidth : 1;
+                                    setCanvasMenu({
+                                        id,
+                                        x: (rect?.left ?? 0) + (event.point?.x ?? 0) * scale,
+                                        y: (rect?.top ?? 0) + (event.point?.y ?? 0) * scale,
+                                    });
+                                }
+                                else {
+                                    const slot = index.slotOf[id];
+                                    const position = index.indexOf[id];
+                                    if (!parentId || !slot || position === undefined)
+                                        return;
+                                    const target = position + (action === 'moveUp' ? -1 : 1);
+                                    const siblings = doc.nodes[parentId]?.slots?.[slot] ?? [];
+                                    if (target >= 0 && target < siblings.length)
+                                        store.dispatch({
+                                            type: 'node.move',
+                                            payload: {
+                                                ids: [id],
+                                                parentId,
+                                                slot,
+                                                index: action === 'moveUp' ? target : target + 1,
+                                            },
+                                        });
+                                }
+                            },
+                            onInsert: ({ target }) => {
+                                const children = store.getState().doc.nodes[target.parentId]?.slots?.[target.slot] ?? [];
+                                const previous = children[target.index - 1];
+                                store.select(previous ?? target.parentId);
+                                // After the selection: a selection change ends the previous target.
+                                view.setInsertionTarget(target);
+                                focusSearch();
+                            },
+                            onKeyDown: (event) => {
+                                forward({ key: event.key, mods: event.mods });
+                            },
+                            onDropTarget: (event) => engine.receiveTarget(event.target, event.reason),
+                        } }) }), right: _jsx(InspectorDataProvider, { schema: data.schema, context: data.context, children: _jsx(StyleSectionsProvider, { children: _jsx(Inspector, { locale: locale, defaultLocale: locales.default, tab: inspectorTab, onTabChange: setInspectorTab, headerActions: _jsx(SectionsToggle, {}), onPageSettings: () => setPageOptionsOpen(true), onRemoveRequest: requestRemove, renderStyle: (node, query) => (_jsx(StyleInspector, { node: node, query: query, ...(breakpoint === config.breakpoints[0]?.id ? {} : { breakpoint }) })) }) }) }), rightRail: _jsx(RightRail, { tab: inspectorTab, onTabChange: setInspectorTab }), breadcrumbs: _jsx(Breadcrumbs, {}), issues: _jsx(IssuesPanel, { canvasDiagnostics: diagnostics }), issueCounts: issueCounts, status: _jsxs(_Fragment, { children: [_jsx(PanelsTap, { into: panelsRef }), _jsx("button", { type: "button", className: "bd-status-btn", "aria-pressed": view.outlines, "aria-label": t('statusBar.guides'), title: t('statusBar.guides'), onClick: view.toggleOutlines, children: _jsx(Icon, { name: "square-dashed" }) }), _jsx(StatusInfo, { host: host, breakpoints: config.breakpoints, breakpoint: breakpoint })] }) }), canvasMenu ? (_jsxs("div", { role: "menu", className: "bd-menu bd-menu-in", ref: canvasMenuRef, "data-state": "open", "aria-label": t('layers.menu'), style: { position: 'fixed', left: canvasMenu.x, top: canvasMenu.y, zIndex: 1000 }, onKeyDown: (event) => {
+                    if (event.key === 'Escape')
+                        setCanvasMenu(null);
+                }, children: [_jsx("button", { type: "button", role: "menuitem", className: "bd-menu-item", onClick: () => {
+                            setRenameId(canvasMenu.id);
+                            setCanvasMenu(null);
+                        }, children: t('layers.menu.rename') }), _jsx("button", { type: "button", role: "menuitem", className: "bd-menu-item", onClick: () => {
+                            if (isNodeStructureLocked(store.getState().doc, canvasMenu.id))
+                                notifyLocked([canvasMenu.id]);
+                            else
+                                store.dispatch({ type: 'node.duplicate', payload: { ids: [canvasMenu.id] } });
+                            setCanvasMenu(null);
+                        }, children: t('layers.menu.duplicate') }), _jsx("button", { type: "button", role: "menuitem", className: "bd-menu-item", onClick: () => {
+                            requestRemove({
+                                ids: [canvasMenu.id],
+                                hasDescendants: hasDescendants(store.getState().doc, [canvasMenu.id]),
+                            });
+                            setCanvasMenu(null);
+                        }, children: t('layers.menu.delete') })] })) : null, renameId ? (_jsx("input", { "aria-label": t('layers.rename'), defaultValue: store.getState().doc.nodes[renameId]?.name ?? '', ref: (input) => input?.focus(), onKeyDown: (event) => {
+                    if (event.key === 'Escape')
+                        setRenameId(null);
+                    if (event.key === 'Enter') {
+                        store.dispatch({
+                            type: 'node.setAttr',
+                            payload: { id: renameId, key: 'name', value: event.currentTarget.value || null },
+                        });
+                        setRenameId(null);
+                    }
+                } })) : null, _jsx(PublishDialog, { open: publishOpen, onOpenChange: setPublishOpen, canvasDiagnostics: diagnostics, pageName: title, address: publicUrl }), _jsx(RemoveConfirm, { request: removal, onCancel: () => setRemoval(null), onConfirm: (request) => {
+                    setRemoval(null);
+                    removeNow(request);
+                } }), preview.overlay] }));
 }

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

@@ -6,6 +6,19 @@ 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;
+// The test reaches the canvas host (its status drives the empty-page state) through `onHost`.
+const canvas = vi.hoisted(() => ({ host: null }));
+vi.mock('../canvas-host/index.ts', async (importOriginal) => {
+    const actual = await importOriginal();
+    const Frame = actual.CanvasFrame;
+    return {
+        ...actual,
+        CanvasFrame: (props) => (_jsx(Frame, { ...props, onHost: (host) => {
+                canvas.host = host;
+                props.onHost?.(host);
+            } })),
+    };
+});
 const item = {
     type: 'buildr/item',
     version: 1,
@@ -13,7 +26,7 @@ const item = {
     category: 'content',
     props: {},
     contentCategories: ['flow'],
-    styles: { groups: [] },
+    styles: { groups: ['layout'] },
     runtime: 'shared',
     slots: { default: {} },
 };
@@ -24,6 +37,27 @@ const page = {
     capabilities: { root: true },
 };
 const registry = createRegistryMeta({ components: [page, item] });
+const nested = {
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['outerAAAA1'] } },
+        outerAAAA1: {
+            id: 'outerAAAA1',
+            type: 'buildr/item',
+            name: 'Outer',
+            slots: { default: ['innerAAAA1'] },
+        },
+        innerAAAA1: { id: 'innerAAAA1', type: 'buildr/item', name: 'Inner' },
+    },
+    components: { 'buildr/page': 1, 'buildr/item': 1 },
+};
+const empty = {
+    schemaVersion: 1,
+    root: 'root',
+    nodes: { root: { id: 'root', type: 'buildr/page', slots: { default: [] } } },
+    components: { 'buildr/page': 1 },
+};
 const document = {
     schemaVersion: 1,
     root: 'root',
@@ -33,14 +67,14 @@ const document = {
     },
     components: { 'buildr/page': 1, 'buildr/item': 1 },
 };
-const adapter = (overrides = {}) => ({
+const adapter = (overrides = {}, doc = document) => ({
     getSession: async () => ({ canEdit: true, canPublish: true }),
     load: async () => ({
         title: 'My page',
         status: 'draft',
         updatedAt: '2026-01-01T00:00:00.000Z',
         revision: 1,
-        document,
+        document: doc,
     }),
     save: async (_ref, { baseRevision }) => ({ ok: true, revision: baseRevision + 1, updatedAt: '' }),
     publish: async (_ref, { baseRevision }) => ({
@@ -72,6 +106,8 @@ describe('EditorApp', () => {
     afterEach(() => {
         act(() => root.unmount());
         container.remove();
+        canvas.host = null;
+        window.localStorage.clear();
     });
     const props = (a) => ({
         adapter: a,
@@ -102,7 +138,7 @@ describe('EditorApp', () => {
             release();
         });
         await act(async () => undefined);
-        expect(container.querySelector('h1')?.textContent).toBe('My page');
+        expect(container.querySelector('.bd-page-chip-title')?.textContent).toBe('My page');
         expect(container.querySelector('iframe')).not.toBeNull();
         expect(container.textContent).toContain('Insert');
         expect(container.textContent).toContain('Publish');
@@ -115,7 +151,7 @@ describe('EditorApp', () => {
         }));
         expect(container.querySelector('[role=alert]')?.textContent).toContain('could not be opened');
     });
-    it('offers the Layers tab and does not save an untouched document', async () => {
+    it('offers the Structure tab and does not save an untouched document', async () => {
         vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
         try {
             const save = vi.fn(async (_ref, { baseRevision }) => ({
@@ -124,7 +160,7 @@ describe('EditorApp', () => {
                 updatedAt: '',
             }));
             await show(adapter({ save: save }));
-            const layers = [...container.querySelectorAll('[role=tab]')].find((tab) => tab.textContent === 'Layers');
+            const layers = [...container.querySelectorAll('[role=tab]')].find((tab) => tab.textContent === 'Structure');
             expect(layers).toBeDefined();
             expect(save).not.toHaveBeenCalled();
         }
@@ -132,4 +168,106 @@ describe('EditorApp', () => {
             vi.useRealTimers();
         }
     });
+    const tab = (name) => [...container.querySelectorAll('[role=tab]')].find((el) => el.textContent === name);
+    const rows = () => [...container.querySelectorAll('[role=treeitem]')];
+    const rowNamed = (name) => rows().find((row) => row.textContent?.includes(name));
+    const press = async (init) => {
+        await act(async () => {
+            window.document.body.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, ...init }));
+        });
+    };
+    const openStructure = async () => {
+        await act(async () => tab('Structure')?.click());
+    };
+    const toastUndo = () => [...window.document.querySelectorAll('.bd-toast button')].find((b) => b.textContent === 'Undo');
+    it('removes a block without descendants at once and the Undo toast restores it', async () => {
+        await show(adapter());
+        await openStructure();
+        await act(async () => rowNamed('First')?.click());
+        await press({ key: 'Delete' });
+        expect(rowNamed('First')).toBeUndefined();
+        expect(window.document.querySelector('[role=alertdialog]')).toBeNull();
+        expect(toastUndo()).toBeDefined();
+        await act(async () => toastUndo()?.click());
+        expect(rowNamed('First')).toBeDefined();
+    });
+    it('asks before removing a block with descendants, and Cancel keeps it', async () => {
+        await show(adapter({}, nested));
+        await openStructure();
+        await act(async () => rowNamed('Outer')?.click());
+        await press({ key: 'Delete' });
+        const dialog = window.document.querySelector('[role=alertdialog]');
+        expect(dialog).not.toBeNull();
+        expect(rowNamed('Outer')).toBeDefined();
+        const cancel = [...(dialog?.querySelectorAll('button') ?? [])].find((b) => b.textContent === 'Cancel');
+        await act(async () => cancel?.click());
+        expect(window.document.querySelector('[role=alertdialog]')).toBeNull();
+        expect(rowNamed('Outer')).toBeDefined();
+        expect(toastUndo()).toBeUndefined();
+    });
+    it('switches the left panel to Patterns from the empty page', async () => {
+        await show(adapter({}, empty));
+        await openStructure();
+        expect(container.querySelector('.bd-insert')).toBeNull();
+        await act(async () => canvas.host?.state.setState({ status: 'ready' }));
+        const pattern = [...container.querySelectorAll('.bd-canvas-actions button')].find((b) => b.textContent === 'Choose a pattern');
+        await act(async () => pattern?.click());
+        expect(tab('Blocks')?.getAttribute('aria-selected')).toBe('true');
+        expect(container.querySelector('.bd-insert')?.getAttribute('data-mode')).toBe('patterns');
+    });
+    it('switches the screen size with Mod+1, Mod+2 and Mod+3', async () => {
+        await show(adapter());
+        const label = () => container.querySelector('.bd-device-label')?.textContent ?? '';
+        await press({ key: '2', ctrlKey: true });
+        expect(label()).toContain('Tablet');
+        await press({ key: '3', ctrlKey: true });
+        expect(label()).toContain('Mobile');
+        await press({ key: '1', ctrlKey: true });
+        expect(label()).toContain('Desktop');
+    });
+    it('enables the expand-all toggle once the Style tab shows its sections', async () => {
+        await show(adapter());
+        await openStructure();
+        await act(async () => rowNamed('First')?.click());
+        // The Structure tab has an expand-all button of its own; leave it so only the inspector's remains.
+        await act(async () => tab('Blocks')?.click());
+        await act(async () => tab('Style')?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0 })));
+        const toggle = [...container.querySelectorAll('button')].find((b) => /^(Expand|Collapse) all/.test(b.getAttribute('aria-label') ?? ''));
+        expect(toggle).toBeDefined();
+        expect(toggle?.disabled).toBe(false);
+    });
+    it('Mod+. collapses both panels when wide and closes the open overlay when narrow', async () => {
+        await show(adapter());
+        const sides = () => ['left', 'right'].map((s) => container.querySelector(`[data-side="${s}"]`)?.getAttribute('data-collapsed'));
+        await press({ key: '.', ctrlKey: true });
+        expect(sides()).toEqual(['true', 'true']);
+        await press({ key: '.', ctrlKey: true });
+        expect(sides()).not.toContain('true');
+        await act(async () => root.unmount());
+        root = createRoot(container);
+        const width = vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(900);
+        try {
+            await show(adapter());
+            const left = () => container.querySelector('[data-side="left"]');
+            expect(left()?.hidden).toBe(true);
+            await press({ key: '.', ctrlKey: true });
+            expect(left()?.hidden).toBe(false);
+            await press({ key: '.', ctrlKey: true });
+            expect(left()?.hidden).toBe(true);
+        }
+        finally {
+            width.mockRestore();
+        }
+    });
+    it('remembers a collapsed panel', async () => {
+        await show(adapter());
+        const collapse = [...container.querySelectorAll('button')].find((b) => b.getAttribute('aria-label') === 'Collapse panel');
+        await act(async () => collapse?.click());
+        const side = () => container.querySelector('[data-side="left"]');
+        expect(side()?.getAttribute('data-collapsed')).toBe('true');
+        await act(async () => root.unmount());
+        root = createRoot(container);
+        await show(adapter());
+        expect(side()?.getAttribute('data-collapsed')).toBe('true');
+    });
 });