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

package/dist/canvas-host/canvas-frame.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createParentTransport } from '@next-buildr/core/protocol';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useT } from '../messages/index.js';
-import { useEditor } from '../store/index.js';
+import { useManifest } from '../app/manifest.js';
+import { interpolate, useT } from '../messages/index.js';
+import { useEditor, useEditorState } from '../store/index.js';
+import { useViewState } from '../store/react.js';
+import { useTheme } from '../toolbar/theme.js';
 import { Button, Icon } from '../ui/index.js';
 import { createCanvasHost } from './host.js';
 /** A random nonce for the canvas URL: 32 hex characters, unguessable by the page in the frame's neighbours. */
@@ -39,6 +42,41 @@ const BREAKPOINT_LABELS = {
     tablet: 'toolbar.breakpoint.tablet',
     mobile: 'toolbar.breakpoint.mobile',
 };
+const TYPE_ID = /^[a-z0-9-]+\/[a-z0-9-]+$/;
+const MAX_TYPE_LABELS = 128;
+const MAX_LABEL_UNITS = 40;
+// Mirrors the protocol's label rule: plain text of 1-40 characters, no markup or control characters.
+const UNSAFE = /[<>\p{C}\p{Zl}\p{Zp}]/u;
+/**
+ * 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 function cutLabel(label) {
+    let cut = '';
+    for (const char of label) {
+        if (cut.length + char.length > MAX_LABEL_UNITS)
+            break;
+        cut += char;
+    }
+    return cut;
+}
+/** The localized component names the canvas shows on its chip: only what the protocol accepts, at most 128. */
+export function typeLabelsOf(components) {
+    const labels = {};
+    for (const [type, meta] of Object.entries(components ?? {})) {
+        if (Object.keys(labels).length >= MAX_TYPE_LABELS)
+            break;
+        const label = meta.label?.trim();
+        if (label !== undefined &&
+            label.length > 0 &&
+            type.length <= 64 &&
+            TYPE_ID.test(type) &&
+            !UNSAFE.test(label)) {
+            labels[type] = cutLabel(label);
+        }
+    }
+    return labels;
+}
 /**
  * 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
@@ -47,6 +85,25 @@ const BREAKPOINT_LABELS = {
 export function CanvasFrame(props) {
     const t = useT();
     const store = useEditor();
+    const view = useViewState();
+    const theme = useTheme();
+    const manifest = useManifest();
+    const typeLabels = useMemo(() => typeLabelsOf(manifest?.components), [manifest]);
+    const [systemDark, setSystemDark] = useState(false);
+    useEffect(() => {
+        const media = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+        if (!media)
+            return;
+        const update = () => setSystemDark(media.matches);
+        update();
+        media.addEventListener('change', update);
+        return () => media.removeEventListener('change', update);
+    }, []);
+    const resolvedTheme = theme?.attribute === 'dark' || (theme?.attribute === 'system' && systemDark) ? 'dark' : 'light';
+    const empty = useEditorState((state) => {
+        const root = state.doc.nodes[state.doc.root];
+        return Object.values(root?.slots ?? {}).every((children) => children.length === 0);
+    });
     const [attempt, setAttempt] = useState(0);
     const session = useMemo(() => {
         void attempt;
@@ -65,7 +122,6 @@ export function CanvasFrame(props) {
         if (frame === null)
             return;
         const current = propsRef.current;
-        // biome-ignore lint/style/useConst: assigned below, read by the transport's callback
         let created;
         const transport = createParentTransport({
             iframe: frame,
@@ -85,11 +141,14 @@ export function CanvasFrame(props) {
             ...(current.handshakeTimeoutMs !== undefined
                 ? { handshakeTimeoutMs: current.handshakeTimeoutMs }
                 : {}),
+            onAction: (event) => propsRef.current.callbacks?.onAction?.(event),
+            onInsert: (event) => propsRef.current.callbacks?.onInsert?.(event),
             onKeyDown: (event) => propsRef.current.callbacks?.onKeyDown?.(event),
             onContextMenu: (event) => propsRef.current.callbacks?.onContextMenu?.(event),
             onNodeDoubleClick: (event) => propsRef.current.callbacks?.onNodeDoubleClick?.(event),
             onDropTarget: (event) => propsRef.current.callbacks?.onDropTarget?.(event),
             onCommandError: (error) => propsRef.current.callbacks?.onCommandError?.(error),
+            onLocked: (ids) => propsRef.current.callbacks?.onLocked?.(ids),
         });
         setHost(created);
         propsRef.current.onHost?.(created);
@@ -99,6 +158,30 @@ export function CanvasFrame(props) {
             setHost(null);
         };
     }, [store, session, source.origin]);
+    useEffect(() => {
+        host?.setView({
+            outlines: view.outlines,
+            hidden: [...view.hiddenIds],
+            theme: resolvedTheme,
+            typeLabels,
+            labels: {
+                toolbar: t('canvas.tools'),
+                selectParent: t('canvas.parent'),
+                selectParentOf: t('canvas.selectParentOf'),
+                drag: t('canvas.drag'),
+                moveUp: t('canvas.moveUp'),
+                moveDown: t('canvas.moveDown'),
+                duplicate: t('canvas.duplicate'),
+                remove: t('canvas.delete'),
+                align: t('canvas.align'),
+                alignLeft: t('canvas.align.left'),
+                alignCenter: t('canvas.align.center'),
+                alignRight: t('canvas.align.right'),
+                more: t('canvas.more'),
+                insert: t('canvas.addHere'),
+            },
+        });
+    }, [host, view.outlines, view.hiddenIds, resolvedTheme, typeLabels, t]);
     useEffect(() => {
         const element = wrap.current;
         if (element === null)
@@ -119,21 +202,26 @@ export function CanvasFrame(props) {
     const zoom = hostState?.zoom ?? 'fit';
     const metrics = stageMetrics({ width, room: room.width, roomHeight: room.height, zoom });
     const { scale } = metrics;
+    useEffect(() => {
+        host?.setView({ scale });
+    }, [host, scale]);
     const breakpointId = hostState?.breakpoint ?? props.breakpoint;
     const breakpointKey = breakpointId === undefined ? undefined : BREAKPOINT_LABELS[breakpointId];
-    const widthLabel = t('editor.canvas.width')
-        .replace('{name}', breakpointKey !== undefined ? t(breakpointKey) : (breakpointId ?? ''))
-        .replace('{width}', String(width));
+    // The same string as the toolbar's device readout, so the two never spell the width differently.
+    const widthLabel = interpolate(t('toolbar.device.size'), {
+        name: breakpointKey !== undefined ? t(breakpointKey) : (breakpointId ?? ''),
+        width,
+    });
     const status = hostState?.status ?? 'connecting';
     const error = hostState?.error;
-    return (_jsxs("div", { className: "bd-canvas-host", ref: area, "data-status": status, children: [_jsx("p", { className: "bd-canvas-width", children: widthLabel }), _jsx("div", { className: "bd-canvas-stage-area", ref: wrap, children: _jsx("div", { className: "bd-canvas-stage", style: {
+    return (_jsxs("div", { className: "bd-canvas-host", ref: area, "data-status": status, "aria-busy": status === 'connecting' || status === 'initializing', children: [_jsx("p", { className: "bd-canvas-width bd-device-label", children: widthLabel }), _jsx("div", { className: "bd-canvas-stage-area", ref: wrap, children: _jsx("div", { className: "bd-canvas-stage", style: {
                         width: metrics.stageWidth,
                         ...(metrics.stageHeight > 0 ? { height: metrics.stageHeight } : {}),
                     }, children: _jsx("iframe", { ref: iframe, className: "bd-canvas-frame", title: t('editor.canvas.frame'), src: source.src, "data-status": status, style: {
                             width,
                             ...(metrics.frameHeight > 0 ? { height: metrics.frameHeight } : {}),
                             transform: `scale(${scale})`,
-                        } }, session) }) }), status === 'connecting' ? (_jsxs("div", { className: "bd-canvas-card bd-canvas-status", role: "status", children: [_jsx(Icon, { name: "monitor-smartphone", size: "md" }), _jsx("p", { className: "bd-canvas-title", children: t('editor.canvas.connecting') })] })) : null, status === 'error' && error !== undefined ? (_jsxs("div", { className: "bd-canvas-card bd-canvas-error", role: "alert", children: [_jsx(Icon, { name: "triangle-alert", size: "md" }), _jsx("p", { className: "bd-canvas-title", children: t('editor.canvas.error.title') }), _jsx("p", { children: t(`editor.canvas.error.${error.kind}`) }), error.kind === 'canvas' ? _jsx("p", { className: "bd-canvas-detail", children: error.message }) : null, error.details !== undefined ? (_jsx("dl", { className: "bd-canvas-detail", children: Object.entries(error.details).map(([name, value]) => (_jsxs("div", { children: [_jsx("dt", { children: name }), _jsx("dd", { children: String(value) })] }, name))) })) : null, _jsx(Button, { onClick: () => setAttempt((n) => n + 1), children: t('editor.canvas.reload') })] })) : null] }));
+                        } }, session) }) }), status === 'connecting' || status === 'initializing' ? (_jsxs("div", { className: "bd-canvas-card bd-canvas-status", role: "status", children: [_jsx(Icon, { name: "monitor-smartphone", size: "md" }), _jsx("p", { className: "bd-canvas-title", children: t('editor.canvas.connecting') })] })) : null, hostState?.connectionLost ? (_jsx("div", { className: "bd-canvas-card bd-canvas-error", role: "alert", children: t('canvas.connectionLost') })) : null, status === 'ready' && empty ? (_jsxs("div", { className: "bd-canvas-card bd-canvas-status bd-canvas-empty", role: "status", children: [_jsx(Icon, { name: "monitor-smartphone", size: "md" }), _jsx("p", { className: "bd-canvas-title", children: t('editor.canvas.empty') }), props.emptyPage !== undefined ? (_jsxs("div", { className: "bd-canvas-actions", children: [_jsx(Button, { variant: "primary", onClick: () => props.emptyPage?.onAddBlock(), children: t('canvas.empty.add') }), _jsx(Button, { onClick: () => props.emptyPage?.onPickPattern(), children: t('canvas.empty.pattern') })] })) : null] })) : null, status === 'error' && error !== undefined ? (_jsxs("div", { className: "bd-canvas-card bd-canvas-error", role: "alert", children: [_jsx(Icon, { name: "triangle-alert", size: "md" }), _jsx("p", { className: "bd-canvas-title", children: t('editor.canvas.error.title') }), _jsx("p", { children: t(`editor.canvas.error.${error.kind}`) }), error.kind === 'canvas' ? _jsx("p", { className: "bd-canvas-detail", children: error.message }) : null, error.details !== undefined ? (_jsx("dl", { className: "bd-canvas-detail", children: Object.entries(error.details).map(([name, value]) => (_jsxs("div", { children: [_jsx("dt", { children: name }), _jsx("dd", { children: String(value) })] }, name))) })) : null, _jsx(Button, { onClick: () => setAttempt((n) => n + 1), children: t('editor.canvas.reload') })] })) : null] }));
 }
 function useHostState(host) {
     const [, force] = useState(0);

package/dist/canvas-host/canvas-frame.test.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // @vitest-environment jsdom
 import { createRegistryMeta } from '@next-buildr/core';
+import { createMessage, PROTOCOL_VERSION, parseEditorMessage } from '@next-buildr/core/protocol';
 import { act } from 'react';
 import { createRoot } from 'react-dom/client';
 import { afterEach, describe, expect, it } from 'vitest';
@@ -9,7 +10,7 @@ import * as matchers from 'vitest-axe/matchers';
 import { DEFAULT_BREAKPOINTS } from '../app/config.js';
 import { MessagesProvider } from '../messages/index.js';
 import { createEditorStore, EditorStoreProvider } from '../store/index.js';
-import { CanvasFrame, canvasSource, createSession, stageMetrics } from './canvas-frame.js';
+import { CanvasFrame, canvasSource, createSession, stageMetrics, typeLabelsOf, } from './canvas-frame.js';
 expect.extend(matchers);
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 afterEach(() => {
@@ -66,14 +67,24 @@ describe('CanvasFrame', () => {
             registry: createRegistryMeta({ components: [] }),
             validationDelayMs: null,
         });
+        let host = null;
         const container = document.createElement('div');
         document.body.append(container);
         const root = createRoot(container);
-        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: _jsx(CanvasFrame, { canvasUrl: "https://canvas.example.com/__canvas", manifestHash: "hash", locales: locales, breakpoints: DEFAULT_BREAKPOINTS, handshakeTimeoutMs: 30 }) }) })));
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: _jsx(CanvasFrame, { canvasUrl: "https://canvas.example.com/__canvas", manifestHash: "hash", locales: locales, breakpoints: DEFAULT_BREAKPOINTS, handshakeTimeoutMs: 30, onHost: (value) => {
+                        host = value;
+                    } }) }) })));
         const iframe = () => container.querySelector('iframe');
         expect(container.querySelector('[role=status]')?.textContent).toContain('Connecting');
         expect(iframe()?.getAttribute('title')).toBe('Page preview');
-        expect(container.querySelector('.bd-canvas-width')?.textContent).toBe('Desktop · 1280px');
+        expect(container.querySelector('.bd-canvas-width')?.textContent).toBe('Desktop · 1280 px');
+        expect(container.querySelector('[aria-busy="true"]')).not.toBeNull();
+        act(() => host?.state.setState({ status: 'initializing' }));
+        expect(container.querySelector('[role=status]')?.textContent).toContain('Connecting');
+        act(() => host?.state.setState({ status: 'ready' }));
+        expect(container.querySelector('[role=status]')?.textContent).toContain('This page is still empty');
+        expect(container.querySelector('[aria-busy="false"]')).not.toBeNull();
+        act(() => host?.state.setState({ status: 'connecting' }));
         const firstSrc = iframe()?.getAttribute('src');
         expect(firstSrc).toContain('https://canvas.example.com/__canvas?session=');
         await act(async () => {
@@ -88,4 +99,146 @@ describe('CanvasFrame', () => {
         expect(container.querySelector('[role=status]')).not.toBeNull();
         await act(async () => root.unmount());
     });
+    it('has the device label, and the empty-page actions call back', async () => {
+        const store = createEditorStore({
+            doc: {
+                schemaVersion: 1,
+                root: 'root',
+                nodes: { root: { id: 'root', type: 'buildr/page' } },
+                components: {},
+            },
+            registry: createRegistryMeta({ components: [] }),
+            validationDelayMs: null,
+        });
+        let host = null;
+        const calls = [];
+        const container = document.createElement('div');
+        document.body.append(container);
+        const root = createRoot(container);
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: _jsx(CanvasFrame, { canvasUrl: "https://canvas.example.com/__canvas", manifestHash: "hash", locales: locales, breakpoints: DEFAULT_BREAKPOINTS, emptyPage: {
+                        onAddBlock: () => calls.push('add'),
+                        onPickPattern: () => calls.push('pattern'),
+                    }, onHost: (value) => {
+                        host = value;
+                    } }) }) })));
+        const label = container.querySelector('.bd-device-label');
+        expect(label?.textContent).toBe('Desktop · 1280 px');
+        expect(container.querySelector('.bd-canvas-actions')).toBeNull();
+        act(() => host?.state.setState({ status: 'ready' }));
+        const buttons = [...container.querySelectorAll('.bd-canvas-actions button')];
+        expect(buttons.map((b) => b.textContent)).toEqual(['Add block', 'Choose a pattern']);
+        act(() => buttons[0].click());
+        act(() => buttons[1].click());
+        expect(calls).toEqual(['add', 'pattern']);
+        await act(async () => root.unmount());
+    });
+});
+describe('canvas and editor on different protocol versions', () => {
+    // The first symptom of mixed package versions (docs/upgrading/v2-to-v3.md, B1). The hello arrives
+    // through the real message path: a window event from the frame's own window, origin and session.
+    async function mount() {
+        const store = createEditorStore({
+            doc: {
+                schemaVersion: 1,
+                root: 'root',
+                nodes: { root: { id: 'root', type: 'buildr/page' } },
+                components: {},
+            },
+            registry: createRegistryMeta({ components: [] }),
+            validationDelayMs: null,
+        });
+        const container = document.createElement('div');
+        document.body.append(container);
+        const root = createRoot(container);
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: _jsx(CanvasFrame, { canvasUrl: "https://canvas.example.com/__canvas", manifestHash: "hash", locales: locales, breakpoints: DEFAULT_BREAKPOINTS }) }) })));
+        return { container, root };
+    }
+    function sayHello(container, protocol) {
+        const iframe = container.querySelector('iframe');
+        const session = new URL(iframe.getAttribute('src')).searchParams.get('session');
+        act(() => {
+            window.dispatchEvent(new MessageEvent('message', {
+                origin: 'https://canvas.example.com',
+                source: iframe.contentWindow,
+                data: {
+                    source: 'buildr',
+                    protocol,
+                    session,
+                    type: 'canvas:hello',
+                    payload: { protocol, rendererVersion: '1', manifestHash: 'hash' },
+                },
+            }));
+        });
+    }
+    function mismatchCard(container) {
+        const card = container.querySelector('.bd-canvas-error[role=alert]');
+        const details = [...container.querySelectorAll('dl.bd-canvas-detail > div')].map((row) => [
+            row.querySelector('dt')?.textContent,
+            row.querySelector('dd')?.textContent,
+        ]);
+        return { card, details };
+    }
+    it.each([
+        ['an older canvas (a 2.x canvas under a 3.x editor)', PROTOCOL_VERSION - 1],
+        ['a newer canvas (a 3.x canvas under an older editor)', PROTOCOL_VERSION + 1],
+    ])('shows the mismatch state for %s', async (_name, canvasProtocol) => {
+        const { container, root } = await mount();
+        expect(mismatchCard(container).card).toBeNull();
+        sayHello(container, canvasProtocol);
+        const { card, details } = mismatchCard(container);
+        expect(card?.textContent).toContain('different versions');
+        expect(details).toEqual([
+            ['editor', String(PROTOCOL_VERSION)],
+            ['canvas', String(canvasProtocol)],
+        ]);
+        expect(await axe(card)).toHaveNoViolations();
+        await act(async () => root.unmount());
+    });
+    it('does not show it for a canvas on the same protocol version', async () => {
+        const { container, root } = await mount();
+        sayHello(container, PROTOCOL_VERSION);
+        expect(mismatchCard(container).card?.textContent ?? '').not.toContain('different versions');
+        await act(async () => root.unmount());
+    });
+});
+describe('typeLabelsOf', () => {
+    it('keeps valid localized names and drops what the protocol would refuse', () => {
+        const labels = typeLabelsOf({
+            'buildr/heading': { label: 'Nagłówek' },
+            'buildr/rich-text': { label: '  Tekst sformatowany ' },
+            'bad id': { label: 'x' },
+            'buildr/markup': { label: '<b>x</b>' },
+            'buildr/control': { label: 'a\nb' },
+            'buildr/empty': { label: ' ' },
+            'buildr/none': {},
+            'buildr/long': { label: 'x'.repeat(60) },
+        });
+        expect(labels).toEqual({
+            'buildr/heading': 'Nagłówek',
+            'buildr/rich-text': 'Tekst sformatowany',
+            'buildr/long': 'x'.repeat(40),
+        });
+    });
+    it('cuts to 40 UTF-16 units, so astral characters never split or overshoot the protocol limit', () => {
+        const astral = '😀'.repeat(30); // 60 UTF-16 units, 30 code points
+        const mixed = `${'a'.repeat(39)}😀`; // 41 units: the pair does not fit
+        const labels = typeLabelsOf({
+            'buildr/astral': { label: astral },
+            'buildr/mixed': { label: mixed },
+        });
+        expect(labels['buildr/astral']).toBe('😀'.repeat(20));
+        expect(labels['buildr/mixed']).toBe('a'.repeat(39));
+        for (const label of Object.values(labels)) {
+            expect(label.length).toBeLessThanOrEqual(40);
+            expect(label).not.toMatch(/[�-�](?![�-�])|(?<![�-�])[�-�]/);
+        }
+        // The canvas accepts the whole `view:set`, which it drops if one label is over its limit.
+        const message = createMessage('view:set', { typeLabels: labels }, { session: 'a'.repeat(32) });
+        expect(parseEditorMessage(message).ok).toBe(true);
+    });
+    it('is empty without a manifest and never exceeds 128 entries', () => {
+        expect(typeLabelsOf(undefined)).toEqual({});
+        const many = Object.fromEntries(Array.from({ length: 200 }, (_, i) => [`app/type-${i}`, { label: 'T' }]));
+        expect(Object.keys(typeLabelsOf(many))).toHaveLength(128);
+    });
 });

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

@@ -43,6 +43,7 @@ export interface CanvasHostState {
     readonly diagnostics: Message<'diagnostics'>['items'];
     /** How many times the canvas has said hello: more than one means it reloaded. */
     readonly connections: number;
+    readonly connectionLost: boolean;
 }
 export interface CanvasFrames {
     request(callback: () => void): unknown;
@@ -67,6 +68,8 @@ export interface CanvasHostOptions {
         setTimeout(callback: () => void, ms: number): unknown;
         clearTimeout(handle: unknown): void;
     };
+    readonly onAction?: (event: Message<'intent:action'>) => void;
+    readonly onInsert?: (event: Message<'intent:insert'>) => void;
     readonly onKeyDown?: (event: Message<'key:down'>) => void;
     readonly onContextMenu?: (event: Message<'contextmenu'>) => void;
     readonly onNodeDoubleClick?: (event: Message<'node:dblclick'>) => void;
@@ -77,9 +80,12 @@ export interface CanvasHostOptions {
         readonly code: string;
         readonly message: string;
     }) => void;
+    /** The canvas asked to remove, move or duplicate a block that is locked for structure (a layer "Lock"). */
+    readonly onLocked?: (ids?: readonly NodeId[]) => void;
 }
 export interface CanvasHost {
     readonly state: StoreApi<CanvasHostState>;
+    setView(view: Message<'view:set'>): void;
     setBreakpoint(id: string): void;
     setZoom(zoom: 'fit' | number): void;
     setLocale(locale: string): void;

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

@@ -1 +1 @@
-{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../src/canvas-host/host.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../src/canvas-host/host.ts"],"names":[],"mappings":"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"}

package/dist/canvas-host/host.js

@@ -1,10 +1,13 @@
-import { s } from '@next-buildr/core';
-import { MAX_PATCHES, PROTOCOL_VERSION, } from '@next-buildr/core/protocol';
+import { createIndex, s } from '@next-buildr/core';
+import { MAX_PATCHES, PROTOCOL_VERSION, TransportError, } from '@next-buildr/core/protocol';
 import { createStore } from 'zustand/vanilla';
+import { isNodeStructureLocked, structureLockedIds } from '../store/structure-lock.js';
 /** The store's document is the protocol's (it is checked against `documentSchema` at both ends); only the readonly modifiers differ. */
 const wire = (doc) => doc;
 /** How long the canvas has to answer with `canvas:hello` before the error screen shows. */
 export const DEFAULT_HANDSHAKE_TIMEOUT_MS = 10_000;
+/** How long a `ping` waits for its `pong` before the connection counts as lost. */
+const PONG_TIMEOUT_MS = 15_000;
 function defaultFrames() {
     const g = globalThis;
     return g.requestAnimationFrame !== undefined
@@ -48,6 +51,7 @@ export function createCanvasHost(options) {
         mode: options.mode ?? 'edit',
         diagnostics: [],
         connections: 0,
+        connectionLost: false,
     }));
     const live = () => {
         const { status } = state.getState();
@@ -113,6 +117,7 @@ export function createCanvasHost(options) {
                 transport.send('hover:set', { id: next.hoveredId });
         }
     });
+    let view = {};
     const init = () => {
         const host = state.getState();
         const { doc, docVersion, selectedIds } = store.getState();
@@ -130,6 +135,7 @@ export function createCanvasHost(options) {
             locales: options.locales,
             mode: host.mode,
         });
+        transport.send('view:set', view);
     };
     // --- the handshake ---
     let handshake;
@@ -142,9 +148,71 @@ export function createCanvasHost(options) {
             });
         }
     }, timeoutMs);
+    // The heartbeat (docs/editor.md#the-postmessage-protocol): a `ping` is a request, so the canvas
+    // answers it with `reply`, which names the ping's id, and only the transport's request path
+    // reads such an answer (a `pong` that answers nothing is dropped as a stale reply). At most one
+    // ping is outstanding; `epoch` makes the answer to a ping of an earlier session count for nothing.
+    let heartbeat;
+    let outstanding = false;
+    let epoch = 0;
+    const stopHeartbeat = () => {
+        timers.clearTimeout(heartbeat);
+        heartbeat = undefined;
+        outstanding = false;
+        epoch += 1;
+    };
+    const ping = () => {
+        if (!live())
+            return;
+        heartbeat = timers.setTimeout(ping, 5_000);
+        if (outstanding)
+            return;
+        outstanding = true;
+        const mine = epoch;
+        transport.request('ping', {}, { timeoutMs: PONG_TIMEOUT_MS }).then((answer) => {
+            if (mine !== epoch)
+                return;
+            outstanding = false;
+            if (answer.type === 'pong')
+                state.setState({ connectionLost: false });
+        }, (error) => {
+            if (mine !== epoch)
+                return;
+            outstanding = false;
+            if (error instanceof TransportError && error.code === 'timeout' && live()) {
+                state.setState({ connectionLost: true });
+            }
+        });
+    };
+    const allowed = (id, aspect) => {
+        const { doc, readOnly } = store.getState();
+        if (!live() || readOnly || !Object.hasOwn(doc.nodes, id))
+            return false;
+        const index = createIndex(doc);
+        let current = id;
+        let region = false;
+        while (current !== undefined) {
+            const node = doc.nodes[current];
+            if (node?.lock?.[aspect])
+                return region;
+            if (node?.region !== undefined)
+                region = true;
+            current = index.parentOf[current];
+        }
+        return true;
+    };
     const offs = [
         transport.on('canvas:hello', (payload) => {
             timers.clearTimeout(handshake);
+            stopHeartbeat();
+            // A hello at any time (a canvas that reloaded, or one that never lost its state but found a
+            // new editor) starts the session over: nothing queued for the old one is sent to the new.
+            if (frame !== undefined) {
+                frames.cancel(frame);
+                frame = undefined;
+            }
+            queue = [];
+            resend = false;
             const { protocol, rendererVersion, manifestHash } = payload;
             state.setState((s0) => ({ connections: s0.connections + 1, diagnostics: [] }));
             if (protocol !== PROTOCOL_VERSION) {
@@ -161,12 +229,14 @@ export function createCanvasHost(options) {
                     details: { editor: options.manifestHash, canvas: manifestHash, rendererVersion },
                 });
             }
-            state.setState({ status: 'initializing', error: undefined });
+            state.setState({ status: 'initializing', error: undefined, connectionLost: false });
             init();
         }),
         transport.on('canvas:ready', () => {
-            if (state.getState().status === 'initializing')
+            if (state.getState().status === 'initializing') {
                 state.setState({ status: 'ready' });
+                ping();
+            }
         }),
         transport.on('doc:resync-request', () => {
             if (!live())
@@ -201,6 +271,11 @@ export function createCanvasHost(options) {
                 options.onCommandError?.(result.error);
         }),
         transport.on('intent:move', (payload) => {
+            // Core checks the lock from the parent on; a locked block itself is not moved by the canvas either.
+            if (structureLockedIds(store.getState().doc, payload.ids).length > 0) {
+                options.onLocked?.(payload.ids);
+                return;
+            }
             const result = store.dispatch({
                 type: 'node.move',
                 payload: {
@@ -213,6 +288,37 @@ export function createCanvasHost(options) {
             if (!result.ok)
                 options.onCommandError?.(result.error);
         }),
+        transport.on('intent:action', (payload) => {
+            const { doc } = store.getState();
+            if (!live() || !Object.hasOwn(doc.nodes, payload.id))
+                return;
+            const changesStructure = payload.action === 'remove' ||
+                payload.action === 'duplicate' ||
+                payload.action === 'moveUp' ||
+                payload.action === 'moveDown';
+            if (changesStructure && payload.id !== doc.root && isNodeStructureLocked(doc, payload.id)) {
+                options.onLocked?.([payload.id]);
+                return;
+            }
+            if (payload.action !== 'selectParent' &&
+                (!allowed(payload.id, payload.action === 'align' ? 'style' : 'structure') ||
+                    payload.id === doc.root))
+                return;
+            options.onAction?.(payload);
+        }),
+        transport.on('intent:insert', (payload) => {
+            const { parentId, slot, index } = payload.target;
+            const { doc } = store.getState();
+            if (!allowed(parentId, 'structure'))
+                return;
+            const children = doc.nodes[parentId]?.slots?.[slot];
+            const meta = store.registry.get(doc.nodes[parentId]?.type ?? '');
+            if (children === undefined && meta?.slots?.[slot] === undefined)
+                return;
+            if (index > (children?.length ?? 0))
+                return;
+            options.onInsert?.(payload);
+        }),
         transport.on('dnd:target', (payload) => options.onDropTarget?.(payload)),
         transport.on('key:down', (payload) => options.onKeyDown?.(payload)),
         transport.on('contextmenu', (payload) => options.onContextMenu?.(payload)),
@@ -229,6 +335,11 @@ export function createCanvasHost(options) {
     };
     return {
         state,
+        setView(next) {
+            view = { ...view, ...next, labels: { ...view.labels, ...next.labels } };
+            if (live())
+                transport.send('view:set', view);
+        },
         setBreakpoint(id) {
             const found = options.breakpoints.find((b) => b.id === id);
             if (found === undefined)
@@ -280,6 +391,7 @@ export function createCanvasHost(options) {
             });
         },
         destroy() {
+            stopHeartbeat();
             timers.clearTimeout(handshake);
             if (frame !== undefined)
                 frames.cancel(frame);