@jxsuite/studio 0.28.5 → 0.30.1

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

@@ -80,7 +80,7 @@ function handleNewContentType(rerender: () => void) {
   rerender();
 
   // Persist in background
-  saveProjectConfig().then(async () => {
+  void saveProjectConfig().then(async () => {
     const platform = getPlatform();
     await platform.writeFile(`content/${slug}/.gitkeep`, "");
   });
@@ -116,7 +116,7 @@ function handleAddField(rerender: () => void) {
   showAddField = false;
   newFieldState = { format: "", name: "", required: false, type: "string" };
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -135,7 +135,7 @@ function handleDeleteField(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -159,7 +159,7 @@ function handleToggleRequired(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -185,7 +185,7 @@ function handleRenameField(oldName: string, newName: string, rerender: () => voi
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -205,7 +205,7 @@ function handleChangeType(fieldName: string, newType: string, rerender: () => vo
       : undefined;
   schema.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -223,7 +223,7 @@ function handleChangeFormat(fieldName: string, format: string, rerender: () => v
   const type = prop.type || "string";
   schema.properties[fieldName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -239,7 +239,7 @@ function handleChangeRefTarget(fieldName: string, target: string, rerender: () =
 
   schema.properties[fieldName] = { $ref: `#/contentTypes/${target}` };
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Nested field handlers ───────────────────────────────────────────────────
@@ -280,7 +280,7 @@ function handleAddNestedField(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -301,7 +301,7 @@ function handleDeleteNested(parentName: string, childName: string, rerender: ()
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -327,7 +327,7 @@ function handleToggleNestedRequired(parentName: string, childName: string, reren
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -360,7 +360,7 @@ function handleRenameNested(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -387,7 +387,7 @@ function handleChangeNestedType(
       : undefined;
   parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -412,7 +412,7 @@ function handleChangeNestedFormat(
   const type = prop.type || "string";
   parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /** @param {() => void} rerender */
@@ -429,7 +429,7 @@ function handleDeleteContentType(rerender: () => void) {
   selectedContentType = null;
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Render ───────────────────────────────────────────────────────────────────
@@ -508,7 +508,7 @@ export function renderContentTypesEditor(container: HTMLElement) {
   if (!selectedContentType || !contentTypes[selectedContentType]) {
     editorTpl = html`<div class="settings-empty-state">Select or create a content type</div>`;
   } else {
-    const col = contentTypes[selectedContentType];
+    const col = contentTypes[selectedContentType]!;
     const schema = (col.schema || {}) as ContentTypeSchema;
     const properties = schema.properties || {};
     const required = schema.required || [];

package/src/settings/css-vars-editor.ts

@@ -53,7 +53,7 @@ export function renderCssVarsEditor(container: HTMLElement) {
   const mediaNames = media ? Object.keys(media).filter((m) => m !== "--") : [];
 
   const save = () => {
-    updateSiteConfig({ style: { ...rootStyle } });
+    void updateSiteConfig({ style: { ...rootStyle } });
   };
 
   const updateVar = (name: string, val: string) => {
@@ -297,7 +297,7 @@ function renderMediaOverrides(varName: string, rootStyle: JxStyle, mediaNames: s
                 (rootStyle[`@${o.mediaName}`] as Record<string, unknown>)[varName] = (
                   e.target as HTMLInputElement
                 ).value;
-                updateSiteConfig({ style: { ...rootStyle } });
+                void updateSiteConfig({ style: { ...rootStyle } });
               }}
               style="max-width:120px"
             ></sp-textfield>

package/src/settings/defs-editor.ts

@@ -73,7 +73,7 @@ function handleNewDef(rerender: () => void) {
   showNewDef = false;
   newDefName = "";
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /** @param {() => void} rerender */
@@ -105,7 +105,7 @@ function handleAddField(rerender: () => void) {
   showAddField = false;
   newFieldState = { format: "", name: "", required: false, type: "string" };
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -124,7 +124,7 @@ function handleDeleteField(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -148,7 +148,7 @@ function handleToggleRequired(fieldName: string, rerender: () => void) {
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -173,7 +173,7 @@ function handleRenameField(oldName: string, newName: string, rerender: () => voi
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -193,7 +193,7 @@ function handleChangeType(fieldName: string, newType: string, rerender: () => vo
       : undefined;
   def.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -211,7 +211,7 @@ function handleChangeFormat(fieldName: string, format: string, rerender: () => v
   const type = prop.type || "string";
   def.properties[fieldName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Nested field handlers ───────────────────────────────────────────────────
@@ -247,7 +247,7 @@ function handleAddNestedField(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -268,7 +268,7 @@ function handleDeleteNested(parentName: string, childName: string, rerender: ()
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -294,7 +294,7 @@ function handleToggleNestedRequired(parentName: string, childName: string, reren
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -326,7 +326,7 @@ function handleRenameNested(
   }
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -353,7 +353,7 @@ function handleChangeNestedType(
       : undefined;
   parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /**
@@ -378,7 +378,7 @@ function handleChangeNestedFormat(
   const type = prop.type || "string";
   parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 /** @param {() => void} rerender */
@@ -395,7 +395,7 @@ function handleDeleteDef(rerender: () => void) {
   selectedDef = null;
 
   rerender();
-  saveProjectConfig();
+  void saveProjectConfig();
 }
 
 // ─── Render ───────────────────────────────────────────────────────────────────

package/src/settings/general-settings.ts

@@ -31,7 +31,7 @@ export function renderGeneralSettings(container: HTMLElement) {
   };
 
   const onAdapterChange = (e: Event) => {
-    updateSiteConfig({
+    void updateSiteConfig({
       build: { ...config.build, adapter: (e.target as HTMLInputElement).value },
     });
   };
@@ -40,7 +40,7 @@ export function renderGeneralSettings(container: HTMLElement) {
     // Lazy import breaks the general-settings ↔ settings-modal module cycle
     const { closeSettingsModal } = await import("./settings-modal");
     closeSettingsModal();
-    openFileInTab("project.json");
+    void openFileInTab("project.json");
   };
 
   // ─── Breakpoints ($media) ───────────────────────────────────────────────────
@@ -50,7 +50,7 @@ export function renderGeneralSettings(container: HTMLElement) {
 
   const onMediaValueChange = (key: string) => (e: Event) => {
     const updated = { ...media, [key]: (e.target as HTMLInputElement).value };
-    updateSiteConfig({ $media: updated });
+    void updateSiteConfig({ $media: updated });
   };
 
   const onMediaNameChange = (oldKey: string) => (e: Event) => {
@@ -63,20 +63,20 @@ export function renderGeneralSettings(container: HTMLElement) {
     for (const [k, v] of Object.entries(media)) {
       updated[k === oldKey ? newKey : k] = v;
     }
-    updateSiteConfig({ $media: updated });
+    void updateSiteConfig({ $media: updated });
     renderGeneralSettings(container);
   };
 
   const onRemoveBreakpoint = (key: string) => () => {
     const updated = { ...media };
     delete updated[key];
-    updateSiteConfig({ $media: updated });
+    void updateSiteConfig({ $media: updated });
     renderGeneralSettings(container);
   };
 
   const onAddBreakpoint = () => {
     const updated = { ...media, "--new": "(max-width: 480px)" };
-    updateSiteConfig({ $media: updated });
+    void updateSiteConfig({ $media: updated });
     renderGeneralSettings(container);
   };
 

package/src/settings/head-editor.ts

@@ -23,7 +23,7 @@ export function renderHeadEditor(container: HTMLElement) {
   const headEntries = config.$head || ([] as JxHeadEntry[]);
 
   const save = () => {
-    updateSiteConfig({ $head: headEntries });
+    void updateSiteConfig({ $head: headEntries });
   };
 
   const addEntry = (tag: string) => {
@@ -52,7 +52,7 @@ export function renderHeadEditor(container: HTMLElement) {
   };
 
   const updateEntry = (idx: number, key: string, val: string) => {
-    const entry = headEntries[idx];
+    const entry = headEntries[idx]!;
     if (key === "content" && (entry.tagName === "script" || entry.tagName === "style")) {
       entry.textContent = val;
     } else {

package/src/site-context.ts

@@ -170,7 +170,7 @@ export async function resolveLayoutDoc(layoutPath: string) {
   try {
     const platform = getPlatform();
     const content = await platform.readFile(normalized);
-    const doc = JSON.parse(content);
+    const doc = JSON.parse(content) as JxMutableNode;
     layoutCache.set(normalized, doc);
     return structuredClone(doc);
   } catch {

package/src/state.ts

@@ -84,6 +84,52 @@ export function childList(node: JxMutableNode | null | undefined): (JxMutableNod
   return Array.isArray(node?.children) ? node.children : [];
 }
 
+/**
+ * Normalize a document in place to the canonical array-member form: a legacy whole-children
+ * repeater (`children: { $prototype: "Array", … }`) becomes a single member of a children array
+ * (`children: [{ $prototype: "Array", … }]`). Recurses through children, repeater templates, and
+ * `$switch` cases. Runs once when a document is loaded into a tab so every in-studio doc — and its
+ * history checkpoints — uses the member form before any mutation.
+ *
+ * @param {unknown} node
+ * @returns {unknown} The same node (mutated)
+ */
+export function normalizeArrayChildren(node: unknown): unknown {
+  if (!node || typeof node !== "object") {
+    return node;
+  }
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      normalizeArrayChildren(child);
+    }
+    return node;
+  }
+  const n = node as JxMutableNode;
+  const { children } = n;
+  if (
+    children &&
+    typeof children === "object" &&
+    !Array.isArray(children) &&
+    (children as JxMutableNode).$prototype === "Array"
+  ) {
+    n.children = [children as JxMutableNode];
+  }
+  if (Array.isArray(n.children)) {
+    for (const child of n.children) {
+      normalizeArrayChildren(child);
+    }
+  }
+  if (n.$prototype === "Array" && n.map && typeof n.map === "object") {
+    normalizeArrayChildren(n.map);
+  }
+  if (n.cases && typeof n.cases === "object") {
+    for (const caseDef of Object.values(n.cases)) {
+      normalizeArrayChildren(caseDef);
+    }
+  }
+  return node;
+}
+
 /**
  * Return the path to the parent element (strips trailing 'children' + index).
  *
@@ -180,6 +226,19 @@ export function flattenTree(
     return [{ depth, node: doc, nodeType: "text", path }];
   }
 
+  // Array pseudo-element (repeater): a first-class node at its own path. Emit the "map" row, then
+  // Recurse into its single template at `[...path, "map"]`. This is reached both when the array is
+  // A member of a children array (path `[…, "children", i]`) and the legacy whole-children form
+  // (path `[…, "children"]`).
+  if ((doc as JxMutableNode).$prototype === "Array") {
+    const rows: FlatRow[] = [{ depth, node: doc, nodeType: "map", path }];
+    const mapDef = (doc as JxMutableNode).map;
+    if (mapDef && typeof mapDef === "object") {
+      rows.push(...flattenTree(mapDef as JxMutableNode, [...path, "map"], depth + 1));
+    }
+    return rows;
+  }
+
   const rows: FlatRow[] = [{ depth, node: doc, nodeType: "element", path }];
 
   // Custom component instances without user-authored children are atomic in the layer tree
@@ -192,24 +251,15 @@ export function flattenTree(
   if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       const childPath = [...path, "children", i];
-      rows.push(...flattenTree(children[i], childPath, depth + 1));
+      rows.push(...flattenTree(children[i]!, childPath, depth + 1));
     }
   } else if (
     children &&
     typeof children === "object" &&
     (children as JxMutableNode).$prototype === "Array"
   ) {
-    // $map — emit the map container, then recurse into the template
-    rows.push({
-      depth: depth + 1,
-      node: children as JxMutableNode,
-      nodeType: "map",
-      path: [...path, "children"],
-    });
-    const mapDef = (children as JxMutableNode).map;
-    if (mapDef && typeof mapDef === "object") {
-      rows.push(...flattenTree(mapDef as JxMutableNode, [...path, "children", "map"], depth + 2));
-    }
+    // Legacy whole-children repeater: the array occupies the children slot itself.
+    rows.push(...flattenTree(children as JxMutableNode, [...path, "children"], depth + 1));
   }
 
   // $switch — emit each case as a virtual child
@@ -262,6 +312,10 @@ export function nodeLabel(node: JxMutableNode | null) {
   if (node.$id) {
     return node.$id;
   }
+  if (node.tagName === "slot") {
+    const name = node.attributes?.name;
+    return typeof name === "string" && name.trim() ? `slot: ${name.trim()}` : "slot";
+  }
   const tag = node.tagName ?? "div";
   const suffix = node.$switch ? " ⇆" : "";
   if (typeof node.textContent === "string" && node.textContent.length > 0) {

package/src/store.ts

@@ -54,6 +54,18 @@ export function initShellRefs() {
 
 export const elToPath = new WeakMap<Element, JxPath>();
 
+/**
+ * Canvas element → the runtime scope its children render with. Captured during live renders so the
+ * canvas patcher can re-render a subtree in isolation with the same prototype-chained scope.
+ */
+export const elToScope = new WeakMap<Element, Record<string, unknown>>();
+
+/**
+ * Subtree root element → the effect scope created for its surgical render. Stopped when the subtree
+ * is replaced or removed so render-time reactive effects don't accumulate.
+ */
+export const elToRenderScope = new WeakMap<Element, { stop: () => void }>();
+
 export const canvasPanels: CanvasPanel[] = [];
 
 // ─── Shared constants ────────────────────────────────────────────────────────
@@ -97,7 +109,7 @@ export function isNestedSelector(k: string) {
 
 // ─── Shared utilities ────────────────────────────────────────────────────────
 
-const _styleDebounceTimers = new Map();
+const _styleDebounceTimers = new Map<string, ReturnType<typeof setTimeout>>();
 
 /**
  * @param {string} prop
@@ -139,7 +151,7 @@ export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
   }
   if (Array.isArray(node)) {
     // Arrays of nodes round-trip element-wise; the array itself is not a node.
-    return node.map((n) => stripEventHandlers(n)) as unknown as JxMutableNode;
+    return node.map((n: JxMutableNode) => stripEventHandlers(n)) as unknown as JxMutableNode;
   }
   const out: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node)) {
@@ -148,7 +160,7 @@ export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
     }
     if (k === "children") {
       out.children = Array.isArray(v)
-        ? v.map((c) => stripEventHandlers(c))
+        ? v.map((c: JxMutableNode) => stripEventHandlers(c))
         : stripEventHandlers(v as JxMutableNode);
     } else if (k === "cases" && typeof v === "object") {
       const cases: Record<string, unknown> = {};