opendevbrowser 0.0.17 → 0.0.18

package/extension/dist/canvas-page.js

@@ -1,5 +1,5 @@
-import { summarizeCanvasProjectionState, normalizeCanvasSessionSummary, normalizeCanvasTargetStateSummaries } from "./canvas/model.js";
-import { buildCanvasAnnotationPayload, describeAnnotationItem } from "./annotation-payload.js";
+import { summarizeCanvasProjectionState, summarizeCanvasHistoryState, readLatestImportProvenance, readSelectedBindingIdentity, normalizeCanvasSessionSummary, normalizeCanvasTargetStateSummaries } from "./canvas/model.js";
+import { buildCanvasAnnotationPayload, describeAnnotationItem, formatAnnotationDispatchReceipt } from "./annotation-payload.js";
 import { DEFAULT_EDITOR_VIEWPORT, computeFittedViewport, computeViewportCanvasCenter, isDefaultEditorViewport } from "./canvas/viewport-fit.js";
 const DB_NAME = "opendevbrowser-canvas";
 const DB_VERSION = 2;
@@ -13,17 +13,66 @@ const metaElement = requiredElement("canvas-meta");
 const toolbarMetaElement = requiredElement("canvas-toolbar-meta");
 const summaryElement = requiredElement("canvas-summary");
 const feedbackElement = requiredElement("canvas-feedback");
+const pageDetailsElement = requiredElement("canvas-page-details");
+const pageSelectElement = requiredElement("canvas-page-select");
+const layersTreeElement = requiredElement("canvas-layers-tree");
 const selectionMetaElement = requiredElement("canvas-selection-meta");
 const stageElement = requiredElement("canvas-stage");
 const stageInnerElement = requiredElement("canvas-stage-inner");
+const stageOverlayElement = requiredElement("canvas-stage-overlay");
 const stageMetaElement = requiredElement("canvas-stage-meta");
+const stageHintElement = requiredElement("canvas-stage-hint");
 const previewElement = requiredElement("canvas-preview");
 const emptyElement = requiredElement("canvas-empty");
+const historyUndoButton = requiredElement("canvas-history-undo");
+const historyRedoButton = requiredElement("canvas-history-redo");
+const panelHistoryUndoButton = requiredElement("canvas-history-panel-undo");
+const panelHistoryRedoButton = requiredElement("canvas-history-panel-redo");
+const historyStatusElement = requiredElement("canvas-history-status");
 const nameInput = requiredElement("canvas-node-name");
 const textInput = requiredElement("canvas-node-text");
+const nodeXInput = requiredElement("canvas-node-x");
+const nodeYInput = requiredElement("canvas-node-y");
+const nodeWidthInput = requiredElement("canvas-node-width");
+const nodeHeightInput = requiredElement("canvas-node-height");
+const paddingInput = requiredElement("canvas-style-padding");
+const gapInput = requiredElement("canvas-style-gap");
+const fontSizeInput = requiredElement("canvas-style-font-size");
+const fontWeightInput = requiredElement("canvas-style-font-weight");
+const lineHeightInput = requiredElement("canvas-style-line-height");
+const colorInput = requiredElement("canvas-style-color");
+const backgroundInput = requiredElement("canvas-style-background");
+const borderColorInput = requiredElement("canvas-style-border-color");
+const borderWidthInput = requiredElement("canvas-style-border-width");
+const borderRadiusInput = requiredElement("canvas-style-border-radius");
+const shadowInput = requiredElement("canvas-style-shadow");
+const bindingKindInput = requiredElement("canvas-binding-kind");
+const bindingComponentInput = requiredElement("canvas-binding-component");
+const bindingSelectorInput = requiredElement("canvas-binding-selector");
+const a11yRoleInput = requiredElement("canvas-a11y-role");
+const a11yLabelInput = requiredElement("canvas-a11y-label");
+const propertiesStatusElement = requiredElement("canvas-properties-status");
+const tokenStatusElement = requiredElement("canvas-token-status");
+const tokenCollectionSelect = requiredElement("canvas-token-collection-select");
+const tokenCollectionNameInput = requiredElement("canvas-token-collection-name");
+const tokenCollectionCreateButton = requiredElement("canvas-token-collection-create");
+const tokenModeSelect = requiredElement("canvas-token-mode-select");
+const tokenModeNameInput = requiredElement("canvas-token-mode-name");
+const tokenModeCreateButton = requiredElement("canvas-token-mode-create");
+const tokenPathInput = requiredElement("canvas-token-path");
+const tokenValueInput = requiredElement("canvas-token-value");
+const tokenAliasInput = requiredElement("canvas-token-alias");
+const tokenBindingPropertySelect = requiredElement("canvas-token-binding-property");
+const tokenSaveButton = requiredElement("canvas-token-save");
+const tokenBindButton = requiredElement("canvas-token-bind");
+const tokenBindingClearButton = requiredElement("canvas-token-binding-clear");
+const tokenSummaryElement = requiredElement("canvas-token-summary");
+const tokenUsageElement = requiredElement("canvas-token-usage");
+const duplicateNodeButton = requiredElement("canvas-duplicate-node");
 const addNoteButton = requiredElement("canvas-add-note");
 const resetViewButton = requiredElement("canvas-reset-view");
 const deleteNodeButton = requiredElement("canvas-delete-node");
+const annotationModeSelect = requiredElement("canvas-annotation-mode");
 const annotationAddButton = requiredElement("canvas-annotation-add");
 const annotationCopyButton = requiredElement("canvas-annotation-copy");
 const annotationSendButton = requiredElement("canvas-annotation-send");
@@ -36,9 +85,18 @@ let currentTabId = null;
 let databasePromise = null;
 let persistTimer = null;
 let fitViewportFrame = null;
+let activePageId = null;
+let annotationMode = "selected";
 let annotationDrafts = [];
+let expandedLayerNodeIds = new Set();
+let selectedTokenCollectionId = "__values__";
+let selectedTokenModeId = "__base__";
+let selectedTokenPath = "";
 let draggingNode = null;
+let layerDragState = null;
 let panningState = null;
+let marqueeState = null;
+let spacePanActive = false;
 void bootstrap();
 async function bootstrap() {
     currentTabId = await getCurrentTabId();
@@ -62,8 +120,11 @@ async function bootstrap() {
     port.postMessage({ type: "canvas-page-ready" });
     bindStageInteractions();
     bindInspector();
+    bindTokenPanel();
     bindToolbar();
     bindAnnotationPanel();
+    bindPageSelector();
+    bindKeyboardShortcuts();
     document.addEventListener("visibilitychange", () => {
         if (document.visibilityState === "hidden") {
             flushPersist();
@@ -74,11 +135,24 @@ async function bootstrap() {
     });
 }
 function bindToolbar() {
+    const handleUndo = () => {
+        requestHistory("undo");
+    };
+    const handleRedo = () => {
+        requestHistory("redo");
+    };
+    historyUndoButton.addEventListener("click", handleUndo);
+    historyRedoButton.addEventListener("click", handleRedo);
+    panelHistoryUndoButton.addEventListener("click", handleUndo);
+    panelHistoryRedoButton.addEventListener("click", handleRedo);
+    duplicateNodeButton.addEventListener("click", () => {
+        duplicateSelectedNode();
+    });
     addNoteButton.addEventListener("click", () => {
         if (!currentState || currentState.pendingMutation) {
             return;
         }
-        const page = currentState.document.pages[0];
+        const page = getActivePage();
         if (!page) {
             return;
         }
@@ -129,7 +203,15 @@ function bindToolbar() {
     });
 }
 function bindAnnotationPanel() {
+    annotationModeSelect.addEventListener("change", () => {
+        annotationMode = annotationModeSelect.value === "region" ? "region" : "selected";
+        renderState();
+    });
     annotationAddButton.addEventListener("click", () => {
+        if (annotationMode === "region") {
+            setCanvasButtonFeedback(annotationAddButton, "Drag on stage");
+            return;
+        }
         addSelectedAnnotationDraft();
     });
     annotationCopyButton.addEventListener("click", () => {
@@ -145,6 +227,71 @@ function bindAnnotationPanel() {
         });
     });
 }
+function bindPageSelector() {
+    pageSelectElement.addEventListener("change", () => {
+        if (!currentState) {
+            return;
+        }
+        const pageId = pageSelectElement.value || null;
+        setActivePage(pageId, { clearSelectionIfMissing: true, broadcast: true });
+    });
+}
+function bindKeyboardShortcuts() {
+    document.addEventListener("keydown", (event) => {
+        if (!currentState) {
+            return;
+        }
+        if (event.key === " ") {
+            if (!isEditableTarget(event.target)) {
+                spacePanActive = true;
+                stageElement.dataset.mode = "panning";
+                event.preventDefault();
+            }
+            return;
+        }
+        if (isEditableTarget(event.target)) {
+            return;
+        }
+        const modifier = event.metaKey || event.ctrlKey;
+        if (modifier && event.key.toLowerCase() === "z") {
+            event.preventDefault();
+            requestHistory(event.shiftKey ? "redo" : "undo");
+            return;
+        }
+        if (modifier && event.key.toLowerCase() === "d") {
+            event.preventDefault();
+            duplicateSelectedNode();
+            return;
+        }
+        if ((event.key === "Delete" || event.key === "Backspace") && currentState.selection.nodeId) {
+            event.preventDefault();
+            deleteNodeButton.click();
+            return;
+        }
+        if (event.key.startsWith("Arrow") && currentState.selection.nodeId && !event.altKey) {
+            event.preventDefault();
+            nudgeSelectedNode(event.key, event.shiftKey ? 10 : 1);
+            return;
+        }
+        if (event.key === "0") {
+            event.preventDefault();
+            fitActivePageViewport();
+            return;
+        }
+        if (event.key === "1") {
+            event.preventDefault();
+            resetZoomToDefault();
+        }
+    });
+    document.addEventListener("keyup", (event) => {
+        if (event.key === " ") {
+            spacePanActive = false;
+            if (!panningState) {
+                stageElement.dataset.mode = "";
+            }
+        }
+    });
+}
 function bindInspector() {
     nameInput.addEventListener("change", () => {
         const node = getSelectedNode();
@@ -168,22 +315,142 @@ function bindInspector() {
                 changes: { "props.text": textInput.value }
             }], currentState.selection);
     });
+    bindFieldCommit(nodeXInput, () => {
+        commitSelectedNodeChanges({ "rect.x": readNumberInput(nodeXInput, getSelectedNode()?.rect.x ?? 0) });
+    });
+    bindFieldCommit(nodeYInput, () => {
+        commitSelectedNodeChanges({ "rect.y": readNumberInput(nodeYInput, getSelectedNode()?.rect.y ?? 0) });
+    });
+    bindFieldCommit(nodeWidthInput, () => {
+        commitSelectedNodeChanges({ "rect.width": Math.max(readNumberInput(nodeWidthInput, getSelectedNode()?.rect.width ?? 1), 1) });
+    });
+    bindFieldCommit(nodeHeightInput, () => {
+        commitSelectedNodeChanges({ "rect.height": Math.max(readNumberInput(nodeHeightInput, getSelectedNode()?.rect.height ?? 1), 1) });
+    });
+    bindFieldCommit(paddingInput, () => {
+        commitSelectedNodeChanges({ "style.padding": readTextInput(paddingInput) });
+    });
+    bindFieldCommit(gapInput, () => {
+        commitSelectedNodeChanges({ "style.gap": readTextInput(gapInput) });
+    });
+    bindFieldCommit(fontSizeInput, () => {
+        commitSelectedNodeChanges({ "style.fontSize": readTextInput(fontSizeInput) });
+    });
+    bindFieldCommit(fontWeightInput, () => {
+        commitSelectedNodeChanges({ "style.fontWeight": readTextInput(fontWeightInput) });
+    });
+    bindFieldCommit(lineHeightInput, () => {
+        commitSelectedNodeChanges({ "style.lineHeight": readTextInput(lineHeightInput) });
+    });
+    bindFieldCommit(colorInput, () => {
+        commitSelectedNodeChanges({ "style.color": readTextInput(colorInput) });
+    });
+    bindFieldCommit(backgroundInput, () => {
+        commitSelectedNodeChanges({ "style.backgroundColor": readTextInput(backgroundInput) });
+    });
+    bindFieldCommit(borderColorInput, () => {
+        commitSelectedNodeChanges({ "style.borderColor": readTextInput(borderColorInput) });
+    });
+    bindFieldCommit(borderWidthInput, () => {
+        commitSelectedNodeChanges({ "style.borderWidth": readTextInput(borderWidthInput) });
+    });
+    bindFieldCommit(borderRadiusInput, () => {
+        commitSelectedNodeChanges({ "style.borderRadius": readTextInput(borderRadiusInput) });
+    });
+    bindFieldCommit(shadowInput, () => {
+        commitSelectedNodeChanges({ "style.boxShadow": readTextInput(shadowInput) });
+    });
+    bindFieldCommit(a11yRoleInput, () => {
+        commitSelectedNodeChanges({ "metadata.accessibility.role": readTextInput(a11yRoleInput) });
+    });
+    bindFieldCommit(a11yLabelInput, () => {
+        commitSelectedNodeChanges({ "metadata.accessibility.label": readTextInput(a11yLabelInput) });
+    });
+    bindFieldCommit(bindingKindInput, () => {
+        commitSelectedBindingPatch();
+    });
+    bindFieldCommit(bindingComponentInput, () => {
+        commitSelectedBindingPatch();
+    });
+    bindFieldCommit(bindingSelectorInput, () => {
+        commitSelectedBindingPatch();
+    });
+}
+function bindTokenPanel() {
+    tokenCollectionSelect.addEventListener("change", () => {
+        selectedTokenCollectionId = tokenCollectionSelect.value || "__values__";
+        selectedTokenModeId = selectedTokenCollectionId === "__values__" ? "__base__" : tokenModeSelect.value || "__base__";
+        syncTokenEditorSelection();
+        renderTokenSummary();
+    });
+    tokenCollectionCreateButton.addEventListener("click", () => {
+        createTokenCollection();
+    });
+    tokenModeSelect.addEventListener("change", () => {
+        selectedTokenModeId = tokenModeSelect.value || "__base__";
+        updateActiveTokenMode();
+        syncTokenEditorSelection();
+        renderTokenSummary();
+    });
+    tokenModeCreateButton.addEventListener("click", () => {
+        createTokenMode();
+    });
+    tokenPathInput.addEventListener("input", () => {
+        selectedTokenPath = normalizeTokenPath(tokenPathInput.value);
+        renderTokenSummary();
+    });
+    tokenSaveButton.addEventListener("click", () => {
+        saveTokenEditor();
+    });
+    tokenBindButton.addEventListener("click", () => {
+        bindSelectedNodeToToken();
+    });
+    tokenBindingClearButton.addEventListener("click", () => {
+        clearSelectedTokenBinding();
+    });
 }
 function bindStageInteractions() {
     stageElement.addEventListener("pointerdown", (event) => {
         const target = event.target instanceof HTMLElement ? event.target.closest("[data-node-id]") : null;
+        const targetNodeId = target?.dataset.nodeId ?? null;
+        if (!currentState) {
+            return;
+        }
+        if (annotationMode === "region" && event.button === 0) {
+            marqueeState = {
+                originClientX: event.clientX,
+                originClientY: event.clientY,
+                currentClientX: event.clientX,
+                currentClientY: event.clientY,
+                targetNodeId
+            };
+            renderStageOverlay();
+            stageElement.setPointerCapture(event.pointerId);
+            return;
+        }
+        if (spacePanActive) {
+            panningState = {
+                originX: event.clientX,
+                originY: event.clientY,
+                startX: currentState.viewport.x,
+                startY: currentState.viewport.y
+            };
+            stageElement.dataset.mode = "panning";
+            stageElement.setPointerCapture(event.pointerId);
+            return;
+        }
         if (target) {
-            const nodeId = target.dataset.nodeId;
-            const node = nodeId ? findNode(currentState?.document ?? null, nodeId) : null;
-            if (!node || !currentState) {
+            const node = targetNodeId ? findNode(currentState.document, targetNodeId) : null;
+            if (!node) {
                 return;
             }
             currentState.selection = {
-                pageId: node.pageId ?? currentState.document.pages[0]?.id ?? null,
+                pageId: node.pageId ?? getActivePage()?.id ?? null,
                 nodeId: node.id,
                 targetId: currentState.selection.targetId,
                 updatedAt: new Date().toISOString()
             };
+            activePageId = node.pageId ?? activePageId;
             draggingNode = {
                 nodeId: node.id,
                 originX: event.clientX,
@@ -196,9 +463,6 @@ function bindStageInteractions() {
             stageElement.setPointerCapture(event.pointerId);
             return;
         }
-        if (!currentState) {
-            return;
-        }
         panningState = {
             originX: event.clientX,
             originY: event.clientY,
@@ -212,6 +476,12 @@ function bindStageInteractions() {
         if (!currentState) {
             return;
         }
+        if (marqueeState) {
+            marqueeState.currentClientX = event.clientX;
+            marqueeState.currentClientY = event.clientY;
+            renderStageOverlay();
+            return;
+        }
         if (draggingNode) {
             const node = findNode(currentState.document, draggingNode.nodeId);
             if (!node) {
@@ -237,10 +507,20 @@ function bindStageInteractions() {
         if (!currentState) {
             draggingNode = null;
             panningState = null;
+            marqueeState = null;
             stageElement.dataset.mode = "";
+            renderStageOverlay();
             return;
         }
-        if (draggingNode && !currentState.pendingMutation) {
+        if (marqueeState) {
+            const completedMarquee = marqueeState;
+            marqueeState = null;
+            renderStageOverlay();
+            if (annotationMode === "region") {
+                commitAnnotationCapture(completedMarquee);
+            }
+        }
+        else if (draggingNode && !currentState.pendingMutation) {
             const node = findNode(currentState.document, draggingNode.nodeId);
             if (node) {
                 applyOptimisticPatch([{
@@ -258,7 +538,7 @@ function bindStageInteractions() {
         }
         draggingNode = null;
         panningState = null;
-        stageElement.dataset.mode = "";
+        stageElement.dataset.mode = spacePanActive ? "panning" : "";
     };
     stageElement.addEventListener("pointerup", endPointerInteraction);
     stageElement.addEventListener("pointercancel", endPointerInteraction);
@@ -486,6 +766,10 @@ function runCanvasPageAction(selector, action) {
 }
 function applyState(state, persist) {
     currentState = state;
+    if (!activePageId || !state.document.pages.some((page) => page.id === activePageId)) {
+        activePageId = state.selection.pageId ?? state.document.pages[0]?.id ?? null;
+    }
+    annotationModeSelect.value = annotationMode;
     titleElement.textContent = state.title;
     renderBadges(state);
     renderMeta(`Document ${state.documentId} updated ${formatTimestamp(state.updatedAt)}`);
@@ -503,22 +787,32 @@ function applyState(state, persist) {
 function renderState() {
     if (!currentState) {
         renderAnnotationPanel();
+        renderHistoryState();
+        renderTokenSummary();
         return;
     }
     const projectionSummary = summarizeCanvasProjectionState(currentState.summary, currentState.targets);
+    const activePage = getActivePage();
     const syncFragments = [
         currentState.pendingMutation ? "sync pending" : "live",
         currentState.summary.codeSyncState ?? null,
         projectionSummary.conflictCount > 0 ? `${projectionSummary.conflictCount} conflict${projectionSummary.conflictCount === 1 ? "" : "s"}` : null
     ].filter((entry) => typeof entry === "string");
-    stageMetaElement.textContent = `${currentState.document.pages[0]?.nodes.length ?? 0} nodes • ${syncFragments.join(" • ")}`;
+    stageMetaElement.textContent = `${activePage?.nodes.length ?? 0} nodes • ${syncFragments.join(" • ")}`;
+    stageHintElement.textContent = annotationMode === "region"
+        ? "Drag on the stage to capture a region, or click a node to capture it."
+        : "Drag to pan. Scroll to zoom. Drag nodes to move them.";
+    renderPagesAndLayers();
+    renderHistoryState();
     renderStage();
     renderInspector();
+    renderTokenSummary();
     syncAnnotationDrafts();
 }
 function renderBadges(state) {
     badgesElement.innerHTML = "";
     const projectionSummary = summarizeCanvasProjectionState(state.summary, state.targets);
+    const latestImport = readLatestImportProvenance(state.summary, state.document);
     for (const label of [
         state.previewState,
         state.previewMode,
@@ -526,7 +820,8 @@ function renderBadges(state) {
         state.pendingMutation ? "sync pending" : "synced",
         state.summary.codeSyncState,
         projectionSummary.activeProjections[0],
-        projectionSummary.conflictCount > 0 ? `${projectionSummary.conflictCount} conflicts` : null
+        projectionSummary.conflictCount > 0 ? `${projectionSummary.conflictCount} conflicts` : null,
+        latestImport ? `import ${latestImport}` : null
     ]) {
         if (typeof label !== "string" || label.trim().length === 0) {
             continue;
@@ -547,6 +842,8 @@ function renderSummary(summary, state) {
     const stylingLibraries = formatSummaryList(readSummaryLibraryList(summary, "styling"));
     const inventorySources = formatSummaryList(readSummaryStringArray(summary.componentSourceKinds));
     const projectionSummary = summarizeCanvasProjectionState(state.summary, state.targets);
+    const appliedStarter = formatAppliedStarterSummary(summary, state.document);
+    const latestImport = readLatestImportProvenance(summary, state.document);
     const items = [
         ["Target", state.targetId],
         ["Session", formatSummaryValue(summary.canvasSessionId)],
@@ -562,10 +859,14 @@ function renderSummary(summary, state) {
         ["Icons", iconLibraries],
         ["Styling", stylingLibraries],
         ["Inventory", `${formatSummaryValue(summary.componentInventoryCount)} mapped`],
+        ["Starters", typeof summary.availableStarterCount === "number" ? `${summary.availableStarterCount} available` : "n/a"],
+        ["Applied starter", appliedStarter],
         ["Inventory sources", inventorySources],
         ["Targets", String(state.targets.length)],
         ["Overlays", String(state.overlayMounts.length)],
-        ["Feedback", String(countFeedbackItems(state.feedback))]
+        ["Feedback", String(countFeedbackItems(state.feedback))],
+        ["History", summarizeCanvasHistoryState(summary)],
+        ["Latest import", latestImport ?? "none"]
     ];
     for (const [label, value] of items) {
         const row = document.createElement("div");
@@ -580,6 +881,21 @@ function renderSummary(summary, state) {
         summaryElement.append(row);
     }
 }
+function formatAppliedStarterSummary(summary, documentState) {
+    const starter = isRecord(documentState.meta.starter) ? documentState.meta.starter : null;
+    const name = summary.starterName
+        ?? (typeof starter?.template === "object" && starter.template && typeof starter.template.name === "string"
+            ? starter.template.name
+            : null);
+    if (!name) {
+        return "none";
+    }
+    const frameworkId = summary.starterFrameworkId
+        ?? (typeof starter?.frameworkId === "string" ? starter.frameworkId : null);
+    const appliedAt = summary.starterAppliedAt
+        ?? (typeof starter?.appliedAt === "string" ? starter.appliedAt : null);
+    return [name, frameworkId, appliedAt].filter((entry) => typeof entry === "string" && entry.trim().length > 0).join(" • ");
+}
 function renderFeedback(events) {
     feedbackElement.innerHTML = "";
     const latest = events.slice(-8).reverse();
@@ -613,25 +929,325 @@ function renderFeedback(events) {
         feedbackElement.append(row);
     }
 }
+function renderHistoryState() {
+    const history = currentState?.summary.history;
+    const canUndo = Boolean(history?.canUndo) && !currentState?.pendingMutation;
+    const canRedo = Boolean(history?.canRedo) && !currentState?.pendingMutation;
+    historyUndoButton.disabled = !canUndo;
+    historyRedoButton.disabled = !canRedo;
+    panelHistoryUndoButton.disabled = !canUndo;
+    panelHistoryRedoButton.disabled = !canRedo;
+    historyStatusElement.textContent = currentState ? summarizeCanvasHistoryState(currentState.summary) : "No history yet";
+}
+function renderPagesAndLayers() {
+    pageSelectElement.innerHTML = "";
+    layersTreeElement.innerHTML = "";
+    if (!currentState) {
+        pageDetailsElement.textContent = "Waiting for canvas state.";
+        const empty = document.createElement("div");
+        empty.className = "canvas-empty-inline";
+        empty.textContent = "No pages loaded.";
+        layersTreeElement.append(empty);
+        return;
+    }
+    const activePage = getActivePage();
+    for (const page of currentState.document.pages) {
+        const option = document.createElement("option");
+        option.value = page.id;
+        option.textContent = `${page.name} (${page.nodes.length})`;
+        option.selected = page.id === activePage?.id;
+        pageSelectElement.append(option);
+    }
+    pageSelectElement.disabled = currentState.document.pages.length <= 1;
+    if (!activePage) {
+        pageDetailsElement.textContent = "No page selected.";
+        const empty = document.createElement("div");
+        empty.className = "canvas-empty-inline";
+        empty.textContent = "No nodes on this page.";
+        layersTreeElement.append(empty);
+        return;
+    }
+    ensureExpandedNodePath(activePage, currentState.selection.nodeId);
+    pageDetailsElement.textContent = `${activePage.path} • ${activePage.nodes.length} nodes`;
+    const rootNodes = getRootNodes(activePage);
+    if (rootNodes.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "canvas-empty-inline";
+        empty.textContent = "No nodes on this page.";
+        layersTreeElement.append(empty);
+        return;
+    }
+    for (const node of rootNodes) {
+        layersTreeElement.append(renderLayerNode(activePage, node, 0));
+    }
+}
+function renderLayerNode(page, node, depth) {
+    const row = document.createElement("div");
+    row.className = "canvas-layer-row";
+    row.dataset.nodeId = node.id;
+    row.dataset.selected = String(currentState?.selection.nodeId === node.id);
+    row.dataset.hidden = String(isNodeHidden(node));
+    row.draggable = true;
+    row.style.marginLeft = `${depth * 14}px`;
+    const head = document.createElement("div");
+    head.className = "canvas-layer-head";
+    const toggleButton = document.createElement("button");
+    toggleButton.className = "canvas-button canvas-layer-toggle";
+    toggleButton.type = "button";
+    toggleButton.textContent = node.childIds.length > 0 ? (expandedLayerNodeIds.has(node.id) ? "−" : "+") : "·";
+    toggleButton.disabled = node.childIds.length === 0;
+    toggleButton.addEventListener("click", (event) => {
+        event.stopPropagation();
+        if (expandedLayerNodeIds.has(node.id)) {
+            expandedLayerNodeIds.delete(node.id);
+        }
+        else {
+            expandedLayerNodeIds.add(node.id);
+        }
+        renderPagesAndLayers();
+    });
+    const visibilityButton = document.createElement("button");
+    visibilityButton.className = "canvas-button canvas-layer-visibility";
+    visibilityButton.type = "button";
+    visibilityButton.textContent = isNodeHidden(node) ? "🙈" : "👁";
+    visibilityButton.addEventListener("click", (event) => {
+        event.stopPropagation();
+        if (!currentState?.pendingMutation) {
+            applyOptimisticPatch([{ op: "node.visibility.set", nodeId: node.id, hidden: !isNodeHidden(node) }], {
+                pageId: page.id,
+                nodeId: node.id,
+                targetId: currentState?.selection.targetId ?? null
+            });
+        }
+    });
+    const main = document.createElement("div");
+    main.className = "canvas-layer-main";
+    main.addEventListener("click", () => {
+        selectNode(node.id, page.id);
+    });
+    const renameInput = document.createElement("input");
+    renameInput.className = "canvas-layer-name-input";
+    renameInput.value = node.name;
+    renameInput.disabled = Boolean(currentState?.pendingMutation);
+    renameInput.addEventListener("click", (event) => {
+        event.stopPropagation();
+    });
+    renameInput.addEventListener("change", () => {
+        if (!currentState?.pendingMutation && renameInput.value.trim().length > 0 && renameInput.value !== node.name) {
+            applyOptimisticPatch([{ op: "node.update", nodeId: node.id, changes: { name: renameInput.value.trim() } }], {
+                pageId: page.id,
+                nodeId: node.id,
+                targetId: currentState?.selection.targetId ?? null
+            });
+        }
+    });
+    const meta = document.createElement("div");
+    meta.className = "canvas-layer-meta";
+    meta.textContent = [node.kind, node.childIds.length > 0 ? `${node.childIds.length} children` : "leaf", isNodeHidden(node) ? "hidden" : "visible"].join(" • ");
+    main.append(renameInput, meta);
+    head.append(toggleButton, visibilityButton, main);
+    row.append(head);
+    row.addEventListener("dragstart", (event) => {
+        layerDragState = { nodeId: node.id };
+        event.dataTransfer?.setData("text/plain", node.id);
+    });
+    row.addEventListener("dragend", () => {
+        layerDragState = null;
+    });
+    row.addEventListener("dragover", (event) => {
+        event.preventDefault();
+    });
+    row.addEventListener("drop", (event) => {
+        event.preventDefault();
+        const draggedId = layerDragState?.nodeId;
+        if (!draggedId || draggedId === node.id) {
+            return;
+        }
+        commitLayerMove(draggedId, node.parentId ?? null, findSiblingInsertIndex(page, node.id));
+    });
+    if (node.childIds.length > 0) {
+        const children = document.createElement("div");
+        children.className = "canvas-layer-children";
+        children.addEventListener("dragover", (event) => {
+            event.preventDefault();
+        });
+        children.addEventListener("drop", (event) => {
+            event.preventDefault();
+            const draggedId = layerDragState?.nodeId;
+            if (!draggedId || draggedId === node.id) {
+                return;
+            }
+            commitLayerMove(draggedId, node.id, node.childIds.length);
+        });
+        if (expandedLayerNodeIds.has(node.id)) {
+            for (const childId of node.childIds) {
+                const child = page.nodes.find((entry) => entry.id === childId);
+                if (child) {
+                    children.append(renderLayerNode(page, child, depth + 1));
+                }
+            }
+        }
+        row.append(children);
+    }
+    return row;
+}
+function renderTokenSummary() {
+    populateTokenControls();
+    tokenSummaryElement.innerHTML = "";
+    tokenUsageElement.innerHTML = "";
+    const controlsDisabled = !currentState || Boolean(currentState.pendingMutation);
+    for (const control of [
+        tokenCollectionSelect,
+        tokenCollectionNameInput,
+        tokenCollectionCreateButton,
+        tokenModeSelect,
+        tokenModeNameInput,
+        tokenModeCreateButton,
+        tokenPathInput,
+        tokenValueInput,
+        tokenAliasInput,
+        tokenBindingPropertySelect,
+        tokenSaveButton,
+        tokenBindButton,
+        tokenBindingClearButton
+    ]) {
+        control.disabled = controlsDisabled;
+    }
+    if (!currentState) {
+        tokenStatusElement.textContent = "Waiting for canvas state...";
+        const empty = document.createElement("div");
+        empty.className = "canvas-empty-inline";
+        empty.textContent = "Waiting for canvas state...";
+        tokenSummaryElement.append(empty.cloneNode(true));
+        tokenUsageElement.append(empty);
+        return;
+    }
+    const node = getSelectedNode();
+    const normalizedPath = normalizeTokenPath(selectedTokenPath || tokenPathInput.value);
+    const resolvedValue = normalizedPath
+        ? resolveTokenValue(currentState.document.tokens, normalizedPath, selectedTokenModeId === "__base__" ? null : selectedTokenModeId)
+        : null;
+    const aliasTarget = normalizedPath
+        ? readTokenAliasTarget(currentState.document.tokens, normalizedPath, selectedTokenModeId === "__base__" ? null : selectedTokenModeId)
+        : null;
+    const bindingProperty = tokenBindingPropertySelect.value || "backgroundColor";
+    tokenPathInput.value = selectedTokenPath;
+    tokenValueInput.value = formatTokenEditorValue(resolvedValue);
+    tokenAliasInput.value = aliasTarget ?? "";
+    tokenBindButton.disabled = controlsDisabled || !node || normalizedPath.length === 0;
+    tokenBindingClearButton.disabled = controlsDisabled || !node || !hasSelectedTokenBinding(node, bindingProperty);
+    tokenStatusElement.textContent = normalizedPath
+        ? aliasTarget
+            ? `${normalizedPath} aliases ${aliasTarget}${resolvedValue !== null ? ` • ${formatTokenEditorValue(resolvedValue)}` : ""}`
+            : `${normalizedPath}${resolvedValue !== null ? ` • ${formatTokenEditorValue(resolvedValue)}` : ""}`
+        : "Edit collections, modes, aliases, and bindings.";
+    if (!node) {
+        const empty = document.createElement("div");
+        empty.className = "canvas-empty-inline";
+        empty.textContent = "Select a node to inspect token usage.";
+        tokenSummaryElement.append(empty);
+    }
+    else {
+        const tokenRefs = Object.entries(isRecord(node.tokenRefs) ? node.tokenRefs : {});
+        if (tokenRefs.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "canvas-empty-inline";
+            empty.textContent = "No token bindings on this node.";
+            tokenSummaryElement.append(empty);
+        }
+        else {
+            for (const [property, value] of tokenRefs) {
+                const row = document.createElement("div");
+                row.className = "canvas-token-item";
+                const title = document.createElement("div");
+                title.className = "canvas-summary-label";
+                title.textContent = property;
+                const body = document.createElement("div");
+                body.className = "canvas-summary-value";
+                const tokenPath = readTokenPath(value);
+                const resolved = tokenPath
+                    ? resolveTokenValue(currentState.document.tokens, tokenPath, readActiveTokenModeId(currentState.document.tokens))
+                    : null;
+                body.textContent = tokenPath
+                    ? resolved !== null ? `${tokenPath} → ${formatTokenEditorValue(resolved)}` : tokenPath
+                    : JSON.stringify(value);
+                row.append(title, body);
+                tokenSummaryElement.append(row);
+            }
+        }
+    }
+    const usages = normalizedPath ? collectTokenUsages(currentState.document, normalizedPath) : [];
+    if (usages.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "canvas-empty-inline";
+        empty.textContent = normalizedPath ? "No bound nodes use this token yet." : "Choose a token path to inspect usage.";
+        tokenUsageElement.append(empty);
+        return;
+    }
+    for (const usage of usages) {
+        const row = document.createElement("div");
+        row.className = "canvas-summary-item";
+        const title = document.createElement("div");
+        title.className = "canvas-summary-label";
+        title.textContent = `${usage.pageName} • ${usage.property}`;
+        const body = document.createElement("div");
+        body.className = "canvas-summary-value";
+        body.textContent = `${usage.nodeName} (${usage.nodeId})${usage.resolvedValue !== null ? ` → ${formatTokenEditorValue(usage.resolvedValue)}` : ""}`;
+        row.append(title, body);
+        tokenUsageElement.append(row);
+    }
+}
+function populateTokenControls() {
+    if (!currentState) {
+        tokenCollectionSelect.innerHTML = "";
+        tokenModeSelect.innerHTML = "";
+        return;
+    }
+    const tokens = currentState.document.tokens;
+    const collections = [
+        { id: "__values__", name: "Values" },
+        ...tokens.collections.map((collection) => ({ id: collection.id, name: collection.name }))
+    ];
+    if (!collections.some((entry) => entry.id === selectedTokenCollectionId)) {
+        selectedTokenCollectionId = findTokenCollectionId(tokens, selectedTokenPath) ?? "__values__";
+    }
+    tokenCollectionSelect.innerHTML = collections
+        .map((collection) => `<option value="${escapeHtmlAttribute(collection.id)}">${escapeHtmlText(collection.name)}</option>`)
+        .join("");
+    tokenCollectionSelect.value = selectedTokenCollectionId;
+    const modes = listTokenModes(tokens, selectedTokenCollectionId);
+    if (!modes.some((entry) => entry.id === selectedTokenModeId)) {
+        const activeModeId = readActiveTokenModeId(tokens);
+        selectedTokenModeId = activeModeId && modes.some((entry) => entry.id === activeModeId) ? activeModeId : "__base__";
+    }
+    tokenModeSelect.innerHTML = modes
+        .map((mode) => `<option value="${escapeHtmlAttribute(mode.id)}">${escapeHtmlText(mode.name)}</option>`)
+        .join("");
+    tokenModeSelect.value = selectedTokenModeId;
+}
 function renderStage() {
     if (!currentState) {
         stageInnerElement.innerHTML = "";
+        renderStageOverlay();
         return;
     }
-    const page = currentState.document.pages[0];
+    const page = getActivePage();
     if (!page) {
         stageInnerElement.innerHTML = "";
+        renderStageOverlay();
         return;
     }
-    const bounds = computeDocumentBounds(page.nodes);
+    const visibleNodes = page.nodes.filter((node) => !isNodeHidden(node));
+    const bounds = computeDocumentBounds(visibleNodes);
     stageInnerElement.style.width = `${bounds.width}px`;
     stageInnerElement.style.height = `${bounds.height}px`;
     stageInnerElement.style.transform = `translate(${currentState.viewport.x}px, ${currentState.viewport.y}px) scale(${currentState.viewport.zoom})`;
     stageInnerElement.innerHTML = "";
-    const sortedNodes = [...page.nodes].sort(compareStageNodes);
+    const sortedNodes = [...visibleNodes].sort(compareStageNodes);
     for (const node of sortedNodes) {
         stageInnerElement.append(buildStageNodeElement(currentState.document, node, currentState.selection.nodeId === node.id));
     }
+    renderStageOverlay();
 }
 function compareStageNodes(left, right) {
     const rootOrder = Number(left.parentId !== null) - Number(right.parentId !== null);
@@ -682,7 +1298,7 @@ function buildStageNodeElement(documentState, node, selected) {
     element.style.top = `${node.rect.y}px`;
     element.style.width = `${Math.max(node.rect.width, 40)}px`;
     element.style.minHeight = `${Math.max(node.rect.height, node.kind === "connector" ? 2 : componentKind === "badge" ? 28 : 40)}px`;
-    applyDeclaredStageStyles(element, node.style);
+    applyDeclaredStageStyles(element, documentState, node);
     if (text.includes("\n") && element.style.whiteSpace.length === 0) {
         element.style.whiteSpace = "pre-line";
     }
@@ -1083,8 +1699,8 @@ function buildStageFluentIcon(identifier) {
         }
     }
 }
-function applyDeclaredStageStyles(element, style) {
-    for (const [key, value] of Object.entries(style)) {
+function applyDeclaredStageStyles(element, documentState, node) {
+    for (const [key, value] of Object.entries(resolveStageStyle(documentState, node))) {
         if (typeof value !== "string" && typeof value !== "number") {
             continue;
         }
@@ -1095,20 +1711,84 @@ function applyDeclaredStageStyles(element, style) {
 }
 function renderInspector() {
     const node = getSelectedNode();
-    nameInput.disabled = !node || Boolean(currentState?.pendingMutation);
-    textInput.disabled = !node || Boolean(currentState?.pendingMutation);
-    deleteNodeButton.disabled = !node || Boolean(currentState?.pendingMutation);
+    const disabled = !node || Boolean(currentState?.pendingMutation);
+    const inputs = [
+        nameInput,
+        textInput,
+        nodeXInput,
+        nodeYInput,
+        nodeWidthInput,
+        nodeHeightInput,
+        paddingInput,
+        gapInput,
+        fontSizeInput,
+        fontWeightInput,
+        lineHeightInput,
+        colorInput,
+        backgroundInput,
+        borderColorInput,
+        borderWidthInput,
+        borderRadiusInput,
+        shadowInput,
+        bindingKindInput,
+        bindingComponentInput,
+        bindingSelectorInput,
+        a11yRoleInput,
+        a11yLabelInput
+    ];
+    for (const input of inputs) {
+        input.disabled = disabled;
+    }
+    duplicateNodeButton.disabled = disabled;
+    deleteNodeButton.disabled = disabled;
+    propertiesStatusElement.textContent = node
+        ? `${node.kind} • ${node.rect.width}×${node.rect.height}`
+        : "No node selected.";
     nameInput.value = node?.name ?? "";
     textInput.value = node ? nodeText(node) : "";
+    nodeXInput.value = node ? String(node.rect.x) : "";
+    nodeYInput.value = node ? String(node.rect.y) : "";
+    nodeWidthInput.value = node ? String(node.rect.width) : "";
+    nodeHeightInput.value = node ? String(node.rect.height) : "";
+    paddingInput.value = node ? readStyleText(node.style.padding) : "";
+    gapInput.value = node ? readStyleText(node.style.gap) : "";
+    fontSizeInput.value = node ? readStyleText(node.style.fontSize) : "";
+    fontWeightInput.value = node ? readStyleText(node.style.fontWeight) : "";
+    lineHeightInput.value = node ? readStyleText(node.style.lineHeight) : "";
+    colorInput.value = node ? readStyleText(node.style.color) : "";
+    backgroundInput.value = node ? readStyleText(node.style.backgroundColor) : "";
+    borderColorInput.value = node ? readStyleText(node.style.borderColor) : "";
+    borderWidthInput.value = node ? readStyleText(node.style.borderWidth) : "";
+    borderRadiusInput.value = node ? readStyleText(node.style.borderRadius) : "";
+    shadowInput.value = node ? readStyleText(node.style.boxShadow) : "";
+    const binding = currentState && node ? readSelectedBindingIdentity(currentState.document, node.id) : null;
+    bindingKindInput.value = binding?.bindingKind ?? "";
+    bindingComponentInput.value = binding?.componentName ?? "";
+    bindingSelectorInput.value = node && currentState
+        ? readBindingSelector(currentState.document, node.id)
+        : "";
+    const accessibility = node && isRecord(node.metadata.accessibility) ? node.metadata.accessibility : {};
+    a11yRoleInput.value = typeof accessibility.role === "string" ? accessibility.role : "";
+    a11yLabelInput.value = typeof accessibility.label === "string" ? accessibility.label : "";
     renderSelectionMeta();
+    syncTokenEditorSelection();
 }
 function renderSelectionMeta() {
     selectionMetaElement.innerHTML = "";
     const node = getSelectedNode();
+    const bindingIdentity = currentState ? readSelectedBindingIdentity(currentState.document, node?.id ?? null) : null;
+    const latestImport = currentState ? readLatestImportProvenance(currentState.summary, currentState.document) : null;
     const items = [
         ["Selected", node?.id ?? "none"],
+        ["Page", getActivePage()?.name ?? "n/a"],
         ["Position", node ? `${node.rect.x}, ${node.rect.y}` : "n/a"],
-        ["Size", node ? `${node.rect.width} × ${node.rect.height}` : "n/a"]
+        ["Size", node ? `${node.rect.width} × ${node.rect.height}` : "n/a"],
+        ["Binding", bindingIdentity?.componentName ?? "none"],
+        ["Framework", bindingIdentity?.framework ?? "n/a"],
+        ["Adapter", bindingIdentity?.adapter ?? "n/a"],
+        ["Plugin", bindingIdentity?.plugin ?? "n/a"],
+        ["Variants", node ? String(node.variantPatches.length) : "0"],
+        ["Latest import", latestImport ?? "none"]
     ];
     for (const [label, value] of items) {
         const row = document.createElement("div");
@@ -1125,7 +1805,10 @@ function renderSelectionMeta() {
 }
 function renderAnnotationPanel() {
     const node = getSelectedNode();
-    annotationAddButton.disabled = !node || !currentState || annotationDrafts.some((entry) => entry.nodeId === node.id);
+    annotationAddButton.textContent = annotationMode === "region" ? "Capture Region" : "Add Selected";
+    annotationAddButton.disabled = annotationMode === "selected"
+        ? (!node || !currentState || annotationDrafts.some((entry) => entry.kind !== "region" && entry.nodeId === node.id))
+        : !currentState;
     annotationCopyButton.disabled = annotationDrafts.length === 0 || !currentState;
     annotationSendButton.disabled = annotationDrafts.length === 0 || !currentState;
     annotationListElement.innerHTML = "";
@@ -1139,7 +1822,11 @@ function renderAnnotationPanel() {
     for (const draft of annotationDrafts) {
         const itemPayload = buildCanvasAnnotationPayloadForDrafts([draft]);
         const annotation = itemPayload?.annotations[0];
-        const nodeLabel = annotation ? describeAnnotationItem(annotation) : draft.nodeId;
+        const nodeLabel = annotation
+            ? describeAnnotationItem(annotation)
+            : draft.kind === "region"
+                ? draft.label ?? draft.regionId
+                : draft.nodeId;
         const row = document.createElement("div");
         row.className = "canvas-annotation-item";
         const head = document.createElement("div");
@@ -1150,22 +1837,26 @@ function renderAnnotationPanel() {
         title.textContent = nodeLabel;
         const meta = document.createElement("div");
         meta.className = "canvas-annotation-meta";
-        meta.textContent = annotation ? `${annotation.tag} • ${Math.round(annotation.rect.width)}×${Math.round(annotation.rect.height)}` : draft.nodeId;
+        meta.textContent = annotation
+            ? `${annotation.tag} • ${Math.round(annotation.rect.width)}×${Math.round(annotation.rect.height)}`
+            : draft.kind === "region"
+                ? `${Math.round(draft.rect.width)}×${Math.round(draft.rect.height)}`
+                : draft.nodeId;
         summary.append(title, meta);
         const removeButton = document.createElement("button");
         removeButton.className = "canvas-button";
         removeButton.type = "button";
         removeButton.textContent = "Remove";
         removeButton.addEventListener("click", () => {
-            removeAnnotationDraft(draft.nodeId);
+            removeAnnotationDraft(getDraftId(draft));
         });
         head.append(summary, removeButton);
         const noteField = document.createElement("textarea");
         noteField.className = "canvas-textarea";
         noteField.value = draft.note ?? "";
-        noteField.placeholder = "Add note for this node";
+        noteField.placeholder = draft.kind === "region" ? "Add note for this captured region" : "Add note for this node";
         noteField.addEventListener("input", () => {
-            updateAnnotationDraft(draft.nodeId, { note: noteField.value });
+            updateAnnotationDraft(getDraftId(draft), { note: noteField.value });
         });
         const actions = document.createElement("div");
         actions.className = "canvas-actions-grid";
@@ -1198,7 +1889,7 @@ function buildCanvasAnnotationPayloadForDrafts(drafts) {
     if (!currentState) {
         return null;
     }
-    const page = currentState.document.pages[0];
+    const page = getActivePage();
     if (!page || drafts.length === 0) {
         return null;
     }
@@ -1211,18 +1902,20 @@ function buildCanvasAnnotationPayloadForDrafts(drafts) {
 }
 function addSelectedAnnotationDraft() {
     const node = getSelectedNode();
-    if (!node || annotationDrafts.some((entry) => entry.nodeId === node.id)) {
+    if (!node || annotationDrafts.some((entry) => entry.kind !== "region" && entry.nodeId === node.id)) {
         renderAnnotationPanel();
         return;
     }
-    annotationDrafts = [...annotationDrafts, { nodeId: node.id, note: "" }];
+    annotationDrafts = [...annotationDrafts, { kind: "node", nodeId: node.id, note: "" }];
     renderAnnotationPanel();
 }
-function updateAnnotationDraft(nodeId, patch) {
-    annotationDrafts = annotationDrafts.map((entry) => entry.nodeId === nodeId ? { ...entry, ...patch } : entry);
+function updateAnnotationDraft(draftId, patch) {
+    annotationDrafts = annotationDrafts.map((entry) => getDraftId(entry) === draftId
+        ? { ...entry, note: patch.note ?? entry.note }
+        : entry);
 }
-function removeAnnotationDraft(nodeId) {
-    annotationDrafts = annotationDrafts.filter((entry) => entry.nodeId !== nodeId);
+function removeAnnotationDraft(draftId) {
+    annotationDrafts = annotationDrafts.filter((entry) => getDraftId(entry) !== draftId);
     renderAnnotationPanel();
 }
 function syncAnnotationDrafts() {
@@ -1231,9 +1924,9 @@ function syncAnnotationDrafts() {
         renderAnnotationPanel();
         return;
     }
-    const page = currentState.document.pages[0];
+    const page = getActivePage();
     const validIds = new Set(page?.nodes.map((node) => node.id) ?? []);
-    const next = annotationDrafts.filter((entry) => validIds.has(entry.nodeId));
+    const next = annotationDrafts.filter((entry) => entry.kind === "region" || validIds.has(entry.nodeId));
     if (next.length !== annotationDrafts.length) {
         annotationDrafts = next;
     }
@@ -1272,7 +1965,7 @@ async function sendCanvasAnnotation(drafts, source, label, button) {
     if (!response.ok) {
         throw new Error(response.error?.message ?? "Canvas annotation send failed.");
     }
-    setCanvasButtonFeedback(button, "Sent");
+    setCanvasButtonFeedback(button, formatAnnotationDispatchReceipt(response.receipt));
 }
 async function writeTextToClipboard(text) {
     if (navigator.clipboard?.writeText) {
@@ -1327,13 +2020,15 @@ function applyOptimisticPatch(patches, selection, options = {}) {
         targetId: selection?.targetId ?? currentState.selection.targetId,
         updatedAt: new Date().toISOString()
     };
+    activePageId = currentState.selection.pageId ?? activePageId;
     renderState();
     schedulePersist(currentState);
     port.postMessage({
         type: "canvas-page-patch-request",
         baseRevision: currentState.documentRevision,
         patches,
-        selection: currentState.selection
+        selection: currentState.selection,
+        viewport: currentState.viewport
     });
 }
 function applyLocalPatchMutation(document, patches) {
@@ -1362,7 +2057,9 @@ function applyLocalPatchMutation(document, patches) {
                 } : { x: 0, y: 0, width: 240, height: 120 },
                 props: isRecord(node.props) ? { ...node.props } : {},
                 style: isRecord(node.style) ? { ...node.style } : {},
+                tokenRefs: isRecord(node.tokenRefs) ? { ...node.tokenRefs } : {},
                 bindingRefs: isRecord(node.bindingRefs) ? { ...node.bindingRefs } : {},
+                variantPatches: Array.isArray(node.variantPatches) ? node.variantPatches.filter(isRecord) : [],
                 metadata: isRecord(node.metadata) ? { ...node.metadata } : {}
             };
             page.nodes.push(inserted);
@@ -1379,11 +2076,16 @@ function applyLocalPatchMutation(document, patches) {
         }
         if (patch.op === "node.remove" && typeof patch.nodeId === "string") {
             for (const page of document.pages) {
-                page.nodes = page.nodes.filter((entry) => entry.id !== patch.nodeId);
+                const removedIds = collectNodeSubtreeIds(page, patch.nodeId);
+                if (removedIds.length === 0) {
+                    continue;
+                }
+                const removedSet = new Set(removedIds);
+                page.nodes = page.nodes.filter((entry) => !removedSet.has(entry.id));
                 for (const node of page.nodes) {
-                    node.childIds = node.childIds.filter((entry) => entry !== patch.nodeId);
+                    node.childIds = node.childIds.filter((entry) => !removedSet.has(entry));
                 }
-                if (page.rootNodeId === patch.nodeId) {
+                if (page.rootNodeId && removedSet.has(page.rootNodeId)) {
                     page.rootNodeId = null;
                 }
             }
@@ -1397,42 +2099,1003 @@ function applyLocalPatchMutation(document, patches) {
             for (const [path, value] of Object.entries(patch.changes)) {
                 setNestedValue(node, path, value);
             }
+            continue;
+        }
+        if (patch.op === "node.visibility.set" && typeof patch.nodeId === "string" && typeof patch.hidden === "boolean") {
+            const node = findNode(document, patch.nodeId);
+            if (!node) {
+                continue;
+            }
+            const visibility = isRecord(node.metadata.visibility) ? { ...node.metadata.visibility } : {};
+            visibility.hidden = patch.hidden;
+            node.metadata.visibility = visibility;
+            continue;
+        }
+        if (patch.op === "node.reorder" && typeof patch.nodeId === "string" && typeof patch.index === "number") {
+            const page = findPageForNode(document, patch.nodeId);
+            const node = page?.nodes.find((entry) => entry.id === patch.nodeId);
+            if (!page || !node) {
+                continue;
+            }
+            const siblings = getSiblingIds(page, node.parentId ?? null);
+            const currentIndex = siblings.indexOf(node.id);
+            if (currentIndex === -1) {
+                continue;
+            }
+            siblings.splice(currentIndex, 1);
+            const nextIndex = clampIndex(patch.index, siblings.length);
+            siblings.splice(nextIndex, 0, node.id);
+            assignSiblingIds(page, node.parentId ?? null, siblings);
+            continue;
+        }
+        if (patch.op === "node.reparent" && typeof patch.nodeId === "string" && typeof patch.index === "number") {
+            const page = findPageForNode(document, patch.nodeId);
+            const node = page?.nodes.find((entry) => entry.id === patch.nodeId);
+            if (!page || !node) {
+                continue;
+            }
+            const previousParentId = node.parentId ?? null;
+            const currentSiblings = getSiblingIds(page, previousParentId).filter((entry) => entry !== node.id);
+            assignSiblingIds(page, previousParentId, currentSiblings);
+            node.parentId = typeof patch.parentId === "string" ? patch.parentId : null;
+            const nextSiblings = getSiblingIds(page, node.parentId ?? null);
+            const nextIndex = clampIndex(patch.index, nextSiblings.length);
+            nextSiblings.splice(nextIndex, 0, node.id);
+            assignSiblingIds(page, node.parentId ?? null, nextSiblings);
+            continue;
+        }
+        if (patch.op === "node.duplicate" && typeof patch.nodeId === "string") {
+            const page = findPageForNode(document, patch.nodeId);
+            const sourceNode = page?.nodes.find((entry) => entry.id === patch.nodeId);
+            if (!page || !sourceNode) {
+                continue;
+            }
+            const idMap = isRecord(patch.idMap) ? patch.idMap : {};
+            const sourceIds = collectNodeSubtreeIds(page, sourceNode.id);
+            for (const sourceId of sourceIds) {
+                if (typeof idMap[sourceId] !== "string") {
+                    idMap[sourceId] = `node_${crypto.randomUUID().slice(0, 8)}`;
+                }
+            }
+            const clones = [];
+            for (const sourceId of sourceIds) {
+                const original = page.nodes.find((entry) => entry.id === sourceId);
+                if (!original) {
+                    continue;
+                }
+                const cloneNode = structuredCloneNode(original);
+                cloneNode.id = String(idMap[sourceId]);
+                cloneNode.pageId = page.id;
+                cloneNode.parentId = sourceId === sourceNode.id
+                    ? (typeof patch.parentId === "string" ? patch.parentId : sourceNode.parentId)
+                    : (original.parentId ? String(idMap[original.parentId] ?? original.parentId) : null);
+                cloneNode.childIds = original.childIds.map((childId) => String(idMap[childId] ?? childId));
+                cloneNode.rect = {
+                    ...cloneNode.rect,
+                    x: cloneNode.rect.x + 24,
+                    y: cloneNode.rect.y + 24
+                };
+                if (cloneNode.bindingRefs.primary && typeof cloneNode.bindingRefs.primary === "string") {
+                    cloneNode.bindingRefs.primary = `${cloneNode.bindingRefs.primary}_${cloneNode.id}`;
+                }
+                clones.push(cloneNode);
+            }
+            page.nodes.push(...clones);
+            const duplicateRootId = String(idMap[sourceNode.id]);
+            const parentId = typeof patch.parentId === "string" ? patch.parentId : sourceNode.parentId ?? null;
+            const siblings = getSiblingIds(page, parentId);
+            const nextIndex = clampIndex(typeof patch.index === "number" ? patch.index : siblings.length, siblings.length);
+            siblings.splice(nextIndex, 0, duplicateRootId);
+            assignSiblingIds(page, parentId, siblings);
+            continue;
+        }
+        if (patch.op === "token.set" && typeof patch.path === "string") {
+            setNestedValue(document.tokens.values, normalizeTokenPath(patch.path), patch.value);
+            continue;
+        }
+        if (patch.op === "tokens.merge" && isRecord(patch.tokens)) {
+            document.tokens = normalizeTokenStore({
+                ...structuredClone(document.tokens),
+                ...patch.tokens
+            });
+            continue;
+        }
+        if (patch.op === "tokens.replace" && isRecord(patch.tokens)) {
+            document.tokens = normalizeTokenStore(patch.tokens);
+            continue;
         }
     }
 }
-function postViewState() {
+function getActivePage() {
+    if (!currentState) {
+        return null;
+    }
+    const pageId = activePageId ?? currentState.selection.pageId ?? currentState.document.pages[0]?.id ?? null;
+    return currentState.document.pages.find((entry) => entry.id === pageId) ?? currentState.document.pages[0] ?? null;
+}
+function setActivePage(pageId, options = {}) {
     if (!currentState) {
+        activePageId = pageId;
         return;
     }
-    port.postMessage({
-        type: "canvas-page-view-state",
-        viewport: currentState.viewport,
-        selection: currentState.selection
-    });
+    const page = currentState.document.pages.find((entry) => entry.id === pageId) ?? currentState.document.pages[0] ?? null;
+    activePageId = page?.id ?? null;
+    if (!page) {
+        renderState();
+        return;
+    }
+    const selectedNode = currentState.selection.nodeId ? findNode(currentState.document, currentState.selection.nodeId) : null;
+    if (!selectedNode || selectedNode.pageId !== page.id || options.clearSelectionIfMissing) {
+        currentState.selection = {
+            pageId: page.id,
+            nodeId: selectedNode?.pageId === page.id ? selectedNode.id : null,
+            targetId: currentState.selection.targetId,
+            updatedAt: new Date().toISOString()
+        };
+    }
+    else {
+        currentState.selection.pageId = page.id;
+    }
+    renderState();
+    if (options.broadcast) {
+        postViewState();
+        schedulePersist(currentState);
+    }
 }
-function schedulePersist(state) {
-    if (persistTimer !== null) {
-        window.clearTimeout(persistTimer);
+function selectNode(nodeId, pageId) {
+    if (!currentState) {
+        return;
     }
-    persistTimer = window.setTimeout(() => {
-        void flushPersist(state);
-    }, SAVE_DEBOUNCE_MS);
+    activePageId = pageId;
+    currentState.selection = {
+        pageId,
+        nodeId,
+        targetId: currentState.selection.targetId,
+        updatedAt: new Date().toISOString()
+    };
+    renderState();
+    postViewState();
+    schedulePersist(currentState);
 }
-async function flushPersist(state = currentState) {
-    if (!state) {
+function requestHistory(direction) {
+    if (!currentState || currentState.pendingMutation) {
         return;
     }
-    if (persistTimer !== null) {
-        window.clearTimeout(persistTimer);
-        persistTimer = null;
+    const history = currentState.summary.history;
+    if ((direction === "undo" && !history?.canUndo) || (direction === "redo" && !history?.canRedo)) {
+        return;
     }
-    await saveCachedState(currentTabId, state);
-    broadcastChannel?.postMessage({ type: "canvas-page:broadcast", state });
+    currentState.pendingMutation = true;
+    renderState();
+    port.postMessage({
+        type: "canvas-page-history-request",
+        direction
+    });
 }
-async function getCurrentTabId() {
-    return await new Promise((resolve) => {
-        chrome.tabs.getCurrent((tab) => {
-            const tabId = tab?.id;
+function duplicateSelectedNode() {
+    if (!currentState || currentState.pendingMutation) {
+        return;
+    }
+    const node = getSelectedNode();
+    const page = getActivePage();
+    if (!node || !page) {
+        return;
+    }
+    const siblingIds = getSiblingIds(page, node.parentId ?? null);
+    const currentIndex = siblingIds.indexOf(node.id);
+    const idMap = buildDuplicateIdMap(page, node.id);
+    const duplicateRootId = idMap[node.id];
+    if (!duplicateRootId) {
+        return;
+    }
+    applyOptimisticPatch([{
+            op: "node.duplicate",
+            nodeId: node.id,
+            parentId: node.parentId ?? null,
+            index: currentIndex >= 0 ? currentIndex + 1 : siblingIds.length,
+            idMap
+        }], {
+        pageId: page.id,
+        nodeId: duplicateRootId,
+        targetId: currentState.selection.targetId
+    });
+}
+function nudgeSelectedNode(key, delta) {
+    const node = getSelectedNode();
+    if (!node || !currentState || currentState.pendingMutation) {
+        return;
+    }
+    const changes = {};
+    if (key === "ArrowUp") {
+        changes["rect.y"] = node.rect.y - delta;
+    }
+    else if (key === "ArrowDown") {
+        changes["rect.y"] = node.rect.y + delta;
+    }
+    else if (key === "ArrowLeft") {
+        changes["rect.x"] = node.rect.x - delta;
+    }
+    else if (key === "ArrowRight") {
+        changes["rect.x"] = node.rect.x + delta;
+    }
+    if (Object.keys(changes).length > 0) {
+        applyOptimisticPatch([{ op: "node.update", nodeId: node.id, changes }], currentState.selection);
+    }
+}
+function fitActivePageViewport() {
+    if (!currentState) {
+        return;
+    }
+    currentState.viewport = resolvePreferredViewport(currentState);
+    renderState();
+    postViewState();
+    schedulePersist(currentState);
+}
+function resetZoomToDefault() {
+    if (!currentState) {
+        return;
+    }
+    currentState.viewport = {
+        ...currentState.viewport,
+        zoom: DEFAULT_EDITOR_VIEWPORT.zoom
+    };
+    renderState();
+    postViewState();
+    schedulePersist(currentState);
+}
+function commitSelectedNodeChanges(changes) {
+    const node = getSelectedNode();
+    if (!node || !currentState || currentState.pendingMutation) {
+        return;
+    }
+    applyOptimisticPatch([{ op: "node.update", nodeId: node.id, changes }], currentState.selection);
+}
+function commitSelectedBindingPatch() {
+    const node = getSelectedNode();
+    if (!node || !currentState || currentState.pendingMutation) {
+        return;
+    }
+    const page = getActivePage();
+    if (!page) {
+        return;
+    }
+    const bindingIdentity = readSelectedBindingIdentity(currentState.document, node.id);
+    const bindingId = bindingIdentity.bindingId ?? `binding_${crypto.randomUUID().slice(0, 8)}`;
+    applyOptimisticPatch([{
+            op: "binding.set",
+            nodeId: node.id,
+            binding: {
+                id: bindingId,
+                kind: readTextInput(bindingKindInput) || bindingIdentity.bindingKind || "component",
+                selector: readTextInput(bindingSelectorInput) || undefined,
+                componentName: readTextInput(bindingComponentInput) || undefined,
+                metadata: {
+                    ...(readExistingBindingMetadata(currentState.document, bindingId) ?? {}),
+                    sourceKind: bindingIdentity.sourceKind ?? undefined
+                }
+            }
+        }], {
+        pageId: page.id,
+        nodeId: node.id,
+        targetId: currentState.selection.targetId
+    });
+}
+function commitLayerMove(nodeId, parentId, index) {
+    if (!currentState || currentState.pendingMutation) {
+        return;
+    }
+    const page = getActivePage();
+    const node = findNode(currentState.document, nodeId);
+    if (!page || !node || parentId === node.id) {
+        return;
+    }
+    const patch = node.parentId === parentId
+        ? { op: "node.reorder", nodeId, index }
+        : { op: "node.reparent", nodeId, parentId, index };
+    applyOptimisticPatch([patch], {
+        pageId: page.id,
+        nodeId,
+        targetId: currentState.selection.targetId
+    });
+}
+function commitAnnotationCapture(marquee) {
+    const page = getActivePage();
+    if (!currentState || !page) {
+        return;
+    }
+    const dx = Math.abs(marquee.currentClientX - marquee.originClientX);
+    const dy = Math.abs(marquee.currentClientY - marquee.originClientY);
+    if (dx < 6 && dy < 6) {
+        if (marquee.targetNodeId && !annotationDrafts.some((entry) => entry.kind !== "region" && entry.nodeId === marquee.targetNodeId)) {
+            annotationDrafts = [...annotationDrafts, { kind: "node", nodeId: marquee.targetNodeId, note: "" }];
+            renderAnnotationPanel();
+        }
+        return;
+    }
+    const rect = marqueeClientRectToCanvasRect(marquee);
+    const intersectingNodes = page.nodes.filter((node) => rectsIntersect(node.rect, rect));
+    const regionId = `region_${crypto.randomUUID().slice(0, 8)}`;
+    annotationDrafts = [
+        ...annotationDrafts,
+        {
+            kind: "region",
+            regionId,
+            rect,
+            pageId: page.id,
+            label: intersectingNodes.length > 0 ? `Region • ${intersectingNodes.length} nodes` : "Region",
+            note: ""
+        }
+    ];
+    renderAnnotationPanel();
+}
+function renderStageOverlay() {
+    stageOverlayElement.innerHTML = "";
+    if (!marqueeState) {
+        return;
+    }
+    const marquee = document.createElement("div");
+    marquee.className = "canvas-stage-marquee";
+    const bounds = marqueeClientRectToStageRect(marqueeState);
+    marquee.style.left = `${bounds.left}px`;
+    marquee.style.top = `${bounds.top}px`;
+    marquee.style.width = `${bounds.width}px`;
+    marquee.style.height = `${bounds.height}px`;
+    stageOverlayElement.append(marquee);
+}
+function bindFieldCommit(input, callback) {
+    input.addEventListener("change", callback);
+    input.addEventListener("keydown", (event) => {
+        const keyboardEvent = event;
+        if (keyboardEvent.key === "Enter" && !(input instanceof HTMLTextAreaElement && !keyboardEvent.metaKey && !keyboardEvent.ctrlKey)) {
+            keyboardEvent.preventDefault();
+            callback();
+        }
+    });
+}
+function readTextInput(input) {
+    return input.value.trim();
+}
+function readNumberInput(input, fallback) {
+    const value = Number(input.value);
+    return Number.isFinite(value) ? value : fallback;
+}
+function readStyleText(value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number" && Number.isFinite(value)) {
+        return String(value);
+    }
+    return "";
+}
+function readExistingBindingMetadata(document, bindingId) {
+    const binding = document.bindings.find((entry) => entry.id === bindingId);
+    return binding ? { ...binding.metadata } : null;
+}
+function readBindingSelector(document, nodeId) {
+    const bindingIdentity = readSelectedBindingIdentity(document, nodeId);
+    const binding = bindingIdentity.bindingId
+        ? document.bindings.find((entry) => entry.id === bindingIdentity.bindingId) ?? null
+        : null;
+    if (binding && typeof binding.selector === "string") {
+        return binding.selector;
+    }
+    return binding && typeof binding.metadata.selector === "string"
+        ? binding.metadata.selector
+        : "";
+}
+function getRootNodes(page) {
+    if (page.rootNodeId) {
+        const root = page.nodes.find((entry) => entry.id === page.rootNodeId);
+        if (root) {
+            return [root, ...page.nodes.filter((entry) => entry.parentId === null && entry.id !== root.id)];
+        }
+    }
+    return page.nodes.filter((entry) => entry.parentId === null);
+}
+function ensureExpandedNodePath(page, nodeId) {
+    if (!page.rootNodeId) {
+        return;
+    }
+    expandedLayerNodeIds.add(page.rootNodeId);
+    let cursor = nodeId ? page.nodes.find((entry) => entry.id === nodeId) ?? null : null;
+    while (cursor?.parentId) {
+        expandedLayerNodeIds.add(cursor.parentId);
+        cursor = page.nodes.find((entry) => entry.id === cursor?.parentId) ?? null;
+    }
+}
+function getSiblingIds(page, parentId) {
+    if (parentId) {
+        return [...(page.nodes.find((entry) => entry.id === parentId)?.childIds ?? [])];
+    }
+    return page.nodes.filter((entry) => entry.parentId === null).map((entry) => entry.id);
+}
+function assignSiblingIds(page, parentId, ids) {
+    if (parentId) {
+        const parent = page.nodes.find((entry) => entry.id === parentId);
+        if (parent) {
+            parent.childIds = ids;
+        }
+        return;
+    }
+    for (const node of page.nodes) {
+        if (ids.includes(node.id)) {
+            node.parentId = null;
+        }
+    }
+    page.rootNodeId = ids[0] ?? null;
+}
+function findSiblingInsertIndex(page, nodeId) {
+    const node = page.nodes.find((entry) => entry.id === nodeId);
+    if (!node) {
+        return 0;
+    }
+    const siblings = getSiblingIds(page, node.parentId ?? null);
+    const currentIndex = siblings.indexOf(node.id);
+    return currentIndex >= 0 ? currentIndex : siblings.length;
+}
+function clampIndex(index, maxLength) {
+    return Math.max(0, Math.min(index, maxLength));
+}
+function findPageForNode(document, nodeId) {
+    for (const page of document.pages) {
+        if (page.nodes.some((entry) => entry.id === nodeId)) {
+            return page;
+        }
+    }
+    return null;
+}
+function collectNodeSubtreeIds(page, nodeId) {
+    const collected = [];
+    const visit = (id) => {
+        const node = page.nodes.find((entry) => entry.id === id);
+        if (!node) {
+            return;
+        }
+        collected.push(node.id);
+        for (const childId of node.childIds) {
+            visit(childId);
+        }
+    };
+    visit(nodeId);
+    return collected;
+}
+function buildDuplicateIdMap(page, nodeId) {
+    return Object.fromEntries(collectNodeSubtreeIds(page, nodeId).map((id) => [id, `node_${crypto.randomUUID().slice(0, 8)}`]));
+}
+function structuredCloneNode(node) {
+    return {
+        ...node,
+        rect: { ...node.rect },
+        props: { ...node.props },
+        style: { ...node.style },
+        tokenRefs: { ...node.tokenRefs },
+        bindingRefs: { ...node.bindingRefs },
+        variantPatches: node.variantPatches.map((entry) => ({ ...entry })),
+        metadata: { ...node.metadata }
+    };
+}
+function marqueeClientRectToStageRect(marquee) {
+    const stageRect = stageElement.getBoundingClientRect();
+    const left = Math.min(marquee.originClientX, marquee.currentClientX) - stageRect.left;
+    const top = Math.min(marquee.originClientY, marquee.currentClientY) - stageRect.top;
+    const width = Math.abs(marquee.currentClientX - marquee.originClientX);
+    const height = Math.abs(marquee.currentClientY - marquee.originClientY);
+    return { left, top, width, height };
+}
+function marqueeClientRectToCanvasRect(marquee) {
+    const stageRect = marqueeClientRectToStageRect(marquee);
+    const viewport = currentState?.viewport ?? DEFAULT_EDITOR_VIEWPORT;
+    return {
+        x: Math.round((stageRect.left - viewport.x) / viewport.zoom),
+        y: Math.round((stageRect.top - viewport.y) / viewport.zoom),
+        width: Math.round(stageRect.width / viewport.zoom),
+        height: Math.round(stageRect.height / viewport.zoom)
+    };
+}
+function rectsIntersect(left, right) {
+    return left.x < right.x + right.width
+        && left.x + left.width > right.x
+        && left.y < right.y + right.height
+        && left.y + left.height > right.y;
+}
+function isNodeHidden(node) {
+    return isRecord(node.metadata.visibility) && node.metadata.visibility.hidden === true;
+}
+function readTokenPath(value) {
+    if (typeof value === "string" && value.trim().length > 0) {
+        return normalizeTokenPath(value);
+    }
+    if (isRecord(value)) {
+        if (typeof value.path === "string" && value.path.trim().length > 0) {
+            return normalizeTokenPath(value.path);
+        }
+        if (typeof value.tokenPath === "string" && value.tokenPath.trim().length > 0) {
+            return normalizeTokenPath(value.tokenPath);
+        }
+    }
+    return null;
+}
+function normalizeTokenPath(path) {
+    return path.trim().replace(/^tokens\./, "");
+}
+function escapeHtmlText(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;");
+}
+function escapeHtmlAttribute(value) {
+    return escapeHtmlText(value).replaceAll("\"", "&quot;");
+}
+function readActiveTokenModeId(tokens) {
+    return typeof tokens.metadata.activeModeId === "string" && tokens.metadata.activeModeId.trim().length > 0
+        ? tokens.metadata.activeModeId
+        : null;
+}
+function readNestedTokenValue(values, tokenPath) {
+    const segments = normalizeTokenPath(tokenPath).split(".").filter(Boolean);
+    let current = values;
+    for (const segment of segments) {
+        if (!isRecord(current) || !(segment in current)) {
+            return null;
+        }
+        current = current[segment];
+    }
+    return current;
+}
+function findTokenCollectionId(tokens, tokenPath) {
+    const normalized = normalizeTokenPath(tokenPath);
+    for (const collection of tokens.collections) {
+        if (collection.items.some((item) => item.path === normalized)) {
+            return collection.id;
+        }
+    }
+    return null;
+}
+function findTokenItem(tokens, tokenPath) {
+    const normalized = normalizeTokenPath(tokenPath);
+    for (const collection of tokens.collections) {
+        const item = collection.items.find((entry) => entry.path === normalized);
+        if (item) {
+            return { collection, item };
+        }
+    }
+    return null;
+}
+function readTokenAliasTarget(tokens, tokenPath, modeId) {
+    const normalized = normalizeTokenPath(tokenPath);
+    const exact = tokens.aliases.find((entry) => entry.path === normalized && (entry.modeId ?? null) === modeId);
+    if (exact) {
+        return exact.targetPath;
+    }
+    const shared = tokens.aliases.find((entry) => entry.path === normalized && (entry.modeId ?? null) === null);
+    return shared?.targetPath ?? null;
+}
+function resolveTokenValue(tokens, tokenPath, modeId, seen = new Set()) {
+    const normalized = normalizeTokenPath(tokenPath);
+    const visitKey = `${normalized}:${modeId ?? ""}`;
+    if (seen.has(visitKey)) {
+        return null;
+    }
+    seen.add(visitKey);
+    const aliasTarget = readTokenAliasTarget(tokens, normalized, modeId);
+    if (aliasTarget) {
+        const aliasedValue = resolveTokenValue(tokens, aliasTarget, modeId, seen);
+        if (aliasedValue !== null && aliasedValue !== undefined) {
+            return aliasedValue;
+        }
+    }
+    const location = findTokenItem(tokens, normalized);
+    if (location) {
+        if (modeId) {
+            const mode = location.item.modes.find((entry) => entry.id === modeId);
+            if (mode) {
+                return mode.value;
+            }
+        }
+        if (location.item.value !== undefined) {
+            return location.item.value;
+        }
+    }
+    return readNestedTokenValue(tokens.values, normalized);
+}
+function formatTokenEditorValue(value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number" && Number.isFinite(value)) {
+        return String(value);
+    }
+    if (typeof value === "boolean") {
+        return value ? "true" : "false";
+    }
+    return "";
+}
+function parseTokenEditorValue(raw) {
+    const value = raw.trim();
+    if (value === "true") {
+        return true;
+    }
+    if (value === "false") {
+        return false;
+    }
+    if (/^-?\d+(?:\.\d+)?$/.test(value)) {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+    return value;
+}
+function collectLeafTokenPaths(value, prefix, target) {
+    if (!isRecord(value)) {
+        if (prefix.length > 0) {
+            target.add(prefix);
+        }
+        return;
+    }
+    for (const [key, entry] of Object.entries(value)) {
+        const nextPath = prefix ? `${prefix}.${key}` : key;
+        if (isRecord(entry)) {
+            collectLeafTokenPaths(entry, nextPath, target);
+            continue;
+        }
+        if (!Array.isArray(entry)) {
+            target.add(nextPath);
+        }
+    }
+}
+function listTokenModes(tokens, collectionId) {
+    const modeMap = new Map([["__base__", "Base value"]]);
+    if (collectionId !== "__values__") {
+        const collection = tokens.collections.find((entry) => entry.id === collectionId);
+        for (const item of collection?.items ?? []) {
+            for (const mode of item.modes) {
+                modeMap.set(mode.id, mode.name);
+            }
+        }
+    }
+    const activeModeId = readActiveTokenModeId(tokens);
+    if (activeModeId && !modeMap.has(activeModeId)) {
+        modeMap.set(activeModeId, activeModeId);
+    }
+    return [...modeMap.entries()].map(([id, name]) => ({ id, name }));
+}
+function collectTokenUsages(document, tokenPath) {
+    const normalized = normalizeTokenPath(tokenPath);
+    const modeId = readActiveTokenModeId(document.tokens);
+    return document.pages.flatMap((page) => page.nodes.flatMap((node) => {
+        const entries = Object.entries(node.tokenRefs)
+            .flatMap(([property, value]) => {
+            const refPath = readTokenPath(value);
+            return refPath === normalized ? [{
+                    pageName: page.name,
+                    nodeId: node.id,
+                    nodeName: node.name,
+                    property,
+                    resolvedValue: resolveTokenValue(document.tokens, normalized, modeId)
+                }] : [];
+        });
+        return entries;
+    }));
+}
+function cloneTokenStore(tokens) {
+    return structuredClone(tokens);
+}
+function hasSelectedTokenBinding(node, property) {
+    return typeof readTokenPath(node.tokenRefs[property]) === "string";
+}
+function syncTokenEditorSelection() {
+    if (!currentState) {
+        selectedTokenPath = "";
+        selectedTokenCollectionId = "__values__";
+        selectedTokenModeId = "__base__";
+        return;
+    }
+    const node = getSelectedNode();
+    const selectedEntry = node
+        ? Object.entries(node.tokenRefs)
+            .map(([property, value]) => ({ property, path: readTokenPath(value) }))
+            .find((entry) => typeof entry.path === "string")
+        : null;
+    const knownPaths = new Set();
+    collectLeafTokenPaths(currentState.document.tokens.values, "", knownPaths);
+    for (const collection of currentState.document.tokens.collections) {
+        for (const item of collection.items) {
+            knownPaths.add(item.path);
+        }
+    }
+    if (selectedEntry && selectedTokenPath.length === 0) {
+        selectedTokenPath = selectedEntry.path;
+        tokenBindingPropertySelect.value = selectedEntry.property;
+    }
+    else if (selectedTokenPath.length === 0 || !knownPaths.has(selectedTokenPath)) {
+        selectedTokenPath = [...knownPaths][0] ?? "";
+    }
+    const collectionStillExists = selectedTokenCollectionId === "__values__"
+        || currentState.document.tokens.collections.some((entry) => entry.id === selectedTokenCollectionId);
+    if (!collectionStillExists) {
+        selectedTokenCollectionId = selectedTokenPath
+            ? findTokenCollectionId(currentState.document.tokens, selectedTokenPath) ?? "__values__"
+            : "__values__";
+    }
+    const activeModeId = readActiveTokenModeId(currentState.document.tokens);
+    selectedTokenModeId = activeModeId ?? "__base__";
+}
+function updateActiveTokenMode() {
+    if (!currentState || currentState.pendingMutation) {
+        return;
+    }
+    const nextTokens = cloneTokenStore(currentState.document.tokens);
+    if (selectedTokenModeId === "__base__") {
+        delete nextTokens.metadata.activeModeId;
+    }
+    else {
+        nextTokens.metadata.activeModeId = selectedTokenModeId;
+    }
+    applyOptimisticPatch([{ op: "tokens.replace", tokens: nextTokens }], currentState.selection);
+}
+function createTokenCollection() {
+    if (!currentState || currentState.pendingMutation) {
+        return;
+    }
+    const rawName = tokenCollectionNameInput.value.trim();
+    if (rawName.length === 0) {
+        tokenStatusElement.textContent = "Enter a collection name first.";
+        return;
+    }
+    const collectionId = rawName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || `collection-${crypto.randomUUID().slice(0, 6)}`;
+    const nextTokens = cloneTokenStore(currentState.document.tokens);
+    if (!nextTokens.collections.some((entry) => entry.id === collectionId)) {
+        nextTokens.collections.push({
+            id: collectionId,
+            name: rawName,
+            items: [],
+            metadata: {}
+        });
+    }
+    selectedTokenCollectionId = collectionId;
+    tokenCollectionNameInput.value = "";
+    applyOptimisticPatch([{ op: "tokens.replace", tokens: nextTokens }], currentState.selection);
+}
+function createTokenMode() {
+    if (!currentState || currentState.pendingMutation) {
+        return;
+    }
+    const rawName = tokenModeNameInput.value.trim();
+    const tokenPath = normalizeTokenPath(tokenPathInput.value);
+    if (rawName.length === 0 || tokenPath.length === 0) {
+        tokenStatusElement.textContent = "Choose a token path and enter a mode name first.";
+        return;
+    }
+    const nextTokens = cloneTokenStore(currentState.document.tokens);
+    const collectionId = selectedTokenCollectionId === "__values__"
+        ? (findTokenCollectionId(nextTokens, tokenPath) ?? "__values__")
+        : selectedTokenCollectionId;
+    if (collectionId === "__values__") {
+        tokenStatusElement.textContent = "Create or select a token collection before adding modes.";
+        return;
+    }
+    const collection = nextTokens.collections.find((entry) => entry.id === collectionId);
+    if (!collection) {
+        return;
+    }
+    let item = collection.items.find((entry) => entry.path === tokenPath);
+    if (!item) {
+        item = {
+            id: tokenPath.replace(/[^a-z0-9]+/gi, "_").toLowerCase(),
+            path: tokenPath,
+            value: parseTokenEditorValue(tokenValueInput.value || formatTokenEditorValue(resolveTokenValue(nextTokens, tokenPath, null))),
+            modes: [],
+            metadata: {}
+        };
+        collection.items.push(item);
+    }
+    const modeId = rawName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || `mode-${crypto.randomUUID().slice(0, 6)}`;
+    if (!item.modes.some((entry) => entry.id === modeId)) {
+        item.modes.push({
+            id: modeId,
+            name: rawName,
+            value: parseTokenEditorValue(tokenValueInput.value || formatTokenEditorValue(item.value)),
+            metadata: {}
+        });
+    }
+    nextTokens.metadata.activeModeId = modeId;
+    selectedTokenModeId = modeId;
+    tokenModeNameInput.value = "";
+    applyOptimisticPatch([{ op: "tokens.replace", tokens: nextTokens }], currentState.selection);
+}
+function saveTokenEditor() {
+    if (!currentState || currentState.pendingMutation) {
+        return;
+    }
+    const tokenPath = normalizeTokenPath(tokenPathInput.value);
+    if (tokenPath.length === 0) {
+        tokenStatusElement.textContent = "Enter a token path first.";
+        return;
+    }
+    const nextTokens = cloneTokenStore(currentState.document.tokens);
+    const nextValue = parseTokenEditorValue(tokenValueInput.value);
+    if (selectedTokenCollectionId === "__values__") {
+        setNestedValue(nextTokens.values, tokenPath, nextValue);
+    }
+    else {
+        const collection = nextTokens.collections.find((entry) => entry.id === selectedTokenCollectionId);
+        if (!collection) {
+            tokenStatusElement.textContent = "Choose a valid token collection.";
+            return;
+        }
+        let item = collection.items.find((entry) => entry.path === tokenPath);
+        if (!item) {
+            item = {
+                id: tokenPath.replace(/[^a-z0-9]+/gi, "_").toLowerCase(),
+                path: tokenPath,
+                value: nextValue,
+                modes: [],
+                metadata: {}
+            };
+            collection.items.push(item);
+        }
+        if (selectedTokenModeId === "__base__") {
+            item.value = nextValue;
+        }
+        else {
+            const modeName = tokenModeSelect.selectedOptions[0]?.textContent?.trim() || selectedTokenModeId;
+            const existingMode = item.modes.find((entry) => entry.id === selectedTokenModeId);
+            if (existingMode) {
+                existingMode.value = nextValue;
+            }
+            else {
+                item.modes.push({
+                    id: selectedTokenModeId,
+                    name: modeName,
+                    value: nextValue,
+                    metadata: {}
+                });
+            }
+            nextTokens.metadata.activeModeId = selectedTokenModeId;
+        }
+    }
+    const aliasTarget = normalizeTokenPath(tokenAliasInput.value);
+    nextTokens.aliases = nextTokens.aliases.filter((entry) => !(entry.path === tokenPath && (entry.modeId ?? null) === (selectedTokenModeId === "__base__" ? null : selectedTokenModeId)));
+    if (aliasTarget.length > 0) {
+        nextTokens.aliases.push({
+            path: tokenPath,
+            targetPath: aliasTarget,
+            modeId: selectedTokenModeId === "__base__" ? null : selectedTokenModeId,
+            metadata: {}
+        });
+    }
+    selectedTokenPath = tokenPath;
+    applyOptimisticPatch([{ op: "tokens.replace", tokens: nextTokens }], currentState.selection);
+}
+function bindSelectedNodeToToken() {
+    const node = getSelectedNode();
+    if (!node || !currentState || currentState.pendingMutation) {
+        return;
+    }
+    const tokenPath = normalizeTokenPath(tokenPathInput.value);
+    const property = tokenBindingPropertySelect.value || "backgroundColor";
+    if (tokenPath.length === 0) {
+        tokenStatusElement.textContent = "Choose a token path first.";
+        return;
+    }
+    const nextTokenRefs = { ...node.tokenRefs, [property]: tokenPath };
+    const nextStyle = { ...node.style };
+    const resolvedValue = resolveTokenValue(currentState.document.tokens, tokenPath, readActiveTokenModeId(currentState.document.tokens));
+    if (typeof resolvedValue === "string" || typeof resolvedValue === "number") {
+        nextStyle[property] = resolvedValue;
+    }
+    const nextTokens = cloneTokenStore(currentState.document.tokens);
+    const bindingIdentity = readSelectedBindingIdentity(currentState.document, node.id);
+    nextTokens.bindings = nextTokens.bindings.filter((entry) => !(entry.nodeId === node.id && entry.property === property));
+    nextTokens.bindings.push({
+        path: tokenPath,
+        nodeId: node.id,
+        bindingId: bindingIdentity.bindingId ?? null,
+        property,
+        metadata: {}
+    });
+    selectedTokenPath = tokenPath;
+    applyOptimisticPatch([
+        {
+            op: "node.update",
+            nodeId: node.id,
+            changes: {
+                tokenRefs: nextTokenRefs,
+                style: nextStyle
+            }
+        },
+        {
+            op: "tokens.replace",
+            tokens: nextTokens
+        }
+    ], currentState.selection);
+}
+function clearSelectedTokenBinding() {
+    const node = getSelectedNode();
+    if (!node || !currentState || currentState.pendingMutation) {
+        return;
+    }
+    const property = tokenBindingPropertySelect.value || "backgroundColor";
+    if (!hasSelectedTokenBinding(node, property)) {
+        return;
+    }
+    const nextTokenRefs = { ...node.tokenRefs };
+    delete nextTokenRefs[property];
+    const nextTokens = cloneTokenStore(currentState.document.tokens);
+    nextTokens.bindings = nextTokens.bindings.filter((entry) => !(entry.nodeId === node.id && entry.property === property));
+    applyOptimisticPatch([
+        {
+            op: "node.update",
+            nodeId: node.id,
+            changes: {
+                tokenRefs: nextTokenRefs
+            }
+        },
+        {
+            op: "tokens.replace",
+            tokens: nextTokens
+        }
+    ], currentState.selection);
+}
+function resolveStageStyle(documentState, node) {
+    const style = { ...node.style };
+    const modeId = readActiveTokenModeId(documentState.tokens);
+    for (const [property, value] of Object.entries(node.tokenRefs)) {
+        const tokenPath = readTokenPath(value);
+        if (!tokenPath) {
+            continue;
+        }
+        const resolvedValue = resolveTokenValue(documentState.tokens, tokenPath, modeId);
+        if (typeof resolvedValue === "string" || typeof resolvedValue === "number") {
+            style[property] = resolvedValue;
+        }
+    }
+    return style;
+}
+function getDraftId(draft) {
+    return draft.kind === "region" ? draft.regionId : draft.nodeId;
+}
+function isEditableTarget(target) {
+    return target instanceof HTMLInputElement
+        || target instanceof HTMLTextAreaElement
+        || (target instanceof HTMLElement && target.isContentEditable);
+}
+function postViewState() {
+    if (!currentState) {
+        return;
+    }
+    port.postMessage({
+        type: "canvas-page-view-state",
+        viewport: currentState.viewport,
+        selection: currentState.selection
+    });
+}
+function schedulePersist(state) {
+    if (persistTimer !== null) {
+        window.clearTimeout(persistTimer);
+    }
+    persistTimer = window.setTimeout(() => {
+        void flushPersist(state);
+    }, SAVE_DEBOUNCE_MS);
+}
+async function flushPersist(state = currentState) {
+    if (!state) {
+        return;
+    }
+    if (persistTimer !== null) {
+        window.clearTimeout(persistTimer);
+        persistTimer = null;
+    }
+    await saveCachedState(currentTabId, state);
+    broadcastChannel?.postMessage({ type: "canvas-page:broadcast", state });
+}
+async function getCurrentTabId() {
+    return await new Promise((resolve) => {
+        chrome.tabs.getCurrent((tab) => {
+            const tabId = tab?.id;
             resolve(typeof tabId === "number" ? tabId : null);
         });
     });
@@ -1547,10 +3210,149 @@ function normalizeDocument(value) {
         bindings: Array.isArray(value.bindings) ? value.bindings.flatMap((entry) => normalizeBinding(entry)) : [],
         assets: Array.isArray(value.assets) ? value.assets.flatMap((entry) => normalizeAsset(entry)) : [],
         componentInventory: Array.isArray(value.componentInventory)
-            ? value.componentInventory.filter(isRecord)
-            : []
+            ? value.componentInventory.flatMap((entry, index) => normalizeComponentInventoryItem(entry, index))
+            : [],
+        tokens: normalizeTokenStore(value.tokens),
+        meta: normalizeDocumentMeta(value.meta)
+    };
+}
+function normalizeComponentInventoryItem(value, index) {
+    if (!isRecord(value)) {
+        return [];
+    }
+    const id = typeof value.id === "string" ? value.id : `inventory_${index + 1}`;
+    const name = typeof value.name === "string"
+        ? value.name
+        : typeof value.componentName === "string"
+            ? value.componentName
+            : id;
+    return [{
+            id,
+            name,
+            componentName: typeof value.componentName === "string" ? value.componentName : undefined,
+            sourceKind: typeof value.sourceKind === "string" ? value.sourceKind : undefined,
+            sourceFamily: typeof value.sourceFamily === "string" ? value.sourceFamily : undefined,
+            origin: typeof value.origin === "string" ? value.origin : undefined,
+            framework: normalizeComponentRef(value.framework),
+            adapter: normalizeComponentRef(value.adapter),
+            plugin: normalizeComponentRef(value.plugin),
+            variants: Array.isArray(value.variants) ? value.variants.filter(isRecord) : [],
+            props: Array.isArray(value.props) ? value.props.filter(isRecord) : [],
+            slots: Array.isArray(value.slots) ? value.slots.filter(isRecord) : [],
+            events: Array.isArray(value.events) ? value.events.filter(isRecord) : [],
+            content: isRecord(value.content) ? value.content : {},
+            metadata: isRecord(value.metadata) ? value.metadata : {}
+        }];
+}
+function normalizeComponentRef(value) {
+    if (!isRecord(value) || typeof value.id !== "string") {
+        return null;
+    }
+    return {
+        id: value.id,
+        label: typeof value.label === "string" ? value.label : typeof value.name === "string" ? value.name : undefined,
+        packageName: typeof value.packageName === "string" ? value.packageName : undefined,
+        version: typeof value.version === "string" ? value.version : undefined,
+        metadata: isRecord(value.metadata) ? value.metadata : {}
+    };
+}
+function normalizeTokenStore(value) {
+    if (!isRecord(value)) {
+        return { values: {}, collections: [], aliases: [], bindings: [], metadata: {} };
+    }
+    const structured = "values" in value || "collections" in value || "aliases" in value || "bindings" in value || "metadata" in value;
+    return {
+        values: structured && isRecord(value.values) ? value.values : structured ? {} : value,
+        collections: Array.isArray(value.collections) ? value.collections.flatMap((entry) => normalizeTokenCollection(entry)) : [],
+        aliases: Array.isArray(value.aliases) ? value.aliases.flatMap((entry) => normalizeTokenAlias(entry)) : [],
+        bindings: Array.isArray(value.bindings) ? value.bindings.flatMap((entry) => normalizeTokenBinding(entry)) : [],
+        metadata: isRecord(value.metadata) ? value.metadata : {}
+    };
+}
+function normalizeTokenCollection(value) {
+    if (!isRecord(value) || typeof value.id !== "string") {
+        return [];
+    }
+    return [{
+            id: value.id,
+            name: typeof value.name === "string" ? value.name : value.id,
+            items: Array.isArray(value.items) ? value.items.flatMap((entry) => normalizeTokenItem(entry)) : [],
+            metadata: isRecord(value.metadata) ? value.metadata : {}
+        }];
+}
+function normalizeTokenItem(value) {
+    if (!isRecord(value) || typeof value.id !== "string" || typeof value.path !== "string") {
+        return [];
+    }
+    return [{
+            id: value.id,
+            path: normalizeTokenPath(value.path),
+            value: value.value,
+            type: typeof value.type === "string" ? value.type : undefined,
+            description: typeof value.description === "string" ? value.description : undefined,
+            modes: Array.isArray(value.modes) ? value.modes.flatMap((entry) => normalizeTokenMode(entry)) : [],
+            metadata: isRecord(value.metadata) ? value.metadata : {}
+        }];
+}
+function normalizeTokenMode(value) {
+    if (!isRecord(value) || typeof value.id !== "string" || typeof value.name !== "string") {
+        return [];
+    }
+    return [{
+            id: value.id,
+            name: value.name,
+            value: value.value,
+            metadata: isRecord(value.metadata) ? value.metadata : {}
+        }];
+}
+function normalizeTokenAlias(value) {
+    if (!isRecord(value) || typeof value.path !== "string" || typeof value.targetPath !== "string") {
+        return [];
+    }
+    return [{
+            path: normalizeTokenPath(value.path),
+            targetPath: normalizeTokenPath(value.targetPath),
+            modeId: typeof value.modeId === "string" ? value.modeId : null,
+            metadata: isRecord(value.metadata) ? value.metadata : {}
+        }];
+}
+function normalizeTokenBinding(value) {
+    if (!isRecord(value) || typeof value.path !== "string") {
+        return [];
+    }
+    return [{
+            path: normalizeTokenPath(value.path),
+            nodeId: typeof value.nodeId === "string" ? value.nodeId : null,
+            bindingId: typeof value.bindingId === "string" ? value.bindingId : null,
+            property: typeof value.property === "string" ? value.property : null,
+            metadata: isRecord(value.metadata) ? value.metadata : {}
+        }];
+}
+function normalizeDocumentMeta(value) {
+    if (!isRecord(value)) {
+        return { imports: [], starter: null, adapterPlugins: [], pluginErrors: [], metadata: {} };
+    }
+    return {
+        imports: Array.isArray(value.imports) ? value.imports.filter(isRecord) : [],
+        starter: isRecord(value.starter) ? value.starter : null,
+        adapterPlugins: Array.isArray(value.adapterPlugins) ? value.adapterPlugins.filter(isRecord) : [],
+        pluginErrors: Array.isArray(value.pluginErrors)
+            ? value.pluginErrors.flatMap((entry) => normalizePluginError(entry))
+            : [],
+        metadata: isRecord(value.metadata) ? value.metadata : {}
     };
 }
+function normalizePluginError(value) {
+    if (!isRecord(value) || typeof value.code !== "string" || typeof value.message !== "string") {
+        return [];
+    }
+    return [{
+            pluginId: typeof value.pluginId === "string" ? value.pluginId : undefined,
+            code: value.code,
+            message: value.message,
+            details: isRecord(value.details) ? value.details : {}
+        }];
+}
 function normalizePage(value) {
     if (!isRecord(value) || typeof value.id !== "string") {
         return [];
@@ -1585,7 +3387,9 @@ function normalizeNode(value, pageId) {
             } : { x: 0, y: 0, width: 240, height: 120 },
             props: isRecord(value.props) ? value.props : {},
             style: isRecord(value.style) ? value.style : {},
+            tokenRefs: isRecord(value.tokenRefs) ? value.tokenRefs : {},
             bindingRefs: isRecord(value.bindingRefs) ? value.bindingRefs : {},
+            variantPatches: Array.isArray(value.variantPatches) ? value.variantPatches.filter(isRecord) : [],
             metadata: isRecord(value.metadata) ? value.metadata : {}
         }];
 }
@@ -1597,6 +3401,7 @@ function normalizeBinding(value) {
             id: value.id,
             nodeId: value.nodeId,
             kind: typeof value.kind === "string" ? value.kind : "component",
+            selector: typeof value.selector === "string" ? value.selector : undefined,
             componentName: typeof value.componentName === "string" ? value.componentName : undefined,
             metadata: isRecord(value.metadata) ? value.metadata : {}
         }];
@@ -1722,7 +3527,7 @@ function queueViewportFitIfNeeded() {
     if (!currentState || !isDefaultEditorViewport(currentState.viewport)) {
         return;
     }
-    const page = currentState.document.pages[0];
+    const page = getActivePage();
     if (!page || page.nodes.length === 0) {
         return;
     }
@@ -1748,11 +3553,14 @@ function queueViewportFitIfNeeded() {
     });
 }
 function resolvePreferredViewport(state) {
-    const page = state.document.pages[0];
-    if (!page || page.nodes.length === 0) {
+    const page = (activePageId ? state.document.pages.find((entry) => entry.id === activePageId) : null)
+        ?? state.document.pages.find((entry) => entry.id === state.selection.pageId)
+        ?? state.document.pages[0];
+    const visibleNodes = page?.nodes.filter((node) => !isNodeHidden(node)) ?? [];
+    if (!page || visibleNodes.length === 0) {
         return { ...DEFAULT_EDITOR_VIEWPORT };
     }
-    return computeFittedViewport(page.nodes, stageElement.clientWidth, stageElement.clientHeight);
+    return computeFittedViewport(visibleNodes, stageElement.clientWidth, stageElement.clientHeight);
 }
 function findNode(document, nodeId) {
     if (!document) {