@jxsuite/studio 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,35 +30,36 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.10.0",
-    "@spectrum-web-components/accordion": "^1.12.0",
-    "@spectrum-web-components/action-bar": "1.12.0",
-    "@spectrum-web-components/action-button": "^1.12.0",
-    "@spectrum-web-components/action-group": "^1.12.0",
-    "@spectrum-web-components/checkbox": "^1.12.0",
-    "@spectrum-web-components/color-area": "^1.12.0",
-    "@spectrum-web-components/color-handle": "^1.12.0",
-    "@spectrum-web-components/color-slider": "^1.12.0",
-    "@spectrum-web-components/combobox": "^1.12.0",
-    "@spectrum-web-components/dialog": "^1.12.0",
-    "@spectrum-web-components/divider": "^1.12.0",
-    "@spectrum-web-components/icon": "^1.12.0",
-    "@spectrum-web-components/icons-workflow": "^1.12.0",
-    "@spectrum-web-components/menu": "^1.12.0",
-    "@spectrum-web-components/number-field": "^1.12.0",
-    "@spectrum-web-components/overlay": "^1.12.0",
+    "@jxsuite/runtime": "^0.10.2",
+    "@spectrum-web-components/accordion": "^1.12.1",
+    "@spectrum-web-components/action-bar": "1.12.1",
+    "@spectrum-web-components/action-button": "^1.12.1",
+    "@spectrum-web-components/action-group": "^1.12.1",
+    "@spectrum-web-components/checkbox": "^1.12.1",
+    "@spectrum-web-components/color-area": "^1.12.1",
+    "@spectrum-web-components/color-handle": "^1.12.1",
+    "@spectrum-web-components/color-slider": "^1.12.1",
+    "@spectrum-web-components/combobox": "^1.12.1",
+    "@spectrum-web-components/dialog": "^1.12.1",
+    "@spectrum-web-components/divider": "^1.12.1",
+    "@spectrum-web-components/icon": "^1.12.1",
+    "@spectrum-web-components/icons-workflow": "^1.12.1",
+    "@spectrum-web-components/menu": "^1.12.1",
+    "@spectrum-web-components/number-field": "^1.12.1",
+    "@spectrum-web-components/overlay": "^1.12.1",
     "@spectrum-web-components/overlay-trigger": "^0.1.7",
-    "@spectrum-web-components/picker": "^1.12.0",
-    "@spectrum-web-components/picker-button": "^1.12.0",
-    "@spectrum-web-components/popover": "^1.12.0",
-    "@spectrum-web-components/search": "^1.12.0",
-    "@spectrum-web-components/swatch": "^1.12.0",
-    "@spectrum-web-components/switch": "^1.12.0",
-    "@spectrum-web-components/table": "^1.12.0",
-    "@spectrum-web-components/tabs": "^1.12.0",
-    "@spectrum-web-components/textfield": "^1.12.0",
-    "@spectrum-web-components/theme": "^1.12.0",
-    "@spectrum-web-components/tooltip": "^1.12.0",
+    "@spectrum-web-components/picker": "^1.12.1",
+    "@spectrum-web-components/picker-button": "^1.12.1",
+    "@spectrum-web-components/popover": "^1.12.1",
+    "@spectrum-web-components/search": "^1.12.1",
+    "@spectrum-web-components/swatch": "^1.12.1",
+    "@spectrum-web-components/switch": "^1.12.1",
+    "@spectrum-web-components/table": "^1.12.1",
+    "@spectrum-web-components/tabs": "^1.12.1",
+    "@spectrum-web-components/textfield": "^1.12.1",
+    "@spectrum-web-components/theme": "^1.12.1",
+    "@spectrum-web-components/toast": "^1.12.1",
+    "@spectrum-web-components/tooltip": "^1.12.1",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "remark-directive": "^4.0.0",

package/src/browse/browse.js

@@ -3,7 +3,7 @@
  *
  * Displays pages, layouts, components, content, and media in a filterable table grid. Fills the
  * center canvas area as a parallel state to Edit/Design/Preview/Code/Settings. Includes a "New +"
- * button with type-aware entity creation (including collections from project.json).
+ * button with type-aware entity creation (including content types from project.json).
  */
 
 import { html, render as litRender } from "lit-html";
@@ -95,11 +95,14 @@ async function collectFiles(dir, platform) {
         results.push(...sub);
       } else {
         const ext = extOf(entry.name);
+        const category = categoryFor(entry.path, ext);
+        const type =
+          category === "Content" ? contentTypeFor(entry.path) || ext || "file" : ext || "file";
         results.push({
           name: entry.name,
           path: entry.path,
-          type: ext || "file",
-          category: categoryFor(entry.path, ext),
+          type,
+          category,
           ext,
         });
       }
@@ -110,6 +113,27 @@ async function collectFiles(dir, platform) {
   return results;
 }
 
+/**
+ * Match a file path against project contentTypes source globs to find its content type name.
+ * Returns the content type name (capitalized) or null if no match.
+ *
+ * @param {string} filePath
+ * @returns {string | null}
+ */
+function contentTypeFor(filePath) {
+  const config = projectState?.projectConfig;
+  if (!config?.contentTypes) return null;
+  for (const [name, def] of Object.entries(config.contentTypes)) {
+    const d = /** @type {any} */ (def);
+    if (!d.source) continue;
+    const prefix = d.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+    if (filePath.startsWith(prefix + "/") || filePath === prefix) {
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+  }
+  return null;
+}
+
 // ─── Data loading ────────────────────────────────────────────────────────────
 
 async function loadFiles() {
@@ -153,14 +177,14 @@ const ENTITY_TYPES = [
 ];
 
 /**
- * Build frontmatter YAML from a collection's schema properties.
+ * Build frontmatter YAML from a content type's schema properties.
  *
- * @param {string} collectionName
+ * @param {string} contentTypeName
  * @returns {string}
  */
-function buildFrontmatterYaml(collectionName) {
+function buildFrontmatterYaml(contentTypeName) {
   const config = projectState?.projectConfig;
-  const col = config?.collections?.[collectionName];
+  const col = config?.contentTypes?.[contentTypeName];
   if (!col?.schema?.properties) return "title: Untitled\n";
 
   let yaml = "";
@@ -172,22 +196,22 @@ function buildFrontmatterYaml(collectionName) {
 }
 
 /**
- * Get collection-derived entity types from project config.
+ * Get content-type-derived entity types from project config.
  *
- * @returns {{ key: string; label: string; dir: string; ext: string; collectionName: string }[]}
+ * @returns {{ key: string; label: string; dir: string; ext: string; contentTypeName: string }[]}
  */
-function getCollectionTypes() {
+function getContentTypeTypes() {
   const config = projectState?.projectConfig;
-  if (!config?.collections) return [];
-  return Object.entries(config.collections).map(([name, def]) => {
+  if (!config?.contentTypes) return [];
+  return Object.entries(config.contentTypes).map(([name, def]) => {
     const d = /** @type {any} */ (def);
     const dir = d.source ? d.source.replace(/^\.\//, "").split("/")[0] : name;
     return {
-      key: `collection:${name}`,
+      key: `contentType:${name}`,
       label: name.charAt(0).toUpperCase() + name.slice(1),
       dir,
       ext: ".md",
-      collectionName: name,
+      contentTypeName: name,
     };
   });
 }
@@ -200,9 +224,9 @@ function getCollectionTypes() {
  * @param {{ openFile: (path: string) => void }} ctx
  */
 async function handleNewEntity(typeKey, container, ctx) {
-  const isCollection = typeKey.startsWith("collection:");
-  const collectionName = isCollection ? typeKey.slice("collection:".length) : null;
-  const allTypes = [...ENTITY_TYPES, ...getCollectionTypes()];
+  const isContentType = typeKey.startsWith("contentType:");
+  const contentTypeName = isContentType ? typeKey.slice("contentType:".length) : null;
+  const allTypes = [...ENTITY_TYPES, ...getContentTypeTypes()];
   const typeInfo = allTypes.find((t) => t.key === typeKey);
   if (!typeInfo) return;
 
@@ -217,7 +241,9 @@ async function handleNewEntity(typeKey, container, ctx) {
 
   let content;
   if (typeInfo.ext === ".md") {
-    const frontmatter = collectionName ? buildFrontmatterYaml(collectionName) : "title: Untitled\n";
+    const frontmatter = contentTypeName
+      ? buildFrontmatterYaml(contentTypeName)
+      : "title: Untitled\n";
     content = `---\n${frontmatter}---\n\n`;
   } else {
     content = JSON.stringify({ tagName: "div", children: [] }, null, "\t");
@@ -278,7 +304,7 @@ export async function renderBrowse(container, ctx) {
 
   const files = filteredFiles();
 
-  const collectionTypes = getCollectionTypes();
+  const contentTypeTypes = getContentTypeTypes();
 
   const filterBar = html`
     <div class="browse-filter-bar">
@@ -317,8 +343,8 @@ export async function renderBrowse(container, ctx) {
             @change=${(/** @type {any} */ e) => handleNewEntity(e.target.value, container, ctx)}
           >
             ${ENTITY_TYPES.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}
-            ${collectionTypes.length
-              ? html`<sp-menu-divider></sp-menu-divider> ${collectionTypes.map(
+            ${contentTypeTypes.length
+              ? html`<sp-menu-divider></sp-menu-divider> ${contentTypeTypes.map(
                     (t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`,
                   )}`
               : ""}
@@ -374,7 +400,7 @@ export async function renderBrowse(container, ctx) {
                 >
                   <sp-table-cell class="browse-name-cell">${f.name}</sp-table-cell>
                   <sp-table-cell>${f.category}</sp-table-cell>
-                  <sp-table-cell>${f.ext || "—"}</sp-table-cell>
+                  <sp-table-cell>${f.type}</sp-table-cell>
                   <sp-table-cell class="browse-path-cell">${f.path}</sp-table-cell>
                 </sp-table-row>
               `,

package/src/canvas/canvas-live-render.js

@@ -6,12 +6,20 @@
 
 import { elToPath, stripEventHandlers, projectState } from "../store.js";
 import { view } from "../view.js";
-import { renderNode as runtimeRenderNode, buildScope, defineElement } from "@jxsuite/runtime";
+import {
+  renderNode as runtimeRenderNode,
+  buildScope,
+  defineElement,
+  setSkipServerFunctions,
+} from "@jxsuite/runtime";
 import {
   getEffectiveElements,
   getEffectiveImports,
   getEffectiveMedia,
   getEffectiveHead,
+  getEffectiveLayoutPath,
+  resolveLayoutDoc,
+  distributePageIntoLayout,
 } from "../site-context.js";
 import { componentRegistry, computeRelativePath } from "../files/components.js";
 import { prepareForEditMode } from "../utils/edit-display.js";
@@ -20,6 +28,56 @@ import { getActiveElement } from "../editor/inline-edit.js";
 /** @type {any} */
 let _ctx = null;
 
+/** Set of DOM elements that originated from the layout (not page content). */
+export const layoutElements = new WeakSet();
+
+/**
+ * Walk the merged document tree to find the path prefix where page children were distributed into
+ * the layout slot. Returns the path to the container whose children are the page content (first
+ * non-$__layout children array).
+ *
+ * @param {any} node
+ * @param {any[]} [path]
+ * @returns {any[] | null}
+ */
+function findPageContentPrefix(node, path = []) {
+  if (!node || typeof node !== "object") return null;
+  if (Array.isArray(node.children)) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && !child.$__layout) {
+        return [...path, "children"];
+      }
+    }
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && child.$__layout) {
+        const found = findPageContentPrefix(child, [...path, "children", i]);
+        if (found) return found;
+      }
+    }
+  }
+  return null;
+}
+
+/** The path of the currently active layout file, or null. */
+export let activeLayoutPath = /** @type {string | null} */ (null);
+
+/**
+ * Recursively mark all nodes in a layout doc tree with $__layout: true so we can identify which
+ * rendered DOM elements came from the layout vs page content.
+ */
+function markLayoutNodes(/** @type {any} */ node) {
+  if (!node || typeof node !== "object") return;
+  node.$__layout = true;
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) markLayoutNodes(child);
+  }
+  if (node.$elements) {
+    for (const el of node.$elements) markLayoutNodes(el);
+  }
+}
+
 /**
  * Initialize the canvas live render module.
  *
@@ -45,9 +103,46 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
   const S = _ctx.getState();
   const canvasMode = _ctx.getCanvasMode();
 
-  const renderDoc =
+  // Suppress server function resolution in non-preview modes to avoid
+  // failed proxy calls and infinite reactive retries (also covers
+  // async custom element connectedCallbacks that run after this function returns)
+  setSkipServerFunctions(canvasMode !== "preview");
+
+  let renderDoc =
     canvasMode === "preview" ? structuredClone(doc) : prepareForEditMode(stripEventHandlers(doc));
 
+  // ─── Layout wrapping ────────────────────────────────────────────────────
+  // For page documents, resolve the layout and wrap content in the layout shell.
+  // Layout-originated nodes are marked with $__layout so we can distinguish them.
+  let layoutWrapped = false;
+  activeLayoutPath = null;
+
+  const isPage =
+    S.documentPath &&
+    projectState?.isSiteProject &&
+    (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/"));
+
+  /** @type {any[] | null} Path prefix in merged doc where page children live */
+  let pageContentPrefix = null;
+
+  if (isPage) {
+    const layoutPath = getEffectiveLayoutPath(doc.$layout);
+    if (layoutPath) {
+      const layoutDoc = await resolveLayoutDoc(layoutPath);
+      if (layoutDoc) {
+        if (gen !== view.renderGeneration) return null;
+        activeLayoutPath = layoutPath.replace(/^\.\//, "");
+        markLayoutNodes(layoutDoc);
+        const pageForSlots = canvasMode === "preview" ? structuredClone(doc) : renderDoc;
+        const merged = distributePageIntoLayout(layoutDoc, pageForSlots);
+        renderDoc =
+          canvasMode === "preview" ? merged : prepareForEditMode(stripEventHandlers(merged));
+        layoutWrapped = true;
+        pageContentPrefix = findPageContentPrefix(merged);
+      }
+    }
+  }
+
   // In edit mode, collect paths where $map templates were inlined as children[0]
   // so we can remap runtime paths (children,0,...) → (children,map,...)
   const mapParentPaths = new Set();
@@ -127,7 +222,13 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
             console.warn("Studio: failed to import package", entry, e);
           }
         } else if (entry?.$ref) {
-          const href = new URL(entry.$ref, docBase).href;
+          let href;
+          try {
+            href = new URL(entry.$ref, docBase).href;
+          } catch (/** @type {any} */ urlErr) {
+            console.warn("Studio: invalid element URL", { ref: entry.$ref, docBase }, urlErr);
+            continue;
+          }
           try {
             await defineElement(href);
           } catch (/** @type {any} */ e) {
@@ -218,26 +319,49 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     if (gen !== view.renderGeneration) return null;
     const el = /** @type {HTMLElement} */ (
       runtimeRenderNode(renderDoc, $defs, {
-        onNodeCreated(/** @type {any} */ el, /** @type {any} */ path) {
+        onNodeCreated(/** @type {any} */ el, /** @type {any} */ path, /** @type {any} */ def) {
+          // Track layout-originated elements — don't store in elToPath to avoid
+          // path collisions with remapped page content paths
+          if (layoutWrapped && def?.$__layout) {
+            layoutElements.add(el);
+            if (el.setAttribute) el.setAttribute("data-jx-layout", "");
+            return;
+          }
+
+          // Remap layout-wrapped paths: strip the layout prefix so paths are
+          // relative to the original page document (which is what S.document holds)
+          let mappedPath = path;
+          if (layoutWrapped && pageContentPrefix) {
+            const pfx = pageContentPrefix;
+            if (
+              path.length >= pfx.length &&
+              pfx.every((/** @type {any} */ seg, /** @type {number} */ i) => path[i] === seg)
+            ) {
+              mappedPath = ["children", ...path.slice(pfx.length)];
+            }
+          }
+
           // Remap $map paths: wrapper and template children → real document paths
           // prepareForEditMode wraps $map template in: children[0] (wrapper) > children[0] (template)
           // Real paths: wrapper → ['children'] ($map container), template → ['children', 'map']
-          let mappedPath = path;
           if ((canvasMode === "design" || canvasMode === "edit") && mapParentPaths.size > 0) {
-            for (let i = 0; i < path.length - 1; i++) {
-              if (path[i] === "children" && path[i + 1] === 0) {
-                const parentKey = path.slice(0, i).join("/");
+            for (let i = 0; i < mappedPath.length - 1; i++) {
+              if (mappedPath[i] === "children" && mappedPath[i + 1] === 0) {
+                const parentKey = mappedPath.slice(0, i).join("/");
                 if (mapParentPaths.has(parentKey)) {
-                  if (path.length === i + 2) {
-                    // Wrapper div itself → $map container path
-                    mappedPath = path.slice(0, i + 1);
+                  if (mappedPath.length === i + 2) {
+                    mappedPath = mappedPath.slice(0, i + 1);
                   } else if (
-                    path.length >= i + 4 &&
-                    path[i + 2] === "children" &&
-                    path[i + 3] === 0
+                    mappedPath.length >= i + 4 &&
+                    mappedPath[i + 2] === "children" &&
+                    mappedPath[i + 3] === 0
                   ) {
-                    // Template or its descendants → children/map/...rest
-                    mappedPath = [...path.slice(0, i), "children", "map", ...path.slice(i + 4)];
+                    mappedPath = [
+                      ...mappedPath.slice(0, i),
+                      "children",
+                      "map",
+                      ...mappedPath.slice(i + 4),
+                    ];
                   }
                   break;
                 }

package/src/canvas/canvas-render.js

@@ -66,12 +66,15 @@ export function renderCanvas() {
   // Advance render generation so stale async renders from the previous cycle bail out
   ++view.renderGeneration;
 
-  // Always clear Lit's internal state so it builds fresh DOM. Stale async
-  // renderCanvasLive calls from a previous cycle can corrupt nested ChildPart
-  // markers (Comment nodes inside panzoom-wrap) in ways the root-only
-  // ensureLitState check cannot detect.
+  // Detect whether this is a mode transition or a content-only re-render
+  const modeChanged = canvasMode !== view.prevCanvasMode;
+
+  // Only clear Lit's internal state on mode transitions (structural panel changes).
+  // For content re-renders in the same mode, Lit's template diffing preserves
+  // the panel structure. Bailed async renders can't corrupt the DOM because
+  // renderCanvasLive uses atomic clear (innerHTML = "" right before appendChild).
   // @ts-ignore
-  if (canvasWrap["_$litPart$"]) {
+  if (modeChanged && canvasWrap["_$litPart$"]) {
     canvasWrap.textContent = "";
     // @ts-ignore
     delete canvasWrap["_$litPart$"];
@@ -101,7 +104,6 @@ export function renderCanvas() {
   }
 
   // Detect whether this is a mode transition or a content-only re-render
-  const modeChanged = canvasMode !== view.prevCanvasMode;
   view.prevCanvasMode = canvasMode;
 
   // DnD handlers are registered on inner canvas elements that get replaced on every
@@ -247,10 +249,11 @@ export function renderCanvas() {
       resetZoomIndicator();
     }
 
+    const { baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
     const { tpl: panelTpl, panel } = canvasPanelTemplate(null, null, true);
     const editTpl = html`
       <div class="content-edit-canvas">
-        <div class="content-edit-column">${panelTpl}</div>
+        <div class="content-edit-column" style="max-width:${baseWidth}px">${panelTpl}</div>
       </div>
     `;
     litRender(editTpl, canvasWrap);

package/src/files/files.js

@@ -564,6 +564,8 @@ export async function openFileFromTree(ctx, path) {
     if (path.endsWith(".md")) {
       await ctx.loadMarkdown(content, null);
       ctx.S.documentPath = path;
+      ctx.S.dirty = false;
+      ctx.commit(ctx.S);
     } else {
       const doc = JSON.parse(content);
       const newS = createState(doc);