nudge-ui 0.2.5 → 0.2.6

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

@@ -1,3 +1,4 @@
+import { type CanvasCamera } from "./viewStore.js";
 export interface LayoutCard {
     readonly id: string;
     readonly x: number;
@@ -11,42 +12,29 @@ export interface Bounds {
     readonly maxX: number;
     readonly maxY: number;
 }
-/** The layout fields a creation may change on existing frames. */
+/** Where a new card or iteration is placed on the board. */
+export interface CardPosition {
+    readonly x: number;
+    readonly y: number;
+}
 export interface LayoutShift {
     readonly id: string;
     readonly from: Pick<LayoutCard, "x" | "y">;
     readonly to: Pick<LayoutCard, "x" | "y">;
 }
 export declare function boundsOf(cards: readonly LayoutCard[]): Bounds;
-/** Places a new frame to the right of every frame, on the first frame's row. */
-export declare function nextCardPosition(cards: readonly LayoutCard[], gap: number): {
-    x: number;
-    y: number;
-};
+export declare function nextCardPosition(cards: readonly LayoutCard[], gap: number): CardPosition;
 export declare function pushOverlappingCards<T extends LayoutCard>(cards: readonly T[], protectedIds: ReadonlySet<string>, gap: number): T[];
-export declare function iterationPosition(cards: readonly LayoutCard[], source: LayoutCard, gap: number): {
-    x: number;
-    y: number;
-};
-/** Zooms and centers content inside the padded viewport; null for empty content. */
+export declare function iterationPosition(cards: readonly LayoutCard[], source: LayoutCard, gap: number): CardPosition;
 export declare function fitCamera(bounds: Bounds, viewport: {
     width: number;
     height: number;
-}, padding: number): {
-    x: number;
-    y: number;
-    zoom: number;
-} | null;
+}, padding: number): CanvasCamera | null;
 export declare function centerCamera(bounds: Bounds, zoom: number, viewport: {
     width: number;
     height: number;
-}): {
-    x: number;
-    y: number;
-    zoom: number;
-};
+}): CanvasCamera;
 export declare function layoutShifts(before: readonly LayoutCard[], after: readonly LayoutCard[]): LayoutShift[];
 /** Replays recorded shifts as deltas, so frames moved since the creation keep their later moves. */
 export declare function applyLayoutShifts<T extends LayoutCard>(cards: readonly T[], shifts: readonly LayoutShift[], forward: boolean): T[];
-/** Reinserts recorded frames after their nearest recorded predecessor that still exists. */
 export declare function reinsertInRecordedOrder<T extends LayoutCard>(cards: readonly T[], recorded: readonly T[], ids: ReadonlySet<string>): T[];

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

@@ -1,11 +1,6 @@
 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.
- */
+/** 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;
-/** 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

@@ -1,9 +1,6 @@
 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.
- */
+/** Runs renderer and controller in the inspected window so no iframe or framing permission is needed. */
 export function enablePageSurface() {
     pageSurface = true;
 }
@@ -11,7 +8,6 @@ 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)
@@ -28,7 +24,6 @@ export function getPageFrame(win = window) {
     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

@@ -13,38 +13,19 @@ 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[];
-    runtimeIdentities?: readonly import("../runtime/runtimeIdentityClaims.js").RuntimeIdentityClaim[];
-};
 export declare function computeProjectionForCard(cardId: string): FrameProjection;
 export declare function getCanonicalFrameProjection(cardId: string, expectedRevision: number): FrameProjection | null;
-/**
- * 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.
- */
+/** 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;
-/** 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. */
+/** 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: CanvasFrame): void;
 export declare function registerCardFrame(cardId: string, iframe: CanvasFrame): void;
@@ -54,15 +35,13 @@ export declare function findCanvasFrameBySource(source: MessageEventSource | nul
     cardId: string;
     iframe: CanvasFrame;
 } | null;
-/** The registered frame rendering `doc`, which may be the controller document on the page surface. */
+/** 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;
-/** Changes whenever a frame registers or unregisters, for `useSyncExternalStore`. */
+/** 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

@@ -2,16 +2,14 @@ import { draftIdForCard, getDraftChanges, getActiveDraftChanges } from "../draft
 import { getCanvasCards } from "./canvasStore.js";
 import { getCanvasMode } from "./viewStore.js";
 import { connectFrame } from "./frameConnection.js";
-import { clearCanvasRenderedInstanceProjectionReports, setCanonicalRenderedInstanceOverrides, } from "../projection/renderedInstance.js";
-import { clearCanvasTextProjectionReports, setCanonicalTextContentChanges, } from "../projection/textProjection.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, 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();
@@ -27,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. */
@@ -44,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();
@@ -109,11 +64,7 @@ export function getCanonicalFrameProjection(cardId, expectedRevision) {
         return null;
     return plan;
 }
-/**
- * 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.
- */
+/** 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);
@@ -132,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;
@@ -144,7 +93,6 @@ 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)
@@ -164,7 +112,7 @@ export function sendProjectionToCard(card, iframe) {
 function sendProjectionMessage(cardId, iframe, rev, css, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, runtimeIdentities, canonical = false) {
     if (!iframe.contentWindow)
         return;
-    markProjectionSent(cardId, iframe, rev, canonical);
+    markProjectionSent(cardId, iframe, rev, css, canonical);
     connectFrame(cardId, iframe).post({
         type: "replace-styles",
         css,
@@ -176,7 +124,6 @@ function sendProjectionMessage(cardId, iframe, rev, css, instanceOverrides, stru
         ...(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)
@@ -187,10 +134,7 @@ export async function projectDraftToDocument(doc, snapshot) {
     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.
- */
+/** 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) {
@@ -220,7 +164,7 @@ function waitForProjectionApplied(cardId, doc, requestedRevision) {
         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)
@@ -236,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)
@@ -279,6 +222,8 @@ export function registerCardFrame(cardId, iframe) {
             appliedRevision: -1,
             canonicalSentRevision: -1,
             canonicalProjection: null,
+            sentCss: new Map(),
+            appliedCss: null,
         });
     }
     else {
@@ -310,7 +255,7 @@ export function findCanvasFrameBySource(source) {
     }
     return null;
 }
-/** The registered frame rendering `doc`, which may be the controller document on the page surface. */
+/** The registered frame rendering `doc`; on the page surface this is the controller document. */
 export function findCanvasFrameByDocument(doc) {
     if (!doc)
         return null;
@@ -335,29 +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;
-    // 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) {
+    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)
@@ -387,7 +337,7 @@ function notifyProjectionAcknowledgementListeners() {
     }
 }
 let frameRegistryVersion = 0;
-/** Changes whenever a frame registers or unregisters, for `useSyncExternalStore`. */
+/** Bumped whenever a frame registers or unregisters, for `useSyncExternalStore`. */
 export function getFrameRegistryVersion() {
     return frameRegistryVersion;
 }

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

@@ -106,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;
@@ -129,7 +128,7 @@ function teardownRenderer(owner) {
         restoreHistoryPatch();
     clearRendererIdentity();
 }
-export function bootstrapRenderer() {
+export function bootstrapRenderer(resources = {}) {
     if (!getNudgeUiRuntimeConfig().capabilities.canvas)
         return;
     if (!isNudgeUiDev())
@@ -153,10 +152,10 @@ export function bootstrapRenderer() {
         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);
@@ -226,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)
@@ -357,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();

package/dist/inspector/canvas/rendererElementSelector.js

@@ -9,7 +9,7 @@ import { resolveSelectionTarget, selectionTargetMode } from "../selection/select
 import { escapeCssString } from "../projection/cssEscapes.js";
 import { APPLICATION_GESTURE_EVENTS, blockApplicationClick, blockApplicationGesture, isInlineEditorTarget, isUserClick, } from "../overlay/clickPolicy.js";
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
-import { getSpacingAffordanceAtPoint, getSpacingHoverAtPoint, toSpacingDescriptor, } from "../overlay/spacingGestures.js";
+import { getElementSpacingAtPoint, getElementSpacingHandleAtPoint, 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\$/;
@@ -171,24 +171,22 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         appliedRootCursor = cursor;
     }
     function reportHover(pending) {
-        const { element, clear } = pending;
+        const { clear } = pending;
         const identity = getRendererIdentity();
         if (!identity)
             return;
+        // Only the handle hit starts a drag and changes the cursor; the area-wide match is purely visual.
+        const elementSpacing = !commentMode && !clear && pending.point
+            ? getElementSpacingAtPoint(document, pending.element, pending.point.x, pending.point.y)
+            : null;
+        // A margin belongs to a child of the hovered element; hovering it reports that child.
+        const element = elementSpacing?.handle?.element ?? elementSpacing?.area?.element ?? pending.element;
+        const spacing = elementSpacing?.handle?.element === element ? elementSpacing.handle : null;
+        const hoverSpacing = elementSpacing?.area?.element === element ? elementSpacing.area : null;
         const cid = element.getAttribute("data-cid");
         const selector = buildSelector(element);
         const src = element.getAttribute("data-src") ?? "";
         const rect = clear ? null : element.getBoundingClientRect();
-        // The handle hit is the only target that starts a drag, so it is the only
-        // one that changes the cursor. The area-wide match is purely visual.
-        const rawSpacing = !commentMode && !clear && pending.point
-            ? getSpacingAffordanceAtPoint(document, pending.point.x, pending.point.y)
-            : null;
-        const spacing = rawSpacing && rawSpacing.element === element ? rawSpacing : null;
-        const rawHoverSpacing = !commentMode && !clear && pending.point
-            ? getSpacingHoverAtPoint(document, pending.point.x, pending.point.y)
-            : null;
-        const hoverSpacing = rawHoverSpacing && rawHoverSpacing.element === element ? rawHoverSpacing : null;
         if (spacing) {
             setSpacingCursor(spacing.element, spacing.cursor);
         }
@@ -282,7 +280,8 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         if (interactionsSuspended)
             return;
         updateMeasureState(event.altKey, true);
-        if (suppressHoverDuringSpacingDrag)
+        // Like mousemove, a pressed pointer reports drag moves, not hovers.
+        if (suppressHoverDuringSpacingDrag || pendingDrag)
             return;
         const target = event.target;
         if (!(target instanceof Element))
@@ -298,6 +297,8 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     trackListener(window, "scroll", suppressHoverDuringScroll, true);
     let pendingDrag = null;
     let dragging = false;
+    // The browser clicks the common ancestor after a drag; that click must not reselect the ancestor.
+    let suppressClickAfterDrag = false;
     let lastDragPoint = null;
     let lastSelected = null;
     trackListener(window, "nudge-ui:open", () => {
@@ -410,19 +411,15 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         const element = resolveSelectionTarget(event.target, selectionTargetMode(event));
         if (!element)
             return;
-        const spacingAffordance = getSpacingAffordanceAtPoint(document, event.clientX, event.clientY);
-        const spacing = spacingAffordance?.element === element
-            ? toSpacingDescriptor(spacingAffordance)
-            : null;
+        const spacingAffordance = getElementSpacingHandleAtPoint(document, element, event.clientX, event.clientY);
+        const spacing = spacingAffordance ? toSpacingDescriptor(spacingAffordance) : null;
         if (spacing) {
             suppressHoverDuringSpacingDrag = true;
             hoverUpdate.cancel();
             lastHoverPoint = null;
         }
         const identity = getRendererIdentity();
-        // A spacing drag owns the pointer gesture. Do not start an inline-text
-        // attempt for the same down event; padding and gaps are intentionally not
-        // editable text targets.
+        // A spacing drag owns the gesture; padding and gaps are not editable text targets.
         if (identity && !spacing) {
             const emptyProjectionId = event.target instanceof Element
                 ? event.target.closest(`[${EMPTY_TEXT_PROJECTION_ATTR}]`)?.getAttribute(EMPTY_TEXT_PROJECTION_ATTR) ?? undefined
@@ -441,9 +438,10 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
             };
             sendToParent(message);
         }
-        lastSelected = element;
+        const owner = spacingAffordance?.element ?? element;
+        lastSelected = owner;
         pendingDrag = {
-            element,
+            element: owner,
             point: { x: event.clientX, y: event.clientY },
             spacing,
         };
@@ -501,6 +499,8 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     function finishDrag(event) {
         dragMoveUpdate.cancel();
         if (dragging) {
+            suppressClickAfterDrag = true;
+            window.setTimeout(() => { suppressClickAfterDrag = false; }, 0);
             event.preventDefault();
             const point = { x: event.clientX, y: event.clientY };
             lastDragPoint = point;
@@ -545,9 +545,7 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         sendToParent(message);
         return phase === "keydown";
     }
-    // Global tool shortcuts need to run before application capture handlers on
-    // the iframe document. A page-level window handler can otherwise stop the
-    // event before it reaches the document listener.
+    // Must run before application capture handlers on the iframe document, which can stop the event.
     trackListener(window, "keydown", (event) => {
         if (isEditableEvent(event))
             return;
@@ -692,11 +690,15 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     trackListener(document, "click", (event) => {
         if (interactionsSuspended || !acceptsClick(event))
             return;
+        if (suppressClickAfterDrag) {
+            suppressClickAfterDrag = false;
+            blockApplicationClick(event);
+            return;
+        }
         const target = event.target;
         if (!(target instanceof Element))
             return;
-        // Design-tool clicks are editing gestures and must not reach the
-        // rendered application; the Select tool is how the app receives them.
+        // Design-tool clicks are editing gestures and must not reach the rendered application.
         const el = resolveSelectionTarget(target, selectionTargetMode(event));
         if (!el) {
             blockApplicationClick(event);