@jxsuite/studio 0.10.1 → 0.11.0

package/src/panels/properties-panel.js

@@ -27,7 +27,7 @@ import { renderFieldRow } from "../ui/field-row.js";
 import {
   attrLabel,
   inferInputType,
-  findCollectionSchema,
+  findContentTypeSchema,
   friendlyNameToVar,
   camelToLabel,
   parseCemType,
@@ -35,6 +35,9 @@ 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 { getEffectiveLayoutPath, invalidateLayoutCache } from "../site-context.js";
+import { getPlatform } from "../platform.js";
 import htmlMeta from "../../data/html-meta.json";
 
 /**
@@ -210,7 +213,7 @@ function kvRow(
 function renderFrontmatterOnlyPanel() {
   const S = getState();
   const fm = S.content?.frontmatter || {};
-  const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+  const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
   const schemaProps = col?.schema?.properties;
   const requiredFields = new Set(col?.schema?.required || []);
 
@@ -245,9 +248,12 @@ function renderFrontmatterOnlyPanel() {
     return html`<div class="empty-state">No frontmatter. Select an element to inspect.</div>`;
   }
 
+  const pageT = renderPageSection(S.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))}
@@ -336,6 +342,72 @@ function renderFmFieldRow(
     });
   }
 
+  if (entry.format === "image") {
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: renderMediaPicker(field, value, (v) =>
+        update(updateFrontmatter(getState(), 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);
+                      update(updateFrontmatter(getState(), 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];
+            update(updateFrontmatter(getState(), 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) =>
+      update(updateFrontmatter(getState(), field, v || undefined)),
+    );
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: picker,
+    });
+  }
+
   if (entry.type === "number") {
     return renderFieldRow({
       prop: field,
@@ -374,6 +446,78 @@ function renderFmFieldRow(
   });
 }
 
+// ─── 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 */
@@ -840,6 +984,149 @@ 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 S = getState();
+  if (!isPageDocument(S.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();
+                    update(updateProperty(getState(), [], "$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__") {
+                update(updateProperty(getState(), [], "$layout", undefined));
+              } else if (val === "__none__") {
+                update(updateProperty(getState(), [], "$layout", false));
+              } else {
+                update(updateProperty(getState(), [], "$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 ───────────────────────────────────────────────────────
 
 /**
@@ -850,6 +1137,11 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
 export function renderPropertiesPanelTemplate(ctx) {
   const S = getState();
 
+  // 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") {
       return renderFrontmatterOnlyPanel();
@@ -1276,7 +1568,7 @@ export function renderPropertiesPanelTemplate(ctx) {
     S.mode === "content"
       ? (() => {
           const fm = S.content?.frontmatter || {};
-          const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+          const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
           const schemaProps = col?.schema?.properties;
           const requiredFields = new Set(col?.schema?.required || []);
 
@@ -1323,15 +1615,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>
   `;

package/src/panels/stylebook-panel.js

@@ -1,6 +1,6 @@
 /**
  * Stylebook panel — renders the Settings mode canvas (element catalog, design variables,
- * definitions, collections). Extracted from studio.js Phase 4e.
+ * definitions, content types). Extracted from studio.js Phase 4e.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
@@ -19,14 +19,14 @@ import {
   projectState,
 } from "../store.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";
 import { mediaDisplayName } from "./shared.js";
 import { friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
 import { renderDefsEditor } from "../settings/defs-editor.js";
-import { renderCollectionsEditor } from "../settings/collections-editor.js";
+import { renderContentTypesEditor } from "../settings/content-types-editor.js";
 import stylebookMeta from "../../data/stylebook-meta.json";
 
 export { stylebookMeta };
@@ -67,12 +67,12 @@ export function renderStylebookMode(ctx) {
       >
         <sp-tab label="Stylebook" value="stylebook"></sp-tab>
         <sp-tab label="Definitions" value="definitions"></sp-tab>
-        <sp-tab label="Collections" value="collections"></sp-tab>
+        <sp-tab label="Content Types" value="contentTypes"></sp-tab>
       </sp-tabs>
     </div>
   `;
 
-  if (settingsTab === "definitions" || settingsTab === "collections") {
+  if (settingsTab === "definitions" || settingsTab === "contentTypes") {
     /** @type {any} */ (canvasWrap).style.overflow = "hidden";
 
     litRender(
@@ -88,7 +88,7 @@ export function renderStylebookMode(ctx) {
       canvasWrap.querySelector(".settings-editor-container")
     );
     if (settingsTab === "definitions") renderDefsEditor(container);
-    else renderCollectionsEditor(container);
+    else renderContentTypesEditor(container);
     return;
   }
 
@@ -261,12 +261,6 @@ export function selectStylebookTag(tag, media) {
     },
   });
   renderStylebookOverlays();
-  requestAnimationFrame(() => {
-    if (canvasPanels.length > 0) {
-      const el = findStylebookEl(canvasPanels[0].canvas, tag);
-      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  });
 }
 
 /** Draw selection + hover overlays for stylebook elements */
@@ -324,7 +318,7 @@ export function renderStylebookOverlays() {
   }
 }
 
-// ─── Internal helpers ─────────────────────────────────────────────────────────
+// ─── Internal helpers (exported for testing) ─────────────────────────────────
 
 /**
  * Build a DOM element tree from a stylebook-meta.json entry.
@@ -332,8 +326,9 @@ export function renderStylebookOverlays() {
  * @param {any} entry
  * @param {any} rootStyle
  * @param {any} activeBreakpoints
+ * @param {string | null} [parentTag]
  */
-function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
+export function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag = null) {
   const el = document.createElement(entry.tag);
   if (entry.text) el.textContent = entry.text;
   if (entry.attributes) {
@@ -344,7 +339,9 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
     }
   }
   if (entry.style) el.style.cssText = entry.style;
-  const tagStyle = rootStyle[`& ${entry.tag}`];
+  const compoundSelector =
+    parentTag && parentTag !== entry.tag ? `& ${parentTag} ${entry.tag}` : null;
+  const tagStyle = (compoundSelector && rootStyle[compoundSelector]) || rootStyle[`& ${entry.tag}`];
   if (tagStyle) {
     for (const [prop, val] of Object.entries(tagStyle)) {
       if (typeof val === "string" || typeof val === "number") {
@@ -354,6 +351,7 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
       }
     }
     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);
@@ -370,9 +368,30 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
       }
     }
   }
+  // 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));
+      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints, entry.tag));
     }
   }
   return el;
@@ -385,6 +404,7 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
  * @returns {Promise<HTMLElement>}
  */
 export async function renderComponentPreview(comp) {
+  setSkipServerFunctions(true);
   try {
     if (comp.source === "npm") {
       if (!customElements.get(comp.tagName)) {
@@ -419,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;
 }
 
 /**
@@ -429,13 +455,19 @@ function hasTagStyle(rootStyle, tag) {
  * @param {any} customizedOnly
  * @param {any} activeBreakpoints
  */
-function renderStylebookElementsIntoCanvas(
+export function renderStylebookElementsIntoCanvas(
   canvasEl,
   rootStyle,
   filter,
   customizedOnly,
   activeBreakpoints,
 ) {
+  for (const [k, v] of Object.entries(rootStyle)) {
+    if (k.startsWith("--") && (typeof v === "string" || typeof v === "number")) {
+      canvasEl.style.setProperty(k, String(v));
+    }
+  }
+
   /** @type {import("lit-html").TemplateResult[]} */
   const sectionTemplates = [];
 
@@ -462,10 +494,11 @@ function renderStylebookElementsIntoCanvas(
             view.stylebookElToTag.set(card, entry.tag);
             elToPath.set(card, ["__sb", entry.tag]);
             for (const child of el.querySelectorAll("*")) {
-              const tag = child.tagName.toLowerCase();
+              const childTag = child.tagName.toLowerCase();
               if (!view.stylebookElToTag.has(child)) {
-                view.stylebookElToTag.set(child, tag);
-                elToPath.set(child, ["__sb", tag]);
+                const compound = childTag === entry.tag ? entry.tag : `${entry.tag} ${childTag}`;
+                view.stylebookElToTag.set(child, compound);
+                elToPath.set(child, ["__sb", compound]);
               }
             }
           })}
@@ -473,7 +506,10 @@ function renderStylebookElementsIntoCanvas(
           <div
             class="element-card-preview"
             ${ref((c) => {
-              if (c && !c.firstChild) c.appendChild(el);
+              if (c) {
+                c.textContent = "";
+                c.appendChild(el);
+              }
             })}
           ></div>
           <div class="element-card-label">&lt;${entry.tag}&gt;</div>