@jxsuite/studio 0.1.0 → 0.5.1

package/src/studio.js

@@ -9,11 +9,8 @@ import {
   createState,
   selectNode,
   hoverNode,
-  undo,
-  redo,
   insertNode,
   removeNode,
-  duplicateNode,
   moveNode,
   updateProperty,
   updateStyle,
@@ -40,7 +37,6 @@ import {
   isAncestor,
   canvasWrap,
   leftPanel,
-  rightPanel,
   toolbarEl,
   elToPath,
   canvasPanels,
@@ -58,11 +54,22 @@ import {
   runUpdateMiddleware,
   addPostRenderHook,
   runPostRenderHooks,
+  notify,
   projectState,
   setProjectState,
+  updateFrontmatter,
+  updateUi,
+  updateSession,
+  setUpdateSessionFn,
+  setGetDocFn,
+  setGetSessionFn,
+  toFlat,
+  fromFlat,
 } from "./store.js";
 
-import { renderNode as runtimeRenderNode, buildScope, defineElement } from "@jxplatform/runtime";
+import { view } from "./view.js";
+
+import { renderNode as runtimeRenderNode, buildScope, defineElement } from "@jxsuite/runtime";
 
 import {
   startEditing,
@@ -86,17 +93,23 @@ import {
   kebabToLabel,
   propLabel,
   attrLabel,
-  abbreviateValue,
   inferInputType,
+  findCollectionSchema,
   friendlyNameToVar,
   varDisplayName,
   parseCemType,
 } from "./utils/studio-utils.js";
-import { renderStatusbar, statusMessage, setStatusbarRenderer } from "./panels/statusbar.js";
+import {
+  renderStatusbar,
+  statusMessage,
+  setStatusbarRenderer,
+  mountStatusbar,
+} from "./panels/statusbar.js";
 import {
   openFile as _openFile,
   loadMarkdown as _loadMarkdown,
   saveFile as _saveFile,
+  exportFile as _exportFile,
 } from "./files/file-ops.js";
 import {
   loadProject as _loadProject,
@@ -107,9 +120,17 @@ import {
 } from "./files/files.js";
 import { eventsSidebarTemplate as _eventsSidebarTemplate } from "./panels/events-panel.js";
 import { renderImportsTemplate } from "./panels/imports-panel.js";
+import { renderHeadTemplate } from "./panels/head-panel.js";
 import { exportCemManifest as _exportCemManifest } from "./services/cem-export.js";
 
 import { registerPlatform, getPlatform, hasPlatform } from "./platform.js";
+import {
+  parseMediaEntries,
+  activeBreakpointsForWidth,
+  applyCanvasStyle,
+  collectMediaOverrides,
+  applyOverridesToCanvas,
+} from "./utils/canvas-media.js";
 import { createDevServerPlatform } from "./platforms/devserver.js";
 import { codeService, setLintMarkers, getFunctionArgs } from "./services/code-services.js";
 import {
@@ -146,7 +167,6 @@ import {
 
 import { html, render as litRender, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { classMap } from "lit-html/directives/class-map.js";
 import { ref } from "lit-html/directives/ref.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
@@ -161,10 +181,21 @@ import { renderDataExplorerTemplate } from "./panels/data-explorer.js";
 // Explicit class imports + registration — bare side-effect imports are tree-shaken
 // by Bun's bundler despite sideEffects declarations in Spectrum's package.json.
 import { components as _swc } from "./ui/spectrum.js"; // eslint-disable-line no-unused-vars
-import icons from "./ui/icons.js";
-import { showContextMenu } from "./editor/context-menu.js";
+import { renderFieldRow } from "./ui/field-row.js";
+import { widgetForType as _widgetForType } from "./ui/widgets.js";
+import { computeInheritedStyle } from "./utils/inherited-style.js";
+import "./ui/panel-resize.js";
+import { showContextMenu, dismissContextMenu } from "./editor/context-menu.js";
+import { convertToComponent } from "./editor/convert-to-component.js";
 import { initShortcuts } from "./editor/shortcuts.js";
-import { renderActivityBar, tabIcon } from "./panels/activity-bar.js";
+import { renderActivityBar } from "./panels/activity-bar.js";
+import { renderBrowse } from "./browse/browse.js";
+import { renderCollectionsEditor } from "./settings/collections-editor.js";
+import { renderDefsEditor } from "./settings/defs-editor.js";
+import * as toolbarPanel from "./panels/toolbar.js";
+import * as overlaysPanel from "./panels/overlays.js";
+import * as rightPanelMod from "./panels/right-panel.js";
+import { mediaDisplayName, ensureLitState } from "./panels/shared.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 // ─── Globals ──────────────────────────────────────────────────────────────────
@@ -172,7 +203,11 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 // into their own modules, they will migrate to ctx in store.js.
 
 /** @type {any} */
-let S; // current state
+let S; // current state (flat compatibility view)
+/** @type {any} */
+let doc = null; // doc slice (persisted, history, autosave)
+/** @type {any} */
+let session = null; // session slice (selection, hover, ui)
 
 /** Creates a display:contents container appended to sp-theme or body, for floating popovers/menus. */
 function createFloatingContainer() {
@@ -182,32 +217,7 @@ function createFloatingContainer() {
   return el;
 }
 
-const toolbar = toolbarEl;
-
 let canvasMode = "design";
-let panX = 0;
-let panY = 0;
-let needsCenter = true;
-/** @type {ResizeObserver | null} */
-let centerObserver = null;
-/** @type {any} */
-let panzoomWrap = null;
-/** @type {any} */
-let componentInlineEdit = null;
-/** @type {any} */
-let pendingInlineEdit = null;
-/** @type {any} */
-let monacoEditor = null;
-/** @type {any} */
-let functionEditor = null;
-/** @type {any} */
-let liveScope = null;
-/** @type {any} */
-let blockActionBarEl = null;
-/** @type {any} */
-let _inlineEditCleanup = null;
-/** @type {any} */
-let selDragCleanup = null;
 
 // ─── Component registry ───────────────────────────────────────────────────────
 
@@ -247,8 +257,8 @@ async function navigateBack() {
 async function closeFunctionEditor() {
   const editing = S.ui.editingFunction;
   if (!editing) return;
-  if (functionEditor) {
-    const currentCode = functionEditor.getValue();
+  if (view.functionEditor) {
+    const currentCode = view.functionEditor.getValue();
     const minResult = await codeService("minify", { code: currentCode });
     const bodyToStore = minResult?.code ?? currentCode;
     if (editing.type === "def") {
@@ -264,27 +274,12 @@ async function closeFunctionEditor() {
         }),
       );
     }
-    functionEditor.dispose();
-    functionEditor = null;
+    view.functionEditor.dispose();
+    view.functionEditor = null;
   }
-  S = { ...S, ui: { ...S.ui, editingFunction: null } };
-  renderCanvas();
-  renderToolbar();
+  updateUi("editingFunction", null);
 }
 
-/**
- * DnD cleanup functions from previous render — called on re-render
- *
- * @type {any[]}
- */
-let dndCleanups = [];
-/**
- * Canvas DnD cleanup functions — separate from layer panel
- *
- * @type {any[]}
- */
-let canvasDndCleanups = [];
-
 /**
  * Convert a template string to a displayable expression for edit mode. Replaces ${expr} with ❮ expr
  * ❯ so the runtime renders it as literal text.
@@ -482,10 +477,11 @@ function prepareForEditMode(node) {
  * created element via onNodeCreated callback. Returns the live state scope on success, null on
  * failure.
  *
+ * @param {number} gen - Render generation for staleness detection
  * @param {any} doc
  * @param {any} canvasEl
  */
-async function renderCanvasLive(doc, canvasEl) {
+async function renderCanvasLive(gen, doc, canvasEl) {
   canvasEl.innerHTML = "";
 
   // Apply content mode typography styling
@@ -525,10 +521,44 @@ async function renderCanvasLive(doc, canvasEl) {
   }
 
   try {
-    const docBase = S.documentPath ? `${location.origin}/${S.documentPath}` : undefined;
+    const root = projectState?.projectRoot || "";
+    const docPrefix = root ? `${root}/` : "";
+    const docBase = S.documentPath ? `${location.origin}/${docPrefix}${S.documentPath}` : undefined;
 
     // Register custom elements so the runtime can render them
-    const effectiveElements = getEffectiveElements(renderDoc.$elements);
+    let effectiveElements = getEffectiveElements(renderDoc.$elements);
+
+    // In content mode (markdown), auto-discover components for directive-based
+    // custom elements that have no explicit $elements registration.
+    if (S.mode === "content" && componentRegistry.length > 0) {
+      const existingRefs = new Set(
+        effectiveElements.map((/** @type {any} */ e) => (typeof e === "string" ? e : e?.$ref)),
+      );
+      /** @param {any} node */
+      const collectTags = (node) => {
+        /** @type {Set<string>} */
+        const tags = new Set();
+        if (!node || typeof node !== "object") return tags;
+        if (node.tagName) tags.add(node.tagName);
+        if (Array.isArray(node.children)) {
+          for (const child of node.children) {
+            for (const t of collectTags(child)) tags.add(t);
+          }
+        }
+        return tags;
+      };
+      for (const tag of collectTags(renderDoc)) {
+        const comp = componentRegistry.find((/** @type {any} */ c) => c.tagName === tag);
+        if (comp && comp.source !== "npm") {
+          const relPath = computeRelativePath(S.documentPath, comp.path);
+          if (!existingRefs.has(relPath)) {
+            effectiveElements.push({ $ref: relPath });
+            existingRefs.add(relPath);
+          }
+        }
+      }
+    }
+
     if (effectiveElements.length) {
       renderDoc.$elements = effectiveElements;
       for (const entry of effectiveElements) {
@@ -553,9 +583,55 @@ async function renderCanvasLive(doc, canvasEl) {
       }
     }
 
+    // Bail out if a newer render started while we were importing elements
+    if (gen !== view.renderGeneration) return null;
+
     // Inject site-level imports so buildScope can resolve $prototype names
     renderDoc.imports = getEffectiveImports(renderDoc.imports);
 
+    // Apply project-level styles mirroring the compiler convention:
+    //   viewport ≈ :root  → CSS custom properties (they inherit down)
+    //   canvasEl ≈ body   → regular CSS properties (inline beats CSS defaults)
+    // This ensures project font-family, color, etc. override the
+    // content-mode fallback typography rules in the stylesheet.
+    // In edit mode, propagate to the .content-edit-canvas wrapper for seamless appearance.
+    const viewport = canvasEl.closest(".canvas-panel-viewport");
+    const editSurface = canvasMode === "edit" ? canvasEl.closest(".content-edit-canvas") : null;
+    const siteStyle = projectState?.projectConfig?.style;
+    if (viewport) {
+      viewport.style.cssText = "";
+      if (siteStyle && typeof siteStyle === "object") {
+        for (const [k, v] of Object.entries(siteStyle)) {
+          if (k.startsWith("--")) {
+            viewport.style.setProperty(k, String(v));
+          } else {
+            /** @type {any} */ (viewport.style)[k] = v;
+          }
+        }
+      }
+    }
+    if (editSurface) {
+      if (siteStyle && typeof siteStyle === "object") {
+        for (const [k, v] of Object.entries(siteStyle)) {
+          if (k.startsWith("--")) {
+            /** @type {any} */ (editSurface).style.setProperty(k, String(v));
+          } else {
+            /** @type {any} */ (editSurface.style)[k] = v;
+          }
+        }
+      }
+    }
+    if (siteStyle && typeof siteStyle === "object") {
+      for (const [k, v] of Object.entries(siteStyle)) {
+        if (!k.startsWith("--")) {
+          /** @type {any} */ (canvasEl.style)[k] = v;
+        }
+      }
+    }
+
+    // Inject site-level $media so runtime can resolve media queries in styles
+    renderDoc.$media = getEffectiveMedia(renderDoc.$media);
+
     // Inject $head elements (link/meta/script) into document.head
     const effectiveHead = getEffectiveHead(renderDoc.$head);
     if (effectiveHead.length) {
@@ -584,6 +660,8 @@ async function renderCanvasLive(doc, canvasEl) {
     }
 
     const $defs = await buildScope(renderDoc, {}, docBase);
+    // Bail out if a newer render started while buildScope was running
+    if (gen !== view.renderGeneration) return null;
     const el = /** @type {HTMLElement} */ (
       runtimeRenderNode(renderDoc, $defs, {
         onNodeCreated(/** @type {any} */ el, /** @type {any} */ path) {
@@ -632,7 +710,7 @@ async function renderCanvasLive(doc, canvasEl) {
         const editingEl = getActiveElement();
         for (const child of canvasEl.querySelectorAll("*")) {
           // Preserve pointer-events on the actively-edited element
-          if (componentInlineEdit && child === componentInlineEdit.el) continue;
+          if (view.componentInlineEdit && child === view.componentInlineEdit.el) continue;
           if (editingEl && child === editingEl) continue;
           /** @type {any} */ (child).style.pointerEvents = "none";
         }
@@ -640,7 +718,7 @@ async function renderCanvasLive(doc, canvasEl) {
     }
     return $defs;
   } catch (/** @type {any} */ err) {
-    console.warn("Jx Studio: runtime render failed, falling back to structural preview", err);
+    console.warn("renderCanvasLive failed:", err.message, err);
     return null;
   }
 }
@@ -666,43 +744,11 @@ litRender(
 const cssInitialMap = new Map(/** @type {any} */ (webdata.cssProps));
 
 // Persistent render hosts for lit-html (must be before bootstrap/render)
-const zoomIndicatorHost = document.createElement("div");
+let zoomIndicatorHost = document.createElement("div");
 zoomIndicatorHost.style.display = "contents";
 document.body.appendChild(zoomIndicatorHost);
 
-// ─── Icon maps & module-level UI state (must be before render() call) ─────────
-
-const toolbarIconMap = /** @type {Record<string, any>} */ ({
-  "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
-  "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
-  "sp-icon-back": html`<sp-icon-back slot="icon"></sp-icon-back>`,
-  "sp-icon-undo": html`<sp-icon-undo slot="icon"></sp-icon-undo>`,
-  "sp-icon-redo": html`<sp-icon-redo slot="icon"></sp-icon-redo>`,
-  "sp-icon-duplicate": html`<sp-icon-duplicate slot="icon"></sp-icon-duplicate>`,
-  "sp-icon-delete": html`<sp-icon-delete slot="icon"></sp-icon-delete>`,
-  "sp-icon-edit": html`<sp-icon-edit slot="icon"></sp-icon-edit>`,
-  "sp-icon-artboard": html`<sp-icon-artboard slot="icon"></sp-icon-artboard>`,
-  "sp-icon-preview": html`<sp-icon-preview slot="icon"></sp-icon-preview>`,
-  "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
-  "sp-icon-brush": html`<sp-icon-brush slot="icon"></sp-icon-brush>`,
-  "sp-icon-document": html`<sp-icon-document slot="icon"></sp-icon-document>`,
-});
-
-/**
- * @param {any} label
- * @param {any} onClick
- * @param {any} iconTag
- */
-function tbBtnTpl(label, onClick, iconTag) {
-  return html`
-    <sp-action-button size="s" @click=${onClick}>
-      ${iconTag ? toolbarIconMap[iconTag] : nothing} ${label}
-    </sp-action-button>
-  `;
-}
-
-let elementsCollapsed = new Set();
-let elementsFilter = "";
+// ─── Module-level UI state (must be before render() call) ─────────────────────
 
 // ─── Bootstrap ────────────────────────────────────────────────────────────────
 
@@ -721,65 +767,173 @@ const EMPTY_DOC = {
 };
 
 S = createState(structuredClone(EMPTY_DOC));
+({ doc, session } = fromFlat(S));
 
 // ─── Render loop ──────────────────────────────────────────────────────────────
 
+// Mount extracted panel modules
+toolbarPanel.mount(toolbarEl, {
+  navigateBack: () => navigateBack(),
+  closeFunctionEditor: () => closeFunctionEditor(),
+  openProject: () => openProject(),
+  openFile: () => openFile(),
+  saveFile: () => saveFile(),
+  parseMediaEntries,
+  getCanvasMode: () => canvasMode,
+  setCanvasMode: (/** @type {any} */ m) => {
+    canvasMode = m;
+  },
+  renderCanvas: () => renderCanvas(),
+  safeRenderRightPanel: () => safeRenderRightPanel(),
+});
+
+overlaysPanel.mount({
+  effectiveZoom,
+  getCanvasMode: () => canvasMode,
+  isEditing,
+  renderBlockActionBar,
+  findCanvasElement,
+  getActivePanel,
+});
+
+rightPanelMod.mount({
+  propertiesSidebarTemplate,
+  renderStylePanelTemplate,
+  renderCanvas: () => renderCanvas(),
+  updateForcedPseudoPreview,
+});
+
 // Register all renderers with the store so render()/renderOnly() work
-registerRenderer("toolbar", () => renderToolbar());
+registerRenderer("toolbar", () => toolbarPanel.render());
 registerRenderer("activityBar", () => renderActivityBar(S));
 registerRenderer("leftPanel", () => renderLeftPanel());
 registerRenderer("canvas", () => renderCanvas());
-registerRenderer("rightPanel", () => renderRightPanel());
-registerRenderer("overlays", () => renderOverlays());
+registerRenderer("rightPanel", () => rightPanelMod.render());
+registerRenderer("overlays", () => overlaysPanel.render());
 registerRenderer("statusbar", () => renderStatusbar(S));
 setStatusbarRenderer(() => renderStatusbar(S));
+mountStatusbar();
+
+function safeRenderLeftPanel() {
+  try {
+    ensureLitState(leftPanel);
+    renderLeftPanel();
+  } catch (e) {
+    console.error("renderLeftPanel error:", e);
+    try {
+      leftPanel.textContent = "";
+      // @ts-ignore
+      delete leftPanel["_$litPart$"];
+      renderLeftPanel();
+    } catch (e2) {
+      console.error("renderLeftPanel retry failed:", e2);
+    }
+  }
+}
+
+function safeRenderRightPanel() {
+  rightPanelMod.render();
+}
 
 // Register the update implementation with the store
 setGetStateFn(() => S);
 setUpdateFn(function _update(/** @type {any} */ newState) {
+  const prev = S;
   const prevDoc = S.document;
   const prevSel = S.selection;
   S = newState;
 
-  renderToolbar();
-
-  if (prevDoc !== S.document) {
+  // Keep doc/session slices in sync with flat S
+  ({ doc, session } = fromFlat(S));
+
+  const docChanged = prevDoc !== S.document;
+  const selChanged = !pathsEqual(prevSel, S.selection);
+  const modeChanged = prev.mode !== S.mode;
+  const uiChanged = prev.ui !== S.ui;
+
+  const canvasUiChanged =
+    uiChanged &&
+    (prev.ui?.editingFunction !== S.ui?.editingFunction ||
+      prev.ui?.settingsTab !== S.ui?.settingsTab ||
+      prev.ui?.stylebookTab !== S.ui?.stylebookTab ||
+      prev.ui?.stylebookFilter !== S.ui?.stylebookFilter ||
+      prev.ui?.stylebookCustomizedOnly !== S.ui?.stylebookCustomizedOnly ||
+      prev.ui?.featureToggles !== S.ui?.featureToggles);
+  const leftUiChanged =
+    uiChanged && (prev.ui?.leftTab !== S.ui?.leftTab || prev.ui?.settingsTab !== S.ui?.settingsTab);
+
+  if (docChanged || modeChanged || canvasUiChanged) {
     try {
       renderCanvas();
     } catch (e) {
-      console.warn("renderCanvas error:", e);
+      console.error("renderCanvas error:", e);
     }
-    renderLeftPanel();
-  } else if (!pathsEqual(prevSel, S.selection)) {
-    renderLeftPanel();
+    safeRenderLeftPanel();
+  } else if (selChanged || leftUiChanged) {
+    safeRenderLeftPanel();
   }
 
-  // Skip right-panel rebuild when an input inside it is focused (user is typing)
-  // unless the selection changed — that always needs a full re-render
-  // Also re-render when color popover is open (changes come from outside rightPanel)
-  const colorPopoverOpen = !!_colorPopoverHost.querySelector("sp-popover[open]");
-  const activeTag = document.activeElement?.tagName;
-  const rightHasFocus =
-    !colorPopoverOpen &&
-    rightPanel.contains(document.activeElement) &&
-    (activeTag === "INPUT" ||
-      activeTag === "TEXTAREA" ||
-      activeTag === "SP-TEXTFIELD" ||
-      activeTag === "SP-NUMBER-FIELD" ||
-      activeTag === "SP-PICKER" ||
-      activeTag === "SP-COMBOBOX" ||
-      activeTag === "SP-SEARCH");
-  if (!rightHasFocus || !pathsEqual(prevSel, S.selection)) {
-    renderRightPanel();
+  if (uiChanged && prev.ui?.activeMedia !== S.ui?.activeMedia) {
+    updateActivePanelHeaders();
   }
-  renderOverlays();
-  renderStatusbar(S);
 
-  // Post-render hooks (pseudo-state preview, pending inline edit, etc.)
   runPostRenderHooks(prevDoc, prevSel);
-
-  // Update middleware (autosave, etc.)
   runUpdateMiddleware(S);
+
+  notify({
+    doc: docChanged,
+    selection: selChanged,
+    hover: false,
+    ui: uiChanged,
+    mode: modeChanged,
+  });
+});
+
+// Register session dispatch — lightweight path for selection/hover/ui changes
+setGetDocFn(() => doc);
+setGetSessionFn(() => session);
+setUpdateSessionFn(function _updateSession(/** @type {any} */ patch) {
+  const prev = session;
+  session = { ...session, ...patch };
+  if (patch.ui) {
+    session.ui = { ...prev.ui, ...patch.ui };
+  }
+  S = toFlat(doc, session);
+
+  const selChanged = !pathsEqual(prev.selection, session.selection);
+  const uiChanged = prev.ui !== session.ui;
+
+  const canvasUiChanged =
+    uiChanged &&
+    (prev.ui?.editingFunction !== session.ui?.editingFunction ||
+      prev.ui?.settingsTab !== session.ui?.settingsTab ||
+      prev.ui?.stylebookTab !== session.ui?.stylebookTab ||
+      prev.ui?.stylebookFilter !== session.ui?.stylebookFilter ||
+      prev.ui?.stylebookCustomizedOnly !== session.ui?.stylebookCustomizedOnly ||
+      prev.ui?.featureToggles !== session.ui?.featureToggles);
+  const leftUiChanged =
+    uiChanged &&
+    (prev.ui?.leftTab !== session.ui?.leftTab || prev.ui?.settingsTab !== session.ui?.settingsTab);
+
+  if (canvasUiChanged) {
+    try {
+      renderCanvas();
+    } catch (e) {
+      console.error("renderCanvas error:", e);
+    }
+    safeRenderLeftPanel();
+  } else if (selChanged || leftUiChanged) {
+    safeRenderLeftPanel();
+  }
+
+  if (uiChanged && prev.ui?.activeMedia !== session.ui?.activeMedia) {
+    updateActivePanelHeaders();
+  }
+
+  runPostRenderHooks(doc.document, prev.selection);
+
+  const hoverChanged = prev.hover !== session.hover;
+  notify({ doc: false, selection: selChanged, hover: hoverChanged, ui: uiChanged, mode: false });
 });
 
 // Register post-render hook for pseudo-state preview
@@ -787,9 +941,9 @@ addPostRenderHook(() => updateForcedPseudoPreview());
 
 // Register post-render hook for pending inline edit
 addPostRenderHook((/** @type {any} */ prevDoc) => {
-  if (pendingInlineEdit && prevDoc === S.document) {
-    const { path, mediaName: mn } = pendingInlineEdit;
-    pendingInlineEdit = null;
+  if (view.pendingInlineEdit && prevDoc === S.document) {
+    const { path, mediaName: mn } = view.pendingInlineEdit;
+    view.pendingInlineEdit = null;
     const targetPanel =
       canvasPanels.find((/** @type {any} */ p) => p.mediaName === mn) || canvasPanels[0];
     if (targetPanel) {
@@ -806,7 +960,9 @@ const _openParam = new URLSearchParams(location.search).get("open");
 
 if (_openParam) {
   // ?open= mode: skip normal loadProject, set up site context from the path
-  if (!_openParam.startsWith("/") && !_openParam.startsWith("~")) {
+  const isAbsPath =
+    _openParam.startsWith("/") || _openParam.startsWith("~") || /^[A-Za-z]:[/\\]/.test(_openParam);
+  if (!isAbsPath) {
     statusMessage(`Error: ?open= requires an absolute path (got "${_openParam}")`);
     render();
   } else {
@@ -819,13 +975,17 @@ if (_openParam) {
           : { sitePath: null };
 
         if (siteCtx.sitePath) {
-          // Set PAL project root to server-relative path so file ops work
-          if (siteCtx.relPath) platform.projectRoot = siteCtx.relPath;
+          // Set PAL project root to absolute path so file ops work
+          if (siteCtx.sitePath) {
+            platform.projectRoot = siteCtx.sitePath;
+            // Await activation so the server resolves project-relative static files
+            if (platform.activate) await platform.activate();
+          }
 
           setProjectState({
             root: siteCtx.sitePath,
             name: siteCtx.projectConfig?.name || "Project",
-            projectRoot: siteCtx.relPath || ".",
+            projectRoot: siteCtx.sitePath,
             isSiteProject: true,
             projectConfig: siteCtx.projectConfig,
             projectDirs: [],
@@ -837,27 +997,40 @@ if (_openParam) {
 
           await loadComponentRegistry();
 
-          // Load directory tree
+          // Load directory tree and populate projectDirs from conventional dirs found
+          const conventionalDirs = [
+            "pages",
+            "layouts",
+            "components",
+            "content",
+            "data",
+            "public",
+            "styles",
+          ];
           const dirEntries = await platform.listDirectory(".");
           projectState.dirs.set(".", dirEntries);
+          const foundDirs = [];
           for (const e of dirEntries) {
-            if (e.type === "directory" && ["pages", "components", "layouts"].includes(e.name)) {
+            if (e.type === "directory" && conventionalDirs.includes(e.name)) {
+              foundDirs.push(e.name);
               projectState.expanded.add(e.path || e.name);
               const sub = await platform.listDirectory(e.path || e.name);
               projectState.dirs.set(e.path || e.name, sub);
             }
           }
+          projectState.projectDirs = foundDirs;
         }
 
         // Read and open the file
         const fileRelPath = siteCtx.fileRelPath || _openParam;
         const content = await platform.readFile(fileRelPath);
         if (content) {
-          const doc = JSON.parse(content);
-          S = createState(doc);
+          const parsed = JSON.parse(content);
+          S = createState(parsed);
           S.dirty = false;
           S.documentPath = fileRelPath;
           S.ui = { ...S.ui, leftTab: "files" };
+          ({ doc, session } = fromFlat(S));
           render();
           statusMessage(`Opened ${_openParam}`);
         }
@@ -875,88 +1048,41 @@ if (_openParam) {
 // ─── Media helpers ────────────────────────────────────────────────────────────
 
 /**
- * Classify $media entries into size breakpoints (get a canvas each) and feature queries (rendered
- * as toolbar toggles).
- *
- * @param {any} mediaDef
- */
-function parseMediaEntries(mediaDef) {
-  if (!mediaDef) return { sizeBreakpoints: [], featureQueries: [], baseWidth: 320 };
-  const sizes = [],
-    features = [];
-  let baseWidth = 320;
-  for (const [name, query] of Object.entries(mediaDef)) {
-    if (name === "--") {
-      const wm = String(query).match(/^(\d+)\s*px$/);
-      baseWidth = wm ? parseFloat(wm[1]) : 320;
-      continue;
-    }
-    const minMatch = query.match(/min-width:\s*([\d.]+)px/);
-    const maxMatch = query.match(/max-width:\s*([\d.]+)px/);
-    if (minMatch) sizes.push({ name, query, width: parseFloat(minMatch[1]), type: "min" });
-    else if (maxMatch) sizes.push({ name, query, width: parseFloat(maxMatch[1]), type: "max" });
-    else features.push({ name, query });
-  }
-  sizes.sort((a, b) => (a.type === "min" ? a.width - b.width : b.width - a.width));
-  return { sizeBreakpoints: sizes, featureQueries: features, baseWidth };
-}
-
-/**
- * Compute which named breakpoints are active at a given canvas width. For min-width canvases: all
- * breakpoints with min-width <= canvasWidth are active. For max-width canvases: all breakpoints
- * with max-width >= canvasWidth are active.
- *
- * @param {any} sizeBreakpoints
- * @param {any} canvasWidth
- */
-function activeBreakpointsForWidth(sizeBreakpoints, canvasWidth) {
-  const active = new Set();
-  for (const bp of sizeBreakpoints) {
-    if (bp.type === "min" && canvasWidth >= bp.width) active.add(bp.name);
-    else if (bp.type === "max" && canvasWidth <= bp.width) active.add(bp.name);
-  }
-  return active;
-}
-
-/**
- * Apply styles to a canvas element, including active media overrides. Base (flat) styles applied
- * first, then matching media overrides in source order.
+ * After a runtime render, apply active media overrides as inline styles so they beat the base
+ * inline styles the runtime already set. The runtime uses @media CSS rules for overrides, but those
+ * can never beat inline base styles.
  *
- * @param {any} el
- * @param {any} styleDef
- * @param {any} activeBreakpoints
- * @param {any} featureToggles
+ * @param {Element} canvasEl
+ * @param {Set<string>} activeBreakpoints
  */
-function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles) {
-  if (!styleDef || typeof styleDef !== "object") return;
-  for (const [prop, val] of Object.entries(styleDef)) {
-    if (typeof val === "string" || typeof val === "number") {
-      try {
-        if (prop.startsWith("--")) el.style.setProperty(prop, String(val));
-        else /** @type {any} */ (el.style)[prop] = val;
-      } catch {}
-    }
-  }
-  for (const [key, val] of Object.entries(styleDef)) {
-    if (!key.startsWith("@") || typeof val !== "object") continue;
-    const mediaName = key.slice(1);
-    if (mediaName === "--") continue; // skip base canvas width key
-    if (activeBreakpoints.has(mediaName) || featureToggles[mediaName]) {
-      for (const [prop, v] of Object.entries(/** @type {any} */ (val))) {
-        if (typeof v === "string" || typeof v === "number") {
-          try {
-            if (prop.startsWith("--")) el.style.setProperty(prop, String(v));
-            else /** @type {any} */ (el.style)[prop] = v;
-          } catch {}
-        }
-      }
-    }
+function applyCanvasMediaOverrides(canvasEl, activeBreakpoints) {
+  if (!activeBreakpoints.size) return;
+  const docMedia = getEffectiveMedia(S.document.$media || {});
+  const validBreakpoints = new Set();
+  for (const name of activeBreakpoints) {
+    if (docMedia[name]) validBreakpoints.add(name);
   }
+  const overrides = collectMediaOverrides(document.styleSheets, validBreakpoints);
+  applyOverridesToCanvas(canvasEl, overrides);
 }
 
 // ─── Canvas ───────────────────────────────────────────────────────────────────
 
 function renderCanvas() {
+  // Advance render generation so stale async renders from the previous cycle bail out
+  ++view.renderGeneration;
+
+  // Always clear Lit's internal state so it builds fresh DOM. Stale async
+  // renderCanvasLive calls from a previous cycle can corrupt nested ChildPart
+  // markers (Comment nodes inside panzoom-wrap) in ways the root-only
+  // ensureLitState check cannot detect.
+  // @ts-ignore
+  if (canvasWrap["_$litPart$"]) {
+    canvasWrap.textContent = "";
+    // @ts-ignore
+    delete canvasWrap["_$litPart$"];
+  }
+
   // Function editor mode: editing a function body in Monaco (JS)
   if (S.ui.editingFunction) {
     renderFunctionEditor();
@@ -964,68 +1090,125 @@ function renderCanvas() {
   }
 
   // Dispose function editor if switching away
-  if (functionEditor) {
-    functionEditor.dispose();
-    functionEditor = null;
+  if (view.functionEditor) {
+    view.functionEditor.dispose();
+    view.functionEditor = null;
   }
 
   // Source mode: update existing Monaco editor without recreating
-  if (canvasMode === "source" && monacoEditor) {
+  if (canvasMode === "source" && view.monacoEditor) {
     const jsonStr = JSON.stringify(S.document, null, 2);
-    const currentVal = monacoEditor.getValue();
+    const currentVal = view.monacoEditor.getValue();
     if (currentVal !== jsonStr) {
       // Prevent triggering the onChange handler for this programmatic update
-      monacoEditor._ignoreNextChange = true;
-      monacoEditor.setValue(jsonStr);
+      view.monacoEditor._ignoreNextChange = true;
+      view.monacoEditor.setValue(jsonStr);
     }
     return;
   }
 
-  // Clean up previous canvas DnD registrations and center observer
-  if (centerObserver) {
-    centerObserver.disconnect();
-    centerObserver = null;
-  }
-  for (const fn of canvasDndCleanups) fn();
-  canvasDndCleanups = [];
+  // Detect whether this is a mode transition or a content-only re-render
+  const modeChanged = canvasMode !== view.prevCanvasMode;
+  view.prevCanvasMode = canvasMode;
+
+  // DnD handlers are registered on inner canvas elements that get replaced on every
+  // content render, so always clean them up.
+  for (const fn of view.canvasDndCleanups) fn();
+  view.canvasDndCleanups = [];
+
+  // Panel event handlers (click, dblclick, etc.) capture closures over panel references.
+  // Always re-register to keep closures fresh across document switches.
+  for (const fn of view.canvasEventCleanups) fn();
+  view.canvasEventCleanups = [];
+
+  // Panel JS objects are cheap — always clear and repopulate from templates.
+  // The actual DOM elements are preserved by Lit's diffing on content-only re-renders.
   canvasPanels.length = 0;
 
-  // Dispose Monaco editor if switching away from source mode
-  if (monacoEditor) {
-    monacoEditor.dispose();
-    monacoEditor = null;
+  if (modeChanged) {
+    // Full teardown on mode transitions — new panel structure needed
+    if (view.centerObserver) {
+      view.centerObserver.disconnect();
+      view.centerObserver = null;
+    }
+
+    // Dispose Monaco editor if switching away from source mode
+    if (view.monacoEditor) {
+      view.monacoEditor.dispose();
+      view.monacoEditor = null;
+    }
+
+    litRender(nothing, canvasWrap);
+    view.panzoomWrap = null;
+    // Reset inline style overrides from other modes
+    canvasWrap.style.padding = "";
+    canvasWrap.style.alignItems = "";
+    canvasWrap.style.display = "";
+    canvasWrap.style.overflow = "";
+    canvasWrap.style.overflow = "";
+
+    // Clear zoom indicator (only re-rendered by design/preview/stylebook)
+    try {
+      litRender(nothing, zoomIndicatorHost);
+    } catch {
+      const newHost = document.createElement("div");
+      newHost.style.display = "contents";
+      zoomIndicatorHost.replaceWith(newHost);
+      zoomIndicatorHost = newHost;
+    }
+
+    // Dismiss open popovers/toolbars that are no longer relevant
+    if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
+    dismissLinkPopover();
+    dismissContextMenu();
+    sharedDismissSlashMenu();
   }
 
-  litRender(nothing, canvasWrap);
-  panzoomWrap = null;
-  // Reset inline style overrides from other modes
-  canvasWrap.style.padding = "";
-  canvasWrap.style.alignItems = "";
-  canvasWrap.style.overflow = "";
-
-  // Stylebook mode: render element catalog with panzoom surface
-  if (canvasMode === "stylebook") {
-    renderStylebook();
+  // Manage mode: project-level file browser table
+  if (canvasMode === "manage") {
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.overflow = "auto";
+    renderBrowse(canvasWrap, {
+      openFile: (/** @type {string} */ path) => {
+        canvasMode = "edit";
+        openFileFromTree(path);
+      },
+    });
+    return;
+  }
+
+  // Settings mode: render element catalog with panzoom surface
+  if (canvasMode === "settings") {
+    renderSettings();
     return;
   }
 
   // Source mode: create Monaco editor instead of canvas
   if (canvasMode === "source") {
     canvasWrap.style.padding = "0";
+    canvasWrap.style.display = "block";
     /** @type {HTMLDivElement | null} */
     let editorContainer = null;
     litRender(
-      html`<div
-        class="source-editor"
-        ${ref((el) => {
-          if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
-        })}
-      ></div>`,
+      html`<div class="source-wrap">
+        <div class="source-toolbar">
+          <sp-action-button size="s" @click=${exportFile}>
+            <sp-icon-export slot="icon"></sp-icon-export>
+            Export
+          </sp-action-button>
+        </div>
+        <div
+          class="source-editor"
+          ${ref((el) => {
+            if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
+          })}
+        ></div>
+      </div>`,
       canvasWrap,
     );
 
     const jsonStr = JSON.stringify(S.document, null, 2);
-    monacoEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
+    view.monacoEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
       value: jsonStr,
       language: "json",
       theme: "vs-dark",
@@ -1042,19 +1225,16 @@ function renderCanvas() {
     // Debounced sync back to state
     /** @type {any} */
     let debounce;
-    monacoEditor.onDidChangeModelContent(() => {
-      if (monacoEditor._ignoreNextChange) {
-        monacoEditor._ignoreNextChange = false;
+    view.monacoEditor.onDidChangeModelContent(() => {
+      if (view.monacoEditor._ignoreNextChange) {
+        view.monacoEditor._ignoreNextChange = false;
         return;
       }
       clearTimeout(debounce);
       debounce = setTimeout(() => {
         try {
-          const parsed = JSON.parse(monacoEditor.getValue());
-          S = { ...S, document: parsed, dirty: true };
-          renderToolbar();
-          renderLeftPanel();
-          renderRightPanel();
+          const parsed = JSON.parse(view.monacoEditor.getValue());
+          update({ ...S, document: parsed, dirty: true });
         } catch {
           // Invalid JSON — don't update state
         }
@@ -1065,33 +1245,38 @@ function renderCanvas() {
 
   // Edit (content) mode — centered column, no panzoom, always 100%
   if (canvasMode === "edit") {
-    canvasWrap.style.padding = "0";
-    canvasWrap.style.overflow = "hidden";
+    if (modeChanged) {
+      canvasWrap.style.padding = "0";
+      canvasWrap.style.overflow = "hidden";
 
-    // Remove zoom indicator left over from design/preview mode
-    try {
-      litRender(nothing, zoomIndicatorHost);
-    } catch {
-      zoomIndicatorHost.textContent = "";
+      // Remove zoom indicator left over from design/preview mode
+      try {
+        litRender(nothing, zoomIndicatorHost);
+      } catch {
+        const newHost = document.createElement("div");
+        newHost.style.display = "contents";
+        zoomIndicatorHost.replaceWith(newHost);
+        zoomIndicatorHost = newHost;
+      }
     }
 
     const { tpl: panelTpl, panel } = canvasPanelTemplate(null, null, true);
-    litRender(
-      html`
-        <div class="content-edit-canvas">
-          <div class="content-edit-column">${panelTpl}</div>
-        </div>
-      `,
-      canvasWrap,
-    );
+    const editTpl = html`
+      <div class="content-edit-canvas">
+        <div class="content-edit-column">${panelTpl}</div>
+      </div>
+    `;
+    litRender(editTpl, canvasWrap);
     canvasPanels.push(panel);
     renderCanvasIntoPanel(panel, new Set(), S.ui.featureToggles);
     return;
   }
 
   // Normal canvas mode (design / preview) — set up panzoom surface
-  canvasWrap.style.padding = "0";
-  canvasWrap.style.overflow = "hidden";
+  if (modeChanged) {
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.overflow = "hidden";
+  }
 
   const {
     sizeBreakpoints,
@@ -1119,7 +1304,7 @@ function renderCanvas() {
           class="panzoom-wrap"
           style="transform-origin:0 0"
           ${ref((el) => {
-            if (el) panzoomWrap = /** @type {HTMLDivElement} */ (el);
+            if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
           })}
         >
           ${panelTpl}
@@ -1130,12 +1315,15 @@ function renderCanvas() {
     canvasPanels.push(panel);
     renderCanvasIntoPanel(panel, new Set(), featureToggles);
     applyTransform();
-    observeCenterUntilStable();
+    if (modeChanged) {
+      observeCenterUntilStable();
+    }
     renderZoomIndicator();
     return;
   }
 
-  // Build all panels (base + breakpoints), sorted widest-first (left to right)
+  // Build all panels: base first, then breakpoints in declared order (ascending for min-width,
+  // descending for max-width — matching the direction of the design's media queries).
   const allPanelDefs = [
     {
       name: "base",
@@ -1152,7 +1340,6 @@ function renderCanvas() {
       activeSet: activeBreakpointsForWidth(sizeBreakpoints, bp.width),
     });
   }
-  allPanelDefs.sort((a, b) => b.width - a.width);
 
   /** @type {{ tpl: any; panel: any; activeSet: any }[]} */
   const panelEntries = allPanelDefs.map((def) => {
@@ -1167,7 +1354,7 @@ function renderCanvas() {
         class="panzoom-wrap"
         style="transform-origin:0 0"
         ${ref((el) => {
-          if (el) panzoomWrap = /** @type {HTMLDivElement} */ (el);
+          if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
         })}
       >
         ${panelEntries.map((e) => e.tpl)}
@@ -1186,7 +1373,9 @@ function renderCanvas() {
 
   // Apply current zoom + pan transform
   applyTransform();
-  observeCenterUntilStable();
+  if (modeChanged) {
+    observeCenterUntilStable();
+  }
 
   // Floating zoom indicator
   renderZoomIndicator();
@@ -1201,9 +1390,13 @@ function renderCanvas() {
  * @param {any} featureToggles
  */
 function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
-  renderCanvasLive(S.document, panel.canvas).then((scope) => {
+  const gen = view.renderGeneration;
+  renderCanvasLive(gen, S.document, panel.canvas).then((scope) => {
+    // Skip post-render setup if a newer render has started
+    if (gen !== view.renderGeneration) return;
     if (scope) {
-      liveScope = scope;
+      view.liveScope = scope;
+      applyCanvasMediaOverrides(panel.canvas, activeBreakpoints);
       statusMessage("Runtime render OK", 1500);
     } else {
       // Fallback to structural preview
@@ -1214,9 +1407,9 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
     renderOverlays();
 
     // Process pending inline edit now that the canvas is populated
-    if (pendingInlineEdit) {
-      const { path, mediaName: mn } = pendingInlineEdit;
-      pendingInlineEdit = null;
+    if (view.pendingInlineEdit) {
+      const { path, mediaName: mn } = view.pendingInlineEdit;
+      view.pendingInlineEdit = null;
       const targetPanel = canvasPanels.find((p) => p.mediaName === mn) || canvasPanels[0];
       if (targetPanel) {
         const el = findCanvasElement(path, targetPanel.canvas);
@@ -1271,9 +1464,7 @@ function canvasPanelTemplate(mediaName, label, fullWidth, width) {
             <div
               class="canvas-panel-header"
               @click=${() => {
-                S = { ...S, ui: { ...S.ui, activeMedia: mediaName === "base" ? null : mediaName } };
-                updateActivePanelHeaders();
-                renderRightPanel();
+                updateUi("activeMedia", mediaName === "base" ? null : mediaName);
               }}
             >
               ${label}
@@ -1322,52 +1513,52 @@ function canvasPanelTemplate(mediaName, label, fullWidth, width) {
 
 /** Center canvas in viewport. */
 function centerCanvas() {
-  if (!panzoomWrap) return;
+  if (!view.panzoomWrap) return;
   const wrapWidth = canvasWrap.clientWidth;
   const wrapHeight = canvasWrap.clientHeight;
-  const contentWidth = panzoomWrap.scrollWidth;
-  const contentHeight = panzoomWrap.scrollHeight;
+  const contentWidth = view.panzoomWrap.scrollWidth;
+  const contentHeight = view.panzoomWrap.scrollHeight;
   const scaledWidth = contentWidth * S.ui.zoom;
   const scaledHeight = contentHeight * S.ui.zoom;
-  panX = Math.max(16, (wrapWidth - scaledWidth) / 2);
+  view.panX = Math.max(16, (wrapWidth - scaledWidth) / 2);
   // Center vertically only when content fits; top-align with margin when taller
   const verticalCenter = (wrapHeight - scaledHeight) / 2;
-  panY = verticalCenter > 16 ? verticalCenter : 16;
+  view.panY = verticalCenter > 16 ? verticalCenter : 16;
 }
 
 /**
- * Attach a ResizeObserver to panzoomWrap that re-centers until the user pans. Handles async content
- * (runtime rendering, data fetching) that changes layout after initial paint.
+ * Attach a ResizeObserver to view.panzoomWrap that re-centers until the user pans. Handles async
+ * content (runtime rendering, data fetching) that changes layout after initial paint.
  */
 function observeCenterUntilStable() {
-  if (centerObserver) {
-    centerObserver.disconnect();
-    centerObserver = null;
-  }
-  if (!panzoomWrap) return;
-  needsCenter = true;
-  centerObserver = new ResizeObserver(() => {
-    if (!needsCenter) {
-      centerObserver?.disconnect();
-      centerObserver = null;
+  if (view.centerObserver) {
+    view.centerObserver.disconnect();
+    view.centerObserver = null;
+  }
+  if (!view.panzoomWrap) return;
+  view.needsCenter = true;
+  view.centerObserver = new ResizeObserver(() => {
+    if (!view.needsCenter) {
+      view.centerObserver?.disconnect();
+      view.centerObserver = null;
       return;
     }
     centerCanvas();
     applyTransform();
   });
-  centerObserver.observe(panzoomWrap);
+  view.centerObserver.observe(view.panzoomWrap);
   // Also center immediately for synchronous content
   centerCanvas();
 }
 
 /** Apply the current zoom + pan transform to the panzoom wrapper. */
 function applyTransform() {
-  if (!panzoomWrap) return;
-  panzoomWrap.style.transform = `translate(${panX}px, ${panY}px) scale(${S.ui.zoom})`;
+  if (!view.panzoomWrap) return;
+  view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${S.ui.zoom})`;
   const label = document.querySelector(".zoom-indicator-label");
   if (label) label.textContent = `${Math.round(S.ui.zoom * 100)}%`;
   renderOverlays();
-  if (canvasMode === "stylebook") renderStylebookOverlays();
+  if (canvasMode === "settings") renderStylebookOverlays();
 }
 
 /** Lightweight in-place zoom update — no full re-render. */
@@ -1377,7 +1568,7 @@ function _applyZoom() {
 
 /** Calculate zoom + pan to fit all panels within the viewport. */
 function fitToScreen() {
-  if (!panzoomWrap) return;
+  if (!view.panzoomWrap) return;
   const wrapWidth = canvasWrap.clientWidth;
   const wrapHeight = canvasWrap.clientHeight;
   const gap = 24;
@@ -1390,7 +1581,7 @@ function fitToScreen() {
   totalPanelWidth += gap * Math.max(0, canvasPanels.length - 1) + padding;
 
   // Get actual content height from rendered panels
-  const wrapRect = panzoomWrap.getBoundingClientRect();
+  const wrapRect = view.panzoomWrap.getBoundingClientRect();
   const unscaledHeight = wrapRect.height / S.ui.zoom;
   maxPanelHeight = unscaledHeight + padding;
 
@@ -1398,12 +1589,13 @@ function fitToScreen() {
   const fitZoomH = wrapHeight / maxPanelHeight;
   const fitZoom = Math.min(5.0, Math.max(0.05, Math.min(fitZoomW, fitZoomH)));
 
-  S = { ...S, ui: { ...S.ui, zoom: fitZoom } };
+  session = { ...session, ui: { ...session.ui, zoom: fitZoom } };
+  S = toFlat(doc, session);
   // Center the content
   const scaledWidth = totalPanelWidth * fitZoom;
   const scaledHeight = maxPanelHeight * fitZoom;
-  panX = Math.max(0, (wrapWidth - scaledWidth) / 2);
-  panY = Math.max(0, (wrapHeight - scaledHeight) / 2);
+  view.panX = Math.max(0, (wrapWidth - scaledWidth) / 2);
+  view.panY = Math.max(0, (wrapHeight - scaledHeight) / 2);
   applyTransform();
 }
 
@@ -1443,7 +1635,11 @@ function renderZoomIndicator() {
       zoomIndicatorHost,
     );
   } catch {
-    zoomIndicatorHost.textContent = "";
+    // Lit markers were corrupted — replace the host element to fully reset Lit state
+    const newHost = document.createElement("div");
+    newHost.style.display = "contents";
+    zoomIndicatorHost.replaceWith(newHost);
+    zoomIndicatorHost = newHost;
     litRender(
       html`
         <div class="zoom-indicator">
@@ -1600,7 +1796,6 @@ function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles)
  *
  * @type {any}
  */
-let lastDragInput = null;
 
 /**
  * Register all canvas elements in a panel as DnD drop targets.
@@ -1620,19 +1815,19 @@ function registerPanelDnD(panel) {
       for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "none";
     },
     onDrag({ location }) {
-      lastDragInput = location.current.input;
+      view.lastDragInput = location.current.input;
     },
     onDrop() {
       // Hide all drop lines
       for (const p of canvasPanels) p.dropLine.style.display = "none";
-      lastDragInput = null;
+      view.lastDragInput = null;
       for (const el of canvas.querySelectorAll("*")) {
         /** @type {any} */ (el).style.pointerEvents = "none";
       }
       for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "";
     },
   });
-  canvasDndCleanups.push(monitorCleanup);
+  view.canvasDndCleanups.push(monitorCleanup);
 
   for (const el of allEls) {
     const elPath = elToPath.get(el);
@@ -1669,7 +1864,7 @@ function registerPanelDnD(panel) {
         applyDropInstruction(instruction, source.data, elPath);
       },
     });
-    canvasDndCleanups.push(cleanup);
+    view.canvasDndCleanups.push(cleanup);
   }
 }
 
@@ -1680,8 +1875,8 @@ function registerPanelDnD(panel) {
  */
 function getCanvasDropInstruction(el, elPath, isVoid) {
   const rect = el.getBoundingClientRect();
-  if (!lastDragInput) return null;
-  const y = lastDragInput.clientY;
+  if (!view.lastDragInput) return null;
+  const y = view.lastDragInput.clientY;
   const relY = (y - rect.top) / rect.height;
 
   if (elPath.length === 0) return { type: "make-child" };
@@ -1739,83 +1934,7 @@ function showCanvasDropIndicator(el, elPath, isVoid, panel) {
 // ─── Overlay system ───────────────────────────────────────────────────────────
 
 function renderOverlays() {
-  // In non-interactive modes (except stylebook), hide overlays and click interceptors
-  if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "stylebook") {
-    for (const p of canvasPanels) {
-      litRender(nothing, p.overlay);
-      p.overlayClk.style.pointerEvents = "none";
-    }
-    if (selDragCleanup) {
-      selDragCleanup();
-      selDragCleanup = null;
-    }
-    return;
-  }
-  // Stylebook manages its own overlays
-  if (canvasMode === "stylebook") {
-    const enable = S.ui.stylebookTab === "elements";
-    for (const p of canvasPanels) {
-      p.overlayClk.style.pointerEvents = enable ? "" : "none";
-    }
-    return;
-  }
-  for (const p of canvasPanels) {
-    p.overlayClk.style.pointerEvents = componentInlineEdit || isEditing() ? "none" : "";
-  }
-
-  if (selDragCleanup) {
-    selDragCleanup();
-    selDragCleanup = null;
-  }
-
-  // Collect overlay boxes per panel, then render in batch
-  for (const p of canvasPanels) {
-    /**
-     * @type {{
-     *   cls: string;
-     *   top: string;
-     *   left: string;
-     *   width: string;
-     *   height: string;
-     *   border?: string;
-     * }[]}
-     */
-    const boxes = [];
-
-    // Hover overlay
-    if (S.hover && !pathsEqual(S.hover, S.selection)) {
-      const el = findCanvasElement(S.hover, p.canvas);
-      if (el) boxes.push(overlayBoxDescriptor(el, "hover", p));
-    }
-
-    // Selection overlay (only on active panel)
-    if (S.selection && p === getActivePanel()) {
-      const el = findCanvasElement(S.selection, p.canvas);
-      if (el) {
-        const desc = overlayBoxDescriptor(el, "selection", p);
-        if (componentInlineEdit || isEditing()) /** @type {any} */ (desc).border = "none";
-        boxes.push(desc);
-      }
-    }
-
-    litRender(
-      html`
-        ${p.dropLine}
-        ${boxes.map(
-          (b) => html`
-            <div
-              class=${b.cls}
-              style="top:${b.top};left:${b.left};width:${b.width};height:${b.height}${b.border
-                ? `;border:${b.border}`
-                : ""}"
-            ></div>
-          `,
-        )}
-      `,
-      p.overlay,
-    );
-  }
-  renderBlockActionBar();
+  overlaysPanel.render();
 }
 
 /**
@@ -1877,15 +1996,10 @@ function onBarMousedown(e) {
   e.preventDefault();
 }
 
-/**
- * Saved selection range for format button mousedown→click flow
- *
- * @type {any}
- */
-let savedRange = null;
+/** Saved selection range for format button mousedown→click flow */
 function captureSelectionRange() {
   const sel = window.getSelection();
-  if (sel && sel.rangeCount) savedRange = sel.getRangeAt(0).cloneRange();
+  if (sel && sel.rangeCount) view.savedRange = sel.getRangeAt(0).cloneRange();
 }
 
 /**
@@ -1896,16 +2010,16 @@ function onFormatClick(e, action) {
   e.stopPropagation();
   if (action.command === "link") {
     showLinkPopover(e.target.closest("sp-action-button"));
-  } else if (savedRange) {
+  } else if (view.savedRange) {
     const sel = /** @type {any} */ (window.getSelection());
-    const anchor = savedRange.startContainer;
+    const anchor = view.savedRange.startContainer;
     const editableRoot = (
       anchor?.nodeType === Node.ELEMENT_NODE ? anchor : anchor?.parentElement
     )?.closest("[contenteditable]");
     if (editableRoot) {
       editableRoot.focus();
       sel.removeAllRanges();
-      sel.addRange(savedRange);
+      sel.addRange(view.savedRange);
       applyInlineFormat(action);
     }
   }
@@ -1990,14 +2104,19 @@ function applyInlineFormat(action) {
 }
 
 /** Show a link URL popover anchored to a toolbar button. */
-const linkPopoverHost = document.createElement("div");
-linkPopoverHost.style.display = "contents";
-(document.querySelector("sp-theme") || document.body).appendChild(linkPopoverHost);
+view.linkPopoverHost = document.createElement("div");
+view.linkPopoverHost.style.display = "contents";
+(document.querySelector("sp-theme") || document.body).appendChild(view.linkPopoverHost);
+
+/** Dismiss the link popover if open. */
+function dismissLinkPopover() {
+  if (view.linkPopoverHost) litRender(nothing, view.linkPopoverHost);
+}
 
 /** @param {any} anchorBtn */
 function showLinkPopover(anchorBtn) {
   // Dismiss existing
-  litRender(nothing, linkPopoverHost);
+  litRender(nothing, view.linkPopoverHost);
 
   const sel = window.getSelection();
   /** @type {any} */
@@ -2017,14 +2136,14 @@ function showLinkPopover(anchorBtn) {
   const rect = anchorBtn.getBoundingClientRect();
 
   const onApply = () => {
-    const field = linkPopoverHost.querySelector("sp-textfield");
+    const field = view.linkPopoverHost.querySelector("sp-textfield");
     const url = /** @type {any} */ (field)?.value;
     if (existingLink) {
       existingLink.setAttribute("href", url);
     } else if (url) {
       document.execCommand("createLink", false, url);
     }
-    litRender(nothing, linkPopoverHost);
+    litRender(nothing, view.linkPopoverHost);
     renderBlockActionBar();
   };
 
@@ -2032,14 +2151,14 @@ function showLinkPopover(anchorBtn) {
     const frag = document.createDocumentFragment();
     while (existingLink.firstChild) frag.appendChild(existingLink.firstChild);
     existingLink.parentNode.replaceChild(frag, existingLink);
-    litRender(nothing, linkPopoverHost);
+    litRender(nothing, view.linkPopoverHost);
     renderBlockActionBar();
   };
 
   const onKeydown = (/** @type {any} */ e) => {
     if (e.key === "Enter") onApply();
     else if (e.key === "Escape") {
-      litRender(nothing, linkPopoverHost);
+      litRender(nothing, view.linkPopoverHost);
     }
   };
 
@@ -2065,12 +2184,14 @@ function showLinkPopover(anchorBtn) {
           : nothing}
       </sp-popover>
     `,
-    linkPopoverHost,
+    view.linkPopoverHost,
   );
 
   requestAnimationFrame(
     () =>
-      /** @type {HTMLElement | null} */ (linkPopoverHost?.querySelector("sp-textfield"))?.focus(),
+      /** @type {HTMLElement | null} */ (
+        view.linkPopoverHost?.querySelector("sp-textfield")
+      )?.focus(),
   );
 }
 
@@ -2081,7 +2202,8 @@ function moveSelectionUp() {
   if (idx <= 0) return;
   const pPath = /** @type {any} */ (parentElementPath(S.selection));
   update(moveNode(S, S.selection, pPath, idx - 1));
-  S = { ...S, selection: [...pPath, "children", idx - 1] };
+  session = { ...session, selection: [...pPath, "children", idx - 1] };
+  S = toFlat(doc, session);
   renderOverlays();
 }
 
@@ -2094,7 +2216,8 @@ function moveSelectionDown() {
   const siblings = parentNode?.children;
   if (!siblings || idx >= siblings.length - 1) return;
   update(moveNode(S, S.selection, pPath, idx + 2));
-  S = { ...S, selection: [...pPath, "children", idx + 1] };
+  session = { ...session, selection: [...pPath, "children", idx + 1] };
+  S = toFlat(doc, session);
   renderOverlays();
 }
 
@@ -2104,30 +2227,30 @@ function moveSelectionDown() {
  */
 function renderBlockActionBar() {
   // Ensure persistent render container exists
-  if (!blockActionBarEl) {
-    blockActionBarEl = createFloatingContainer();
+  if (!view.blockActionBarEl) {
+    view.blockActionBarEl = createFloatingContainer();
   }
 
   // Tear down drag if it was active
-  if (selDragCleanup) {
-    selDragCleanup();
-    selDragCleanup = null;
+  if (view.selDragCleanup) {
+    view.selDragCleanup();
+    view.selDragCleanup = null;
   }
 
   if (!S.selection || (canvasMode !== "design" && canvasMode !== "edit")) {
-    litRender(nothing, blockActionBarEl);
+    litRender(nothing, view.blockActionBarEl);
     return;
   }
 
   const activePanel = getActivePanel();
   if (!activePanel) {
-    litRender(nothing, blockActionBarEl);
+    litRender(nothing, view.blockActionBarEl);
     return;
   }
   const el = findCanvasElement(S.selection, activePanel.canvas);
   const node = el && getNodeAtPath(S.document, S.selection);
   if (!el || !node) {
-    litRender(nothing, blockActionBarEl);
+    litRender(nothing, view.blockActionBarEl);
     return;
   }
 
@@ -2158,6 +2281,32 @@ function renderBlockActionBar() {
           ? html`<span class="bar-drag-handle" title="Drag to reorder">⡇</span>`
           : nothing}
         ${S.selection.length >= 2 ? renderMoveArrows() : nothing}
+        ${S.selection.length >= 2 && node.tagName
+          ? (() => {
+              const isComp =
+                node.tagName.includes("-") &&
+                componentRegistry.some((/** @type {any} */ c) => c.tagName === node.tagName);
+              if (isComp) {
+                const comp = componentRegistry.find(
+                  (/** @type {any} */ c) => c.tagName === node.tagName,
+                );
+                return html`<sp-action-button
+                  size="xs"
+                  quiet
+                  title="Edit Component"
+                  @click=${() => navigateToComponent(comp.path)}
+                  ><sp-icon-edit slot="icon" size="xs"></sp-icon-edit
+                ></sp-action-button>`;
+              }
+              return html`<sp-action-button
+                size="xs"
+                quiet
+                title="Convert to Component"
+                @click=${() => convertToComponent(S)}
+                ><sp-icon-box slot="icon" size="xs"></sp-icon-box
+              ></sp-action-button>`;
+            })()
+          : nothing}
         ${showFormat
           ? html`
               <sp-divider size="s" vertical></sp-divider>
@@ -2186,12 +2335,12 @@ function renderBlockActionBar() {
           : nothing}
       </div>
     `,
-    blockActionBarEl,
+    view.blockActionBarEl,
   );
 
   // Post-render side effects
   requestAnimationFrame(() => {
-    const bar = blockActionBarEl?.firstElementChild;
+    const bar = view.blockActionBarEl?.firstElementChild;
     if (!bar) return;
     // Clamp to window
     const barRect = bar.getBoundingClientRect();
@@ -2202,7 +2351,11 @@ function renderBlockActionBar() {
     if (S.selection.length >= 2) {
       const handle = bar.querySelector(".bar-drag-handle");
       if (handle) {
-        selDragCleanup = draggable({
+        if (view.selDragCleanup) {
+          view.selDragCleanup();
+          view.selDragCleanup = null;
+        }
+        view.selDragCleanup = draggable({
           element: handle,
           getInitialData: () => ({ type: "tree-node", path: S.selection }),
         });
@@ -2215,20 +2368,15 @@ function renderBlockActionBar() {
 // When a pseudo-selector (:hover, :focus, etc.) is active in the style sidebar,
 // force those styles onto the selected element so the user can see the result.
 
-/** @type {any} */
-let _forcedStyleTag = null;
-/** @type {any} */
-let _forcedAttrEl = null;
-
 function updateForcedPseudoPreview() {
   // Clean up previous
-  if (_forcedStyleTag) {
-    _forcedStyleTag.remove();
-    _forcedStyleTag = null;
+  if (view.forcedStyleTag) {
+    view.forcedStyleTag.remove();
+    view.forcedStyleTag = null;
   }
-  if (_forcedAttrEl) {
-    _forcedAttrEl.removeAttribute("data-studio-forced");
-    _forcedAttrEl = null;
+  if (view.forcedAttrEl) {
+    view.forcedAttrEl.removeAttribute("data-studio-forced");
+    view.forcedAttrEl = null;
   }
 
   const sel = S.ui?.activeSelector;
@@ -2259,12 +2407,12 @@ function updateForcedPseudoPreview() {
   if (!cssProps) return;
 
   el.setAttribute("data-studio-forced", "1");
-  _forcedAttrEl = el;
+  view.forcedAttrEl = el;
 
   const tag = document.createElement("style");
   tag.textContent = `[data-studio-forced] { ${cssProps} }`;
   document.head.appendChild(tag);
-  _forcedStyleTag = tag;
+  view.forcedStyleTag = tag;
 }
 
 /**
@@ -2316,9 +2464,24 @@ function findCanvasElement(path, canvasEl) {
     } else {
       el = el.children[idx];
     }
-    if (!el) return null;
+    if (!el) break;
   }
-  return el;
+
+  // Verify the result: if DOM traversal landed on the wrong element
+  // (e.g. a custom element template child instead of the intended node),
+  // fall back to scanning elToPath.
+  if (el) {
+    const elPath = elToPath.get(el);
+    if (elPath && pathsEqual(elPath, path)) return el;
+    // el has no path or wrong path — it's a template element, not the target
+  }
+
+  // Fall back: scan all descendants for an element with matching elToPath
+  for (const candidate of canvasEl.querySelectorAll("*")) {
+    const p = elToPath.get(candidate);
+    if (p && pathsEqual(p, path)) return candidate;
+  }
+  return null;
 }
 
 // ─── Per-panel click-to-select ────────────────────────────────────────────────
@@ -2326,6 +2489,9 @@ function findCanvasElement(path, canvasEl) {
 /** @param {any} panel */
 function registerPanelEvents(panel) {
   const { canvas, overlayClk, mediaName } = panel;
+  const ac = new AbortController();
+  const opts = { signal: ac.signal };
+  view.canvasEventCleanups.push(() => ac.abort());
 
   /** @param {any} fn */
   function withPanelPointerEvents(fn) {
@@ -2341,162 +2507,191 @@ function registerPanelEvents(panel) {
   // During component inline edit, the overlayClk is disabled (see enterComponentInlineEdit).
   // No mousedown passthrough needed — native events reach the contenteditable directly.
 
-  overlayClk.addEventListener("click", (/** @type {any} */ e) => {
-    // Don't intercept clicks meant for the block action bar
-    const barInner = blockActionBarEl?.firstElementChild;
-    if (barInner) {
-      const r = barInner.getBoundingClientRect();
-      if (
-        e.clientX >= r.left &&
-        e.clientX <= r.right &&
-        e.clientY >= r.top &&
-        e.clientY <= r.bottom
-      )
-        return;
-    }
-    // If content-mode inline editing is active, treat click outside as blur
-    if (isEditing()) {
-      stopEditing();
-    }
-
-    // Component-mode inline editing is handled by its own document-level listener
-    // (see enterComponentInlineEdit), so nothing to do here — just fall through.
+  overlayClk.addEventListener(
+    "click",
+    (/** @type {any} */ e) => {
+      // Don't intercept clicks meant for the block action bar
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      // If content-mode inline editing is active, treat click outside as blur
+      if (isEditing()) {
+        stopEditing();
+      }
 
-    const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
+      // Component-mode inline editing is handled by its own document-level listener
+      // (see enterComponentInlineEdit), so nothing to do here — just fall through.
 
-    for (const el of elements) {
-      if (canvas.contains(el) && el !== canvas) {
-        let path = elToPath.get(el);
-        if (path) {
-          path = bubbleInlinePath(S.document, path);
-          const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-          S = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
 
-          // Find the DOM element for the bubbled path (may differ from hit element)
-          const resolvedEl = findCanvasElement(path, canvas) || el;
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            let path = bubbleInlinePath(S.document, originalPath);
+            const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+            const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+
+            // Find the DOM element for the bubbled path (may differ from hit element)
+            // When path didn't change (no inline bubbling), prefer the hit element directly
+            // since findCanvasElement can't navigate into custom element template DOM.
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
+
+            // Re-click on selected editable block: enter inline editing
+            // Edit mode / content mode → rich text editing (enterInlineEdit)
+            // Design mode → plaintext component editing (enterComponentInlineEdit via view.pendingInlineEdit)
+            if (
+              pathsEqual(path, S.selection) &&
+              isEditableBlock(resolvedEl) &&
+              (canvasMode === "edit" || S.mode === "content")
+            ) {
+              S = withMedia;
+              enterInlineEdit(resolvedEl, path);
+              return;
+            }
 
-          // Re-click on selected editable block: enter inline editing
-          // Edit mode / content mode → rich text editing (enterInlineEdit)
-          // Design mode → plaintext component editing (enterComponentInlineEdit via pendingInlineEdit)
-          if (
-            pathsEqual(path, S.selection) &&
-            isEditableBlock(resolvedEl) &&
-            (canvasMode === "edit" || S.mode === "content")
-          ) {
-            enterInlineEdit(resolvedEl, path);
-            return;
-          }
+            // Design mode or first click: select and schedule component inline editing
+            if (canvasMode === "design" && S.mode !== "content") {
+              view.pendingInlineEdit = { path, mediaName };
+              update(selectNode(withMedia, path));
+              return;
+            }
 
-          // Design mode or first click: select and schedule component inline editing
-          if (canvasMode === "design" && S.mode !== "content") {
-            pendingInlineEdit = { path, mediaName };
-            update(selectNode(S, path));
+            update(selectNode(withMedia, path));
             return;
           }
-
-          update(selectNode(S, path));
-          return;
         }
       }
-    }
-    update(selectNode(S, null));
-  });
+      update(selectNode(S, null));
+    },
+    opts,
+  );
 
   // Double-click shortcut for immediate inline editing
-  overlayClk.addEventListener("dblclick", (/** @type {any} */ e) => {
-    const barInner = blockActionBarEl?.firstElementChild;
-    if (barInner) {
-      const r = barInner.getBoundingClientRect();
-      if (
-        e.clientX >= r.left &&
-        e.clientX <= r.right &&
-        e.clientY >= r.top &&
-        e.clientY <= r.bottom
-      )
-        return;
-    }
-    if (canvasMode !== "edit" && canvasMode !== "design") return;
+  overlayClk.addEventListener(
+    "dblclick",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      if (canvasMode !== "edit" && canvasMode !== "design") return;
 
-    const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
 
-    for (const el of elements) {
-      if (canvas.contains(el) && el !== canvas) {
-        let path = elToPath.get(el);
-        if (path) {
-          path = bubbleInlinePath(S.document, path);
-          const resolvedEl = findCanvasElement(path, canvas) || el;
-          if (isEditableBlock(resolvedEl)) {
-            const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-            S = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
-            update(selectNode(S, path));
-            enterInlineEdit(resolvedEl, path);
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            const path = bubbleInlinePath(S.document, originalPath);
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
+            if (isEditableBlock(resolvedEl)) {
+              const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+              const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+              update(selectNode(withMedia, path));
+              enterInlineEdit(resolvedEl, path);
+              return;
+            }
+          }
+        }
+      }
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "contextmenu",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          let path = elToPath.get(el);
+          if (path) {
+            path = bubbleInlinePath(S.document, path);
+            showContextMenu(e, path, S, { onEditComponent: navigateToComponent });
             return;
           }
         }
       }
-    }
-  });
+      e.preventDefault();
+    },
+    opts,
+  );
 
-  overlayClk.addEventListener("contextmenu", (/** @type {any} */ e) => {
-    const barInner = blockActionBarEl?.firstElementChild;
-    if (barInner) {
-      const r = barInner.getBoundingClientRect();
-      if (
-        e.clientX >= r.left &&
-        e.clientX <= r.right &&
-        e.clientY >= r.top &&
-        e.clientY <= r.bottom
-      )
-        return;
-    }
-    const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
-    for (const el of elements) {
-      if (canvas.contains(el) && el !== canvas) {
+  overlayClk.addEventListener(
+    "mousemove",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+      if (el && canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
           path = bubbleInlinePath(S.document, path);
-          showContextMenu(e, path, S);
-          return;
+          if (!pathsEqual(path, S.hover)) {
+            S = hoverNode(S, path);
+            renderOverlays();
+          }
         }
+      } else if (S.hover) {
+        S = hoverNode(S, null);
+        renderOverlays();
       }
-    }
-    e.preventDefault();
-  });
+    },
+    opts,
+  );
 
-  overlayClk.addEventListener("mousemove", (/** @type {any} */ e) => {
-    const barInner = blockActionBarEl?.firstElementChild;
-    if (barInner) {
-      const r = barInner.getBoundingClientRect();
-      if (
-        e.clientX >= r.left &&
-        e.clientX <= r.right &&
-        e.clientY >= r.top &&
-        e.clientY <= r.bottom
-      )
-        return;
-    }
-    const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
-    if (el && canvas.contains(el) && el !== canvas) {
-      let path = elToPath.get(el);
-      if (path) {
-        path = bubbleInlinePath(S.document, path);
-        if (!pathsEqual(path, S.hover)) {
-          S = hoverNode(S, path);
-          renderOverlays();
-        }
+  overlayClk.addEventListener(
+    "mouseleave",
+    () => {
+      if (S.hover) {
+        S = hoverNode(S, null);
+        renderOverlays();
       }
-    } else if (S.hover) {
-      S = hoverNode(S, null);
-      renderOverlays();
-    }
-  });
-
-  overlayClk.addEventListener("mouseleave", () => {
-    if (S.hover) {
-      S = hoverNode(S, null);
-      renderOverlays();
-    }
-  });
+    },
+    opts,
+  );
 }
 
 // ─── Inline editing bridge ────────────────────────────────────────────────────
@@ -2589,12 +2784,63 @@ function enterInlineEdit(el, path) {
       });
     },
 
-    onInsert(/** @type {any} */ afterPath, /** @type {any} */ cmd) {
+    onInsert(/** @type {any} */ afterPath, /** @type {any} */ cmd, /** @type {any} */ commitData) {
       // cmd comes from the shared slash menu: { label, tag, description }
+      const isEmpty =
+        !commitData ||
+        (commitData.textContent != null && commitData.textContent.trim() === "") ||
+        (commitData.children &&
+          (commitData.children.length === 0 ||
+            (commitData.children.length === 1 &&
+              typeof commitData.children[0] === "string" &&
+              commitData.children[0].trim() === "") ||
+            (commitData.children.length === 1 &&
+              typeof commitData.children[0] === "object" &&
+              commitData.children[0]?.tagName === "br")));
+
+      // If the element is empty, swap its tagName instead of inserting after
+      if (isEmpty) {
+        let s = S;
+        s = updateProperty(s, afterPath, "tagName", cmd.tag);
+        s = updateProperty(s, afterPath, "children", undefined);
+        const def = defaultDef(cmd.tag);
+        if (def.textContent && def.textContent !== "Paragraph text") {
+          s = updateProperty(s, afterPath, "textContent", def.textContent);
+        } else {
+          s = updateProperty(s, afterPath, "textContent", undefined);
+        }
+        s = selectNode(s, afterPath);
+        update(s);
+
+        requestAnimationFrame(() => {
+          const activePanel = getActivePanel();
+          if (activePanel) {
+            const el = findCanvasElement(afterPath, activePanel.canvas);
+            if (el && isEditableBlock(el)) {
+              enterInlineEdit(el, afterPath);
+            }
+          }
+        });
+        return;
+      }
+
       const elementDef = defaultDef(cmd.tag);
       const parentPath = /** @type {any} */ (parentElementPath(afterPath));
       const idx = /** @type {number} */ (childIndex(afterPath));
-      let s = insertNode(S, parentPath, idx + 1, structuredClone(elementDef));
+
+      // Apply pending commit from inline edit first (batched to avoid double render)
+      let s = S;
+      if (commitData) {
+        if (commitData.children) {
+          s = updateProperty(s, afterPath, "textContent", undefined);
+          s = updateProperty(s, afterPath, "children", commitData.children);
+        } else if (commitData.textContent != null) {
+          s = updateProperty(s, afterPath, "children", undefined);
+          s = updateProperty(s, afterPath, "textContent", commitData.textContent);
+        }
+      }
+
+      s = insertNode(s, parentPath, idx + 1, structuredClone(elementDef));
       const newPath = [...parentPath, "children", idx + 1];
       s = selectNode(s, newPath);
       update(s);
@@ -2613,9 +2859,9 @@ function enterInlineEdit(el, path) {
 
     onEnd() {
       // Cleanup inline edit listeners
-      if (_inlineEditCleanup) {
-        _inlineEditCleanup();
-        _inlineEditCleanup = null;
+      if (view.inlineEditCleanup) {
+        view.inlineEditCleanup();
+        view.inlineEditCleanup = null;
       }
       // Restore overlays after inline editing ends
       for (const p of canvasPanels) {
@@ -2642,7 +2888,7 @@ function enterInlineEdit(el, path) {
     el.removeEventListener("mouseup", selectionHandler);
     el.removeEventListener("keyup", selectionHandler);
   };
-  _inlineEditCleanup = inlineEditCleanup;
+  view.inlineEditCleanup = inlineEditCleanup;
 }
 
 // ─── Component-mode inline text editing ──────────────────────────────────────
@@ -2653,7 +2899,7 @@ function enterInlineEdit(el, path) {
  */
 function enterComponentInlineEdit(el, path) {
   // Already editing this element
-  if (componentInlineEdit && componentInlineEdit.el === el) {
+  if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
     return;
   }
 
@@ -2666,7 +2912,7 @@ function enterComponentInlineEdit(el, path) {
   if (Array.isArray(node.children) && node.children.length > 0) return;
   if (node.children && typeof node.children === "object") return;
   if (tc && typeof tc === "object") return;
-  const voids = new Set(["img", "input", "br", "hr", "video", "audio", "source", "embed"]);
+  const voids = new Set(["img", "input", "br", "hr", "video", "audio", "source", "embed", "slot"]);
   if (voids.has(node.tagName)) return;
 
   // Keep overlay visible for the label, but hide selection border to not obscure editing outline.
@@ -2690,7 +2936,7 @@ function enterComponentInlineEdit(el, path) {
   const rawText = typeof tc === "string" ? tc : "";
   el.textContent = rawText;
 
-  componentInlineEdit = {
+  view.componentInlineEdit = {
     el,
     path,
     originalText: rawText,
@@ -2712,15 +2958,15 @@ function enterComponentInlineEdit(el, path) {
   // Document-level mousedown: clicking outside the editing element commits
   // the edit and selects the new target element for inline editing.
   const outsideHandler = (/** @type {any} */ evt) => {
-    if (!componentInlineEdit) {
+    if (!view.componentInlineEdit) {
       document.removeEventListener("mousedown", outsideHandler, true);
       return;
     }
-    if (componentInlineEdit.el.contains(evt.target)) return; // click within editing el — let it through
+    if (view.componentInlineEdit.el.contains(evt.target)) return; // click within editing el — let it through
     // Let clicks through when the slash command menu is open
     if (isSlashMenuOpen()) return;
     // Let clicks inside the block action bar through
-    if (blockActionBarEl && blockActionBarEl.contains(evt.target)) return;
+    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target)) return;
     document.removeEventListener("mousedown", outsideHandler, true);
 
     // Hit-test BEFORE commit (while the current canvas DOM + elToPath are still valid)
@@ -2747,7 +2993,7 @@ function enterComponentInlineEdit(el, path) {
     }
 
     // Commit + select new element in a single state update if possible
-    const { el: editEl, path: editPath, originalText } = componentInlineEdit;
+    const { el: editEl, path: editPath, originalText } = view.componentInlineEdit;
     const newText = (editEl.textContent ?? "").trim();
     cleanupComponentInlineEdit(editEl);
 
@@ -2757,26 +3003,29 @@ function enterComponentInlineEdit(el, path) {
 
     if (hitPath) {
       const media = hitMedia === "base" ? null : (hitMedia ?? null);
-      pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
-      S = { ...S, ui: { ...S.ui, activeMedia: media } };
+      view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
+      const withMedia = { ...S, ui: { ...S.ui, activeMedia: media } };
       if (isEmpty && pPath) {
         // Remove empty node; adjust hitPath if it shifts after removal
-        let s = removeNode(S, editPath);
+        let s = removeNode(withMedia, editPath);
         // If hit path is a later sibling in the same parent, adjust index
         const removedIdx = /** @type {number} */ (childIndex(editPath));
         const hitIdx = /** @type {number} */ (childIndex(hitPath));
         const hitParent = parentElementPath(hitPath);
         if (hitParent && pPath && hitParent.join("/") === pPath.join("/") && hitIdx > removedIdx) {
           hitPath = [...pPath, "children", hitIdx - 1];
-          pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
+          view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
         }
         update(selectNode(s, hitPath));
       } else if (newText !== originalText) {
         update(
-          selectNode(updateProperty(S, editPath, "textContent", newText || undefined), hitPath),
+          selectNode(
+            updateProperty(withMedia, editPath, "textContent", newText || undefined),
+            hitPath,
+          ),
         );
       } else {
-        update(selectNode(S, hitPath));
+        update(selectNode(withMedia, hitPath));
       }
     } else {
       // Clicked on empty space — just commit
@@ -2791,7 +3040,7 @@ function enterComponentInlineEdit(el, path) {
     }
   };
   document.addEventListener("mousedown", outsideHandler, true);
-  componentInlineEdit._outsideHandler = outsideHandler;
+  view.componentInlineEdit._outsideHandler = outsideHandler;
 
   // Re-render block action bar to show inline formatting buttons
   renderBlockActionBar();
@@ -2815,8 +3064,8 @@ function componentInlineKeydown(e) {
 }
 
 function splitParagraph() {
-  if (!componentInlineEdit) return;
-  const { el, path, mediaName } = componentInlineEdit;
+  if (!view.componentInlineEdit) return;
+  const { el, path, mediaName } = view.componentInlineEdit;
 
   // Determine cursor offset within text
   const sel = /** @type {any} */ (el.ownerDocument.defaultView?.getSelection());
@@ -2848,13 +3097,13 @@ function splitParagraph() {
   s = insertNode(s, pPath, idx + 1, newDef);
   s = selectNode(s, newPath);
 
-  pendingInlineEdit = { path: newPath, mediaName };
+  view.pendingInlineEdit = { path: newPath, mediaName };
   update(s);
 }
 
 function _commitComponentInlineEdit() {
-  if (!componentInlineEdit) return;
-  const { el, path, originalText } = componentInlineEdit;
+  if (!view.componentInlineEdit) return;
+  const { el, path, originalText } = view.componentInlineEdit;
   const newText = (el.textContent ?? "").trim();
 
   cleanupComponentInlineEdit(el);
@@ -2872,8 +3121,8 @@ function _commitComponentInlineEdit() {
 }
 
 function cancelComponentInlineEdit() {
-  if (!componentInlineEdit) return;
-  const { el } = componentInlineEdit;
+  if (!view.componentInlineEdit) return;
+  const { el } = view.componentInlineEdit;
   cleanupComponentInlineEdit(el);
   renderCanvas();
   renderOverlays();
@@ -2892,10 +3141,10 @@ function cleanupComponentInlineEdit(el) {
   el.style.pointerEvents = "";
 
   // Remove the document-level outside-click handler
-  if (componentInlineEdit?._outsideHandler) {
-    document.removeEventListener("mousedown", componentInlineEdit._outsideHandler, true);
+  if (view.componentInlineEdit?._outsideHandler) {
+    document.removeEventListener("mousedown", view.componentInlineEdit._outsideHandler, true);
   }
-  componentInlineEdit = null;
+  view.componentInlineEdit = null;
 
   // Restore overlay and click interceptor
   for (const p of canvasPanels) {
@@ -2907,8 +3156,8 @@ function cleanupComponentInlineEdit(el) {
 // ─── Component-mode slash commands (delegates to shared slash-menu.js) ────────
 
 function componentInlineInput() {
-  if (!componentInlineEdit) return;
-  const { el, originalText } = componentInlineEdit;
+  if (!view.componentInlineEdit) return;
+  const { el, originalText } = view.componentInlineEdit;
   const text = el.textContent || "";
 
   // Only trigger slash menu when the paragraph was originally empty and starts with /
@@ -2922,8 +3171,8 @@ function componentInlineInput() {
 
 /** @param {any} cmd */
 function handleComponentSlashSelect(cmd) {
-  if (!componentInlineEdit) return;
-  const { el, path, mediaName } = componentInlineEdit;
+  if (!view.componentInlineEdit) return;
+  const { el, path, mediaName } = view.componentInlineEdit;
   const pPath = parentElementPath(path);
   const idx = /** @type {number} */ (childIndex(path));
   if (!pPath) return;
@@ -2940,7 +3189,7 @@ function handleComponentSlashSelect(cmd) {
 
   // If the new element has textContent, enter inline edit on it
   const hasText = newDef.textContent != null;
-  if (hasText) pendingInlineEdit = { path: newPath, mediaName };
+  if (hasText) view.pendingInlineEdit = { path: newPath, mediaName };
   update(s);
 }
 
@@ -2952,7 +3201,7 @@ function renderLeftPanel() {
   /** @type {any} */
   let content;
   if (tab === "layers")
-    content = canvasMode === "stylebook" ? renderStylebookLayersTemplate() : renderLayersTemplate();
+    content = canvasMode === "settings" ? renderStylebookLayersTemplate() : renderLayersTemplate();
   else if (tab === "imports")
     content = renderImportsTemplate({
       renderLeftPanel,
@@ -2965,20 +3214,45 @@ function renderLeftPanel() {
     });
   else if (tab === "files") content = renderFilesTemplate();
   else if (tab === "blocks") content = renderElementsTemplate();
-  else if (tab === "state") content = renderSignalsTemplate(S, { renderLeftPanel, renderCanvas });
+  else if (tab === "state")
+    content = renderSignalsTemplate(S, { renderLeftPanel, renderCanvas, updateSession });
   else if (tab === "data")
-    content = renderDataExplorerTemplate(S.document.state, liveScope, {
+    content = renderDataExplorerTemplate(S.document.state, view.liveScope, {
       renderCanvas,
       renderLeftPanel,
       defCategory,
       defBadgeLabel,
     });
-  else content = nothing;
+  else if (tab === "head") {
+    // In content mode, title/$head live in S.content.frontmatter, not S.document
+    const isContent = S.mode === "content";
+    const fm = S.content?.frontmatter ?? {};
+    const headDoc = isContent ? { ...S.document, title: fm.title, $head: fm.$head } : S.document;
+    content = renderHeadTemplate({
+      document: headDoc,
+      applyMutation: isContent
+        ? (/** @type {any} */ fn) => {
+            // Apply mutation to a temporary doc, then sync title/$head back to frontmatter
+            const tmp = { title: fm.title, $head: fm.$head ? [...fm.$head] : undefined };
+            fn(tmp);
+            if (tmp.title !== fm.title) S = updateFrontmatter(S, "title", tmp.title);
+            // Always sync $head (may have been created, modified, or emptied)
+            const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
+            S = updateFrontmatter(S, "$head", newHead);
+            update(S);
+          }
+        : (/** @type {any} */ fn) => {
+            S = applyMutation(S, fn);
+            update(S);
+          },
+      renderLeftPanel,
+    });
+  } else content = nothing;
 
   litRender(html`<div class="panel-body">${content}</div>`, /** @type {any} */ (leftPanel));
 
   // Post-render side effects
-  if (tab === "layers" && canvasMode !== "stylebook") registerLayersDnD();
+  if (tab === "layers" && canvasMode !== "settings") registerLayersDnD();
   else if (tab === "imports") {
     /* no post-render DnD needed */
   } else if (tab === "blocks") {
@@ -2993,8 +3267,8 @@ function renderLeftPanel() {
 /** Returns a TemplateResult — called from renderLeftPanel only when tab=layers & not stylebook */
 function renderLayersTemplate() {
   // Clean up previous DnD registrations
-  for (const fn of dndCleanups) fn();
-  dndCleanups = [];
+  for (const fn of view.dndCleanups) fn();
+  view.dndCleanups = [];
 
   const rows = flattenTree(S.document);
   const collapsed = S._collapsed || (S._collapsed = new Set());
@@ -3014,6 +3288,9 @@ function renderLayersTemplate() {
     }
     if (hidden) continue;
 
+    // In content mode, skip the document root row (it's not a real element)
+    if (S.mode === "content" && path.length === 0) continue;
+
     // Text node children: display-only row with truncated preview
     if (nodeType === "text") {
       const textPreview = String(node).length > 40 ? String(node).slice(0, 40) + "…" : String(node);
@@ -3084,7 +3361,7 @@ function renderLayersTemplate() {
 
     // Compute move-button availability for element nodes
     const isElement = nodeType === "element";
-    const isRoot = path.length < 2;
+    const isRoot = S.mode === "content" ? path.length === 0 : path.length < 2;
     const idx = isElement ? /** @type {number} */ (childIndex(path)) : 0;
     const parentPath = isElement && !isRoot ? /** @type {any} */ (parentElementPath(path)) : null;
     const parentNode = parentPath ? getNodeAtPath(S.document, parentPath) : null;
@@ -3113,7 +3390,10 @@ function renderLayersTemplate() {
         data-dnd-depth=${isElement ? depth : nothing}
         data-dnd-void=${isElement && isVoidEl ? "" : nothing}
         @click=${() => update(selectNode(S, path))}
-        @contextmenu=${isElement ? (/** @type {any} */ e) => showContextMenu(e, path, S) : nothing}
+        @contextmenu=${isElement
+          ? (/** @type {any} */ e) =>
+              showContextMenu(e, path, S, { onEditComponent: navigateToComponent })
+          : nothing}
       >
         <span class="layer-indent" style="width:${depth * 16}px"></span>
         <span class="layer-toggle"
@@ -3267,7 +3547,7 @@ function registerLayersDnD() {
             },
             onDragStart() {
               row.classList.add("dragging");
-              layerDragSourceHeight = row.offsetHeight;
+              view.layerDragSourceHeight = row.offsetHeight;
             },
             onDrop() {
               row.classList.remove("dragging");
@@ -3306,7 +3586,7 @@ function registerLayersDnD() {
             },
           }),
         );
-        dndCleanups.push(cleanup);
+        view.dndCleanups.push(cleanup);
       },
     );
 
@@ -3323,7 +3603,7 @@ function registerLayersDnD() {
         applyDropInstruction(instruction, srcData, targetPath);
       },
     });
-    dndCleanups.push(monitorCleanup);
+    view.dndCleanups.push(monitorCleanup);
   });
 }
 
@@ -3364,15 +3644,13 @@ function registerComponentsDnD() {
             return { type: "block", fragment: structuredClone(instanceDef) };
           },
         });
-        dndCleanups.push(cleanup);
+        view.dndCleanups.push(cleanup);
       },
     );
   });
 }
 
 /** @type {any} */
-let _currentDropTargetRow = null;
-let layerDragSourceHeight = 0;
 
 /**
  * @param {any} rowEl
@@ -3383,8 +3661,8 @@ function showLayerDropGap(rowEl, data, container) {
   const instruction = extractInstruction(data);
 
   // Clear previous drop-target highlight
-  if (_currentDropTargetRow && _currentDropTargetRow !== rowEl) {
-    _currentDropTargetRow.classList.remove("drop-target");
+  if (view._currentDropTargetRow && view._currentDropTargetRow !== rowEl) {
+    view._currentDropTargetRow.classList.remove("drop-target");
   }
 
   if (!instruction || instruction.type === "instruction-blocked") {
@@ -3395,17 +3673,17 @@ function showLayerDropGap(rowEl, data, container) {
   if (instruction.type === "make-child") {
     clearLayerDropGap(container);
     rowEl.classList.add("drop-target");
-    _currentDropTargetRow = rowEl;
+    view._currentDropTargetRow = rowEl;
     return;
   }
 
   rowEl.classList.remove("drop-target");
-  _currentDropTargetRow = rowEl;
+  view._currentDropTargetRow = rowEl;
 
   // Shift rows to create gap
   const rows = Array.from(container.querySelectorAll(".layers-tree .layer-row"));
   const targetIdx = rows.indexOf(rowEl);
-  const gap = layerDragSourceHeight;
+  const gap = view.layerDragSourceHeight;
 
   for (let i = 0; i < rows.length; i++) {
     if (rows[i].classList.contains("dragging")) continue;
@@ -3419,9 +3697,9 @@ function showLayerDropGap(rowEl, data, container) {
 
 /** @param {any} container */
 function clearLayerDropGap(container) {
-  if (_currentDropTargetRow) {
-    _currentDropTargetRow.classList.remove("drop-target");
-    _currentDropTargetRow = null;
+  if (view._currentDropTargetRow) {
+    view._currentDropTargetRow.classList.remove("drop-target");
+    view._currentDropTargetRow = null;
   }
   const rows = container.querySelectorAll(".layers-tree .layer-row");
   for (const r of rows) r.style.transform = "";
@@ -3434,25 +3712,22 @@ function clearLayerDropGap(container) {
  * @param {string | null} [media]
  */
 function selectStylebookTag(tag, media) {
-  S = {
-    ...S,
+  updateSession({
     selection: [],
     ui: {
-      ...S.ui,
       stylebookSelection: tag,
       rightTab: "style",
       activeSelector: `& ${tag}`,
       ...(media !== undefined ? { activeMedia: media } : {}),
     },
-  };
+  });
   renderStylebookOverlays();
-  renderRightPanel();
-  renderLeftPanel();
-  renderToolbar();
-  if (canvasPanels.length > 0) {
-    const el = findStylebookEl(canvasPanels[0].canvas, tag);
-    if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-  }
+  requestAnimationFrame(() => {
+    if (canvasPanels.length > 0) {
+      const el = findStylebookEl(canvasPanels[0].canvas, tag);
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  });
 }
 
 function renderStylebookLayersTemplate() {
@@ -3705,18 +3980,18 @@ const unsafeTags = new Set(["script", "style", "link", "iframe", "object", "embe
 function renderElementsTemplate() {
   const categories = Object.entries(webdata.elements).map(
     (/** @type {any} */ [category, elements]) => {
-      const filtered = elementsFilter
-        ? elements.filter((/** @type {any} */ e) => e.tag.includes(elementsFilter))
+      const filtered = view.elementsFilter
+        ? elements.filter((/** @type {any} */ e) => e.tag.includes(view.elementsFilter))
         : elements;
       if (filtered.length === 0) return nothing;
 
       return html`
         <sp-accordion-item
           label=${category}
-          ?open=${!elementsCollapsed.has(category)}
+          ?open=${!view.elementsCollapsed.has(category)}
           @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-            if (e.target.open) elementsCollapsed.delete(category);
-            else elementsCollapsed.add(category);
+            if (e.target.open) view.elementsCollapsed.delete(category);
+            else view.elementsCollapsed.add(category);
           }}
         >
           ${filtered.map((/** @type {any} */ { tag }) => {
@@ -3768,7 +4043,7 @@ function renderElementsTemplate() {
           .filter((/** @type {any} */ c) => c.source !== "npm" || enabledTags.has(c.tagName))
           .filter(
             (/** @type {any} */ c) =>
-              !elementsFilter || c.tagName.toLowerCase().includes(elementsFilter),
+              !view.elementsFilter || c.tagName.toLowerCase().includes(view.elementsFilter),
           )
       : [];
 
@@ -3777,10 +4052,10 @@ function renderElementsTemplate() {
       ? html`
           <sp-accordion-item
             label="Components"
-            ?open=${!elementsCollapsed.has("Components")}
+            ?open=${!view.elementsCollapsed.has("Components")}
             @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-              if (e.target.open) elementsCollapsed.delete("Components");
-              else elementsCollapsed.add("Components");
+              if (e.target.open) view.elementsCollapsed.delete("Components");
+              else view.elementsCollapsed.add("Components");
             }}
           >
             <div class="components-section">
@@ -3826,9 +4101,9 @@ function renderElementsTemplate() {
     <sp-search
       size="s"
       placeholder="Filter elements…"
-      value=${elementsFilter}
+      value=${view.elementsFilter}
       @input=${(/** @type {any} */ e) => {
-        elementsFilter = e.target.value.toLowerCase();
+        view.elementsFilter = e.target.value.toLowerCase();
         renderLeftPanel();
       }}
     ></sp-search>
@@ -3858,7 +4133,7 @@ function registerElementsDnD() {
             return { type: "block", fragment: structuredClone(def) };
           },
         });
-        dndCleanups.push(cleanup);
+        view.dndCleanups.push(cleanup);
       },
     );
   });
@@ -3867,7 +4142,6 @@ function registerElementsDnD() {
 // ─── Stylebook ───────────────────────────────────────────────────────────────
 
 /** Map from rendered stylebook DOM elements to their tag names */
-let stylebookElToTag = new WeakMap();
 
 /**
  * Build a DOM element tree from a stylebook-meta.json entry. Applies any existing tag-scoped styles
@@ -3970,8 +4244,52 @@ function hasTagStyle(rootStyle, tag) {
   return s && typeof s === "object" && Object.keys(s).length > 0;
 }
 
-function renderStylebook() {
-  stylebookElToTag = new WeakMap();
+function renderSettings() {
+  const settingsTab = S.ui.settingsTab || "stylebook";
+
+  // Top-level settings tabs chrome bar
+  const settingsChromeBarTpl = html`
+    <div
+      class="sb-chrome settings-top-chrome"
+      style="position:absolute;top:0;left:0;right:0;z-index:16;background:var(--bg-panel);border-bottom:1px solid var(--border)"
+    >
+      <sp-tabs
+        size="s"
+        selected=${settingsTab}
+        @change=${(/** @type {any} */ e) => {
+          updateUi("settingsTab", e.target.selected);
+        }}
+      >
+        <sp-tab label="Stylebook" value="stylebook"></sp-tab>
+        <sp-tab label="Definitions" value="definitions"></sp-tab>
+        <sp-tab label="Collections" value="collections"></sp-tab>
+      </sp-tabs>
+    </div>
+  `;
+
+  // Non-stylebook tabs: render editor into canvasWrap with offset for chrome bar
+  if (settingsTab === "definitions" || settingsTab === "collections") {
+    /** @type {any} */ (canvasWrap).style.overflow = "hidden";
+
+    litRender(
+      html`${settingsChromeBarTpl}
+        <div
+          class="settings-editor-container"
+          style="position:absolute;inset:40px 0 0 0;overflow:auto"
+        ></div>`,
+      /** @type {any} */ (canvasWrap),
+    );
+
+    const container = /** @type {HTMLElement} */ (
+      canvasWrap.querySelector(".settings-editor-container")
+    );
+    if (settingsTab === "definitions") renderDefsEditor(container);
+    else renderCollectionsEditor(container);
+    return;
+  }
+
+  // Stylebook tab — existing behavior
+  view.stylebookElToTag = new WeakMap();
   const rootStyle = getEffectiveStyle(S.document.style);
   const filter = (S.ui.stylebookFilter || "").toLowerCase();
   const customizedOnly = S.ui.stylebookCustomizedOnly;
@@ -3981,38 +4299,33 @@ function renderStylebook() {
 
   // Chrome bar (tabs + filter) — positioned absolutely above the panzoom surface
   const onTabClick = (/** @type {string} */ t) => {
-    S = { ...S, ui: { ...S.ui, stylebookTab: t } };
-    renderCanvas();
-    renderOverlays();
-    renderLeftPanel();
+    updateUi("stylebookTab", t);
   };
 
   const onFilterInput = (/** @type {any} */ e) => {
-    S = { ...S, ui: { ...S.ui, stylebookFilter: e.target.value } };
-    renderCanvas();
-    renderOverlays();
+    updateUi("stylebookFilter", e.target.value);
   };
 
   const onCustomizedToggle = () => {
-    S = { ...S, ui: { ...S.ui, stylebookCustomizedOnly: !S.ui.stylebookCustomizedOnly } };
-    renderCanvas();
-    renderOverlays();
+    updateUi("stylebookCustomizedOnly", !S.ui.stylebookCustomizedOnly);
   };
 
   const chromeBarTpl = html`
+    ${settingsChromeBarTpl}
     <div
       class="sb-chrome"
-      style="position:absolute;top:0;left:0;right:0;z-index:15;background:var(--bg-panel);border-bottom:1px solid var(--border)"
+      style="position:absolute;top:36px;left:0;right:0;z-index:15;background:var(--bg-panel);border-bottom:1px solid var(--border)"
     >
-      <sp-tabs size="s">
+      <sp-tabs
+        size="s"
+        selected=${S.ui.stylebookTab || "elements"}
+        @change=${(/** @type {any} */ e) => {
+          onTabClick(e.target.selected);
+        }}
+      >
         ${["elements", "variables"].map(
           (t) => html`
-            <sp-tab
-              label=${t.charAt(0).toUpperCase() + t.slice(1)}
-              value=${t}
-              ?selected=${S.ui.stylebookTab === t}
-              @click=${() => onTabClick(t)}
-            ></sp-tab>
+            <sp-tab label=${t.charAt(0).toUpperCase() + t.slice(1)} value=${t}></sp-tab>
           `,
         )}
       </sp-tabs>
@@ -4058,7 +4371,6 @@ function renderStylebook() {
         activeSet: activeBreakpointsForWidth(sizeBreakpoints, bp.width),
       });
     }
-    allPanelDefs.sort((a, b) => b.width - a.width);
   }
 
   // Render content into panels
@@ -4110,9 +4422,9 @@ function renderStylebook() {
       ${chromeBarTpl}
       <div
         class="panzoom-wrap"
-        style="transform-origin:0 0;padding-top:36px"
+        style="transform-origin:0 0;padding-top:72px"
         ${ref((el) => {
-          if (el) panzoomWrap = /** @type {HTMLDivElement} */ (el);
+          if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
         })}
       >
         ${panelEntries.map((e) => e.tpl)}
@@ -4172,12 +4484,12 @@ function renderStylebookElementsIntoCanvas(
           class="element-card"
           ${ref((card) => {
             if (!card) return;
-            stylebookElToTag.set(card, entry.tag);
+            view.stylebookElToTag.set(card, entry.tag);
             elToPath.set(card, ["__sb", entry.tag]);
             for (const child of el.querySelectorAll("*")) {
               const tag = child.tagName.toLowerCase();
-              if (!stylebookElToTag.has(child)) {
-                stylebookElToTag.set(child, tag);
+              if (!view.stylebookElToTag.has(child)) {
+                view.stylebookElToTag.set(child, tag);
                 elToPath.set(child, ["__sb", tag]);
               }
             }
@@ -4219,7 +4531,7 @@ function renderStylebookElementsIntoCanvas(
             style="display:inline-flex;width:auto"
             ${ref((card) => {
               if (!card) return;
-              stylebookElToTag.set(card, comp.tagName);
+              view.stylebookElToTag.set(card, comp.tagName);
               elToPath.set(card, ["__sb", comp.tagName]);
             })}
           >
@@ -4586,21 +4898,6 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
 
 // varDisplayName, friendlyNameToVar — imported from studio-utils.js
 
-/**
- * Convert a $media key like "--tablet" to a friendly display name "Tablet". "--" returns "Base".
- *
- * @param {any} name
- */
-function mediaDisplayName(name) {
-  if (name === "--") return "Base";
-  return (
-    name
-      .replace(/^--/, "")
-      .replace(/-/g, " ")
-      .replace(/\b\w/g, (/** @type {any} */ c) => c.toUpperCase()) || name
-  );
-}
-
 /**
  * Convert a human-friendly name like "Tablet" to a $media key "--tablet"
  *
@@ -4715,7 +5012,8 @@ function createUnitInput(initialValue, { onChange, size = "s" } = {}) {
 }
 
 /**
- * Click handler for stylebook canvas — selects elements via the elToPath/stylebookElToTag mapping
+ * Click handler for stylebook canvas — selects elements via the elToPath/view.stylebookElToTag
+ * mapping
  *
  * @param {any} panel
  */
@@ -4736,7 +5034,7 @@ function registerStylebookPanelEvents(panel) {
       if (!canvas.contains(el) || el === canvas) continue;
       let cur = /** @type {any} */ (el);
       while (cur && cur !== canvas) {
-        const tag = stylebookElToTag.get(cur);
+        const tag = view.stylebookElToTag.get(cur);
         if (tag) {
           const newMedia = panel.mediaName === "base" ? null : (panel.mediaName ?? null);
           selectStylebookTag(tag, newMedia);
@@ -4747,9 +5045,8 @@ function registerStylebookPanelEvents(panel) {
       }
     }
     // Clicked empty area — deselect
-    S = { ...S, ui: { ...S.ui, stylebookSelection: null, activeSelector: null } };
+    updateSession({ ui: { stylebookSelection: null, activeSelector: null } });
     renderStylebookOverlays();
-    renderRightPanel();
   });
 
   overlayClk.addEventListener("mousemove", (/** @type {any} */ e) => {
@@ -4765,7 +5062,7 @@ function registerStylebookPanelEvents(panel) {
       if (!canvas.contains(el) || el === canvas) continue;
       let cur = /** @type {any} */ (el);
       while (cur && cur !== canvas) {
-        const tag = stylebookElToTag.get(cur);
+        const tag = view.stylebookElToTag.get(cur);
         if (tag) {
           hoverTag = tag;
           break;
@@ -4835,7 +5132,7 @@ function renderStylebookOverlays() {
 /** Find a stylebook element by tag in the canvas */
 function findStylebookEl(/** @type {any} */ canvasEl, /** @type {any} */ tag) {
   for (const child of canvasEl.querySelectorAll("*")) {
-    if (stylebookElToTag.get(child) === tag) return child;
+    if (view.stylebookElToTag.get(child) === tag) return child;
   }
   return null;
 }
@@ -4843,73 +5140,191 @@ function findStylebookEl(/** @type {any} */ canvasEl, /** @type {any} */ tag) {
 // ─── Right panel: Inspector ───────────────────────────────────────────────────
 
 function renderRightPanel() {
-  const tab = S.ui.rightTab;
+  rightPanelMod.render();
+}
 
-  // ── Icon tabs ──────────────────────────────────────────────────────────
-  const panelTabs = [
-    { value: "properties", icon: "sp-icon-properties", label: "Properties" },
-    { value: "events", icon: "sp-icon-event", label: "Events" },
-    { value: "style", icon: "sp-icon-brush", label: "Style" },
-  ];
+// ─── Inspector ────────────────────────────────────────────────────────────────
 
-  const tabsT = html`
-    <div class="panel-tabs">
-      <sp-tabs
-        selected=${tab}
-        quiet
-        @change=${(/** @type {any} */ e) => {
-          const sel = e.target.selected;
-          if (sel && sel !== tab) {
-            S = { ...S, ui: { ...S.ui, rightTab: sel } };
-            renderRightPanel();
-            renderOverlays();
-          }
-        }}
-      >
-        ${panelTabs.map(
-          (t) => html`
-            <sp-tab value=${t.value} title=${t.label} aria-label=${t.label}>
-              ${tabIcon(t.icon, "xs")}
-            </sp-tab>
-          `,
-        )}
-      </sp-tabs>
+/** Frontmatter-only panel shown in content mode when no element is selected */
+function renderFrontmatterOnlyPanel() {
+  const fm = S.content?.frontmatter || {};
+  const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+  const schemaProps = col?.schema?.properties;
+  const requiredFields = new Set(col?.schema?.required || []);
+
+  /** @type {{ field: string; entry: any; value: any }[]} */
+  const fields = [];
+  if (schemaProps) {
+    for (const [field, fieldSchema] of Object.entries(
+      /** @type {Record<string, any>} */ (schemaProps),
+    )) {
+      fields.push({ field, entry: fieldSchema, value: fm[field] });
+    }
+    for (const [field, value] of Object.entries(fm)) {
+      if (!schemaProps[field]) {
+        fields.push({
+          field,
+          entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+          value,
+        });
+      }
+    }
+  } else {
+    for (const [field, value] of Object.entries(fm)) {
+      fields.push({
+        field,
+        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+        value,
+      });
+    }
+  }
+
+  if (fields.length === 0 && !schemaProps) {
+    return html`<div class="empty-state">No frontmatter. Select an element to inspect.</div>`;
+  }
+
+  return html`
+    <div class="style-sidebar">
+      <sp-accordion allow-multiple size="s">
+        <sp-accordion-item label=${col ? `Frontmatter (${col.name})` : "Frontmatter"} open>
+          <div class="style-section-body">
+            ${fields.map((f) => renderFmFieldRow(f.field, f.entry, f.value, requiredFields))}
+          </div>
+        </sp-accordion-item>
+      </sp-accordion>
     </div>
   `;
+}
 
-  // ── Panel body ────────────────────────────────────────────────────────
-  /** @type {any} */
-  let bodyT = nothing;
-  if (tab === "properties") {
-    bodyT = propertiesSidebarTemplate();
-  } else if (tab === "events") {
-    bodyT = _eventsSidebarTemplate(S, {
-      isCustomElementDoc: () => isCustomElementDoc(S),
-      renderCanvas,
+/** Render a single frontmatter field row (shared between both panels) */
+function renderFmFieldRow(
+  /** @type {string} */ field,
+  /** @type {any} */ entry,
+  /** @type {any} */ value,
+  /** @type {Set<string>} */ requiredFields,
+) {
+  const isRequired = requiredFields.has(field);
+  const label = field.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+  const displayLabel = label + (isRequired ? " *" : "");
+  const hasVal = value !== undefined && value !== "" && value !== false;
+  const onClear = () => update(updateFrontmatter(S, field, undefined));
+
+  // Boolean → checkbox
+  if (entry.type === "boolean") {
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: html`
+        <sp-checkbox
+          size="s"
+          .checked=${live(!!value)}
+          @change=${(/** @type {any} */ e) =>
+            update(updateFrontmatter(S, field, e.target.checked || undefined))}
+        ></sp-checkbox>
+      `,
     });
-  } else if (tab === "style") {
-    try {
-      bodyT = renderStylePanelTemplate();
-    } catch (/** @type {any} */ e) {
-      console.error("[renderStylePanelTemplate]", e);
-    }
   }
 
-  const tpl = html`
-    ${tabsT}
-    <div class="panel-body">${bodyT}</div>
-  `;
+  // Array of strings → comma-separated text
+  if (entry.type === "array") {
+    const display = Array.isArray(value) ? value.join(", ") : value || "";
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: html`
+        <sp-textfield
+          size="s"
+          placeholder="comma, separated"
+          .value=${live(display)}
+          @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
+            const arr = e.target.value
+              ? e.target.value
+                  .split(",")
+                  .map((/** @type {string} */ s) => s.trim())
+                  .filter(Boolean)
+              : undefined;
+            update(updateFrontmatter(S, field, arr));
+          })}
+        ></sp-textfield>
+      `,
+    });
+  }
 
-  litRender(tpl, rightPanel);
+  // Enum → select
+  if (Array.isArray(entry.enum)) {
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: html`
+        <sp-picker
+          size="s"
+          .value=${live(value || "")}
+          @change=${(/** @type {any} */ e) =>
+            update(updateFrontmatter(S, field, e.target.value || undefined))}
+        >
+          ${entry.enum.map(
+            (/** @type {string} */ opt) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`,
+          )}
+        </sp-picker>
+      `,
+    });
+  }
 
-  updateForcedPseudoPreview();
-}
+  // Number
+  if (entry.type === "number") {
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: html`
+        <sp-number-field
+          size="s"
+          hide-stepper
+          .value=${live(value !== undefined ? Number(value) : undefined)}
+          @change=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
+            const v = e.target.value;
+            update(updateFrontmatter(S, field, isNaN(v) ? undefined : Number(v)));
+          })}
+        ></sp-number-field>
+      `,
+    });
+  }
 
-// ─── Inspector ────────────────────────────────────────────────────────────────
+  // Default: text (handles string, date, etc.)
+  return renderFieldRow({
+    prop: field,
+    label: displayLabel,
+    hasValue: hasVal,
+    onClear,
+    widget: html`
+      <sp-textfield
+        size="s"
+        placeholder=${entry.format === "date" ? "YYYY-MM-DD" : ""}
+        .value=${live(value || "")}
+        @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
+          update(updateFrontmatter(S, field, e.target.value || undefined));
+        })}
+      ></sp-textfield>
+    `,
+  });
+}
 
 /** Properties panel — lit-html template with accordion sections */
 function propertiesSidebarTemplate() {
-  if (!S.selection) return html`<div class="empty-state">Select an element to inspect</div>`;
+  // In content mode with no selection, still show frontmatter fields
+  if (!S.selection) {
+    if (S.mode === "content") {
+      return renderFrontmatterOnlyPanel();
+    }
+    return html`<div class="empty-state">Select an element to inspect</div>`;
+  }
   const node = getNodeAtPath(S.document, S.selection);
   if (!node) return html`<div class="empty-state">Node not found</div>`;
 
@@ -4941,21 +5356,12 @@ function propertiesSidebarTemplate() {
 
     // Boolean attributes render as checkboxes
     if (entry.type === "boolean") {
-      return html`
-        <div class="style-row" data-prop=${attr}>
-          <div class="style-row-label">
-            ${hasVal
-              ? html`<span
-                  class="set-dot"
-                  title="Clear ${attr}"
-                  @click=${(/** @type {any} */ e) => {
-                    e.stopPropagation();
-                    update(updateAttribute(S, path, attr, undefined));
-                  }}
-                ></span>`
-              : nothing}
-            <sp-field-label size="s" title=${attr}>${attrLabel(entry, attr)}</sp-field-label>
-          </div>
+      return renderFieldRow({
+        prop: attr,
+        label: attrLabel(entry, attr),
+        hasValue: hasVal,
+        onClear: () => update(updateAttribute(S, path, attr, undefined)),
+        widget: html`
           <sp-checkbox
             size="s"
             .checked=${live(!!value)}
@@ -4963,30 +5369,19 @@ function propertiesSidebarTemplate() {
               update(updateAttribute(S, path, attr, e.target.checked || undefined))}
           >
           </sp-checkbox>
-        </div>
-      `;
+        `,
+      });
     }
 
-    return html`
-      <div class="style-row" data-prop=${attr}>
-        <div class="style-row-label">
-          ${hasVal
-            ? html`<span
-                class="set-dot"
-                title="Clear ${attr}"
-                @click=${(/** @type {any} */ e) => {
-                  e.stopPropagation();
-                  update(updateAttribute(S, path, attr, undefined));
-                }}
-              ></span>`
-            : nothing}
-          <sp-field-label size="s" title=${attr}>${attrLabel(entry, attr)}</sp-field-label>
-        </div>
-        ${widgetForType(type, entry, attr, value || "", (/** @type {any} */ v) =>
-          update(updateAttribute(S, path, attr, v || undefined)),
-        )}
-      </div>
-    `;
+    return renderFieldRow({
+      prop: attr,
+      label: attrLabel(entry, attr),
+      hasValue: hasVal,
+      onClear: () => update(updateAttribute(S, path, attr, undefined)),
+      widget: widgetForType(type, entry, attr, value || "", (/** @type {any} */ v) =>
+        update(updateAttribute(S, path, attr, v || undefined)),
+      ),
+    });
   }
 
   // ── Collect applicable attributes from html-meta ──
@@ -5035,11 +5430,7 @@ function propertiesSidebarTemplate() {
 
   function toggleSection(/** @type {any} */ key) {
     const current = isSectionOpen(key);
-    S = {
-      ...S,
-      ui: { ...S.ui, inspectorSections: { ...S.ui.inspectorSections, [key]: !current } },
-    };
-    renderRightPanel();
+    updateUi("inspectorSections", { ...S.ui.inspectorSections, [key]: !current });
   }
 
   // ── Build section templates ─────────────────────────────────────────
@@ -5364,11 +5755,63 @@ function propertiesSidebarTemplate() {
         })()
       : nothing;
 
+  // ── Frontmatter section (content mode only) ──
+  const frontmatterT =
+    S.mode === "content"
+      ? (() => {
+          const fm = S.content?.frontmatter || {};
+          const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+          const schemaProps = col?.schema?.properties;
+          const requiredFields = new Set(col?.schema?.required || []);
+
+          /** @type {{ field: string; entry: any; value: any }[]} */
+          const fields = [];
+          if (schemaProps) {
+            for (const [field, fieldSchema] of Object.entries(
+              /** @type {Record<string, any>} */ (schemaProps),
+            )) {
+              fields.push({ field, entry: fieldSchema, value: fm[field] });
+            }
+            for (const [field, value] of Object.entries(fm)) {
+              if (!schemaProps[field]) {
+                fields.push({
+                  field,
+                  entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+                  value,
+                });
+              }
+            }
+          } else {
+            for (const [field, value] of Object.entries(fm)) {
+              fields.push({
+                field,
+                entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+                value,
+              });
+            }
+          }
+
+          if (fields.length === 0 && !schemaProps) return nothing;
+
+          return html`
+            <sp-accordion-item
+              label=${col ? `Frontmatter (${col.name})` : "Frontmatter"}
+              ?open=${isSectionOpen("__frontmatter") !== false}
+              @sp-accordion-item-toggle=${() => toggleSection("__frontmatter")}
+            >
+              <div class="style-section-body">
+                ${fields.map((f) => renderFmFieldRow(f.field, f.entry, f.value, requiredFields))}
+              </div>
+            </sp-accordion-item>
+          `;
+        })()
+      : nothing;
+
   // ── Assemble ──
   const tpl = html`
     <div class="style-sidebar">
       <sp-accordion allow-multiple size="s">
-        ${isMapNode ? repeaterT : elemT} ${isMapNode ? nothing : observedAttrsT}
+        ${frontmatterT} ${isMapNode ? repeaterT : elemT} ${isMapNode ? nothing : observedAttrsT}
         ${isMapNode ? nothing : switchT} ${isMapNode ? nothing : compPropsT}
         ${isMapNode ? nothing : attrSectionTemplates} ${isMapNode ? nothing : customSectionT}
         ${isMapNode ? nothing : mediaT} ${isMapNode ? nothing : cssPropsT}
@@ -5603,13 +6046,13 @@ function renderComponentPropsFieldsTemplate(
         ></sp-number-field>`;
       } else if (parsed.kind === "combobox") {
         const options = /** @type {string[]} */ (/** @type {any} */ (parsed).options);
-        widgetTpl = html`<jx-styled-combobox
+        widgetTpl = html`<jx-value-selector
           .value=${String(staticVal)}
           size="s"
           placeholder="—"
           .options=${options.map((o) => ({ value: o, label: camelToLabel(o) }))}
           @change=${(/** @type {any} */ e) => onChange(e.detail?.value ?? e.target.value)}
-        ></jx-styled-combobox>`;
+        ></jx-value-selector>`;
       } else {
         widgetTpl = html`<sp-textfield
           size="s"
@@ -5683,8 +6126,6 @@ function renderCustomAttrsFieldsTemplate(
 }
 
 /** Media breakpoint fields template */
-let showAddBreakpointForm = false;
-let addBreakpointPreview = "";
 
 function renderMediaFieldsTemplate(/** @type {any} */ node) {
   const media = node.$media || {};
@@ -5720,14 +6161,14 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
     <div>
       <span
         class="kv-add"
-        style=${showAddBreakpointForm ? "display:none" : ""}
+        style=${view.showAddBreakpointForm ? "display:none" : ""}
         @click=${(/** @type {any} */ _e) => {
-          showAddBreakpointForm = true;
+          view.showAddBreakpointForm = true;
           renderRightPanel();
         }}
         >+ Add breakpoint</span
       >
-      ${showAddBreakpointForm
+      ${view.showAddBreakpointForm
         ? html`
             <div style="margin-top:4px">
               <div style="display:flex;gap:4px;margin-bottom:3px;align-items:center">
@@ -5736,13 +6177,13 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
                   placeholder="Name (e.g. Tablet)"
                   style="flex:1"
                   @input=${(/** @type {any} */ e) => {
-                    addBreakpointPreview = friendlyNameToMedia(e.target.value) || "";
+                    view.addBreakpointPreview = friendlyNameToMedia(e.target.value) || "";
                     renderRightPanel();
                   }}
                 />
                 <span
                   style="font-size:10px;color:var(--fg-dim);font-family:'SF Mono','Fira Code',monospace;white-space:nowrap"
-                  >${addBreakpointPreview}</span
+                  >${view.addBreakpointPreview}</span
                 >
               </div>
               <div style="display:flex;gap:4px;margin-bottom:3px;align-items:center">
@@ -5758,8 +6199,8 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
                     const queryVal = wrap.querySelector(".add-bp-query")?.value?.trim();
                     const key = friendlyNameToMedia(nameVal);
                     if (key && queryVal) {
-                      showAddBreakpointForm = false;
-                      addBreakpointPreview = "";
+                      view.showAddBreakpointForm = false;
+                      view.addBreakpointPreview = "";
                       update(updateMedia(S, key, queryVal));
                     }
                   }}
@@ -5770,8 +6211,8 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
                   class="kv-add"
                   style="padding:2px 10px;cursor:pointer;color:var(--fg-dim)"
                   @click=${() => {
-                    showAddBreakpointForm = false;
-                    addBreakpointPreview = "";
+                    view.showAddBreakpointForm = false;
+                    view.addBreakpointPreview = "";
                     renderRightPanel();
                   }}
                 >
@@ -5839,7 +6280,7 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
 
 // ─── Style Sidebar (metadata-driven) ───────────────────────────────────────────
 
-const UNIT_RE = /^(-?[\d.]+)(px|rem|em|%|vw|vh|svw|svh|dvh|ms|s|fr|ch|ex|deg)?$/;
+// UNIT_RE — imported from ui/unit-selector.js
 
 // inferInputType — imported from studio-utils.js
 
@@ -5867,32 +6308,118 @@ function autoOpenSections(/** @type {any} */ node, /** @type {any} */ currentSec
 
 /** Get longhands for a shorthand property from css-meta */
 function getLonghands(/** @type {any} */ shorthandProp) {
+  // Check for explicit $longhands array first (used by border-side shorthands)
+  const entry = /** @type {Record<string, any>} */ (cssMeta.$defs)[shorthandProp];
+  if (entry?.$longhands) {
+    return entry.$longhands
+      .map((/** @type {string} */ name) => ({
+        name,
+        entry: /** @type {Record<string, any>} */ (cssMeta.$defs)[name] || { $order: 0 },
+      }))
+      .sort((/** @type {any} */ a, /** @type {any} */ b) => a.entry.$order - b.entry.$order);
+  }
+  // Fallback: reverse-lookup by $shorthand reference
   const result = [];
-  for (const [name, entry] of /** @type {[string, any][]} */ (Object.entries(cssMeta.$defs))) {
-    if (entry.$shorthand === shorthandProp) result.push({ name, entry });
+  for (const [name, e] of /** @type {[string, any][]} */ (Object.entries(cssMeta.$defs))) {
+    if (e.$shorthand === shorthandProp) result.push({ name, entry: e });
   }
   result.sort((a, b) => a.entry.$order - b.entry.$order);
   return result;
 }
 
-// ── Color popover singleton ─────────────────────────────────────────────────
-/** @type {any} */
-/** @type {any} */
-let _colorCallback = null;
-/** @type {any} */
-let _colorDismissHandler = null;
+/**
+ * Expand a CSS shorthand value (margin, padding, borderWidth, borderRadius) into individual
+ * longhand values following the standard 1–4 value TRBL pattern. Returns an array matching the
+ * longhand count (always 4 for box properties).
+ */
+function expandShorthand(/** @type {string} */ shortVal, /** @type {number} */ count) {
+  if (!shortVal) return Array(count).fill("");
+  const parts = shortVal.trim().split(/\s+/);
+  if (count !== 4 || parts.length === 0) return Array(count).fill("");
+  if (parts.length === 1) return [parts[0], parts[0], parts[0], parts[0]];
+  if (parts.length === 2) return [parts[0], parts[1], parts[0], parts[1]];
+  if (parts.length === 3) return [parts[0], parts[1], parts[2], parts[1]];
+  return [parts[0], parts[1], parts[2], parts[3]];
+}
 
-/** Extract --color-* CSS custom properties from the document root style. */
-function getColorVars() {
-  const style = S.document?.style;
-  if (!style) return [];
-  const vars = [];
-  for (const [k, v] of Object.entries(style)) {
-    if (k.startsWith("--color") && (typeof v === "string" || typeof v === "number")) {
-      vars.push({ name: k, value: String(v) });
+/**
+ * Compress 4 TRBL values back into the shortest valid CSS shorthand string. e.g.
+ * ["0","auto","3rem","auto"] → "0 auto 3rem"
+ */
+function compressShorthand(/** @type {string[]} */ vals) {
+  const [t, r, b, l] = vals;
+  if (t === r && r === b && b === l) return t;
+  if (t === b && r === l) return `${t} ${r}`;
+  if (r === l) return `${t} ${r} ${b}`;
+  return `${t} ${r} ${b} ${l}`;
+}
+
+// ─── Border-side shorthand parsing ────────────────────────────────────────────
+// CSS border-side shorthand: <width> || <style> || <color> (any order, all optional)
+
+const BORDER_STYLES = new Set([
+  "none",
+  "solid",
+  "dashed",
+  "dotted",
+  "double",
+  "groove",
+  "ridge",
+  "inset",
+  "outset",
+  "hidden",
+]);
+
+/**
+ * Parse a border-side shorthand value into [width, style, color].
+ *
+ * @param {string} value — e.g. "1px solid var(--color-border)"
+ * @returns {string[]} — [width, style, color]
+ */
+function expandBorderSide(value) {
+  if (!value) return ["", "", ""];
+  // Tokenize respecting parenthesized values like var(...) and rgb(...)
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (const ch of value.trim()) {
+    if (ch === "(") depth++;
+    if (ch === ")") depth--;
+    if (ch === " " && depth === 0) {
+      if (current) tokens.push(current);
+      current = "";
+    } else {
+      current += ch;
     }
   }
-  return vars;
+  if (current) tokens.push(current);
+
+  let width = "";
+  let style = "";
+  let color = "";
+
+  for (const tok of tokens) {
+    if (!style && BORDER_STYLES.has(tok)) {
+      style = tok;
+    } else if (!width && /^[\d.]/.test(tok)) {
+      width = tok;
+    } else {
+      // Remaining token(s) are color — join in case color was split (shouldn't be with paren-aware tokenizer)
+      color = color ? `${color} ${tok}` : tok;
+    }
+  }
+
+  return [width, style, color];
+}
+
+/**
+ * Recompose border-side longhand values into a shorthand string.
+ *
+ * @param {string[]} vals — [width, style, color]
+ * @returns {string}
+ */
+function compressBorderSide(/** @type {string[]} */ vals) {
+  return vals.filter((v) => v && v.trim()).join(" ");
 }
 
 /** Extract --font-* CSS custom properties from the document root style. */
@@ -5908,371 +6435,6 @@ function getFontVars() {
   return vars;
 }
 
-/** Resolve a color value for display — if it's a var() reference, look up the actual color. */
-function resolveColorForDisplay(/** @type {any} */ val) {
-  if (!val) return "transparent";
-  const m = val.match(/^var\((--[^)]+)\)$/);
-  if (m) {
-    const style = S.document?.style;
-    const resolved = style?.[m[1]];
-    if (typeof resolved === "string") return resolved;
-    return "transparent";
-  }
-  return val;
-}
-
-const _colorPopoverHost = createFloatingContainer();
-
-function closeColorPopover() {
-  litRender(nothing, _colorPopoverHost);
-  _colorCallback = null;
-  if (_colorDismissHandler) {
-    document.removeEventListener("pointerdown", _colorDismissHandler, true);
-    document.removeEventListener("keydown", _colorDismissHandler, true);
-    _colorDismissHandler = null;
-  }
-}
-
-function openColorPopover(
-  /** @type {any} */ anchorEl,
-  /** @type {any} */ currentColor,
-  /** @type {any} */ onChange,
-) {
-  const colorVars = getColorVars();
-  const rawResolved = resolveColorForDisplay(currentColor) || "#000000";
-  // Ensure # prefix so Spectrum components return #-prefixed hex
-  const resolvedColor =
-    rawResolved.startsWith("#") || rawResolved.startsWith("rgb") || rawResolved.startsWith("hsl")
-      ? rawResolved
-      : `#${rawResolved}`;
-
-  const popoverQuery = (/** @type {string} */ sel) => _colorPopoverHost.querySelector(sel);
-
-  /** Ensure hex color always has a # prefix */
-  const normalizeHex = (/** @type {string} */ c) => {
-    if (!c) return c;
-    if (c.startsWith("var(") || c.startsWith("rgb") || c.startsWith("hsl")) return c;
-    const hex = c.replace(/^#?/, "#");
-    return hex;
-  };
-
-  // Render popover content with lit-html
-  const syncFromArea = (/** @type {any} */ _e) => {
-    /** @type {any} */
-    const area = popoverQuery("sp-color-area");
-    /** @type {any} */
-    const slider = popoverQuery("sp-color-slider");
-    /** @type {any} */
-    const tf = popoverQuery(".color-popover-hex");
-    const color = normalizeHex(String(area.color));
-    if (slider) slider.color = color;
-    if (tf) tf.value = color;
-    _colorCallback?.(color);
-  };
-
-  const syncFromSlider = (/** @type {any} */ _e) => {
-    /** @type {any} */
-    const area = popoverQuery("sp-color-area");
-    /** @type {any} */
-    const slider = popoverQuery("sp-color-slider");
-    /** @type {any} */
-    const tf = popoverQuery(".color-popover-hex");
-    const color = normalizeHex(String(slider.color));
-    if (area) area.color = color;
-    if (tf) tf.value = color;
-    _colorCallback?.(color);
-  };
-
-  const syncFromText = (/** @type {any} */ e) => {
-    const val = e.target.value.trim();
-    if (!val) return;
-    /** @type {any} */
-    const area = popoverQuery("sp-color-area");
-    /** @type {any} */
-    const slider = popoverQuery("sp-color-slider");
-    try {
-      if (area) area.color = val;
-      if (slider) slider.color = val;
-    } catch {}
-    _colorCallback?.(val);
-  };
-
-  const r = anchorEl.getBoundingClientRect();
-
-  litRender(
-    html`
-      <sp-popover
-        open
-        tabindex="-1"
-        style="padding:12px;position:fixed;z-index:9999;left:${r.left}px;top:${r.bottom +
-        4}px;overflow:visible"
-      >
-        <div class="color-popover-inner">
-          <sp-color-area
-            style="width:200px; height:150px; --mod-colorarea-width:200px; --mod-colorarea-height:150px"
-            color=${resolvedColor}
-            @input=${syncFromArea}
-          ></sp-color-area>
-          <sp-color-slider
-            style="width:200px; --mod-colorslider-length:200px"
-            color=${resolvedColor}
-            @input=${syncFromSlider}
-          ></sp-color-slider>
-          <sp-textfield
-            size="s"
-            class="color-popover-hex"
-            style="width:200px"
-            .value=${live(currentColor || "")}
-            placeholder="#000000"
-            @change=${syncFromText}
-          ></sp-textfield>
-          ${colorVars.length > 0
-            ? html`
-                <sp-divider size="s"></sp-divider>
-                <span class="color-popover-swatches-label">Color Tokens</span>
-                <sp-swatch-group size="xs" border="light" rounding="none">
-                  ${colorVars.map(
-                    (cv) => html`
-                      <sp-swatch
-                        color=${cv.value}
-                        .value=${cv.name}
-                        title=${cv.name}
-                        @click=${(/** @type {any} */ e) => {
-                          e.stopPropagation();
-                          const varRef = `var(${cv.name})`;
-                          _colorCallback?.(varRef);
-                          /** @type {any} */
-                          const tf = popoverQuery(".color-popover-hex");
-                          if (tf) tf.value = varRef;
-                        }}
-                      ></sp-swatch>
-                    `,
-                  )}
-                </sp-swatch-group>
-              `
-            : nothing}
-        </div>
-      </sp-popover>
-    `,
-    _colorPopoverHost,
-  );
-
-  _colorCallback = onChange;
-
-  // Dismiss on click-outside or Escape
-  if (_colorDismissHandler) {
-    document.removeEventListener("pointerdown", _colorDismissHandler, true);
-    document.removeEventListener("keydown", _colorDismissHandler, true);
-  }
-  _colorDismissHandler = (/** @type {any} */ e) => {
-    if (e.type === "keydown") {
-      if (e.key === "Escape") closeColorPopover();
-      return;
-    }
-    const popover = popoverQuery("sp-popover");
-    if (popover && !popover.contains(e.target) && !anchorEl.contains(e.target)) {
-      closeColorPopover();
-    }
-  };
-  requestAnimationFrame(() => {
-    document.addEventListener("pointerdown", _colorDismissHandler, true);
-    document.addEventListener("keydown", _colorDismissHandler, true);
-  });
-}
-
-function safeColor(/** @type {any} */ val) {
-  if (!val) return "transparent";
-  return resolveColorForDisplay(val);
-}
-
-function renderColorInput(
-  /** @type {any} */ prop,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
-) {
-  return html`
-    <div class="style-input-color">
-      <sp-swatch
-        size="s"
-        rounding="none"
-        border="light"
-        color=${safeColor(value)}
-        @click=${(/** @type {any} */ e) => {
-          if (_colorPopoverHost.querySelector("sp-popover[open]")) {
-            closeColorPopover();
-            return;
-          }
-          openColorPopover(e.currentTarget, value, (/** @type {any} */ c) => {
-            onChange(c);
-          });
-        }}
-      ></sp-swatch>
-      <sp-textfield
-        size="s"
-        style="flex:1; min-width:0"
-        .value=${live(value || "")}
-        @input=${debouncedStyleCommit(`color:${prop}`, 400, (/** @type {any} */ e) => {
-          onChange(e.target.value.trim());
-        })}
-      ></sp-textfield>
-    </div>
-  `;
-}
-
-function renderNumberUnitInput(
-  /** @type {any} */ entry,
-  /** @type {any} */ prop,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
-) {
-  const units = entry.$units || [];
-  const keywords = entry.$keywords || [];
-  const strVal = String(value ?? "");
-  const match = strVal.match(UNIT_RE);
-  const isKeyword = !match && strVal !== "" && keywords.includes(strVal);
-  const isNumericVal = (/** @type {any} */ v) => /^-?\d*\.?\d*$/.test(v);
-
-  const currentUnit = isKeyword ? units[0] || "" : match ? match[2] || "" : units[0] || "";
-  let displayValue;
-  if (isKeyword) displayValue = strVal;
-  else if (match) displayValue = match[1];
-  else if (strVal !== "") {
-    const num = parseFloat(strVal);
-    displayValue = isNaN(num) ? strVal : String(num);
-  } else displayValue = "";
-
-  const isExpression = isKeyword || (displayValue !== "" && !isNumericVal(displayValue));
-  const hasUnits = units.length > 0 || keywords.length > 0;
-  const btnId = `style-unit-${prop}`;
-
-  return html`
-    <div class="style-input-number-unit">
-      <div class=${classMap({ "input-group": true, "is-expression": isExpression })}>
-        <sp-textfield
-          size="s"
-          placeholder="0"
-          .value=${live(displayValue)}
-          @input=${debouncedStyleCommit(`nui:${prop}`, 400, (/** @type {any} */ e) => {
-            const val = (e.target.value ?? "").trim();
-            if (val === "") {
-              onChange("");
-              return;
-            }
-            if (isNumericVal(val)) onChange(units.length > 0 ? val + currentUnit : val);
-            else onChange(val);
-          })}
-        ></sp-textfield>
-        ${hasUnits
-          ? html`
-              <sp-picker-button id=${btnId} size="s">
-                <span slot="label">${currentUnit || units[0] || ""}</span>
-              </sp-picker-button>
-              <sp-overlay trigger="${btnId}@click" placement="bottom-end" offset="4">
-                <sp-popover style="min-width: var(--spectrum-component-width-900, 64px)">
-                  <sp-menu
-                    label="CSS unit"
-                    @change=${(/** @type {any} */ e) => {
-                      const chosen = e.target.value;
-                      if (keywords.includes(chosen)) {
-                        onChange(chosen);
-                      } else if (units.includes(chosen)) {
-                        // Re-commit with new unit
-                        const curMatch = String(value ?? "").match(UNIT_RE);
-                        const numPart = curMatch ? curMatch[1] : "";
-                        if (numPart) onChange(numPart + chosen);
-                      }
-                    }}
-                  >
-                    ${units.map(
-                      (/** @type {any} */ u) => html`<sp-menu-item value=${u}>${u}</sp-menu-item>`,
-                    )}
-                    ${keywords.length > 0 && units.length > 0
-                      ? html`<sp-menu-divider></sp-menu-divider>`
-                      : nothing}
-                    ${keywords.map(
-                      (/** @type {any} */ kw) =>
-                        html`<sp-menu-item value=${kw}>${kw}</sp-menu-item>`,
-                    )}
-                  </sp-menu>
-                </sp-popover>
-              </sp-overlay>
-            `
-          : nothing}
-      </div>
-    </div>
-  `;
-}
-
-// abbreviateValue — imported from studio-utils.js
-
-/** @param {any} entry @param {any} prop @param {any} value @param {any} onChange */
-function renderButtonGroupInput(entry, prop, value, onChange) {
-  const values = entry.$buttonValues || entry.enum || [];
-  /** @type {Record<string, any>} */
-  const iconMap = entry.$icons || {};
-  const extra =
-    entry.$buttonValues && entry.enum && entry.enum.length > entry.$buttonValues.length
-      ? entry.enum.filter((/** @type {any} */ v) => !entry.$buttonValues.includes(v))
-      : [];
-
-  const menuId = `style-btngrp-${prop}`;
-  const hasExtra = extra.length > 0;
-  // If the current value is one of the extra (non-button) options, show it selected in the picker
-  const extraSelected = hasExtra && extra.includes(value);
-
-  return html`
-    <div class="button-group-combo ${hasExtra ? "has-overflow" : ""}">
-      <sp-action-group size="s" compact>
-        ${values.map(
-          (/** @type {any} */ v) => html`
-            <sp-action-button
-              size="s"
-              title=${v}
-              ?selected=${v === value}
-              @click=${() => onChange(v === value ? "" : v)}
-            >
-              ${
-                /** @type {any} */ (iconMap)[v] &&
-                /** @type {any} */ (icons)[/** @type {any} */ (iconMap)[v]]
-                  ? /** @type {any} */ (icons)[/** @type {any} */ (iconMap)[v]]
-                  : abbreviateValue(v)
-              }
-            </sp-action-button>
-          `,
-        )}
-      </sp-action-group>
-      ${hasExtra
-        ? html`
-            <sp-picker-button
-              size="s"
-              id=${menuId}
-              class=${extraSelected ? "has-selection" : ""}
-            ></sp-picker-button>
-            <sp-overlay trigger="${menuId}@click" placement="bottom-end" type="auto">
-              <sp-popover>
-                <sp-menu
-                  @change=${(/** @type {any} */ e) => {
-                    if (e.target.value) onChange(e.target.value);
-                  }}
-                >
-                  <sp-menu-item value="__none__">—</sp-menu-item>
-                  ${extra.map((/** @type {any} */ v) => {
-                    const label = v.includes("-")
-                      ? kebabToLabel(v)
-                      : v.replace(/^./, (/** @type {any} */ c) => c.toUpperCase());
-                    return html`<sp-menu-item value=${v} ?selected=${v === value}
-                      >${label}</sp-menu-item
-                    >`;
-                  })}
-                </sp-menu>
-              </sp-popover>
-            </sp-overlay>
-          `
-        : nothing}
-    </div>
-  `;
-}
-
 /** Typography CSS properties that should preview their values in-menu */
 const TYPO_PREVIEW_PROPS = new Set(["fontStyle", "fontVariant", "textTransform", "textDecoration"]);
 
@@ -6316,7 +6478,7 @@ function renderKeywordInput(options, prop, value, onChange) {
     return { value: v, label, style };
   });
 
-  return html`<jx-styled-combobox
+  return html`<jx-value-selector
     size="s"
     .value=${value || ""}
     placeholder=${cssInitialMap.get(prop) || ""}
@@ -6325,7 +6487,7 @@ function renderKeywordInput(options, prop, value, onChange) {
     @input=${debouncedStyleCommit(`kw:${prop}`, 400, (/** @type {any} */ e) =>
       onChange(e.target.value),
     )}
-  ></jx-styled-combobox>`;
+  ></jx-value-selector>`;
 }
 
 function renderSelectInput(
@@ -6382,7 +6544,7 @@ function handleFontSelection(
 }
 
 /**
- * Build font options array for jx-styled-combobox. Local font vars first, divider, then unadded
+ * Build font options array for jx-value-selector. Local font vars first, divider, then unadded
  * presets.
  *
  * @param {any[]} fontVars @param {any[]} presets
@@ -6420,13 +6582,13 @@ function renderComboboxInput(
   const presets = entry.presets || [];
   const examples = entry.examples || [];
 
-  // fontFamily: single jx-styled-combobox with font options
+  // fontFamily: single jx-value-selector with font options
   if (prop === "fontFamily") {
     // Strip var() wrapper so the component can match the option value
     const varMatch = typeof value === "string" && value.match(/^var\((--[^)]+)\)$/);
     const comboValue = varMatch ? varMatch[1] : value || "";
     const fontOptions = buildFontOptions(fontVars, presets);
-    return html`<jx-styled-combobox
+    return html`<jx-value-selector
       size="s"
       .value=${comboValue}
       placeholder=${cssInitialMap.get("fontFamily") || ""}
@@ -6435,7 +6597,7 @@ function renderComboboxInput(
       @input=${debouncedStyleCommit("combo:fontFamily", 400, (/** @type {any} */ e) =>
         onChange(e.target.value),
       )}
-    ></jx-styled-combobox>`;
+    ></jx-value-selector>`;
   }
 
   // All other comboboxes: use the shared keyword dual-mode input
@@ -6456,45 +6618,7 @@ function renderComboboxInput(
   `;
 }
 
-function renderNumberInput(
-  /** @type {any} */ entry,
-  /** @type {any} */ prop,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
-) {
-  return html`
-    <sp-number-field
-      size="s"
-      hide-stepper
-      .value=${live(value !== undefined && value !== "" ? Number(value) : undefined)}
-      min=${ifDefined(entry.minimum)}
-      max=${ifDefined(entry.maximum)}
-      step=${ifDefined(entry.maximum !== undefined && entry.maximum <= 1 ? 0.1 : undefined)}
-      @change=${debouncedStyleCommit(`num:${prop}`, 400, (/** @type {any} */ e) => {
-        const v = e.target.value;
-        if (v === undefined || isNaN(v)) onChange("");
-        else onChange(Number(v));
-      })}
-    ></sp-number-field>
-  `;
-}
-
-function renderTextInput(
-  /** @type {any} */ prop,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
-) {
-  return html`
-    <sp-textfield
-      size="s"
-      placeholder=${cssInitialMap.get(prop) || ""}
-      .value=${live(value || "")}
-      @input=${debouncedStyleCommit(`text:${prop}`, 400, (/** @type {any} */ e) =>
-        onChange(e.target.value),
-      )}
-    ></sp-textfield>
-  `;
-}
+// renderNumberInput, renderTextInput — imported from ui/widgets.js
 
 // camelToLabel, kebabToLabel, propLabel, attrLabel — imported from studio-utils.js
 
@@ -6504,23 +6628,13 @@ function widgetForType(
   /** @type {any} */ prop,
   /** @type {any} */ value,
   /** @type {any} */ onCommit,
+  /** @type {any} */ opts = {},
 ) {
-  switch (type) {
-    case "button-group":
-      return renderButtonGroupInput(entry, prop, value, onCommit);
-    case "color":
-      return renderColorInput(prop, value, onCommit);
-    case "number-unit":
-      return renderNumberUnitInput(entry, prop, value, onCommit);
-    case "number":
-      return renderNumberInput(entry, prop, value, onCommit);
-    case "select":
-      return renderSelectInput(entry, prop, value, onCommit);
-    case "combobox":
-      return renderComboboxInput(entry, prop, value, onCommit);
-    default:
-      return renderTextInput(prop, value, onCommit);
-  }
+  return _widgetForType(type, entry, prop, value, onCommit, {
+    placeholder: opts.placeholder || cssInitialMap.get(prop) || "",
+    renderSelect: renderSelectInput,
+    renderCombobox: renderComboboxInput,
+  });
 }
 
 function renderStyleRow(
@@ -6531,31 +6645,20 @@ function renderStyleRow(
   /** @type {any} */ onDelete,
   /** @type {any} */ isWarning,
   /** @type {any} */ gridMode,
+  /** @type {any} */ inheritedValue,
 ) {
   const type = inferInputType(entry);
   const hasVal = value !== undefined && value !== "";
-  return html`
-    <div
-      class=${classMap({ "style-row": true, "style-row--warning": isWarning })}
-      data-prop=${prop}
-      style=${gridMode && entry.$span === 2 ? "grid-column: 1 / -1" : ""}
-    >
-      <div class="style-row-label">
-        ${hasVal
-          ? html`<span
-              class="set-dot"
-              title="Clear ${prop}"
-              @click=${(/** @type {any} */ e) => {
-                e.stopPropagation();
-                onDelete();
-              }}
-            ></span>`
-          : nothing}
-        <sp-field-label size="s" title=${prop}>${propLabel(entry, prop)}</sp-field-label>
-      </div>
-      ${widgetForType(type, entry, prop, value, onCommit)}
-    </div>
-  `;
+  const placeholder = !hasVal && inheritedValue ? String(inheritedValue) : "";
+  return renderFieldRow({
+    prop,
+    label: propLabel(entry, prop),
+    hasValue: hasVal,
+    onClear: onDelete,
+    widget: widgetForType(type, entry, prop, value, onCommit, { placeholder }),
+    span: gridMode && entry.$span === 2 ? 2 : undefined,
+    warning: isWarning,
+  });
 }
 
 function renderShorthandRow(
@@ -6564,12 +6667,14 @@ function renderShorthandRow(
   /** @type {any} */ style,
   /** @type {any} */ commitFn,
   /** @type {any} */ _deleteFn,
+  /** @type {Record<string, any>} */ inherited = {},
 ) {
   const longhands = getLonghands(shortProp);
   const shortVal = style[shortProp];
-  const hasLonghands = longhands.some((l) => style[l.name] !== undefined);
+  const hasLonghands = longhands.some((/** @type {any} */ l) => style[l.name] !== undefined);
   const isExpanded = S.ui.styleShorthands[shortProp] ?? hasLonghands;
-  const hasAnyVal = shortVal !== undefined || longhands.some((l) => style[l.name] !== undefined);
+  const hasAnyVal =
+    shortVal !== undefined || longhands.some((/** @type {any} */ l) => style[l.name] !== undefined);
 
   return html`
     <div class="style-row" data-prop=${shortProp}>
@@ -6596,8 +6701,12 @@ function renderShorthandRow(
           size="s"
           .value=${live(shortVal || "")}
           placeholder=${!shortVal && hasLonghands
-            ? longhands.map((l) => style[l.name] || "0").join(" ")
-            : ""}
+            ? longhands.map((/** @type {any} */ l) => style[l.name] || "0").join(" ")
+            : !shortVal && inherited[shortProp]
+              ? inherited[shortProp]
+              : !shortVal && longhands.some((/** @type {any} */ l) => inherited[l.name])
+                ? longhands.map((/** @type {any} */ l) => inherited[l.name] || "0").join(" ")
+                : ""}
           @input=${debouncedStyleCommit(`short:${shortProp}`, 400, (/** @type {any} */ e) => {
             let s = S;
             for (const l of longhands) {
@@ -6612,14 +6721,7 @@ function renderShorthandRow(
           quiet
           @click=${(/** @type {any} */ e) => {
             e.stopPropagation();
-            S = {
-              ...S,
-              ui: {
-                ...S.ui,
-                styleShorthands: { ...S.ui.styleShorthands, [shortProp]: !isExpanded },
-              },
-            };
-            renderRightPanel();
+            updateUi("styleShorthands", { ...S.ui.styleShorthands, [shortProp]: !isExpanded });
           }}
         >
           ${isExpanded
@@ -6629,33 +6731,74 @@ function renderShorthandRow(
       </div>
     </div>
     ${isExpanded
-      ? longhands.map(({ name, entry: lEntry }) => {
-          const lVal = style[name] ?? "";
-          return html`
-            <div class="style-row style-row--child" data-prop=${name}>
-              <div class="style-row-label">
-                ${lVal !== undefined && lVal !== ""
-                  ? html`<span
-                      class="set-dot"
-                      title="Clear ${name}"
-                      @click=${(/** @type {any} */ e) => {
-                        e.stopPropagation();
-                        update(commitFn(S, name, undefined));
-                      }}
-                    ></span>`
-                  : nothing}
-                <sp-field-label size="s" title=${name}>${propLabel(lEntry, name)}</sp-field-label>
-              </div>
-              ${widgetForType(
-                inferInputType(lEntry),
-                lEntry,
-                name,
-                lVal,
-                (/** @type {any} */ newVal) => update(commitFn(S, name, newVal || undefined)),
-              )}
-            </div>
-          `;
-        })
+      ? (() => {
+          const isBorderSide = entry.$shorthandType === "border-side";
+          const expanded = shortVal
+            ? isBorderSide
+              ? expandBorderSide(shortVal)
+              : expandShorthand(shortVal, longhands.length)
+            : null;
+          const compress = isBorderSide ? compressBorderSide : compressShorthand;
+          const emptyVal = isBorderSide ? "" : "0";
+          return longhands.map(
+            (/** @type {any} */ { name, entry: lEntry }, /** @type {any} */ idx) => {
+              const lVal = style[name] ?? (expanded ? expanded[idx] : "");
+              return html`
+                <div class="style-row style-row--child" data-prop=${name}>
+                  <div class="style-row-label">
+                    ${lVal !== undefined && lVal !== ""
+                      ? html`<span
+                          class="set-dot"
+                          title="Clear ${name}"
+                          @click=${(/** @type {any} */ e) => {
+                            e.stopPropagation();
+                            // Recompose shorthand with this longhand cleared
+                            const vals = longhands.map(
+                              (/** @type {any} */ l, /** @type {any} */ i) =>
+                                i === idx
+                                  ? emptyVal
+                                  : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
+                            );
+                            let s = S;
+                            for (const l of longhands) {
+                              if (style[l.name] !== undefined) s = commitFn(s, l.name, undefined);
+                            }
+                            s = commitFn(s, shortProp, compress(vals));
+                            update(s);
+                          }}
+                        ></span>`
+                      : nothing}
+                    <sp-field-label size="s" title=${name}
+                      >${propLabel(lEntry, name)}</sp-field-label
+                    >
+                  </div>
+                  ${widgetForType(
+                    inferInputType(lEntry),
+                    lEntry,
+                    name,
+                    lVal,
+                    (/** @type {any} */ newVal) => {
+                      // Recompose shorthand with this longhand updated
+                      const vals = longhands.map((/** @type {any} */ l, /** @type {any} */ i) =>
+                        i === idx
+                          ? newVal || emptyVal
+                          : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
+                      );
+                      let s = S;
+                      for (const l of longhands) {
+                        if (style[l.name] !== undefined) s = commitFn(s, l.name, undefined);
+                      }
+                      s = commitFn(s, shortProp, compress(vals));
+                      update(s);
+                      renderRightPanel();
+                    },
+                    { placeholder: !lVal && inherited[name] ? String(inherited[name]) : "" },
+                  )}
+                </div>
+              `;
+            },
+          );
+        })()
       : nothing}
   `;
 }
@@ -6674,30 +6817,20 @@ function styleSidebarTemplate(
   const mediaTabsT =
     mediaNames.length > 0
       ? html`
-          <sp-tabs size="s">
-            <sp-tab
-              label="Base"
-              value="base"
-              ?selected=${activeTab === null}
-              @click=${() => {
-                S = { ...S, ui: { ...S.ui, activeMedia: null } };
-                updateActivePanelHeaders();
-                renderRightPanel();
-              }}
-            ></sp-tab>
+          <sp-tabs
+            size="s"
+            selected=${activeTab || "base"}
+            @change=${(/** @type {any} */ e) => {
+              const val = e.target.selected;
+              const newMedia = val === "base" ? null : val;
+              if (newMedia !== S.ui.activeMedia) {
+                updateUi("activeMedia", newMedia);
+              }
+            }}
+          >
+            <sp-tab label="Base" value="base"></sp-tab>
             ${mediaNames.map(
-              (name) => html`
-                <sp-tab
-                  label=${mediaDisplayName(name)}
-                  value=${name}
-                  ?selected=${activeTab === name}
-                  @click=${() => {
-                    S = { ...S, ui: { ...S.ui, activeMedia: name } };
-                    updateActivePanelHeaders();
-                    renderRightPanel();
-                  }}
-                ></sp-tab>
-              `,
+              (name) => html` <sp-tab label=${mediaDisplayName(name)} value=${name}></sp-tab> `,
             )}
           </sp-tabs>
         `
@@ -6743,8 +6876,7 @@ function styleSidebarTemplate(
               inp.remove();
               picker.style.display = "";
               if (accept && v && isNestedSelector(v)) {
-                S = { ...S, ui: { ...S.ui, activeSelector: v } };
-                renderRightPanel();
+                updateUi("activeSelector", v);
               }
             };
             inp.addEventListener("keydown", (ev) => {
@@ -6755,8 +6887,7 @@ function styleSidebarTemplate(
             return;
           }
           const newSelector = val === "__base__" ? null : val;
-          S = { ...S, ui: { ...S.ui, activeSelector: newSelector } };
-          renderRightPanel();
+          updateUi("activeSelector", newSelector);
         }}
       >
         <sp-menu-item value="__base__">(base)</sp-menu-item>
@@ -6807,10 +6938,15 @@ function styleSidebarTemplate(
       updateStyle(s, S.selection, prop, val);
   }
 
+  // ── Compute inherited style from higher breakpoints ──────────────────────
+  /** @type {Record<string, any>} */
+  const inheritedStyle = computeInheritedStyle(style, mediaNames, activeTab, activeSelector);
+
   // Auto-open sections that have properties
   const newSections = autoOpenSections({ style: activeStyle }, S.ui.styleSections);
   if (JSON.stringify(newSections) !== JSON.stringify(S.ui.styleSections)) {
-    S = { ...S, ui: { ...S.ui, styleSections: newSections } };
+    session = { ...session, ui: { ...session.ui, styleSections: newSections } };
+    S = toFlat(doc, session);
   }
 
   // Partition properties into sections
@@ -6842,7 +6978,9 @@ function styleSidebarTemplate(
       const sectionActiveProps = entries.filter((/** @type {any} */ { prop, entry }) => {
         if (activeStyle[prop] !== undefined) return true;
         if (inferInputType(entry) === "shorthand") {
-          return getLonghands(prop).some((l) => activeStyle[l.name] !== undefined);
+          return getLonghands(prop).some(
+            (/** @type {any} */ l) => activeStyle[l.name] !== undefined,
+          );
         }
         return false;
       });
@@ -6857,9 +6995,12 @@ function styleSidebarTemplate(
 
         if (type === "shorthand") {
           const longhands = getLonghands(prop);
-          const hasAny = hasVal || longhands.some((l) => activeStyle[l.name] !== undefined);
+          const hasAny =
+            hasVal || longhands.some((/** @type {any} */ l) => activeStyle[l.name] !== undefined);
           if (!hasAny && !condMet) continue;
-          rows.push(renderShorthandRow(prop, entry, activeStyle, commitStyle, () => {}));
+          rows.push(
+            renderShorthandRow(prop, entry, activeStyle, commitStyle, () => {}, inheritedStyle),
+          );
         } else {
           const isWarning = hasVal && !condMet;
           if (hasVal || condMet) {
@@ -6872,6 +7013,7 @@ function styleSidebarTemplate(
                 () => update(commitStyle(S, prop, undefined)),
                 isWarning,
                 sec.$layout === "grid",
+                inheritedStyle[prop],
               ),
             );
           }
@@ -6885,10 +7027,7 @@ function styleSidebarTemplate(
           label=${sec.label}
           .open=${isOpen}
           @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-            S = {
-              ...S,
-              ui: { ...S.ui, styleSections: { ...S.ui.styleSections, [sec.key]: e.target.open } },
-            };
+            updateUi("styleSections", { ...S.ui.styleSections, [sec.key]: e.target.open });
           }}
         >
           ${sectionActiveProps.length > 0
@@ -6929,10 +7068,7 @@ function styleSidebarTemplate(
       label="Custom"
       .open=${customIsOpen}
       @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-        S = {
-          ...S,
-          ui: { ...S.ui, styleSections: { ...S.ui.styleSections, other: e.target.open } },
-        };
+        updateUi("styleSections", { ...S.ui.styleSections, other: e.target.open });
       }}
     >
       <div>
@@ -7003,7 +7139,7 @@ function styleSidebarTemplate(
 
 /** Top-level Style panel — returns a lit-html template */
 function renderStylePanelTemplate() {
-  if (canvasMode === "stylebook" && S.ui.stylebookSelection) {
+  if (canvasMode === "settings" && S.ui.stylebookSelection) {
     const node = S.document;
     if (!node) return html`<div class="empty-state">No document loaded</div>`;
     return html`
@@ -7227,8 +7363,7 @@ function _renderSourceView(/** @type {any} */ container) {
           @blur=${(/** @type {any} */ e) => {
             try {
               const parsed = JSON.parse(e.target.value);
-              S = { ...S, document: parsed, dirty: true };
-              render();
+              update({ ...S, document: parsed, dirty: true });
             } catch {}
           }}
         ></textarea>
@@ -7253,29 +7388,31 @@ function renderFunctionEditor() {
   const editing = S.ui.editingFunction;
 
   // If editor already exists and matches current target, just sync value
-  if (functionEditor && functionEditor._editingTarget === JSON.stringify(editing)) {
+  if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
     const body = getFunctionBody(editing);
-    const currentVal = functionEditor.getValue();
+    const currentVal = view.functionEditor.getValue();
     if (currentVal !== body) {
-      functionEditor._ignoreNextChange = true;
-      functionEditor.setValue(body);
+      view.functionEditor._ignoreNextChange = true;
+      view.functionEditor.setValue(body);
     }
     return;
   }
 
   // Dispose previous editors
-  if (functionEditor) {
-    functionEditor.dispose();
-    functionEditor = null;
+  if (view.functionEditor) {
+    view.functionEditor.dispose();
+    view.functionEditor = null;
   }
-  if (monacoEditor) {
-    monacoEditor.dispose();
-    monacoEditor = null;
+  if (view.monacoEditor) {
+    view.monacoEditor.dispose();
+    view.monacoEditor = null;
   }
 
-  // Clean up canvas DnD
-  for (const fn of canvasDndCleanups) fn();
-  canvasDndCleanups = [];
+  // Clean up canvas DnD and event handlers
+  for (const fn of view.canvasDndCleanups) fn();
+  view.canvasDndCleanups = [];
+  for (const fn of view.canvasEventCleanups) fn();
+  view.canvasEventCleanups = [];
   canvasPanels.length = 0;
 
   litRender(nothing, canvasWrap);
@@ -7300,7 +7437,7 @@ function renderFunctionEditor() {
   const body = getFunctionBody(editing);
   const args = getFunctionArgs(editing, S);
 
-  functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
+  view.functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
     value: body,
     language: "javascript",
     theme: "vs-dark",
@@ -7313,17 +7450,18 @@ function renderFunctionEditor() {
     wordWrap: "on",
     tabSize: 2,
   });
-  functionEditor._editingTarget = JSON.stringify(editing);
+  view.functionEditor._editingTarget = JSON.stringify(editing);
 
   // Format on open — show pretty-printed code, then run initial lint
   codeService("format", { code: body, args }).then((result) => {
-    if (result?.code != null && functionEditor) {
-      functionEditor._ignoreNextChange = true;
-      functionEditor.setValue(result.code);
+    if (result?.code != null && view.functionEditor) {
+      view.functionEditor._ignoreNextChange = true;
+      view.functionEditor.setValue(result.code);
     }
   });
   codeService("lint", { code: body, args }).then((result) => {
-    if (result?.diagnostics && functionEditor) setLintMarkers(functionEditor, result.diagnostics);
+    if (result?.diagnostics && view.functionEditor)
+      setLintMarkers(view.functionEditor, result.diagnostics);
   });
 
   // Debounced sync back to state + lint on edit
@@ -7332,15 +7470,15 @@ function renderFunctionEditor() {
   /** @type {any} */
   let lintDebounce;
   let lintGen = 0;
-  functionEditor.onDidChangeModelContent(() => {
-    if (functionEditor._ignoreNextChange) {
-      functionEditor._ignoreNextChange = false;
+  view.functionEditor.onDidChangeModelContent(() => {
+    if (view.functionEditor._ignoreNextChange) {
+      view.functionEditor._ignoreNextChange = false;
       return;
     }
 
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
-      const newBody = functionEditor.getValue();
+      const newBody = view.functionEditor.getValue();
       if (editing.type === "def") {
         update(updateDef(S, editing.defName, { body: newBody }));
       } else if (editing.type === "event") {
@@ -7360,11 +7498,11 @@ function renderFunctionEditor() {
     clearTimeout(lintDebounce);
     lintDebounce = setTimeout(() => {
       const gen = ++lintGen;
-      const currentCode = functionEditor.getValue();
+      const currentCode = view.functionEditor.getValue();
       codeService("lint", { code: currentCode, args }).then((result) => {
         if (gen !== lintGen) return;
-        if (result?.diagnostics && functionEditor)
-          setLintMarkers(functionEditor, result.diagnostics);
+        if (result?.diagnostics && view.functionEditor)
+          setLintMarkers(view.functionEditor, result.diagnostics);
       });
     }, 750);
   });
@@ -7381,10 +7519,9 @@ function getFunctionBody(/** @type {any} */ editing) {
 }
 
 // Register Monaco JS completion provider for state scope variables (once)
-let _completionRegistered = false;
 function registerFunctionCompletions() {
-  if (_completionRegistered) return;
-  _completionRegistered = true;
+  if (view._completionRegistered) return;
+  view._completionRegistered = true;
   monaco.languages.registerCompletionItemProvider("javascript", {
     triggerCharacters: ["."],
     provideCompletionItems(model, position) {
@@ -7414,166 +7551,10 @@ function registerFunctionCompletions() {
   });
 }
 
-// ─── Toolbar ──────────────────────────────────────────────────────────────────
+// ─── Toolbar (delegated to panels/toolbar.js) ────────────────────────────────
 
 function renderToolbar() {
-  const hasStack = S.documentStack && S.documentStack.length > 0;
-  const hasFunc = !!S.ui.editingFunction;
-
-  // Breadcrumb template
-  const breadcrumbTpl =
-    hasStack || hasFunc
-      ? html`
-          <div class="breadcrumb">
-            <sp-action-button
-              size="s"
-              title=${hasFunc ? "Close function editor" : "Return to parent document"}
-              @click=${hasFunc ? closeFunctionEditor : navigateBack}
-            >
-              ${toolbarIconMap["sp-icon-back"]}Back
-            </sp-action-button>
-            ${hasStack
-              ? S.documentStack.map(
-                  (/** @type {any} */ frame) => html`
-                    <span class="breadcrumb-item"
-                      >${frame.documentPath?.split("/").pop() || "untitled"}</span
-                    >
-                    <span class="breadcrumb-sep"> › </span>
-                  `,
-                )
-              : nothing}
-            <span
-              class="breadcrumb-item${hasFunc ? " clickable" : " current"}"
-              @click=${hasFunc ? closeFunctionEditor : nothing}
-            >
-              ${S.documentPath?.split("/").pop() || S.document.tagName || "document"}
-            </span>
-            ${hasFunc
-              ? html`
-                  <span class="breadcrumb-sep"> › </span>
-                  <span class="breadcrumb-item current"
-                    >${S.ui.editingFunction.type === "def"
-                      ? `ƒ ${S.ui.editingFunction.defName}`
-                      : `ƒ ${S.ui.editingFunction.eventKey}`}</span
-                  >
-                `
-              : nothing}
-          </div>
-        `
-      : nothing;
-
-  // Feature toggles
-  const { featureQueries } = parseMediaEntries(getEffectiveMedia(S.document.$media));
-  const togglesTpl =
-    featureQueries.length > 0
-      ? html`
-          <sp-action-group compact size="s">
-            ${featureQueries.map(
-              ({ name, query }) => html`
-                <sp-action-button
-                  toggles
-                  size="s"
-                  title=${query}
-                  ?selected=${!!S.ui.featureToggles[name]}
-                  @click=${() => {
-                    const newToggles = {
-                      ...S.ui.featureToggles,
-                      [name]: !S.ui.featureToggles[name],
-                    };
-                    S = { ...S, ui: { ...S.ui, featureToggles: newToggles } };
-                    renderCanvas();
-                    renderOverlays();
-                    renderToolbar();
-                  }}
-                >
-                  ${mediaDisplayName(name)}
-                </sp-action-button>
-              `,
-            )}
-          </sp-action-group>
-        `
-      : nothing;
-
-  // Mode switcher
-  const modes = [
-    { key: "edit", label: "Edit", iconTag: "sp-icon-edit" },
-    { key: "design", label: "Design", iconTag: "sp-icon-artboard" },
-    { key: "preview", label: "Preview", iconTag: "sp-icon-preview" },
-    { key: "source", label: "Code", iconTag: "sp-icon-code" },
-    { key: "stylebook", label: "Stylebook", iconTag: "sp-icon-brush" },
-  ];
-
-  const modeSwitcherTpl = html`
-    <sp-action-group selects="single" size="s" compact>
-      ${modes.map(
-        (m) => html`
-          <sp-action-button
-            size="s"
-            ?selected=${canvasMode === m.key}
-            @click=${() => {
-              if (canvasMode === m.key) return;
-              if (S.ui.editingFunction) {
-                if (functionEditor) {
-                  functionEditor.dispose();
-                  functionEditor = null;
-                }
-                S = { ...S, ui: { ...S.ui, editingFunction: null } };
-              }
-              canvasMode = m.key;
-              panX = 0;
-              panY = 0;
-              renderCanvas();
-              renderOverlays();
-              renderToolbar();
-              renderLeftPanel();
-              if (m.key === "stylebook") {
-                S = { ...S, ui: { ...S.ui, rightTab: "style" } };
-                renderRightPanel();
-              }
-            }}
-          >
-            ${toolbarIconMap[m.iconTag]}${m.label}
-          </sp-action-button>
-        `,
-      )}
-    </sp-action-group>
-  `;
-
-  const tpl = html`
-    <sp-action-group compact size="s">
-      ${tbBtnTpl("Open Project", openProject, "sp-icon-folder-open")}
-      ${tbBtnTpl("Open File", openFile, "sp-icon-document")}
-      ${tbBtnTpl("Save", saveFile, "sp-icon-save-floppy")}
-      ${S.fileHandle ? html`<span class="tb-filename">${S.fileHandle.name}</span>` : nothing}
-      ${S.dirty ? html`<span class="tb-dirty">●</span>` : nothing}
-    </sp-action-group>
-    ${breadcrumbTpl}
-    <sp-action-group compact size="s">
-      ${tbBtnTpl("Undo", () => update(undo(S)), "sp-icon-undo")}
-      ${tbBtnTpl("Redo", () => update(redo(S)), "sp-icon-redo")}
-    </sp-action-group>
-    <sp-action-group compact size="s">
-      ${tbBtnTpl(
-        "Duplicate",
-        () => {
-          if (S.selection) update(duplicateNode(S, S.selection));
-        },
-        "sp-icon-duplicate",
-      )}
-      ${tbBtnTpl(
-        "Delete",
-        () => {
-          if (S.selection) update(removeNode(S, S.selection));
-        },
-        "sp-icon-delete",
-      )}
-    </sp-action-group>
-    ${togglesTpl}
-    <div class="tb-spacer"></div>
-    ${modeSwitcherTpl}
-  `;
-
-  litRender(tpl, toolbar);
+  toolbarPanel.render();
 }
 
 // ─── File Operations (delegated to file-ops.js) ─────────────────────────────
@@ -7591,13 +7572,16 @@ function fileOpsCtx() {
 function openFile() {
   return _openFile(fileOpsCtx());
 }
-function loadMarkdown(/** @type {any} */ source, /** @type {any} */ fileHandle) {
-  const ns = _loadMarkdown(source, fileHandle);
+async function loadMarkdown(/** @type {any} */ source, /** @type {any} */ fileHandle) {
+  const ns = await _loadMarkdown(source, fileHandle);
   S = ns;
 }
 function saveFile() {
   return _saveFile(fileOpsCtx());
 }
+function exportFile() {
+  return _exportFile(fileOpsCtx());
+}
 
 // ─── File tree (delegated to files.js) ───────────────────────────────────────
 
@@ -7620,7 +7604,12 @@ function renderFilesTemplate() {
 function openFileFromTree(/** @type {any} */ path) {
   return _openFileFromTree(
     {
-      S,
+      get S() {
+        return S;
+      },
+      set S(v) {
+        S = v;
+      },
       commit: (/** @type {any} */ ns) => {
         S = ns;
       },
@@ -7638,16 +7627,16 @@ initShortcuts(() => ({
     S = ns;
   },
   canvasMode,
-  panX,
-  panY,
+  panX: view.panX,
+  panY: view.panY,
   setPan: (x, y) => {
-    panX = x;
-    panY = y;
-    needsCenter = false;
+    view.panX = x;
+    view.panY = y;
+    view.needsCenter = false;
   },
   applyTransform,
   positionZoomIndicator,
-  componentInlineEdit,
+  componentInlineEdit: view.componentInlineEdit,
   saveFile,
   openProject,
   enterEditOnPath(path) {
@@ -7666,20 +7655,18 @@ initShortcuts(() => ({
 // ─── Autosave (registered as update middleware) ──────────────────────────────
 
 /** @type {any} */
-let autosaveTimer;
 const AUTO_SAVE_DELAY = 2000;
 
 function scheduleAutosave() {
   if (!S.fileHandle || !S.dirty) return;
-  clearTimeout(autosaveTimer);
-  autosaveTimer = setTimeout(async () => {
+  clearTimeout(view.autosaveTimer);
+  view.autosaveTimer = setTimeout(async () => {
     if (S.fileHandle && S.dirty && "createWritable" in S.fileHandle) {
       try {
         const writable = await S.fileHandle.createWritable();
         await writable.write(JSON.stringify(S.document, null, 2));
         await writable.close();
-        S = { ...S, dirty: false };
-        renderToolbar();
+        update({ ...S, dirty: false });
         statusMessage("Auto-saved");
       } catch {}
     }
@@ -7689,4 +7676,3 @@ function scheduleAutosave() {
 addUpdateMiddleware((/** @type {any} */ state) => {
   if (state.dirty) scheduleAutosave();
 });
-// trigger rebuild