nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/canvas/layout.js

@@ -12,7 +12,6 @@ export function boundsOf(cards) {
     }
     return { minX, minY, maxX, maxY };
 }
-/** Places a new frame to the right of every frame, on the first frame's row. */
 export function nextCardPosition(cards, gap) {
     if (cards.length === 0)
         return { x: 0, y: 0 };
@@ -55,7 +54,6 @@ export function iterationPosition(cards, source, gap) {
     }
     return { x, y };
 }
-/** Zooms and centers content inside the padded viewport; null for empty content. */
 export function fitCamera(bounds, viewport, padding) {
     const width = bounds.maxX - bounds.minX;
     const height = bounds.maxY - bounds.minY;
@@ -92,7 +90,6 @@ export function applyLayoutShifts(cards, shifts, forward) {
         return { ...card, x: card.x + to.x - from.x, y: card.y + to.y - from.y };
     });
 }
-/** Reinserts recorded frames after their nearest recorded predecessor that still exists. */
 export function reinsertInRecordedOrder(cards, recorded, ids) {
     let next = [...cards];
     for (const [index, added] of recorded.entries()) {

package/dist/inspector/canvas/normalizeUrl.js

@@ -14,14 +14,7 @@ export function normalizeUrl(url) {
 export function normalizedUrlKey(normalized) {
     return `${normalized.origin}${canonicalRoutePath(normalized.pathname)}${normalized.search}`;
 }
-/**
- * Directory-index pages resolve to the directory URL: `/` and `/index.html`
- * are one route served from one file on every supported dev server, so card
- * deduplication must treat them as the same key or link discovery spawns a
- * duplicate card for the page already on the board.
- */
+/** Dev servers serve `/` and `/index.html` from one file, so dedup must treat them as the same key. */
 function canonicalRoutePath(pathname) {
-    // "/docs/index.html" becomes the directory form "/docs/"; a bare
-    // "/index.html" becomes "/".
     return pathname.replace(/\/index\.html?$/i, "/");
 }

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

@@ -0,0 +1,6 @@
+import type { CanvasFrame } from "./canvasFrame.js";
+/** Runs renderer and controller in the inspected window so no iframe or framing permission is needed. */
+export declare function enablePageSurface(): void;
+export declare function isPageSurface(): boolean;
+export declare function getPageFrame(win?: Window): CanvasFrame;
+export declare function isInspectorUiEvent(event: Event): boolean;

package/dist/inspector/canvas/pageSurface.js

@@ -0,0 +1,29 @@
+import { NUDGE_UI_MOUNT_ID } from "../../transport/routes.js";
+let pageSurface = false;
+/** Runs renderer and controller in the inspected window so no iframe or framing permission is needed. */
+export function enablePageSurface() {
+    pageSurface = true;
+}
+export function isPageSurface() {
+    return pageSurface;
+}
+const pageFrames = new WeakMap();
+export function getPageFrame(win = window) {
+    const existing = pageFrames.get(win);
+    if (existing)
+        return existing;
+    const root = win.document.documentElement;
+    const frame = {
+        contentWindow: win,
+        contentDocument: win.document,
+        isConnected: true,
+        get clientWidth() { return root.clientWidth; },
+        get clientHeight() { return root.clientHeight; },
+        getBoundingClientRect: () => new DOMRect(0, 0, root.clientWidth, root.clientHeight),
+    };
+    pageFrames.set(win, frame);
+    return frame;
+}
+export function isInspectorUiEvent(event) {
+    return pageSurface && event.composedPath().some((node) => node instanceof Element && node.id === NUDGE_UI_MOUNT_ID);
+}

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

@@ -1,9 +1,8 @@
-import { type DraftContents } from "../changes/draftChanges.js";
+import type { CanvasFrame } from "./canvasFrame.js";
+import type { DraftContents } from "../drafts/model.js";
 import type { CanvasCard } from "./canvasStore.js";
 import { type PreviewDocument } from "../changes/previewDiagnostics.js";
 import { type CompiledManagedStyles, type DraftProjectionPlan } from "../projection/draftProjection.js";
-export declare const PROJECT_ID: string;
-export declare const WORKSPACE_ID: string;
 export interface FrameProjection extends DraftProjectionPlan<CompiledManagedStyles> {
     readonly draftId: string;
     readonly draftRevision: number;
@@ -14,45 +13,35 @@ export interface CanvasProjectionStatus {
     sentRevision: number;
     appliedRevision: number;
 }
-/** Returns the current value-based identity for one Canvas card document. */
 export declare function getCanvasPreviewDocument(cardId: string): PreviewDocument;
 /** Invalidates a card's current document before its iframe is replaced. */
 export declare function invalidateCanvasPreviewDocument(cardId: string): void;
-export declare function computeProjection(): {
-    css: string;
-    revision: number;
-    sourceRevision: number;
-    managedStyles: CompiledManagedStyles;
-    instanceOverrides: readonly import("../changes/editModel.js").RenderedInstanceOverride[];
-    structuralChanges: readonly import("../changes/structuralTypes.js").StructuralChange[];
-    textContentChanges: readonly import("../changes/editModel.js").TextContentChangeRecord[];
-    componentOverrides: readonly import("../componentSemantics/types.js").ComponentOverride[];
-};
 export declare function computeProjectionForCard(cardId: string): FrameProjection;
 export declare function getCanonicalFrameProjection(cardId: string, expectedRevision: number): FrameProjection | null;
-export declare function restoreCanonicalFrameProjection(doc: Document): void;
+/** Re-sends the canonical projection and settles on acknowledgement, so callers can rely on its stylesheet invalidation. */
+export declare function restoreCanonicalFrameProjection(doc: Document): Promise<void>;
 export declare function getCanvasCardIdForDocument(doc: Document): string | null;
 export declare function resetProjectionRevision(): void;
-export declare function sendProjectionToCard(card: Pick<CanvasCard, "id">, iframe: HTMLIFrameElement): void;
-/** Temporarily projects a snapshot through the renderer that owns the document. */
+export declare function sendProjectionToCard(card: Pick<CanvasCard, "id">, iframe: CanvasFrame): number | null;
 export declare function projectDraftToDocument(doc: Document, snapshot: DraftContents): Promise<number | null>;
-/** Returns whether an acknowledged temporary projection is still authoritative. */
+/** Whether an acknowledged temporary projection is still authoritative. */
 export declare function isCanvasProjectionRevisionCurrent(doc: Document, expectedRevision: number): boolean;
-/** Returns whether the live frame acknowledged its latest canonical workspace projection. */
 export declare function isCanvasCanonicalProjectionRevisionCurrent(doc: Document, expectedRevision: number): boolean;
-export declare function registerCardFrameSource(cardId: string, iframe: HTMLIFrameElement): void;
-export declare function registerCardFrame(cardId: string, iframe: HTMLIFrameElement): void;
+export declare function registerCardFrameSource(cardId: string, iframe: CanvasFrame): void;
+export declare function registerCardFrame(cardId: string, iframe: CanvasFrame): void;
 export declare function unregisterCardFrame(cardId: string): void;
-export declare function getRegisteredFrames(): ReadonlyMap<string, HTMLIFrameElement>;
+export declare function getRegisteredFrames(): ReadonlyMap<string, CanvasFrame>;
 export declare function findCanvasFrameBySource(source: MessageEventSource | null): {
     cardId: string;
-    iframe: HTMLIFrameElement;
+    iframe: CanvasFrame;
 } | null;
+/** The registered frame rendering `doc`; on the page surface this is the controller document. */
+export declare function findCanvasFrameByDocument(doc: Document | null | undefined): CanvasFrame | null;
 export declare function subscribeFrameRegistry(listener: () => void): () => void;
-/** Records the highest complete projection revision accepted by one frame. */
 export declare function recordCanvasProjectionApplied(cardId: string, appliedRevision: number): void;
-/** Returns projection progress for the document containing a selected element. */
 export declare function getCanvasProjectionStatus(doc: Document): CanvasProjectionStatus | null;
 export declare function subscribeCanvasProjectionAcknowledgements(listener: () => void): () => void;
 export declare function getCanvasProjectionAcknowledgementVersion(): number;
+/** Bumped whenever a frame registers or unregisters, for `useSyncExternalStore`. */
+export declare function getFrameRegistryVersion(): number;
 export declare function projectToAllReadyCards(): void;

package/dist/inspector/canvas/projection.js

@@ -1,24 +1,15 @@
-import { draftIdForCard } from "../drafts/store.js";
-import { getDraftChanges, getActiveDraftChanges } from "../changes/draftChanges.js";
+import { draftIdForCard, getDraftChanges, getActiveDraftChanges } from "../drafts/store.js";
 import { getCanvasCards } from "./canvasStore.js";
 import { getCanvasMode } from "./viewStore.js";
-import { PROTOCOL_VERSION } from "./frameProtocol.js";
-import { clearCanvasRenderedInstanceProjectionReports, setCanonicalRenderedInstanceOverrides, } from "../projection/renderedInstance.js";
-import { clearCanvasTextProjectionReports, setCanonicalTextContentChanges, } from "../projection/textProjection.js";
+import { connectFrame } from "./frameConnection.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 { compileDraftProjection, } from "../projection/draftProjection.js";
 import { isOriginalPreviewActive } from "../shell/originalPreview.js";
-import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
-export const PROJECT_ID = typeof window !== "undefined" && window.location?.origin
-    ? window.location.origin
-    : "";
-export const WORKSPACE_ID = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
-    ? crypto.randomUUID()
-    : `ws-${Date.now()}`;
+import { disposeBrowserCssInspection, notifyBrowserStylesheetChange } from "../inspection/browserCssInspectionRegistry.js";
 let revision = 0;
-let lastRulesKey = null;
-let lastPeekActive = false;
 const draftPlans = new Map();
 const frameProjectionStates = new Map();
 const previewDocuments = new Map();
@@ -34,10 +25,8 @@ function createPreviewDocumentIdentity(cardId) {
     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.
+    // Pure getter: registerCardFrame owns session activation; creating the identity here is idempotent.
     return previewDocuments.get(cardId) ?? createPreviewDocumentIdentity(cardId);
 }
 /** Invalidates a card's current document before its iframe is replaced. */
@@ -51,47 +40,6 @@ export function invalidateCanvasPreviewDocument(cardId) {
     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 = compileDraftProjection(getActiveDraftChanges());
-    if (isOriginalPreviewActive()) {
-        // Hold-to-view-original: frames show the page without inspector changes
-        // while canonical intent (and its projection key) stays untouched.
-        if (!lastPeekActive) {
-            lastPeekActive = true;
-            revision += 1;
-        }
-        return {
-            ...plan,
-            managedStyles: { rules: [], css: "" },
-            css: "",
-            instanceOverrides: [],
-            structuralChanges: [],
-            textContentChanges: [],
-            componentOverrides: [],
-            revision,
-        };
-    }
-    if (lastPeekActive) {
-        // Force the canonical projection to resend after a peek even though its
-        // key is unchanged since the peek began.
-        lastPeekActive = false;
-        lastRulesKey = null;
-    }
-    setCanonicalRenderedInstanceOverrides(plan.instanceOverrides);
-    setCanonicalTextContentChanges(plan.textContentChanges);
-    const key = projectionKey(plan);
-    if (key !== lastRulesKey) {
-        lastRulesKey = key;
-        revision += 1;
-    }
-    return { ...plan, css: plan.managedStyles.css, revision };
-}
 export function computeProjectionForCard(cardId) {
     const draftId = draftIdForCard(cardId);
     const workspace = draftId ? getDraftChanges(draftId) : getActiveDraftChanges();
@@ -116,12 +64,16 @@ export function getCanonicalFrameProjection(cardId, expectedRevision) {
         return null;
     return plan;
 }
-export function restoreCanonicalFrameProjection(doc) {
+/** Re-sends the canonical projection and settles on acknowledgement, so callers can rely on its stylesheet invalidation. */
+export async function restoreCanonicalFrameProjection(doc) {
     const id = getCanvasCardIdForDocument(doc);
     const card = getCanvasCards().find((card) => card.id === id);
     const frame = id ? frameRegistry.get(id) : undefined;
-    if (card && frame)
-        sendProjectionToCard(card, frame);
+    if (!card || !frame)
+        return;
+    const sent = sendProjectionToCard(card, frame);
+    if (sent !== null)
+        await waitForProjectionApplied(card.id, doc, sent);
 }
 export function getCanvasCardIdForDocument(doc) {
     for (const [id, state] of frameProjectionStates)
@@ -131,8 +83,6 @@ export function getCanvasCardIdForDocument(doc) {
 }
 export function resetProjectionRevision() {
     revision = 0;
-    lastRulesKey = null;
-    lastPeekActive = false;
     draftPlans.clear();
     for (const state of frameProjectionStates.values()) {
         state.sentRevision = -1;
@@ -146,7 +96,7 @@ export function resetProjectionRevision() {
 export function sendProjectionToCard(card, iframe) {
     const win = iframe.contentWindow;
     if (!win)
-        return;
+        return null;
     let plan = computeProjectionForCard(card.id);
     const state = frameProjectionStates.get(card.id);
     if (state && plan.revision < state.sentRevision) {
@@ -155,30 +105,25 @@ export function sendProjectionToCard(card, iframe) {
     }
     if (state)
         state.canonicalProjection = plan;
-    const { css, revision: rev, instanceOverrides, structuralChanges, textContentChanges, componentOverrides } = plan;
-    sendProjectionMessage(card.id, iframe, rev, css, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, true);
+    const { css, revision: rev, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, runtimeIdentities } = plan;
+    sendProjectionMessage(card.id, iframe, rev, css, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, runtimeIdentities, true);
+    return rev;
 }
-function sendProjectionMessage(cardId, iframe, rev, css, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, canonical = false) {
-    const win = iframe.contentWindow;
-    if (!win)
+function sendProjectionMessage(cardId, iframe, rev, css, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, runtimeIdentities, canonical = false) {
+    if (!iframe.contentWindow)
         return;
-    const msg = {
+    markProjectionSent(cardId, iframe, rev, css, canonical);
+    connectFrame(cardId, iframe).post({
         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, canonical);
-    win.postMessage(msg, window.location.origin);
+        ...(runtimeIdentities ? { runtimeIdentities: [...runtimeIdentities] } : {}),
+    });
 }
-/** Temporarily projects a snapshot through the renderer that owns the document. */
 export async function projectDraftToDocument(doc, snapshot) {
     const entry = [...frameProjectionStates.entries()].find(([, state]) => state.document === doc);
     if (!entry)
@@ -186,10 +131,15 @@ export async function projectDraftToDocument(doc, snapshot) {
     const [cardId, state] = entry;
     const plan = compileDraftProjection({ ...snapshot, revision: 0 });
     revision += 1;
-    sendProjectionMessage(cardId, state.iframe, revision, plan.managedStyles.css, plan.instanceOverrides, plan.structuralChanges, plan.textContentChanges, plan.componentOverrides);
-    if (state.appliedRevision === revision && state.sentRevision === revision)
-        return revision;
-    const requestedRevision = revision;
+    sendProjectionMessage(cardId, state.iframe, revision, plan.managedStyles.css, plan.instanceOverrides, plan.structuralChanges, plan.textContentChanges, plan.componentOverrides, plan.runtimeIdentities);
+    return waitForProjectionApplied(cardId, doc, revision);
+}
+/** Resolves with `requestedRevision` on acknowledgement; null when superseded, replaced, or after 2s. */
+function waitForProjectionApplied(cardId, doc, requestedRevision) {
+    const initial = frameProjectionStates.get(cardId);
+    if (initial?.appliedRevision === requestedRevision && initial.sentRevision === requestedRevision) {
+        return Promise.resolve(requestedRevision);
+    }
     return new Promise((resolve) => {
         let settled = false;
         let timer;
@@ -214,7 +164,7 @@ export async function projectDraftToDocument(doc, snapshot) {
         timer = setTimeout(() => finish(null), 2_000);
     });
 }
-/** Returns whether an acknowledged temporary projection is still authoritative. */
+/** Whether an acknowledged temporary projection is still authoritative. */
 export function isCanvasProjectionRevisionCurrent(doc, expectedRevision) {
     for (const state of frameProjectionStates.values()) {
         if (state.document !== doc)
@@ -230,7 +180,6 @@ export function isCanvasProjectionRevisionCurrent(doc, expectedRevision) {
     }
     return false;
 }
-/** Returns whether the live frame acknowledged its latest canonical workspace projection. */
 export function isCanvasCanonicalProjectionRevisionCurrent(doc, expectedRevision) {
     for (const state of frameProjectionStates.values()) {
         if (state.document !== doc)
@@ -273,6 +222,8 @@ export function registerCardFrame(cardId, iframe) {
             appliedRevision: -1,
             canonicalSentRevision: -1,
             canonicalProjection: null,
+            sentCss: new Map(),
+            appliedCss: null,
         });
     }
     else {
@@ -304,6 +255,16 @@ export function findCanvasFrameBySource(source) {
     }
     return null;
 }
+/** The registered frame rendering `doc`; on the page surface this is the controller document. */
+export function findCanvasFrameByDocument(doc) {
+    if (!doc)
+        return null;
+    for (const iframe of frameRegistry.values()) {
+        if (getFrameDocument(iframe) === doc)
+            return iframe;
+    }
+    return null;
+}
 const frameRegistryListeners = new Set();
 export function subscribeFrameRegistry(listener) {
     frameRegistryListeners.add(listener);
@@ -319,24 +280,34 @@ function getFrameDocument(iframe) {
         return null;
     }
 }
-function markProjectionSent(cardId, iframe, sentRevision, canonical = false) {
+function markProjectionSent(cardId, iframe, sentRevision, css, canonical = false) {
     const state = frameProjectionStates.get(cardId);
     if (!state || state.iframe !== iframe)
         return;
     state.sentRevision = Math.max(state.sentRevision, sentRevision);
+    state.sentCss.set(sentRevision, css);
     if (canonical)
         state.canonicalSentRevision = 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;
+    const css = state.sentCss.get(appliedRevision);
+    for (const sent of state.sentCss.keys()) {
+        if (sent <= appliedRevision)
+            state.sentCss.delete(sent);
+    }
+    // Renderer stylesheet writes don't invalidate the controller's CSSOM cache, so only a CSS change needs a refresh.
+    const cssChanged = css === undefined || css !== state.appliedCss;
+    state.appliedCss = css ?? null;
+    if (cssChanged && state.document && state.iframe.contentDocument === state.document) {
+        notifyBrowserStylesheetChange(state.document);
+    }
     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)
@@ -365,7 +336,13 @@ function notifyProjectionAcknowledgementListeners() {
         catch { /* ignore */ }
     }
 }
+let frameRegistryVersion = 0;
+/** Bumped whenever a frame registers or unregisters, for `useSyncExternalStore`. */
+export function getFrameRegistryVersion() {
+    return frameRegistryVersion;
+}
 function notifyFrameRegistryListeners() {
+    frameRegistryVersion += 1;
     for (const listener of frameRegistryListeners) {
         try {
             listener();

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

@@ -1,4 +1,11 @@
+import { startRendererProjectionDiagnostics } from "./rendererStylesheet.js";
+import { installRendererElementSelector } from "./rendererElementSelector.js";
 export interface RendererBootstrapHandle {
     teardown(): void;
 }
-export declare function bootstrapRenderer(): RendererBootstrapHandle | undefined;
+/** Replaces the renderer resources a caller cannot exercise directly, such as jsdom-based browser tests. */
+export interface RendererBootstrapResources {
+    readonly installElementSelector?: typeof installRendererElementSelector;
+    readonly startProjectionDiagnostics?: typeof startRendererProjectionDiagnostics;
+}
+export declare function bootstrapRenderer(resources?: RendererBootstrapResources): RendererBootstrapHandle | undefined;

package/dist/inspector/canvas/rendererBootstrap.js

@@ -7,6 +7,8 @@ import { createFrameThrottle } from "../overlay/frameThrottle.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
 import { getNudgeUiRuntimeConfig, subscribeNudgeUiRuntime } from "../runtime/runtimeConfig.js";
 import { APP_INTERACTION_KEY } from "./keyboardShortcuts.js";
+import { isInspectorUiEvent } from "./pageSurface.js";
+import { disposeRuntimeIdentityClaims } from "../runtime/runtimeIdentityClaims.js";
 let activeRendererBootstrap = null;
 function ownsRendererBootstrap(owner) {
     return owner.active && activeRendererBootstrap?.owner === owner;
@@ -104,8 +106,7 @@ function scheduleRendererTimer(owner, callback, delay) {
 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.
+    // Invalidate callbacks before releasing resources: queued microtasks or frames can still run.
     owner.active = false;
     if (activeRendererBootstrap?.owner === owner) {
         activeRendererBootstrap = null;
@@ -127,7 +128,7 @@ function teardownRenderer(owner) {
         restoreHistoryPatch();
     clearRendererIdentity();
 }
-export function bootstrapRenderer() {
+export function bootstrapRenderer(resources = {}) {
     if (!getNudgeUiRuntimeConfig().capabilities.canvas)
         return;
     if (!isNudgeUiDev())
@@ -149,11 +150,12 @@ export function bootstrapRenderer() {
     activeRendererBootstrap = { owner, handle };
     try {
         observeFrameMetadata(owner);
+        owner.resourceDisposers.push(() => disposeRuntimeIdentityClaims(document));
         owner.resourceDisposers.push(subscribeNudgeUiRuntime(() => sendFrameRuntime(owner)));
-        const disposeDiagnostics = startRendererProjectionDiagnostics();
+        const disposeDiagnostics = (resources.startProjectionDiagnostics ?? startRendererProjectionDiagnostics)();
         if (disposeDiagnostics)
             owner.resourceDisposers.push(disposeDiagnostics);
-        const disposeSelector = installRendererElementSelector();
+        const disposeSelector = (resources.installElementSelector ?? installRendererElementSelector)();
         if (disposeSelector)
             owner.resourceDisposers.push(disposeSelector);
         installRendererPanProxy(owner);
@@ -223,13 +225,7 @@ export function bootstrapRenderer() {
         };
         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.
+        // The controller's listener may attach after the renderer boots; retry briefly, and every path is idempotent.
         let helloAttempts = 0;
         const solicitHandshake = () => {
             if (!ownsRendererBootstrap(owner) || getRendererIdentity() || helloAttempts >= 5)
@@ -319,7 +315,7 @@ function installRendererPanProxy(owner) {
         sendToParent({ type: "app-interaction-modifier", protocolVersion: PROTOCOL_VERSION, held, ...identity });
     }
     const onKeyDown = (event) => {
-        if (!ownsRendererBootstrap(owner))
+        if (!ownsRendererBootstrap(owner) || isInspectorUiEvent(event))
             return;
         if (event.code === APP_INTERACTION_KEY && !event.repeat && !isEditableTarget(event.target))
             sendAppInteractionModifier(true);
@@ -354,8 +350,7 @@ function installRendererPanProxy(owner) {
             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.
+        // Pointer-up can arrive before the next frame; flush the latest point so the final position is not lost.
         panMoveUpdate.flush();
         panning = false;
         const identity = getRendererIdentity();

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

@@ -3,9 +3,4 @@ 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

@@ -1,10 +1,5 @@
 /** 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();