@nuforge/editor 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 var t = require('@nuforge/types');
+var core = require('@nuforge/core');
+var reactivity = require('@nuforge/reactivity');
 var parser = require('@nuforge/parser');
 
 function _interopNamespaceDefault(e) {
@@ -93,6 +95,78 @@ const DEFAULT_BLOCKS = [
     },
 ];
 
+const CANVAS_CHANNEL = 'nuforge-canvas';
+const CANVAS_PROTOCOL_VERSION = 1;
+function canvasChannelName(src) {
+    return `${CANVAS_CHANNEL}:${src}`;
+}
+function isCanvasMessage(data) {
+    return (!!data &&
+        typeof data === 'object' &&
+        data.channel === CANVAS_CHANNEL &&
+        data.v === CANVAS_PROTOCOL_VERSION);
+}
+
+function createCanvasReceiver(opts) {
+    const nu = core.Nu.create({ externals: opts.externals });
+    const volatile = reactivity.reactive({ activeComponent: null, loadGeneration: 0 });
+    const channel = new BroadcastChannel(canvasChannelName(opts.src));
+    const uiListeners = new Set();
+    const applyState = (message) => {
+        if (message.type === 'init') {
+            nu.load(t__namespace.unflatten(message.flat));
+            volatile.loadGeneration++;
+        }
+        else {
+            nu.change(() => t__namespace.merge(nu.state, t__namespace.unflatten(message.flat), { arrayReconcile: 'id' }));
+        }
+        volatile.activeComponent = message.activeComponent;
+    };
+    const onMessage = (event) => {
+        if (!isCanvasMessage(event.data)) {
+            return;
+        }
+        const message = event.data;
+        if (message.type === 'init' || message.type === 'patch') {
+            applyState(message);
+        }
+        else if (message.type === 'ui') {
+            for (const cb of uiListeners) {
+                cb(message.payload);
+            }
+        }
+    };
+    channel.addEventListener('message', onMessage);
+    return {
+        nu,
+        volatile,
+        postReady() {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'ready',
+                mountGen: Math.floor(Math.random() * 1e9),
+            });
+        },
+        onUi(cb) {
+            uiListeners.add(cb);
+            return () => uiListeners.delete(cb);
+        },
+        postEvent(message) {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                ...message,
+            });
+        },
+        dispose() {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+            uiListeners.clear();
+        },
+    };
+}
+
 class CommandRegistry {
     editor;
     commands = new Map();
@@ -676,15 +750,20 @@ function createEditor(nu, opts) {
 }
 
 exports.BlockRegistry = BlockRegistry;
+exports.CANVAS_CHANNEL = CANVAS_CHANNEL;
+exports.CANVAS_PROTOCOL_VERSION = CANVAS_PROTOCOL_VERSION;
 exports.CommandRegistry = CommandRegistry;
 exports.DEFAULT_BLOCKS = DEFAULT_BLOCKS;
 exports.Editor = Editor;
 exports.canHaveChildren = canHaveChildren;
+exports.canvasChannelName = canvasChannelName;
+exports.createCanvasReceiver = createCanvasReceiver;
 exports.createEditor = createEditor;
 exports.defineBlock = defineBlock;
 exports.dropPositionFromPointer = dropPositionFromPointer;
 exports.el = el;
 exports.isAncestorOf = isAncestorOf;
+exports.isCanvasMessage = isCanvasMessage;
 exports.isTextTemplate = isTextTemplate;
 exports.lit = lit;
 exports.templateChildren = templateChildren;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as t from '@nuforge/types';
-import { Nu } from '@nuforge/core';
+import { Nu, NuExternalsFactory } from '@nuforge/core';
 import { MutationEntry } from '@nuforge/reactivity';
 
 interface PropSchemaField {
@@ -46,6 +46,104 @@ declare function textPreview(node: t.Template): string | null;
 declare function canHaveChildren(node: t.Template | null): boolean;
 declare function isAncestorOf(nu: Nu, ancestor: t.Template, node: t.Template): boolean;
 
+declare const CANVAS_CHANNEL = "nuforge-canvas";
+declare const CANVAS_PROTOCOL_VERSION = 1;
+declare function canvasChannelName(src: string): string;
+interface FlattenedState {
+    root: {
+        $$typeId: string;
+    };
+    types: Record<string, {
+        type: string;
+        [key: string]: unknown;
+    }>;
+}
+interface CanvasInitMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'init';
+    activeComponent: string;
+    flat: FlattenedState;
+}
+interface CanvasPatchMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'patch';
+    activeComponent: string;
+    flat: FlattenedState;
+    rev: number;
+}
+interface CanvasUiMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'ui';
+    payload: unknown;
+}
+type CanvasHostMessage = CanvasInitMessage | CanvasPatchMessage | CanvasUiMessage;
+interface CanvasReadyMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'ready';
+    mountGen: number;
+}
+interface CanvasSelectMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'select';
+    nodeId: string | null;
+}
+interface CanvasHoverMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'hover';
+    nodeId: string | null;
+}
+interface CanvasDropMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'drop';
+    targetId: string;
+    position: DropPosition;
+}
+interface CanvasKeydownMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'keydown';
+    key: string;
+    code: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+}
+interface CanvasLinkClickMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'link-click';
+    href: string;
+}
+type CanvasClientMessage = CanvasReadyMessage | CanvasSelectMessage | CanvasHoverMessage | CanvasDropMessage | CanvasKeydownMessage | CanvasLinkClickMessage;
+type CanvasMessage = CanvasHostMessage | CanvasClientMessage;
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+declare function isCanvasMessage(data: unknown): data is CanvasMessage;
+
+interface CanvasReceiverOpts {
+    src: string;
+    externals?: NuExternalsFactory;
+}
+interface CanvasReceiver {
+    nu: Nu;
+    volatile: {
+        activeComponent: string | null;
+        loadGeneration: number;
+    };
+    postReady(): void;
+    onUi(cb: (payload: unknown) => void): () => void;
+    postEvent(message: DistributiveOmit<CanvasClientMessage, 'channel' | 'v'>): void;
+    dispose(): void;
+}
+declare function createCanvasReceiver(opts: CanvasReceiverOpts): CanvasReceiver;
+
 interface CreateEditorOptions {
     blocks?: Block[];
     defaultBlocks?: boolean;
@@ -124,5 +222,5 @@ declare class CommandRegistry {
     run(id: string): void;
 }
 
-export { BlockRegistry, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };
-export type { Block, Command, CreateEditorOptions, DropPosition, PropSchemaField };
+export { BlockRegistry, CANVAS_CHANNEL, CANVAS_PROTOCOL_VERSION, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, canvasChannelName, createCanvasReceiver, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isCanvasMessage, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };
+export type { Block, CanvasClientMessage, CanvasDropMessage, CanvasHostMessage, CanvasHoverMessage, CanvasInitMessage, CanvasKeydownMessage, CanvasLinkClickMessage, CanvasMessage, CanvasPatchMessage, CanvasReadyMessage, CanvasReceiver, CanvasReceiverOpts, CanvasSelectMessage, CanvasUiMessage, Command, CreateEditorOptions, DistributiveOmit, DropPosition, FlattenedState, PropSchemaField };

package/dist/index.mjs

@@ -1,4 +1,6 @@
 import * as t from '@nuforge/types';
+import { Nu } from '@nuforge/core';
+import { reactive } from '@nuforge/reactivity';
 import { Parser } from '@nuforge/parser';
 
 function lit(value) {
@@ -72,6 +74,78 @@ const DEFAULT_BLOCKS = [
     },
 ];
 
+const CANVAS_CHANNEL = 'nuforge-canvas';
+const CANVAS_PROTOCOL_VERSION = 1;
+function canvasChannelName(src) {
+    return `${CANVAS_CHANNEL}:${src}`;
+}
+function isCanvasMessage(data) {
+    return (!!data &&
+        typeof data === 'object' &&
+        data.channel === CANVAS_CHANNEL &&
+        data.v === CANVAS_PROTOCOL_VERSION);
+}
+
+function createCanvasReceiver(opts) {
+    const nu = Nu.create({ externals: opts.externals });
+    const volatile = reactive({ activeComponent: null, loadGeneration: 0 });
+    const channel = new BroadcastChannel(canvasChannelName(opts.src));
+    const uiListeners = new Set();
+    const applyState = (message) => {
+        if (message.type === 'init') {
+            nu.load(t.unflatten(message.flat));
+            volatile.loadGeneration++;
+        }
+        else {
+            nu.change(() => t.merge(nu.state, t.unflatten(message.flat), { arrayReconcile: 'id' }));
+        }
+        volatile.activeComponent = message.activeComponent;
+    };
+    const onMessage = (event) => {
+        if (!isCanvasMessage(event.data)) {
+            return;
+        }
+        const message = event.data;
+        if (message.type === 'init' || message.type === 'patch') {
+            applyState(message);
+        }
+        else if (message.type === 'ui') {
+            for (const cb of uiListeners) {
+                cb(message.payload);
+            }
+        }
+    };
+    channel.addEventListener('message', onMessage);
+    return {
+        nu,
+        volatile,
+        postReady() {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'ready',
+                mountGen: Math.floor(Math.random() * 1e9),
+            });
+        },
+        onUi(cb) {
+            uiListeners.add(cb);
+            return () => uiListeners.delete(cb);
+        },
+        postEvent(message) {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                ...message,
+            });
+        },
+        dispose() {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+            uiListeners.clear();
+        },
+    };
+}
+
 class CommandRegistry {
     editor;
     commands = new Map();
@@ -654,4 +728,4 @@ function createEditor(nu, opts) {
     return new Editor(nu, opts);
 }
 
-export { BlockRegistry, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };
+export { BlockRegistry, CANVAS_CHANNEL, CANVAS_PROTOCOL_VERSION, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, canvasChannelName, createCanvasReceiver, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isCanvasMessage, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };

package/dist/react.cjs

@@ -2,9 +2,21 @@
 'use strict';
 
 var react$1 = require('@nuforge/react');
+var t = require('@nuforge/types');
 var react = require('react');
 var reactDom = require('react-dom');
-require('@nuforge/types');
+
+const CANVAS_CHANNEL = 'nuforge-canvas';
+const CANVAS_PROTOCOL_VERSION = 1;
+function canvasChannelName(src) {
+    return `${CANVAS_CHANNEL}:${src}`;
+}
+function isCanvasMessage(data) {
+    return (!!data &&
+        typeof data === 'object' &&
+        data.channel === CANVAS_CHANNEL &&
+        data.v === CANVAS_PROTOCOL_VERSION);
+}
 
 function dropPositionFromPointer(clientY, rect, opts = {}) {
     const ratio = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
@@ -174,24 +186,14 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
             setDrop(null);
         }
     }, [previewMode]);
-    const rectOf = (id) => {
-        if (!doc || !id) {
-            return null;
-        }
-        const el = doc.querySelector(`[data-nu-id="${id}"]`);
+    const elementFor = (id) => doc && id ? doc.querySelector(`[data-nu-id="${id}"]`) : null;
+    const rectOfEl = (el) => {
         if (!el) {
             return null;
         }
         const r = el.getBoundingClientRect();
         return { top: r.top, left: r.left, width: r.width, height: r.height };
     };
-    const labelOf = (id) => {
-        if (!doc || !id) {
-            return null;
-        }
-        const el = doc.querySelector(`[data-nu-id="${id}"]`);
-        return el ? el.tagName.toLowerCase() : null;
-    };
     react.useLayoutEffect(() => {
         if (previewMode) {
             setSelected(null);
@@ -199,9 +201,10 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
             setSelectedLabel(null);
             return;
         }
-        setSelected(rectOf(selectedId));
-        setHovered(hoveredId && hoveredId !== selectedId ? rectOf(hoveredId) : null);
-        setSelectedLabel(labelOf(selectedId));
+        const selectedEl = elementFor(selectedId);
+        setSelected(rectOfEl(selectedEl));
+        setHovered(hoveredId && hoveredId !== selectedId ? rectOfEl(elementFor(hoveredId)) : null);
+        setSelectedLabel(selectedEl ? selectedEl.tagName.toLowerCase() : null);
     }, [previewMode, selectedId, hoveredId, revision, tick, doc]);
     return react.createElement('div', { className: containerClassName, style: { position: 'relative' } }, react.createElement('iframe', { ref: iframeRef, title: 'nuforge preview', className, srcDoc }, doc?.body
         ? reactDom.createPortal(react.createElement(CanvasWindowContext.Provider, { value: { doc, window: doc.defaultView } }, react.createElement(EditorFrame, { frame })), doc.body)
@@ -216,6 +219,201 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
         }, renderBox({ selected, hovered, selectedLabel, drop }))
         : null);
 }
+function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hoveredId = null, revision = 0, previewMode = false, uiPayload, onSelect, onHover, onDropOnNode, onKeydownRelay, onLinkClick, className, containerClassName, renderBox, }) {
+    const iframeRef = react.useRef(null);
+    const [doc, setDoc] = react.useState(null);
+    const [tick, setTick] = react.useState(0);
+    const [selected, setSelected] = react.useState(null);
+    const [hovered, setHovered] = react.useState(null);
+    const [selectedLabel, setSelectedLabel] = react.useState(null);
+    const props = react.useRef({
+        nu,
+        activeComponent,
+        uiPayload,
+        onSelect,
+        onHover,
+        onDropOnNode,
+        onKeydownRelay,
+        onLinkClick,
+    });
+    props.current = {
+        nu,
+        activeComponent,
+        uiPayload,
+        onSelect,
+        onHover,
+        onDropOnNode,
+        onKeydownRelay,
+        onLinkClick,
+    };
+    const connectionRef = react.useRef(null);
+    react.useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const onLoad = () => setDoc(iframe.contentDocument);
+        iframe.addEventListener('load', onLoad);
+        return () => iframe.removeEventListener('load', onLoad);
+    }, [src]);
+    react.useEffect(() => {
+        if (!doc) {
+            return;
+        }
+        const onScroll = () => setTick((x) => x + 1);
+        doc.addEventListener('scroll', onScroll, true);
+        return () => doc.removeEventListener('scroll', onScroll, true);
+    }, [doc]);
+    react.useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const observer = new ResizeObserver(() => setTick((x) => x + 1));
+        observer.observe(iframe);
+        if (doc?.documentElement) {
+            observer.observe(doc.documentElement);
+        }
+        return () => observer.disconnect();
+    }, [doc]);
+    react.useEffect(() => {
+        const channel = new BroadcastChannel(canvasChannelName(src));
+        let ready = false;
+        let mountGen = null;
+        let rafId = null;
+        let rev = 0;
+        const sendInit = () => {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'init',
+                activeComponent: props.current.activeComponent,
+                flat: t.flatten(props.current.nu.state),
+            });
+        };
+        const requestPatch = () => {
+            if (!ready || rafId !== null) {
+                return;
+            }
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                channel.postMessage({
+                    channel: CANVAS_CHANNEL,
+                    v: CANVAS_PROTOCOL_VERSION,
+                    type: 'patch',
+                    activeComponent: props.current.activeComponent,
+                    flat: t.flatten(props.current.nu.state),
+                    rev: ++rev,
+                });
+            });
+        };
+        const postUi = (payload) => {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'ui',
+                payload,
+            });
+        };
+        connectionRef.current = { sendInit, requestPatch, postUi };
+        const onMessage = (event) => {
+            if (!isCanvasMessage(event.data)) {
+                return;
+            }
+            const message = event.data;
+            const p = props.current;
+            switch (message.type) {
+                case 'ready':
+                    if (mountGen !== null && message.mountGen <= mountGen) {
+                        return;
+                    }
+                    mountGen = message.mountGen;
+                    ready = true;
+                    sendInit();
+                    postUi(props.current.uiPayload);
+                    break;
+                case 'select':
+                    p.onSelect?.(message.nodeId);
+                    setTick((x) => x + 1);
+                    break;
+                case 'hover':
+                    p.onHover?.(message.nodeId);
+                    setTick((x) => x + 1);
+                    break;
+                case 'drop':
+                    p.onDropOnNode?.(message.targetId, message.position);
+                    break;
+                case 'keydown':
+                    p.onKeydownRelay?.(message);
+                    break;
+                case 'link-click':
+                    p.onLinkClick?.(message.href);
+                    break;
+            }
+        };
+        channel.addEventListener('message', onMessage);
+        const unlistenChangeset = nu.listenToChangeset(() => {
+            requestPatch();
+            setTick((x) => x + 1);
+        });
+        return () => {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+            unlistenChangeset();
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            connectionRef.current = null;
+        };
+    }, [src, nu]);
+    const resyncKey = `${activeComponent}:${previewMode}`;
+    const lastResyncKey = react.useRef(null);
+    react.useEffect(() => {
+        if (lastResyncKey.current === resyncKey) {
+            return;
+        }
+        lastResyncKey.current = resyncKey;
+        connectionRef.current?.sendInit();
+    }, [resyncKey]);
+    react.useEffect(() => {
+        connectionRef.current?.postUi(uiPayload);
+    }, [uiPayload]);
+    const elementFor = (id) => doc && id ? doc.querySelector(`[data-nu-id="${id}"]`) : null;
+    const rectOfEl = (el) => {
+        if (!el) {
+            return null;
+        }
+        const r = el.getBoundingClientRect();
+        return { top: r.top, left: r.left, width: r.width, height: r.height };
+    };
+    react.useLayoutEffect(() => {
+        if (previewMode) {
+            setSelected(null);
+            setHovered(null);
+            setSelectedLabel(null);
+            return;
+        }
+        const selectedEl = elementFor(selectedId);
+        setSelected(rectOfEl(selectedEl));
+        setHovered(hoveredId && hoveredId !== selectedId ? rectOfEl(elementFor(hoveredId)) : null);
+        setSelectedLabel(selectedEl ? selectedEl.tagName.toLowerCase() : null);
+    }, [previewMode, selectedId, hoveredId, revision, tick, doc]);
+    return react.createElement('div', { className: containerClassName, style: { position: 'relative' } }, react.createElement('iframe', {
+        ref: iframeRef,
+        title: 'nuforge canvas',
+        className,
+        src,
+    }), renderBox && !previewMode
+        ? react.createElement('div', {
+            style: {
+                position: 'absolute',
+                inset: 0,
+                pointerEvents: 'none',
+                overflow: 'hidden',
+            },
+        }, renderBox({ selected, hovered, selectedLabel }))
+        : null);
+}
 function useStructureRevision(editor) {
     const [rev, setRev] = react.useState(0);
     react.useEffect(() => editor.onStructureChange(() => setRev((r) => r + 1)), [editor]);
@@ -278,6 +476,7 @@ exports.DEFAULT_CANVAS_CSS = DEFAULT_CANVAS_CSS;
 exports.EditorFrame = EditorFrame;
 exports.IframeCanvas = IframeCanvas;
 exports.PropFields = PropFields;
+exports.RemoteCanvasHost = RemoteCanvasHost;
 exports.templateIdFromElement = templateIdFromElement;
 exports.useCanvasWindow = useCanvasWindow;
 exports.useEditorRevision = useEditorRevision;

package/dist/react.d.ts

@@ -27,6 +27,22 @@ declare class BlockRegistry {
     byCategory(): Record<string, Block[]>;
 }
 
+type DropPosition = 'before' | 'after' | 'inside';
+
+declare const CANVAS_CHANNEL = "nuforge-canvas";
+declare const CANVAS_PROTOCOL_VERSION = 1;
+interface CanvasKeydownMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'keydown';
+    key: string;
+    code: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+}
+
 interface Command {
     id: string;
     label: string;
@@ -43,8 +59,6 @@ declare class CommandRegistry {
     run(id: string): void;
 }
 
-type DropPosition = 'before' | 'after' | 'inside';
-
 interface CreateEditorOptions {
     blocks?: Block[];
     defaultBlocks?: boolean;
@@ -146,6 +160,29 @@ interface IframeCanvasProps {
     }) => ReactNode;
 }
 declare function IframeCanvas({ frame, selectedId, hoveredId, revision, previewMode, onSelect, onHover, onDropOnNode, baseCss, srcDoc, className, containerClassName, renderBox, }: IframeCanvasProps): ReactNode;
+interface RemoteCanvasHostProps {
+    nu: Nu;
+    activeComponent: string;
+    src: string;
+    selectedId?: string | null;
+    hoveredId?: string | null;
+    revision?: number;
+    previewMode?: boolean;
+    uiPayload?: unknown;
+    onSelect?: (id: string | null) => void;
+    onHover?: (id: string | null) => void;
+    onDropOnNode?: (targetId: string, position: DropPosition) => void;
+    onKeydownRelay?: (e: Omit<CanvasKeydownMessage, 'channel' | 'v' | 'type'>) => void;
+    onLinkClick?: (href: string) => void;
+    className?: string;
+    containerClassName?: string;
+    renderBox?: (rects: {
+        selected: Rect | null;
+        hovered: Rect | null;
+        selectedLabel: string | null;
+    }) => ReactNode;
+}
+declare function RemoteCanvasHost({ nu, activeComponent, src, selectedId, hoveredId, revision, previewMode, uiPayload, onSelect, onHover, onDropOnNode, onKeydownRelay, onLinkClick, className, containerClassName, renderBox, }: RemoteCanvasHostProps): ReactNode;
 declare function useStructureRevision(editor: Pick<Editor, 'onStructureChange'>): number;
 declare function useEditorRevision(editor: Pick<Editor, 'onChange'>): number;
 type PropFieldValue = string | number | boolean | undefined;
@@ -157,5 +194,5 @@ interface PropFieldsProps {
 }
 declare function PropFields({ fields, values, onChange, className, }: PropFieldsProps): ReactNode;
 
-export { DEFAULT_CANVAS_CSS, EditorFrame, IframeCanvas, PropFields, templateIdFromElement, useCanvasWindow, useEditorRevision, useStructureRevision };
-export type { CanvasWindow, IframeCanvasProps, PropFieldValue, PropFieldsProps, Rect };
+export { DEFAULT_CANVAS_CSS, EditorFrame, IframeCanvas, PropFields, RemoteCanvasHost, templateIdFromElement, useCanvasWindow, useEditorRevision, useStructureRevision };
+export type { CanvasWindow, IframeCanvasProps, PropFieldValue, PropFieldsProps, Rect, RemoteCanvasHostProps };

package/dist/react.mjs

@@ -1,8 +1,20 @@
 'use client';
 import { createViewElement, observer } from '@nuforge/react';
+import { flatten } from '@nuforge/types';
 import { createContext, memo, createElement, Fragment, useRef, useState, useEffect, useLayoutEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import '@nuforge/types';
+
+const CANVAS_CHANNEL = 'nuforge-canvas';
+const CANVAS_PROTOCOL_VERSION = 1;
+function canvasChannelName(src) {
+    return `${CANVAS_CHANNEL}:${src}`;
+}
+function isCanvasMessage(data) {
+    return (!!data &&
+        typeof data === 'object' &&
+        data.channel === CANVAS_CHANNEL &&
+        data.v === CANVAS_PROTOCOL_VERSION);
+}
 
 function dropPositionFromPointer(clientY, rect, opts = {}) {
     const ratio = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
@@ -172,24 +184,14 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
             setDrop(null);
         }
     }, [previewMode]);
-    const rectOf = (id) => {
-        if (!doc || !id) {
-            return null;
-        }
-        const el = doc.querySelector(`[data-nu-id="${id}"]`);
+    const elementFor = (id) => doc && id ? doc.querySelector(`[data-nu-id="${id}"]`) : null;
+    const rectOfEl = (el) => {
         if (!el) {
             return null;
         }
         const r = el.getBoundingClientRect();
         return { top: r.top, left: r.left, width: r.width, height: r.height };
     };
-    const labelOf = (id) => {
-        if (!doc || !id) {
-            return null;
-        }
-        const el = doc.querySelector(`[data-nu-id="${id}"]`);
-        return el ? el.tagName.toLowerCase() : null;
-    };
     useLayoutEffect(() => {
         if (previewMode) {
             setSelected(null);
@@ -197,9 +199,10 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
             setSelectedLabel(null);
             return;
         }
-        setSelected(rectOf(selectedId));
-        setHovered(hoveredId && hoveredId !== selectedId ? rectOf(hoveredId) : null);
-        setSelectedLabel(labelOf(selectedId));
+        const selectedEl = elementFor(selectedId);
+        setSelected(rectOfEl(selectedEl));
+        setHovered(hoveredId && hoveredId !== selectedId ? rectOfEl(elementFor(hoveredId)) : null);
+        setSelectedLabel(selectedEl ? selectedEl.tagName.toLowerCase() : null);
     }, [previewMode, selectedId, hoveredId, revision, tick, doc]);
     return createElement('div', { className: containerClassName, style: { position: 'relative' } }, createElement('iframe', { ref: iframeRef, title: 'nuforge preview', className, srcDoc }, doc?.body
         ? createPortal(createElement(CanvasWindowContext.Provider, { value: { doc, window: doc.defaultView } }, createElement(EditorFrame, { frame })), doc.body)
@@ -214,6 +217,201 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
         }, renderBox({ selected, hovered, selectedLabel, drop }))
         : null);
 }
+function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hoveredId = null, revision = 0, previewMode = false, uiPayload, onSelect, onHover, onDropOnNode, onKeydownRelay, onLinkClick, className, containerClassName, renderBox, }) {
+    const iframeRef = useRef(null);
+    const [doc, setDoc] = useState(null);
+    const [tick, setTick] = useState(0);
+    const [selected, setSelected] = useState(null);
+    const [hovered, setHovered] = useState(null);
+    const [selectedLabel, setSelectedLabel] = useState(null);
+    const props = useRef({
+        nu,
+        activeComponent,
+        uiPayload,
+        onSelect,
+        onHover,
+        onDropOnNode,
+        onKeydownRelay,
+        onLinkClick,
+    });
+    props.current = {
+        nu,
+        activeComponent,
+        uiPayload,
+        onSelect,
+        onHover,
+        onDropOnNode,
+        onKeydownRelay,
+        onLinkClick,
+    };
+    const connectionRef = useRef(null);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const onLoad = () => setDoc(iframe.contentDocument);
+        iframe.addEventListener('load', onLoad);
+        return () => iframe.removeEventListener('load', onLoad);
+    }, [src]);
+    useEffect(() => {
+        if (!doc) {
+            return;
+        }
+        const onScroll = () => setTick((x) => x + 1);
+        doc.addEventListener('scroll', onScroll, true);
+        return () => doc.removeEventListener('scroll', onScroll, true);
+    }, [doc]);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const observer = new ResizeObserver(() => setTick((x) => x + 1));
+        observer.observe(iframe);
+        if (doc?.documentElement) {
+            observer.observe(doc.documentElement);
+        }
+        return () => observer.disconnect();
+    }, [doc]);
+    useEffect(() => {
+        const channel = new BroadcastChannel(canvasChannelName(src));
+        let ready = false;
+        let mountGen = null;
+        let rafId = null;
+        let rev = 0;
+        const sendInit = () => {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'init',
+                activeComponent: props.current.activeComponent,
+                flat: flatten(props.current.nu.state),
+            });
+        };
+        const requestPatch = () => {
+            if (!ready || rafId !== null) {
+                return;
+            }
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                channel.postMessage({
+                    channel: CANVAS_CHANNEL,
+                    v: CANVAS_PROTOCOL_VERSION,
+                    type: 'patch',
+                    activeComponent: props.current.activeComponent,
+                    flat: flatten(props.current.nu.state),
+                    rev: ++rev,
+                });
+            });
+        };
+        const postUi = (payload) => {
+            channel.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'ui',
+                payload,
+            });
+        };
+        connectionRef.current = { sendInit, requestPatch, postUi };
+        const onMessage = (event) => {
+            if (!isCanvasMessage(event.data)) {
+                return;
+            }
+            const message = event.data;
+            const p = props.current;
+            switch (message.type) {
+                case 'ready':
+                    if (mountGen !== null && message.mountGen <= mountGen) {
+                        return;
+                    }
+                    mountGen = message.mountGen;
+                    ready = true;
+                    sendInit();
+                    postUi(props.current.uiPayload);
+                    break;
+                case 'select':
+                    p.onSelect?.(message.nodeId);
+                    setTick((x) => x + 1);
+                    break;
+                case 'hover':
+                    p.onHover?.(message.nodeId);
+                    setTick((x) => x + 1);
+                    break;
+                case 'drop':
+                    p.onDropOnNode?.(message.targetId, message.position);
+                    break;
+                case 'keydown':
+                    p.onKeydownRelay?.(message);
+                    break;
+                case 'link-click':
+                    p.onLinkClick?.(message.href);
+                    break;
+            }
+        };
+        channel.addEventListener('message', onMessage);
+        const unlistenChangeset = nu.listenToChangeset(() => {
+            requestPatch();
+            setTick((x) => x + 1);
+        });
+        return () => {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+            unlistenChangeset();
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            connectionRef.current = null;
+        };
+    }, [src, nu]);
+    const resyncKey = `${activeComponent}:${previewMode}`;
+    const lastResyncKey = useRef(null);
+    useEffect(() => {
+        if (lastResyncKey.current === resyncKey) {
+            return;
+        }
+        lastResyncKey.current = resyncKey;
+        connectionRef.current?.sendInit();
+    }, [resyncKey]);
+    useEffect(() => {
+        connectionRef.current?.postUi(uiPayload);
+    }, [uiPayload]);
+    const elementFor = (id) => doc && id ? doc.querySelector(`[data-nu-id="${id}"]`) : null;
+    const rectOfEl = (el) => {
+        if (!el) {
+            return null;
+        }
+        const r = el.getBoundingClientRect();
+        return { top: r.top, left: r.left, width: r.width, height: r.height };
+    };
+    useLayoutEffect(() => {
+        if (previewMode) {
+            setSelected(null);
+            setHovered(null);
+            setSelectedLabel(null);
+            return;
+        }
+        const selectedEl = elementFor(selectedId);
+        setSelected(rectOfEl(selectedEl));
+        setHovered(hoveredId && hoveredId !== selectedId ? rectOfEl(elementFor(hoveredId)) : null);
+        setSelectedLabel(selectedEl ? selectedEl.tagName.toLowerCase() : null);
+    }, [previewMode, selectedId, hoveredId, revision, tick, doc]);
+    return createElement('div', { className: containerClassName, style: { position: 'relative' } }, createElement('iframe', {
+        ref: iframeRef,
+        title: 'nuforge canvas',
+        className,
+        src,
+    }), renderBox && !previewMode
+        ? createElement('div', {
+            style: {
+                position: 'absolute',
+                inset: 0,
+                pointerEvents: 'none',
+                overflow: 'hidden',
+            },
+        }, renderBox({ selected, hovered, selectedLabel }))
+        : null);
+}
 function useStructureRevision(editor) {
     const [rev, setRev] = useState(0);
     useEffect(() => editor.onStructureChange(() => setRev((r) => r + 1)), [editor]);
@@ -272,4 +470,4 @@ function PropFieldControl({ field, value, onChange, }) {
     return createElement('label', { htmlFor: id, 'data-nu-field': field.name }, createElement('span', null, label), control);
 }
 
-export { DEFAULT_CANVAS_CSS, EditorFrame, IframeCanvas, PropFields, templateIdFromElement, useCanvasWindow, useEditorRevision, useStructureRevision };
+export { DEFAULT_CANVAS_CSS, EditorFrame, IframeCanvas, PropFields, RemoteCanvasHost, templateIdFromElement, useCanvasWindow, useEditorRevision, useStructureRevision };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuforge/editor",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "High-level SDK for building visual page editors on nuforge (mutations, blocks, commands, selection)",
   "license": "MIT",
   "type": "module",
@@ -29,10 +29,10 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "@nuforge/core": "0.1.4",
-    "@nuforge/parser": "0.1.3",
-    "@nuforge/react": "0.1.4",
-    "@nuforge/types": "0.1.3"
+    "@nuforge/core": "0.1.5",
+    "@nuforge/react": "0.1.5",
+    "@nuforge/types": "0.1.4",
+    "@nuforge/parser": "0.1.4"
   },
   "peerDependenciesMeta": {
     "@nuforge/react": {
@@ -50,10 +50,10 @@
     "@types/react-dom": "^19.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "@nuforge/core": "0.1.4",
-    "@nuforge/parser": "0.1.3",
-    "@nuforge/react": "0.1.4",
-    "@nuforge/types": "0.1.3"
+    "@nuforge/core": "0.1.5",
+    "@nuforge/react": "0.1.5",
+    "@nuforge/parser": "0.1.4",
+    "@nuforge/types": "0.1.4"
   },
   "publishConfig": {
     "access": "public"