nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/canvas/CanvasWorkspace.js

@@ -1,10 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { IconCornerLeftUp } from "@tabler/icons-react";
-import { useCanvasCards, activateIframeWorkspace, removeCanvasCard, getSelectedCardId, getFocusedCardId, getCanvasCards, setBoardCamera, getBoardCamera, fitAllCards, setCanvasPresentation, focusCard, hasFitAllRan, useBoardCamera, useCanvasPresentation, useCanvasPresentationTransitioning, useSelectedCardId, useFocusedCardId, resizeCard, setCardPosition, updateCardTitle, addCanvasCard, findCardByNormalizedUrl, selectCard, CARD_GAP, updateCardUrl, } from "./canvasStore.js";
+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 { useCanvasLayoutAnimation } from "./useCanvasLayoutAnimation.js";
 import { Button } from "../ui/Button.js";
-import { useCanvasMode } from "./canvasStore.js";
+import { useCanvasMode } from "./viewStore.js";
 import { subscribeChanges } from "../changes/changesLog.js";
 import { subscribeOriginalPreview, isOriginalPreviewActive } from "../shell/originalPreview.js";
 import { recordCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
@@ -12,31 +17,37 @@ import { recordCanvasRenderedInstanceProjectionReports } from "../projection/ren
 import { recordCanvasTextProjectionReports } from "../projection/textProjection.js";
 import { getChangesList, isPreviewableChange } from "../changes/changesLog.js";
 import { changeKey } from "../changes/model.js";
-import { getWorkspaceChanges } from "../changes/workspaceChanges.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 { normalizeUrl } from "./normalizeUrl.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 { 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";
-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-8));\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(--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 .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(--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__toolbar {\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-start;\n  z-index: 1;\n  cursor: grab;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n.canvas-card:hover .canvas-card__toolbar,\n.canvas-card:focus-within .canvas-card__toolbar,\n.canvas-card.is-selected .canvas-card__toolbar,\n.canvas-card.is-focused .canvas-card__toolbar {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.canvas-card.is-dragging .canvas-card__toolbar {\n  cursor: grabbing;\n}\n\n.canvas-card__drag-surface {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  flex: 1 1 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__dimensions {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  font-variant-numeric: tabular-nums;\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";
-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\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";
+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";
+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";
 import { isEditableEvent } from "../shell/shortcuts.js";
 import { acknowledgeAgentRendererReady } from "./agentPresentation.js";
 import { useInspectorSession } from "../session/sessionContext.js";
+import { isNudgeUiFeatureEnabled } from "../runtime/runtimeConfig.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
 import { adjacentCanvasZoomLevel, CanvasToolbar, } from "./CanvasToolbar.js";
-import { 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: var(--space-4);\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";
+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";
 import { getActiveCanvasFrame } from "./activeCanvasDocument.js";
 import { startSketchCapture } from "../sketch/SketchWorkspace.js";
 import { cancelSketchInteraction, useSketchInteractionActive } from "../sketch/interaction.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
+import { createCommentCursor, DESIGN_SELECT_CURSOR, PAN_CURSOR } from "../ui/customCursors.js";
+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");
 const PRESENTATION_TRANSITION_MS = 200;
 function snapshotRect(rect) {
@@ -60,8 +71,10 @@ export function CanvasWorkspace({ primaryUrl }) {
     const focusedCardId = useFocusedCardId();
     const sketchActive = useSketchInteractionActive();
     const sketchEnabled = isNudgeUiDev() && runtimeConfig.demo !== true;
+    const canvasIterationsEnabled = isNudgeUiFeatureEnabled(runtimeConfig.features, "canvasIterations");
     const sketchAvailable = sketchEnabled && getActiveCanvasFrame() !== null;
     const boardRef = useRef(null);
+    useCanvasLayoutAnimation(boardRef, cards, camera, presentation);
     const panningRef = useRef(false);
     const panOriginRef = useRef({ x: 0, y: 0 });
     const cameraAtPanStartRef = useRef({ x: 0, y: 0 });
@@ -71,81 +84,75 @@ export function CanvasWorkspace({ primaryUrl }) {
     const activatedTargetRef = 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 [interactionTool, setInteractionTool] = useState("design");
-    const rendererInteractionsEnabled = interactionTool !== "select";
+    const [selectedTool, setInteractionTool] = useState("design");
+    const temporaryAppInteraction = useTemporaryAppInteraction();
+    const interactionTool = temporaryAppInteraction ? "select" : selectedTool;
+    const layoutTransitioning = useCanvasLayoutTransitioning();
+    const rendererInteractionsEnabled = interactionTool !== "select" && !layoutTransitioning;
+    const rendererCursor = interactionTool === "comment" ? "comment" : "design";
+    const boardCursor = boardCursorClass === "is-grabbing"
+        ? "grabbing"
+        : boardCursorClass !== ""
+            ? PAN_CURSOR
+            : interactionTool === "comment"
+                ? createCommentCursor(boardRef.current)
+                : interactionTool === "design"
+                    ? DESIGN_SELECT_CURSOR
+                    : undefined;
     const linksOpenInCards = interactionTool === "select" && presentation === "canvas";
     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)
@@ -157,7 +164,16 @@ export function CanvasWorkspace({ primaryUrl }) {
             width: board.clientWidth,
             height: board.clientHeight,
         };
-        const primaryCard = activateIframeWorkspace(primaryUrl, viewport);
+        const primaryCard = activateIframeWorkspace(primaryUrl, viewport, {
+            replaceActiveCard: presentation === "focus" && runtimeConfig.demo !== true,
+            preserveIterationFocus: true,
+        });
+        if (primaryCard && cards.length === 0 && runtimeConfig.demo !== true) {
+            setBoardCamera({
+                x: 40, y: 120,
+                zoom: Math.max(0.25, Math.min(0.9, (viewport.width - 80) / primaryCard.width, (viewport.height - 160) / primaryCard.height)),
+            });
+        }
         if (runtimeConfig.demo === true && primaryCard && !demoSeededRef.current) {
             demoSeededRef.current = true;
             const demoPages = runtimeConfig.demoPages ?? [];
@@ -201,7 +217,7 @@ export function CanvasWorkspace({ primaryUrl }) {
             }
             focusCard(primaryCard.id);
         }
-    }, [primaryUrl, cards.length, runtimeConfig.demo, runtimeConfig.demoPages, runtimeConfig.demoCardLabels]);
+    }, [primaryUrl, cards.length, presentation, runtimeConfig.demo, runtimeConfig.demoPages, runtimeConfig.demoCardLabels]);
     useEffect(() => {
         if (primaryUrl && activatedTargetRef.current !== primaryUrl)
             return;
@@ -209,7 +225,7 @@ export function CanvasWorkspace({ primaryUrl }) {
         const activeCard = cards.find((card) => card.id === activeCardId);
         if (!activeCard)
             return;
-        const editorUrl = createNudgeUiEditorUrl(activeCard.url);
+        const editorUrl = createNudgeUiEditorUrl(contentSourceUrl(activeCard.content));
         if (window.location.href !== editorUrl) {
             window.history.replaceState(window.history.state, "", editorUrl);
         }
@@ -222,9 +238,10 @@ export function CanvasWorkspace({ primaryUrl }) {
             workspaceId: WORKSPACE_ID,
             cardId,
             spaceHeld,
+            cursor: spaceHeld ? "drag" : rendererCursor,
         }, window.location.origin);
-    }, []);
-    const sendInspectorInteractionState = useCallback((iframe, cardId, open, interactionsEnabled) => {
+    }, [rendererCursor]);
+    const sendInspectorInteractionState = useCallback((iframe, cardId, open, interactionsEnabled, cursor) => {
         iframe.contentWindow?.postMessage({
             type: "inspector-interaction-state",
             protocolVersion: PROTOCOL_VERSION,
@@ -233,6 +250,8 @@ export function CanvasWorkspace({ primaryUrl }) {
             cardId,
             open,
             interactionsEnabled,
+            cursor,
+            commentCursor: cursor === "comment" ? createCommentCursor(boardRef.current) : undefined,
         }, window.location.origin);
     }, []);
     const sendLinkTargetState = useCallback((iframe, cardId, openInCard) => {
@@ -253,15 +272,16 @@ export function CanvasWorkspace({ primaryUrl }) {
             workspaceId: WORKSPACE_ID,
             cardId,
             enabled,
+            panScroll: enabled && interactionTool !== "select",
         }, window.location.origin);
-    }, []);
+    }, [interactionTool]);
     useEffect(() => {
         for (const [cardId, iframe] of getRegisteredFrames()) {
-            sendInspectorInteractionState(iframe, cardId, inspectorOpen, rendererInteractionsEnabled);
+            sendInspectorInteractionState(iframe, cardId, inspectorOpen, rendererInteractionsEnabled, rendererCursor);
             sendBoardGestureState(iframe, cardId, presentation === "canvas");
             sendLinkTargetState(iframe, cardId, linksOpenInCards);
         }
-    }, [inspectorOpen, linksOpenInCards, presentation, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sendLinkTargetState]);
+    }, [inspectorOpen, linksOpenInCards, presentation, rendererCursor, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sendLinkTargetState]);
     const broadcastPanModifier = useCallback((spaceHeld) => {
         for (const [cardId, iframe] of getRegisteredFrames()) {
             sendPanModifier(iframe, cardId, spaceHeld);
@@ -273,6 +293,12 @@ export function CanvasWorkspace({ primaryUrl }) {
             return;
         setBoardCamera(zoomCameraAtPointer(getBoardCamera(), point, board.getBoundingClientRect(), deltaY));
     }, []);
+    const panCanvasByWheel = useCallback((deltaX, deltaY) => {
+        if (!Number.isFinite(deltaX) || !Number.isFinite(deltaY))
+            return;
+        const camera = getBoardCamera();
+        setBoardCamera({ ...camera, x: camera.x - deltaX, y: camera.y - deltaY });
+    }, []);
     const fitCanvasToBoard = useCallback(() => {
         const board = boardRef.current;
         fitAllCards(board ? { width: board.clientWidth, height: board.clientHeight } : undefined);
@@ -310,6 +336,14 @@ export function CanvasWorkspace({ primaryUrl }) {
         setBoardCursorClass("");
     }, [broadcastPanModifier, endPanning]);
     const handleToolChange = useCallback((nextTool) => {
+        if (nextTool === "select" && selectedTool === "select") {
+            setInteractionTool("design");
+            stopPanMode();
+            return;
+        }
+        if (nextTool === "select") {
+            setSelectedElement(null);
+        }
         if (nextTool === "sketch") {
             if (!sketchEnabled)
                 return;
@@ -317,27 +351,52 @@ export function CanvasWorkspace({ primaryUrl }) {
             if (!hostElement)
                 return;
             stopPanMode();
+            setCommentToolActive(false);
             setInteractionTool(nextTool);
             startSketchCapture(hostElement);
             return;
         }
         if (sketchActive)
             cancelSketchInteraction();
-        if (nextTool === "pan") {
-            if (presentation === "focus") {
-                const board = boardRef.current;
-                setCanvasPresentation("canvas", board ? { width: board.clientWidth, height: board.clientHeight } : undefined);
-            }
-            setInteractionTool(nextTool);
-            spaceHeldRef.current = true;
-            broadcastPanModifier(true);
-            if (!panningRef.current)
-                setBoardCursorClass("is-grabbable");
-            return;
-        }
+        setCommentToolActive(nextTool === "comment");
         setInteractionTool(nextTool);
         stopPanMode();
-    }, [broadcastPanModifier, presentation, sketchActive, sketchEnabled, stopPanMode]);
+    }, [selectedTool, sketchActive, sketchEnabled, stopPanMode]);
+    useEffect(() => () => setCommentToolActive(false), []);
+    useEffect(() => {
+        setCommentToolActive(interactionTool === "comment");
+        if (temporaryAppInteraction)
+            stopPanMode();
+    }, [interactionTool, temporaryAppInteraction, stopPanMode]);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (mode === "canvas" && event.code === APP_INTERACTION_KEY && !event.repeat && !isEditableEvent(event))
+                setTemporaryAppInteraction(true);
+        };
+        const onKeyUp = (event) => {
+            if (event.code === APP_INTERACTION_KEY)
+                setTemporaryAppInteraction(false);
+        };
+        const onBlur = () => {
+            if (!document.hasFocus())
+                setTemporaryAppInteraction(false);
+        };
+        const onVisibility = () => {
+            if (document.visibilityState === "hidden")
+                setTemporaryAppInteraction(false);
+        };
+        window.addEventListener("keydown", onKeyDown, true);
+        window.addEventListener("keyup", onKeyUp, true);
+        window.addEventListener("blur", onBlur);
+        document.addEventListener("visibilitychange", onVisibility);
+        return () => {
+            window.removeEventListener("keydown", onKeyDown, true);
+            window.removeEventListener("keyup", onKeyUp, true);
+            window.removeEventListener("blur", onBlur);
+            document.removeEventListener("visibilitychange", onVisibility);
+            setTemporaryAppInteraction(false);
+        };
+    }, [mode]);
     useEffect(() => {
         if (mode !== "canvas")
             return;
@@ -356,8 +415,21 @@ export function CanvasWorkspace({ primaryUrl }) {
     const handleZoomStep = useCallback((direction) => {
         if (presentation === "focus") {
             if (direction < 0) {
-                const board = boardRef.current;
-                setCanvasPresentation("canvas", board ? { width: board.clientWidth, height: board.clientHeight } : undefined);
+                batchCanvasChanges(() => {
+                    const board = boardRef.current;
+                    const cards = getCanvasCards();
+                    const activeId = getSelectedCardId() ?? getFocusedCardId();
+                    const card = cards.find((candidate) => candidate.id === activeId) ?? cards[0];
+                    if (board && card) {
+                        const zoom = 0.9;
+                        setBoardCamera({
+                            x: board.clientWidth / 2 - (card.x + card.width / 2) * zoom,
+                            y: board.clientHeight / 2 - (card.y + card.height / 2) * zoom,
+                            zoom,
+                        });
+                    }
+                    setCanvasPresentation("canvas");
+                });
             }
             return;
         }
@@ -373,6 +445,23 @@ export function CanvasWorkspace({ primaryUrl }) {
         focusCard(cardId);
         setCanvasPresentation("focus");
     }, []);
+    const duplicateDesign = useCallback((cardId) => {
+        const duplicate = addLinkedFrame(cardId);
+        if (!duplicate)
+            return;
+        setSelectedElement(null);
+        setCanvasPresentation("canvas");
+        const board = boardRef.current;
+        focusCanvasCards([duplicate.id], board ? { width: board.clientWidth, height: board.clientHeight } : undefined);
+    }, []);
+    const createIteration = useCallback(async (cardId, position) => {
+        const iteration = await createWorkspaceIteration(cardId, position);
+        setSelectedElement(null);
+        const board = boardRef.current;
+        if (board && !position)
+            focusCanvasCards([iteration.id], { width: board.clientWidth, height: board.clientHeight });
+        return iteration.id;
+    }, []);
     useEffect(() => {
         if (!sketchActive && interactionTool === "sketch") {
             setInteractionTool("design");
@@ -402,6 +491,11 @@ export function CanvasWorkspace({ primaryUrl }) {
         return subscribeCanvasRendererMessages(({ cardId, iframe, identity, message: msg }) => {
             if (msg.type === "renderer-hello")
                 return;
+            if (msg.type === "app-interaction-modifier") {
+                if (mode === "canvas")
+                    setTemporaryAppInteraction(msg.held === true);
+                return;
+            }
             if (isKeyboardShortcutMessage(msg, identity)) {
                 if (msg.phase === "keydown") {
                     const nextTool = canvasToolForCode(msg.code);
@@ -412,11 +506,14 @@ export function CanvasWorkspace({ primaryUrl }) {
             }
             const frame = { cardId, iframe };
             const syncActiveFrameUrl = (url) => {
-                updateCardUrl(frame.cardId, url);
-                const activeCardId = getSelectedCardId() ?? getFocusedCardId() ?? getCanvasCards()[0]?.id;
-                if (activeCardId !== frame.cardId && getCanvasCards().length !== 1)
+                if (getCanvasCards().some((card) => card.id === frame.cardId && iterationId(card.content)))
                     return;
-                window.history.replaceState(window.history.state, "", createNudgeUiEditorUrl(url));
+                const activeCardId = getSelectedCardId() ?? getFocusedCardId() ?? getCanvasCards()[0]?.id;
+                if (activeCardId === frame.cardId || getCanvasCards().length === 1) {
+                    activatedTargetRef.current = url;
+                    window.history.replaceState(window.history.state, "", createNudgeUiEditorUrl(url));
+                }
+                updateCardUrl(frame.cardId, url);
             };
             if (isProjectionAppliedMessage(msg, identity)) {
                 recordCanvasProjectionApplied(frame.cardId, msg.revision);
@@ -425,10 +522,12 @@ export function CanvasWorkspace({ primaryUrl }) {
                 if (isOriginalPreviewActive())
                     return;
                 const frameDocument = frame.iframe.contentDocument;
-                if (frameDocument && isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision)) {
-                    const attempt = beginPreviewAttempt(getCanvasPreviewDocument(frame.cardId), getWorkspaceChanges().revision);
+                const plan = getCanonicalFrameProjection(frame.cardId, msg.revision);
+                const draft = getDraftForCard(frame.cardId);
+                if (frameDocument && plan && draft && isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision)) {
+                    const attempt = beginPreviewAttempt(getCanvasPreviewDocument(frame.cardId), plan.draftRevision);
                     if (attempt) {
-                        for (const change of getChangesList()) {
+                        for (const change of draft.contents.changes) {
                             if (!isPreviewableChange(change))
                                 continue;
                             const result = verifyManagedStyleProjection(change, null, frameDocument);
@@ -450,15 +549,21 @@ export function CanvasWorkspace({ primaryUrl }) {
                 return;
             }
             if (isStructuralProjectionReportMessage(msg, identity)) {
-                recordCanvasStructuralProjectionReports(frame.cardId, msg.revision, msg.reports);
+                const plan = getCanonicalFrameProjection(frame.cardId, msg.revision);
+                if (plan)
+                    recordCanvasStructuralProjectionReports(frame.cardId, msg.revision, msg.reports, plan);
                 return;
             }
             if (isRenderedInstanceProjectionReportMessage(msg, identity)) {
-                recordCanvasRenderedInstanceProjectionReports(frame.cardId, msg.revision, msg.reports);
+                const plan = getCanonicalFrameProjection(frame.cardId, msg.revision);
+                if (plan)
+                    recordCanvasRenderedInstanceProjectionReports(frame.cardId, msg.revision, msg.reports, plan);
                 return;
             }
             if (isTextProjectionReportMessage(msg, identity)) {
-                recordCanvasTextProjectionReports(frame.cardId, msg.revision, msg.reports);
+                const plan = getCanonicalFrameProjection(frame.cardId, msg.revision);
+                if (plan)
+                    recordCanvasTextProjectionReports(frame.cardId, msg.revision, msg.reports, plan);
                 return;
             }
             if (msg.type === "frame-ready") {
@@ -467,7 +572,7 @@ export function CanvasWorkspace({ primaryUrl }) {
                 // 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);
+                sendInspectorInteractionState(frame.iframe, frame.cardId, inspectorOpen, rendererInteractionsEnabled, spaceHeldRef.current ? "drag" : rendererCursor);
                 sendBoardGestureState(frame.iframe, frame.cardId, presentation === "canvas");
                 sendLinkTargetState(frame.iframe, frame.cardId, linksOpenInCards);
             }
@@ -481,6 +586,11 @@ export function CanvasWorkspace({ primaryUrl }) {
                 broadcastPanModifier(msg.spaceHeld);
                 return;
             }
+            if (msg.type === "wheel-pan") {
+                if (presentation === "canvas" && interactionTool !== "select")
+                    panCanvasByWheel(msg.deltaX, msg.deltaY);
+                return;
+            }
             if (msg.type === "zoom") {
                 if (presentation !== "canvas")
                     return;
@@ -531,19 +641,33 @@ export function CanvasWorkspace({ primaryUrl }) {
             }
             if (msg.type !== "navigation-intent")
                 return;
+            if (getCanvasCards().some((card) => card.id === frame.cardId && iterationId(card.content)))
+                return;
             const normalized = normalizeUrl(msg.url);
             if (!normalized || normalized.origin !== window.location.origin)
                 return;
-            if (msg.openInCard === true) {
-                const card = findCardByNormalizedUrl(normalized) ?? addCanvasCard(msg.url);
+            if (msg.openInCard === true && presentation === "canvas") {
+                const card = getCanvasCards().find((candidate) => {
+                    const route = !iterationId(candidate.content) && normalizeUrl(contentSourceUrl(candidate.content));
+                    return route && normalizedUrlKey(route) === normalizedUrlKey(normalized);
+                }) ?? addCanvasCard(msg.url);
                 selectCard(card.id);
+                const board = boardRef.current;
+                if (board)
+                    focusCanvasCards([card.id], { width: board.clientWidth, height: board.clientHeight });
+                return;
+            }
+            if (msg.openInCard === true) {
+                // A delayed renderer message must not create a new frame after entering focus mode.
+                selectCard(frame.cardId);
+                activateIframeWorkspace(msg.url, { width: boardRef.current?.clientWidth ?? window.innerWidth, height: boardRef.current?.clientHeight ?? window.innerHeight }, { replaceActiveCard: true });
                 return;
             }
             const frameDocument = frame.iframe.contentDocument;
             if (frameDocument)
                 disposeInlineTextEdit("route-disposed", frameDocument);
         });
-    }, [broadcastPanModifier, endPanning, handleToolChange, inspectorOpen, linksOpenInCards, movePanning, presentation, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sendLinkTargetState, sendPanModifier, sketchAvailable, startPanning, zoomAtPointer]);
+    }, [broadcastPanModifier, endPanning, handleToolChange, interactionTool, mode, panCanvasByWheel, inspectorOpen, linksOpenInCards, movePanning, presentation, rendererCursor, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sendLinkTargetState, sendPanModifier, sketchAvailable, startPanning, zoomAtPointer]);
     useEffect(() => {
         if (mode === "canvas" && !hasFitAllRan()) {
             if (!fitAllScheduledRef.current) {
@@ -557,14 +681,16 @@ export function CanvasWorkspace({ primaryUrl }) {
     }, [mode, cards.length, inspectorOpen, fitCanvasToBoard]);
     useEffect(() => {
         function onKeyDown(e) {
-            if (mode !== "canvas" || presentation !== "canvas" || sketchActive)
+            if (mode !== "canvas" || presentation !== "canvas" || sketchActive || interactionTool === "select")
                 return;
             if ((e.key === "Delete" || e.key === "Backspace") && !isEditableEvent(e)) {
+                if (e.defaultPrevented || getSelectedElements().length > 0 || getCanvasCards().length < 2)
+                    return;
                 const selectedCardId = getSelectedCardId();
                 if (!selectedCardId)
                     return;
                 e.preventDefault();
-                removeCanvasCard(selectedCardId);
+                removeFrame(selectedCardId);
                 return;
             }
             if (e.code === "Space" && !e.repeat) {
@@ -580,7 +706,7 @@ export function CanvasWorkspace({ primaryUrl }) {
         }
         function onKeyUp(e) {
             if (e.code === "Space") {
-                spaceHeldRef.current = interactionTool === "pan";
+                spaceHeldRef.current = false;
                 broadcastPanModifier(spaceHeldRef.current);
                 if (!panningRef.current) {
                     setBoardCursorClass(spaceHeldRef.current ? "is-grabbable" : "");
@@ -594,6 +720,15 @@ export function CanvasWorkspace({ primaryUrl }) {
             window.removeEventListener("keyup", onKeyUp, true);
         };
     }, [broadcastPanModifier, interactionTool, mode, presentation, sketchActive]);
+    const handleBoardClick = useCallback((event) => {
+        if (presentation !== "canvas" || sketchActive || spaceHeldRef.current || panningRef.current)
+            return;
+        if (event.target === event.currentTarget
+            || (event.target instanceof HTMLElement && event.target.dataset.test === "canvas-board-content")) {
+            setSelectedElement(null);
+            deselectCard();
+        }
+    }, [presentation, sketchActive]);
     const handleBoardPointerDown = useCallback((e) => {
         if (presentation !== "canvas" || sketchActive)
             return;
@@ -618,22 +753,35 @@ export function CanvasWorkspace({ primaryUrl }) {
         window.addEventListener("pointerup", onUp);
     }, [endPanning, movePanning, presentation, sketchActive, startPanning]);
     useEffect(() => {
-        if (mode !== "canvas" || presentation !== "canvas" || sketchActive)
+        if (mode !== "canvas" || presentation !== "canvas")
             return;
         function handleGlobalWheel(e) {
-            if (!e.ctrlKey && !e.metaKey)
+            const zoom = e.ctrlKey || e.metaKey;
+            const board = boardRef.current;
+            if (zoom && sketchActive)
+                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"));
+            if (!zoom && (interactionTool === "select" || !board || (!path.includes(board) && !overCommentPin)))
                 return;
             e.preventDefault();
             e.stopPropagation();
-            zoomAtPointer({ x: e.clientX, y: e.clientY }, e.deltaY);
+            if (zoom)
+                zoomAtPointer({ x: e.clientX, y: e.clientY }, e.deltaY);
+            else if (board) {
+                const delta = wheelPanDelta(e, { width: board.clientWidth, height: board.clientHeight });
+                panCanvasByWheel(delta.x, delta.y);
+            }
         }
         window.addEventListener("wheel", handleGlobalWheel, { capture: true, passive: false });
         return () => window.removeEventListener("wheel", handleGlobalWheel, { capture: true });
-    }, [mode, presentation, sketchActive, zoomAtPointer]);
+    }, [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));
     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}`.trim(), "data-test": "canvas-board", ref: boardRef, onPointerDown: handleBoardPointerDown, 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("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: {
                                 transform: `translate(${camera.x}px, ${camera.y}px) scale(${camera.zoom})`,
                                 transformOrigin: "0 0",
-                            }, "data-test": "canvas-board-content", children: cards.map((card) => (_jsx(CanvasCard, { card: card, presentation: presentation, presentationCard: card.id === presentationCardId, onShowFocus: showFocus, documentOwner: inspectorSession }, card.id))) }), !sketchActive ? (_jsx(CanvasToolbar, { tool: interactionTool, sketchEnabled: sketchAvailable, onToolChange: handleToolChange })) : null] }) }), 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] }));
+                            }, "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] }));
 }