nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/canvas/frameProtocol.js

@@ -19,6 +19,42 @@ import { isStructuralProjectionReport } from "../projection/structuralProjection
 // added the renderer-hello handshake solicitation for runtimes whose boot
 // completes after the controller's load-time parent-ready.
 export const PROTOCOL_VERSION = 21;
+const RENDERER_MESSAGE_TYPES = {
+    "renderer-hello": true,
+    "frame-ready": true,
+    "frame-runtime": true,
+    "frame-metadata": true,
+    "frame-error": true,
+    "projection-applied": true,
+    "structural-projection-report": true,
+    "rendered-instance-projection-report": true,
+    "text-projection-report": true,
+    "navigation-intent": true,
+    "element-hover": true,
+    "element-measure-state": true,
+    "element-click": true,
+    "inline-text-intent": true,
+    "element-deselect": true,
+    "element-drag-start": true,
+    "element-drag-move": true,
+    "element-drag-end": true,
+    "element-delete": true,
+    "element-nudge": true,
+    "history-request": true,
+    "inspector-toggle-request": true,
+    "inspector-open-request": true,
+    "keyboard-shortcut": true,
+    "pan-start": true,
+    "pan-move": true,
+    "pan-end": true,
+    "pan-modifier": true,
+    "zoom": true,
+    "wheel-pan": true,
+    "app-interaction-modifier": true,
+};
+export function isRendererMessageType(type) {
+    return typeof type === "string" && Object.hasOwn(RENDERER_MESSAGE_TYPES, type);
+}
 let rendererIdentity = null;
 export function setRendererIdentity(identity) {
     rendererIdentity = identity;

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

@@ -0,0 +1,3 @@
+export declare const FRAME_SCROLLBAR_STYLE_ID = "nudge-ui-frame-scrollbar-styles";
+/** Gives frame documents thin scrollbars over a transparent track by default. */
+export declare function installFrameScrollbarStyles(doc: Document): () => void;

package/dist/inspector/canvas/frameScrollbarStyles.js

@@ -0,0 +1,21 @@
+export const FRAME_SCROLLBAR_STYLE_ID = "nudge-ui-frame-scrollbar-styles";
+// `:where()` keeps specificity at zero so any application scrollbar rule wins.
+const FRAME_SCROLLBAR_CSS = `
+  :where(html) {
+    scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+  }
+
+  :where(*) {
+    scrollbar-width: thin;
+  }
+`;
+/** Gives frame documents thin scrollbars over a transparent track by default. */
+export function installFrameScrollbarStyles(doc) {
+    if (!doc.head || doc.getElementById(FRAME_SCROLLBAR_STYLE_ID))
+        return () => undefined;
+    const style = doc.createElement("style");
+    style.id = FRAME_SCROLLBAR_STYLE_ID;
+    style.textContent = FRAME_SCROLLBAR_CSS;
+    doc.head.append(style);
+    return () => style.remove();
+}

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

@@ -0,0 +1,11 @@
+import type { CanvasFrame } from "./canvasFrame.js";
+/**
+ * Runs the renderer and controller in the inspected window. The single Canvas
+ * card is the page itself, so no iframe or framing permission is needed.
+ */
+export declare function enablePageSurface(): void;
+export declare function isPageSurface(): boolean;
+/** The page-surface card's frame: the inspected window, filling the viewport. */
+export declare function getPageFrame(win?: Window): CanvasFrame;
+/** True for events that start inside the inspector's own shadow root. */
+export declare function isInspectorUiEvent(event: Event): boolean;

package/dist/inspector/canvas/pageSurface.js

@@ -0,0 +1,34 @@
+import { NUDGE_UI_MOUNT_ID } from "../../transport/routes.js";
+let pageSurface = false;
+/**
+ * Runs the renderer and controller in the inspected window. The single Canvas
+ * card is the page itself, so no iframe or framing permission is needed.
+ */
+export function enablePageSurface() {
+    pageSurface = true;
+}
+export function isPageSurface() {
+    return pageSurface;
+}
+const pageFrames = new WeakMap();
+/** The page-surface card's frame: the inspected window, filling the viewport. */
+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;
+}
+/** True for events that start inside the inspector's own shadow root. */
+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;
@@ -27,27 +26,36 @@ export declare function computeProjection(): {
     structuralChanges: readonly import("../changes/structuralTypes.js").StructuralChange[];
     textContentChanges: readonly import("../changes/editModel.js").TextContentChangeRecord[];
     componentOverrides: readonly import("../componentSemantics/types.js").ComponentOverride[];
+    runtimeIdentities?: readonly import("../runtime/runtimeIdentityClaims.js").RuntimeIdentityClaim[];
 };
 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 after a temporary verification projection
+ * and settles once the renderer acknowledges it, so callers can treat the
+ * acknowledgement's stylesheet invalidation as part of their own work.
+ */
+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;
+/** Sends the canonical projection and returns its revision, or null when the frame has no window. */
+export declare function sendProjectionToCard(card: Pick<CanvasCard, "id">, iframe: CanvasFrame): number | null;
 /** Temporarily projects a snapshot through the renderer that owns the document. */
 export declare function projectDraftToDocument(doc: Document, snapshot: DraftContents): Promise<number | null>;
 /** Returns 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`, which may be the controller document on the page surface. */
+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;
@@ -55,4 +63,6 @@ export declare function recordCanvasProjectionApplied(cardId: string, appliedRev
 export declare function getCanvasProjectionStatus(doc: Document): CanvasProjectionStatus | null;
 export declare function subscribeCanvasProjectionAcknowledgements(listener: () => void): () => void;
 export declare function getCanvasProjectionAcknowledgementVersion(): number;
+/** Changes 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,21 +1,14 @@
-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 { connectFrame } from "./frameConnection.js";
 import { clearCanvasRenderedInstanceProjectionReports, setCanonicalRenderedInstanceOverrides, } from "../projection/renderedInstance.js";
 import { clearCanvasTextProjectionReports, setCanonicalTextContentChanges, } 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;
@@ -116,12 +109,20 @@ export function getCanonicalFrameProjection(cardId, expectedRevision) {
         return null;
     return plan;
 }
-export function restoreCanonicalFrameProjection(doc) {
+/**
+ * Re-sends the canonical projection after a temporary verification projection
+ * and settles once the renderer acknowledges it, so callers can treat the
+ * acknowledgement's stylesheet invalidation as part of their own work.
+ */
+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)
@@ -143,10 +144,11 @@ export function resetProjectionRevision() {
     projectionAcknowledgementVersion += 1;
     notifyProjectionAcknowledgementListeners();
 }
+/** Sends the canonical projection and returns its revision, or null when the frame has no window. */
 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,28 +157,24 @@ 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, 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) {
@@ -186,10 +184,18 @@ 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` once the frame acknowledges it, or null
+ * when a newer projection supersedes it, the frame is replaced, or 2s pass.
+ */
+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;
@@ -304,6 +310,16 @@ export function findCanvasFrameBySource(source) {
     }
     return null;
 }
+/** The registered frame rendering `doc`, which may be the controller document on the page surface. */
+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);
@@ -333,6 +349,11 @@ export function recordCanvasProjectionApplied(cardId, appliedRevision) {
     if (!state || appliedRevision > state.sentRevision || appliedRevision <= state.appliedRevision)
         return;
     state.appliedRevision = appliedRevision;
+    // Adopted stylesheet writes in the renderer do not emit DOM mutations or
+    // invalidate the controller's separate CSSOM cache.
+    if (state.document && state.iframe.contentDocument === state.document) {
+        notifyBrowserStylesheetChange(state.document);
+    }
     projectionAcknowledgementVersion += 1;
     notifyProjectionAcknowledgementListeners();
 }
@@ -365,7 +386,13 @@ function notifyProjectionAcknowledgementListeners() {
         catch { /* ignore */ }
     }
 }
+let frameRegistryVersion = 0;
+/** Changes 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.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;
@@ -149,6 +151,7 @@ export function bootstrapRenderer() {
     activeRendererBootstrap = { owner, handle };
     try {
         observeFrameMetadata(owner);
+        owner.resourceDisposers.push(() => disposeRuntimeIdentityClaims(document));
         owner.resourceDisposers.push(subscribeNudgeUiRuntime(() => sendFrameRuntime(owner)));
         const disposeDiagnostics = startRendererProjectionDiagnostics();
         if (disposeDiagnostics)
@@ -319,7 +322,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);

package/dist/inspector/canvas/rendererElementSelector.js

@@ -11,6 +11,7 @@ import { APPLICATION_GESTURE_EVENTS, blockApplicationClick, blockApplicationGest
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
 import { getSpacingAffordanceAtPoint, getSpacingHoverAtPoint, toSpacingDescriptor, } from "../overlay/spacingGestures.js";
 import { COMMENT_CURSOR, INTERACTION_CURSOR_PROPERTY, rendererCursorValue } from "../ui/customCursors.js";
+import { isInspectorUiEvent, isPageSurface } from "./pageSurface.js";
 const REACT_FIBER_KEY = /^__reactFiber\$/;
 const REACT_INTERNAL_KEY = /^__reactInternalInstance\$/;
 const HOVER_SCROLL_SETTLE_DELAY = 150;
@@ -94,7 +95,11 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     let suppressHoverDuringSpacingDrag = false;
     let lastHoverPoint = null;
     function trackListener(target, type, listener, options) {
-        const eventListener = (event) => listener(event);
+        const eventListener = (event) => {
+            if (isInspectorUiEvent(event))
+                return;
+            listener(event);
+        };
         target.addEventListener(type, eventListener, options);
         listenerCleanup.push(() => target.removeEventListener(type, eventListener, options));
     }
@@ -507,6 +512,9 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     }
     trackListener(document, "mouseup", finishDrag, true);
     function forwardKeyboardShortcut(event, phase) {
+        // The controller's own window listeners already see page-surface keys.
+        if (isPageSurface())
+            return false;
         const code = isKeyboardShortcutCode(event.code) ? event.code : null;
         if (!code)
             return false;

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

@@ -1,9 +1,8 @@
-import { type FrameIdentity, type FrameProtocolMessage } from "./frameProtocol.js";
+import { type RendererToControllerMessage } from "./frameProtocol.js";
+import { type FrameConnection } from "./frameConnection.js";
 export interface CanvasRendererMessage {
-    cardId: string;
-    iframe: HTMLIFrameElement;
-    identity: FrameIdentity;
-    message: FrameProtocolMessage;
+    frame: FrameConnection;
+    message: RendererToControllerMessage;
 }
 type CanvasRendererMessageListener = (event: CanvasRendererMessage) => void;
 /** Subscribes to same-origin messages from registered Canvas renderer frames. */

package/dist/inspector/canvas/rendererMessageRouter.js

@@ -1,32 +1,28 @@
-import { isRendererMessageFor, PROTOCOL_VERSION, } from "./frameProtocol.js";
-import { findCanvasFrameBySource, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
+import { isRendererMessageFor, isRendererMessageType, PROTOCOL_VERSION, } from "./frameProtocol.js";
+import { connectFrame } from "./frameConnection.js";
+import { findCanvasFrameBySource } from "./projection.js";
 const listeners = new Set();
 function routeRendererMessage(event) {
     if (event.origin !== window.location.origin || !event.data || typeof event.data !== "object")
         return;
-    const frame = findCanvasFrameBySource(event.source);
-    if (!frame)
+    const source = findCanvasFrameBySource(event.source);
+    if (!source)
         return;
-    const identity = {
-        projectId: PROJECT_ID,
-        workspaceId: WORKSPACE_ID,
-        cardId: frame.cardId,
-    };
+    const frame = connectFrame(source.cardId, source.iframe);
     // SAFETY: The object guard above makes the optional discriminator fields safe to inspect.
     const candidate = event.data;
+    if (!isRendererMessageType(candidate.type))
+        return;
     if (candidate.type === "renderer-hello") {
         if (candidate.protocolVersion !== PROTOCOL_VERSION)
             return;
     }
-    else if (!isRendererMessageFor(event.data, identity)) {
+    else if (!isRendererMessageFor(event.data, frame.identity)) {
         return;
     }
-    const routed = {
-        ...frame,
-        identity,
-        // SAFETY: Subscribers narrow the discriminated protocol union before reading message-specific fields.
-        message: event.data,
-    };
+    // SAFETY: The type is a known renderer message; subscribers narrow it and
+    // apply the strict per-message schema before trusting message-specific fields.
+    const routed = { frame, message: event.data };
     for (const listener of listeners)
         listener(routed);
 }

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

@@ -1,2 +1,8 @@
 import type { ElementClickMessage } from "./frameProtocol.js";
-export declare function handleElementClick(msg: ElementClickMessage, iframe: HTMLIFrameElement, cardId: string): void;
+import type { FrameConnection } from "./frameConnection.js";
+/**
+ * Selects the exact DOM node the user clicked inside a card's frame, so the
+ * controller mutates that physical node. If it no longer exists, the card is
+ * selected instead of binding the click to an unrelated node.
+ */
+export declare function handleElementClick(msg: ElementClickMessage, frame: FrameConnection): void;

package/dist/inspector/canvas/rendererSelectionProxy.js

@@ -1,44 +1,16 @@
 import { getSelectedElements, setSelectedElement, toggleSelectedElement } from "../selection/selectionStore.js";
 import { selectCard } from "./canvasStore.js";
-import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
 import { inspectComponentTargets } from "../componentSemantics/index.js";
-function isHtmlElementInDocument(node, doc) {
-    const frameWindow = doc.defaultView;
-    return frameWindow !== null && node instanceof frameWindow.HTMLElement;
-}
 /**
- * Resolve the exact DOM element inside a card's iframe that matches an
- * element-click message. The renderer (running inside the iframe) tells us
- * the clicked element's renderer-owned `elementId`; we re-find the element by
- * that stable data attribute so that the parent app can mutate the same
- * physical DOM node the user clicked.
- *
- * The resolution uses a scoped ID query and never depends on document order.
- *
- * If the exact renderer-owned node no longer exists, fail closed instead of
- * binding the copied component metadata to an unrelated DOM node.
+ * Selects the exact DOM node the user clicked inside a card's frame, so the
+ * controller mutates that physical node. If it no longer exists, the card is
+ * selected instead of binding the click to an unrelated node.
  */
-function findClickedElement(doc, elementId, cid, src) {
-    if (!doc)
-        return null;
-    if (!/^r\d+$/.test(elementId))
-        return null;
-    const candidates = doc.querySelectorAll(`[${RENDERER_ELEMENT_ID_ATTR}="${elementId}"]`);
-    if (candidates.length !== 1)
-        return null;
-    const candidate = candidates[0] ?? null;
-    if (!candidate
-        || candidate.getAttribute("data-cid") !== cid
-        || (candidate.getAttribute("data-src") ?? "") !== src)
-        return null;
-    return isHtmlElementInDocument(candidate, doc) ? candidate : null;
-}
-export function handleElementClick(msg, iframe, cardId) {
-    const doc = iframe.contentDocument;
-    const el = findClickedElement(doc, msg.elementId, msg.cid, msg.src);
+export function handleElementClick(msg, frame) {
+    const el = frame.element(msg);
     if (!el) {
         setSelectedElement(null);
-        selectCard(cardId);
+        selectCard(frame.cardId);
         return;
     }
     const componentTargets = inspectComponentTargets(el);
@@ -55,11 +27,11 @@ export function handleElementClick(msg, iframe, cardId) {
     // setSelectedElement must run before any side effect that could reload the
     // host page, otherwise the selection would be discarded by the unload.
     const current = getSelectedElements();
-    if (msg.additive && current.length > 0 && current.every((candidate) => candidate.domElement.ownerDocument === doc)) {
+    if (msg.additive && current.length > 0 && current.every((candidate) => candidate.domElement.ownerDocument === el.ownerDocument)) {
         toggleSelectedElement(selected);
     }
     else {
         setSelectedElement(selected);
     }
-    selectCard(cardId);
+    selectCard(frame.cardId);
 }

package/dist/inspector/canvas/rendererStylesheet.js

@@ -9,8 +9,15 @@ import { applyStructuralProjection, getStructuralProjectionReports, isStructural
 import { applyTextContentProjection, getTextProjectionReports, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
 import { isTextContentChangeListValue } from "../changes/types.js";
 import { applyDraftProjection, } from "../projection/draftProjection.js";
+import { adoptStylesheet, allowsStyleElements } from "../runtime/ownedStylesheets.js";
+import { applyRuntimeIdentityClaims, isRuntimeIdentityClaim } from "../runtime/runtimeIdentityClaims.js";
 const SHEET_ID = "nudge-ui-styles";
 function replaceRendererCss(css) {
+    if (!allowsStyleElements(document)) {
+        adoptStylesheet(document, SHEET_ID, css);
+        notifyBrowserStylesheetChange(document);
+        return;
+    }
     let sheet = document.getElementById(SHEET_ID);
     if (!sheet) {
         sheet = document.createElement("style");
@@ -22,6 +29,9 @@ function replaceRendererCss(css) {
     notifyBrowserStylesheetChange(document);
 }
 const rendererDocumentProjectionAdapter = {
+    applyRuntimeIdentities: (claims) => {
+        applyRuntimeIdentityClaims(document, claims);
+    },
     applyStructural: (changes) => {
         applyStructuralProjection(document, changes);
     },
@@ -44,6 +54,7 @@ function projectionFromReplaceStylesMessage(msg) {
         structuralChanges: msg.structuralChanges,
         textContentChanges: msg.textContentChanges,
         componentOverrides: msg.componentOverrides,
+        runtimeIdentities: msg.runtimeIdentities,
     };
 }
 let lastAppliedRevision = -1;
@@ -195,6 +206,10 @@ export function validateReplaceStyles(msg, projectId, workspaceId, cardId) {
     if (!isTextContentChangeListValue(m.textContentChanges)) {
         return { valid: false, reason: "text content changes are invalid" };
     }
+    if (m.runtimeIdentities !== undefined
+        && (!Array.isArray(m.runtimeIdentities) || !m.runtimeIdentities.every(isRuntimeIdentityClaim))) {
+        return { valid: false, reason: "runtime identities are invalid" };
+    }
     if (!isComponentOverrideList(m.componentOverrides)) {
         return { valid: false, reason: "component overrides are invalid" };
     }

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

@@ -38,8 +38,8 @@ export interface HydrationResult {
 export declare function serializeSession(): DurableSession;
 export declare function persistSession(): boolean;
 export declare function hydrateSession(): HydrationResult;
-/** Clears the active frame's edit draft while preserving canvas geometry and other drafts. */
-export declare function clearSelectedFrameChanges(): void;
+/** Clears the active draft, its comments, and project sketches while preserving canvas geometry and other drafts. */
+export declare function clearSelectedFrameChanges(): Promise<void>;
 export declare function clearSession(): void;
 export declare function enableAutoSave(): void;
 /**