nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/canvas/CanvasWorkspace.js

@@ -2,32 +2,35 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { getCanonicalFrameProjection } from "./projection.js";
 import { getDraftForCard } from "../drafts/store.js";
 import { iterationId, contentSourceUrl, getLinkedFrameIds } from "./frameContent.js";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { IconCornerLeftUp } from "@tabler/icons-react";
 import { useCanvasCards, activateIframeWorkspace, getSelectedCardId, getFocusedCardId, getCanvasCards, batchCanvasChanges, fitAllCards, focusCanvasCards, focusCard, useSelectedCardId, useFocusedCardId, resizeCard, setCardPosition, updateCardTitle, addCanvasCard, selectCard, deselectCard, CARD_GAP, updateCardUrl, } from "./canvasStore.js";
 import { setBoardCamera, getBoardCamera, setCanvasPresentation, hasFitAllRan, useBoardCamera, useCanvasPresentation, useCanvasPresentationTransitioning, useCanvasLayoutTransitioning, useTemporaryAppInteraction, setTemporaryAppInteraction, } from "./viewStore.js";
 import { CanvasCard } from "./CanvasCard.js";
+import { PageCard } from "./PageCard.js";
+import { isPageSurface } from "./pageSurface.js";
+import { canvasFrameHost } from "./canvasFrame.js";
 import { useCanvasLayoutAnimation } from "./useCanvasLayoutAnimation.js";
 import { Button } from "../ui/Button.js";
 import { useCanvasMode } from "./viewStore.js";
-import { subscribeChanges } from "../changes/changesLog.js";
+import { getActiveDraftChanges, getChangesList, subscribeActiveDraftChanges } from "../drafts/store.js";
 import { subscribeOriginalPreview, isOriginalPreviewActive } from "../shell/originalPreview.js";
 import { recordCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
 import { recordCanvasRenderedInstanceProjectionReports } from "../projection/renderedInstance.js";
 import { recordCanvasTextProjectionReports } from "../projection/textProjection.js";
-import { getChangesList, isPreviewableChange } from "../changes/changesLog.js";
+import { isPreviewableChange } from "../changes/types.js";
 import { changeKey } from "../changes/model.js";
-import { getActiveDraftChanges } from "../changes/draftChanges.js";
 import { beginPreviewAttempt, publishPreviewDiagnostic } from "../changes/previewDiagnostics.js";
 import { verifyManagedStyleProjection } from "../changes/managedStyleProjection.js";
-import { getCanvasPreviewDocument, getRegisteredFrames, isCanvasCanonicalProjectionRevisionCurrent, PROJECT_ID, projectToAllReadyCards, recordCanvasProjectionApplied, WORKSPACE_ID, } from "./projection.js";
+import { getCanvasPreviewDocument, getRegisteredFrames, isCanvasCanonicalProjectionRevisionCurrent, projectToAllReadyCards, recordCanvasProjectionApplied, getFrameRegistryVersion, subscribeFrameRegistry, } from "./projection.js";
+import { connectFrame, toViewportPoint } from "./frameConnection.js";
 import { normalizeUrl, normalizedUrlKey } from "./normalizeUrl.js";
 import { createNudgeUiEditorUrl } from "../../transport/editor.js";
 import { disposeInlineTextEdit } from "../inline-text/inlineTextEditor.js";
-import { PROTOCOL_VERSION, isProjectionAppliedMessage, isKeyboardShortcutMessage, isRenderedInstanceProjectionReportMessage, isTextProjectionReportMessage, isStructuralProjectionReportMessage, } from "./frameProtocol.js";
+import { isProjectionAppliedMessage, isKeyboardShortcutMessage, isRenderedInstanceProjectionReportMessage, isTextProjectionReportMessage, isStructuralProjectionReportMessage, } from "./frameProtocol.js";
 import { wheelPanDelta } from "./wheelPan.js";
-import { iframePointToClientPoint, zoomCameraAtPointer } from "./canvasGestures.js";
-const canvasWorkspaceStyles = ".canvas-workspace {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--surface-panel);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: var(--surface-panel);\n}\n\n.canvas-workspace__focus-action {\n  position: absolute;\n  top: max(12px, env(safe-area-inset-top));\n  left: max(12px, env(safe-area-inset-left));\n  z-index: calc(var(--z-index) - 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board.is-grabbable {\n  cursor: grab;\n}\n\n.canvas-workspace__board.is-grabbing {\n  cursor: grabbing;\n}\n\n/* Canvas gestures take precedence over every card interaction while Space is\n   held. This also closes the short postMessage gap before an iframe receives\n   its mirrored modifier state. */\n.canvas-workspace__board.is-grabbable .canvas-card,\n.canvas-workspace__board.is-grabbing .canvas-card {\n  pointer-events: none;\n}\n\n.canvas-workspace__board-content {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  /*\n   * Leave `will-change` unset so the browser can re-rasterize this subtree at\n   * the current camera scale. A permanent `will-change: transform` promotes\n   * it to a fixed bitmap, which makes iframe content look soft when zoomed.\n   */\n}\n\n.canvas-workspace__board.is-grabbing .canvas-workspace__board-content {\n  /* Panning benefits from a cached composited layer; zoom restores the crisp\n   * default path as soon as the gesture ends. */\n  will-change: transform;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-workspace__board-content {\n  transition: transform 200ms ease;\n}\n\n.canvas-workspace[data-presentation=\"focus\"] .canvas-workspace__board-content {\n  inset: 0;\n  transform: none !important;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-card.is-presentation-card {\n  transition: left 200ms ease, top 200ms ease;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-card:not(.is-presentation-card) {\n  visibility: hidden !important;\n  pointer-events: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-workspace.is-presentation-transitioning .canvas-workspace__board-content,\n  .canvas-workspace.is-presentation-transitioning .canvas-card.is-presentation-card {\n    transition: none;\n  }\n}\n\n.canvas-workspace__target-error {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: #6b7280;\n  font: 500 14px/1.4 system-ui, sans-serif;\n}\n\n/* Moving iframes must not acquire hover state beneath a stationary pointer. */\n.canvas-workspace.is-presentation-transitioning .canvas-card__iframe,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__iframe {\n  pointer-events: none;\n}\n";
+import { zoomCameraAtPointer } from "./canvasGestures.js";
+const canvasWorkspaceStyles = ".canvas-workspace {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--surface-panel);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: var(--surface-panel);\n}\n\n.canvas-workspace__focus-action {\n  position: absolute;\n  top: max(12px, env(safe-area-inset-top));\n  left: max(12px, env(safe-area-inset-left));\n  z-index: calc(var(--z-index) - 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board.is-grabbable {\n  cursor: grab;\n}\n\n.canvas-workspace__board.is-grabbing {\n  cursor: grabbing;\n}\n\n/* Canvas gestures take precedence over every card interaction while Space is\n   held. This also closes the short postMessage gap before an iframe receives\n   its mirrored modifier state. */\n.canvas-workspace__board.is-grabbable .canvas-card,\n.canvas-workspace__board.is-grabbing .canvas-card {\n  pointer-events: none;\n}\n\n.canvas-workspace__board-content {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  /*\n   * Leave `will-change` unset so the browser can re-rasterize this subtree at\n   * the current camera scale. A permanent `will-change: transform` promotes\n   * it to a fixed bitmap, which makes iframe content look soft when zoomed.\n   */\n}\n\n.canvas-workspace__board.is-grabbing .canvas-workspace__board-content {\n  /* Panning benefits from a cached composited layer; zoom restores the crisp\n   * default path as soon as the gesture ends. */\n  will-change: transform;\n}\n\n.canvas-workspace[data-presentation=\"focus\"] .canvas-workspace__board-content {\n  inset: 0;\n  transform: none !important;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-card:not(.is-presentation-card) {\n  visibility: hidden !important;\n  pointer-events: none !important;\n}\n\n.canvas-workspace__target-error {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: #6b7280;\n  font: 500 14px/1.4 system-ui, sans-serif;\n}\n\n/* Moving iframes must not acquire hover state beneath a stationary pointer. */\n.canvas-workspace.is-presentation-transitioning .canvas-card__iframe,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__iframe {\n  pointer-events: none;\n}\n\n/* The page surface edits the live page under the workspace, so only the\n   toolbar takes pointer input. */\n.canvas-workspace[data-surface=\"page\"],\n.canvas-workspace[data-surface=\"page\"] .canvas-workspace__board {\n  background: transparent;\n  pointer-events: none;\n}\n\n.canvas-workspace[data-surface=\"page\"] .canvas-toolbar {\n  pointer-events: auto;\n}\n";
 const canvasCardStyles = ".canvas-card {\n  position: relative;\n}\n\n/* Extend the card's hover region to the toolbar above the iframe. */\n.canvas-card::before {\n  content: \"\";\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  left: 0;\n  height: calc((var(--control-height-large) + var(--space-16)) * var(--canvas-toolbar-scale, 1));\n  pointer-events: auto;\n}\n\n.canvas-card__frame {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--surface-panel);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.canvas-card.is-selected .canvas-card__frame {\n  outline: 2px solid var(--frame-accent, var(--accent));\n  outline-offset: -2px;\n}\n\n.canvas-card.is-focus-presentation .canvas-card__frame {\n  outline: none;\n}\n\n.canvas-card.is-focused.is-selected:not(.is-linked) .canvas-card__frame {\n  animation: canvas-card-focus 900ms ease-out;\n}\n\n@keyframes canvas-card-focus {\n  0%, 35% { outline: 3px solid var(--frame-accent, var(--accent)); outline-offset: -3px; }\n  100% { outline: 0 solid transparent; outline-offset: -2px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-card.is-focused .canvas-card__frame {\n    animation: none;\n  }\n}\n\n.canvas-card__header {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: calc(100% + var(--space-8));\n  justify-content: flex-end;\n  z-index: 3;\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.canvas-card__drag-surface {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  flex: 0 1 auto;\n  margin-right: auto;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 0;\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n}\n\n.canvas-card.is-dragging .canvas-card__drag-surface {\n  cursor: grabbing;\n}\n\n.canvas-card__identity {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.canvas-card__dimensions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  position: relative;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 260px;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n\n.canvas-card__title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.canvas-card__live-badge,\n.canvas-card__iteration-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 20px;\n  height: 20px;\n  background: var(--accent-surface);\n  color: var(--accent);\n  border-radius: var(--radius-4);\n  pointer-events: auto;\n}\n\n.canvas-card__floating-toolbar {\n  position: absolute;\n  left: 50%;\n  flex-shrink: 0;\n  width: max-content;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transform: translate(-50%, calc(-24px + var(--space-4)));\n  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 140ms;\n}\n\n.canvas-card:hover .canvas-card__floating-toolbar,\n.canvas-card:focus-within .canvas-card__floating-toolbar,\n.canvas-card__floating-toolbar[data-busy=\"true\"] {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transform: translate(-50%, -24px);\n}\n\n.canvas-card__actions.canvas-toolbar {\n  position: static;\n  width: max-content;\n  transform: none;\n  white-space: nowrap;\n}\n\n.canvas-card__actions .canvas-toolbar__divider {\n  margin-inline: 0;\n}\n\n@media (hover: none) {\n  .canvas-card.is-selected .canvas-card__floating-toolbar {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: translate(-50%, -24px);\n  }\n}\n\n.canvas-card.is-dragging .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-grabbable .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-grabbing .canvas-card__floating-toolbar,\n.canvas-workspace.is-presentation-transitioning .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__floating-toolbar {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-card__floating-toolbar { transition: none; }\n}\n\n.canvas-card__iteration-error {\n  position: absolute;\n  right: 0;\n  bottom: calc(100% + var(--space-8));\n  color: var(--text-danger, #b42318);\n  font-size: 12px;\n  white-space: nowrap;\n}\n\n.canvas-card__iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\n}\n\n.canvas-card__sketch-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: block;\n  pointer-events: none;\n}\n\n.canvas-card__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  height: 100%;\n  padding: 20px;\n  text-align: center;\n}\n\n.canvas-card__error p {\n  margin: 0;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.canvas-card__resize-handle {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: 4px;\n  color: var(--text-muted, #777777);\n  opacity: 0;\n  transition: opacity 150ms ease;\n  touch-action: none;\n  user-select: none;\n}\n\n.canvas-card__resize-handle--top,\n.canvas-card__resize-handle--bottom {\n  right: 16px;\n  left: 16px;\n  height: 16px;\n  cursor: ns-resize;\n}\n\n.canvas-card__resize-handle--top {\n  top: 0;\n}\n\n.canvas-card__resize-handle--bottom {\n  bottom: 0;\n}\n\n.canvas-card__resize-handle--left,\n.canvas-card__resize-handle--right {\n  top: 16px;\n  bottom: 16px;\n  width: 16px;\n  cursor: ew-resize;\n}\n\n.canvas-card__resize-handle--left {\n  left: 0;\n}\n\n.canvas-card__resize-handle--right {\n  right: 0;\n}\n\n.canvas-card__resize-handle--top-left,\n.canvas-card__resize-handle--top-right,\n.canvas-card__resize-handle--bottom-right,\n.canvas-card__resize-handle--bottom-left {\n  z-index: 4;\n  width: 24px;\n  height: 24px;\n  cursor: nwse-resize;\n}\n\n.canvas-card__resize-handle--top-left {\n  top: 0;\n  left: 0;\n}\n\n.canvas-card__resize-handle--top-right {\n  top: 0;\n  right: 0;\n  cursor: nesw-resize;\n}\n\n.canvas-card__resize-handle--bottom-right {\n  right: 0;\n  bottom: 0;\n}\n\n.canvas-card__resize-handle--bottom-left {\n  bottom: 0;\n  left: 0;\n  cursor: nesw-resize;\n}\n\n.canvas-card:hover .canvas-card__resize-handle,\n.canvas-card:focus-within .canvas-card__resize-handle {\n  opacity: 1;\n}\n\n.canvas-card__resize-handle:hover {\n  color: var(--accent);\n}\n\n.canvas-card__resize-handle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n.canvas-card.is-linked {\n  --frame-accent: #a855f7;\n}\n\n.canvas-card.is-linked:not(.is-focus-presentation) .canvas-card__frame {\n  outline: 2px solid var(--frame-accent);\n  outline-offset: -2px;\n}\n\n.canvas-card__iteration-badge {\n  color: var(--text-secondary);\n  background: var(--surface-raised-2x);\n}\n";
 const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
 import { useInspectorOpen } from "../shell/openStore.js";
@@ -39,7 +42,8 @@ import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
 import { adjacentCanvasZoomLevel, CanvasToolbar, } from "./CanvasToolbar.js";
 import { APP_INTERACTION_KEY, canvasToolForEvent, canvasToolForCode } from "./keyboardShortcuts.js";
-const canvasToolbarStyles = ".canvas-toolbar {\n  position: absolute;\n  left: 50%;\n  bottom: var(--space-20);\n  /* Keep the persistent controls above the live sketch surface. The sketch\n     toolbar gets the next layer so both toolbars remain available together. */\n  z-index: calc(var(--z-index) - 2);\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  transform: translateX(-50%);\n  pointer-events: auto;\n}\n\n/* The live sketch surface is a separate stacking context. Keep a copy of the\n   toolbar at the root layer while sketching so pointer events reach the\n   controls instead of the full-screen SVG drawing surface. */\n.canvas-toolbar__portal {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n}\n\n.canvas-toolbar__portal > .canvas-toolbar {\n  pointer-events: auto;\n}\n\n.canvas-toolbar__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n.canvas-toolbar__divider {\n  flex-shrink: 0;\n  width: 1px;\n  height: var(--control-height-small);\n  margin-inline: 0;\n  background: var(--border-subtle);\n}\n\n.canvas-toolbar__tool[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n";
+const canvasToolbarStyles = ".canvas-toolbar {\n  position: absolute;\n  left: 50%;\n  bottom: var(--space-20);\n  /* Keep the persistent controls above the live sketch surface. The sketch\n     toolbar gets the next layer so both toolbars remain available together. */\n  z-index: calc(var(--z-index) - 2);\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  transform: translateX(-50%);\n  pointer-events: auto;\n}\n\n/* The live sketch surface is a separate stacking context. Keep a copy of the\n   toolbar at the root layer while sketching so pointer events reach the\n   controls instead of the full-screen SVG drawing surface. */\n.canvas-toolbar__portal {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n}\n\n.canvas-toolbar__portal > .canvas-toolbar {\n  pointer-events: auto;\n}\n\n.canvas-toolbar__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n.canvas-toolbar__divider {\n  flex-shrink: 0;\n  width: 1px;\n  height: var(--control-height-small);\n  margin-inline: 0;\n  background: var(--border-subtle);\n}\n\n.canvas-toolbar__tool[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n/* Tool options slide out beside their tool. The component sets an explicit\n   pixel width (0 or the content's natural width) so the toolbar grows smoothly. */\n.tool-options {\n  flex-shrink: 0;\n  margin-inline-start: calc(var(--space-4) * -1);\n  /* Clip the slide horizontally only. Vertically the clip reaches the bar's\n     padding, so illustrations that bleed to its bottom edge are never cut\n     while the drawer is still animating open. */\n  clip-path: inset(-64px 0 calc(var(--space-4) * -1));\n  opacity: 0;\n  transition:\n    width 220ms cubic-bezier(0.2, 0, 0, 1),\n    margin-inline-start 220ms cubic-bezier(0.2, 0, 0, 1),\n    opacity 160ms ease;\n}\n\n.tool-options[data-expanded=\"true\"] {\n  margin-inline-start: 0;\n  opacity: 1;\n}\n\n/* Once the slide finishes, let tool content and popovers rise above the bar. */\n.tool-options[data-settled=\"true\"] {\n  clip-path: none;\n}\n\n.tool-options[aria-hidden=\"true\"] {\n  pointer-events: none;\n}\n\n.tool-options__inner {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  width: max-content;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tool-options {\n    transition: none;\n  }\n}\n";
+const sketchToolOptionsStyles = "/* Pen, eraser, color and rectangle options shown in the canvas toolbar drawer. */\n\n.sketch-options__illustrated {\n  appearance: none;\n  position: relative;\n  flex-shrink: 0;\n  width: var(--control-height-xlarge);\n  height: var(--control-height-xlarge);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  cursor: pointer;\n  /* Clip the illustration at the toolbar's bottom edge, never above it. */\n  clip-path: inset(-64px calc(var(--space-4) * -1) calc(var(--space-4) * -1));\n}\n\n/* Well behind the active tool, running through the toolbar padding to its bottom edge. */\n.sketch-options__illustrated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 0 calc(var(--space-4) * -1);\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  background: var(--surface-well);\n  opacity: 0;\n  transition: opacity 180ms ease;\n}\n\n.tool-options[data-settled=\"true\"] .sketch-options__illustrated[data-active=\"true\"]::before {\n  opacity: 1;\n}\n\n.sketch-options__illustration {\n  /* Artwork below the original crop line; lets the base stay visible while raised. */\n  --illustration-bleed: 0px;\n  position: absolute;\n  left: 50%;\n  /* Extend through the toolbar padding so the base sits on its bottom edge. */\n  bottom: calc(var(--space-4) * -1 - var(--illustration-bleed));\n  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));\n  transform: translate(-50%, 0);\n  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.sketch-options__illustration--pen {\n  --illustration-bleed: 9px;\n}\n\n.sketch-options__illustration--eraser {\n  --illustration-bleed: 11px;\n}\n\n.sketch-options__illustrated:hover .sketch-options__illustration {\n  transform: translate(-50%, calc(var(--space-4) * -1));\n}\n\n.tool-options[data-settled=\"true\"] .sketch-options__illustrated[data-active=\"true\"] .sketch-options__illustration {\n  transform: translate(-50%, 0);\n}\n\n.sketch-options__illustrated:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n/* The rectangle shares the pen and eraser's quiet well instead of the accent active style. */\n.canvas-toolbar__tool.sketch-options__rectangle[data-active=\"true\"] {\n  background: var(--surface-well);\n  color: var(--text-primary);\n}\n\n.sketch-options__color {\n  position: relative;\n  display: flex;\n}\n\n.sketch-options__color-trigger {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--control-height-xlarge);\n  height: var(--control-height-xlarge);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-primary);\n  cursor: pointer;\n  transition: background-color 120ms ease;\n}\n\n.sketch-options__color-trigger:hover,\n.sketch-options__color-trigger[data-open=\"true\"] {\n  background: var(--surface-well);\n}\n\n.sketch-options__swatch {\n  display: block;\n  /* Fades back in as the palette collapses onto it. */\n  transition: opacity 120ms ease 150ms;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\n/* The hexagon frames the trigger, so its swatch steps aside while the palette is open. */\n.sketch-options__color-trigger[data-open=\"true\"] .sketch-options__swatch {\n  opacity: 0;\n  transition-delay: 0s;\n}\n\n/* Colors pop out as a hexagon of overlapping swatches centered on the color trigger. */\n.sketch-options__palette {\n  position: absolute;\n  z-index: 1;\n  left: 50%;\n  top: 50%;\n  width: 0;\n  height: 0;\n}\n\n.sketch-options__palette-option {\n  appearance: none;\n  position: absolute;\n  left: calc(var(--swatch-size) / -2);\n  top: calc(var(--swatch-size) / -2);\n  width: var(--swatch-size);\n  height: var(--swatch-size);\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  translate: var(--swatch-x) var(--swatch-y);\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n  transition:\n    scale 120ms cubic-bezier(0.2, 0, 0, 1),\n    box-shadow 120ms ease;\n  animation: sketch-options-swatch-in 180ms cubic-bezier(0.2, 0, 0, 1) var(--swatch-delay, 0ms) backwards;\n}\n\n.sketch-options__palette-option:hover {\n  scale: 1.05;\n}\n\n/* The selected swatch sits above its neighbors, separated from them by a light rim. */\n.sketch-options__palette-option[data-active=\"true\"] {\n  box-shadow:\n    inset 0 0 0 1px rgba(0, 0, 0, 0.08),\n    0 0 0 2px var(--surface-raised-2x),\n    0 2px 8px rgba(0, 0, 0, 0.2);\n}\n\n.sketch-options__palette-option:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n\n.sketch-options__palette[data-state=\"closing\"] {\n  pointer-events: none;\n}\n\n/* Closing plays the fan-out in reverse, last swatch first. */\n.sketch-options__palette[data-state=\"closing\"] .sketch-options__palette-option {\n  animation: sketch-options-swatch-out 180ms cubic-bezier(0.2, 0, 0, 1) var(--swatch-delay-out, 0ms) forwards;\n}\n\n@keyframes sketch-options-swatch-out {\n  to {\n    opacity: 0;\n    scale: 0.4;\n    translate: 0 0;\n  }\n}\n\n@keyframes sketch-options-swatch-in {\n  from {\n    opacity: 0;\n    scale: 0.4;\n    translate: 0 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sketch-options__illustrated::before,\n  .sketch-options__illustration {\n    transition: none;\n  }\n\n  .sketch-options__palette-option {\n    animation: none;\n    transition: none;\n  }\n}\n";
 import { getActiveCanvasFrame } from "./activeCanvasDocument.js";
 import { startSketchCapture } from "../sketch/SketchWorkspace.js";
 import { cancelSketchInteraction, useSketchInteractionActive } from "../sketch/interaction.js";
@@ -48,7 +52,8 @@ import { createCommentCursor, DESIGN_SELECT_CURSOR, PAN_CURSOR } from "../ui/cus
 import { addLinkedFrame, createIteration as createWorkspaceIteration, removeFrame } from "../workspace/commands.js";
 import { getSelectedElements, setSelectedElement } from "../selection/selectionStore.js";
 import { setCommentToolActive } from "../comments/store.js";
-const WORKSPACE_STYLES = [foundationStyles, canvasWorkspaceStyles, canvasCardStyles, canvasToolbarStyles].join("\n");
+import { InspectorStyle } from "../ui/InspectorStyle.js";
+const WORKSPACE_STYLES = [foundationStyles, canvasWorkspaceStyles, canvasCardStyles, canvasToolbarStyles, sketchToolOptionsStyles].join("\n");
 const PRESENTATION_TRANSITION_MS = 200;
 function snapshotRect(rect) {
     return {
@@ -60,6 +65,7 @@ function snapshotRect(rect) {
 }
 export function CanvasWorkspace({ primaryUrl }) {
     const mode = useCanvasMode();
+    const pageSurface = isPageSurface();
     const runtimeConfig = useNudgeUiRuntimeConfig();
     const inspectorSession = useInspectorSession();
     const inspectorOpen = useInspectorOpen();
@@ -70,8 +76,10 @@ export function CanvasWorkspace({ primaryUrl }) {
     const selectedCardId = useSelectedCardId();
     const focusedCardId = useFocusedCardId();
     const sketchActive = useSketchInteractionActive();
-    const sketchEnabled = isNudgeUiDev() && runtimeConfig.demo !== true;
+    const sketchEnabled = isNudgeUiDev()
+        && (runtimeConfig.demo !== true || isNudgeUiFeatureEnabled(runtimeConfig.features, "sketch"));
     const canvasIterationsEnabled = isNudgeUiFeatureEnabled(runtimeConfig.features, "canvasIterations");
+    useSyncExternalStore(subscribeFrameRegistry, getFrameRegistryVersion);
     const sketchAvailable = sketchEnabled && getActiveCanvasFrame() !== null;
     const boardRef = useRef(null);
     useCanvasLayoutAnimation(boardRef, cards, camera, presentation);
@@ -81,17 +89,17 @@ export function CanvasWorkspace({ primaryUrl }) {
     const framePanContextRef = useRef(null);
     const spaceHeldRef = useRef(false);
     const fitAllScheduledRef = useRef(false);
-    const activatedTargetRef = useRef(null);
+    // Track the consumed primaryUrl prop separately from navigation inside a frame.
+    const activatedPrimaryUrlRef = useRef(null);
     const demoSeededRef = useRef(false);
     const previousPresentationRef = useRef(presentation);
-    const focusCardRectRef = useRef(null);
-    const canvasEntryAnimationRef = useRef(null);
+    const presentationAnimationRef = useRef(null);
     const [boardCursorClass, setBoardCursorClass] = useState("");
-    const [selectedTool, setInteractionTool] = useState("design");
+    const [selectedTool, setInteractionTool] = useState(runtimeConfig.demo === true ? "select" : "design");
     const temporaryAppInteraction = useTemporaryAppInteraction();
     const interactionTool = temporaryAppInteraction ? "select" : selectedTool;
     const layoutTransitioning = useCanvasLayoutTransitioning();
-    const rendererInteractionsEnabled = interactionTool !== "select" && !layoutTransitioning;
+    const rendererInteractionsEnabled = interactionTool !== "select" && !layoutTransitioning && !sketchActive;
     const rendererCursor = interactionTool === "comment" ? "comment" : "design";
     const boardCursor = boardCursorClass === "is-grabbing"
         ? "grabbing"
@@ -106,80 +114,61 @@ export function CanvasWorkspace({ primaryUrl }) {
     const presentationCardId = selectedCardId ?? focusedCardId ?? cards[0]?.id ?? null;
     const linkedFrameIds = getLinkedFrameIds(cards, selectedCardId);
     useLayoutEffect(() => {
+        const previousPresentation = previousPresentationRef.current;
+        previousPresentationRef.current = presentation;
+        if (previousPresentation === presentation)
+            return;
+        presentationAnimationRef.current?.cancel();
+        presentationAnimationRef.current = null;
+        if (!presentationTransitioning)
+            return;
         const board = boardRef.current;
+        const card = cards.find((candidate) => candidate.id === presentationCardId);
         const cardElement = presentationCardId
             ? board?.querySelector(`[data-card-id="${presentationCardId}"]`)
             : null;
-        const boardContent = board?.querySelector('[data-test="canvas-board-content"]');
-        if (presentation === "focus") {
-            canvasEntryAnimationRef.current?.cancel();
-            canvasEntryAnimationRef.current = null;
-            if (boardContent)
-                boardContent.style.transition = "";
-            if (cardElement)
-                cardElement.style.transition = "";
-            focusCardRectRef.current = cardElement ? snapshotRect(cardElement.getBoundingClientRect()) : null;
-        }
-        else if (presentation === "canvas"
-            && previousPresentationRef.current === "focus"
-            && presentationTransitioning
-            && cardElement
-            && boardContent
-            && focusCardRectRef.current
-            && typeof cardElement.animate === "function") {
-            // Commit the final layout before measuring it. The old implementation
-            // transitioned both the camera and the card's position, which made the
-            // nested scale and translation produce a sideways drift.
-            boardContent.style.transition = "none";
-            cardElement.style.transition = "none";
-            const oldRect = focusCardRectRef.current;
-            const newRect = snapshotRect(cardElement.getBoundingClientRect());
-            if (newRect.width > 0 && newRect.height > 0 && camera.zoom > 0) {
-                const oldCenterX = oldRect.left + oldRect.width / 2;
-                const oldCenterY = oldRect.top + oldRect.height / 2;
-                const newCenterX = newRect.left + newRect.width / 2;
-                const newCenterY = newRect.top + newRect.height / 2;
-                const localTranslateX = (oldCenterX - newCenterX) / camera.zoom;
-                const localTranslateY = (oldCenterY - newCenterY) / camera.zoom;
-                const scaleX = oldRect.width / newRect.width;
-                const scaleY = oldRect.height / newRect.height;
-                const animation = cardElement.animate([
-                    {
-                        transformOrigin: "center center",
-                        transform: `translate(${localTranslateX}px, ${localTranslateY}px) scale(${scaleX}, ${scaleY})`,
-                    },
-                    { transformOrigin: "center center", transform: "none" },
-                ], { duration: PRESENTATION_TRANSITION_MS, easing: "ease", fill: "both" });
-                canvasEntryAnimationRef.current = animation;
-                void animation.finished.then(() => {
-                    if (canvasEntryAnimationRef.current !== animation)
-                        return;
-                    canvasEntryAnimationRef.current = null;
-                    animation.cancel();
-                    boardContent.style.transition = "";
-                    cardElement.style.transition = "";
-                }).catch(() => {
-                    if (canvasEntryAnimationRef.current !== animation)
-                        return;
-                    canvasEntryAnimationRef.current = null;
-                    boardContent.style.transition = "";
-                    cardElement.style.transition = "";
-                });
-            }
-            else {
-                boardContent.style.transition = "";
-                cardElement.style.transition = "";
-            }
-        }
-        previousPresentationRef.current = presentation;
-    }, [camera.zoom, presentation, presentationCardId, presentationTransitioning]);
+        if (!board || !card || !cardElement || typeof cardElement.animate !== "function" || camera.zoom <= 0)
+            return;
+        // The previous layout is already gone, so derive it: focus fills the
+        // board, and canvas places the card through the camera.
+        const boardRect = snapshotRect(board.getBoundingClientRect());
+        const canvasRect = {
+            left: boardRect.left + camera.x + card.x * camera.zoom,
+            top: boardRect.top + camera.y + card.y * camera.zoom,
+            width: card.width * camera.zoom,
+            height: card.height * camera.zoom,
+        };
+        const oldRect = presentation === "focus" ? canvasRect : boardRect;
+        const localScale = presentation === "focus" ? 1 : camera.zoom;
+        const newRect = snapshotRect(cardElement.getBoundingClientRect());
+        if (newRect.width <= 0 || newRect.height <= 0)
+            return;
+        const localTranslateX = (oldRect.left + oldRect.width / 2 - (newRect.left + newRect.width / 2)) / localScale;
+        const localTranslateY = (oldRect.top + oldRect.height / 2 - (newRect.top + newRect.height / 2)) / localScale;
+        const scaleX = oldRect.width / newRect.width;
+        const scaleY = oldRect.height / newRect.height;
+        const animation = cardElement.animate([
+            {
+                transformOrigin: "center center",
+                transform: `translate(${localTranslateX}px, ${localTranslateY}px) scale(${scaleX}, ${scaleY})`,
+            },
+            { transformOrigin: "center center", transform: "none" },
+        ], { duration: PRESENTATION_TRANSITION_MS, easing: "ease", fill: "both" });
+        presentationAnimationRef.current = animation;
+        void animation.finished.then(() => {
+            if (presentationAnimationRef.current !== animation)
+                return;
+            presentationAnimationRef.current = null;
+            animation.cancel();
+        }).catch(() => undefined);
+    }, [camera, cards, presentation, presentationCardId, presentationTransitioning]);
     useLayoutEffect(() => {
         const board = boardRef.current;
         if (!primaryUrl || !board)
             return;
-        if (activatedTargetRef.current === primaryUrl && cards.length > 0)
+        if (activatedPrimaryUrlRef.current === primaryUrl && cards.length > 0)
             return;
-        activatedTargetRef.current = primaryUrl;
+        activatedPrimaryUrlRef.current = primaryUrl;
         const viewport = {
             width: board.clientWidth,
             height: board.clientHeight,
@@ -239,7 +228,9 @@ export function CanvasWorkspace({ primaryUrl }) {
         }
     }, [primaryUrl, cards.length, presentation, runtimeConfig.demo, runtimeConfig.demoPages, runtimeConfig.demoCardLabels]);
     useEffect(() => {
-        if (primaryUrl && activatedTargetRef.current !== primaryUrl)
+        if (pageSurface)
+            return;
+        if (primaryUrl && activatedPrimaryUrlRef.current !== primaryUrl)
             return;
         const activeCardId = selectedCardId ?? focusedCardId ?? cards[0]?.id;
         const activeCard = cards.find((card) => card.id === activeCardId);
@@ -250,63 +241,31 @@ export function CanvasWorkspace({ primaryUrl }) {
             window.history.replaceState(window.history.state, "", editorUrl);
         }
     }, [cards, focusedCardId, primaryUrl, selectedCardId]);
-    const sendPanModifier = useCallback((iframe, cardId, spaceHeld) => {
-        iframe.contentWindow?.postMessage({
-            type: "pan-modifier",
-            protocolVersion: PROTOCOL_VERSION,
-            projectId: PROJECT_ID,
-            workspaceId: WORKSPACE_ID,
-            cardId,
-            spaceHeld,
-            cursor: spaceHeld ? "drag" : rendererCursor,
-        }, window.location.origin);
-    }, [rendererCursor]);
-    const sendInspectorInteractionState = useCallback((iframe, cardId, open, interactionsEnabled, cursor) => {
-        iframe.contentWindow?.postMessage({
+    const sendInspectorInteractionState = useCallback((frame, open, interactionsEnabled, cursor) => {
+        frame.post({
             type: "inspector-interaction-state",
-            protocolVersion: PROTOCOL_VERSION,
-            projectId: PROJECT_ID,
-            workspaceId: WORKSPACE_ID,
-            cardId,
             open,
             interactionsEnabled,
             cursor,
-            commentCursor: cursor === "comment" ? createCommentCursor(boardRef.current) : undefined,
-        }, window.location.origin);
-    }, []);
-    const sendLinkTargetState = useCallback((iframe, cardId, openInCard) => {
-        iframe.contentWindow?.postMessage({
-            type: "link-target-state",
-            protocolVersion: PROTOCOL_VERSION,
-            projectId: PROJECT_ID,
-            workspaceId: WORKSPACE_ID,
-            cardId,
-            openInCard,
-        }, window.location.origin);
+            ...(cursor === "comment" ? { commentCursor: createCommentCursor(boardRef.current) } : {}),
+        });
     }, []);
-    const sendBoardGestureState = useCallback((iframe, cardId, enabled) => {
-        iframe.contentWindow?.postMessage({
-            type: "board-gesture-state",
-            protocolVersion: PROTOCOL_VERSION,
-            projectId: PROJECT_ID,
-            workspaceId: WORKSPACE_ID,
-            cardId,
-            enabled,
-            panScroll: enabled && interactionTool !== "select",
-        }, window.location.origin);
+    const sendBoardGestureState = useCallback((frame, enabled) => {
+        frame.post({ type: "board-gesture-state", enabled, panScroll: enabled && interactionTool !== "select" });
     }, [interactionTool]);
     useEffect(() => {
         for (const [cardId, iframe] of getRegisteredFrames()) {
-            sendInspectorInteractionState(iframe, cardId, inspectorOpen, rendererInteractionsEnabled, rendererCursor);
-            sendBoardGestureState(iframe, cardId, presentation === "canvas");
-            sendLinkTargetState(iframe, cardId, linksOpenInCards);
+            const frame = connectFrame(cardId, iframe);
+            sendInspectorInteractionState(frame, inspectorOpen, rendererInteractionsEnabled, rendererCursor);
+            sendBoardGestureState(frame, presentation === "canvas");
+            frame.post({ type: "link-target-state", openInCard: linksOpenInCards });
         }
-    }, [inspectorOpen, linksOpenInCards, presentation, rendererCursor, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sendLinkTargetState]);
+    }, [inspectorOpen, linksOpenInCards, presentation, rendererCursor, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState]);
     const broadcastPanModifier = useCallback((spaceHeld) => {
         for (const [cardId, iframe] of getRegisteredFrames()) {
-            sendPanModifier(iframe, cardId, spaceHeld);
+            connectFrame(cardId, iframe).post({ type: "pan-modifier", spaceHeld });
         }
-    }, [sendPanModifier]);
+    }, []);
     const zoomAtPointer = useCallback((point, deltaY) => {
         const board = boardRef.current;
         if (!board)
@@ -367,7 +326,7 @@ export function CanvasWorkspace({ primaryUrl }) {
         if (nextTool === "sketch") {
             if (!sketchEnabled)
                 return;
-            const hostElement = getActiveCanvasFrame();
+            const hostElement = canvasFrameHost(getActiveCanvasFrame());
             if (!hostElement)
                 return;
             stopPanMode();
@@ -433,6 +392,8 @@ export function CanvasWorkspace({ primaryUrl }) {
         return () => window.removeEventListener("keydown", onKeyDown, true);
     }, [handleToolChange, mode, sketchAvailable]);
     const handleZoomStep = useCallback((direction) => {
+        if (sketchActive)
+            return;
         if (presentation === "focus") {
             if (direction < 0) {
                 batchCanvasChanges(() => {
@@ -457,7 +418,7 @@ export function CanvasWorkspace({ primaryUrl }) {
         if (nextZoom === null)
             return;
         setBoardCamera({ ...getBoardCamera(), zoom: nextZoom });
-    }, [presentation]);
+    }, [presentation, sketchActive]);
     const showCanvas = useCallback(() => {
         handleZoomStep(-1);
     }, [handleZoomStep]);
@@ -496,7 +457,7 @@ export function CanvasWorkspace({ primaryUrl }) {
         broadcastPanModifier(false);
     }, [broadcastPanModifier, endPanning, presentation]);
     useEffect(() => {
-        const stopChanges = subscribeChanges(() => {
+        const stopChanges = subscribeActiveDraftChanges(() => {
             projectToAllReadyCards();
         });
         const stopPreview = subscribeOriginalPreview(() => {
@@ -508,7 +469,8 @@ export function CanvasWorkspace({ primaryUrl }) {
         };
     }, []);
     useEffect(() => {
-        return subscribeCanvasRendererMessages(({ cardId, iframe, identity, message: msg }) => {
+        return subscribeCanvasRendererMessages(({ frame, message: msg }) => {
+            const { identity } = frame;
             if (msg.type === "renderer-hello")
                 return;
             if (msg.type === "app-interaction-modifier") {
@@ -524,13 +486,11 @@ export function CanvasWorkspace({ primaryUrl }) {
                 }
                 return;
             }
-            const frame = { cardId, iframe };
             const syncActiveFrameUrl = (url) => {
                 if (getCanvasCards().some((card) => card.id === frame.cardId && iterationId(card.content)))
                     return;
                 const activeCardId = getSelectedCardId() ?? getFocusedCardId() ?? getCanvasCards()[0]?.id;
-                if (activeCardId === frame.cardId || getCanvasCards().length === 1) {
-                    activatedTargetRef.current = url;
+                if (!pageSurface && (activeCardId === frame.cardId || getCanvasCards().length === 1)) {
                     window.history.replaceState(window.history.state, "", createNudgeUiEditorUrl(url));
                 }
                 updateCardUrl(frame.cardId, url);
@@ -541,7 +501,7 @@ export function CanvasWorkspace({ primaryUrl }) {
                 // the page without inspector changes; skip conflict verification.
                 if (isOriginalPreviewActive())
                     return;
-                const frameDocument = frame.iframe.contentDocument;
+                const frameDocument = frame.document();
                 const plan = getCanonicalFrameProjection(frame.cardId, msg.revision);
                 const draft = getDraftForCard(frame.cardId);
                 if (frameDocument && plan && draft && isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision)) {
@@ -591,10 +551,10 @@ export function CanvasWorkspace({ primaryUrl }) {
                 syncActiveFrameUrl(msg.url);
                 // A card can finish loading after Space was pressed on the controller.
                 // Seed it with the current modifier state before its first pointer event.
-                sendPanModifier(frame.iframe, frame.cardId, spaceHeldRef.current);
-                sendInspectorInteractionState(frame.iframe, frame.cardId, inspectorOpen, rendererInteractionsEnabled, spaceHeldRef.current ? "drag" : rendererCursor);
-                sendBoardGestureState(frame.iframe, frame.cardId, presentation === "canvas");
-                sendLinkTargetState(frame.iframe, frame.cardId, linksOpenInCards);
+                frame.post({ type: "pan-modifier", spaceHeld: spaceHeldRef.current });
+                sendInspectorInteractionState(frame, inspectorOpen, rendererInteractionsEnabled, spaceHeldRef.current ? "drag" : rendererCursor);
+                sendBoardGestureState(frame, presentation === "canvas");
+                frame.post({ type: "link-target-state", openInCard: linksOpenInCards });
             }
             if (msg.type === "pan-modifier") {
                 if (presentation !== "canvas")
@@ -607,34 +567,25 @@ export function CanvasWorkspace({ primaryUrl }) {
                 return;
             }
             if (msg.type === "wheel-pan") {
-                if (presentation === "canvas" && interactionTool !== "select")
+                if (presentation === "canvas" && !sketchActive && interactionTool !== "select")
                     panCanvasByWheel(msg.deltaX, msg.deltaY);
                 return;
             }
             if (msg.type === "zoom") {
-                if (presentation !== "canvas")
+                if (presentation !== "canvas" || sketchActive)
                     return;
-                const iframeRect = frame.iframe.getBoundingClientRect();
-                const point = iframePointToClientPoint(iframeRect, msg.point, getBoardCamera().zoom);
-                zoomAtPointer(point, msg.deltaY);
+                zoomAtPointer(toViewportPoint(frame.viewport(), msg.point), msg.deltaY);
                 return;
             }
+            // The pan moves the frame, so every pan point maps through the viewport captured at pan start.
             const pointInBoard = (point) => {
                 const context = framePanContextRef.current;
-                if (!context)
-                    return null;
-                return {
-                    x: context.left + point.x * context.zoom,
-                    y: context.top + point.y * context.zoom,
-                };
+                return context ? toViewportPoint(context, point) : null;
             };
             if (msg.type === "pan-start") {
-                const iframeRect = frame.iframe.getBoundingClientRect();
-                framePanContextRef.current = {
-                    left: iframeRect.left,
-                    top: iframeRect.top,
-                    zoom: getBoardCamera().zoom,
-                };
+                if (sketchActive)
+                    return;
+                framePanContextRef.current = frame.viewport();
                 const point = pointInBoard(msg.point);
                 if (point)
                     startPanning(point);
@@ -652,7 +603,7 @@ export function CanvasWorkspace({ primaryUrl }) {
                 return;
             }
             if (msg.type === "frame-metadata") {
-                const frameDocument = frame.iframe.contentDocument;
+                const frameDocument = frame.document();
                 if (frameDocument)
                     disposeInlineTextEdit("route-disposed", frameDocument);
                 if (msg.url)
@@ -683,11 +634,11 @@ export function CanvasWorkspace({ primaryUrl }) {
                 activateIframeWorkspace(msg.url, { width: boardRef.current?.clientWidth ?? window.innerWidth, height: boardRef.current?.clientHeight ?? window.innerHeight }, { replaceActiveCard: true });
                 return;
             }
-            const frameDocument = frame.iframe.contentDocument;
+            const frameDocument = frame.document();
             if (frameDocument)
                 disposeInlineTextEdit("route-disposed", frameDocument);
         });
-    }, [broadcastPanModifier, endPanning, handleToolChange, interactionTool, mode, panCanvasByWheel, inspectorOpen, linksOpenInCards, movePanning, presentation, rendererCursor, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sendLinkTargetState, sendPanModifier, sketchAvailable, startPanning, zoomAtPointer]);
+    }, [broadcastPanModifier, endPanning, handleToolChange, interactionTool, mode, panCanvasByWheel, inspectorOpen, linksOpenInCards, movePanning, presentation, rendererCursor, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sketchActive, sketchAvailable, startPanning, zoomAtPointer]);
     useEffect(() => {
         if (mode === "canvas" && !hasFitAllRan()) {
             if (!fitAllScheduledRef.current) {
@@ -778,8 +729,13 @@ export function CanvasWorkspace({ primaryUrl }) {
         function handleGlobalWheel(e) {
             const zoom = e.ctrlKey || e.metaKey;
             const board = boardRef.current;
-            if (zoom && sketchActive)
+            if (sketchActive) {
+                if (e.composedPath().some((node) => node instanceof Element && node.closest(".sketch__prompt-panel, .sketch__annotation-editor, .panel")))
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
                 return;
+            }
             const path = e.composedPath();
             // Comment pins overlay the board without being its DOM descendants.
             const overCommentPin = path.some((node) => node instanceof Element && node.matches(".comment-pin"));
@@ -797,10 +753,11 @@ export function CanvasWorkspace({ primaryUrl }) {
         window.addEventListener("wheel", handleGlobalWheel, { capture: true, passive: false });
         return () => window.removeEventListener("wheel", handleGlobalWheel, { capture: true });
     }, [mode, presentation, sketchActive, interactionTool, panCanvasByWheel, zoomAtPointer]);
-    const renderCard = (card) => (_jsx(CanvasCard, { card: card, presentation: presentation, presentationCard: card.id === presentationCardId, linkedToActive: linkedFrameIds.includes(card.id), onShowFocus: showFocus, onDuplicate: duplicateDesign, onCreateIteration: canvasIterationsEnabled ? createIteration : undefined, documentOwner: inspectorSession }, card.id));
+    // Every page card would share the one page renderer, so restored extra cards stay unmounted.
+    const renderCard = (card) => pageSurface ? (card.id === presentationCardId ? _jsx(PageCard, { card: card, documentOwner: inspectorSession }, card.id) : null) : (_jsx(CanvasCard, { card: card, presentation: presentation, presentationCard: card.id === presentationCardId, linkedToActive: linkedFrameIds.includes(card.id), onShowFocus: showFocus, onDuplicate: duplicateDesign, onCreateIteration: canvasIterationsEnabled ? createIteration : undefined, documentOwner: inspectorSession }, card.id));
     if (mode !== "canvas")
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "canvas-styles", children: WORKSPACE_STYLES }), _jsx("div", { className: `canvas-workspace${presentationTransitioning ? " is-presentation-transitioning" : ""}`, "data-test": "canvas-workspace", "data-presentation": presentation, style: { right: inspectorOpen ? "min(320px, 100vw)" : 0 }, children: _jsxs("div", { className: `canvas-workspace__board ${boardCursorClass}${layoutTransitioning ? " is-layout-transitioning" : ""}`.trim(), "data-test": "canvas-board", ref: boardRef, style: { cursor: boardCursor }, onPointerDown: handleBoardPointerDown, onClick: handleBoardClick, children: [!primaryUrl ? (_jsx("div", { className: "canvas-workspace__target-error", "data-test": "canvas-target-error", children: "This editor URL does not identify an application page." })) : null, inspectorOpen && presentation === "focus" ? (_jsx("div", { className: "canvas-workspace__focus-action", "data-test": "canvas-show-canvas", children: _jsxs(Button, { variant: "quiet", size: "default", type: "button", onClick: showCanvas, children: [_jsx(IconCornerLeftUp, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Canvas"] }) })) : null, _jsx("div", { className: "canvas-workspace__board-content", style: {
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorStyle, { testId: "canvas-styles", css: WORKSPACE_STYLES }), _jsx("div", { className: `canvas-workspace${presentationTransitioning ? " is-presentation-transitioning" : ""}`, "data-test": "canvas-workspace", "data-presentation": presentation, "data-surface": pageSurface ? "page" : undefined, style: { right: inspectorOpen ? "min(320px, 100vw)" : 0 }, children: _jsxs("div", { className: `canvas-workspace__board ${boardCursorClass}${layoutTransitioning ? " is-layout-transitioning" : ""}`.trim(), "data-test": "canvas-board", ref: boardRef, style: { cursor: boardCursor }, onPointerDown: handleBoardPointerDown, onClick: handleBoardClick, children: [!primaryUrl ? (_jsx("div", { className: "canvas-workspace__target-error", "data-test": "canvas-target-error", children: "This editor URL does not identify an application page." })) : null, inspectorOpen && presentation === "focus" && !pageSurface ? (_jsx("div", { className: "canvas-workspace__focus-action", "data-test": "canvas-show-canvas", children: _jsxs(Button, { variant: "quiet", size: "default", type: "button", onClick: showCanvas, children: [_jsx(IconCornerLeftUp, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Canvas"] }) })) : null, _jsx("div", { className: "canvas-workspace__board-content", style: {
                                 transform: `translate(${camera.x}px, ${camera.y}px) scale(${camera.zoom})`,
                                 transformOrigin: "0 0",
                             }, "data-test": "canvas-board-content", children: cards.map(renderCard) }), inspectorOpen && !sketchActive ? (_jsx(CanvasToolbar, { tool: interactionTool, sketchEnabled: sketchAvailable, onToolChange: handleToolChange })) : null] }) }), inspectorOpen && sketchActive ? (_jsx("div", { className: "canvas-toolbar__portal", "data-test": "canvas-toolbar-portal", style: { right: inspectorOpen ? "min(320px, 100vw)" : 0 }, children: _jsx(CanvasToolbar, { tool: interactionTool, sketchEnabled: sketchAvailable, onToolChange: handleToolChange }) })) : null] }));

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

@@ -1,6 +1,7 @@
 import type { ReactElement } from "react";
 interface LockedWorkspaceNoticeProps {
-    onTakeover: () => void;
+    onTakeover: () => void | Promise<void>;
+    storageError?: boolean;
 }
-export declare function LockedWorkspaceNotice({ onTakeover }: LockedWorkspaceNoticeProps): ReactElement;
+export declare function LockedWorkspaceNotice({ onTakeover, storageError }: LockedWorkspaceNoticeProps): ReactElement;
 export {};

package/dist/inspector/canvas/LockedWorkspaceNotice.js

@@ -4,14 +4,18 @@ import { requestTakeover } from "./workspaceLease.js";
 import { Button } from "../ui/Button.js";
 import { UI_STYLES } from "../ui/styles.js";
 const lockedWorkspaceStyles = ".locked-notice {\n  position: fixed;\n  top: max(12px, env(safe-area-inset-top));\n  right: max(12px, env(safe-area-inset-right));\n  width: min(320px, calc(100vw - 24px));\n  padding: 18px;\n  border-radius: 12px;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  pointer-events: auto;\n}\n\n.locked-notice__message {\n  margin-bottom: 14px;\n  font-size: 14px;\n  font-weight: 650;\n}\n";
-export function LockedWorkspaceNotice({ onTakeover }) {
+import { InspectorStyle } from "../ui/InspectorStyle.js";
+export function LockedWorkspaceNotice({ onTakeover, storageError = false }) {
     const [takingOver, setTakingOver] = useState(false);
-    function handleTakeover() {
+    async function handleTakeover() {
         setTakingOver(true);
-        if (requestTakeover())
-            onTakeover();
-        else
+        try {
+            if (requestTakeover())
+                await onTakeover();
+        }
+        finally {
             setTakingOver(false);
+        }
     }
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "locked-workspace-styles", children: `${UI_STYLES}\n${lockedWorkspaceStyles}` }), _jsxs("aside", { className: "locked-notice", "data-test": "locked-workspace-notice", "aria-live": "polite", children: [_jsx("div", { className: "locked-notice__message", children: "Nudge UI is open in another tab" }), _jsx(Button, { "data-test": "takeover-here", disabled: takingOver, onClick: handleTakeover, children: takingOver ? "Taking over..." : "Take Over Here" })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorStyle, { testId: "locked-workspace-styles", css: `${UI_STYLES}\n${lockedWorkspaceStyles}` }), _jsxs("aside", { className: "locked-notice", "data-test": "locked-workspace-notice", "aria-live": "polite", children: [_jsx("div", { className: "locked-notice__message", children: storageError ? "Can’t load saved changes. Try again." : "Nudge UI is open in another tab" }), _jsx(Button, { "data-test": "takeover-here", disabled: takingOver, onClick: handleTakeover, children: takingOver ? "Taking over..." : "Take Over Here" })] })] }));
 }

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

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+import type { CanvasCard } from "./canvasStore.js";
+import type { InspectorSession } from "../session/sessionFactory.js";
+interface PageCardProps {
+    card: CanvasCard;
+    documentOwner?: InspectorSession;
+}
+/** The page-surface Canvas card: the inspected page is the renderer. */
+export declare function PageCard({ card, documentOwner }: PageCardProps): ReactElement;
+export {};