@jxsuite/studio 0.10.2 → 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";
@@ -35,6 +30,10 @@ import {
 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";
 
 /**
@@ -67,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]) =>
@@ -208,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 || []);
 
@@ -245,9 +244,12 @@ function renderFrontmatterOnlyPanel() {
     return html`<div class="empty-state">No frontmatter. Select an element to inspect.</div>`;
   }
 
+  const pageT = renderPageSection(tab.doc.document || {});
+
   return html`
     <div class="style-sidebar">
       <sp-accordion allow-multiple size="s">
+        ${pageT}
         <sp-accordion-item label=${col ? `Frontmatter (${col.name})` : "Frontmatter"} open>
           <div class="style-section-body">
             ${fields.map((f) => renderFmFieldRow(f.field, f.entry, f.value, requiredFields))}
@@ -265,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({
@@ -283,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>
       `,
     });
@@ -308,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>
       `,
@@ -326,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>`,
@@ -336,6 +342,74 @@ function renderFmFieldRow(
     });
   }
 
+  if (entry.format === "image") {
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: renderMediaPicker(field, value, (v) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
+      ),
+    });
+  }
+
+  if (entry.type === "array" && entry.items?.format === "image") {
+    const images = Array.isArray(value) ? value : [];
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: html`
+        <div class="gallery-picker">
+          <div class="gallery-picker-strip">
+            ${images.map(
+              (img, i) => html`
+                <div class="gallery-picker-item">
+                  <img src=${img} alt="" class="gallery-picker-thumb" />
+                  <sp-action-button
+                    size="xs"
+                    quiet
+                    title="Remove"
+                    @click=${() => {
+                      const next = images.filter((_, idx) => idx !== i);
+                      transactDoc(activeTab.value, (t) =>
+                        mutateUpdateFrontmatter(t, field, next.length ? next : undefined),
+                      );
+                    }}
+                  >
+                    <sp-icon-close slot="icon"></sp-icon-close>
+                  </sp-action-button>
+                </div>
+              `,
+            )}
+          </div>
+          ${renderMediaPicker(`${field}:add`, "", (v) => {
+            if (!v) return;
+            const next = [...images, v];
+            transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, next));
+          })}
+        </div>
+      `,
+    });
+  }
+
+  if (entry.$ref) {
+    const targetName = entry.$ref.replace("#/contentTypes/", "");
+    const targetDef = projectState?.projectConfig?.contentTypes?.[targetName];
+    const picker = renderReferencePicker(field, value, targetName, targetDef, (v) =>
+      transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
+    );
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: picker,
+    });
+  }
+
   if (entry.type === "number") {
     return renderFieldRow({
       prop: field,
@@ -349,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>
       `,
@@ -367,13 +443,87 @@ 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>
     `,
   });
 }
 
+// ─── Reference picker ────────────────────────────────────────────────────────
+
+/** @type {Map<string, { slug: string; title: string }[]>} */
+const refEntriesCache = new Map();
+
+/**
+ * Render a reference field as a picker of entries from the target content type.
+ *
+ * @param {string} field
+ * @param {any} value
+ * @param {string} targetName
+ * @param {any} targetDef
+ * @param {(val: any) => void} onCommit
+ */
+function renderReferencePicker(field, value, targetName, targetDef, onCommit) {
+  if (!targetDef?.source) {
+    return html`<sp-textfield
+      size="s"
+      placeholder="slug"
+      .value=${live(value || "")}
+      @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {any} */ e) =>
+        onCommit(e.target.value),
+      )}
+    ></sp-textfield>`;
+  }
+
+  const cacheKey = targetName;
+  if (!refEntriesCache.has(cacheKey)) {
+    loadRefEntries(targetName, targetDef);
+  }
+  const entries = refEntriesCache.get(cacheKey) || [];
+
+  return html`
+    <sp-picker
+      size="s"
+      label=${targetName}
+      .value=${live(value || "")}
+      @change=${(/** @type {any} */ e) => onCommit(e.target.value || undefined)}
+    >
+      <sp-menu-item value="">— none —</sp-menu-item>
+      ${entries.map(
+        (ent) => html`<sp-menu-item value=${ent.slug}>${ent.title || ent.slug}</sp-menu-item>`,
+      )}
+    </sp-picker>
+  `;
+}
+
+async function loadRefEntries(/** @type {string} */ targetName, /** @type {any} */ targetDef) {
+  const platform = getPlatform();
+  const sourceDir = targetDef.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+  try {
+    const listing = await platform.listDirectory(sourceDir);
+    const entries = [];
+    for (const item of listing) {
+      if (item.type === "directory") continue;
+      const slug = item.name.replace(/\.[^.]+$/, "");
+      let title = slug;
+      try {
+        const content = await platform.readFile(item.path);
+        const match = content.match(/^---[\s\S]*?title:\s*(.+?)[\r\n]/m);
+        if (match) title = match[1].trim().replace(/^["']|["']$/g, "");
+      } catch {}
+      entries.push({ slug, title });
+    }
+    refEntriesCache.set(targetName, entries);
+  } catch {}
+}
+
+export function invalidateRefCache() {
+  refEntriesCache.clear();
+}
+
 // ─── Sub-templates ──────────────────────────────────────────────────────────
 
 /** Repeater fields template */
@@ -382,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}
@@ -418,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
           >
         `
@@ -438,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,
     )}
@@ -460,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);
             }}
           />
@@ -470,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
           >
@@ -478,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
           >
@@ -488,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
     >
@@ -502,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",
   );
@@ -583,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)}
@@ -662,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
     >
   `;
@@ -701,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}
@@ -757,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));
                     }
                   }}
                 >
@@ -805,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);
           }}
@@ -818,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>
@@ -830,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,
             );
           }}
@@ -840,6 +1030,153 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
   `;
 }
 
+// ─── Layout picker ──────────────────────────────────────────────────────────
+
+/** @type {{ name: string; path: string }[] | null} */
+let layoutEntries = null;
+
+async function loadLayoutEntries() {
+  try {
+    const platform = getPlatform();
+    const listing = await platform.listDirectory("layouts");
+    layoutEntries = listing
+      .filter((/** @type {any} */ f) => f.type === "file" && f.name.endsWith(".json"))
+      .map((/** @type {any} */ f) => ({
+        name: f.name.replace(/\.json$/, ""),
+        path: `./layouts/${f.name}`,
+      }));
+  } catch {
+    layoutEntries = [];
+  }
+  renderOnly("rightPanel");
+}
+
+export function invalidateLayoutPickerCache() {
+  layoutEntries = null;
+}
+
+function isPageDocument(/** @type {any} */ documentPath) {
+  if (!documentPath || !projectState?.isSiteProject) return false;
+  return documentPath.startsWith("pages/") || documentPath.startsWith("./pages/");
+}
+
+function renderPageSection(/** @type {any} */ node) {
+  const tab = activeTab.value;
+  if (!isPageDocument(tab.documentPath)) return nothing;
+
+  if (layoutEntries === null) {
+    loadLayoutEntries();
+    return nothing;
+  }
+
+  const currentLayout = node.$layout;
+  const defaultLayout = projectState?.projectConfig?.defaults?.layout;
+  const effectivePath = getEffectiveLayoutPath(currentLayout);
+  const displayValue =
+    currentLayout === false ? "__none__" : currentLayout ? currentLayout : "__default__";
+
+  return html`
+    <sp-accordion-item label="Page" open>
+      <div class="style-section-body">
+        <div class="style-row" data-prop="$layout">
+          <div class="style-row-label">
+            ${currentLayout !== undefined
+              ? html`<span
+                  class="set-dot"
+                  title="Reset to default"
+                  @click=${(/** @type {any} */ e) => {
+                    e.stopPropagation();
+                    transactDoc(activeTab.value, (t) =>
+                      mutateUpdateProperty(t, [], "$layout", undefined),
+                    );
+                  }}
+                ></span>`
+              : nothing}
+            <sp-field-label size="s">Layout</sp-field-label>
+          </div>
+          <sp-picker
+            size="s"
+            value=${displayValue}
+            @change=${(/** @type {any} */ e) => {
+              const val = e.target.value;
+              if (val === "__default__") {
+                transactDoc(activeTab.value, (t) =>
+                  mutateUpdateProperty(t, [], "$layout", undefined),
+                );
+              } else if (val === "__none__") {
+                transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, [], "$layout", false));
+              } else {
+                transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, [], "$layout", val));
+              }
+              invalidateLayoutCache();
+            }}
+          >
+            <sp-menu-item value="__default__"
+              >Default${defaultLayout
+                ? ` (${defaultLayout.replace(/^\.\/layouts\//, "").replace(/\.json$/, "")})`
+                : ""}</sp-menu-item
+            >
+            <sp-menu-item value="__none__">None</sp-menu-item>
+            <sp-menu-divider></sp-menu-divider>
+            ${layoutEntries.map(
+              (/** @type {any} */ l) =>
+                html`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`,
+            )}
+          </sp-picker>
+        </div>
+        ${effectivePath
+          ? html`<div style="font-size:10px;color:var(--fg-dim);padding:2px 0;font-style:italic">
+              Wraps page content via &lt;slot&gt; distribution
+            </div>`
+          : nothing}
+      </div>
+    </sp-accordion-item>
+  `;
+}
+
+// ─── Layout selection panel ─────────────────────────────────────────────────
+
+function renderLayoutSelectionPanel(/** @type {any} */ ctx) {
+  const { el, layoutPath } = view.layoutSelection;
+  const tagName = el?.tagName?.toLowerCase() || "element";
+  const className = el?.className || "";
+  const displayPath = layoutPath || "layout";
+
+  return html`
+    <div class="style-sidebar">
+      <sp-accordion allow-multiple size="s">
+        <sp-accordion-item label="Layout Element" open>
+          <div class="style-section-body">
+            <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
+              <span
+                style="font-size:9px;padding:2px 6px;background:var(--spectrum-purple-600);color:white;border-radius:3px;text-transform:uppercase;letter-spacing:0.5px"
+                >Layout</span
+              >
+              <code style="font-size:12px;font-family:monospace">&lt;${tagName}&gt;</code>
+            </div>
+            ${className
+              ? html`<div class="style-row">
+                  <div class="style-row-label">
+                    <sp-field-label size="s">Class</sp-field-label>
+                  </div>
+                  <span style="font-size:11px;color:var(--fg-dim);word-break:break-all"
+                    >${className}</span
+                  >
+                </div>`
+              : nothing}
+            <div style="font-size:10px;color:var(--fg-dim);padding:4px 0;font-style:italic">
+              This element is part of the page layout. Edit it by opening the layout file.
+            </div>
+            <span class="kv-add" @click=${() => ctx.navigateToComponent(displayPath)}
+              >Open Layout →</span
+            >
+          </div>
+        </sp-accordion-item>
+      </sp-accordion>
+    </div>
+  `;
+}
+
 // ─── Main entry point ───────────────────────────────────────────────────────
 
 /**
@@ -848,18 +1185,24 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
  * @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";
@@ -889,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>
         `,
@@ -906,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)),
       ),
     });
   }
@@ -936,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));
 
@@ -948,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 ─────────────────────────────────────────
@@ -976,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>
@@ -988,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}
@@ -998,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>
@@ -1010,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}
@@ -1020,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>
@@ -1034,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}
@@ -1049,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>
@@ -1065,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}
@@ -1075,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>
@@ -1111,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")}>
@@ -1216,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("--"));
@@ -1245,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
@@ -1273,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 || []);
 
@@ -1323,15 +1690,17 @@ export function renderPropertiesPanelTemplate(ctx) {
         })()
       : nothing;
 
+  const pageT = isRoot ? renderPageSection(node) : nothing;
+
   // ── Assemble ──
   const tpl = html`
     <div class="style-sidebar">
       <sp-accordion allow-multiple size="s">
-        ${frontmatterT} ${isMapNode ? repeaterT : elemT} ${isMapNode ? nothing : observedAttrsT}
-        ${isMapNode ? nothing : switchT} ${isMapNode ? nothing : compPropsT}
-        ${isMapNode ? nothing : attrSectionTemplates} ${isMapNode ? nothing : customSectionT}
-        ${isMapNode ? nothing : mediaT} ${isMapNode ? nothing : cssPropsT}
-        ${isMapNode ? nothing : cssPartsT}
+        ${pageT} ${frontmatterT} ${isMapNode ? repeaterT : elemT}
+        ${isMapNode ? nothing : observedAttrsT} ${isMapNode ? nothing : switchT}
+        ${isMapNode ? nothing : compPropsT} ${isMapNode ? nothing : attrSectionTemplates}
+        ${isMapNode ? nothing : customSectionT} ${isMapNode ? nothing : mediaT}
+        ${isMapNode ? nothing : cssPropsT} ${isMapNode ? nothing : cssPartsT}
       </sp-accordion>
     </div>
   `;