@jxsuite/studio 0.5.0 → 0.5.2

package/src/studio.js

@@ -37,7 +37,6 @@ import {
   isAncestor,
   canvasWrap,
   leftPanel,
-  rightPanel,
   toolbarEl,
   elToPath,
   canvasPanels,
@@ -55,6 +54,7 @@ import {
   runUpdateMiddleware,
   addPostRenderHook,
   runPostRenderHooks,
+  notify,
   projectState,
   setProjectState,
   updateFrontmatter,
@@ -99,7 +99,12 @@ import {
   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,
@@ -119,6 +124,13 @@ 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 {
@@ -170,7 +182,6 @@ import { renderDataExplorerTemplate } from "./panels/data-explorer.js";
 // 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 { renderFieldRow } from "./ui/field-row.js";
-import { isColorPopoverOpen } from "./ui/color-selector.js";
 import { widgetForType as _widgetForType } from "./ui/widgets.js";
 import { computeInheritedStyle } from "./utils/inherited-style.js";
 import "./ui/panel-resize.js";
@@ -739,9 +750,6 @@ document.body.appendChild(zoomIndicatorHost);
 
 // ─── Module-level UI state (must be before render() call) ─────────────────────
 
-let elementsCollapsed = new Set();
-let elementsFilter = "";
-
 // ─── Bootstrap ────────────────────────────────────────────────────────────────
 
 // Register the dev server platform adapter (PAL) as default if none pre-registered
@@ -804,6 +812,7 @@ registerRenderer("rightPanel", () => rightPanelMod.render());
 registerRenderer("overlays", () => overlaysPanel.render());
 registerRenderer("statusbar", () => renderStatusbar(S));
 setStatusbarRenderer(() => renderStatusbar(S));
+mountStatusbar();
 
 function safeRenderLeftPanel() {
   try {
@@ -853,12 +862,6 @@ setUpdateFn(function _update(/** @type {any} */ newState) {
   const leftUiChanged =
     uiChanged && (prev.ui?.leftTab !== S.ui?.leftTab || prev.ui?.settingsTab !== S.ui?.settingsTab);
 
-  try {
-    renderToolbar();
-  } catch (e) {
-    console.error("renderToolbar error:", e);
-  }
-
   if (docChanged || modeChanged || canvasUiChanged) {
     try {
       renderCanvas();
@@ -874,38 +877,16 @@ setUpdateFn(function _update(/** @type {any} */ newState) {
     updateActivePanelHeaders();
   }
 
-  // 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 = isColorPopoverOpen();
-  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 || selChanged || uiChanged) {
-    safeRenderRightPanel();
-  }
-
-  try {
-    renderOverlays();
-  } catch (e) {
-    console.error("renderOverlays error:", e);
-  }
-  try {
-    renderStatusbar(S);
-  } catch (e) {
-    console.error("renderStatusbar error:", e);
-  }
-
   runPostRenderHooks(prevDoc, prevSel);
   runUpdateMiddleware(S);
+
+  notify({
+    doc: docChanged,
+    selection: selChanged,
+    hover: false,
+    ui: uiChanged,
+    mode: modeChanged,
+  });
 });
 
 // Register session dispatch — lightweight path for selection/hover/ui changes
@@ -934,12 +915,6 @@ setUpdateSessionFn(function _updateSession(/** @type {any} */ patch) {
     uiChanged &&
     (prev.ui?.leftTab !== session.ui?.leftTab || prev.ui?.settingsTab !== session.ui?.settingsTab);
 
-  try {
-    renderToolbar();
-  } catch (e) {
-    console.error("renderToolbar error:", e);
-  }
-
   if (canvasUiChanged) {
     try {
       renderCanvas();
@@ -955,22 +930,10 @@ setUpdateSessionFn(function _updateSession(/** @type {any} */ patch) {
     updateActivePanelHeaders();
   }
 
-  if (selChanged || uiChanged) {
-    safeRenderRightPanel();
-  }
-
-  try {
-    renderOverlays();
-  } catch (e) {
-    console.error("renderOverlays error:", e);
-  }
-  try {
-    renderStatusbar(S);
-  } catch (e) {
-    console.error("renderStatusbar error:", e);
-  }
-
   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
@@ -1084,86 +1047,6 @@ 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.
- *
- * @param {any} el
- * @param {any} styleDef
- * @param {any} activeBreakpoints
- * @param {any} featureToggles
- */
-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 {}
-        }
-      }
-    }
-  }
-}
-
 /**
  * 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
@@ -1174,26 +1057,13 @@ function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles) {
  */
 function applyCanvasMediaOverrides(canvasEl, activeBreakpoints) {
   if (!activeBreakpoints.size) return;
-  for (const el of /** @type {NodeListOf<HTMLElement>} */ (canvasEl.querySelectorAll("*"))) {
-    const path = elToPath.get(el);
-    if (!path) continue;
-    const node = getNodeAtPath(S.document, path);
-    if (!node?.style) continue;
-    for (const [key, val] of Object.entries(node.style)) {
-      if (!key.startsWith("@") || typeof val !== "object") continue;
-      const mediaName = key.slice(1);
-      if (mediaName === "--") continue;
-      if (!activeBreakpoints.has(mediaName)) continue;
-      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 {}
-        }
-      }
-    }
+  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 ───────────────────────────────────────────────────────────────────
@@ -1926,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.
@@ -1946,12 +1815,12 @@ 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";
       }
@@ -2006,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" };
@@ -2127,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();
 }
 
 /**
@@ -2146,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);
     }
   }
@@ -3683,7 +3547,7 @@ function registerLayersDnD() {
             },
             onDragStart() {
               row.classList.add("dragging");
-              layerDragSourceHeight = row.offsetHeight;
+              view.layerDragSourceHeight = row.offsetHeight;
             },
             onDrop() {
               row.classList.remove("dragging");
@@ -3787,8 +3651,6 @@ function registerComponentsDnD() {
 }
 
 /** @type {any} */
-let _currentDropTargetRow = null;
-let layerDragSourceHeight = 0;
 
 /**
  * @param {any} rowEl
@@ -3799,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") {
@@ -3811,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;
@@ -3835,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 = "";
@@ -3850,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() {
@@ -4121,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 }) => {
@@ -4184,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),
           )
       : [];
 
@@ -4193,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">
@@ -4242,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>
@@ -4283,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
@@ -4431,7 +4289,7 @@ function renderSettings() {
   }
 
   // Stylebook tab — existing behavior
-  stylebookElToTag = new WeakMap();
+  view.stylebookElToTag = new WeakMap();
   const rootStyle = getEffectiveStyle(S.document.style);
   const filter = (S.ui.stylebookFilter || "").toLowerCase();
   const customizedOnly = S.ui.stylebookCustomizedOnly;
@@ -4626,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]);
               }
             }
@@ -4673,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]);
             })}
           >
@@ -5154,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
  */
@@ -5175,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);
@@ -5203,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;
@@ -5273,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;
 }
@@ -5571,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 ─────────────────────────────────────────
@@ -6271,8 +6126,6 @@ function renderCustomAttrsFieldsTemplate(
 }
 
 /** Media breakpoint fields template */
-let showAddBreakpointForm = false;
-let addBreakpointPreview = "";
 
 function renderMediaFieldsTemplate(/** @type {any} */ node) {
   const media = node.$media || {};
@@ -6308,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">
@@ -6324,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">
@@ -6346,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));
                     }
                   }}
@@ -6358,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();
                   }}
                 >
@@ -6868,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
@@ -7181,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
@@ -7225,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>
@@ -7679,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) {
@@ -7816,13 +7655,12 @@ 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();