nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/canvas/CanvasWorkspace.js

@@ -1,30 +1,66 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useCanvasCards, exitCanvas, exitCanvasToCard, addCanvasCard, removeCanvasCard, findCardByNormalizedUrl, focusCard, getSelectedCardId, setBoardCamera, getBoardCamera, fitAllCards, hasFitAllRan, useBoardCamera, } from "./canvasStore.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { CanvasCard } from "./CanvasCard.js";
+import { Button } from "../ui/Button.js";
 import { useCanvasMode } from "./canvasStore.js";
 import { subscribeChanges } from "../changes/changesLog.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 { findCanvasFrameBySource, getRegisteredFrames, PROJECT_ID, projectToAllReadyCards, recordCanvasProjectionApplied, WORKSPACE_ID, } from "./projection.js";
+import { getChangesList, isPreviewableChange } from "../changes/changesLog.js";
+import { changeKey } from "../changes/model.js";
+import { getWorkspaceChanges } from "../changes/workspaceChanges.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 { PROTOCOL_VERSION, isRendererMessageFor, isProjectionAppliedMessage, isRenderedInstanceProjectionReportMessage, isTextProjectionReportMessage, isStructuralProjectionReportMessage, } from "./frameProtocol.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 { iframePointToClientPoint, zoomCameraAtPointer } from "./canvasGestures.js";
-const canvasWorkspaceStyles = ".canvas-workspace {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: #ffffff;\n  pointer-events: auto;\n}\n\n.canvas-workspace__board {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: #ffffff;\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  will-change: transform;\n}\n";
-const canvasCardStyles = ".canvas-card {\n  position: relative;\n}\n\n.canvas-card__frame {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--surface-panel);\n  border-radius: var(--radius-control);\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-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.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: space-between;\n  z-index: 1;\n  cursor: grab;\n}\n\n.canvas-card.is-dragging .canvas-card__toolbar {\n  cursor: grabbing;\n}\n\n.canvas-card__drag-surface {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 0 var(--space-12);\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  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__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  flex-shrink: 0;\n}\n\n.canvas-card__iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\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  bottom: 0;\n  right: 0;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: 4px;\n  cursor: nwse-resize;\n  color: var(--text-muted, #777777);\n  opacity: 0;\n  transition: opacity 150ms ease;\n  touch-action: none;\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: #fff0f0;\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  --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.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";
 import { useInspectorOpen } from "../shell/openStore.js";
 import { isEditableEvent } from "../shell/shortcuts.js";
 import { acknowledgeAgentRendererReady } from "./agentPresentation.js";
 import { useInspectorSession } from "../session/sessionContext.js";
-const WORKSPACE_STYLES = [foundationStyles, canvasWorkspaceStyles, canvasCardStyles].join("\n");
-export function CanvasWorkspace() {
+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 { getActiveCanvasFrame } from "./activeCanvasDocument.js";
+import { startSketchCapture } from "../sketch/SketchWorkspace.js";
+import { cancelSketchInteraction, useSketchInteractionActive } from "../sketch/interaction.js";
+import { isNudgeUiDev } from "../runtime/devFlag.js";
+const WORKSPACE_STYLES = [foundationStyles, canvasWorkspaceStyles, canvasCardStyles, canvasToolbarStyles].join("\n");
+const PRESENTATION_TRANSITION_MS = 200;
+function snapshotRect(rect) {
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+export function CanvasWorkspace({ primaryUrl }) {
     const mode = useCanvasMode();
+    const runtimeConfig = useNudgeUiRuntimeConfig();
     const inspectorSession = useInspectorSession();
     const inspectorOpen = useInspectorOpen();
     const cards = useCanvasCards();
     const camera = useBoardCamera();
+    const presentation = useCanvasPresentation();
+    const presentationTransitioning = useCanvasPresentationTransitioning();
+    const selectedCardId = useSelectedCardId();
+    const focusedCardId = useFocusedCardId();
+    const sketchActive = useSketchInteractionActive();
+    const sketchEnabled = isNudgeUiDev() && runtimeConfig.demo !== true;
+    const sketchAvailable = sketchEnabled && getActiveCanvasFrame() !== null;
     const boardRef = useRef(null);
     const panningRef = useRef(false);
     const panOriginRef = useRef({ x: 0, y: 0 });
@@ -32,7 +68,152 @@ export function CanvasWorkspace() {
     const framePanContextRef = useRef(null);
     const spaceHeldRef = useRef(false);
     const fitAllScheduledRef = useRef(false);
+    const activatedTargetRef = useRef(null);
+    const demoSeededRef = useRef(false);
+    const previousPresentationRef = useRef(presentation);
+    const focusCardRectRef = useRef(null);
+    const canvasEntryAnimationRef = useRef(null);
     const [boardCursorClass, setBoardCursorClass] = useState("");
+    const [interactionTool, setInteractionTool] = useState("design");
+    const rendererInteractionsEnabled = interactionTool !== "select";
+    const linksOpenInCards = interactionTool === "select" && presentation === "canvas";
+    const presentationCardId = selectedCardId ?? focusedCardId ?? cards[0]?.id ?? null;
+    useLayoutEffect(() => {
+        const board = boardRef.current;
+        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]);
+    useLayoutEffect(() => {
+        const board = boardRef.current;
+        if (!primaryUrl || !board)
+            return;
+        if (activatedTargetRef.current === primaryUrl && cards.length > 0)
+            return;
+        activatedTargetRef.current = primaryUrl;
+        const viewport = {
+            width: board.clientWidth,
+            height: board.clientHeight,
+        };
+        const primaryCard = activateIframeWorkspace(primaryUrl, viewport);
+        if (runtimeConfig.demo === true && primaryCard && !demoSeededRef.current) {
+            demoSeededRef.current = true;
+            const demoPages = runtimeConfig.demoPages ?? [];
+            const demoCardLabels = runtimeConfig.demoCardLabels ?? [];
+            const orderedDemoCards = demoCardLabels.length > 0;
+            const seededCards = [];
+            const demoCardWidth = primaryCard.width;
+            let nextX = 0;
+            for (const [index, route] of demoPages.entries()) {
+                const url = new URL(route, primaryUrl);
+                if (url.origin !== window.location.origin)
+                    continue;
+                const card = activateIframeWorkspace(url.href, viewport);
+                if (!card)
+                    continue;
+                resizeCard(card.id, demoCardWidth, 900);
+                seededCards.push(card);
+                if (!orderedDemoCards) {
+                    setCardPosition(card.id, nextX, 0);
+                    nextX += demoCardWidth + CARD_GAP;
+                }
+                if (orderedDemoCards && demoCardLabels[index]) {
+                    updateCardTitle(card.id, demoCardLabels[index]);
+                }
+            }
+            if (orderedDemoCards) {
+                resizeCard(primaryCard.id, demoCardWidth, primaryCard.height);
+                let layoutX = 0;
+                // Read each card's final width so restored or resized cards cannot overlap.
+                const orderedCardIds = new Set([...seededCards.map((card) => card.id), primaryCard.id]);
+                for (const cardId of orderedCardIds) {
+                    const card = getCanvasCards().find((candidate) => candidate.id === cardId);
+                    if (!card)
+                        continue;
+                    setCardPosition(card.id, layoutX, 0);
+                    layoutX += card.width + CARD_GAP;
+                }
+                const primaryLabel = demoCardLabels[demoPages.length];
+                if (primaryLabel)
+                    updateCardTitle(primaryCard.id, primaryLabel);
+            }
+            focusCard(primaryCard.id);
+        }
+    }, [primaryUrl, cards.length, runtimeConfig.demo, runtimeConfig.demoPages, runtimeConfig.demoCardLabels]);
+    useEffect(() => {
+        if (primaryUrl && activatedTargetRef.current !== primaryUrl)
+            return;
+        const activeCardId = selectedCardId ?? focusedCardId ?? cards[0]?.id;
+        const activeCard = cards.find((card) => card.id === activeCardId);
+        if (!activeCard)
+            return;
+        const editorUrl = createNudgeUiEditorUrl(activeCard.url);
+        if (window.location.href !== editorUrl) {
+            window.history.replaceState(window.history.state, "", editorUrl);
+        }
+    }, [cards, focusedCardId, primaryUrl, selectedCardId]);
     const sendPanModifier = useCallback((iframe, cardId, spaceHeld) => {
         iframe.contentWindow?.postMessage({
             type: "pan-modifier",
@@ -43,6 +224,44 @@ export function CanvasWorkspace() {
             spaceHeld,
         }, window.location.origin);
     }, []);
+    const sendInspectorInteractionState = useCallback((iframe, cardId, open, interactionsEnabled) => {
+        iframe.contentWindow?.postMessage({
+            type: "inspector-interaction-state",
+            protocolVersion: PROTOCOL_VERSION,
+            projectId: PROJECT_ID,
+            workspaceId: WORKSPACE_ID,
+            cardId,
+            open,
+            interactionsEnabled,
+        }, 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);
+    }, []);
+    const sendBoardGestureState = useCallback((iframe, cardId, enabled) => {
+        iframe.contentWindow?.postMessage({
+            type: "board-gesture-state",
+            protocolVersion: PROTOCOL_VERSION,
+            projectId: PROJECT_ID,
+            workspaceId: WORKSPACE_ID,
+            cardId,
+            enabled,
+        }, window.location.origin);
+    }, []);
+    useEffect(() => {
+        for (const [cardId, iframe] of getRegisteredFrames()) {
+            sendInspectorInteractionState(iframe, cardId, inspectorOpen, rendererInteractionsEnabled);
+            sendBoardGestureState(iframe, cardId, presentation === "canvas");
+            sendLinkTargetState(iframe, cardId, linksOpenInCards);
+        }
+    }, [inspectorOpen, linksOpenInCards, presentation, rendererInteractionsEnabled, sendBoardGestureState, sendInspectorInteractionState, sendLinkTargetState]);
     const broadcastPanModifier = useCallback((spaceHeld) => {
         for (const [cardId, iframe] of getRegisteredFrames()) {
             sendPanModifier(iframe, cardId, spaceHeld);
@@ -84,56 +303,177 @@ export function CanvasWorkspace() {
         panningRef.current = false;
         setBoardCursorClass(spaceHeldRef.current ? "is-grabbable" : "");
     }, []);
+    const stopPanMode = useCallback(() => {
+        spaceHeldRef.current = false;
+        broadcastPanModifier(false);
+        endPanning();
+        setBoardCursorClass("");
+    }, [broadcastPanModifier, endPanning]);
+    const handleToolChange = useCallback((nextTool) => {
+        if (nextTool === "sketch") {
+            if (!sketchEnabled)
+                return;
+            const hostElement = getActiveCanvasFrame();
+            if (!hostElement)
+                return;
+            stopPanMode();
+            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;
+        }
+        setInteractionTool(nextTool);
+        stopPanMode();
+    }, [broadcastPanModifier, presentation, sketchActive, sketchEnabled, stopPanMode]);
+    useEffect(() => {
+        if (mode !== "canvas")
+            return;
+        function onKeyDown(event) {
+            if (isEditableEvent(event))
+                return;
+            const nextTool = canvasToolForEvent(event);
+            if (!nextTool || (nextTool === "sketch" && !sketchAvailable))
+                return;
+            event.preventDefault();
+            handleToolChange(nextTool);
+        }
+        window.addEventListener("keydown", onKeyDown, true);
+        return () => window.removeEventListener("keydown", onKeyDown, true);
+    }, [handleToolChange, mode, sketchAvailable]);
+    const handleZoomStep = useCallback((direction) => {
+        if (presentation === "focus") {
+            if (direction < 0) {
+                const board = boardRef.current;
+                setCanvasPresentation("canvas", board ? { width: board.clientWidth, height: board.clientHeight } : undefined);
+            }
+            return;
+        }
+        const nextZoom = adjacentCanvasZoomLevel(getBoardCamera().zoom, direction);
+        if (nextZoom === null)
+            return;
+        setBoardCamera({ ...getBoardCamera(), zoom: nextZoom });
+    }, [presentation]);
+    const showCanvas = useCallback(() => {
+        handleZoomStep(-1);
+    }, [handleZoomStep]);
+    const showFocus = useCallback((cardId) => {
+        focusCard(cardId);
+        setCanvasPresentation("focus");
+    }, []);
+    useEffect(() => {
+        if (!sketchActive && interactionTool === "sketch") {
+            setInteractionTool("design");
+        }
+    }, [interactionTool, sketchActive]);
+    useLayoutEffect(() => {
+        if (presentation !== "focus")
+            return;
+        endPanning();
+        spaceHeldRef.current = false;
+        setBoardCursorClass("");
+        broadcastPanModifier(false);
+    }, [broadcastPanModifier, endPanning, presentation]);
     useEffect(() => {
-        return subscribeChanges(() => {
+        const stopChanges = subscribeChanges(() => {
+            projectToAllReadyCards();
+        });
+        const stopPreview = subscribeOriginalPreview(() => {
             projectToAllReadyCards();
         });
+        return () => {
+            stopChanges();
+            stopPreview();
+        };
     }, []);
     useEffect(() => {
-        function onMessage(event) {
-            if (event.origin !== window.location.origin)
-                return;
-            if (!event.data || typeof event.data !== "object")
+        return subscribeCanvasRendererMessages(({ cardId, iframe, identity, message: msg }) => {
+            if (msg.type === "renderer-hello")
                 return;
-            const frame = findCanvasFrameBySource(event.source);
-            if (!frame)
-                return;
-            if (!isRendererMessageFor(event.data, {
-                projectId: PROJECT_ID,
-                workspaceId: WORKSPACE_ID,
-                cardId: frame.cardId,
-            }))
+            if (isKeyboardShortcutMessage(msg, identity)) {
+                if (msg.phase === "keydown") {
+                    const nextTool = canvasToolForCode(msg.code);
+                    if (nextTool && (nextTool !== "sketch" || sketchAvailable))
+                        handleToolChange(nextTool);
+                }
                 return;
-            const identity = {
-                projectId: PROJECT_ID,
-                workspaceId: WORKSPACE_ID,
-                cardId: frame.cardId,
+            }
+            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)
+                    return;
+                window.history.replaceState(window.history.state, "", createNudgeUiEditorUrl(url));
             };
-            if (isProjectionAppliedMessage(event.data, identity)) {
-                recordCanvasProjectionApplied(frame.cardId, event.data.revision);
+            if (isProjectionAppliedMessage(msg, identity)) {
+                recordCanvasProjectionApplied(frame.cardId, msg.revision);
+                // While hold-to-view-original is active the frame intentionally shows
+                // the page without inspector changes; skip conflict verification.
+                if (isOriginalPreviewActive())
+                    return;
+                const frameDocument = frame.iframe.contentDocument;
+                if (frameDocument && isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision)) {
+                    const attempt = beginPreviewAttempt(getCanvasPreviewDocument(frame.cardId), getWorkspaceChanges().revision);
+                    if (attempt) {
+                        for (const change of getChangesList()) {
+                            if (!isPreviewableChange(change))
+                                continue;
+                            const result = verifyManagedStyleProjection(change, null, frameDocument);
+                            if (result) {
+                                publishPreviewDiagnostic(attempt, changeKey(change), result);
+                                if (result.status === "conflict" && result.reason === "animation") {
+                                    window.setTimeout(() => {
+                                        if (!isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision))
+                                            return;
+                                        const settled = verifyManagedStyleProjection(change, null, frameDocument);
+                                        if (settled)
+                                            publishPreviewDiagnostic(attempt, changeKey(change), settled);
+                                    }, 300);
+                                }
+                            }
+                        }
+                    }
+                }
                 return;
             }
-            if (isStructuralProjectionReportMessage(event.data, identity)) {
-                recordCanvasStructuralProjectionReports(frame.cardId, event.data.revision, event.data.reports);
+            if (isStructuralProjectionReportMessage(msg, identity)) {
+                recordCanvasStructuralProjectionReports(frame.cardId, msg.revision, msg.reports);
                 return;
             }
-            if (isRenderedInstanceProjectionReportMessage(event.data, identity)) {
-                recordCanvasRenderedInstanceProjectionReports(frame.cardId, event.data.revision, event.data.reports);
+            if (isRenderedInstanceProjectionReportMessage(msg, identity)) {
+                recordCanvasRenderedInstanceProjectionReports(frame.cardId, msg.revision, msg.reports);
                 return;
             }
-            if (isTextProjectionReportMessage(event.data, identity)) {
-                recordCanvasTextProjectionReports(frame.cardId, event.data.revision, event.data.reports);
+            if (isTextProjectionReportMessage(msg, identity)) {
+                recordCanvasTextProjectionReports(frame.cardId, msg.revision, msg.reports);
                 return;
             }
-            // SAFETY: isRendererMessageFor validated the frame identity and message shape above.
-            const msg = event.data;
             if (msg.type === "frame-ready") {
                 acknowledgeAgentRendererReady(frame.cardId);
+                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);
+                sendBoardGestureState(frame.iframe, frame.cardId, presentation === "canvas");
+                sendLinkTargetState(frame.iframe, frame.cardId, linksOpenInCards);
             }
             if (msg.type === "pan-modifier") {
+                if (presentation !== "canvas")
+                    return;
                 spaceHeldRef.current = msg.spaceHeld;
                 if (!panningRef.current) {
                     setBoardCursorClass(msg.spaceHeld ? "is-grabbable" : "");
@@ -142,6 +482,8 @@ export function CanvasWorkspace() {
                 return;
             }
             if (msg.type === "zoom") {
+                if (presentation !== "canvas")
+                    return;
                 const iframeRect = frame.iframe.getBoundingClientRect();
                 const point = iframePointToClientPoint(iframeRect, msg.point, getBoardCamera().zoom);
                 zoomAtPointer(point, msg.deltaY);
@@ -179,12 +521,12 @@ export function CanvasWorkspace() {
                 endPanning();
                 return;
             }
-            if (msg.type === "external-navigation") {
-                const destination = normalizeUrl(msg.url);
-                if (!destination || destination.origin === window.location.origin)
-                    return;
-                exitCanvas();
-                window.location.href = msg.url;
+            if (msg.type === "frame-metadata") {
+                const frameDocument = frame.iframe.contentDocument;
+                if (frameDocument)
+                    disposeInlineTextEdit("route-disposed", frameDocument);
+                if (msg.url)
+                    syncActiveFrameUrl(msg.url);
                 return;
             }
             if (msg.type !== "navigation-intent")
@@ -192,17 +534,16 @@ export function CanvasWorkspace() {
             const normalized = normalizeUrl(msg.url);
             if (!normalized || normalized.origin !== window.location.origin)
                 return;
-            const existing = findCardByNormalizedUrl(normalized);
-            if (existing) {
-                focusCard(existing.id);
-            }
-            else {
-                addCanvasCard(msg.url);
+            if (msg.openInCard === true) {
+                const card = findCardByNormalizedUrl(normalized) ?? addCanvasCard(msg.url);
+                selectCard(card.id);
+                return;
             }
-        }
-        window.addEventListener("message", onMessage);
-        return () => window.removeEventListener("message", onMessage);
-    }, [broadcastPanModifier, endPanning, movePanning, sendPanModifier, startPanning, zoomAtPointer]);
+            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]);
     useEffect(() => {
         if (mode === "canvas" && !hasFitAllRan()) {
             if (!fitAllScheduledRef.current) {
@@ -216,7 +557,7 @@ export function CanvasWorkspace() {
     }, [mode, cards.length, inspectorOpen, fitCanvasToBoard]);
     useEffect(() => {
         function onKeyDown(e) {
-            if (mode !== "canvas")
+            if (mode !== "canvas" || presentation !== "canvas" || sketchActive)
                 return;
             if ((e.key === "Delete" || e.key === "Backspace") && !isEditableEvent(e)) {
                 const selectedCardId = getSelectedCardId();
@@ -227,9 +568,7 @@ export function CanvasWorkspace() {
                 return;
             }
             if (e.code === "Space" && !e.repeat) {
-                // SAFETY: keyboard event targets are HTMLElements in the workspace DOM.
-                const target = e.target;
-                if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable))
+                if (isEditableEvent(e))
                     return;
                 e.preventDefault();
                 spaceHeldRef.current = true;
@@ -241,10 +580,10 @@ export function CanvasWorkspace() {
         }
         function onKeyUp(e) {
             if (e.code === "Space") {
-                spaceHeldRef.current = false;
-                broadcastPanModifier(false);
+                spaceHeldRef.current = interactionTool === "pan";
+                broadcastPanModifier(spaceHeldRef.current);
                 if (!panningRef.current) {
-                    setBoardCursorClass("");
+                    setBoardCursorClass(spaceHeldRef.current ? "is-grabbable" : "");
                 }
             }
         }
@@ -254,8 +593,10 @@ export function CanvasWorkspace() {
             window.removeEventListener("keydown", onKeyDown, true);
             window.removeEventListener("keyup", onKeyUp, true);
         };
-    }, [broadcastPanModifier, mode]);
+    }, [broadcastPanModifier, interactionTool, mode, presentation, sketchActive]);
     const handleBoardPointerDown = useCallback((e) => {
+        if (presentation !== "canvas" || sketchActive)
+            return;
         if (panningRef.current)
             return;
         if (!spaceHeldRef.current)
@@ -275,9 +616,9 @@ export function CanvasWorkspace() {
         }
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
-    }, [endPanning, movePanning, startPanning]);
+    }, [endPanning, movePanning, presentation, sketchActive, startPanning]);
     useEffect(() => {
-        if (mode !== "canvas")
+        if (mode !== "canvas" || presentation !== "canvas" || sketchActive)
             return;
         function handleGlobalWheel(e) {
             if (!e.ctrlKey && !e.metaKey)
@@ -288,14 +629,11 @@ export function CanvasWorkspace() {
         }
         window.addEventListener("wheel", handleGlobalWheel, { capture: true, passive: false });
         return () => window.removeEventListener("wheel", handleGlobalWheel, { capture: true });
-    }, [mode, zoomAtPointer]);
-    function handleEdit(card) {
-        exitCanvasToCard(card);
-    }
-    if (mode !== "canvas" || cards.length === 0)
+    }, [mode, presentation, sketchActive, zoomAtPointer]);
+    if (mode !== "canvas")
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "canvas-styles", children: WORKSPACE_STYLES }), _jsx("div", { className: "canvas-workspace", "data-test": "canvas-workspace", style: { right: inspectorOpen ? "min(320px, 100vw)" : 0 }, children: _jsx("div", { className: `canvas-workspace__board ${boardCursorClass}`.trim(), "data-test": "canvas-board", ref: boardRef, onPointerDown: handleBoardPointerDown, children: _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, onEdit: handleEdit, documentOwner: inspectorSession }, card.id))) }) }) })] }));
+    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: {
+                                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] }));
 }