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

package/dist/panels/layers/layers-panel.test.js

@@ -7,9 +7,12 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { axe } from 'vitest-axe';
 import * as matchers from 'vitest-axe/matchers';
 import { ManifestProvider } from '../../app/manifest.js';
+import { ClipboardProvider } from '../../clipboard/index.js';
 import { MessagesProvider } from '../../messages/index.js';
+import { ShortcutProvider } from '../../shortcuts/index.js';
 import { createEditorStore, EditorStoreProvider } from '../../store/index.js';
-import { flattenTree } from './flatten.js';
+import { ToastProvider } from '../../ui/index.js';
+import { filterTree, flattenTree } from './flatten.js';
 import { LayersPanel } from './layers-panel.js';
 expect.extend(matchers);
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -69,14 +72,15 @@ afterEach(() => {
     act(() => root.unmount());
     document.body.innerHTML = '';
 });
-async function mount(doc = fixture()) {
+async function mount(doc = fixture(), connected = false, canUnlock) {
     const store = createEditorStore({
+        ...(canUnlock === undefined ? {} : { canUnlock }),
         doc,
         registry,
         generateId: createSeededIdGenerator(9),
         validationDelayMs: null,
     });
-    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: toManifest(registry), children: _jsx(EditorStoreProvider, { store: store, children: _jsx(LayersPanel, {}) }) }) })));
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: toManifest(registry), children: _jsx(EditorStoreProvider, { store: store, children: connected ? (_jsx(ToastProvider, { children: _jsx(ClipboardProvider, { children: _jsx(ShortcutProvider, { children: _jsx(LayersPanel, {}) }) }) })) : (_jsx(LayersPanel, {})) }) }) })));
     return store;
 }
 const tree = () => container.querySelector('[role=tree]');
@@ -121,15 +125,23 @@ describe('flattenTree', () => {
 describe('LayersPanel', () => {
     it('is an ARIA tree with names from the manifest and no accessibility violations', async () => {
         await mount();
-        expect(tree().getAttribute('aria-label')).toBe('Layers');
+        expect(tree().getAttribute('aria-label')).toBe('Page structure');
         expect(labels()).toEqual(['page', 'Hero', 'Box']);
         const [, hero] = items();
         expect(hero?.getAttribute('aria-level')).toBe('2');
+        expect(hero?.style.height).toBe('32px');
+        expect(hero?.querySelector('[data-row-actions]')).not.toBeNull();
+        expect(hero?.querySelector('[data-row-actions]')?.querySelectorAll('button')).toHaveLength(3);
         expect(hero?.getAttribute('aria-posinset')).toBe('1');
         expect(hero?.getAttribute('aria-setsize')).toBe('2');
         expect(hero?.getAttribute('aria-expanded')).toBe('false');
         expect(await axe(container)).toHaveNoViolations();
     });
+    it('shows a muted type label only on a renamed block', async () => {
+        await mount();
+        const types = items().map((item) => item.querySelector('.bd-layer-type')?.textContent ?? null);
+        expect(types).toEqual([null, 'Box', null]);
+    });
     it('draws an svg icon per row: the named one, or the neutral box, never a letter', async () => {
         await mount();
         const icons = items().map((item) => item.querySelector('.bd-layer-icon svg'));
@@ -143,10 +155,59 @@ describe('LayersPanel', () => {
         expect(icons[2]?.hasAttribute('data-fallback')).toBe(false);
         expect(items().every((item) => item.querySelector('.bd-layer-icon')?.textContent === '')).toBe(true);
     });
-    it('shows badges with accessible names', async () => {
+    it('shows a locked node as a pressed lock toggle', async () => {
         await mount();
         const [, , locked] = items();
-        expect(locked?.querySelector('[role=img]')?.getAttribute('aria-label')).toBe('Locked');
+        const lock = locked?.querySelector('button[aria-label="Unlock"]');
+        expect(lock?.getAttribute('aria-pressed')).toBe('true');
+    });
+    it('hides a node in the editor through the view store, not the document', async () => {
+        const store = await mount();
+        const before = store.getState().doc;
+        const row = items().find((i) => i.dataset['nodeId'] === 'boxNode001');
+        const eye = row?.querySelector('button[aria-label="Hide in editor"]');
+        expect(eye?.getAttribute('aria-pressed')).toBe('false');
+        await act(async () => eye?.click());
+        expect(store.view.getState().hiddenIds).toEqual(['boxNode001']);
+        expect(store.getState().doc).toBe(before);
+        expect(items()
+            .find((i) => i.dataset['nodeId'] === 'boxNode001')
+            ?.querySelector('button[aria-label="Show in editor"]')
+            ?.getAttribute('aria-pressed')).toBe('true');
+    });
+    it('locks a node with the document command', async () => {
+        const store = await mount();
+        const row = items().find((i) => i.dataset['nodeId'] === 'boxNode001');
+        await act(async () => row?.querySelector('button[aria-label="Lock"]')?.click());
+        expect(store.getState().doc.nodes['boxNode001']?.lock).toEqual({
+            structure: true,
+            content: true,
+            style: true,
+        });
+    });
+    it('unlocks a locked node when the host allows it', async () => {
+        const store = await mount(fixture(), false, () => true);
+        const row = items().find((i) => i.dataset['nodeId'] === 'boxNode002');
+        await act(async () => row?.querySelector('button[aria-label="Unlock"]')?.click());
+        expect(store.getState().doc.nodes['boxNode002']?.lock).toBeUndefined();
+        expect(container.querySelector('.bd-layers-notice')?.textContent).toBe('');
+    });
+    it('says so, and keeps the lock, when the host does not allow unlocking', async () => {
+        const store = await mount();
+        const row = items().find((i) => i.dataset['nodeId'] === 'boxNode002');
+        await act(async () => row?.querySelector('button[aria-label="Unlock"]')?.click());
+        expect(store.getState().doc.nodes['boxNode002']?.lock).toEqual({ content: true });
+        expect(container.querySelector('.bd-layers-notice')?.textContent).toBe('You are not allowed to unlock this block.');
+    });
+    it('only points to the Structure panel when unlocking is possible', async () => {
+        const store = await mount(fixture(), true);
+        const row = items().find((i) => i.dataset['nodeId'] === 'boxNode001');
+        await act(async () => row?.querySelector('button[aria-label="Lock"]')?.click());
+        await pick(store, 'boxNode001');
+        await act(async () => tree().focus());
+        await press('Delete');
+        expect(container.textContent).toContain('This block is locked.');
+        expect(container.textContent).not.toContain('Unlock it in the Structure panel');
     });
     it('is operable with the keyboard alone', async () => {
         const store = await mount();
@@ -176,7 +237,7 @@ describe('LayersPanel', () => {
         await pick(store, 'boxNode002');
         await act(async () => tree().focus());
         await press('F2');
-        const input = container.querySelector('input');
+        const input = container.querySelector('[role=tree] input');
         expect(input.getAttribute('aria-label')).toBe('Layer name');
         await act(async () => {
             input.value = 'Footer';
@@ -184,10 +245,10 @@ describe('LayersPanel', () => {
         });
         expect(store.getState().doc.nodes['boxNode002']?.name).toBe('Footer');
         expect(store.getState().undoLabel).toBe('node.setAttr');
-        expect(container.querySelector('input')).toBeNull();
+        expect(container.querySelector('[role=tree] input')).toBeNull();
         await press('F2');
         await act(async () => {
-            const again = container.querySelector('input');
+            const again = container.querySelector('[role=tree] input');
             again.value = 'Nope';
             again.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
         });
@@ -204,6 +265,23 @@ describe('LayersPanel', () => {
         expect(store.getState().doc.nodes['boxNode001']).toBeUndefined();
         expect(labels()).toEqual(['page', 'Box']);
     });
+    it('keeps a locked block in place: Delete and the menu say why and change nothing', async () => {
+        const store = await mount(fixture(), true, () => true);
+        const row = items().find((i) => i.dataset['nodeId'] === 'boxNode001');
+        await act(async () => row?.querySelector('button[aria-label="Lock"]')?.click());
+        const locked = store.getState().doc;
+        await pick(store, 'boxNode001');
+        await act(async () => tree().focus());
+        await press('Delete');
+        const message = 'This block is locked. Unlock it in the Structure panel.';
+        expect(container.textContent).toContain(message);
+        expect(store.getState().doc).toBe(locked);
+        // An unlocked sibling still goes.
+        await pick(store, 'boxNode002');
+        await act(async () => tree().focus());
+        await press('Delete');
+        expect(store.getState().doc.nodes['boxNode002']).toBeUndefined();
+    });
     it('opens the ancestors of a node selected elsewhere, and marks it selected', async () => {
         const store = await mount();
         expect(labels()).toEqual(['page', 'Hero', 'Box']);
@@ -245,14 +323,46 @@ describe('LayersPanel', () => {
         expect(store.getState().selectedIds).toEqual(['boxNode001']);
         const menu = document.body.querySelector('[role=menu]');
         expect(menu?.getAttribute('aria-label')).toBe('Layer actions');
-        const names = [...(menu?.querySelectorAll('[role=menuitem]') ?? [])].map((i) => i.textContent);
-        expect(names).toEqual(['Rename', 'Duplicate', 'Wrap in container', 'Unwrap', 'Delete']);
-        const duplicate = [...(menu?.querySelectorAll('[role=menuitem]') ?? [])].find((i) => i.textContent === 'Duplicate');
+        const names = [...(menu?.querySelectorAll('[role=menuitem]') ?? [])].map((i) => i.querySelector('.bd-menu-item-label')?.textContent);
+        expect(names).toEqual([
+            'Rename',
+            'Duplicate',
+            'Copy',
+            'Paste',
+            'Wrap in container',
+            'Unwrap',
+            'Hide in editor',
+            'Lock',
+            'Delete',
+        ]);
+        const duplicate = [...(menu?.querySelectorAll('[role=menuitem]') ?? [])].find((i) => i.querySelector('.bd-menu-item-label')?.textContent === 'Duplicate');
         await act(async () => {
             duplicate.click();
         });
         expect(store.getState().doc.nodes['root']?.slots?.['default']).toHaveLength(3);
     });
+    it('copies through the shared clipboard and pastes as an undoable command', async () => {
+        const store = await mount({ ...fixture(), components: { 'buildr/page': 1, 'buildr/box': 1, 'buildr/text': 1 } }, true);
+        const open = async () => act(async () => {
+            items()
+                .find((i) => i.dataset['nodeId'] === 'boxNode001')
+                ?.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }));
+        });
+        const action = (label) => [...document.querySelectorAll('[role=menuitem]')].find((i) => i.querySelector('.bd-menu-item-label')?.textContent === label);
+        const before = store.getState().doc;
+        await open();
+        await act(async () => action('Copy').click());
+        expect(store.getState().doc).toBe(before);
+        await open();
+        expect(await axe(document.querySelector('[role=menu]'))).toHaveNoViolations();
+        await act(async () => action('Paste').click());
+        expect(store.getState().doc.nodes['root']?.slots?.['default']).toHaveLength(3);
+        expect(store.getState().undoLabel).toBe('node.insert');
+        await act(async () => {
+            store.undo();
+        });
+        expect(store.getState().doc).toEqual(before);
+    });
     it('opens the same context menu from the hover "more" button, without starting a rename', async () => {
         const store = await mount();
         const more = items()[1]?.querySelector('[data-more] button');
@@ -263,7 +373,7 @@ describe('LayersPanel', () => {
         expect(store.getState().selectedIds).toEqual(['boxNode001']);
         const menu = document.body.querySelector('[role=menu]');
         expect(menu?.getAttribute('aria-label')).toBe('Layer actions');
-        expect(container.querySelector('input')).toBeNull();
+        expect(container.querySelector('[role=tree] input')).toBeNull();
     });
     it('does not offer changes in a read-only document', async () => {
         const store = await mount();
@@ -273,7 +383,7 @@ describe('LayersPanel', () => {
         await press('Delete');
         await press('F2');
         expect(store.getState().doc.nodes['boxNode001']).toBeDefined();
-        expect(container.querySelector('input')).toBeNull();
+        expect(container.querySelector('[role=tree] input')).toBeNull();
     });
 });
 describe('a large document', () => {
@@ -304,7 +414,7 @@ describe('a large document', () => {
         expect(items().length).toBeLessThan(40);
         expect(elapsed).toBeLessThan(500);
         const list = container.querySelector('.bd-layers-list');
-        expect(list.style.height).toBe(`${1001 * 28}px`);
+        expect(list.style.height).toBe(`${1001 * 32}px`);
     });
     it('scrolls the row of a far selection into view', async () => {
         const store = await mount(big());
@@ -313,3 +423,51 @@ describe('a large document', () => {
         expect(present).toContain('n000000900');
     });
 });
+describe('structure filter and expand all (PB-157)', () => {
+    const field = () => container.querySelector('.bd-layers-filter input');
+    const typeFilter = (value) => act(async () => {
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(field(), value);
+        field().dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    const tool = (label) => container.querySelector(`button[aria-label="${label}"]`);
+    it('filterTree keeps the ancestors of a match and opens them', () => {
+        const doc = fixture();
+        const { only, open } = filterTree(doc, (n) => n.id === 'textNodeB1');
+        expect([...only].sort()).toEqual(['boxNode001', 'root', 'textNodeB1']);
+        expect(open.has('boxNode001')).toBe(true);
+        const rows = flattenTree(doc, open, only);
+        expect(rows.map((r) => r.id)).toEqual(['root', 'boxNode001', 'textNodeB1']);
+    });
+    it('shows only the matching blocks with their ancestors, and says when nothing matches', async () => {
+        await mount();
+        await typeFilter('hero');
+        expect(labels()).toEqual(['page', 'Hero']);
+        await typeFilter('text');
+        expect(labels()).toContain('Hero');
+        expect(items().length).toBe(4);
+        await typeFilter('zzz');
+        expect(items().length).toBe(0);
+        expect(container.querySelector('.bd-layers-empty')?.textContent).toBe('No blocks match the filter.');
+        await typeFilter('');
+        expect(container.querySelector('.bd-layers-empty')).toBeNull();
+    });
+    it('collapses and expands the whole tree, and is off while filtering', async () => {
+        await mount();
+        await act(async () => tool('Collapse all').click());
+        expect(items().length).toBe(3);
+        await act(async () => tool('Expand all').click());
+        expect(items().length).toBe(5);
+        await typeFilter('a');
+        expect(tool('Expand all').disabled).toBe(true);
+        expect(tool('Collapse all').disabled).toBe(true);
+    });
+    it('moves from the filter field into the tree with the down arrow', async () => {
+        await mount();
+        field().focus();
+        await act(async () => {
+            field().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+        });
+        expect(container.contains(document.activeElement)).toBe(true);
+        expect(document.activeElement).not.toBe(field());
+    });
+});

package/dist/panels/left-panel.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import { type LeftPanelTab } from '../app/contracts.ts';
+export interface LeftPanelProps {
+    readonly tab: LeftPanelTab;
+    readonly onTabChange: (tab: LeftPanelTab) => void;
+    readonly onCollapse: () => void;
+    /** The Blocks tab (`InsertPanel`). */
+    readonly blocks: ReactNode;
+    /** The Structure tab (`LayersPanel`). */
+    readonly structure: ReactNode;
+}
+/**
+ * The left panel: Blocks and Structure tabs (a tablist with arrow-key roving), a collapse button
+ * and the active tab's body. Only the active body is mounted.
+ */
+export declare function LeftPanel({ tab, onTabChange, onCollapse, blocks, structure }: LeftPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=left-panel.d.ts.map

package/dist/panels/left-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-panel.d.ts","sourceRoot":"","sources":["../../src/panels/left-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIzE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;CAC/B;AAOD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,cAAc,+BAwE5F"}

package/dist/panels/left-panel.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { LEFT_PANEL_TABS } from '../app/contracts.js';
+import { useT } from '../messages/index.js';
+import { Icon, IconButton } from '../ui/index.js';
+const TAB_ICON = {
+    blocks: 'layout-grid',
+    structure: 'list-tree',
+};
+/**
+ * The left panel: Blocks and Structure tabs (a tablist with arrow-key roving), a collapse button
+ * and the active tab's body. Only the active body is mounted.
+ */
+export function LeftPanel({ tab, onTabChange, onCollapse, blocks, structure }) {
+    const t = useT();
+    const base = useId();
+    const refs = useRef(new Map());
+    const tabId = (value) => `${base}-tab-${value}`;
+    const panelId = `${base}-panel`;
+    const onKeyDown = (event) => {
+        const index = LEFT_PANEL_TABS.indexOf(tab);
+        const last = LEFT_PANEL_TABS.length - 1;
+        let next;
+        if (event.key === 'ArrowRight')
+            next = index === last ? 0 : index + 1;
+        else if (event.key === 'ArrowLeft')
+            next = index === 0 ? last : index - 1;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = last;
+        else
+            return;
+        event.preventDefault();
+        const value = LEFT_PANEL_TABS[next];
+        if (value === undefined)
+            return;
+        onTabChange(value);
+        refs.current.get(value)?.focus();
+    };
+    return (_jsxs("aside", { className: "bd-left-panel", "aria-label": t('leftPanel.label'), children: [_jsxs("div", { className: "bd-left-panel-head", children: [_jsx("div", { role: "tablist", "aria-label": t('leftPanel.tablistLabel'), className: "bd-tabs-list", onKeyDown: onKeyDown, children: LEFT_PANEL_TABS.map((value) => (_jsxs("button", { ref: (node) => {
+                                if (node === null)
+                                    refs.current.delete(value);
+                                else
+                                    refs.current.set(value, node);
+                            }, type: "button", role: "tab", id: tabId(value), className: "bd-tab", "data-state": tab === value ? 'active' : 'inactive', "aria-selected": tab === value, "aria-controls": tab === value ? panelId : undefined, tabIndex: tab === value ? 0 : -1, onClick: () => onTabChange(value), children: [_jsx(Icon, { name: TAB_ICON[value] }), t(`leftPanel.tab.${value}`)] }, value))) }), _jsx(IconButton, { size: "sm", icon: "chevrons-left", label: t('leftPanel.collapse'), onClick: onCollapse })] }), _jsx("div", { role: "tabpanel", id: panelId, "aria-labelledby": tabId(tab), className: "bd-left-panel-body", "data-tab": tab, children: tab === 'blocks' ? blocks : structure })] }));
+}

package/dist/panels/left-panel.test.d.ts

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

package/dist/panels/left-panel.test.d.ts.map

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

package/dist/panels/left-panel.test.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { act, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { axe } from 'vitest-axe';
+import * as matchers from 'vitest-axe/matchers';
+import { MessagesProvider } from '../messages/index.js';
+import { LeftPanel } from './left-panel.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+function Harness({ onCollapse }) {
+    const [tab, setTab] = useState('blocks');
+    return (_jsx(LeftPanel, { tab: tab, onTabChange: setTab, onCollapse: onCollapse, blocks: _jsx("p", { children: "blocks body" }), structure: _jsx("p", { children: "structure body" }) }));
+}
+async function mount(locale = 'en', onCollapse = () => { }) {
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: locale, children: _jsx(Harness, { onCollapse: onCollapse }) })));
+}
+const tabs = () => [...container.querySelectorAll('[role=tab]')];
+const key = (el, k) => act(async () => {
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
+});
+describe('LeftPanel', () => {
+    it('is a labelled tablist with a tabpanel and no accessibility violations', async () => {
+        await mount();
+        expect(container.querySelector('[role=tablist]')?.getAttribute('aria-label')).toBe('Left panel');
+        expect(tabs().map((t) => t.textContent)).toEqual(['Blocks', 'Structure']);
+        expect(tabs().map((t) => t.getAttribute('aria-selected'))).toEqual(['true', 'false']);
+        expect(tabs().map((t) => t.tabIndex)).toEqual([0, -1]);
+        const panel = container.querySelector('[role=tabpanel]');
+        expect(panel.textContent).toBe('blocks body');
+        expect(panel.getAttribute('aria-labelledby')).toBe(tabs()[0]?.id);
+        expect(tabs()[0]?.getAttribute('aria-controls')).toBe(panel.id);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('switches by click and by arrow keys, wrapping, moving focus', async () => {
+        await mount();
+        await act(async () => tabs()[1]?.click());
+        expect(container.querySelector('[role=tabpanel]')?.textContent).toBe('structure body');
+        await key(tabs()[1], 'ArrowRight');
+        expect(tabs()[0]?.getAttribute('aria-selected')).toBe('true');
+        expect(document.activeElement).toBe(tabs()[0]);
+        await key(tabs()[0], 'ArrowLeft');
+        expect(tabs()[1]?.getAttribute('aria-selected')).toBe('true');
+        await key(tabs()[1], 'Home');
+        expect(tabs()[0]?.getAttribute('aria-selected')).toBe('true');
+        await key(tabs()[0], 'End');
+        expect(tabs()[1]?.getAttribute('aria-selected')).toBe('true');
+    });
+    it('collapses with the collapse button', async () => {
+        const onCollapse = vi.fn();
+        await mount('en', onCollapse);
+        const button = container.querySelector('button[aria-label="Collapse panel"]');
+        await act(async () => button.click());
+        expect(onCollapse).toHaveBeenCalledOnce();
+    });
+    it('uses the Polish labels', async () => {
+        await mount('pl');
+        expect(tabs().map((t) => t.textContent)).toEqual(['Bloki', 'Struktura']);
+        expect(await axe(container)).toHaveNoViolations();
+        await act(async () => tabs()[1]?.click());
+        expect(container.querySelector('[role=tabpanel]')?.getAttribute('aria-labelledby')).toBe(tabs()[1]?.id);
+        expect(container.querySelector('[role=tabpanel] input')).toBeNull();
+        expect(await axe(container)).toHaveNoViolations();
+    });
+});

package/dist/persistence/persistence.test.js

@@ -466,18 +466,24 @@ describe('PersistenceProvider', () => {
         expect(banner()?.textContent).toBe('');
         expect(controller.state.getState().revision).toBe(2);
     });
-    it('asks the author to choose in a conflict', async () => {
+    it('asks the author to choose in a conflict, as an alert dialog, and gives focus back', async () => {
         const fake = fakeAdapter();
         fake.next = () => ({ ok: false, kind: 'conflict', currentRevision: 9 });
         const { store, controller } = await mount(fake);
+        const opener = document.createElement('button');
+        document.body.append(opener);
+        opener.focus();
         edit(store);
         await advance(2000);
-        const dialog = document.querySelector('[role=dialog]');
+        const dialog = document.querySelector('[role=alertdialog]');
         expect(dialog?.textContent).toContain('This page was changed elsewhere');
+        expect(dialog?.getAttribute('aria-describedby')).not.toBeNull();
+        expect(dialog?.querySelector('.bd-dialog-icon[data-tone="warning"]')).not.toBeNull();
         fake.next = () => ({ ok: true, revision: 10, updatedAt: 't10' });
         const overwrite = [...(dialog?.querySelectorAll('button') ?? [])].find((b) => b.textContent?.includes('Overwrite'));
         await act(async () => overwrite?.click());
         expect(status(controller)).toBe('clean');
-        expect(document.querySelector('[role=dialog]')).toBeNull();
+        expect(document.querySelector('[role=alertdialog]')).toBeNull();
+        await vi.waitFor(() => expect(document.activeElement).toBe(opener));
     });
 });

package/dist/persistence/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/persistence/react.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAyB,MAAM,OAAO,CAAC;AAK7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAInD,wBAAgB,cAAc,IAAI,qBAAqB,CAMtD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,CAAC,GAAG,CAAC,CAElF;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,+BA8BA;AAED,wGAAwG;AACxG,wBAAgB,aAAa,IAAI,MAAM,OAAO,CAM7C;AAwDD,8FAA8F;AAC9F,wBAAgB,UAAU,gCAqBzB"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/persistence/react.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAyB,MAAM,OAAO,CAAC;AAK7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAInD,wBAAgB,cAAc,IAAI,qBAAqB,CAMtD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,CAAC,GAAG,CAAC,CAElF;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,+BA8BA;AAED,wGAAwG;AACxG,wBAAgB,aAAa,IAAI,MAAM,OAAO,CAM7C;AA6DD,8FAA8F;AAC9F,wBAAgB,UAAU,gCAqBzB"}

package/dist/persistence/react.js

@@ -85,9 +85,9 @@ function ConflictDialog() {
     const t = useT();
     const controller = usePersistence();
     const status = usePersistenceState((state) => state.status);
-    return (_jsx(Dialog, { open: status === 'conflict', hideClose: true, 
+    return (_jsx(Dialog, { open: status === 'conflict', hideClose: true, alert: true, icon: "triangle-alert", tone: "warning", 
         // The choice is the only way out: closing without one would leave the editor stuck in conflict.
-        onOpenChange: () => undefined, title: t('save.conflict.title'), description: t('save.conflict.description'), footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => void controller.reload(), children: t('save.conflict.reload') }), _jsx(Button, { variant: "danger", onClick: () => void controller.overwrite(), children: t('save.conflict.overwrite') })] }) }));
+        onOpenChange: () => undefined, title: t('save.conflict.title'), description: t('save.conflict.description'), footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => void controller.reload(), children: t('save.conflict.reload') }), _jsx(Button, { variant: "primary", onClick: () => void controller.overwrite(), children: t('save.conflict.overwrite') })] }), children: _jsx("p", { children: t('dialog.conflict.note') }) }));
 }
 /** A short status line for the toolbar (PB-083): saved, unsaved, saving, failed, conflict. */
 export function SaveStatus() {

package/dist/preview/preview.d.ts

@@ -1,5 +1,13 @@
 import { type ReactNode } from 'react';
 import { type DocumentAdapter, type DocumentRef } from '../persistence/index.ts';
+/**
+ * The preview frame's sandbox. `allow-same-origin` is kept only for a preview served from the
+ * editor's own origin (the playground's `/preview` reads the draft from `sessionStorage`, which a
+ * sandboxed, opaque origin cannot). A preview on another origin has its own storage and needs no
+ * access to the editor's, so the flag is left out; with both `allow-scripts` and
+ * `allow-same-origin` a same-origin page could otherwise remove its own sandbox.
+ */
+export declare function previewSandbox(url: string, base?: string): string;
 export interface PreviewOverlayProps {
     readonly url: string;
     readonly onExit: () => void;

package/dist/preview/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/preview/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAkB,MAAM,yBAAyB,CAAC;AAIjG,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,0FAA0F;AAC1F,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BA0BlE;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;IACtD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,2FAA2F;IAC3F,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IAChD,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,0FAA0F;IAC1F,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU,CA6BjE"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/preview/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAkB,MAAM,yBAAyB,CAAC;AAIjG;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAWjE;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,0FAA0F;AAC1F,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BA0BlE;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;IACtD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,2FAA2F;IAC3F,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IAChD,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,0FAA0F;IAC1F,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU,CA6BjE"}

package/dist/preview/preview.js

@@ -4,6 +4,26 @@ import { useT } from '../messages/index.js';
 import { usePersistence } from '../persistence/index.js';
 import { Button } from '../ui/index.js';
 import { preparePreview } from './prepare.js';
+/**
+ * The preview frame's sandbox. `allow-same-origin` is kept only for a preview served from the
+ * editor's own origin (the playground's `/preview` reads the draft from `sessionStorage`, which a
+ * sandboxed, opaque origin cannot). A preview on another origin has its own storage and needs no
+ * access to the editor's, so the flag is left out; with both `allow-scripts` and
+ * `allow-same-origin` a same-origin page could otherwise remove its own sandbox.
+ */
+export function previewSandbox(url, base) {
+    const flags = ['allow-scripts', 'allow-forms', 'allow-popups'];
+    try {
+        const here = base ?? globalThis.location?.href;
+        if (here !== undefined && new URL(url, here).origin === new URL(here).origin) {
+            flags.splice(1, 0, 'allow-same-origin');
+        }
+    }
+    catch {
+        // An unparseable URL is treated as foreign: no same-origin access.
+    }
+    return flags.join(' ');
+}
 /** The page as visitors get it, over the whole editor; Escape or the button leaves it. */
 export function PreviewOverlay({ url, onExit }) {
     const t = useT();
@@ -15,7 +35,7 @@ export function PreviewOverlay({ url, onExit }) {
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
     }, [onExit]);
-    return (_jsxs("div", { className: "bd-preview", role: "dialog", "aria-modal": "true", "aria-label": t('preview.title'), children: [_jsxs("div", { className: "bd-preview-bar", children: [_jsx("span", { children: t('preview.title') }), _jsx(Button, { variant: "primary", onClick: onExit, autoFocus: true, children: t('preview.exit') })] }), _jsx("iframe", { className: "bd-preview-frame", title: t('preview.frame'), src: url, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", referrerPolicy: "no-referrer" })] }));
+    return (_jsxs("div", { className: "bd-preview", role: "dialog", "aria-modal": "true", "aria-label": t('preview.title'), children: [_jsxs("div", { className: "bd-preview-bar", children: [_jsx("span", { children: t('preview.title') }), _jsx(Button, { variant: "primary", onClick: onExit, autoFocus: true, children: t('preview.exit') })] }), _jsx("iframe", { className: "bd-preview-frame", title: t('preview.frame'), src: url, sandbox: previewSandbox(url), referrerPolicy: "no-referrer" })] }));
 }
 /** Saves, then shows the preview (docs/editor.md#preview). */
 export function usePreview(options) {

package/dist/preview/preview.test.js

@@ -9,7 +9,7 @@ import { createPersistence, PersistenceProvider } from '../persistence/index.js'
 import { createEditorStore, EditorStoreProvider } from '../store/index.js';
 import { ToastProvider } from '../ui/index.js';
 import { isSafePreviewUrl } from './prepare.js';
-import { usePreview } from './preview.js';
+import { previewSandbox, usePreview } from './preview.js';
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 const item = {
     type: 'buildr/item',
@@ -127,3 +127,20 @@ describe('preview', () => {
         expect(container.textContent).toContain('not a web address');
     });
 });
+describe('previewSandbox', () => {
+    const editor = 'https://editor.example/app';
+    it('keeps allow-same-origin only for a preview on the editor origin', () => {
+        expect(previewSandbox('/preview?x=1', editor)).toBe('allow-scripts allow-same-origin allow-forms allow-popups');
+        expect(previewSandbox('https://editor.example/preview', editor)).toContain('allow-same-origin');
+    });
+    it('omits it for another origin, another port or an unparseable URL', () => {
+        for (const url of [
+            'https://site.example/p',
+            'https://editor.example:8443/p',
+            'http://editor.example/p',
+        ]) {
+            expect(previewSandbox(url, editor)).toBe('allow-scripts allow-forms allow-popups');
+        }
+        expect(previewSandbox('http://[bad', editor)).toBe('allow-scripts allow-forms allow-popups');
+    });
+});

package/dist/shortcuts/actions.d.ts

@@ -1,4 +1,6 @@
-import type { EditorStore } from '../store/index.ts';
+import { type NodeId } from '@next-buildr/core';
+import type { RemoveRequest, ShortcutCallbacks } from '../app/contracts.ts';
+import { type EditorStore } from '../store/index.ts';
 import type { ShortcutRegistry } from './registry.ts';
 /** What the editor's own shortcuts need from outside: the actions of other modules (PB-085, PB-087). */
 export interface ExternalActions {
@@ -7,11 +9,20 @@ export interface ExternalActions {
     readonly paste?: () => boolean | undefined;
     readonly save?: () => boolean | undefined;
 }
+/** The UI-only and removal hooks of the host, read on every key press so they may change between renders. */
+export interface HostHooks {
+    readonly callbacks?: () => Partial<ShortcutCallbacks> | undefined;
+    readonly onRemove?: () => ((request: RemoveRequest) => void) | undefined;
+    /** Whether the UI-only keys may run for the key press being handled (`false` for a key aimed outside the editor). */
+    readonly uiAllowed?: () => boolean;
+    /** Tells the person why a structure-locked block was not removed, moved or duplicated. */
+    readonly onLocked?: () => ((ids?: readonly NodeId[]) => void) | undefined;
+}
 /**
  * Binds the shortcuts that act on the store (undo, redo, duplicate, delete, move, select, clear)
  * and the ones other modules provide. Returns the function that unbinds them all. An action that
  * cannot run (nothing selected, a locked node the command refuses) returns `false`, so the key is
  * not swallowed.
  */
-export declare function bindEditorActions(registry: ShortcutRegistry, store: EditorStore, external?: ExternalActions): () => void;
+export declare function bindEditorActions(registry: ShortcutRegistry, store: EditorStore, external?: ExternalActions, host?: HostHooks): () => void;
 //# sourceMappingURL=actions.d.ts.map

package/dist/shortcuts/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/shortcuts/actions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,wGAAwG;AACxG,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;CAC3C;AAyCD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,WAAW,EAClB,QAAQ,GAAE,eAAoB,GAC7B,MAAM,IAAI,CAiCZ"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/shortcuts/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,KAAK,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AAEzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,wGAAwG;AACxG,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;CAC3C;AAED,6GAA6G;AAC7G,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IAClE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACzE,qHAAqH;IACrH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC;IACnC,0FAA0F;IAC1F,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC3E;AAyDD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,WAAW,EAClB,QAAQ,GAAE,eAAoB,EAC9B,IAAI,GAAE,SAAc,GACnB,MAAM,IAAI,CA+EZ"}