@jxsuite/studio 0.10.2 → 0.13.0

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

@@ -5,7 +5,9 @@
 
 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", "reference"];
+
+export const FORMAT_OPTIONS = ["", "image", "date", "color"];
 
 /**
  * @typedef {{
@@ -14,6 +16,7 @@ export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "d
  *   required?: string[];
  *   items?: any;
  *   format?: string;
+ *   $ref?: string;
  * }} SchemaProperty
  */
 
@@ -23,6 +26,8 @@ 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;
+ *   onChangeFormat?: (name: string, format: string) => void;
+ *   onChangeRefTarget?: (name: string, target: string) => void;
  *   onAddNestedField?: (
  *     parentName: string,
  *     state: { name: string; type: string; required: boolean },
@@ -31,9 +36,32 @@ export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "d
  *   onToggleNestedRequired?: (parentName: string, childName: string) => void;
  *   onRenameNested?: (parentName: string, oldChild: string, newChild: string) => void;
  *   onChangeNestedType?: (parentName: string, childName: string, newType: string) => void;
+ *   onChangeNestedFormat?: (parentName: string, childName: string, format: string) => void;
  * }} 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";
+  return schema.type || "string";
+}
+
+/**
+ * Detect the format from a JSON Schema property definition.
+ *
+ * @param {SchemaProperty} schema
+ * @returns {string}
+ */
+export function detectFieldFormat(schema) {
+  if (schema.type === "array" && schema.items?.format) return schema.items.format;
+  return schema.format || "";
+}
+
 /**
  * Render a single schema field as an inline-editable form row.
  *
@@ -41,13 +69,17 @@ 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 format = detectFieldFormat(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">
@@ -71,6 +103,11 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
           }}
         ></sp-textfield>
         ${typePickerTpl(type, (newType) => handlers.onChangeType(fieldName, newType))}
+        ${type === "string" || type === "array"
+          ? formatPickerTpl(format, (f) => {
+              if (handlers.onChangeFormat) handlers.onChangeFormat(fieldName, f);
+            })
+          : nothing}
         <sp-switch
           size="s"
           ?checked=${isRequired}
@@ -87,6 +124,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 +173,8 @@ 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);
+  const format = detectFieldFormat(childSchema);
 
   return html`
     <div class="schema-field-card schema-field-card--nested">
@@ -149,6 +204,12 @@ function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, hand
           if (handlers.onChangeNestedType)
             handlers.onChangeNestedType(parentName, childName, newType);
         })}
+        ${type === "string" || type === "array"
+          ? formatPickerTpl(format, (f) => {
+              if (handlers.onChangeNestedFormat)
+                handlers.onChangeNestedFormat(parentName, childName, f);
+            })
+          : nothing}
         <sp-switch
           size="s"
           ?checked=${isRequired}
@@ -244,10 +305,30 @@ export function typePickerTpl(value, onChange) {
   `;
 }
 
+/**
+ * Render the format picker as an sp-picker dropdown.
+ *
+ * @param {string} value
+ * @param {(format: string) => void} onChange
+ * @returns {any}
+ */
+export function formatPickerTpl(value, onChange) {
+  return html`
+    <sp-picker
+      size="s"
+      label="Format"
+      value=${value}
+      @change=${(/** @type {any} */ e) => onChange(e.target.value)}
+    >
+      ${FORMAT_OPTIONS.map((f) => html`<sp-menu-item value=${f}>${f || "(none)"}</sp-menu-item>`)}
+    </sp-picker>
+  `;
+}
+
 /**
  * Render the add-field form (inline, not a dialog).
  *
- * @param {{ name: string; type: string; required: boolean }} state
+ * @param {{ name: string; type: string; format: string; required: boolean }} state
  * @param {{
  *   onInput: (field: string, value: any) => void;
  *   onConfirm: () => void;
@@ -269,6 +350,9 @@ export function addFieldFormTpl(state, handlers) {
         }}
       ></sp-textfield>
       ${typePickerTpl(state.type, (t) => handlers.onInput("type", t))}
+      ${state.type === "string" || state.type === "array"
+        ? formatPickerTpl(state.format || "", (f) => handlers.onInput("format", f))
+        : nothing}
       <sp-switch
         size="s"
         ?checked=${state.required}
@@ -283,25 +367,28 @@ export function addFieldFormTpl(state, handlers) {
 }
 
 /**
- * Build a JSON Schema property definition from a type string.
+ * Build a JSON Schema property definition from a type and optional format.
  *
  * @param {string} type
+ * @param {string} [format]
  * @returns {object}
  */
-export function schemaForType(type) {
+export function schemaForType(type, format) {
   switch (type) {
     case "number":
       return { type: "number" };
     case "boolean":
       return { type: "boolean" };
     case "array":
-      return { type: "array", items: { type: "string" } };
+      return format
+        ? { type: "array", items: { type: "string", format } }
+        : { type: "array", items: { type: "string" } };
     case "object":
       return { type: "object", properties: {}, required: [] };
-    case "date":
-      return { type: "string", format: "date" };
+    case "reference":
+      return { $ref: "#/contentTypes/" };
     default:
-      return { type: "string" };
+      return format ? { type: "string", format } : { type: "string" };
   }
 }
 
@@ -314,6 +401,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";

package/src/site-context.js

@@ -109,6 +109,111 @@ export function getEffectiveHead(docHead) {
   return merged;
 }
 
+// ─── Layout resolution ──────────────────────────────────────────────────────
+
+/** @type {Map<string, any>} */
+const layoutCache = new Map();
+
+export function invalidateLayoutCache() {
+  layoutCache.clear();
+}
+
+/**
+ * Determine the effective layout path for a document.
+ *
+ * @param {any} docLayout - The document's $layout value (string path, false, or undefined)
+ * @returns {string | null} The layout path, or null if no layout applies
+ */
+export function getEffectiveLayoutPath(docLayout) {
+  if (docLayout === false) return null;
+  const defaultLayout = projectState?.projectConfig?.defaults?.layout;
+  return docLayout || defaultLayout || null;
+}
+
+/**
+ * Resolve a layout document by path. Fetches and caches the parsed JSON.
+ *
+ * @param {string} layoutPath - Relative path to the layout file (e.g., "./layouts/base.json")
+ * @returns {Promise<any | null>} The parsed layout document, or null on failure
+ */
+export async function resolveLayoutDoc(layoutPath) {
+  const normalized = layoutPath.replace(/^\.\//, "");
+  if (layoutCache.has(normalized)) return structuredClone(layoutCache.get(normalized));
+
+  try {
+    const platform = getPlatform();
+    const content = await platform.readFile(normalized);
+    const doc = JSON.parse(content);
+    layoutCache.set(normalized, doc);
+    return structuredClone(doc);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Distribute page children into a layout document's <slot> elements. Returns the merged document
+ * with page content injected into slots.
+ *
+ * @param {any} layoutDoc - Deep-cloned layout document
+ * @param {any} pageDoc - The page document
+ * @returns {any} The merged document
+ */
+export function distributePageIntoLayout(layoutDoc, pageDoc) {
+  const pageChildren = pageDoc.children ?? [];
+  const children = typeof pageChildren === "string" ? [pageChildren] : pageChildren;
+
+  const named = new Map();
+  const defaults = [];
+
+  for (const child of children) {
+    if (child && typeof child === "object" && child.attributes?.slot) {
+      const slotName = child.attributes.slot;
+      if (!named.has(slotName)) named.set(slotName, []);
+      named.get(slotName).push(child);
+    } else {
+      defaults.push(child);
+    }
+  }
+
+  fillSlots(layoutDoc, named, defaults);
+
+  if (pageDoc.state) layoutDoc.state = { ...layoutDoc.state, ...pageDoc.state };
+  if (pageDoc.$media) layoutDoc.$media = { ...layoutDoc.$media, ...pageDoc.$media };
+  if (pageDoc.style) layoutDoc.style = { ...layoutDoc.style, ...pageDoc.style };
+  if (pageDoc.attributes) layoutDoc.attributes = { ...layoutDoc.attributes, ...pageDoc.attributes };
+
+  return layoutDoc;
+}
+
+function fillSlots(
+  /** @type {any} */ node,
+  /** @type {Map<string, any[]>} */ named,
+  /** @type {any[]} */ defaults,
+) {
+  if (!node || typeof node !== "object") return;
+  if (!Array.isArray(node.children)) return;
+
+  const newChildren = [];
+  for (const child of node.children) {
+    if (child && typeof child === "object" && child.tagName === "slot") {
+      const slotName = child.attributes?.name;
+      if (slotName && named.has(slotName)) {
+        newChildren.push(.../** @type {any[]} */ (named.get(slotName)));
+        named.delete(slotName);
+      } else if (!slotName && defaults.length > 0) {
+        newChildren.push(...defaults);
+      } else if (child.children) {
+        newChildren.push(...child.children);
+      }
+    } else {
+      fillSlots(child, named, defaults);
+      newChildren.push(child);
+    }
+  }
+  node.children = newChildren;
+}
+
 /**
  * Update the project's project.json with a partial patch and persist to disk.
  *