@jxsuite/studio 0.13.0 → 0.15.0

package/src/panels/elements-panel.js

@@ -1,7 +1,7 @@
 /** Elements panel — block/component palette with categorized accordion and search filter. */
 
 import { html, nothing } from "lit-html";
-import { getState, getNodeAtPath } from "../store.js";
+import { getNodeAtPath } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { transactDoc, mutateInsertNode } from "../tabs/transact.js";
 import { view } from "../view.js";
@@ -13,7 +13,7 @@ import { componentRegistry } from "../files/components.js";
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderElementsTemplate(ctx) {
-  const S = getState();
+  const tab = activeTab.value;
 
   const categories = Object.entries(ctx.webdata.elements).map(
     (/** @type {any} */ [category, elements]) => {
@@ -38,12 +38,12 @@ export function renderElementsTemplate(ctx) {
                 class="element-card"
                 data-block-tag=${tag}
                 @click=${() => {
-                  const s = getState();
-                  const parentPath = s.selection || [];
-                  const parent = getNodeAtPath(s.document, parentPath);
+                  const t = activeTab.value;
+                  const parentPath = t?.session.selection || [];
+                  const parent = getNodeAtPath(t?.doc.document, parentPath);
                   const idx = parent?.children ? parent.children.length : 0;
-                  transactDoc(activeTab.value, (t) =>
-                    mutateInsertNode(t, parentPath, idx, structuredClone(def)),
+                  transactDoc(t, (tr) =>
+                    mutateInsertNode(tr, parentPath, idx, structuredClone(def)),
                   );
                 }}
               >
@@ -57,7 +57,7 @@ export function renderElementsTemplate(ctx) {
     },
   );
 
-  const effectiveEls = getEffectiveElements(S.document?.$elements);
+  const effectiveEls = getEffectiveElements(tab?.doc.document?.$elements);
   /** @type {Set<string>} */
   const enabledTags = new Set();
   for (const entry of effectiveEls) {
@@ -105,9 +105,9 @@ export function renderElementsTemplate(ctx) {
                       ? `${comp.package}: <${comp.tagName}>`
                       : comp.path}
                     @click=${() => {
-                      const s = getState();
-                      const parentPath = s.selection || [];
-                      const parent = getNodeAtPath(s.document, parentPath);
+                      const t = activeTab.value;
+                      const parentPath = t?.session.selection || [];
+                      const parent = getNodeAtPath(t?.doc.document, parentPath);
                       const idx = parent?.children ? parent.children.length : 0;
                       const instanceDef = {
                         tagName: comp.tagName,
@@ -118,8 +118,8 @@ export function renderElementsTemplate(ctx) {
                           ]),
                         ),
                       };
-                      transactDoc(activeTab.value, (t) =>
-                        mutateInsertNode(t, parentPath, idx, structuredClone(instanceDef)),
+                      transactDoc(t, (tr) =>
+                        mutateInsertNode(tr, parentPath, idx, structuredClone(instanceDef)),
                       );
                     }}
                   >

package/src/panels/git-panel.js

@@ -7,6 +7,7 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { getPlatform } from "../platform.js";
 import { updateUi, renderOnly } from "../store.js";
+import { view } from "../view.js";
 
 async function refreshGitStatus() {
   const plat = getPlatform();
@@ -60,7 +61,7 @@ export function renderGitPanel(S, ctx) {
 
   if (!_pollTimer) {
     _pollTimer = setInterval(() => {
-      if (S.ui.leftTab === "git" && !S.ui.gitLoading) refreshGitStatus();
+      if (view.leftTab === "git" && !S.ui.gitLoading) refreshGitStatus();
     }, 30000);
   }
 

package/src/panels/layers-panel.js

@@ -5,7 +5,6 @@
 
 import { html, nothing } from "lit-html";
 import {
-  getState,
   flattenTree,
   getNodeAtPath,
   pathKey,
@@ -26,14 +25,13 @@ import { showContextMenu } from "../editor/context-menu.js";
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderLayersTemplate(ctx) {
-  const S = getState();
+  const tab = activeTab.value;
 
   for (const fn of view.dndCleanups) fn();
   view.dndCleanups = [];
 
-  const rows = flattenTree(S.document);
-  const _S = /** @type {any} */ (S);
-  const collapsed = _S._collapsed || (_S._collapsed = new Set());
+  const rows = flattenTree(tab?.doc.document);
+  const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set());
 
   /** @type {any[]} */
   const layerRows = [];
@@ -48,7 +46,7 @@ export function renderLayersTemplate(ctx) {
     }
     if (hidden) continue;
 
-    if (S.mode === "content" && path.length === 0) continue;
+    if (tab?.doc.mode === "content" && path.length === 0) continue;
 
     if (nodeType === "text") {
       const textPreview = String(node).length > 40 ? String(node).slice(0, 40) + "…" : String(node);
@@ -66,12 +64,12 @@ export function renderLayersTemplate(ctx) {
 
     if (path.length >= 2 && nodeType === "element") {
       const pPath = parentElementPath(path);
-      const parentNode = pPath ? getNodeAtPath(S.document, pPath) : null;
+      const parentNode = pPath ? getNodeAtPath(tab?.doc.document, pPath) : null;
       if (parentNode && isInlineElement(node, parentNode)) continue;
     }
 
     const key = pathKey(path);
-    const isSelected = pathsEqual(path, S.selection);
+    const isSelected = pathsEqual(path, tab?.session.selection);
     const hasChildren = Array.isArray(node.children) && node.children.length > 0;
     const hasMapChildren =
       node.children && typeof node.children === "object" && node.children.$prototype === "Array";
@@ -115,10 +113,10 @@ export function renderLayersTemplate(ctx) {
     }
 
     const isElement = nodeType === "element";
-    const isRoot = S.mode === "content" ? path.length === 0 : path.length < 2;
+    const isRoot = tab?.doc.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;
+    const parentNode = parentPath ? getNodeAtPath(tab?.doc.document, parentPath) : null;
     const siblingCount = parentNode?.children?.length || 0;
     const canMoveUp = isElement && !isRoot && idx > 0;
     const canMoveDown = isElement && !isRoot && idx < siblingCount - 1;
@@ -141,10 +139,11 @@ export function renderLayersTemplate(ctx) {
         data-dnd-row=${isElement ? key : nothing}
         data-dnd-depth=${isElement ? depth : nothing}
         data-dnd-void=${isElement && isVoidEl ? "" : nothing}
+        data-dnd-expanded=${isElement && isExpandable && !collapsed.has(key) ? "" : nothing}
         @click=${() => (activeTab.value.session.selection = path)}
         @contextmenu=${isElement
           ? (/** @type {any} */ e) =>
-              showContextMenu(e, path, getState(), {
+              showContextMenu(e, path, {
                 onEditComponent: ctx.navigateToComponent,
               })
           : nothing}
@@ -207,7 +206,7 @@ export function renderLayersTemplate(ctx) {
                         e.stopPropagation();
                         /** @type {HTMLElement} */ (e.currentTarget).blur();
                         const prevPath = [...parentPath, idx - 1];
-                        const prev = getNodeAtPath(getState().document, prevPath);
+                        const prev = getNodeAtPath(activeTab.value?.doc.document, prevPath);
                         const len = prev?.children?.length || 0;
                         transactDoc(activeTab.value, (t) => mutateMoveNode(t, path, prevPath, len));
                       }}

package/src/panels/left-panel.js

@@ -10,6 +10,7 @@ import { html, render as litRender, nothing } from "lit-html";
 import { leftPanel, updateSession } from "../store.js";
 import { effect, effectScope } from "../reactivity.js";
 import { activeTab } from "../workspace/workspace.js";
+import { view } from "../view.js";
 import { transact, mutateUpdateFrontmatter } from "../tabs/transact.js";
 
 import { renderLayersTemplate } from "./layers-panel.js";
@@ -67,7 +68,6 @@ export function mount(ctx) {
       void tab.doc.document;
       void tab.doc.mode;
       void tab.session.selection;
-      void tab.session.ui.leftTab;
       void tab.session.ui.settingsTab;
       render();
     });
@@ -121,7 +121,7 @@ function _render() {
     mode: aTab.doc.mode,
     selection: aTab.session.selection,
   });
-  const tab = S.ui.leftTab;
+  const tab = view.leftTab;
 
   /** @type {TemplateResult | typeof nothing} */
   let content;

package/src/panels/panel-events.js

@@ -6,7 +6,6 @@
 
 import {
   updateUi,
-  hoverNode,
   elToPath,
   pathsEqual,
   parentElementPath,
@@ -30,8 +29,6 @@ let _ctx = null;
  * Initialize the panel events module.
  *
  * @param {{
- *   getState: () => any;
- *   setState: (s: any) => void;
  *   getCanvasMode: () => string;
  *   enterInlineEdit: (el: any, path: any) => void;
  *   navigateToComponent: (path: any) => void;
@@ -77,7 +74,7 @@ export function registerPanelEvents(panel) {
         stopEditing();
       }
 
-      const S = _ctx.getState();
+      const tab = activeTab.value;
       const canvasMode = _ctx.getCanvasMode();
 
       const elements = withPanelPointerEvents(() =>
@@ -97,23 +94,22 @@ export function registerPanelEvents(panel) {
 
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            let path = bubbleInlinePath(S.document, originalPath);
+            let path = bubbleInlinePath(tab?.doc.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-            const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
 
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
 
             if (
-              pathsEqual(path, S.selection) &&
+              pathsEqual(path, tab?.session.selection) &&
               isEditableBlock(resolvedEl) &&
-              (canvasMode === "edit" || S.mode === "content")
+              (canvasMode === "edit" || tab?.doc.mode === "content")
             ) {
-              _ctx.setState(withMedia);
+              activeTab.value.session.ui.activeMedia = newMedia;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
 
-            if (canvasMode === "design" && S.mode !== "content") {
+            if (canvasMode === "design" && tab?.doc.mode !== "content") {
               updateUi("pendingInlineEdit", { path, mediaName });
               activeTab.value.session.ui.activeMedia = newMedia;
               activeTab.value.session.selection = path;
@@ -148,7 +144,7 @@ export function registerPanelEvents(panel) {
       const canvasMode = _ctx.getCanvasMode();
       if (canvasMode !== "edit" && canvasMode !== "design") return;
 
-      const S = _ctx.getState();
+      const tab = activeTab.value;
       const elements = withPanelPointerEvents(() =>
         document.elementsFromPoint(e.clientX, e.clientY),
       );
@@ -157,7 +153,7 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            const path = bubbleInlinePath(S.document, originalPath);
+            const path = bubbleInlinePath(tab?.doc.document, originalPath);
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
@@ -187,7 +183,7 @@ export function registerPanelEvents(panel) {
         )
           return;
       }
-      const S = _ctx.getState();
+      const tab = activeTab.value;
       const elements = withPanelPointerEvents(() =>
         document.elementsFromPoint(e.clientX, e.clientY),
       );
@@ -195,8 +191,8 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           let path = elToPath.get(el);
           if (path) {
-            path = bubbleInlinePath(S.document, path);
-            showContextMenu(e, path, S, { onEditComponent: _ctx.navigateToComponent });
+            path = bubbleInlinePath(tab?.doc.document, path);
+            showContextMenu(e, path, { onEditComponent: _ctx.navigateToComponent });
             return;
           }
         }
@@ -220,19 +216,19 @@ export function registerPanelEvents(panel) {
         )
           return;
       }
-      let S = _ctx.getState();
+      const tab = activeTab.value;
       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)) {
-            _ctx.setState(hoverNode(S, path));
+          path = bubbleInlinePath(tab?.doc.document, path);
+          if (!pathsEqual(path, tab?.session.hover)) {
+            activeTab.value.session.hover = path;
             renderOnly("overlays");
           }
         }
-      } else if (S.hover) {
-        _ctx.setState(hoverNode(S, null));
+      } else if (tab?.session.hover) {
+        activeTab.value.session.hover = null;
         renderOnly("overlays");
       }
     },
@@ -242,9 +238,8 @@ export function registerPanelEvents(panel) {
   overlayClk.addEventListener(
     "mouseleave",
     () => {
-      const S = _ctx.getState();
-      if (S.hover) {
-        _ctx.setState(hoverNode(S, null));
+      if (activeTab.value?.session.hover) {
+        activeTab.value.session.hover = null;
         renderOnly("overlays");
       }
     },
@@ -252,7 +247,6 @@ export function registerPanelEvents(panel) {
   );
 
   insertionHelper.mount({
-    getState: _ctx.getState,
     getCanvasMode: _ctx.getCanvasMode,
     withPanelPointerEvents,
     effectiveZoom: effectiveZoom,

package/src/panels/preview-render.js

@@ -3,7 +3,8 @@
  * DOM from Jx node trees as a fallback when runtime rendering fails.
  */
 
-import { getState, elToPath } from "../store.js";
+import { elToPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { applyCanvasStyle } from "../utils/canvas-media.js";
 import { resolveDefaultForCanvas } from "../panels/signals-panel.js";
 
@@ -32,7 +33,10 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
   if (typeof node.textContent === "string") {
     el.textContent = node.textContent;
   } else if (typeof node.textContent === "object" && node.textContent?.$ref) {
-    const resolved = resolveDefaultForCanvas(node.textContent, getState().document.state);
+    const resolved = resolveDefaultForCanvas(
+      node.textContent,
+      activeTab.value?.doc.document?.state,
+    );
     el.textContent = resolved;
     el.style.opacity = "0.7";
     el.style.fontStyle = "italic";
@@ -48,7 +52,7 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
     for (const [attr, val] of Object.entries(node.attributes)) {
       try {
         if (typeof val === "object" && val?.$ref) {
-          const resolved = resolveDefaultForCanvas(val, getState().document.state);
+          const resolved = resolveDefaultForCanvas(val, activeTab.value?.doc.document?.state);
           el.setAttribute(attr, resolved);
         } else {
           el.setAttribute(attr, val);

package/src/panels/pseudo-preview.js

@@ -3,7 +3,8 @@
  * :focus, etc.) is active in the style sidebar, force those styles onto the selected element.
  */
 
-import { getState, getNodeAtPath } from "../store.js";
+import { getNodeAtPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { getActivePanel, findCanvasElement } from "../canvas/canvas-helpers.js";
 
@@ -21,20 +22,20 @@ export function updateForcedPseudoPreview() {
     view.forcedAttrEl = null;
   }
 
-  const S = getState();
-  const sel = S.ui?.activeSelector;
-  if (!sel || !sel.startsWith(":") || !S.selection) return;
+  const tab = activeTab.value;
+  const sel = tab?.session.ui?.activeSelector;
+  if (!sel || !sel.startsWith(":") || !tab?.session.selection) return;
 
   const panel = getActivePanel();
   if (!panel) return;
-  const el = findCanvasElement(S.selection, panel.canvas);
+  const el = findCanvasElement(tab.session.selection, panel.canvas);
   if (!el) return;
 
-  const node = getNodeAtPath(S.document, S.selection);
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node?.style) return;
-  const activeTab = S.ui.activeMedia;
+  const activeMedia = tab.session.ui.activeMedia;
   /** @type {any} */
-  const ctx = activeTab ? node.style[`@${activeTab}`] || {} : node.style;
+  const ctx = activeMedia ? node.style[`@${activeMedia}`] || {} : node.style;
   const rules = ctx[sel];
   if (!rules || typeof rules !== "object") return;
 

package/src/panels/statusbar.js

@@ -34,11 +34,7 @@ export function mountStatusbar() {
       void tab.doc.document;
       void tab.doc.mode;
       void tab.session.selection;
-      renderStatusbar({
-        mode: tab.doc.mode,
-        document: tab.doc.document,
-        selection: tab.session.selection,
-      });
+      renderStatusbar();
     });
   });
 }
@@ -50,19 +46,15 @@ export function unmountStatusbar() {
 
 // ─── Statusbar ───────────────────────────────────────────────────────────────
 
-/**
- * Render the statusbar text. Receives current studio state so the module stays decoupled from the
- * mutable `S` local in studio.js.
- *
- * @param {any} S - Current studio state
- */
-export function renderStatusbar(S) {
+/** Render the statusbar text. */
+export function renderStatusbar() {
+  const tab = activeTab.value;
   const parts = [];
-  if (S.mode === "content") parts.push("Content Mode");
-  if (S.selection) {
-    const node = getNodeAtPath(S.document, S.selection);
+  if (tab?.doc.mode === "content") parts.push("Content Mode");
+  if (tab?.session.selection) {
+    const node = getNodeAtPath(tab.doc.document, tab.session.selection);
     parts.push(`Selected: ${nodeLabel(node)}`);
-    parts.push(`Path: ${S.selection.join(" > ") || "root"}`);
+    parts.push(`Path: ${tab.session.selection.join(" > ") || "root"}`);
   }
   if (statusMsg) parts.push(statusMsg);
   statusbarEl.textContent = parts.join("  |  ") || "Jx Studio";

package/src/panels/style-inputs.js

@@ -2,7 +2,7 @@
 
 import { html } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { getState, debouncedStyleCommit } from "../store.js";
+import { debouncedStyleCommit } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { transactDoc, mutateUpdateStyle } from "../tabs/transact.js";
 import { widgetForType as _widgetForType } from "../ui/widgets.js";
@@ -53,9 +53,8 @@ export function renderSelectInput(entry, prop, value, onChange) {
 
 /** @param {any} preset @param {any} onChange */
 function handleFontPresetSelection(preset, onChange) {
-  const S = getState();
   const varName = friendlyNameToVar(preset.title, "--font-");
-  if (!S.document?.style?.[varName]) {
+  if (!activeTab.value?.doc.document?.style?.[varName]) {
     transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, preset.value));
   }
   onChange(`var(${varName})`);

package/src/panels/style-utils.js

@@ -1,6 +1,7 @@
 /** Style utilities — pure CSS helper functions used by the style panel. */
 
-import { getState, getNodeAtPath } from "../store.js";
+import { getNodeAtPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { camelToKebab } from "../utils/studio-utils.js";
 import cssMeta from "../../data/css-meta.json";
 
@@ -159,8 +160,7 @@ export function compressBorderSide(/** @type {string[]} */ vals) {
 
 /** Extract --font-* CSS custom properties from the document root style. */
 export function getFontVars() {
-  const S = getState();
-  const style = S.document?.style;
+  const style = activeTab.value?.doc.document?.style;
   if (!style) return [];
   const vars = [];
   for (const [k, v] of Object.entries(style)) {
@@ -181,12 +181,14 @@ export const TYPO_PREVIEW_PROPS = new Set([
 
 /** Resolve the current font family for typography preview (handles var() references) */
 export function currentFontFamily() {
-  const S = getState();
-  const node = S.selection ? getNodeAtPath(S.document, S.selection) : null;
+  const tab = activeTab.value;
+  const node = tab?.session.selection
+    ? getNodeAtPath(tab.doc.document, tab.session.selection)
+    : null;
   const raw = node?.style?.fontFamily;
   if (!raw) return "";
   const m = typeof raw === "string" && raw.match(/^var\((--[^)]+)\)$/);
-  if (m) return S.document?.style?.[m[1]] || "";
+  if (m) return tab?.doc.document?.style?.[m[1]] || "";
   return raw;
 }
 

package/src/panels/stylebook-layers-panel.js

@@ -1,7 +1,7 @@
 /** Stylebook layers panel — shows element/variable tree when in stylebook (settings) mode. */
 
 import { html, nothing } from "lit-html";
-import { getState } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { componentRegistry } from "../files/components.js";
 
 /**
@@ -18,11 +18,11 @@ function hasTagStyle(rootStyle, tag) {
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderStylebookLayersTemplate(ctx) {
-  const S = getState();
-  const rootStyle = S.document?.style || {};
-  const selectedTag = S.ui.stylebookSelection;
+  const tab = activeTab.value;
+  const rootStyle = tab?.doc.document?.style || {};
+  const selectedTag = tab?.session.ui.stylebookSelection;
 
-  if (S.ui.stylebookTab === "elements") {
+  if (tab?.session.ui.stylebookTab === "elements") {
     /**
      * @param {any} entry
      * @param {number} depth

package/src/panels/stylebook-panel.js

@@ -8,7 +8,6 @@ import { ref } from "lit-html/directives/ref.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 
 import {
-  getState,
   updateSession,
   updateUi,
   canvasWrap,
@@ -49,9 +48,8 @@ let _ctx = null;
  */
 export function renderStylebookMode(ctx) {
   _ctx = ctx;
-  const S = getState();
 
-  const settingsTab = S.ui.settingsTab || "stylebook";
+  const settingsTab = activeTab.value?.session.ui.settingsTab || "stylebook";
 
   const settingsChromeBarTpl = html`
     <div
@@ -94,11 +92,14 @@ export function renderStylebookMode(ctx) {
 
   // Stylebook tab — element catalog / variables
   view.stylebookElToTag = new WeakMap();
-  const rootStyle = getEffectiveStyle(S.document.style);
-  const filter = (S.ui.stylebookFilter || "").toLowerCase();
-  const customizedOnly = S.ui.stylebookCustomizedOnly;
+  const tab = activeTab.value;
+  const rootStyle = getEffectiveStyle(tab?.doc.document?.style);
+  const filter = (tab?.session.ui.stylebookFilter || "").toLowerCase();
+  const customizedOnly = tab?.session.ui.stylebookCustomizedOnly;
 
-  const { sizeBreakpoints, baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
+  const { sizeBreakpoints, baseWidth } = parseMediaEntries(
+    getEffectiveMedia(tab?.doc.document?.$media),
+  );
   const hasMedia = sizeBreakpoints.length > 0;
 
   const onTabClick = (/** @type {string} */ t) => {
@@ -110,7 +111,7 @@ export function renderStylebookMode(ctx) {
   };
 
   const onCustomizedToggle = () => {
-    updateUi("stylebookCustomizedOnly", !S.ui.stylebookCustomizedOnly);
+    updateUi("stylebookCustomizedOnly", !tab?.session.ui.stylebookCustomizedOnly);
   };
 
   const chromeBarTpl = html`
@@ -121,7 +122,7 @@ export function renderStylebookMode(ctx) {
     >
       <sp-tabs
         size="s"
-        selected=${S.ui.stylebookTab || "elements"}
+        selected=${tab?.session.ui.stylebookTab || "elements"}
         @change=${(/** @type {any} */ e) => {
           onTabClick(e.target.selected);
         }}
@@ -132,17 +133,17 @@ export function renderStylebookMode(ctx) {
           `,
         )}
       </sp-tabs>
-      ${S.ui.stylebookTab === "elements"
+      ${tab?.session.ui.stylebookTab === "elements"
         ? html`
             <input
               class="field-input"
               style="flex:1;max-width:200px;margin-left:8px"
               placeholder="Filter…"
-              .value=${S.ui.stylebookFilter}
+              .value=${tab?.session.ui.stylebookFilter}
               @input=${onFilterInput}
             />
             <button
-              class="tb-toggle${S.ui.stylebookCustomizedOnly ? " active" : ""}"
+              class="tb-toggle${tab?.session.ui.stylebookCustomizedOnly ? " active" : ""}"
               style="margin-left:4px"
               @click=${onCustomizedToggle}
             >
@@ -176,7 +177,7 @@ export function renderStylebookMode(ctx) {
 
   const renderIntoPanel = (/** @type {any} */ panel, /** @type {any} */ activeBreakpoints) => {
     panel.canvas.classList.add("sb-canvas");
-    if (S.ui.stylebookTab === "elements") {
+    if (tab?.session.ui.stylebookTab === "elements") {
       renderStylebookElementsIntoCanvas(
         panel.canvas,
         rootStyle,
@@ -197,7 +198,7 @@ export function renderStylebookMode(ctx) {
   /** @type {{ tpl: any; panel: any; activeSet: any }[]} */
   let panelEntries;
   if (!hasMedia) {
-    const effectiveMedia = getEffectiveMedia(S.document.$media);
+    const effectiveMedia = getEffectiveMedia(tab?.doc.document?.$media);
     const hasBaseWidth = effectiveMedia && effectiveMedia["--"];
     const label = hasBaseWidth ? `${mediaDisplayName("--")} (${baseWidth}px)` : null;
     const entry = ctx.canvasPanelTemplate(
@@ -268,8 +269,7 @@ export function renderStylebookOverlays() {
   if (!_ctx) return;
   if (canvasPanels.length === 0) return;
 
-  const S = getState();
-  const selectedTag = S.ui.stylebookSelection;
+  const selectedTag = activeTab.value?.session.ui.stylebookSelection;
 
   for (const panel of canvasPanels) {
     const hoverTag = /** @type {any} */ (panel)._lastHoverTag;

package/src/panels/toolbar.js

@@ -72,9 +72,9 @@ export function mount(rootEl, ctx) {
       void tab.doc.dirty;
       void tab.doc.mode;
       void tab.session.selection;
+      void tab.session.ui.canvasMode;
       void tab.session.ui.editingFunction;
       void tab.session.ui.featureToggles;
-      void tab.session.ui.leftTab;
       void tab.session.ui.rightTab;
       render();
     });
@@ -213,7 +213,7 @@ function toolbarTemplate() {
               /** @type {Record<string, any>} */
               const uiPatch = { editingFunction: null };
               if (m.key === "settings") uiPatch.rightTab = "style";
-              if (m.key === "manage") uiPatch.leftTab = "files";
+              if (m.key === "manage") view.leftTab = "files";
               updateSession({ ui: uiPatch });
               _ctx.renderCanvas();
               _ctx.safeRenderRightPanel();