@jxsuite/studio 0.10.2 → 0.11.0

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.
  *

package/src/store.js

@@ -164,7 +164,15 @@ export function stripEventHandlers(node) {
       const cases = {};
       for (const [ck, cv] of Object.entries(v)) cases[ck] = stripEventHandlers(cv);
       out.cases = cases;
-    } else if (k === "state" || k === "style" || k === "attributes" || k === "$media") {
+    } else if (k === "state" && typeof v === "object" && v !== null) {
+      /** @type {Record<string, any>} */
+      const state = {};
+      for (const [sk, sv] of Object.entries(v)) {
+        if (sv && typeof sv === "object" && sv.timing === "server") continue;
+        state[sk] = sv;
+      }
+      out.state = state;
+    } else if (k === "style" || k === "attributes" || k === "$media") {
       out[k] = v;
     } else {
       out[k] = v;

package/src/ui/spectrum.js

@@ -47,6 +47,7 @@ import { PickerButton } from "@spectrum-web-components/picker-button/src/PickerB
 import { Accordion } from "@spectrum-web-components/accordion/src/Accordion.js";
 import { AccordionItem } from "@spectrum-web-components/accordion/src/AccordionItem.js";
 import { ActionBar } from "@spectrum-web-components/action-bar/src/ActionBar.js";
+import { Toast } from "@spectrum-web-components/toast/src/Toast.js";
 import { Table } from "@spectrum-web-components/table/src/Table.js";
 import { TableHead } from "@spectrum-web-components/table/src/TableHead.js";
 import { TableHeadCell } from "@spectrum-web-components/table/src/TableHeadCell.js";
@@ -180,6 +181,7 @@ const components = [
   ["sp-accordion", Accordion],
   ["sp-accordion-item", AccordionItem],
   ["sp-action-bar", ActionBar],
+  ["sp-toast", Toast],
   ["sp-table", Table],
   ["sp-table-head", TableHead],
   ["sp-table-head-cell", TableHeadCell],

package/src/view.js

@@ -61,6 +61,9 @@ export const view = {
   showAddBreakpointForm: false,
   addBreakpointPreview: "",
 
+  // Layout selection (when user clicks a layout element)
+  layoutSelection: null,
+
   // Autosave
   autosaveTimer: null,
 };