@jxsuite/studio 0.10.2 → 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,8 +16,10 @@ 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 } from "@jxsuite/runtime";
+import { defineElement, setSkipServerFunctions } from "@jxsuite/runtime";
 import { componentRegistry } from "../files/components.js";
 import { getEffectiveStyle, getEffectiveMedia } from "../site-context.js";
 import { parseMediaEntries, activeBreakpointsForWidth } from "../utils/canvas-media.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;
@@ -351,6 +351,7 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
       }
     }
     if (activeBreakpoints) {
+      // Check media overrides nested inside the tag style (selector wraps media)
       for (const [key, val] of Object.entries(tagStyle)) {
         if (!key.startsWith("@") || typeof val !== "object") continue;
         const mediaName = key.slice(1);
@@ -367,6 +368,27 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
       }
     }
   }
+  // Check top-level @media keys for tag-specific overrides (media wraps selector)
+  if (activeBreakpoints) {
+    const selector = compoundSelector || `& ${entry.tag}`;
+    for (const [key, val] of Object.entries(rootStyle)) {
+      if (!key.startsWith("@") || typeof val !== "object") continue;
+      const mediaName = key.slice(1);
+      if (mediaName === "--") continue;
+      if (activeBreakpoints.has(mediaName)) {
+        const mediaTagStyle = /** @type {any} */ (val)[selector];
+        if (mediaTagStyle && typeof mediaTagStyle === "object") {
+          for (const [prop, v] of Object.entries(mediaTagStyle)) {
+            if (typeof v === "string" || typeof v === "number") {
+              try {
+                /** @type {any} */ (el.style)[prop] = v;
+              } catch {}
+            }
+          }
+        }
+      }
+    }
+  }
   if (entry.children) {
     for (const child of entry.children) {
       el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints, entry.tag));
@@ -382,6 +404,7 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
  * @returns {Promise<HTMLElement>}
  */
 export async function renderComponentPreview(comp) {
+  setSkipServerFunctions(true);
   try {
     if (comp.source === "npm") {
       if (!customElements.get(comp.tagName)) {
@@ -416,7 +439,13 @@ export async function renderComponentPreview(comp) {
  */
 function hasTagStyle(rootStyle, tag) {
   const s = rootStyle[`& ${tag}`];
-  return s && typeof s === "object" && Object.keys(s).length > 0;
+  if (s && typeof s === "object" && Object.keys(s).length > 0) return true;
+  const selector = `& ${tag}`;
+  for (const [key, val] of Object.entries(rootStyle)) {
+    if (!key.startsWith("@") || typeof val !== "object") continue;
+    if (/** @type {any} */ (val)[selector]) return true;
+  }
+  return false;
 }
 
 /**
@@ -662,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),
+                  );
                 }
               }}
             />
@@ -722,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);
         }}
@@ -736,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));
         }
       },
     });
@@ -769,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>
@@ -795,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
           >
@@ -829,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>