@jxsuite/studio 0.10.2 → 0.11.0

package/src/panels/properties-panel.js

@@ -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";
 
 /**
@@ -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();
@@ -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

@@ -19,7 +19,7 @@ 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";
@@ -351,6 +351,7 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
       }
     }
     if (activeBreakpoints) {
+      // Check media overrides nested inside the tag style (selector wraps media)
       for (const [key, val] of Object.entries(tagStyle)) {
         if (!key.startsWith("@") || typeof val !== "object") continue;
         const mediaName = key.slice(1);
@@ -367,6 +368,27 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
       }
     }
   }
+  // Check top-level @media keys for tag-specific overrides (media wraps selector)
+  if (activeBreakpoints) {
+    const selector = compoundSelector || `& ${entry.tag}`;
+    for (const [key, val] of Object.entries(rootStyle)) {
+      if (!key.startsWith("@") || typeof val !== "object") continue;
+      const mediaName = key.slice(1);
+      if (mediaName === "--") continue;
+      if (activeBreakpoints.has(mediaName)) {
+        const mediaTagStyle = /** @type {any} */ (val)[selector];
+        if (mediaTagStyle && typeof mediaTagStyle === "object") {
+          for (const [prop, v] of Object.entries(mediaTagStyle)) {
+            if (typeof v === "string" || typeof v === "number") {
+              try {
+                /** @type {any} */ (el.style)[prop] = v;
+              } catch {}
+            }
+          }
+        }
+      }
+    }
+  }
   if (entry.children) {
     for (const child of entry.children) {
       el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints, entry.tag));
@@ -382,6 +404,7 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
  * @returns {Promise<HTMLElement>}
  */
 export async function renderComponentPreview(comp) {
+  setSkipServerFunctions(true);
   try {
     if (comp.source === "npm") {
       if (!customElements.get(comp.tagName)) {
@@ -416,7 +439,13 @@ export async function renderComponentPreview(comp) {
  */
 function hasTagStyle(rootStyle, tag) {
   const s = rootStyle[`& ${tag}`];
-  return s && typeof s === "object" && Object.keys(s).length > 0;
+  if (s && typeof s === "object" && Object.keys(s).length > 0) return true;
+  const selector = `& ${tag}`;
+  for (const [key, val] of Object.entries(rootStyle)) {
+    if (!key.startsWith("@") || typeof val !== "object") continue;
+    if (/** @type {any} */ (val)[selector]) return true;
+  }
+  return false;
 }
 
 /**

package/src/settings/content-types-editor.js

@@ -163,6 +163,20 @@ function handleChangeType(fieldName, newType, rerender) {
   saveProjectConfig();
 }
 
+/**
+ * @param {string} fieldName
+ * @param {string} target
+ * @param {() => void} rerender
+ */
+function handleChangeRefTarget(fieldName, target, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties) return;
+
+  schema.properties[fieldName] = { $ref: `#/contentTypes/${target}` };
+  rerender();
+  saveProjectConfig();
+}
+
 // ─── Nested field handlers ───────────────────────────────────────────────────
 
 /**
@@ -367,6 +381,7 @@ export function renderContentTypesEditor(container) {
       onToggleRequired: (n) => handleToggleRequired(n, rerender),
       onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
       onChangeType: (n, t) => handleChangeType(n, t, rerender),
+      onChangeRefTarget: (n, target) => handleChangeRefTarget(n, target, rerender),
       onAddNestedField: (p, s) => handleAddNestedField(p, s, rerender),
       onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
       onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
@@ -375,7 +390,13 @@ export function renderContentTypesEditor(container) {
     };
 
     const fieldCards = Object.entries(properties).map(([name, def]) =>
-      fieldCardTpl(name, /** @type {any} */ (def), required.includes(name), handlers),
+      fieldCardTpl(
+        name,
+        /** @type {any} */ (def),
+        required.includes(name),
+        handlers,
+        contentTypeNames,
+      ),
     );
 
     editorTpl = html`

package/src/settings/schema-field-ui.js

@@ -5,7 +5,17 @@
 
 import { html, nothing } from "lit-html";
 
-export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "date"];
+export const FIELD_TYPES = [
+  "string",
+  "number",
+  "boolean",
+  "array",
+  "object",
+  "date",
+  "image",
+  "gallery",
+  "reference",
+];
 
 /**
  * @typedef {{
@@ -14,6 +24,7 @@ export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "d
  *   required?: string[];
  *   items?: any;
  *   format?: string;
+ *   $ref?: string;
  * }} SchemaProperty
  */
 
@@ -23,6 +34,7 @@ export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "d
  *   onToggleRequired: (name: string) => void;
  *   onRename: (oldName: string, newName: string) => void;
  *   onChangeType: (name: string, newType: string) => void;
+ *   onChangeRefTarget?: (name: string, target: string) => void;
  *   onAddNestedField?: (
  *     parentName: string,
  *     state: { name: string; type: string; required: boolean },
@@ -34,6 +46,20 @@ export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "d
  * }} FieldHandlers
  */
 
+/**
+ * Detect the studio field type from a JSON Schema property definition.
+ *
+ * @param {SchemaProperty} schema
+ * @returns {string}
+ */
+export function detectFieldType(schema) {
+  if (schema.$ref) return "reference";
+  if (schema.format === "image") return "image";
+  if (schema.format === "date") return "date";
+  if (schema.type === "array" && schema.items?.format === "image") return "gallery";
+  return schema.type || "string";
+}
+
 /**
  * Render a single schema field as an inline-editable form row.
  *
@@ -41,13 +67,16 @@ export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "d
  * @param {SchemaProperty} fieldSchema — JSON Schema property definition
  * @param {boolean} isRequired
  * @param {FieldHandlers} handlers
+ * @param {string[]} [contentTypeNames] - Available content type names for reference target picker
  * @returns {any}
  */
-export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
-  const type = fieldSchema.format === "date" ? "date" : fieldSchema.type || "string";
+export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, contentTypeNames = []) {
+  const type = detectFieldType(fieldSchema);
   const isNested = type === "object";
+  const isRef = type === "reference";
   const nestedProps = fieldSchema.properties || {};
   const nestedRequired = fieldSchema.required || [];
+  const refTarget = fieldSchema.$ref ? fieldSchema.$ref.replace("#/contentTypes/", "") : "";
 
   return html`
     <div class="schema-field-card">
@@ -87,6 +116,23 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
           <sp-icon-delete slot="icon"></sp-icon-delete>
         </sp-action-button>
       </div>
+      ${isRef && contentTypeNames.length
+        ? html`
+            <div class="schema-field-ref-target">
+              <sp-picker
+                size="s"
+                label="Target"
+                value=${refTarget}
+                @change=${(/** @type {any} */ e) => {
+                  if (handlers.onChangeRefTarget)
+                    handlers.onChangeRefTarget(fieldName, e.target.value);
+                }}
+              >
+                ${contentTypeNames.map((n) => html`<sp-menu-item value=${n}>${n}</sp-menu-item>`)}
+              </sp-picker>
+            </div>
+          `
+        : nothing}
       ${isNested
         ? html`
             <div class="schema-field-nested">
@@ -119,7 +165,7 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
  * @returns {any}
  */
 function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, handlers) {
-  const type = childSchema.format === "date" ? "date" : childSchema.type || "string";
+  const type = detectFieldType(childSchema);
 
   return html`
     <div class="schema-field-card schema-field-card--nested">
@@ -300,6 +346,12 @@ export function schemaForType(type) {
       return { type: "object", properties: {}, required: [] };
     case "date":
       return { type: "string", format: "date" };
+    case "image":
+      return { type: "string", format: "image" };
+    case "gallery":
+      return { type: "array", items: { type: "string", format: "image" } };
+    case "reference":
+      return { $ref: "#/contentTypes/" };
     default:
       return { type: "string" };
   }
@@ -314,6 +366,7 @@ export function schemaForType(type) {
  */
 export function yamlDefault(type, format) {
   if (format === "date") return new Date().toISOString().split("T")[0];
+  if (format === "image") return '""';
   switch (type) {
     case "boolean":
       return "false";