@jxsuite/studio 0.11.0 → 0.13.0

package/src/panels/properties-panel.js

@@ -2,24 +2,19 @@
 
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
+import { getNodeAtPath, debouncedStyleCommit, renderOnly, projectState } from "../store.js";
 import {
-  getState,
-  selectNode,
-  getNodeAtPath,
-  update,
-  updateProperty,
-  updateAttribute,
-  updateProp,
-  updateMedia,
-  updateFrontmatter,
-  addSwitchCase,
-  removeSwitchCase,
-  renameSwitchCase,
-  debouncedStyleCommit,
-  renderOnly,
-  updateUi,
-  projectState,
-} from "../store.js";
+  transactDoc,
+  mutateUpdateProperty,
+  mutateUpdateAttribute,
+  mutateUpdateProp,
+  mutateUpdateFrontmatter,
+  mutateUpdateMedia,
+  mutateAddSwitchCase,
+  mutateRemoveSwitchCase,
+  mutateRenameSwitchCase,
+} from "../tabs/transact.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { componentRegistry } from "../files/components.js";
 import { widgetForType } from "./style-inputs.js";
@@ -36,6 +31,7 @@ import { isCustomElementDoc, collectCssParts } from "./signals-panel.js";
 import { mediaDisplayName } from "./shared.js";
 import { getCssInitialMap } from "./style-utils.js";
 import { renderMediaPicker } from "../ui/media-picker.js";
+import { renderColorSelector } from "../ui/color-selector.js";
 import { getEffectiveLayoutPath, invalidateLayoutCache } from "../site-context.js";
 import { getPlatform } from "../platform.js";
 import htmlMeta from "../../data/html-meta.json";
@@ -70,8 +66,8 @@ function bindableFieldRow(
   /** @type {any} */ filterFn = null,
   /** @type {any} */ extraSignals = null,
 ) {
-  const S = getState();
-  const defs = S.document.state || {};
+  const tab = activeTab.value;
+  const defs = tab.doc.document.state || {};
   const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
 
   const signalDefs = Object.entries(defs).filter(([, d]) =>
@@ -211,9 +207,9 @@ function kvRow(
 
 /** Frontmatter-only panel shown in content mode when no element is selected */
 function renderFrontmatterOnlyPanel() {
-  const S = getState();
-  const fm = S.content?.frontmatter || {};
-  const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
+  const tab = activeTab.value;
+  const fm = tab.doc.content?.frontmatter || {};
+  const col = findContentTypeSchema(tab.documentPath, projectState?.projectConfig);
   const schemaProps = col?.schema?.properties;
   const requiredFields = new Set(col?.schema?.required || []);
 
@@ -248,7 +244,7 @@ function renderFrontmatterOnlyPanel() {
     return html`<div class="empty-state">No frontmatter. Select an element to inspect.</div>`;
   }
 
-  const pageT = renderPageSection(S.document || {});
+  const pageT = renderPageSection(tab.doc.document || {});
 
   return html`
     <div class="style-sidebar">
@@ -271,12 +267,12 @@ function renderFmFieldRow(
   /** @type {any} */ value,
   /** @type {Set<string>} */ requiredFields,
 ) {
-  const S = getState();
   const isRequired = requiredFields.has(field);
   const label = field.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
   const displayLabel = label + (isRequired ? " *" : "");
   const hasVal = value !== undefined && value !== "" && value !== false;
-  const onClear = () => update(updateFrontmatter(S, field, undefined));
+  const onClear = () =>
+    transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, undefined));
 
   if (entry.type === "boolean") {
     return renderFieldRow({
@@ -289,7 +285,9 @@ function renderFmFieldRow(
           size="s"
           .checked=${live(!!value)}
           @change=${(/** @type {any} */ e) =>
-            update(updateFrontmatter(getState(), field, e.target.checked || undefined))}
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateFrontmatter(t, field, e.target.checked || undefined),
+            )}
         ></sp-checkbox>
       `,
     });
@@ -314,7 +312,7 @@ function renderFmFieldRow(
                   .map((/** @type {string} */ s) => s.trim())
                   .filter(Boolean)
               : undefined;
-            update(updateFrontmatter(getState(), field, arr));
+            transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, arr));
           })}
         ></sp-textfield>
       `,
@@ -332,7 +330,9 @@ function renderFmFieldRow(
           size="s"
           .value=${live(value || "")}
           @change=${(/** @type {any} */ e) =>
-            update(updateFrontmatter(getState(), field, e.target.value || undefined))}
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateFrontmatter(t, field, e.target.value || undefined),
+            )}
         >
           ${entry.enum.map(
             (/** @type {string} */ opt) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`,
@@ -349,7 +349,7 @@ function renderFmFieldRow(
       hasValue: hasVal,
       onClear,
       widget: renderMediaPicker(field, value, (v) =>
-        update(updateFrontmatter(getState(), field, v || undefined)),
+        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
       ),
     });
   }
@@ -374,7 +374,9 @@ function renderFmFieldRow(
                     title="Remove"
                     @click=${() => {
                       const next = images.filter((_, idx) => idx !== i);
-                      update(updateFrontmatter(getState(), field, next.length ? next : undefined));
+                      transactDoc(activeTab.value, (t) =>
+                        mutateUpdateFrontmatter(t, field, next.length ? next : undefined),
+                      );
                     }}
                   >
                     <sp-icon-close slot="icon"></sp-icon-close>
@@ -386,7 +388,7 @@ function renderFmFieldRow(
           ${renderMediaPicker(`${field}:add`, "", (v) => {
             if (!v) return;
             const next = [...images, v];
-            update(updateFrontmatter(getState(), field, next));
+            transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, next));
           })}
         </div>
       `,
@@ -397,7 +399,7 @@ function renderFmFieldRow(
     const targetName = entry.$ref.replace("#/contentTypes/", "");
     const targetDef = projectState?.projectConfig?.contentTypes?.[targetName];
     const picker = renderReferencePicker(field, value, targetName, targetDef, (v) =>
-      update(updateFrontmatter(getState(), field, v || undefined)),
+      transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
     );
     return renderFieldRow({
       prop: field,
@@ -421,7 +423,9 @@ function renderFmFieldRow(
           .value=${live(value !== undefined ? Number(value) : undefined)}
           @change=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
             const v = e.target.value;
-            update(updateFrontmatter(getState(), field, isNaN(v) ? undefined : Number(v)));
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateFrontmatter(t, field, isNaN(v) ? undefined : Number(v)),
+            );
           })}
         ></sp-number-field>
       `,
@@ -439,7 +443,9 @@ function renderFmFieldRow(
         placeholder=${entry.format === "date" ? "YYYY-MM-DD" : ""}
         .value=${live(value || "")}
         @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) => {
-          update(updateFrontmatter(getState(), field, e.target.value || undefined));
+          transactDoc(activeTab.value, (t) =>
+            mutateUpdateFrontmatter(t, field, e.target.value || undefined),
+          );
         })}
       ></sp-textfield>
     `,
@@ -526,33 +532,42 @@ function renderRepeaterFieldsTemplate(
   /** @type {any} */ path,
   /** @type {any} */ _mapSignals,
 ) {
-  const S = getState();
   return html`
     ${bindableFieldRow("Items", "text", node.items, (/** @type {any} */ v) =>
-      update(updateProperty(getState(), path, "items", v)),
+      transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "items", v)),
     )}
     ${node.filter
       ? bindableFieldRow("Filter", "text", node.filter, (/** @type {any} */ v) =>
-          update(updateProperty(getState(), path, "filter", v || undefined)),
+          transactDoc(activeTab.value, (t) =>
+            mutateUpdateProperty(t, path, "filter", v || undefined),
+          ),
         )
       : nothing}
     ${node.sort
       ? bindableFieldRow("Sort", "text", node.sort, (/** @type {any} */ v) =>
-          update(updateProperty(getState(), path, "sort", v || undefined)),
+          transactDoc(activeTab.value, (t) =>
+            mutateUpdateProperty(t, path, "sort", v || undefined),
+          ),
         )
       : nothing}
     <div style="display:flex;gap:8px;margin-top:4px">
       ${!node.filter
         ? html`<span
             class="kv-add"
-            @click=${() => update(updateProperty(getState(), path, "filter", { $ref: "#/state/" }))}
+            @click=${() =>
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, path, "filter", { $ref: "#/state/" }),
+              )}
             >+ Add filter</span
           >`
         : nothing}
       ${!node.sort
         ? html`<span
             class="kv-add"
-            @click=${() => update(updateProperty(getState(), path, "sort", { $ref: "#/state/" }))}
+            @click=${() =>
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, path, "sort", { $ref: "#/state/" }),
+              )}
             >+ Add sort</span
           >`
         : nothing}
@@ -562,7 +577,9 @@ function renderRepeaterFieldsTemplate(
           <sp-action-button
             size="s"
             style="margin-top:8px;width:100%"
-            @click=${() => update(selectNode(S, [...path, "map"]))}
+            @click=${() => {
+              activeTab.value.session.selection = [...path, "map"];
+            }}
             >Edit template →</sp-action-button
           >
         `
@@ -582,7 +599,8 @@ function renderSwitchFieldsTemplate(
       "Expression",
       "text",
       node.$switch,
-      (/** @type {any} */ v) => update(updateProperty(getState(), path, "$switch", v)),
+      (/** @type {any} */ v) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "$switch", v)),
       null,
       mapSignals,
     )}
@@ -604,7 +622,9 @@ function renderSwitchFieldsTemplate(
               clearTimeout(debounce);
               debounce = setTimeout(() => {
                 if (e.target.value && e.target.value !== caseName)
-                  update(renameSwitchCase(getState(), path, caseName, e.target.value));
+                  transactDoc(activeTab.value, (t) =>
+                    mutateRenameSwitchCase(t, path, caseName, e.target.value),
+                  );
               }, 500);
             }}
           />
@@ -614,7 +634,7 @@ function renderSwitchFieldsTemplate(
             style="cursor:pointer"
             @click=${(/** @type {any} */ e) => {
               e.stopPropagation();
-              update(selectNode(getState(), [...path, "cases", caseName]));
+              activeTab.value.session.selection = [...path, "cases", caseName];
             }}
             >→</span
           >
@@ -622,7 +642,7 @@ function renderSwitchFieldsTemplate(
             style="cursor:pointer;color:var(--danger);font-size:11px"
             @click=${(/** @type {any} */ e) => {
               e.stopPropagation();
-              update(removeSwitchCase(getState(), path, caseName));
+              transactDoc(activeTab.value, (t) => mutateRemoveSwitchCase(t, path, caseName));
             }}
             >✕</span
           >
@@ -632,7 +652,9 @@ function renderSwitchFieldsTemplate(
     <span
       class="kv-add"
       @click=${() => {
-        update(addSwitchCase(getState(), path, `case${caseNames.length + 1}`));
+        transactDoc(activeTab.value, (t) =>
+          mutateAddSwitchCase(t, path, `case${caseNames.length + 1}`),
+        );
       }}
       >+ Add case</span
     >
@@ -646,18 +668,20 @@ function renderComponentPropsFieldsTemplate(
   /** @type {any} */ mapSignals,
   /** @type {(path: string) => void} */ navigateToComponent,
 ) {
-  const S = getState();
+  const tab = activeTab.value;
   const comp = componentRegistry.find((c) => c.tagName === node.tagName);
-  if (!comp) return html`<div class="empty-state">Component not found</div>`;
+  if (!comp || !comp.props) return html`<div class="empty-state">Component not found</div>`;
   const isNpm = comp.source === "npm";
   const currentVals = isNpm ? node.attributes || {} : node.$props || {};
   const updateFn = isNpm
     ? (/** @type {string} */ name, /** @type {any} */ v) =>
-        update(updateAttribute(getState(), path, name, v === "" ? undefined : v))
+        transactDoc(activeTab.value, (t) =>
+          mutateUpdateAttribute(t, path, name, v === "" ? undefined : v),
+        )
     : (/** @type {string} */ name, /** @type {any} */ v) =>
-        update(updateProp(getState(), path, name, v));
+        transactDoc(activeTab.value, (t) => mutateUpdateProp(t, path, name, v));
 
-  const defs = S.document.state || {};
+  const defs = tab.doc.document.state || {};
   const signalDefs = Object.entries(defs).filter(
     ([, d]) => !d.$handler && d.$prototype !== "Function",
   );
@@ -727,7 +751,21 @@ function renderComponentPropsFieldsTemplate(
       const staticVal = isBound ? "" : (rawValue ?? "");
       /** @type {any} */
       let widgetTpl;
-      if (parsed.kind === "boolean") {
+      if (prop.format === "image") {
+        widgetTpl = renderMediaPicker(prop.name, staticVal, onChange);
+      } else if (prop.format === "color") {
+        widgetTpl = renderColorSelector(prop.name, staticVal, onChange);
+      } else if (prop.format === "date") {
+        widgetTpl = html`<sp-textfield
+          size="s"
+          placeholder="YYYY-MM-DD"
+          value=${staticVal}
+          @input=${(/** @type {any} */ e) => {
+            clearTimeout(debounce);
+            debounce = setTimeout(() => onChange(e.target.value), 400);
+          }}
+        ></sp-textfield>`;
+      } else if (parsed.kind === "boolean") {
         widgetTpl = html`<sp-checkbox
           size="s"
           .checked=${live(!!staticVal)}
@@ -806,19 +844,22 @@ function renderCustomAttrsFieldsTemplate(
         attr,
         String(val),
         (/** @type {any} */ newAttr, /** @type {any} */ newVal) => {
-          const S = getState();
           if (newAttr !== attr) {
-            let s = updateAttribute(S, path, attr, undefined);
-            s = updateAttribute(s, path, newAttr, newVal);
-            update(s);
+            transactDoc(activeTab.value, (t) => {
+              mutateUpdateAttribute(t, path, attr, undefined);
+              mutateUpdateAttribute(t, path, newAttr, newVal);
+            });
           } else {
-            update(updateAttribute(S, path, attr, newVal));
+            transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr, newVal));
           }
         },
-        () => update(updateAttribute(getState(), path, attr, undefined)),
+        () => transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr, undefined)),
       ),
     )}
-    <span class="kv-add" @click=${() => update(updateAttribute(getState(), path, "data-", ""))}
+    <span
+      class="kv-add"
+      @click=${() =>
+        transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, "data-", ""))}
       >+ Add attribute</span
     >
   `;
@@ -845,12 +886,15 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
           clearTimeout(baseDebounce);
           baseDebounce = setTimeout(() => {
             const val = e.target.value.trim();
-            update(updateMedia(getState(), "--", val || undefined));
+            transactDoc(activeTab.value, (t) => mutateUpdateMedia(t, "--", val || undefined));
           }, 400);
         }}
       />
       ${media["--"]
-        ? html`<span class="kv-del" @click=${() => update(updateMedia(getState(), "--", undefined))}
+        ? html`<span
+            class="kv-del"
+            @click=${() =>
+              transactDoc(activeTab.value, (t) => mutateUpdateMedia(t, "--", undefined))}
             >✕</span
           >`
         : nothing}
@@ -901,7 +945,7 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
                     if (key && queryVal) {
                       view.showAddBreakpointForm = false;
                       view.addBreakpointPreview = "";
-                      update(updateMedia(getState(), key, queryVal));
+                      transactDoc(activeTab.value, (t) => mutateUpdateMedia(t, key, queryVal));
                     }
                   }}
                 >
@@ -949,10 +993,10 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
                 const queryEl = e.target
                   .closest("div[style]")
                   ?.parentElement?.querySelector(".bp-query-input");
-                const S = getState();
-                let s = updateMedia(S, name, undefined);
-                s = updateMedia(s, newKey, queryEl?.value || query);
-                update(s);
+                transactDoc(activeTab.value, (t) => {
+                  mutateUpdateMedia(t, name, undefined);
+                  mutateUpdateMedia(t, newKey, queryEl?.value || query);
+                });
               }
             }, 600);
           }}
@@ -962,7 +1006,9 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
           style="font-size:10px;color:var(--fg-dim);font-family:'SF Mono','Fira Code',monospace;white-space:nowrap"
           >${name}</span
         >
-        <span class="kv-del" @click=${() => update(updateMedia(getState(), name, undefined))}
+        <span
+          class="kv-del"
+          @click=${() => transactDoc(activeTab.value, (t) => mutateUpdateMedia(t, name, undefined))}
           >✕</span
         >
       </div>
@@ -974,7 +1020,7 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
           @input=${(/** @type {any} */ e) => {
             clearTimeout(debounceTimer);
             debounceTimer = setTimeout(
-              () => update(updateMedia(getState(), name, e.target.value)),
+              () => transactDoc(activeTab.value, (t) => mutateUpdateMedia(t, name, e.target.value)),
               400,
             );
           }}
@@ -1015,8 +1061,8 @@ function isPageDocument(/** @type {any} */ documentPath) {
 }
 
 function renderPageSection(/** @type {any} */ node) {
-  const S = getState();
-  if (!isPageDocument(S.documentPath)) return nothing;
+  const tab = activeTab.value;
+  if (!isPageDocument(tab.documentPath)) return nothing;
 
   if (layoutEntries === null) {
     loadLayoutEntries();
@@ -1040,7 +1086,9 @@ function renderPageSection(/** @type {any} */ node) {
                   title="Reset to default"
                   @click=${(/** @type {any} */ e) => {
                     e.stopPropagation();
-                    update(updateProperty(getState(), [], "$layout", undefined));
+                    transactDoc(activeTab.value, (t) =>
+                      mutateUpdateProperty(t, [], "$layout", undefined),
+                    );
                   }}
                 ></span>`
               : nothing}
@@ -1052,11 +1100,13 @@ function renderPageSection(/** @type {any} */ node) {
             @change=${(/** @type {any} */ e) => {
               const val = e.target.value;
               if (val === "__default__") {
-                update(updateProperty(getState(), [], "$layout", undefined));
+                transactDoc(activeTab.value, (t) =>
+                  mutateUpdateProperty(t, [], "$layout", undefined),
+                );
               } else if (val === "__none__") {
-                update(updateProperty(getState(), [], "$layout", false));
+                transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, [], "$layout", false));
               } else {
-                update(updateProperty(getState(), [], "$layout", val));
+                transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, [], "$layout", val));
               }
               invalidateLayoutCache();
             }}
@@ -1135,23 +1185,24 @@ function renderLayoutSelectionPanel(/** @type {any} */ ctx) {
  * @param {{ navigateToComponent: (path: string) => void }} ctx
  */
 export function renderPropertiesPanelTemplate(ctx) {
-  const S = getState();
+  const tab = activeTab.value;
+  if (!tab) return html`<div class="empty-state">No document loaded</div>`;
 
   // Layout element selected — show read-only info with link to open layout
   if (view.layoutSelection) {
     return renderLayoutSelectionPanel(ctx);
   }
 
-  if (!S.selection) {
-    if (S.mode === "content") {
+  if (!tab.session.selection) {
+    if (tab.doc.mode === "content") {
       return renderFrontmatterOnlyPanel();
     }
     return html`<div class="empty-state">Select an element to inspect</div>`;
   }
-  const node = getNodeAtPath(S.document, S.selection);
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node) return html`<div class="empty-state">Node not found</div>`;
 
-  const path = S.selection;
+  const path = tab.session.selection;
   const isMapNode = node.$prototype === "Array";
   const isMapParent =
     node.children && typeof node.children === "object" && node.children.$prototype === "Array";
@@ -1181,13 +1232,16 @@ export function renderPropertiesPanelTemplate(ctx) {
         prop: attr,
         label: attrLabel(entry, attr),
         hasValue: hasVal,
-        onClear: () => update(updateAttribute(getState(), path, attr, undefined)),
+        onClear: () =>
+          transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr, undefined)),
         widget: html`
           <sp-checkbox
             size="s"
             .checked=${live(!!value)}
             @change=${(/** @type {any} */ e) =>
-              update(updateAttribute(getState(), path, attr, e.target.checked || undefined))}
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateAttribute(t, path, attr, e.target.checked || undefined),
+              )}
           >
           </sp-checkbox>
         `,
@@ -1198,9 +1252,10 @@ export function renderPropertiesPanelTemplate(ctx) {
       prop: attr,
       label: attrLabel(entry, attr),
       hasValue: hasVal,
-      onClear: () => update(updateAttribute(getState(), path, attr, undefined)),
+      onClear: () =>
+        transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr, undefined)),
       widget: widgetForType(type, entry, attr, value || "", (/** @type {any} */ v) =>
-        update(updateAttribute(getState(), path, attr, v || undefined)),
+        transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr, v || undefined)),
       ),
     });
   }
@@ -1228,7 +1283,7 @@ export function renderPropertiesPanelTemplate(ctx) {
   const knownAttrNames = new Set(Object.keys(applicableAttrs));
   if (isCustomInstance) {
     const comp = componentRegistry.find((c) => c.tagName === node.tagName);
-    if (comp) for (const p of comp.props) knownAttrNames.add(p.name);
+    if (comp?.props) for (const p of comp.props) knownAttrNames.add(p.name);
   }
   const customAttrs = Object.entries(attrs).filter(([k]) => !knownAttrNames.has(k));
 
@@ -1240,13 +1295,17 @@ export function renderPropertiesPanelTemplate(ctx) {
   if (customAttrs.length > 0) autoOpen.add("__custom");
 
   function isSectionOpen(/** @type {any} */ key) {
-    if (S.ui.inspectorSections[key] !== undefined) return S.ui.inspectorSections[key];
+    if (tab.session.ui.inspectorSections[key] !== undefined)
+      return tab.session.ui.inspectorSections[key];
     return autoOpen.has(key);
   }
 
   function toggleSection(/** @type {any} */ key) {
     const current = isSectionOpen(key);
-    updateUi("inspectorSections", { ...S.ui.inspectorSections, [key]: !current });
+    activeTab.value.session.ui.inspectorSections = {
+      ...activeTab.value.session.ui.inspectorSections,
+      [key]: !current,
+    };
   }
 
   // ── Build section templates ─────────────────────────────────────────
@@ -1268,7 +1327,9 @@ export function renderPropertiesPanelTemplate(ctx) {
             autocomplete="off"
             list="tag-names"
             @input=${debouncedStyleCommit("prop:tagName", 400, (/** @type {any} */ e) => {
-              update(updateProperty(getState(), path, "tagName", e.target.value || undefined));
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, path, "tagName", e.target.value || undefined),
+              );
             })}
           ></sp-textfield>
         </div>
@@ -1280,7 +1341,9 @@ export function renderPropertiesPanelTemplate(ctx) {
                   title="Clear $id"
                   @click=${(/** @type {any} */ e) => {
                     e.stopPropagation();
-                    update(updateProperty(getState(), path, "$id", undefined));
+                    transactDoc(activeTab.value, (t) =>
+                      mutateUpdateProperty(t, path, "$id", undefined),
+                    );
                   }}
                 ></span>`
               : nothing}
@@ -1290,7 +1353,9 @@ export function renderPropertiesPanelTemplate(ctx) {
             size="s"
             .value=${live(node.$id || "")}
             @input=${debouncedStyleCommit("prop:$id", 400, (/** @type {any} */ e) => {
-              update(updateProperty(getState(), path, "$id", e.target.value || undefined));
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, path, "$id", e.target.value || undefined),
+              );
             })}
           ></sp-textfield>
         </div>
@@ -1302,7 +1367,9 @@ export function renderPropertiesPanelTemplate(ctx) {
                   title="Clear class"
                   @click=${(/** @type {any} */ e) => {
                     e.stopPropagation();
-                    update(updateProperty(getState(), path, "className", undefined));
+                    transactDoc(activeTab.value, (t) =>
+                      mutateUpdateProperty(t, path, "className", undefined),
+                    );
                   }}
                 ></span>`
               : nothing}
@@ -1312,7 +1379,9 @@ export function renderPropertiesPanelTemplate(ctx) {
             size="s"
             .value=${live(node.className || "")}
             @input=${debouncedStyleCommit("prop:className", 400, (/** @type {any} */ e) => {
-              update(updateProperty(getState(), path, "className", e.target.value || undefined));
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, path, "className", e.target.value || undefined),
+              );
             })}
           ></sp-textfield>
         </div>
@@ -1326,7 +1395,9 @@ export function renderPropertiesPanelTemplate(ctx) {
                         title="Clear text"
                         @click=${(/** @type {any} */ e) => {
                           e.stopPropagation();
-                          update(updateProperty(getState(), path, "textContent", undefined));
+                          transactDoc(activeTab.value, (t) =>
+                            mutateUpdateProperty(t, path, "textContent", undefined),
+                          );
                         }}
                       ></span>`
                     : nothing}
@@ -1341,8 +1412,8 @@ export function renderPropertiesPanelTemplate(ctx) {
                       : (node.textContent ?? ""),
                   )}
                   @input=${debouncedStyleCommit("prop:textContent", 400, (/** @type {any} */ e) => {
-                    update(
-                      updateProperty(getState(), path, "textContent", e.target.value || undefined),
+                    transactDoc(activeTab.value, (t) =>
+                      mutateUpdateProperty(t, path, "textContent", e.target.value || undefined),
                     );
                   })}
                 ></sp-textfield>
@@ -1357,7 +1428,9 @@ export function renderPropertiesPanelTemplate(ctx) {
                   title="Clear hidden"
                   @click=${(/** @type {any} */ e) => {
                     e.stopPropagation();
-                    update(updateProperty(getState(), path, "hidden", undefined));
+                    transactDoc(activeTab.value, (t) =>
+                      mutateUpdateProperty(t, path, "hidden", undefined),
+                    );
                   }}
                 ></span>`
               : nothing}
@@ -1367,7 +1440,9 @@ export function renderPropertiesPanelTemplate(ctx) {
             size="s"
             .checked=${live(!!node.hidden)}
             @change=${(/** @type {any} */ e) =>
-              update(updateProperty(getState(), path, "hidden", e.target.checked || undefined))}
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateProperty(t, path, "hidden", e.target.checked || undefined),
+              )}
           >
           </sp-checkbox>
         </div>
@@ -1403,9 +1478,9 @@ export function renderPropertiesPanelTemplate(ctx) {
     : nothing;
 
   const observedAttrsT =
-    isCustomElementDoc(S) && isRoot
+    isCustomElementDoc({ document: tab.doc.document }) && isRoot
       ? (() => {
-          const state = S.document.state || {};
+          const state = tab.doc.document.state || {};
           const entries = Object.entries(state).filter(([, d]) => d.attribute);
           return html`
             <sp-accordion-item label="Observed Attributes" ?open=${isSectionOpen("__observed")}>
@@ -1508,7 +1583,7 @@ export function renderPropertiesPanelTemplate(ctx) {
     : nothing;
 
   const cssPropsT =
-    isCustomElementDoc(S) && isRoot
+    isCustomElementDoc({ document: tab.doc.document }) && isRoot
       ? (() => {
           const style = node.style || {};
           const cssProps = Object.entries(style).filter(([k]) => k.startsWith("--"));
@@ -1537,9 +1612,9 @@ export function renderPropertiesPanelTemplate(ctx) {
       : nothing;
 
   const cssPartsT =
-    isCustomElementDoc(S) && isRoot
+    isCustomElementDoc({ document: tab.doc.document }) && isRoot
       ? (() => {
-          const parts = collectCssParts(S.document);
+          const parts = collectCssParts(tab.doc.document);
           if (parts.length === 0) return nothing;
           return html`
             <sp-accordion-item
@@ -1565,10 +1640,10 @@ export function renderPropertiesPanelTemplate(ctx) {
       : nothing;
 
   const frontmatterT =
-    S.mode === "content"
+    tab.doc.mode === "content"
       ? (() => {
-          const fm = S.content?.frontmatter || {};
-          const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
+          const fm = tab.doc.content?.frontmatter || {};
+          const col = findContentTypeSchema(tab.documentPath, projectState?.projectConfig);
           const schemaProps = col?.schema?.properties;
           const requiredFields = new Set(col?.schema?.required || []);