@jxsuite/studio 0.11.0 → 0.13.0

package/src/panels/style-panel.js

@@ -7,18 +7,19 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 import {
-  getState,
-  update,
-  updateUi,
   getNodeAtPath,
-  updateStyle,
-  updateMediaStyle,
-  updateNestedStyle,
-  updateMediaNestedStyle,
   COMMON_SELECTORS,
   isNestedSelector,
   debouncedStyleCommit,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import {
+  transactDoc,
+  mutateUpdateStyle,
+  mutateUpdateMediaStyle,
+  mutateUpdateNestedStyle,
+  mutateUpdateMediaNestedStyle,
+} from "../tabs/transact.js";
 import { inferInputType, propLabel } from "../utils/studio-utils.js";
 import { renderFieldRow } from "../ui/field-row.js";
 import { parseMediaEntries } from "../utils/canvas-media.js";
@@ -65,15 +66,15 @@ function renderStyleRow(
 }
 
 /**
- * @param {any} shortProp @param {any} entry @param {any} style @param {any} commitFn
+ * @param {any} shortProp @param {any} entry @param {any} style @param {any} mutateFn
  * @param {any} _deleteFn @param {Record<string, any>} inherited
  */
-function renderShorthandRow(shortProp, entry, style, commitFn, _deleteFn, inherited = {}) {
-  const S = getState();
+function renderShorthandRow(shortProp, entry, style, mutateFn, _deleteFn, inherited = {}) {
+  const tab = activeTab.value;
   const longhands = getLonghands(shortProp);
   const shortVal = style[shortProp];
   const hasLonghands = longhands.some((/** @type {any} */ l) => style[l.name] !== undefined);
-  const isExpanded = S.ui.styleShorthands[shortProp] ?? hasLonghands;
+  const isExpanded = tab.session.ui.styleShorthands[shortProp] ?? hasLonghands;
   const hasAnyVal =
     shortVal !== undefined || longhands.some((/** @type {any} */ l) => style[l.name] !== undefined);
 
@@ -86,12 +87,12 @@ function renderShorthandRow(shortProp, entry, style, commitFn, _deleteFn, inheri
               title="Clear ${shortProp}"
               @click=${(/** @type {any} */ e) => {
                 e.stopPropagation();
-                let s = getState();
-                if (shortVal !== undefined) s = commitFn(s, shortProp, undefined);
-                for (const l of longhands) {
-                  if (style[l.name] !== undefined) s = commitFn(s, l.name, undefined);
-                }
-                update(s);
+                transactDoc(activeTab.value, (t) => {
+                  if (shortVal !== undefined) mutateFn(t, shortProp, undefined);
+                  for (const l of longhands) {
+                    if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
+                  }
+                });
               }}
             ></span>`
           : nothing}
@@ -109,12 +110,12 @@ function renderShorthandRow(shortProp, entry, style, commitFn, _deleteFn, inheri
                 ? longhands.map((/** @type {any} */ l) => inherited[l.name] || "0").join(" ")
                 : ""}
           @input=${debouncedStyleCommit(`short:${shortProp}`, 400, (/** @type {any} */ e) => {
-            let s = getState();
-            for (const l of longhands) {
-              if (style[l.name] !== undefined) s = commitFn(s, l.name, undefined);
-            }
-            s = commitFn(s, shortProp, e.target.value || undefined);
-            update(s);
+            transactDoc(activeTab.value, (t) => {
+              for (const l of longhands) {
+                if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
+              }
+              mutateFn(t, shortProp, e.target.value || undefined);
+            });
           })}
         ></sp-textfield>
         <sp-action-button
@@ -122,10 +123,10 @@ function renderShorthandRow(shortProp, entry, style, commitFn, _deleteFn, inheri
           quiet
           @click=${(/** @type {any} */ e) => {
             e.stopPropagation();
-            updateUi("styleShorthands", {
-              ...getState().ui.styleShorthands,
+            activeTab.value.session.ui.styleShorthands = {
+              ...activeTab.value.session.ui.styleShorthands,
               [shortProp]: !isExpanded,
-            });
+            };
           }}
         >
           ${isExpanded
@@ -162,12 +163,12 @@ function renderShorthandRow(shortProp, entry, style, commitFn, _deleteFn, inheri
                                   ? emptyVal
                                   : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
                             );
-                            let s = getState();
-                            for (const l of longhands) {
-                              if (style[l.name] !== undefined) s = commitFn(s, l.name, undefined);
-                            }
-                            s = commitFn(s, shortProp, compress(vals));
-                            update(s);
+                            transactDoc(activeTab.value, (t) => {
+                              for (const l of longhands) {
+                                if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
+                              }
+                              mutateFn(t, shortProp, compress(vals));
+                            });
                           }}
                         ></span>`
                       : nothing}
@@ -186,12 +187,12 @@ function renderShorthandRow(shortProp, entry, style, commitFn, _deleteFn, inheri
                           ? newVal || emptyVal
                           : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
                       );
-                      let s = getState();
-                      for (const l of longhands) {
-                        if (style[l.name] !== undefined) s = commitFn(s, l.name, undefined);
-                      }
-                      s = commitFn(s, shortProp, compress(vals));
-                      update(s);
+                      transactDoc(activeTab.value, (t) => {
+                        for (const l of longhands) {
+                          if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
+                        }
+                        mutateFn(t, shortProp, compress(vals));
+                      });
                     },
                     { placeholder: !lVal && inherited[name] ? String(inherited[name]) : "" },
                   )}
@@ -212,11 +213,12 @@ function renderShorthandRow(shortProp, entry, style, commitFn, _deleteFn, inheri
  * @param {any} activeSelector
  */
 function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
-  const S = getState();
+  const tab = activeTab.value;
+  const sel = /** @type {import("../state.js").JxPath} */ (tab.session.selection);
   const style = node.style || {};
-  const { sizeBreakpoints } = parseMediaEntries(getEffectiveMedia(S.document.$media));
+  const { sizeBreakpoints } = parseMediaEntries(getEffectiveMedia(tab.doc.document.$media));
   const mediaNames = sizeBreakpoints.map((bp) => bp.name);
-  const activeTab = activeMediaTab;
+  const mediaTab = activeMediaTab;
 
   // ── Media tabs template ──────────────────────────────────────────────────
   const mediaTabsT =
@@ -224,12 +226,12 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
       ? html`
           <sp-tabs
             size="s"
-            selected=${activeTab || "base"}
+            selected=${mediaTab || "base"}
             @change=${(/** @type {any} */ e) => {
               const val = e.target.selected;
               const newMedia = val === "base" ? null : val;
-              if (newMedia !== S.ui.activeMedia) {
-                updateUi("activeMedia", newMedia);
+              if (newMedia !== tab.session.ui.activeMedia) {
+                tab.session.ui.activeMedia = newMedia;
               }
             }}
           >
@@ -242,7 +244,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
       : nothing;
 
   // ── Selector dropdown ──────────────────────────────────────────────────────
-  const contextStyle = activeTab ? style[`@${activeTab}`] || {} : style;
+  const contextStyle = mediaTab ? style[`@${mediaTab}`] || {} : style;
   const existingSelectors = Object.keys(contextStyle).filter(isNestedSelector);
   const existingSet = new Set(existingSelectors);
   const commonSet = new Set(COMMON_SELECTORS);
@@ -281,7 +283,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
             inp.remove();
             picker.style.display = "";
             if (accept && v && isNestedSelector(v)) {
-              updateUi("activeSelector", v);
+              activeTab.value.session.ui.activeSelector = v;
             }
           };
           inp.addEventListener("keydown", (ev) => {
@@ -292,7 +294,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
           return;
         }
         const newSelector = val === "__base__" ? null : val;
-        updateUi("activeSelector", newSelector);
+        activeTab.value.session.ui.activeSelector = newSelector;
       }}
     >
       <sp-menu-item value="__base__">(base)</sp-menu-item>
@@ -328,14 +330,19 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
         size="s"
         class="style-filter-input"
         placeholder="Filter properties…"
-        .value=${live(S.ui.styleFilter || "")}
-        @input=${(/** @type {any} */ e) => updateUi("styleFilter", e.target.value)}
+        .value=${live(tab.session.ui.styleFilter || "")}
+        @input=${(/** @type {any} */ e) => {
+          activeTab.value.session.ui.styleFilter = e.target.value;
+        }}
       ></sp-textfield>
       <sp-action-button
         size="xs"
         class="style-filter-toggle"
-        ?selected=${S.ui.styleFilterActive}
-        @click=${() => updateUi("styleFilterActive", !S.ui.styleFilterActive)}
+        ?selected=${tab.session.ui.styleFilterActive}
+        @click=${() => {
+          activeTab.value.session.ui.styleFilterActive =
+            !activeTab.value.session.ui.styleFilterActive;
+        }}
       >
         Active
       </sp-action-button>
@@ -345,40 +352,50 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
   // ── Determine the active style object ──────────────────────────────────────
   /** @type {Record<string, any>} */
   let activeStyle;
-  /** @type {any} */
+  /** @type {(prop: any, val: any) => void} */
   let commitStyle;
-  if (activeSelector && activeTab && mediaNames.length > 0) {
-    activeStyle = (style[`@${activeTab}`] || {})[activeSelector] || {};
-    commitStyle = (/** @type {any} */ s, /** @type {any} */ prop, /** @type {any} */ val) =>
-      updateMediaNestedStyle(s, S.selection, activeTab, activeSelector, prop, val);
+  /** @type {(t: any, prop: any, val: any) => void} */
+  let commitMutate;
+  if (activeSelector && mediaTab && mediaNames.length > 0) {
+    activeStyle = (style[`@${mediaTab}`] || {})[activeSelector] || {};
+    commitMutate = (/** @type {any} */ t, /** @type {any} */ prop, /** @type {any} */ val) =>
+      mutateUpdateMediaNestedStyle(t, sel, mediaTab, activeSelector, prop, val);
+    commitStyle = (/** @type {any} */ prop, /** @type {any} */ val) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   } else if (activeSelector) {
     activeStyle = style[activeSelector] || {};
-    commitStyle = (/** @type {any} */ s, /** @type {any} */ prop, /** @type {any} */ val) =>
-      updateNestedStyle(s, S.selection, activeSelector, prop, val);
-  } else if (activeTab !== null && mediaNames.length > 0) {
+    commitMutate = (/** @type {any} */ t, /** @type {any} */ prop, /** @type {any} */ val) =>
+      mutateUpdateNestedStyle(t, sel, activeSelector, prop, val);
+    commitStyle = (/** @type {any} */ prop, /** @type {any} */ val) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
+  } else if (mediaTab !== null && mediaNames.length > 0) {
     activeStyle = {};
-    for (const [p, v] of Object.entries(style[`@${activeTab}`] || {})) {
+    for (const [p, v] of Object.entries(style[`@${mediaTab}`] || {})) {
       if (typeof v !== "object") activeStyle[p] = v;
     }
-    commitStyle = (/** @type {any} */ s, /** @type {any} */ prop, /** @type {any} */ val) =>
-      updateMediaStyle(s, S.selection, activeTab, prop, val);
+    commitMutate = (/** @type {any} */ t, /** @type {any} */ prop, /** @type {any} */ val) =>
+      mutateUpdateMediaStyle(t, sel, mediaTab, prop, val);
+    commitStyle = (/** @type {any} */ prop, /** @type {any} */ val) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   } else {
     activeStyle = {};
     for (const [p, v] of Object.entries(style)) {
       if (typeof v !== "object") activeStyle[p] = v;
     }
-    commitStyle = (/** @type {any} */ s, /** @type {any} */ prop, /** @type {any} */ val) =>
-      updateStyle(s, S.selection, prop, val);
+    commitMutate = (/** @type {any} */ t, /** @type {any} */ prop, /** @type {any} */ val) =>
+      mutateUpdateStyle(t, sel, prop, val);
+    commitStyle = (/** @type {any} */ prop, /** @type {any} */ val) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   }
 
   // ── Compute inherited style from higher breakpoints ──────────────────────
   /** @type {Record<string, any>} */
-  const inheritedStyle = computeInheritedStyle(style, mediaNames, activeTab, activeSelector);
+  const inheritedStyle = computeInheritedStyle(style, mediaNames, mediaTab, activeSelector);
 
   // Auto-open sections that have properties
-  const newSections = autoOpenSections({ style: activeStyle }, S.ui.styleSections);
-  if (JSON.stringify(newSections) !== JSON.stringify(S.ui.styleSections)) {
-    updateUi("styleSections", newSections);
+  const newSections = autoOpenSections({ style: activeStyle }, tab.session.ui.styleSections);
+  if (JSON.stringify(newSections) !== JSON.stringify(tab.session.ui.styleSections)) {
+    tab.session.ui.styleSections = newSections;
   }
 
   // Partition properties into sections
@@ -402,8 +419,8 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
   }
 
   // ── Filter state ─────────────────────────────────────────────────────────
-  const filterText = (S.ui.styleFilter || "").toLowerCase();
-  const filterActive = S.ui.styleFilterActive;
+  const filterText = (tab.session.ui.styleFilter || "").toLowerCase();
+  const filterActive = tab.session.ui.styleFilterActive;
   const isFiltering = filterText.length > 0 || filterActive;
 
   // ── Section templates ────────────────────────────────────────────────────
@@ -449,7 +466,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
             hasVal || longhands.some((/** @type {any} */ l) => activeStyle[l.name] !== undefined);
           if (!hasAny && !condMet) continue;
           rows.push(
-            renderShorthandRow(prop, entry, activeStyle, commitStyle, () => {}, inheritedStyle),
+            renderShorthandRow(prop, entry, activeStyle, commitMutate, () => {}, inheritedStyle),
           );
         } else {
           const isWarning = hasVal && !condMet;
@@ -459,9 +476,8 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
                 entry,
                 prop,
                 val ?? "",
-                (/** @type {any} */ newVal) =>
-                  update(commitStyle(getState(), prop, newVal || undefined)),
-                () => update(commitStyle(getState(), prop, undefined)),
+                (/** @type {any} */ newVal) => commitStyle(prop, newVal || undefined),
+                () => commitStyle(prop, undefined),
                 isWarning,
                 sec.$layout === "grid",
                 inheritedStyle[prop],
@@ -472,14 +488,17 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
       }
 
       if (isFiltering && rows.length === 0) return nothing;
-      const isOpen = isFiltering ? true : (S.ui.styleSections[sec.key] ?? false);
+      const isOpen = isFiltering ? true : (tab.session.ui.styleSections[sec.key] ?? false);
 
       return html`
         <sp-accordion-item
           label=${sec.label}
           .open=${isOpen}
           @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-            updateUi("styleSections", { ...getState().ui.styleSections, [sec.key]: e.target.open });
+            activeTab.value.session.ui.styleSections = {
+              ...activeTab.value.session.ui.styleSections,
+              [sec.key]: e.target.open,
+            };
           }}
         >
           ${sectionActiveProps.length > 0
@@ -492,17 +511,17 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
                     @click=${(/** @type {any} */ e) => {
                       e.stopPropagation();
                       e.preventDefault();
-                      let s = getState();
-                      for (const { prop, entry } of sectionActiveProps) {
-                        if (activeStyle[prop] !== undefined) s = commitStyle(s, prop, undefined);
-                        if (inferInputType(entry) === "shorthand") {
-                          for (const l of getLonghands(prop)) {
-                            if (activeStyle[l.name] !== undefined)
-                              s = commitStyle(s, l.name, undefined);
+                      transactDoc(activeTab.value, (t) => {
+                        for (const { prop, entry } of sectionActiveProps) {
+                          if (activeStyle[prop] !== undefined) commitMutate(t, prop, undefined);
+                          if (inferInputType(entry) === "shorthand") {
+                            for (const l of getLonghands(prop)) {
+                              if (activeStyle[l.name] !== undefined)
+                                commitMutate(t, l.name, undefined);
+                            }
                           }
                         }
-                      }
-                      update(s);
+                      });
                     }}
                   ></span>
                 </span>
@@ -515,13 +534,16 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
 
   // ── Custom section ─────────────────────────────────────────────────────────
   const cssInitialMap = getCssInitialMap();
-  const customIsOpen = S.ui.styleSections.other ?? otherProps.length > 0;
+  const customIsOpen = tab.session.ui.styleSections.other ?? otherProps.length > 0;
   const customSectionT = html`
     <sp-accordion-item
       label="Custom"
       .open=${customIsOpen}
       @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
-        updateUi("styleSections", { ...getState().ui.styleSections, other: e.target.open });
+        activeTab.value.session.ui.styleSections = {
+          ...activeTab.value.session.ui.styleSections,
+          other: e.target.open,
+        };
       }}
     >
       <div>
@@ -535,9 +557,10 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
                 @change=${(/** @type {any} */ e) => {
                   const newProp = e.target.value.trim();
                   if (newProp && newProp !== prop) {
-                    let s = commitStyle(getState(), prop, undefined);
-                    s = commitStyle(s, newProp, String(activeStyle[prop]));
-                    update(s);
+                    transactDoc(activeTab.value, (t) => {
+                      commitMutate(t, prop, undefined);
+                      commitMutate(t, newProp, String(activeStyle[prop]));
+                    });
                   }
                 }}
               ></sp-textfield>
@@ -547,14 +570,10 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
                 .value=${live(String(activeStyle[prop]))}
                 placeholder=${ifDefined(cssInitialMap.get(prop))}
                 @input=${debouncedStyleCommit(`custom:${prop}`, 400, (/** @type {any} */ e) => {
-                  update(commitStyle(getState(), prop, e.target.value));
+                  commitStyle(prop, e.target.value);
                 })}
               ></sp-textfield>
-              <sp-action-button
-                size="xs"
-                quiet
-                @click=${() => update(commitStyle(getState(), prop, undefined))}
-              >
+              <sp-action-button size="xs" quiet @click=${() => commitStyle(prop, undefined)}>
                 <sp-icon-close slot="icon"></sp-icon-close>
               </sp-action-button>
             </div>
@@ -571,7 +590,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
                 const prop = e.target.value.trim();
                 if (prop) {
                   const initial = cssInitialMap.get(prop) || "";
-                  update(commitStyle(getState(), prop, initial || ""));
+                  commitStyle(prop, initial || "");
                   e.target.value = "";
                 }
               }
@@ -599,19 +618,23 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderStylePanelTemplate(ctx) {
-  const S = getState();
-  if (ctx.getCanvasMode() === "settings" && S.ui.stylebookSelection) {
-    const node = S.document;
+  const tab = activeTab.value;
+  if (!tab) return html`<div class="empty-state">No document loaded</div>`;
+  if (ctx.getCanvasMode() === "settings" && tab.session.ui.stylebookSelection) {
+    const node = tab.doc.document;
     if (!node) return html`<div class="empty-state">No document loaded</div>`;
     return html`
-      <div class="stylebook-style-header">Styling: &lt;${S.ui.stylebookSelection}&gt;</div>
-      ${styleSidebarTemplate(node, S.ui.activeMedia, S.ui.activeSelector)}
+      <div class="stylebook-style-header">
+        Styling: &lt;${tab.session.ui.stylebookSelection}&gt;
+      </div>
+      ${styleSidebarTemplate(node, tab.session.ui.activeMedia, tab.session.ui.activeSelector)}
     `;
   }
-  if (!S.selection) return html`<div class="empty-state">Select an element to style</div>`;
-  const node = getNodeAtPath(S.document, S.selection);
+  if (!tab.session.selection)
+    return html`<div class="empty-state">Select an element to style</div>`;
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node) return html`<div class="empty-state">Select an element to style</div>`;
-  return styleSidebarTemplate(node, S.ui.activeMedia, S.ui.activeSelector);
+  return styleSidebarTemplate(node, tab.session.ui.activeMedia, tab.session.ui.activeSelector);
 }
 
 /** Single property input row (generic field row helper) */

package/src/panels/stylebook-panel.js

@@ -9,8 +9,6 @@ import { styleMap } from "lit-html/directives/style-map.js";
 
 import {
   getState,
-  update,
-  updateStyle,
   updateSession,
   updateUi,
   canvasWrap,
@@ -18,6 +16,8 @@ import {
   elToPath,
   projectState,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateUpdateStyle } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { defineElement, setSkipServerFunctions } from "@jxsuite/runtime";
 import { componentRegistry } from "../files/components.js";
@@ -272,7 +272,7 @@ export function renderStylebookOverlays() {
   const selectedTag = S.ui.stylebookSelection;
 
   for (const panel of canvasPanels) {
-    const hoverTag = panel._lastHoverTag;
+    const hoverTag = /** @type {any} */ (panel)._lastHoverTag;
     /**
      * @type {{
      *   cls: string;
@@ -691,8 +691,9 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
                 const swatch = /** @type {any} */ (row.querySelector(".sb-var-swatch"));
                 if (swatch) swatch.style.backgroundColor = colorPicker.value;
                 if (!isNew && varName) {
-                  const S = getState();
-                  update(updateStyle(S, [], varName, colorPicker.value));
+                  transactDoc(activeTab.value, (t) =>
+                    mutateUpdateStyle(t, [], varName, colorPicker.value),
+                  );
                 }
               }}
             />
@@ -751,8 +752,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
             const swatch = /** @type {any} */ (row.querySelector(".sb-var-swatch"));
             if (swatch) swatch.style.backgroundColor = v;
             if (!isNew && varName) {
-              const S = getState();
-              update(updateStyle(S, [], varName, v));
+              transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, v));
             }
           }, 400);
         }}
@@ -765,8 +765,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
         const bar = /** @type {any} */ (row.querySelector(".sb-var-size-bar"));
         if (bar) bar.style.width = newVal;
         if (!isNew && varName) {
-          const S = getState();
-          update(updateStyle(S, [], varName, newVal));
+          transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, newVal));
         }
       },
     });
@@ -798,8 +797,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
             const v = textFieldEl.value;
             const fontPrev = /** @type {any} */ (row.querySelector(".sb-var-font-preview"));
             if (fontPrev) fontPrev.style.fontFamily = v;
-            const S = getState();
-            update(updateStyle(S, [], varName, v));
+            transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, v));
           }, 400);
         }}
       ></sp-textfield>
@@ -824,8 +822,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
               const val = getValueFn();
               const generatedVar = friendlyNameToVar(name, catMeta.prefix);
               if (!generatedVar || !val) return;
-              const S = getState();
-              update(updateStyle(S, [], generatedVar, val));
+              transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], generatedVar, val));
             }}
             >Add</sp-action-button
           >
@@ -858,8 +855,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
               class="sb-var-del"
               style="pointer-events:auto"
               @click=${() => {
-                const S = getState();
-                update(updateStyle(S, [], varName, undefined));
+                transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, undefined));
               }}
             >
               <sp-icon-delete slot="icon"></sp-icon-delete>

package/src/panels/tab-strip.js

@@ -0,0 +1,124 @@
+/**
+ * Tab strip — renders open tabs above the canvas area.
+ *
+ * Uses the reactive workspace model: reads from workspace.tabOrder, workspace.tabs,
+ * workspace.activeTabId. Clicks call activateTab/closeTab from workspace.js.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { effect, effectScope } from "../reactivity.js";
+import { workspace, activateTab, closeTab } from "../workspace/workspace.js";
+
+/** @typedef {import("../tabs/tab.js").Tab} Tab */
+
+/** @type {HTMLElement | null} */
+let _host = null;
+
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+/**
+ * Mount the tab strip into the given host element.
+ *
+ * @param {HTMLElement} host
+ */
+export function mount(host) {
+  _host = host;
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      void workspace.tabOrder;
+      void workspace.activeTabId;
+      for (const tab of workspace.tabs.values()) {
+        void tab.doc.dirty;
+        void tab.documentPath;
+      }
+      render();
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+  _host = null;
+}
+
+function render() {
+  if (!_host) return;
+
+  if (workspace.tabOrder.length <= 1) {
+    litRender(nothing, _host);
+    return;
+  }
+
+  litRender(
+    html`
+      <div class="tab-strip">
+        ${workspace.tabOrder.map((id) => {
+          const tab = workspace.tabs.get(id);
+          if (!tab) return nothing;
+          const isActive = id === workspace.activeTabId;
+          const isDirty = tab.doc.dirty;
+          const label = tabLabel(tab);
+          return html`
+            <div
+              class="tab-strip-tab ${isActive ? "active" : ""}"
+              @click=${() => activateTab(id)}
+              @auxclick=${(/** @type {MouseEvent} */ e) => {
+                if (e.button === 1) {
+                  e.preventDefault();
+                  requestClose(id);
+                }
+              }}
+              title=${tab.documentPath || "Untitled"}
+            >
+              <span class="tab-strip-label">${label}</span>
+              ${isDirty ? html`<span class="tab-strip-dirty">●</span>` : nothing}
+              <button
+                class="tab-strip-close"
+                @click=${(/** @type {Event} */ e) => {
+                  e.stopPropagation();
+                  requestClose(id);
+                }}
+              >
+                ×
+              </button>
+            </div>
+          `;
+        })}
+      </div>
+    `,
+    _host,
+  );
+}
+
+/**
+ * Derive a short label from the tab's documentPath.
+ *
+ * @param {Tab} tab
+ * @returns {string}
+ */
+function tabLabel(tab) {
+  const path = tab.documentPath;
+  if (!path) return "Untitled";
+  const parts = path.split("/");
+  return parts[parts.length - 1];
+}
+
+/**
+ * Close a tab, prompting if dirty.
+ *
+ * @param {string} id
+ */
+function requestClose(id) {
+  const tab = workspace.tabs.get(id);
+  if (!tab) return;
+  if (tab.doc.dirty) {
+    const confirmed = window.confirm(
+      `"${tabLabel(tab)}" has unsaved changes. Close without saving?`,
+    );
+    if (!confirmed) return;
+  }
+  closeTab(id);
+}