@next-buildr/editor 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { MessagesProvider } from '../messages/index.js';
+import { SmallScreenNotice, useViewportTooNarrow } from './small-screen.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root;
+afterEach(() => {
+    act(() => root?.unmount());
+    vi.unstubAllGlobals();
+});
+/** A window `width` wide whose width can change, answering `(max-width: Npx)` queries. */
+function stubWindow(initial) {
+    let width = initial;
+    const listeners = new Set();
+    vi.stubGlobal('matchMedia', (query) => {
+        const max = Number(/max-width: (\d+)px/.exec(query)?.[1]);
+        return {
+            get matches() {
+                return width <= max;
+            },
+            addEventListener: (_, fn) => listeners.add(fn),
+            removeEventListener: (_, fn) => listeners.delete(fn),
+        };
+    });
+    return (next) => {
+        width = next;
+        for (const fn of listeners)
+            fn();
+    };
+}
+function Probe({ min }) {
+    const narrow = useViewportTooNarrow(min);
+    return _jsx("p", { children: narrow === undefined ? 'unknown' : narrow ? 'narrow' : 'wide' });
+}
+const mount = async (node) => {
+    const container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    await act(async () => root?.render(node));
+    return container;
+};
+describe('useViewportTooNarrow', () => {
+    it('is true below the minimum and follows the window as it is resized', async () => {
+        const resize = stubWindow(700);
+        const view = await mount(_jsx(Probe, { min: 1024 }));
+        expect(view.textContent).toBe('narrow');
+        await act(async () => resize(1280));
+        expect(view.textContent).toBe('wide');
+        await act(async () => resize(820));
+        expect(view.textContent).toBe('narrow');
+    });
+    it('treats the minimum itself as wide enough, and 0 turns the check off', async () => {
+        stubWindow(1024);
+        expect((await mount(_jsx(Probe, { min: 1024 }))).textContent).toBe('wide');
+        act(() => root?.unmount());
+        stubWindow(300);
+        expect((await mount(_jsx(Probe, { min: 0 }))).textContent).toBe('wide');
+    });
+    it('is false where matchMedia does not exist', async () => {
+        vi.stubGlobal('matchMedia', undefined);
+        expect((await mount(_jsx(Probe, { min: 1024 }))).textContent).toBe('wide');
+    });
+});
+/** What `EditorApp` shows: loading while unknown, the notice when narrow, else the editor. */
+function Gate({ min }) {
+    const narrow = useViewportTooNarrow(min);
+    if (narrow === undefined)
+        return _jsx("p", { role: "status", children: "loading" });
+    return narrow ? (_jsx(MessagesProvider, { locale: "en", children: _jsx(SmallScreenNotice, {}) })) : (_jsx("p", { children: "editor" }));
+}
+describe('useViewportTooNarrow on the server and while hydrating', () => {
+    it('is unknown on the server, whatever the window would say', () => {
+        stubWindow(700);
+        const html = renderToString(_jsx(Gate, { min: 1024 }));
+        expect(html).toContain('loading');
+        expect(html).not.toContain('role="alert"');
+    });
+    it('hydrates a narrow window without a mismatch, then shows the notice', async () => {
+        stubWindow(700);
+        const html = renderToString(_jsx(Gate, { min: 1024 }));
+        const container = document.createElement('div');
+        document.body.append(container);
+        container.innerHTML = html;
+        const errors = [];
+        const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+        await act(async () => {
+            root = hydrateRoot(container, _jsx(Gate, { min: 1024 }), {
+                onRecoverableError: (error) => errors.push(error),
+            });
+        });
+        expect(errors).toEqual([]);
+        expect(consoleError).not.toHaveBeenCalled();
+        consoleError.mockRestore();
+        expect(container.querySelector('[role="alert"]')).not.toBeNull();
+    });
+});
+describe('SmallScreenNotice', () => {
+    it('asks for a computer, in the interface language, as an alert', async () => {
+        const view = await mount(_jsx(MessagesProvider, { locale: "pl", children: _jsx(SmallScreenNotice, {}) }));
+        const alert = view.querySelector('[role="alert"]');
+        expect(alert?.querySelector('h1')?.textContent).toBe('Edytor wymaga większego ekranu');
+        expect(alert?.textContent).toContain('na komputerze');
+    });
+});

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

@@ -0,0 +1,14 @@
+import type { CanvasHost } from '../canvas-host/index.ts';
+import type { BreakpointConfig } from './config.ts';
+export interface StatusInfoProps {
+    readonly host: CanvasHost | null;
+    readonly breakpoints: readonly BreakpointConfig[];
+    readonly breakpoint: string;
+}
+/**
+ * The status bar's read-only facts (PB-122): the active breakpoint and its width, the canvas
+ * zoom and the save state. They come from the host, the store and the persistence controller;
+ * the save state is plain text (the toolbar's status carries the live region).
+ */
+export declare function StatusInfo({ host, breakpoints, breakpoint }: StatusInfoProps): import("react").JSX.Element;
+//# sourceMappingURL=status-info.d.ts.map

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

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

package/dist/app/status-info.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { useT } from '../messages/index.js';
+import { usePersistenceState } from '../persistence/index.js';
+import { useEditorState } from '../store/index.js';
+const BREAKPOINT_LABELS = {
+    desktop: 'toolbar.breakpoint.desktop',
+    tablet: 'toolbar.breakpoint.tablet',
+    mobile: 'toolbar.breakpoint.mobile',
+};
+const NO_ZOOM = 'fit';
+function useZoom(host) {
+    return useSyncExternalStore((notify) => (host === null ? () => undefined : host.state.subscribe(notify)), () => host?.state.getState().zoom ?? NO_ZOOM, () => NO_ZOOM);
+}
+/**
+ * The status bar's read-only facts (PB-122): the active breakpoint and its width, the canvas
+ * zoom and the save state. They come from the host, the store and the persistence controller;
+ * the save state is plain text (the toolbar's status carries the live region).
+ */
+export function StatusInfo({ host, breakpoints, breakpoint }) {
+    const t = useT();
+    const zoom = useZoom(host);
+    const status = usePersistenceState((state) => state.status);
+    const error = usePersistenceState((state) => state.error);
+    const readOnly = useEditorState((state) => state.readOnly);
+    const active = breakpoints.find((item) => item.id === breakpoint);
+    const key = BREAKPOINT_LABELS[breakpoint];
+    const save = readOnly
+        ? t('save.readOnly')
+        : status === 'error' && error?.kind === 'invalid'
+            ? t('save.invalid')
+            : t(`save.${status}`);
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "bd-status-item", title: t('editor.status.breakpoint'), children: [key === undefined ? breakpoint : t(key), active === undefined ? '' : ` ${active.width}px`] }), _jsx("span", { className: "bd-status-item bd-tabular", title: t('editor.status.zoom'), children: zoom === 'fit' ? t('editor.status.fit') : `${Math.round(zoom * 100)}%` }), _jsx("span", { className: "bd-status-item", "data-status": readOnly ? 'readOnly' : status, children: save })] }));
+}

package/dist/app/use-resizable.d.ts

@@ -0,0 +1,34 @@
+import { type KeyboardEvent, type MouseEvent, type PointerEvent } from 'react';
+export interface ResizableOptions {
+    readonly initial: number;
+    readonly min: number;
+    readonly max: number;
+    /** Which way dragging to the right moves the size: `1` for a panel on the left, `-1` on the right. */
+    readonly direction: 1 | -1;
+    /** How far an arrow key moves it. */
+    readonly step?: number;
+    /** Remembers the size in `localStorage` under this key (a failing storage is ignored). */
+    readonly storageKey?: string;
+}
+export interface Resizable {
+    readonly size: number;
+    readonly dragging: boolean;
+    readonly bind: {
+        onPointerDown(event: PointerEvent<HTMLElement>): void;
+        onPointerMove(event: PointerEvent<HTMLElement>): void;
+        onPointerUp(event: PointerEvent<HTMLElement>): void;
+        onPointerCancel(event: PointerEvent<HTMLElement>): void;
+        onKeyDown(event: KeyboardEvent<HTMLElement>): void;
+        onDoubleClick(event: MouseEvent<HTMLElement>): void;
+    };
+    /** Sets the size, kept within its limits. */
+    set(size: number): void;
+    /** Back to the initial size. */
+    reset(): void;
+}
+/**
+ * The state and events of one splitter: drag it with a pointer, or move it with the arrow keys,
+ * Home and End; double-click puts it back to the initial size. The size can be remembered.
+ */
+export declare function useResizable(options: ResizableOptions): Resizable;
+//# sourceMappingURL=use-resizable.d.ts.map

package/dist/app/use-resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resizable.d.ts","sourceRoot":"","sources":["../../src/app/use-resizable.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,QAAQ,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE;QACb,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QACtD,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QACtD,WAAW,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QACpD,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QACxD,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QACnD,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;KACrD,CAAC;IACF,6CAA6C;IAC7C,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,gCAAgC;IAChC,KAAK,IAAI,IAAI,CAAC;CACf;AAuBD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,GAAG,SAAS,CA2DjE"}

package/dist/app/use-resizable.js

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef, useState, } from 'react';
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function readStored(key) {
+    if (key === undefined)
+        return undefined;
+    try {
+        const raw = window.localStorage.getItem(key);
+        const value = raw === null ? Number.NaN : Number(raw);
+        return Number.isFinite(value) ? value : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function writeStored(key, size) {
+    try {
+        window.localStorage.setItem(key, String(size));
+    }
+    catch {
+        // Storage is unavailable (private mode, quota): the size just is not remembered.
+    }
+}
+/**
+ * The state and events of one splitter: drag it with a pointer, or move it with the arrow keys,
+ * Home and End; double-click puts it back to the initial size. The size can be remembered.
+ */
+export function useResizable(options) {
+    const { min, max, direction, step = 16, storageKey } = options;
+    const [size, setSize] = useState(() => clamp(readStored(storageKey) ?? options.initial, min, max));
+    const [dragging, setDragging] = useState(false);
+    const start = useRef(null);
+    const changed = useRef(false);
+    const set = useCallback((next) => {
+        changed.current = true;
+        setSize(clamp(next, min, max));
+    }, [min, max]);
+    // Remember the size once a change is done (not on every pointer move, not on the first render).
+    useEffect(() => {
+        if (storageKey === undefined || dragging || !changed.current)
+            return;
+        writeStored(storageKey, size);
+    }, [storageKey, size, dragging]);
+    const bind = {
+        onPointerDown(event) {
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            start.current = { x: event.clientX, size };
+            setDragging(true);
+        },
+        onPointerMove(event) {
+            const from = start.current;
+            if (from === null)
+                return;
+            set(from.size + (event.clientX - from.x) * direction);
+        },
+        onPointerUp(event) {
+            start.current = null;
+            setDragging(false);
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        },
+        onPointerCancel() {
+            start.current = null;
+            setDragging(false);
+        },
+        onKeyDown(event) {
+            const grow = direction === 1 ? 'ArrowRight' : 'ArrowLeft';
+            const shrink = direction === 1 ? 'ArrowLeft' : 'ArrowRight';
+            if (event.key === grow)
+                set(size + step);
+            else if (event.key === shrink)
+                set(size - step);
+            else if (event.key === 'Home')
+                set(min);
+            else if (event.key === 'End')
+                set(max);
+            else
+                return;
+            event.preventDefault();
+        },
+        onDoubleClick() {
+            set(options.initial);
+        },
+    };
+    return { size, dragging, bind, set, reset: () => set(options.initial) };
+}

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

@@ -0,0 +1,53 @@
+import type { BreakpointConfig } from '../app/config.ts';
+import { type CanvasHost, type CanvasHostOptions } from './host.ts';
+export interface CanvasFrameProps {
+    /** The canvas route (`@next-buildr/react/canvas` runs there). */
+    readonly canvasUrl: string;
+    /** `RegistryManifest.hash` of the registry the editor knows. */
+    readonly manifestHash: string;
+    readonly locales: CanvasHostOptions['locales'];
+    readonly breakpoints: readonly BreakpointConfig[];
+    readonly breakpoint?: string;
+    readonly locale?: string;
+    readonly contextRef?: string | null;
+    readonly handshakeTimeoutMs?: number;
+    /** Gets the host once the frame is mounted (and `null` when it goes), for the toolbar and the drag-and-drop engine. */
+    readonly onHost?: (host: CanvasHost | null) => void;
+    readonly callbacks?: Pick<CanvasHostOptions, 'onKeyDown' | 'onContextMenu' | 'onNodeDoubleClick' | 'onDropTarget' | 'onCommandError'>;
+}
+/** A random nonce for the canvas URL: 32 hex characters, unguessable by the page in the frame's neighbours. */
+export declare function createSession(): string;
+/** The canvas URL with the session in it, and the one origin it is served from. */
+export declare function canvasSource(canvasUrl: string, session: string): {
+    src: string;
+    origin: string;
+};
+export interface StageMetrics {
+    /** The scale applied to the iframe. */
+    readonly scale: number;
+    /** The iframe's own (unscaled) CSS height: the visible height divided by the scale (0: unknown). */
+    readonly frameHeight: number;
+    /** The width the scaled page takes on the stage. */
+    readonly stageWidth: number;
+    /** The visible height of the stage (0: unknown). */
+    readonly stageHeight: number;
+}
+/**
+ * The stage arithmetic (A8): the frame is scaled with `transform`, which does not change its
+ * layout box, so the frame's height is the visible height divided by the scale; the scaled
+ * page then fills the visible stage exactly. `room` and `roomHeight` are the stage area in CSS
+ * pixels (0 while not measured); with no height known the frame fills its parent.
+ */
+export declare function stageMetrics(input: {
+    readonly width: number;
+    readonly room: number;
+    readonly roomHeight: number;
+    readonly zoom: 'fit' | number;
+}): StageMetrics;
+/**
+ * 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
+ * state and the new canvas is initialized from it.
+ */
+export declare function CanvasFrame(props: CanvasFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=canvas-frame.d.ts.map

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

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

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

@@ -0,0 +1,146 @@
+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 { 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. */
+export function createSession() {
+    const bytes = new Uint8Array(16);
+    globalThis.crypto.getRandomValues(bytes);
+    return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+/** The canvas URL with the session in it, and the one origin it is served from. */
+export function canvasSource(canvasUrl, session) {
+    const url = new URL(canvasUrl, globalThis.location?.href);
+    url.searchParams.set('session', session);
+    return { src: url.toString(), origin: url.origin };
+}
+/**
+ * The stage arithmetic (A8): the frame is scaled with `transform`, which does not change its
+ * layout box, so the frame's height is the visible height divided by the scale; the scaled
+ * page then fills the visible stage exactly. `room` and `roomHeight` are the stage area in CSS
+ * pixels (0 while not measured); with no height known the frame fills its parent.
+ */
+export function stageMetrics(input) {
+    const { width, room, roomHeight, zoom } = input;
+    const raw = zoom === 'fit' ? (room > 0 ? Math.min(1, room / width) : 1) : zoom;
+    const scale = Number.isFinite(raw) && raw > 0 ? raw : 1;
+    return {
+        scale,
+        frameHeight: roomHeight > 0 ? roomHeight / scale : 0,
+        stageWidth: width * scale,
+        stageHeight: roomHeight > 0 ? roomHeight : 0,
+    };
+}
+const BREAKPOINT_LABELS = {
+    desktop: 'toolbar.breakpoint.desktop',
+    tablet: 'toolbar.breakpoint.tablet',
+    mobile: 'toolbar.breakpoint.mobile',
+};
+/**
+ * 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
+ * state and the new canvas is initialized from it.
+ */
+export function CanvasFrame(props) {
+    const t = useT();
+    const store = useEditor();
+    const [attempt, setAttempt] = useState(0);
+    const session = useMemo(() => {
+        void attempt;
+        return createSession();
+    }, [attempt]);
+    const source = useMemo(() => canvasSource(props.canvasUrl, session), [props.canvasUrl, session]);
+    const iframe = useRef(null);
+    const area = useRef(null);
+    const [host, setHost] = useState(null);
+    const wrap = useRef(null);
+    const [room, setRoom] = useState({ width: 0, height: 0 });
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useEffect(() => {
+        const frame = iframe.current;
+        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,
+            canvasOrigin: source.origin,
+            session,
+            onReject: (rejection) => created?.handleReject(rejection),
+        });
+        created = createCanvasHost({
+            store,
+            transport,
+            manifestHash: current.manifestHash,
+            locales: current.locales,
+            breakpoints: current.breakpoints,
+            ...(current.breakpoint !== undefined ? { breakpoint: current.breakpoint } : {}),
+            ...(current.locale !== undefined ? { locale: current.locale } : {}),
+            ...(current.contextRef !== undefined ? { contextRef: current.contextRef } : {}),
+            ...(current.handshakeTimeoutMs !== undefined
+                ? { handshakeTimeoutMs: current.handshakeTimeoutMs }
+                : {}),
+            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),
+        });
+        setHost(created);
+        propsRef.current.onHost?.(created);
+        return () => {
+            created?.destroy();
+            propsRef.current.onHost?.(null);
+            setHost(null);
+        };
+    }, [store, session, source.origin]);
+    useEffect(() => {
+        const element = wrap.current;
+        if (element === null)
+            return;
+        const measure = () => setRoom((prev) => prev.width === element.clientWidth && prev.height === element.clientHeight
+            ? prev
+            : { width: element.clientWidth, height: element.clientHeight });
+        measure();
+        const Observer = globalThis.ResizeObserver;
+        if (Observer === undefined)
+            return;
+        const observer = new Observer(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const hostState = useHostState(host);
+    const width = hostState?.width ?? props.breakpoints[0]?.width ?? 1280;
+    const zoom = hostState?.zoom ?? 'fit';
+    const metrics = stageMetrics({ width, room: room.width, roomHeight: room.height, zoom });
+    const { scale } = metrics;
+    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));
+    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: {
+                        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] }));
+}
+function useHostState(host) {
+    const [, force] = useState(0);
+    useEffect(() => {
+        if (host === null)
+            return;
+        return host.state.subscribe(() => force((n) => n + 1));
+    }, [host]);
+    return host?.state.getState();
+}

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

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

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

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

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, describe, expect, it } from 'vitest';
+import { axe } from 'vitest-axe';
+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';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+const locales = { locales: ['en'], default: 'en', fallback: true, intl: {} };
+describe('session and URL', () => {
+    it('makes an unguessable, URL-safe nonce every time', () => {
+        const a = createSession();
+        expect(a).toMatch(/^[0-9a-f]{32}$/);
+        expect(createSession()).not.toBe(a);
+    });
+    it('puts the session in the canvas URL and takes the origin from it', () => {
+        const { src, origin } = canvasSource('https://canvas.example.com/__canvas?x=1', 'abc');
+        expect(origin).toBe('https://canvas.example.com');
+        expect(new URL(src).searchParams.get('session')).toBe('abc');
+        expect(new URL(src).searchParams.get('x')).toBe('1');
+    });
+});
+describe('stageMetrics', () => {
+    it('fit: scales down to the room and fills the visible height', () => {
+        const m = stageMetrics({ width: 1280, room: 640, roomHeight: 600, zoom: 'fit' });
+        expect(m.scale).toBe(0.5);
+        expect(m.frameHeight).toBe(1200);
+        expect(m.stageWidth).toBe(640);
+        expect(m.stageHeight).toBe(600);
+        expect(m.frameHeight * m.scale).toBe(m.stageHeight);
+    });
+    it('fit: never scales above 100%', () => {
+        const m = stageMetrics({ width: 390, room: 900, roomHeight: 500, zoom: 'fit' });
+        expect(m).toMatchObject({ scale: 1, frameHeight: 500, stageWidth: 390 });
+    });
+    it('a fixed zoom shows 1/zoom of the page height (twice at 50%)', () => {
+        const half = stageMetrics({ width: 820, room: 2000, roomHeight: 700, zoom: 0.5 });
+        expect(half).toMatchObject({ scale: 0.5, frameHeight: 1400, stageWidth: 410 });
+        const twice = stageMetrics({ width: 820, room: 2000, roomHeight: 700, zoom: 2 });
+        expect(twice).toMatchObject({ scale: 2, frameHeight: 350, stageWidth: 1640 });
+    });
+    it('falls back to filling the parent while nothing is measured', () => {
+        const m = stageMetrics({ width: 1280, room: 0, roomHeight: 0, zoom: 'fit' });
+        expect(m).toMatchObject({ scale: 1, frameHeight: 0, stageHeight: 0, stageWidth: 1280 });
+        expect(stageMetrics({ width: 100, room: 50, roomHeight: 10, zoom: 0 }).scale).toBe(1);
+    });
+});
+describe('CanvasFrame', () => {
+    it('shows the connecting state, then an error screen that reloads with a new session', async () => {
+        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, handshakeTimeoutMs: 30 }) }) })));
+        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');
+        const firstSrc = iframe()?.getAttribute('src');
+        expect(firstSrc).toContain('https://canvas.example.com/__canvas?session=');
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 80));
+        });
+        expect(container.querySelector('[role=alert]')?.textContent).toContain('did not answer');
+        expect(await axe(container.querySelector('[role=alert]'))).toHaveNoViolations();
+        const reload = [...container.querySelectorAll('button')].find((b) => b.textContent === 'Reload canvas');
+        await act(async () => reload?.click());
+        expect(iframe()?.getAttribute('src')).not.toBe(firstSrc);
+        expect(container.querySelector('[role=alert]')).toBeNull();
+        expect(container.querySelector('[role=status]')).not.toBeNull();
+        await act(async () => root.unmount());
+    });
+});