@nuforge/editor 0.3.2 → 0.4.0

package/dist/index.cjs

@@ -96,22 +96,61 @@ const DEFAULT_BLOCKS = [
 ];
 
 const CANVAS_CHANNEL = 'nuforge-canvas';
-const CANVAS_PROTOCOL_VERSION = 1;
-function canvasChannelName(src) {
-    return `${CANVAS_CHANNEL}:${src}`;
-}
+const CANVAS_PROTOCOL_VERSION = 2;
 function isCanvasMessage(data) {
     return (!!data &&
         typeof data === 'object' &&
         data.channel === CANVAS_CHANNEL &&
         data.v === CANVAS_PROTOCOL_VERSION);
 }
+function canvasNonce() {
+    const c = globalThis.crypto;
+    if (c?.randomUUID) {
+        return c.randomUUID();
+    }
+    return `${Math.random().toString(36).slice(2)}${Math.random().toString(36).slice(2)}`;
+}
 
-function createCanvasReceiver(opts) {
+const READY_RETRY_MS = 100;
+const READY_RETRY_MAX_MS = 2000;
+function onNextFrame(cb) {
+    const raf = globalThis
+        .requestAnimationFrame;
+    if (raf) {
+        raf(cb);
+    }
+    else {
+        setTimeout(cb, 16);
+    }
+}
+function sameRect(a, b) {
+    if (!a || !b) {
+        return a === b;
+    }
+    return (a.top === b.top &&
+        a.left === b.left &&
+        a.width === b.width &&
+        a.height === b.height);
+}
+function sameRects(a, b) {
+    return (a.selectedLabel === b.selectedLabel &&
+        sameRect(a.selected, b.selected) &&
+        sameRect(a.hovered, b.hovered));
+}
+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 view = opts.view ?? globalThis.window ?? null;
+    const doc = opts.doc ?? globalThis.document ?? null;
     const uiListeners = new Set();
+    const nonce = canvasNonce();
+    let port = null;
+    let retryTimer = null;
+    let retryDelay = READY_RETRY_MS;
+    let disposed = false;
+    const send = (message) => {
+        port?.postMessage(message);
+    };
     const applyState = (message) => {
         if (message.type === 'init') {
             nu.load(t__namespace.unflatten(message.flat));
@@ -122,46 +161,150 @@ function createCanvasReceiver(opts) {
         }
         volatile.activeComponent = message.activeComponent;
     };
-    const onMessage = (event) => {
+    let tracked = {
+        selectedId: null,
+        hoveredId: null,
+    };
+    let lastRects = null;
+    let measureScheduled = false;
+    let resizeObserver = null;
+    const elementFor = (id) => id && doc ? doc.querySelector(`[data-nu-id="${id}"]`) : null;
+    const rectOf = (el) => {
+        if (!el) {
+            return null;
+        }
+        const r = el.getBoundingClientRect();
+        return { top: r.top, left: r.left, width: r.width, height: r.height };
+    };
+    const measure = () => {
+        const selectedEl = elementFor(tracked.selectedId);
+        const next = {
+            type: 'rects',
+            selected: rectOf(selectedEl),
+            hovered: tracked.hoveredId && tracked.hoveredId !== tracked.selectedId
+                ? rectOf(elementFor(tracked.hoveredId))
+                : null,
+            selectedLabel: selectedEl ? selectedEl.tagName.toLowerCase() : null,
+        };
+        if (lastRects && sameRects(lastRects, next)) {
+            return;
+        }
+        lastRects = next;
+        send({ channel: CANVAS_CHANNEL, v: CANVAS_PROTOCOL_VERSION, ...next });
+    };
+    const scheduleMeasure = () => {
+        if (measureScheduled || !doc) {
+            return;
+        }
+        measureScheduled = true;
+        onNextFrame(() => {
+            measureScheduled = false;
+            measure();
+        });
+    };
+    const onScroll = () => scheduleMeasure();
+    if (doc) {
+        doc.addEventListener('scroll', onScroll, true);
+        const RO = globalThis
+            .ResizeObserver;
+        if (RO && doc.documentElement) {
+            resizeObserver = new RO(scheduleMeasure);
+            resizeObserver.observe(doc.documentElement);
+        }
+    }
+    const onPortMessage = (event) => {
         if (!isCanvasMessage(event.data)) {
             return;
         }
         const message = event.data;
         if (message.type === 'init' || message.type === 'patch') {
             applyState(message);
+            scheduleMeasure();
         }
         else if (message.type === 'ui') {
             for (const cb of uiListeners) {
                 cb(message.payload);
             }
+            scheduleMeasure();
+        }
+        else if (message.type === 'track') {
+            tracked = { selectedId: message.selectedId, hoveredId: message.hoveredId };
+            lastRects = null;
+            scheduleMeasure();
+        }
+    };
+    const stopRetrying = () => {
+        if (retryTimer !== null) {
+            clearTimeout(retryTimer);
+            retryTimer = null;
+        }
+    };
+    const announce = () => {
+        view?.parent?.postMessage({
+            channel: CANVAS_CHANNEL,
+            v: CANVAS_PROTOCOL_VERSION,
+            type: 'ready',
+            nonce,
+        }, '*');
+        retryDelay = Math.min(retryDelay * 2, READY_RETRY_MAX_MS);
+        retryTimer = setTimeout(announce, retryDelay);
+    };
+    const onWindowMessage = (event) => {
+        if (disposed || !isCanvasMessage(event.data)) {
+            return;
+        }
+        const message = event.data;
+        if (message.type !== 'connect' || message.nonce !== nonce) {
+            return;
         }
+        const incoming = event.ports?.[0];
+        if (!incoming) {
+            return;
+        }
+        port?.close();
+        port = incoming;
+        port.addEventListener('message', onPortMessage);
+        port.start();
+        stopRetrying();
+        send({
+            channel: CANVAS_CHANNEL,
+            v: CANVAS_PROTOCOL_VERSION,
+            type: 'hello',
+            nonce,
+        });
     };
-    channel.addEventListener('message', onMessage);
+    view?.addEventListener('message', onWindowMessage);
     return {
         nu,
         volatile,
         postReady() {
-            channel.postMessage({
-                channel: CANVAS_CHANNEL,
-                v: CANVAS_PROTOCOL_VERSION,
-                type: 'ready',
-                mountGen: Math.floor(Math.random() * 1e9),
-            });
+            if (disposed || port || retryTimer !== null) {
+                return;
+            }
+            retryDelay = READY_RETRY_MS;
+            announce();
         },
         onUi(cb) {
             uiListeners.add(cb);
             return () => uiListeners.delete(cb);
         },
         postEvent(message) {
-            channel.postMessage({
+            send({
                 channel: CANVAS_CHANNEL,
                 v: CANVAS_PROTOCOL_VERSION,
                 ...message,
             });
         },
         dispose() {
-            channel.removeEventListener('message', onMessage);
-            channel.close();
+            disposed = true;
+            stopRetrying();
+            doc?.removeEventListener('scroll', onScroll, true);
+            resizeObserver?.disconnect();
+            resizeObserver = null;
+            view?.removeEventListener('message', onWindowMessage);
+            port?.removeEventListener('message', onPortMessage);
+            port?.close();
+            port = null;
             uiListeners.clear();
         },
     };
@@ -758,7 +901,7 @@ exports.CommandRegistry = CommandRegistry;
 exports.DEFAULT_BLOCKS = DEFAULT_BLOCKS;
 exports.Editor = Editor;
 exports.canHaveChildren = canHaveChildren;
-exports.canvasChannelName = canvasChannelName;
+exports.canvasNonce = canvasNonce;
 exports.createCanvasReceiver = createCanvasReceiver;
 exports.createEditor = createEditor;
 exports.defineBlock = defineBlock;

package/dist/index.d.ts

@@ -47,8 +47,13 @@ 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;
+declare const CANVAS_PROTOCOL_VERSION = 2;
+interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
 interface FlattenedState {
     root: {
         $$typeId: string;
@@ -79,12 +84,31 @@ interface CanvasUiMessage {
     type: 'ui';
     payload: unknown;
 }
-type CanvasHostMessage = CanvasInitMessage | CanvasPatchMessage | CanvasUiMessage;
+interface CanvasConnectMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'connect';
+    nonce: string;
+}
+interface CanvasTrackMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'track';
+    selectedId: string | null;
+    hoveredId: string | null;
+}
+type CanvasHostMessage = CanvasInitMessage | CanvasPatchMessage | CanvasUiMessage | CanvasConnectMessage | CanvasTrackMessage;
 interface CanvasReadyMessage {
     channel: typeof CANVAS_CHANNEL;
     v: typeof CANVAS_PROTOCOL_VERSION;
     type: 'ready';
-    mountGen: number;
+    nonce: string;
+}
+interface CanvasHelloMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'hello';
+    nonce: string;
 }
 interface CanvasSelectMessage {
     channel: typeof CANVAS_CHANNEL;
@@ -122,14 +146,42 @@ interface CanvasLinkClickMessage {
     type: 'link-click';
     href: string;
 }
-type CanvasClientMessage = CanvasReadyMessage | CanvasSelectMessage | CanvasHoverMessage | CanvasDropMessage | CanvasKeydownMessage | CanvasLinkClickMessage;
+interface CanvasRectsMessage {
+    channel: typeof CANVAS_CHANNEL;
+    v: typeof CANVAS_PROTOCOL_VERSION;
+    type: 'rects';
+    selected: Rect | null;
+    hovered: Rect | null;
+    selectedLabel: string | null;
+}
+type CanvasEventMessage = CanvasSelectMessage | CanvasHoverMessage | CanvasDropMessage | CanvasKeydownMessage | CanvasLinkClickMessage;
+type CanvasClientMessage = CanvasReadyMessage | CanvasHelloMessage | CanvasRectsMessage | CanvasEventMessage;
 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;
+declare function canvasNonce(): string;
 
+interface CanvasView {
+    parent: {
+        postMessage(message: unknown, targetOrigin: string): void;
+    } | null;
+    addEventListener(type: 'message', cb: (e: MessageEvent) => void): void;
+    removeEventListener(type: 'message', cb: (e: MessageEvent) => void): void;
+}
+interface CanvasGeometrySource {
+    querySelector(selectors: string): CanvasMeasurable | null;
+    addEventListener(type: 'scroll', cb: () => void, capture: boolean): void;
+    removeEventListener(type: 'scroll', cb: () => void, capture: boolean): void;
+    documentElement?: Element | null;
+}
+interface CanvasMeasurable {
+    tagName: string;
+    getBoundingClientRect(): Rect;
+}
 interface CanvasReceiverOpts {
-    src: string;
     externals?: NuExternalsFactory;
+    view?: CanvasView;
+    doc?: CanvasGeometrySource;
 }
 interface CanvasReceiver {
     nu: Nu;
@@ -139,10 +191,10 @@ interface CanvasReceiver {
     };
     postReady(): void;
     onUi(cb: (payload: unknown) => void): () => void;
-    postEvent(message: DistributiveOmit<CanvasClientMessage, 'channel' | 'v'>): void;
+    postEvent(message: DistributiveOmit<CanvasEventMessage, 'channel' | 'v'>): void;
     dispose(): void;
 }
-declare function createCanvasReceiver(opts: CanvasReceiverOpts): CanvasReceiver;
+declare function createCanvasReceiver(opts?: CanvasReceiverOpts): CanvasReceiver;
 
 interface CreateEditorOptions {
     blocks?: Block[];
@@ -222,5 +274,5 @@ declare class CommandRegistry {
     run(id: string): void;
 }
 
-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 };
+export { BlockRegistry, CANVAS_CHANNEL, CANVAS_PROTOCOL_VERSION, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, canvasNonce, createCanvasReceiver, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isCanvasMessage, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };
+export type { Block, CanvasClientMessage, CanvasConnectMessage, CanvasDropMessage, CanvasEventMessage, CanvasGeometrySource, CanvasHelloMessage, CanvasHostMessage, CanvasHoverMessage, CanvasInitMessage, CanvasKeydownMessage, CanvasLinkClickMessage, CanvasMeasurable, CanvasMessage, CanvasPatchMessage, CanvasReadyMessage, CanvasReceiver, CanvasReceiverOpts, CanvasRectsMessage, CanvasSelectMessage, CanvasTrackMessage, CanvasUiMessage, CanvasView, Command, CreateEditorOptions, DistributiveOmit, DropPosition, FlattenedState, PropSchemaField, Rect };

package/dist/index.mjs

@@ -75,22 +75,61 @@ const DEFAULT_BLOCKS = [
 ];
 
 const CANVAS_CHANNEL = 'nuforge-canvas';
-const CANVAS_PROTOCOL_VERSION = 1;
-function canvasChannelName(src) {
-    return `${CANVAS_CHANNEL}:${src}`;
-}
+const CANVAS_PROTOCOL_VERSION = 2;
 function isCanvasMessage(data) {
     return (!!data &&
         typeof data === 'object' &&
         data.channel === CANVAS_CHANNEL &&
         data.v === CANVAS_PROTOCOL_VERSION);
 }
+function canvasNonce() {
+    const c = globalThis.crypto;
+    if (c?.randomUUID) {
+        return c.randomUUID();
+    }
+    return `${Math.random().toString(36).slice(2)}${Math.random().toString(36).slice(2)}`;
+}
 
-function createCanvasReceiver(opts) {
+const READY_RETRY_MS = 100;
+const READY_RETRY_MAX_MS = 2000;
+function onNextFrame(cb) {
+    const raf = globalThis
+        .requestAnimationFrame;
+    if (raf) {
+        raf(cb);
+    }
+    else {
+        setTimeout(cb, 16);
+    }
+}
+function sameRect(a, b) {
+    if (!a || !b) {
+        return a === b;
+    }
+    return (a.top === b.top &&
+        a.left === b.left &&
+        a.width === b.width &&
+        a.height === b.height);
+}
+function sameRects(a, b) {
+    return (a.selectedLabel === b.selectedLabel &&
+        sameRect(a.selected, b.selected) &&
+        sameRect(a.hovered, b.hovered));
+}
+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 view = opts.view ?? globalThis.window ?? null;
+    const doc = opts.doc ?? globalThis.document ?? null;
     const uiListeners = new Set();
+    const nonce = canvasNonce();
+    let port = null;
+    let retryTimer = null;
+    let retryDelay = READY_RETRY_MS;
+    let disposed = false;
+    const send = (message) => {
+        port?.postMessage(message);
+    };
     const applyState = (message) => {
         if (message.type === 'init') {
             nu.load(t.unflatten(message.flat));
@@ -101,46 +140,150 @@ function createCanvasReceiver(opts) {
         }
         volatile.activeComponent = message.activeComponent;
     };
-    const onMessage = (event) => {
+    let tracked = {
+        selectedId: null,
+        hoveredId: null,
+    };
+    let lastRects = null;
+    let measureScheduled = false;
+    let resizeObserver = null;
+    const elementFor = (id) => id && doc ? doc.querySelector(`[data-nu-id="${id}"]`) : null;
+    const rectOf = (el) => {
+        if (!el) {
+            return null;
+        }
+        const r = el.getBoundingClientRect();
+        return { top: r.top, left: r.left, width: r.width, height: r.height };
+    };
+    const measure = () => {
+        const selectedEl = elementFor(tracked.selectedId);
+        const next = {
+            type: 'rects',
+            selected: rectOf(selectedEl),
+            hovered: tracked.hoveredId && tracked.hoveredId !== tracked.selectedId
+                ? rectOf(elementFor(tracked.hoveredId))
+                : null,
+            selectedLabel: selectedEl ? selectedEl.tagName.toLowerCase() : null,
+        };
+        if (lastRects && sameRects(lastRects, next)) {
+            return;
+        }
+        lastRects = next;
+        send({ channel: CANVAS_CHANNEL, v: CANVAS_PROTOCOL_VERSION, ...next });
+    };
+    const scheduleMeasure = () => {
+        if (measureScheduled || !doc) {
+            return;
+        }
+        measureScheduled = true;
+        onNextFrame(() => {
+            measureScheduled = false;
+            measure();
+        });
+    };
+    const onScroll = () => scheduleMeasure();
+    if (doc) {
+        doc.addEventListener('scroll', onScroll, true);
+        const RO = globalThis
+            .ResizeObserver;
+        if (RO && doc.documentElement) {
+            resizeObserver = new RO(scheduleMeasure);
+            resizeObserver.observe(doc.documentElement);
+        }
+    }
+    const onPortMessage = (event) => {
         if (!isCanvasMessage(event.data)) {
             return;
         }
         const message = event.data;
         if (message.type === 'init' || message.type === 'patch') {
             applyState(message);
+            scheduleMeasure();
         }
         else if (message.type === 'ui') {
             for (const cb of uiListeners) {
                 cb(message.payload);
             }
+            scheduleMeasure();
+        }
+        else if (message.type === 'track') {
+            tracked = { selectedId: message.selectedId, hoveredId: message.hoveredId };
+            lastRects = null;
+            scheduleMeasure();
+        }
+    };
+    const stopRetrying = () => {
+        if (retryTimer !== null) {
+            clearTimeout(retryTimer);
+            retryTimer = null;
+        }
+    };
+    const announce = () => {
+        view?.parent?.postMessage({
+            channel: CANVAS_CHANNEL,
+            v: CANVAS_PROTOCOL_VERSION,
+            type: 'ready',
+            nonce,
+        }, '*');
+        retryDelay = Math.min(retryDelay * 2, READY_RETRY_MAX_MS);
+        retryTimer = setTimeout(announce, retryDelay);
+    };
+    const onWindowMessage = (event) => {
+        if (disposed || !isCanvasMessage(event.data)) {
+            return;
+        }
+        const message = event.data;
+        if (message.type !== 'connect' || message.nonce !== nonce) {
+            return;
         }
+        const incoming = event.ports?.[0];
+        if (!incoming) {
+            return;
+        }
+        port?.close();
+        port = incoming;
+        port.addEventListener('message', onPortMessage);
+        port.start();
+        stopRetrying();
+        send({
+            channel: CANVAS_CHANNEL,
+            v: CANVAS_PROTOCOL_VERSION,
+            type: 'hello',
+            nonce,
+        });
     };
-    channel.addEventListener('message', onMessage);
+    view?.addEventListener('message', onWindowMessage);
     return {
         nu,
         volatile,
         postReady() {
-            channel.postMessage({
-                channel: CANVAS_CHANNEL,
-                v: CANVAS_PROTOCOL_VERSION,
-                type: 'ready',
-                mountGen: Math.floor(Math.random() * 1e9),
-            });
+            if (disposed || port || retryTimer !== null) {
+                return;
+            }
+            retryDelay = READY_RETRY_MS;
+            announce();
         },
         onUi(cb) {
             uiListeners.add(cb);
             return () => uiListeners.delete(cb);
         },
         postEvent(message) {
-            channel.postMessage({
+            send({
                 channel: CANVAS_CHANNEL,
                 v: CANVAS_PROTOCOL_VERSION,
                 ...message,
             });
         },
         dispose() {
-            channel.removeEventListener('message', onMessage);
-            channel.close();
+            disposed = true;
+            stopRetrying();
+            doc?.removeEventListener('scroll', onScroll, true);
+            resizeObserver?.disconnect();
+            resizeObserver = null;
+            view?.removeEventListener('message', onWindowMessage);
+            port?.removeEventListener('message', onPortMessage);
+            port?.close();
+            port = null;
             uiListeners.clear();
         },
     };
@@ -730,4 +873,4 @@ function createEditor(nu, opts) {
     return new Editor(nu, opts);
 }
 
-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 { BlockRegistry, CANVAS_CHANNEL, CANVAS_PROTOCOL_VERSION, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, canvasNonce, createCanvasReceiver, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isCanvasMessage, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };

package/dist/react.cjs

@@ -7,10 +7,7 @@ var react = require('react');
 var reactDom = require('react-dom');
 
 const CANVAS_CHANNEL = 'nuforge-canvas';
-const CANVAS_PROTOCOL_VERSION = 1;
-function canvasChannelName(src) {
-    return `${CANVAS_CHANNEL}:${src}`;
-}
+const CANVAS_PROTOCOL_VERSION = 2;
 function isCanvasMessage(data) {
     return (!!data &&
         typeof data === 'object' &&
@@ -219,13 +216,14 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
         }, renderBox({ selected, hovered, selectedLabel, drop }))
         : null);
 }
+const NO_BOXES = {
+    selected: null,
+    hovered: null,
+    selectedLabel: 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 [boxes, setBoxes] = react.useState(NO_BOXES);
     const props = react.useRef({
         nu,
         activeComponent,
@@ -248,42 +246,14 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
     };
     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 port = null;
+        let pendingNonce = null;
+        let connectedNonce = null;
         let rafId = null;
         let rev = 0;
+        const post = (message) => port?.postMessage(message);
         const sendInit = () => {
-            channel.postMessage({
+            post({
                 channel: CANVAS_CHANNEL,
                 v: CANVAS_PROTOCOL_VERSION,
                 type: 'init',
@@ -292,12 +262,12 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
             });
         };
         const requestPatch = () => {
-            if (!ready || rafId !== null) {
+            if (connectedNonce === null || rafId !== null) {
                 return;
             }
             rafId = requestAnimationFrame(() => {
                 rafId = null;
-                channel.postMessage({
+                post({
                     channel: CANVAS_CHANNEL,
                     v: CANVAS_PROTOCOL_VERSION,
                     type: 'patch',
@@ -308,37 +278,51 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
             });
         };
         const postUi = (payload) => {
-            channel.postMessage({
+            post({
                 channel: CANVAS_CHANNEL,
                 v: CANVAS_PROTOCOL_VERSION,
                 type: 'ui',
                 payload,
             });
         };
-        connectionRef.current = { sendInit, requestPatch, postUi };
-        const onMessage = (event) => {
+        const postTrack = (selectedId, hoveredId) => {
+            post({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'track',
+                selectedId,
+                hoveredId,
+            });
+        };
+        connectionRef.current = { sendInit, requestPatch, postUi, postTrack };
+        const onPortMessage = (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) {
+                case 'hello':
+                    if (message.nonce !== pendingNonce) {
                         return;
                     }
-                    mountGen = message.mountGen;
-                    ready = true;
+                    connectedNonce = message.nonce;
                     sendInit();
+                    postTrack(trackRef.current.selectedId, trackRef.current.hoveredId);
                     postUi(props.current.uiPayload);
                     break;
+                case 'rects':
+                    setBoxes({
+                        selected: message.selected,
+                        hovered: message.hovered,
+                        selectedLabel: message.selectedLabel,
+                    });
+                    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);
@@ -351,14 +335,39 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
                     break;
             }
         };
-        channel.addEventListener('message', onMessage);
-        const unlistenChangeset = nu.listenToChangeset(() => {
-            requestPatch();
-            setTick((x) => x + 1);
-        });
+        const onWindowMessage = (event) => {
+            const frame = iframeRef.current;
+            if (!frame || event.source !== frame.contentWindow) {
+                return;
+            }
+            if (!isCanvasMessage(event.data) || event.data.type !== 'ready') {
+                return;
+            }
+            const { nonce } = event.data;
+            if (connectedNonce === nonce) {
+                return;
+            }
+            port?.close();
+            const channel = new MessageChannel();
+            port = channel.port1;
+            pendingNonce = nonce;
+            connectedNonce = null;
+            port.addEventListener('message', onPortMessage);
+            port.start();
+            event.source.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'connect',
+                nonce,
+            }, '*', [channel.port2]);
+        };
+        window.addEventListener('message', onWindowMessage);
+        const unlistenChangeset = nu.listenToChangeset(requestPatch);
         return () => {
-            channel.removeEventListener('message', onMessage);
-            channel.close();
+            window.removeEventListener('message', onWindowMessage);
+            port?.removeEventListener('message', onPortMessage);
+            port?.close();
+            port = null;
             unlistenChangeset();
             if (rafId !== null) {
                 cancelAnimationFrame(rafId);
@@ -378,26 +387,20 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
     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(() => {
+    const trackRef = react.useRef({
+        selectedId: null,
+        hoveredId: null,
+    });
+    react.useEffect(() => {
+        const next = previewMode
+            ? { selectedId: null, hoveredId: null }
+            : { selectedId, hoveredId };
+        trackRef.current = next;
         if (previewMode) {
-            setSelected(null);
-            setHovered(null);
-            setSelectedLabel(null);
-            return;
+            setBoxes(NO_BOXES);
         }
-        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]);
+        connectionRef.current?.postTrack(next.selectedId, next.hoveredId);
+    }, [previewMode, selectedId, hoveredId, revision]);
     return react.createElement('div', { className: containerClassName, style: { position: 'relative' } }, react.createElement('iframe', {
         ref: iframeRef,
         title: 'nuforge canvas',
@@ -411,7 +414,7 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
                 pointerEvents: 'none',
                 overflow: 'hidden',
             },
-        }, renderBox({ selected, hovered, selectedLabel }))
+        }, renderBox(boxes))
         : null);
 }
 function useStructureRevision(editor) {

package/dist/react.d.ts

@@ -30,7 +30,13 @@ declare class BlockRegistry {
 type DropPosition = 'before' | 'after' | 'inside';
 
 declare const CANVAS_CHANNEL = "nuforge-canvas";
-declare const CANVAS_PROTOCOL_VERSION = 1;
+declare const CANVAS_PROTOCOL_VERSION = 2;
+interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
 interface CanvasKeydownMessage {
     channel: typeof CANVAS_CHANNEL;
     v: typeof CANVAS_PROTOCOL_VERSION;
@@ -120,12 +126,6 @@ declare class Editor {
     private insertRelativeTo;
 }
 
-interface Rect {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-}
 interface CanvasWindow {
     doc: Document | null;
     window: Window | null;

package/dist/react.mjs

@@ -5,10 +5,7 @@ import { createContext, memo, createElement, Fragment, useRef, useState, useEffe
 import { createPortal } from 'react-dom';
 
 const CANVAS_CHANNEL = 'nuforge-canvas';
-const CANVAS_PROTOCOL_VERSION = 1;
-function canvasChannelName(src) {
-    return `${CANVAS_CHANNEL}:${src}`;
-}
+const CANVAS_PROTOCOL_VERSION = 2;
 function isCanvasMessage(data) {
     return (!!data &&
         typeof data === 'object' &&
@@ -217,13 +214,14 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
         }, renderBox({ selected, hovered, selectedLabel, drop }))
         : null);
 }
+const NO_BOXES = {
+    selected: null,
+    hovered: null,
+    selectedLabel: 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 [boxes, setBoxes] = useState(NO_BOXES);
     const props = useRef({
         nu,
         activeComponent,
@@ -246,42 +244,14 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
     };
     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 port = null;
+        let pendingNonce = null;
+        let connectedNonce = null;
         let rafId = null;
         let rev = 0;
+        const post = (message) => port?.postMessage(message);
         const sendInit = () => {
-            channel.postMessage({
+            post({
                 channel: CANVAS_CHANNEL,
                 v: CANVAS_PROTOCOL_VERSION,
                 type: 'init',
@@ -290,12 +260,12 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
             });
         };
         const requestPatch = () => {
-            if (!ready || rafId !== null) {
+            if (connectedNonce === null || rafId !== null) {
                 return;
             }
             rafId = requestAnimationFrame(() => {
                 rafId = null;
-                channel.postMessage({
+                post({
                     channel: CANVAS_CHANNEL,
                     v: CANVAS_PROTOCOL_VERSION,
                     type: 'patch',
@@ -306,37 +276,51 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
             });
         };
         const postUi = (payload) => {
-            channel.postMessage({
+            post({
                 channel: CANVAS_CHANNEL,
                 v: CANVAS_PROTOCOL_VERSION,
                 type: 'ui',
                 payload,
             });
         };
-        connectionRef.current = { sendInit, requestPatch, postUi };
-        const onMessage = (event) => {
+        const postTrack = (selectedId, hoveredId) => {
+            post({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'track',
+                selectedId,
+                hoveredId,
+            });
+        };
+        connectionRef.current = { sendInit, requestPatch, postUi, postTrack };
+        const onPortMessage = (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) {
+                case 'hello':
+                    if (message.nonce !== pendingNonce) {
                         return;
                     }
-                    mountGen = message.mountGen;
-                    ready = true;
+                    connectedNonce = message.nonce;
                     sendInit();
+                    postTrack(trackRef.current.selectedId, trackRef.current.hoveredId);
                     postUi(props.current.uiPayload);
                     break;
+                case 'rects':
+                    setBoxes({
+                        selected: message.selected,
+                        hovered: message.hovered,
+                        selectedLabel: message.selectedLabel,
+                    });
+                    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);
@@ -349,14 +333,39 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
                     break;
             }
         };
-        channel.addEventListener('message', onMessage);
-        const unlistenChangeset = nu.listenToChangeset(() => {
-            requestPatch();
-            setTick((x) => x + 1);
-        });
+        const onWindowMessage = (event) => {
+            const frame = iframeRef.current;
+            if (!frame || event.source !== frame.contentWindow) {
+                return;
+            }
+            if (!isCanvasMessage(event.data) || event.data.type !== 'ready') {
+                return;
+            }
+            const { nonce } = event.data;
+            if (connectedNonce === nonce) {
+                return;
+            }
+            port?.close();
+            const channel = new MessageChannel();
+            port = channel.port1;
+            pendingNonce = nonce;
+            connectedNonce = null;
+            port.addEventListener('message', onPortMessage);
+            port.start();
+            event.source.postMessage({
+                channel: CANVAS_CHANNEL,
+                v: CANVAS_PROTOCOL_VERSION,
+                type: 'connect',
+                nonce,
+            }, '*', [channel.port2]);
+        };
+        window.addEventListener('message', onWindowMessage);
+        const unlistenChangeset = nu.listenToChangeset(requestPatch);
         return () => {
-            channel.removeEventListener('message', onMessage);
-            channel.close();
+            window.removeEventListener('message', onWindowMessage);
+            port?.removeEventListener('message', onPortMessage);
+            port?.close();
+            port = null;
             unlistenChangeset();
             if (rafId !== null) {
                 cancelAnimationFrame(rafId);
@@ -376,26 +385,20 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
     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(() => {
+    const trackRef = useRef({
+        selectedId: null,
+        hoveredId: null,
+    });
+    useEffect(() => {
+        const next = previewMode
+            ? { selectedId: null, hoveredId: null }
+            : { selectedId, hoveredId };
+        trackRef.current = next;
         if (previewMode) {
-            setSelected(null);
-            setHovered(null);
-            setSelectedLabel(null);
-            return;
+            setBoxes(NO_BOXES);
         }
-        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]);
+        connectionRef.current?.postTrack(next.selectedId, next.hoveredId);
+    }, [previewMode, selectedId, hoveredId, revision]);
     return createElement('div', { className: containerClassName, style: { position: 'relative' } }, createElement('iframe', {
         ref: iframeRef,
         title: 'nuforge canvas',
@@ -409,7 +412,7 @@ function RemoteCanvasHost({ nu, activeComponent, src, selectedId = null, hovered
                 pointerEvents: 'none',
                 overflow: 'hidden',
             },
-        }, renderBox({ selected, hovered, selectedLabel }))
+        }, renderBox(boxes))
         : null);
 }
 function useStructureRevision(editor) {

package/package.json

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