nudge-ui 0.2.2 → 0.2.3

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

@@ -0,0 +1,21 @@
+import { type DraftTarget } from "../drafts/model.js";
+/** Content identity is independent of frame geometry and its editable draft. */
+export type FrameContent = {
+    kind: "route";
+    url: string;
+    navigationUrl?: string;
+} | {
+    kind: "iteration";
+    artifactId: string;
+    sourceUrl: string;
+};
+export declare function contentSourceUrl(content: FrameContent | undefined): string;
+export declare function iterationId(content: FrameContent | undefined): string | undefined;
+export declare function contentNavigationUrl(content: FrameContent): string | undefined;
+export declare function contentDocumentUrl(content: FrameContent): string;
+export declare function contentEditTarget(content: FrameContent): DraftTarget;
+export declare function getLinkedFrameIds(frames: readonly {
+    id: string;
+    content: FrameContent;
+}[], activeId: string | null): readonly string[];
+export declare function isFrameContent(value: unknown, origin: string): value is FrameContent;

package/dist/inspector/canvas/frameContent.js

@@ -0,0 +1,44 @@
+import { applicationTarget, htmlTarget } from "../drafts/model.js";
+import { artifactDocumentUrl } from "../iterations/client.js";
+export function contentSourceUrl(content) {
+    return content ? content.kind === "route" ? content.url : content.sourceUrl : "";
+}
+export function iterationId(content) {
+    return content?.kind === "iteration" ? content.artifactId : undefined;
+}
+export function contentNavigationUrl(content) {
+    return content.kind === "route" ? content.navigationUrl : undefined;
+}
+export function contentDocumentUrl(content) {
+    return content.kind === "route" ? content.navigationUrl ?? content.url : artifactDocumentUrl(content.artifactId);
+}
+export function contentEditTarget(content) {
+    return content.kind === "route" ? applicationTarget(content.url) : htmlTarget(content.artifactId);
+}
+export function getLinkedFrameIds(frames, activeId) {
+    const active = frames.find((frame) => frame.id === activeId);
+    if (active?.content.kind !== "route")
+        return [];
+    const route = applicationTarget(active.content.url).route;
+    const matching = frames.filter((frame) => frame.content.kind === "route"
+        && applicationTarget(frame.content.url).route === route);
+    return matching.length > 1 ? matching.map((frame) => frame.id) : [];
+}
+export function isFrameContent(value, origin) {
+    if (!value || typeof value !== "object")
+        return false;
+    const content = value;
+    const url = content.kind === "route" ? content.url : content.sourceUrl;
+    if (typeof url !== "string")
+        return false;
+    try {
+        if (new URL(url).origin !== origin)
+            return false;
+    }
+    catch {
+        return false;
+    }
+    if (content.kind === "iteration")
+        return typeof content.artifactId === "string" && /^[a-f0-9-]{36}$/i.test(content.artifactId);
+    return content.kind === "route" && content.navigationUrl === undefined;
+}

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

@@ -2,7 +2,7 @@ import type { ComponentOverride } from "../componentSemantics/types.js";
 import type { RenderedInstanceOverride } from "../changes/editModel.js";
 import type { NudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import type { SpacingDescriptor } from "../overlay/spacingGestures.js";
-export declare const PROTOCOL_VERSION = 20;
+export declare const PROTOCOL_VERSION = 21;
 export interface FrameMessage {
     type: string;
     protocolVersion: number;
@@ -130,8 +130,12 @@ export interface ElementHoverMessage extends RendererMessage {
         x: number;
         y: number;
     } | null;
-    /** The padding or layout gap under the pointer, when one is draggable. */
+    /** The spacing handle under the pointer. Drives the resize cursor and drag
+     * start; only present when the pointer is inside the handle hit area. */
     spacing?: SpacingDescriptor | null;
+    /** The padding bar or layout gap area under the pointer, regardless of the
+     * handle. Drives the hover fill overlay across the whole area. */
+    hoverSpacing?: SpacingDescriptor | null;
 }
 /** Modifier state stays inside one renderer frame; the parent never infers it
  * from its own keyboard events because focus lives in the iframe. */
@@ -235,7 +239,7 @@ export interface InspectorToggleRequestMessage extends RendererMessage {
 export interface InspectorOpenRequestMessage extends RendererMessage {
     type: "inspector-open-request";
 }
-export type KeyboardShortcutCode = "Backslash" | "KeyI" | "KeyV" | "KeyH" | "KeyP" | "KeyS";
+export type KeyboardShortcutCode = "Backslash" | "KeyI" | "KeyV" | "KeyC" | "KeyP" | "KeyS";
 export type KeyboardShortcutPhase = "keydown" | "keyup";
 /** Forwards controller-owned keyboard shortcuts from an iframe document. */
 export interface KeyboardShortcutMessage extends RendererMessage {
@@ -274,6 +278,8 @@ export interface MeasureModifierMessage extends RendererMessage {
 export interface BoardGestureStateMessage extends RendererMessage {
     type: "board-gesture-state";
     enabled: boolean;
+    /** Ordinary wheel gestures pan the board instead of scrolling the app. */
+    panScroll?: boolean;
 }
 /** Proxies modified wheel gestures that originate inside an iframe card. */
 export interface ZoomMessage extends RendererMessage {
@@ -284,7 +290,18 @@ export interface ZoomMessage extends RendererMessage {
         y: number;
     };
 }
-export type FrameProtocolMessage = ParentReadyMessage | RendererHelloMessage | FrameReadyMessage | FrameRuntimeMessage | FrameMetadataMessage | FrameLoadError | ReplaceStylesMessage | ProjectionAppliedMessage | StructuralProjectionReportMessage | RenderedInstanceProjectionReportMessage | TextProjectionReportMessage | NavigationIntentMessage | LinkTargetStateMessage | ElementHoverMessage | ElementMeasureStateMessage | ElementClickMessage | InlineTextIntentMessage | ElementDeselectMessage | ElementDragStartMessage | ElementDragMoveMessage | ElementDragEndMessage | ElementDeleteMessage | ElementNudgeMessage | HistoryRequestMessage | InspectorToggleRequestMessage | InspectorOpenRequestMessage | KeyboardShortcutMessage | PanStartMessage | PanMoveMessage | PanEndMessage | PanModifierMessage | MeasureModifierMessage | BoardGestureStateMessage | ZoomMessage;
+/** Proxies ordinary wheel gestures as normalized pixel distances. */
+export interface WheelPanMessage extends RendererMessage {
+    type: "wheel-pan";
+    deltaX: number;
+    deltaY: number;
+}
+/** Keeps the A key state synchronized when keyboard focus moves into an iframe. */
+export interface AppInteractionModifierMessage extends RendererMessage {
+    type: "app-interaction-modifier";
+    held: boolean;
+}
+export type FrameProtocolMessage = ParentReadyMessage | RendererHelloMessage | FrameReadyMessage | FrameRuntimeMessage | FrameMetadataMessage | FrameLoadError | ReplaceStylesMessage | ProjectionAppliedMessage | StructuralProjectionReportMessage | RenderedInstanceProjectionReportMessage | TextProjectionReportMessage | NavigationIntentMessage | LinkTargetStateMessage | ElementHoverMessage | ElementMeasureStateMessage | ElementClickMessage | InlineTextIntentMessage | ElementDeselectMessage | ElementDragStartMessage | ElementDragMoveMessage | ElementDragEndMessage | ElementDeleteMessage | ElementNudgeMessage | HistoryRequestMessage | InspectorToggleRequestMessage | InspectorOpenRequestMessage | KeyboardShortcutMessage | PanStartMessage | PanMoveMessage | PanEndMessage | PanModifierMessage | MeasureModifierMessage | BoardGestureStateMessage | ZoomMessage | WheelPanMessage | AppInteractionModifierMessage;
 export declare function setRendererIdentity(identity: FrameIdentity): void;
 export declare function clearRendererIdentity(expected?: FrameIdentity): void;
 export declare function getRendererIdentity(): FrameIdentity | null;

package/dist/inspector/canvas/frameProtocol.js

@@ -1,6 +1,7 @@
 import { isDocumentProjectionReport } from "../projection/renderedInstance.js";
 import { isTextProjectionReport } from "../projection/textProjection.js";
 import { isStructuralProjectionReport } from "../projection/structuralProjectionBoundary.js";
+// v21 adds the Comment tool cursor and C shortcut.
 // v20 adds Shift state to element drag messages so spacing handles can snap
 // changes to 8px increments.
 // v19 adds spacing drag gestures (hover point, spacing descriptor, start
@@ -17,7 +18,7 @@ import { isStructuralProjectionReport } from "../projection/structuralProjection
 // rereading a Canvas iframe until the renderer has applied its revision. v11
 // added the renderer-hello handshake solicitation for runtimes whose boot
 // completes after the controller's load-time parent-ready.
-export const PROTOCOL_VERSION = 20;
+export const PROTOCOL_VERSION = 21;
 let rendererIdentity = null;
 export function setRendererIdentity(identity) {
     rendererIdentity = identity;
@@ -40,9 +41,8 @@ export function isRendererMessageFor(value, identity) {
 }
 export function isKeyboardShortcutCode(value) {
     return value === "Backslash"
-        || value === "KeyI"
         || value === "KeyV"
-        || value === "KeyH"
+        || value === "KeyC"
         || value === "KeyP"
         || value === "KeyS";
 }

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

@@ -1,4 +1,6 @@
 /** `select` leaves the application interactive; `design` turns clicks into inspector selection. */
-export type CanvasInteractionTool = "select" | "design" | "pan" | "sketch";
+export type CanvasInteractionTool = "select" | "design" | "comment" | "sketch";
+/** Physical key used to temporarily interact with the app in the canvas. */
+export declare const APP_INTERACTION_KEY = "KeyA";
 export declare function canvasToolForCode(code: string): CanvasInteractionTool | null;
 export declare function canvasToolForEvent(event: KeyboardEvent): CanvasInteractionTool | null;

package/dist/inspector/canvas/keyboardShortcuts.js

@@ -1,10 +1,10 @@
+/** Physical key used to temporarily interact with the app in the canvas. */
+export const APP_INTERACTION_KEY = "KeyA";
 export function canvasToolForCode(code) {
-    if (code === "KeyI")
-        return "select";
     if (code === "KeyV")
         return "design";
-    if (code === "KeyH")
-        return "pan";
+    if (code === "KeyC")
+        return "comment";
     if (code === "KeyP")
         return "sketch";
     return null;

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

@@ -0,0 +1,52 @@
+export interface LayoutCard {
+    readonly id: string;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface Bounds {
+    readonly minX: number;
+    readonly minY: number;
+    readonly maxX: number;
+    readonly maxY: number;
+}
+/** The layout fields a creation may change on existing frames. */
+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 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 fitCamera(bounds: Bounds, viewport: {
+    width: number;
+    height: number;
+}, padding: number): {
+    x: number;
+    y: number;
+    zoom: number;
+} | null;
+export declare function centerCamera(bounds: Bounds, zoom: number, viewport: {
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+    zoom: number;
+};
+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

@@ -0,0 +1,106 @@
+import { MAX_CAMERA_ZOOM, MIN_CAMERA_ZOOM } from "./viewStore.js";
+export function boundsOf(cards) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const card of cards) {
+        minX = Math.min(minX, card.x);
+        minY = Math.min(minY, card.y);
+        maxX = Math.max(maxX, card.x + card.width);
+        maxY = Math.max(maxY, card.y + card.height);
+    }
+    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 };
+    return { x: Math.max(...cards.map((card) => card.x + card.width + gap)), y: cards[0].y };
+}
+export function pushOverlappingCards(cards, protectedIds, gap) {
+    const fixed = cards.filter((card) => protectedIds.has(card.id)).map((card) => boundsOf([card]));
+    const moving = cards.filter((card) => !protectedIds.has(card.id)).sort((a, b) => a.x - b.x);
+    const shifts = new Map();
+    for (const card of moving) {
+        let bounds = boundsOf([card]);
+        let dx = 0;
+        let collision = true;
+        while (collision) {
+            collision = false;
+            for (const other of fixed) {
+                if (bounds.minY >= other.maxY || bounds.maxY <= other.minY
+                    || bounds.minX >= other.maxX + gap || bounds.maxX + gap <= other.minX)
+                    continue;
+                const shift = other.maxX + gap - bounds.minX;
+                dx += shift;
+                bounds = { ...bounds, minX: bounds.minX + shift, maxX: bounds.maxX + shift };
+                collision = true;
+            }
+        }
+        if (dx)
+            shifts.set(card.id, dx);
+        fixed.push(bounds);
+    }
+    return shifts.size ? cards.map((card) => shifts.has(card.id) ? { ...card, x: card.x + shifts.get(card.id) } : card) : [...cards];
+}
+export function iterationPosition(cards, source, gap) {
+    const x = source.x;
+    let y = source.y + source.height + gap * 2;
+    for (const neighbor of [...cards].sort((a, b) => a.y - b.y)) {
+        if (x >= neighbor.x + neighbor.width + gap || x + source.width + gap <= neighbor.x)
+            continue;
+        if (y < neighbor.y + neighbor.height + gap * 2 && y + source.height + gap * 2 > neighbor.y)
+            y = neighbor.y + neighbor.height + gap * 2;
+    }
+    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;
+    if (width <= 0 || height <= 0)
+        return null;
+    const zoom = Math.max(MIN_CAMERA_ZOOM, Math.min(Math.max(1, viewport.width - padding * 2) / width, Math.max(1, viewport.height - padding * 2) / height, MAX_CAMERA_ZOOM));
+    return centerCamera(bounds, zoom, viewport);
+}
+export function centerCamera(bounds, zoom, viewport) {
+    return {
+        x: -((bounds.minX + bounds.maxX) / 2) * zoom + viewport.width / 2,
+        y: -((bounds.minY + bounds.maxY) / 2) * zoom + viewport.height / 2,
+        zoom,
+    };
+}
+export function layoutShifts(before, after) {
+    const previous = new Map(before.map((card) => [card.id, card]));
+    return after.flatMap((card) => {
+        const old = previous.get(card.id);
+        if (!old || (old.x === card.x && old.y === card.y))
+            return [];
+        return [{ id: card.id, from: { x: old.x, y: old.y }, to: { x: card.x, y: card.y } }];
+    });
+}
+/** Replays recorded shifts as deltas, so frames moved since the creation keep their later moves. */
+export function applyLayoutShifts(cards, shifts, forward) {
+    const byId = new Map(shifts.map((shift) => [shift.id, shift]));
+    return cards.map((card) => {
+        const shift = byId.get(card.id);
+        if (!shift)
+            return card;
+        const from = forward ? shift.from : shift.to;
+        const to = forward ? shift.to : shift.from;
+        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()) {
+        if (!ids.has(added.id))
+            continue;
+        const preceding = recorded.slice(0, index).reverse().find((card) => next.some((item) => item.id === card.id));
+        const insertion = preceding ? next.findIndex((card) => card.id === preceding.id) + 1 : 0;
+        next = [...next.slice(0, insertion), { ...added }, ...next.slice(insertion)];
+    }
+    return next;
+}

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

@@ -1,9 +1,15 @@
-import { type WorkspaceContents } from "../changes/workspaceChanges.js";
+import { type DraftContents } from "../changes/draftChanges.js";
 import type { CanvasCard } from "./canvasStore.js";
 import { type PreviewDocument } from "../changes/previewDiagnostics.js";
-import { type CompiledManagedStyles } from "../projection/workspaceProjection.js";
+import { type CompiledManagedStyles, type DraftProjectionPlan } from "../projection/draftProjection.js";
 export declare const PROJECT_ID: string;
-export declare const WORKSPACE_ID: `${string}-${string}-${string}-${string}-${string}`;
+export declare const WORKSPACE_ID: string;
+export interface FrameProjection extends DraftProjectionPlan<CompiledManagedStyles> {
+    readonly draftId: string;
+    readonly draftRevision: number;
+    readonly revision: number;
+    readonly css: string;
+}
 export interface CanvasProjectionStatus {
     sentRevision: number;
     appliedRevision: number;
@@ -22,10 +28,14 @@ export declare function computeProjection(): {
     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;
+export declare function getCanvasCardIdForDocument(doc: Document): string | null;
 export declare function resetProjectionRevision(): void;
-export declare function sendProjectionToCard(card: CanvasCard, iframe: HTMLIFrameElement): 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 projectWorkspaceSnapshotToDocument(doc: Document, snapshot: WorkspaceContents): Promise<number | null>;
+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. */

package/dist/inspector/canvas/projection.js

@@ -1,18 +1,25 @@
-import { getWorkspaceChanges } from "../changes/workspaceChanges.js";
-import { getCanvasMode } from "./canvasStore.js";
+import { draftIdForCard } from "../drafts/store.js";
+import { getDraftChanges, getActiveDraftChanges } from "../changes/draftChanges.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 { clearCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
 import { invalidatePreviewDocumentSession, startPreviewDocumentSession, } from "../changes/previewDiagnostics.js";
-import { compileWorkspaceProjection, } from "../projection/workspaceProjection.js";
+import { compileDraftProjection, } from "../projection/draftProjection.js";
 import { isOriginalPreviewActive } from "../shell/originalPreview.js";
 import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
-export const PROJECT_ID = window.location.origin;
-export const WORKSPACE_ID = crypto.randomUUID?.() ?? `ws-${Date.now()}`;
+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()}`;
 let revision = 0;
 let lastRulesKey = null;
 let lastPeekActive = false;
+const draftPlans = new Map();
 const frameProjectionStates = new Map();
 const previewDocuments = new Map();
 const projectionAcknowledgementListeners = new Set();
@@ -22,6 +29,7 @@ function createPreviewDocumentIdentity(cardId) {
     const previewDocument = {
         logicalDocument: `canvas:${cardId}`,
         sessionId: `canvas-session-${nextPreviewSessionId++}`,
+        draftId: draftIdForCard(cardId) ?? getActiveDraftChanges().draftId,
     };
     previewDocuments.set(cardId, previewDocument);
     return previewDocument;
@@ -50,7 +58,7 @@ function projectionKey(plan) {
     return `${plan.managedStyles.css}\u0000${JSON.stringify(plan.instanceOverrides)}\u0000${JSON.stringify(plan.structuralChanges)}\u0000${JSON.stringify(plan.textContentChanges)}\u0000${JSON.stringify(plan.componentOverrides)}`;
 }
 export function computeProjection() {
-    const plan = compileWorkspaceProjection(getWorkspaceChanges());
+    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.
@@ -84,14 +92,53 @@ export function computeProjection() {
     }
     return { ...plan, css: plan.managedStyles.css, revision };
 }
+export function computeProjectionForCard(cardId) {
+    const draftId = draftIdForCard(cardId);
+    const workspace = draftId ? getDraftChanges(draftId) : getActiveDraftChanges();
+    const peek = isOriginalPreviewActive();
+    const cached = draftPlans.get(workspace.draftId);
+    if (cached && cached.plan.draftRevision === workspace.revision && cached.peek === peek)
+        return cached.plan;
+    const source = peek ? { ...workspace, changes: [], structuralChanges: [] } : workspace;
+    const compiled = compileDraftProjection(source);
+    const plan = { ...compiled, draftId: workspace.draftId, draftRevision: workspace.revision, css: compiled.managedStyles.css, revision: ++revision };
+    draftPlans.set(workspace.draftId, { peek, plan });
+    return plan;
+}
+export function getCanonicalFrameProjection(cardId, expectedRevision) {
+    const state = frameProjectionStates.get(cardId);
+    const plan = state?.canonicalProjection;
+    const draftId = draftIdForCard(cardId);
+    const draft = draftId ? getDraftChanges(draftId) : null;
+    if (!state || !previewDocuments.has(cardId) || state.iframe.contentDocument !== state.document
+        || !plan || plan.revision !== expectedRevision || state.sentRevision !== expectedRevision
+        || (draft && (draft.draftId !== plan.draftId || draft.revision !== plan.draftRevision)))
+        return null;
+    return plan;
+}
+export 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);
+}
+export function getCanvasCardIdForDocument(doc) {
+    for (const [id, state] of frameProjectionStates)
+        if (state.document === doc && state.iframe.contentDocument === doc)
+            return id;
+    return null;
+}
 export function resetProjectionRevision() {
     revision = 0;
     lastRulesKey = null;
     lastPeekActive = false;
+    draftPlans.clear();
     for (const state of frameProjectionStates.values()) {
         state.sentRevision = -1;
         state.appliedRevision = -1;
         state.canonicalSentRevision = -1;
+        state.canonicalProjection = null;
     }
     projectionAcknowledgementVersion += 1;
     notifyProjectionAcknowledgementListeners();
@@ -100,7 +147,15 @@ export function sendProjectionToCard(card, iframe) {
     const win = iframe.contentWindow;
     if (!win)
         return;
-    const { css, revision: rev, instanceOverrides, structuralChanges, textContentChanges, componentOverrides } = computeProjection();
+    let plan = computeProjectionForCard(card.id);
+    const state = frameProjectionStates.get(card.id);
+    if (state && plan.revision < state.sentRevision) {
+        plan = { ...plan, revision: ++revision };
+        draftPlans.set(plan.draftId, { peek: isOriginalPreviewActive(), plan });
+    }
+    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);
 }
 function sendProjectionMessage(cardId, iframe, rev, css, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, canonical = false) {
@@ -124,12 +179,12 @@ function sendProjectionMessage(cardId, iframe, rev, css, instanceOverrides, stru
     win.postMessage(msg, window.location.origin);
 }
 /** Temporarily projects a snapshot through the renderer that owns the document. */
-export async function projectWorkspaceSnapshotToDocument(doc, snapshot) {
+export async function projectDraftToDocument(doc, snapshot) {
     const entry = [...frameProjectionStates.entries()].find(([, state]) => state.document === doc);
     if (!entry)
         return null;
     const [cardId, state] = entry;
-    const plan = compileWorkspaceProjection({ ...snapshot, revision: 0 });
+    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)
@@ -203,6 +258,8 @@ export function registerCardFrame(cardId, iframe) {
     const existing = frameProjectionStates.get(cardId);
     if (!existing || existing.iframe !== iframe || existing.document !== frameDocument) {
         if (existing) {
+            if (existing.canonicalProjection)
+                draftPlans.delete(existing.canonicalProjection.draftId);
             invalidatePreviewDocumentSession(existing.previewDocument.logicalDocument, existing.previewDocument.sessionId);
             previewDocuments.delete(cardId);
         }
@@ -215,6 +272,7 @@ export function registerCardFrame(cardId, iframe) {
             sentRevision: -1,
             appliedRevision: -1,
             canonicalSentRevision: -1,
+            canonicalProjection: null,
         });
     }
     else {
@@ -318,8 +376,6 @@ function notifyFrameRegistryListeners() {
 export function projectToAllReadyCards() {
     if (getCanvasMode() !== "canvas")
         return;
-    const { css, revision: rev, instanceOverrides, structuralChanges, textContentChanges, componentOverrides } = computeProjection();
-    for (const [cardId, iframe] of frameRegistry) {
-        sendProjectionMessage(cardId, iframe, rev, css, instanceOverrides, structuralChanges, textContentChanges, componentOverrides, true);
-    }
+    for (const [id, iframe] of frameRegistry)
+        sendProjectionToCard({ id }, iframe);
 }

package/dist/inspector/canvas/rendererBootstrap.js

@@ -1,10 +1,12 @@
 import { PROTOCOL_VERSION, clearRendererIdentity, getRendererIdentity, isRendererMessageFor, sendToParent, setRendererIdentity, } from "./frameProtocol.js";
+import { wheelPanDelta } from "./wheelPan.js";
 import { handleReplaceStyles, startRendererProjectionDiagnostics } from "./rendererStylesheet.js";
 import { findClosestAnchor, isEligibleNavigation, hasDifferentRoute } from "./linkEligibility.js";
 import { installRendererElementSelector } from "./rendererElementSelector.js";
 import { createFrameThrottle } from "../overlay/frameThrottle.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
 import { getNudgeUiRuntimeConfig, subscribeNudgeUiRuntime } from "../runtime/runtimeConfig.js";
+import { APP_INTERACTION_KEY } from "./keyboardShortcuts.js";
 let activeRendererBootstrap = null;
 function ownsRendererBootstrap(owner) {
     return owner.active && activeRendererBootstrap?.owner === owner;
@@ -252,6 +254,8 @@ function installRendererPanProxy(owner) {
     let spaceHeld = false;
     let panning = false;
     let boardGesturesEnabled = false;
+    let boardScrollPans = false;
+    let nativeAppInteraction = false;
     const panMoveUpdate = createFrameThrottle((point) => {
         if (!ownsRendererBootstrap(owner))
             return;
@@ -298,7 +302,9 @@ function installRendererPanProxy(owner) {
         }
         if (event.data.type === "board-gesture-state") {
             boardGesturesEnabled = event.data.enabled;
-            if (!boardGesturesEnabled) {
+            boardScrollPans = event.data.panScroll === true;
+            nativeAppInteraction = event.data.panScroll === false;
+            if (!boardGesturesEnabled || nativeAppInteraction) {
                 spaceHeld = false;
                 endPan();
             }
@@ -306,10 +312,18 @@ function installRendererPanProxy(owner) {
     };
     window.addEventListener("message", onMessage);
     owner.listenerRemovers.push(() => window.removeEventListener("message", onMessage));
+    function sendAppInteractionModifier(held) {
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        sendToParent({ type: "app-interaction-modifier", protocolVersion: PROTOCOL_VERSION, held, ...identity });
+    }
     const onKeyDown = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
-        if (boardGesturesEnabled && event.code === "Space" && !event.repeat && !isEditableTarget(event.target)) {
+        if (event.code === APP_INTERACTION_KEY && !event.repeat && !isEditableTarget(event.target))
+            sendAppInteractionModifier(true);
+        if (boardGesturesEnabled && !nativeAppInteraction && event.code === "Space" && !event.repeat && !isEditableTarget(event.target)) {
             spaceHeld = true;
             if (getRendererIdentity())
                 event.preventDefault();
@@ -321,6 +335,8 @@ function installRendererPanProxy(owner) {
     const onKeyUp = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
+        if (event.code === APP_INTERACTION_KEY)
+            sendAppInteractionModifier(false);
         if (event.code === "Space") {
             spaceHeld = false;
             sendSpaceState();
@@ -355,7 +371,7 @@ function installRendererPanProxy(owner) {
     const onPointerDown = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
-        if (!boardGesturesEnabled || !spaceHeld || event.button !== 0 || isEditableTarget(event.target))
+        if (!boardGesturesEnabled || nativeAppInteraction || !spaceHeld || event.button !== 0 || isEditableTarget(event.target))
             return;
         const identity = getRendererIdentity();
         if (!identity)
@@ -392,6 +408,8 @@ function installRendererPanProxy(owner) {
     const onBlur = () => {
         if (!ownsRendererBootstrap(owner))
             return;
+        if (!window.parent.document.hasFocus())
+            sendAppInteractionModifier(false);
         spaceHeld = false;
         sendSpaceState();
         endPan();
@@ -401,13 +419,23 @@ function installRendererPanProxy(owner) {
     const onWheel = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
-        if (!boardGesturesEnabled || (!event.ctrlKey && !event.metaKey))
+        const zoom = event.ctrlKey || event.metaKey;
+        if (!boardGesturesEnabled || (!zoom && !boardScrollPans))
             return;
         const identity = getRendererIdentity();
         if (!identity)
             return;
         event.preventDefault();
         event.stopPropagation();
+        if (!zoom) {
+            const delta = wheelPanDelta(event, { width: window.innerWidth, height: window.innerHeight });
+            const message = {
+                type: "wheel-pan", protocolVersion: PROTOCOL_VERSION,
+                deltaX: delta.x, deltaY: delta.y, ...identity,
+            };
+            sendToParent(message);
+            return;
+        }
         const message = {
             type: "zoom",
             protocolVersion: PROTOCOL_VERSION,