nudge-ui 0.2.0

package/dist/inspector/canvas/projection.js

@@ -0,0 +1,232 @@
+import { getWorkspaceChanges } from "../changes/workspaceChanges.js";
+import { getCanvasMode } from "./canvasStore.js";
+import { PROTOCOL_VERSION } from "./frameProtocol.js";
+import { clearCanvasRenderedInstanceProjectionReports, } from "../projection/renderedInstance.js";
+import { clearCanvasTextProjectionReports, } from "../projection/textProjection.js";
+import { clearCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
+import { invalidatePreviewDocumentSession, startPreviewDocumentSession, } from "../changes/previewDiagnostics.js";
+import { applyHostWorkspaceProjection, compileWorkspaceProjection, } from "../projection/workspaceProjection.js";
+import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+export const PROJECT_ID = window.location.origin;
+export const WORKSPACE_ID = crypto.randomUUID?.() ?? `ws-${Date.now()}`;
+let revision = 0;
+let lastRulesKey = null;
+const frameProjectionStates = new Map();
+const previewDocuments = new Map();
+const projectionAcknowledgementListeners = new Set();
+let projectionAcknowledgementVersion = 0;
+let nextPreviewSessionId = 1;
+function createPreviewDocumentIdentity(cardId) {
+    const previewDocument = {
+        logicalDocument: `canvas:${cardId}`,
+        sessionId: `canvas-session-${nextPreviewSessionId++}`,
+    };
+    previewDocuments.set(cardId, previewDocument);
+    return previewDocument;
+}
+/** Returns the current value-based identity for one Canvas card document. */
+export function getCanvasPreviewDocument(cardId) {
+    // Pure getter: no session activation or notify. Creation (identity only) is
+    // idempotent here; registerCardFrame owns session activation.
+    return previewDocuments.get(cardId) ?? createPreviewDocumentIdentity(cardId);
+}
+/** Invalidates a card's current document before its iframe is replaced. */
+export function invalidateCanvasPreviewDocument(cardId) {
+    const state = frameProjectionStates.get(cardId);
+    if (state?.document)
+        disposeBrowserCssInspection(state.document);
+    const previewDocument = previewDocuments.get(cardId);
+    if (!previewDocument)
+        return;
+    invalidatePreviewDocumentSession(previewDocument.logicalDocument, previewDocument.sessionId);
+    previewDocuments.delete(cardId);
+}
+function projectionKey(plan) {
+    // Revision ordering protects every controller-owned projection dimension.
+    // In particular, a delete-only snapshot has empty CSS but must still advance
+    // past the snapshot already accepted by ready Canvas renderers.
+    return `${plan.managedStyles.css}\u0000${JSON.stringify(plan.instanceOverrides)}\u0000${JSON.stringify(plan.structuralChanges)}\u0000${JSON.stringify(plan.textContentChanges)}\u0000${JSON.stringify(plan.componentOverrides)}`;
+}
+export function computeProjection() {
+    const plan = compileWorkspaceProjection(getWorkspaceChanges());
+    applyHostWorkspaceProjection(plan);
+    const key = projectionKey(plan);
+    if (key !== lastRulesKey) {
+        lastRulesKey = key;
+        revision += 1;
+    }
+    return { ...plan, css: plan.managedStyles.css, revision };
+}
+export function resetProjectionRevision() {
+    revision = 0;
+    lastRulesKey = null;
+    for (const state of frameProjectionStates.values()) {
+        state.sentRevision = -1;
+        state.appliedRevision = -1;
+    }
+    projectionAcknowledgementVersion += 1;
+    notifyProjectionAcknowledgementListeners();
+}
+export function sendProjectionToCard(card, iframe) {
+    const win = iframe.contentWindow;
+    if (!win)
+        return;
+    const { css, revision: rev, instanceOverrides, structuralChanges, textContentChanges, componentOverrides } = computeProjection();
+    const msg = {
+        type: "replace-styles",
+        protocolVersion: PROTOCOL_VERSION,
+        projectId: PROJECT_ID,
+        workspaceId: WORKSPACE_ID,
+        cardId: card.id,
+        css,
+        revision: rev,
+        instanceOverrides: [...instanceOverrides],
+        structuralChanges: [...structuralChanges],
+        textContentChanges: [...textContentChanges],
+        componentOverrides: [...componentOverrides],
+    };
+    markProjectionSent(card.id, iframe, rev);
+    win.postMessage(msg, window.location.origin);
+}
+const frameRegistry = new Map();
+const frameSourceRegistry = new Map();
+export function registerCardFrameSource(cardId, iframe) {
+    frameSourceRegistry.set(cardId, iframe);
+}
+export function registerCardFrame(cardId, iframe) {
+    const frameDocument = getFrameDocument(iframe);
+    const existing = frameProjectionStates.get(cardId);
+    if (!existing || existing.iframe !== iframe || existing.document !== frameDocument) {
+        if (existing) {
+            invalidatePreviewDocumentSession(existing.previewDocument.logicalDocument, existing.previewDocument.sessionId);
+            previewDocuments.delete(cardId);
+        }
+        const previewDocument = previewDocuments.get(cardId) ?? createPreviewDocumentIdentity(cardId);
+        startPreviewDocumentSession(previewDocument);
+        frameProjectionStates.set(cardId, {
+            iframe,
+            document: frameDocument,
+            previewDocument,
+            sentRevision: -1,
+            appliedRevision: -1,
+        });
+    }
+    else {
+        startPreviewDocumentSession(existing.previewDocument);
+    }
+    frameSourceRegistry.set(cardId, iframe);
+    frameRegistry.set(cardId, iframe);
+    notifyFrameRegistryListeners();
+}
+export function unregisterCardFrame(cardId) {
+    frameSourceRegistry.delete(cardId);
+    frameRegistry.delete(cardId);
+    invalidateCanvasPreviewDocument(cardId);
+    frameProjectionStates.delete(cardId);
+    clearCanvasStructuralProjectionReports(cardId);
+    clearCanvasRenderedInstanceProjectionReports(cardId);
+    clearCanvasTextProjectionReports(cardId);
+    notifyFrameRegistryListeners();
+}
+export function getRegisteredFrames() {
+    return frameRegistry;
+}
+export function findCanvasFrameBySource(source) {
+    for (const [cardId, iframe] of frameSourceRegistry) {
+        if (iframe.contentWindow === source)
+            return { cardId, iframe };
+    }
+    return null;
+}
+const frameRegistryListeners = new Set();
+export function subscribeFrameRegistry(listener) {
+    frameRegistryListeners.add(listener);
+    return () => {
+        frameRegistryListeners.delete(listener);
+    };
+}
+function getFrameDocument(iframe) {
+    try {
+        return iframe.contentDocument;
+    }
+    catch {
+        return null;
+    }
+}
+function markProjectionSent(cardId, iframe, sentRevision) {
+    const state = frameProjectionStates.get(cardId);
+    if (!state || state.iframe !== iframe)
+        return;
+    state.sentRevision = Math.max(state.sentRevision, sentRevision);
+}
+/** Records the highest complete projection revision accepted by one frame. */
+export function recordCanvasProjectionApplied(cardId, appliedRevision) {
+    const state = frameProjectionStates.get(cardId);
+    if (!state || appliedRevision > state.sentRevision || appliedRevision <= state.appliedRevision)
+        return;
+    state.appliedRevision = appliedRevision;
+    projectionAcknowledgementVersion += 1;
+    notifyProjectionAcknowledgementListeners();
+}
+/** Returns projection progress for the document containing a selected element. */
+export function getCanvasProjectionStatus(doc) {
+    for (const state of frameProjectionStates.values()) {
+        if (state.document !== doc)
+            continue;
+        return {
+            sentRevision: state.sentRevision,
+            appliedRevision: state.appliedRevision,
+        };
+    }
+    return null;
+}
+export function subscribeCanvasProjectionAcknowledgements(listener) {
+    projectionAcknowledgementListeners.add(listener);
+    return () => {
+        projectionAcknowledgementListeners.delete(listener);
+    };
+}
+export function getCanvasProjectionAcknowledgementVersion() {
+    return projectionAcknowledgementVersion;
+}
+function notifyProjectionAcknowledgementListeners() {
+    for (const listener of projectionAcknowledgementListeners) {
+        try {
+            listener();
+        }
+        catch { /* ignore */ }
+    }
+}
+function notifyFrameRegistryListeners() {
+    for (const listener of frameRegistryListeners) {
+        try {
+            listener();
+        }
+        catch { /* ignore */ }
+    }
+}
+export function projectToAllReadyCards() {
+    if (getCanvasMode() !== "canvas")
+        return;
+    const { css, revision: rev, instanceOverrides, structuralChanges, textContentChanges, componentOverrides } = computeProjection();
+    for (const [cardId, iframe] of frameRegistry) {
+        const win = iframe.contentWindow;
+        if (!win)
+            continue;
+        const msg = {
+            type: "replace-styles",
+            protocolVersion: PROTOCOL_VERSION,
+            projectId: PROJECT_ID,
+            workspaceId: WORKSPACE_ID,
+            cardId,
+            css,
+            revision: rev,
+            instanceOverrides: [...instanceOverrides],
+            structuralChanges: [...structuralChanges],
+            textContentChanges: [...textContentChanges],
+            componentOverrides: [...componentOverrides],
+        };
+        markProjectionSent(cardId, iframe, rev);
+        win.postMessage(msg, window.location.origin);
+    }
+}

package/dist/inspector/canvas/rendererBootstrap.d.ts

@@ -0,0 +1,4 @@
+export interface RendererBootstrapHandle {
+    teardown(): void;
+}
+export declare function bootstrapRenderer(): RendererBootstrapHandle | undefined;

package/dist/inspector/canvas/rendererBootstrap.js

@@ -0,0 +1,410 @@
+import { PROTOCOL_VERSION, clearRendererIdentity, getRendererIdentity, isRendererMessageFor, sendToParent, setRendererIdentity, } from "./frameProtocol.js";
+import { handleReplaceStyles, startRendererProjectionDiagnostics } from "./rendererStylesheet.js";
+import { findClosestAnchor, isEligibleNavigation, hasDifferentRoute } from "./linkEligibility.js";
+import { installRendererElementSelector } from "./rendererElementSelector.js";
+import { createFrameThrottle } from "../overlay/frameThrottle.js";
+import { isNudgeUiDev } from "../runtime/devFlag.js";
+import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+let activeRendererBootstrap = null;
+function ownsRendererBootstrap(owner) {
+    return owner.active && activeRendererBootstrap?.owner === owner;
+}
+function sendFrameReady(owner) {
+    if (!ownsRendererBootstrap(owner))
+        return;
+    const identity = getRendererIdentity();
+    if (!identity)
+        return;
+    const msg = {
+        type: "frame-ready",
+        protocolVersion: PROTOCOL_VERSION,
+        url: window.location.href,
+        title: document.title,
+        ...identity,
+    };
+    sendToParent(msg);
+}
+function sendFrameMetadata(owner) {
+    if (!ownsRendererBootstrap(owner))
+        return;
+    const identity = getRendererIdentity();
+    if (!identity)
+        return;
+    const msg = {
+        type: "frame-metadata",
+        protocolVersion: PROTOCOL_VERSION,
+        url: window.location.href,
+        title: document.title,
+        ...identity,
+    };
+    sendToParent(msg);
+}
+function observeFrameMetadata(owner) {
+    const onPopState = () => sendFrameMetadata(owner);
+    window.addEventListener("popstate", onPopState);
+    owner.listenerRemovers.push(() => window.removeEventListener("popstate", onPopState));
+    const onHashChange = () => sendFrameMetadata(owner);
+    window.addEventListener("hashchange", onHashChange);
+    owner.listenerRemovers.push(() => window.removeEventListener("hashchange", onHashChange));
+    for (const method of ["pushState", "replaceState"]) {
+        const descriptor = Object.getOwnPropertyDescriptor(history, method);
+        const original = history[method];
+        const patched = function (...args) {
+            const result = original.apply(this, args);
+            if (ownsRendererBootstrap(owner)) {
+                queueMicrotask(() => sendFrameMetadata(owner));
+            }
+            return result;
+        };
+        history[method] = patched;
+        owner.historyPatchRestorers.push(() => {
+            if (history[method] === patched) {
+                if (descriptor) {
+                    Object.defineProperty(history, method, descriptor);
+                }
+                else {
+                    delete history[method];
+                }
+            }
+        });
+    }
+    const titleEl = document.querySelector("title");
+    if (titleEl) {
+        const observer = new MutationObserver(() => sendFrameMetadata(owner));
+        observer.observe(titleEl, { subtree: true, characterData: true, childList: true });
+        owner.observers.push(observer);
+    }
+}
+function scheduleRendererTimer(owner, callback, delay) {
+    const timer = window.setTimeout(() => {
+        owner.timers.delete(timer);
+        if (!ownsRendererBootstrap(owner))
+            return;
+        callback();
+    }, delay);
+    owner.timers.add(timer);
+}
+function teardownRenderer(owner) {
+    if (!owner.active)
+        return;
+    // Invalidate callbacks before releasing any resource. A queued microtask or
+    // frame can still run after its source has been cancelled.
+    owner.active = false;
+    if (activeRendererBootstrap?.owner === owner) {
+        activeRendererBootstrap = null;
+    }
+    for (const timer of owner.timers)
+        window.clearTimeout(timer);
+    owner.timers.clear();
+    for (const throttle of owner.frameThrottles)
+        throttle.cancel();
+    owner.frameThrottles.length = 0;
+    for (const observer of owner.observers)
+        observer.disconnect();
+    owner.observers.length = 0;
+    for (const removeListener of owner.listenerRemovers.splice(0))
+        removeListener();
+    for (const disposeResource of owner.resourceDisposers.splice(0))
+        disposeResource();
+    for (const restoreHistoryPatch of owner.historyPatchRestorers.splice(0))
+        restoreHistoryPatch();
+    clearRendererIdentity();
+}
+export function bootstrapRenderer() {
+    if (!getNudgeUiRuntimeConfig().capabilities.canvas)
+        return;
+    if (!isNudgeUiDev())
+        return;
+    if (activeRendererBootstrap)
+        return activeRendererBootstrap.handle;
+    const owner = {
+        active: true,
+        listenerRemovers: [],
+        resourceDisposers: [],
+        observers: [],
+        timers: new Set(),
+        frameThrottles: [],
+        historyPatchRestorers: [],
+    };
+    const handle = {
+        teardown: () => teardownRenderer(owner),
+    };
+    activeRendererBootstrap = { owner, handle };
+    try {
+        observeFrameMetadata(owner);
+        const disposeDiagnostics = startRendererProjectionDiagnostics();
+        if (disposeDiagnostics)
+            owner.resourceDisposers.push(disposeDiagnostics);
+        const disposeSelector = installRendererElementSelector();
+        if (disposeSelector)
+            owner.resourceDisposers.push(disposeSelector);
+        installRendererPanProxy(owner);
+        const onClick = (event) => {
+            if (!ownsRendererBootstrap(owner))
+                return;
+            const anchor = findClosestAnchor(event.target);
+            if (!anchor)
+                return;
+            if (!isEligibleNavigation(anchor, event)) {
+                if (isPrimarySelfNavigation(anchor, event)) {
+                    event.preventDefault();
+                    const identity = getRendererIdentity();
+                    if (!identity)
+                        return;
+                    const msg = {
+                        type: "external-navigation",
+                        protocolVersion: PROTOCOL_VERSION,
+                        url: anchor.href,
+                        ...identity,
+                    };
+                    sendToParent(msg);
+                }
+                return;
+            }
+            if (!hasDifferentRoute(anchor))
+                return;
+            event.preventDefault();
+            const identity = getRendererIdentity();
+            if (!identity)
+                return;
+            const msg = {
+                type: "navigation-intent",
+                protocolVersion: PROTOCOL_VERSION,
+                url: anchor.href,
+                ...identity,
+            };
+            sendToParent(msg);
+        };
+        document.addEventListener("click", onClick, true);
+        owner.listenerRemovers.push(() => document.removeEventListener("click", onClick, true));
+        const onMessage = (event) => {
+            if (!ownsRendererBootstrap(owner))
+                return;
+            if (event.origin !== window.location.origin)
+                return;
+            if (event.source !== window.parent)
+                return;
+            const msg = event.data;
+            if (msg && typeof msg === "object" && msg.type === "parent-ready") {
+                if (typeof msg.protocolVersion !== "number" || msg.protocolVersion !== PROTOCOL_VERSION)
+                    return;
+                const pr = msg;
+                setRendererIdentity({
+                    projectId: pr.projectId,
+                    workspaceId: pr.workspaceId,
+                    cardId: pr.cardId,
+                });
+                sendFrameReady(owner);
+                return;
+            }
+            if (msg &&
+                typeof msg === "object" &&
+                msg.type === "replace-styles" &&
+                getRendererIdentity()) {
+                const identity = getRendererIdentity();
+                handleReplaceStyles(msg, identity.projectId, identity.workspaceId, identity.cardId);
+            }
+        };
+        window.addEventListener("message", onMessage);
+        owner.listenerRemovers.push(() => window.removeEventListener("message", onMessage));
+        // Solicit the handshake, then retry briefly. The controller answers on
+        // iframe load AND on every hello it receives, but its answering listener
+        // attaches when the card component commits — normally long before any
+        // renderer finishes booting. The retries cover the residual window where
+        // a renderer's listeners go live before the controller's do (fast boot,
+        // slow controller compile). Every path is idempotent: setRendererIdentity
+        // overwrites, re-registration replaces, projection re-sends are safe.
+        let helloAttempts = 0;
+        const solicitHandshake = () => {
+            if (!ownsRendererBootstrap(owner) || getRendererIdentity() || helloAttempts >= 5)
+                return;
+            helloAttempts += 1;
+            const hello = {
+                type: "renderer-hello",
+                protocolVersion: PROTOCOL_VERSION,
+            };
+            sendToParent(hello);
+            scheduleRendererTimer(owner, solicitHandshake, 400 * helloAttempts);
+        };
+        solicitHandshake();
+    }
+    catch (error) {
+        teardownRenderer(owner);
+        throw error;
+    }
+    return handle;
+}
+function isPrimarySelfNavigation(anchor, event) {
+    if (event.ctrlKey || event.metaKey || event.shiftKey || event.button !== 0)
+        return false;
+    if (anchor.hasAttribute("download"))
+        return false;
+    if (anchor.target && anchor.target !== "" && anchor.target !== "_self")
+        return false;
+    return anchor.protocol === "http:" || anchor.protocol === "https:";
+}
+function installRendererPanProxy(owner) {
+    let spaceHeld = false;
+    let panning = false;
+    const panMoveUpdate = createFrameThrottle((point) => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        const message = {
+            type: "pan-move",
+            protocolVersion: PROTOCOL_VERSION,
+            point,
+            ...identity,
+        };
+        sendToParent(message);
+    });
+    owner.frameThrottles.push(panMoveUpdate);
+    function isEditableTarget(target) {
+        return target instanceof HTMLElement
+            && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable);
+    }
+    function sendSpaceState() {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        const message = {
+            type: "pan-modifier",
+            protocolVersion: PROTOCOL_VERSION,
+            spaceHeld,
+            ...identity,
+        };
+        sendToParent(message);
+    }
+    const onMessage = (event) => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        if (event.origin !== window.location.origin || event.source !== window.parent)
+            return;
+        const identity = getRendererIdentity();
+        if (!identity || !isRendererMessageFor(event.data, identity))
+            return;
+        if (event.data.type === "pan-modifier") {
+            spaceHeld = event.data.spaceHeld;
+        }
+    };
+    window.addEventListener("message", onMessage);
+    owner.listenerRemovers.push(() => window.removeEventListener("message", onMessage));
+    const onKeyDown = (event) => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        if (event.code === "Space" && !event.repeat && !isEditableTarget(event.target)) {
+            spaceHeld = true;
+            if (getRendererIdentity())
+                event.preventDefault();
+            sendSpaceState();
+        }
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    owner.listenerRemovers.push(() => window.removeEventListener("keydown", onKeyDown, true));
+    const onKeyUp = (event) => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        if (event.code === "Space") {
+            spaceHeld = false;
+            sendSpaceState();
+        }
+    };
+    window.addEventListener("keyup", onKeyUp, true);
+    owner.listenerRemovers.push(() => window.removeEventListener("keyup", onKeyUp, true));
+    function endPan() {
+        if (!ownsRendererBootstrap(owner)) {
+            panMoveUpdate.cancel();
+            panning = false;
+            return;
+        }
+        if (!panning) {
+            panMoveUpdate.cancel();
+            return;
+        }
+        // Pointer-up can arrive before the next animation frame. Deliver the
+        // latest point before pan-end so the final drag position is not lost.
+        panMoveUpdate.flush();
+        panning = false;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        const message = {
+            type: "pan-end",
+            protocolVersion: PROTOCOL_VERSION,
+            ...identity,
+        };
+        sendToParent(message);
+    }
+    const onPointerDown = (event) => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        if (!spaceHeld || event.button !== 0 || isEditableTarget(event.target))
+            return;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        panning = true;
+        event.preventDefault();
+        const target = event.target;
+        if (target instanceof HTMLElement)
+            target.setPointerCapture?.(event.pointerId);
+        const message = {
+            type: "pan-start",
+            protocolVersion: PROTOCOL_VERSION,
+            point: { x: event.clientX, y: event.clientY },
+            ...identity,
+        };
+        sendToParent(message);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    owner.listenerRemovers.push(() => document.removeEventListener("pointerdown", onPointerDown, true));
+    const onPointerMove = (event) => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        if (!panning)
+            return;
+        event.preventDefault();
+        panMoveUpdate.schedule({ x: event.clientX, y: event.clientY });
+    };
+    document.addEventListener("pointermove", onPointerMove, true);
+    owner.listenerRemovers.push(() => document.removeEventListener("pointermove", onPointerMove, true));
+    document.addEventListener("pointerup", endPan, true);
+    owner.listenerRemovers.push(() => document.removeEventListener("pointerup", endPan, true));
+    document.addEventListener("pointercancel", endPan, true);
+    owner.listenerRemovers.push(() => document.removeEventListener("pointercancel", endPan, true));
+    const onBlur = () => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        spaceHeld = false;
+        sendSpaceState();
+        endPan();
+    };
+    window.addEventListener("blur", onBlur);
+    owner.listenerRemovers.push(() => window.removeEventListener("blur", onBlur));
+    const onWheel = (event) => {
+        if (!ownsRendererBootstrap(owner))
+            return;
+        if (!event.ctrlKey && !event.metaKey)
+            return;
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const message = {
+            type: "zoom",
+            protocolVersion: PROTOCOL_VERSION,
+            deltaY: event.deltaY,
+            point: { x: event.clientX, y: event.clientY },
+            ...identity,
+        };
+        sendToParent(message);
+    };
+    const wheelOptions = { capture: true, passive: false };
+    window.addEventListener("wheel", onWheel, wheelOptions);
+    owner.listenerRemovers.push(() => window.removeEventListener("wheel", onWheel, wheelOptions));
+}

package/dist/inspector/canvas/rendererCidIndex.d.ts

@@ -0,0 +1,11 @@
+/** Renderer-owned identity that survives DOM reorders for the lifetime of a node. */
+export declare const RENDERER_ELEMENT_ID_ATTR = "data-renderer-id";
+export interface CidIndex {
+    elementId(el: HTMLElement): string;
+}
+/**
+ * Retains the historical factory name while replacing positional indexes with
+ * node identities. IDs are attached to the actual DOM node, so reorders and
+ * sibling insertions cannot redirect a delayed controller message.
+ */
+export declare function createCidIndex(_doc: Document): CidIndex;

package/dist/inspector/canvas/rendererCidIndex.js

@@ -0,0 +1,21 @@
+/** Renderer-owned identity that survives DOM reorders for the lifetime of a node. */
+export const RENDERER_ELEMENT_ID_ATTR = "data-renderer-id";
+/**
+ * Retains the historical factory name while replacing positional indexes with
+ * node identities. IDs are attached to the actual DOM node, so reorders and
+ * sibling insertions cannot redirect a delayed controller message.
+ */
+export function createCidIndex(_doc) {
+    let nextId = 1;
+    const ids = new WeakMap();
+    function elementId(el) {
+        const existing = ids.get(el);
+        if (existing)
+            return existing;
+        const id = `r${nextId++}`;
+        ids.set(el, id);
+        el.setAttribute(RENDERER_ELEMENT_ID_ATTR, id);
+        return id;
+    }
+    return { elementId };
+}

package/dist/inspector/canvas/rendererElementSelector.d.ts

@@ -0,0 +1,2 @@
+export declare function buildSelector(el: HTMLElement): string;
+export declare function installRendererElementSelector(): () => void;