@jxsuite/studio 0.28.2 → 0.28.4

package/src/state.ts

@@ -10,6 +10,7 @@
  */
 
 import type { ProjectState } from "./types";
+import { isRef } from "@jxsuite/schema/guards";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
 export type JxPath = (string | number)[];
@@ -63,12 +64,26 @@ interface StudioStackFrame {
 export function getNodeAtPath(doc: JxMutableNode, path: JxPath) {
   let node = doc;
   for (const key of path) {
-    if (node == null) return undefined as unknown as JxMutableNode;
-    node = node[key];
+    if (node == null) {
+      return undefined as unknown as JxMutableNode;
+    }
+    // Paths address nodes by construction; non-node leaves surface as undefined above.
+    node = node[key] as JxMutableNode;
   }
   return node;
 }
 
+/**
+ * The node's children when they are a static array (the edit-mode invariant); an empty array for
+ * mapped-array or absent children.
+ *
+ * @param {JxMutableNode | null | undefined} node
+ * @returns {(JxMutableNode | string)[]}
+ */
+export function childList(node: JxMutableNode | null | undefined): (JxMutableNode | string)[] {
+  return Array.isArray(node?.children) ? node.children : [];
+}
+
 /**
  * Return the path to the parent element (strips trailing 'children' + index).
  *
@@ -86,7 +101,7 @@ export function parentElementPath(path: JxPath) {
  * @returns {string | number}
  */
 export function childIndex(path: JxPath) {
-  return path[path.length - 1];
+  return path.at(-1);
 }
 
 /**
@@ -107,8 +122,12 @@ export function pathKey(path: JxPath) {
  * @returns {boolean}
  */
 export function pathsEqual(a: JxPath | null, b: JxPath | null) {
-  if (a === b) return true;
-  if (!a || !b || a.length !== b.length) return false;
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b || a.length !== b.length) {
+    return false;
+  }
   return a.every((v, i) => v === b[i]);
 }
 
@@ -120,7 +139,9 @@ export function pathsEqual(a: JxPath | null, b: JxPath | null) {
  * @returns {boolean}
  */
 export function isAncestor(path: JxPath, descendant: JxPath) {
-  if (path.length > descendant.length) return false;
+  if (path.length > descendant.length) {
+    return false;
+  }
   return path.every((v, i) => v === descendant[i]);
 }
 
@@ -142,31 +163,31 @@ export function isAncestor(path: JxPath, descendant: JxPath) {
  *   nodeType: string;
  * }[]}
  */
-export type FlatRow = {
+export interface FlatRow {
   node: JxMutableNode | string | number | boolean;
   path: JxPath;
   depth: number;
   nodeType: string;
-};
+}
 
 export function flattenTree(
   doc: JxMutableNode | string | number | boolean,
   path: JxPath = [],
-  depth: number = 0,
+  depth = 0,
 ): FlatRow[] {
   // Text node children: bare primitives get a "text" row
   if (typeof doc === "string" || typeof doc === "number" || typeof doc === "boolean") {
-    return [{ node: doc, path, depth, nodeType: "text" }];
+    return [{ depth, node: doc, nodeType: "text", path }];
   }
 
-  const rows: FlatRow[] = [{ node: doc, path, depth, nodeType: "element" }];
+  const rows: FlatRow[] = [{ depth, node: doc, nodeType: "element", path }];
 
   // Custom component instances without user-authored children are atomic in the layer tree
   if (doc.$props && (doc.tagName || "").includes("-") && !Array.isArray(doc.children)) {
     return rows;
   }
 
-  const children = doc.children;
+  const { children } = doc;
 
   if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
@@ -180,10 +201,10 @@ export function flattenTree(
   ) {
     // $map — emit the map container, then recurse into the template
     rows.push({
-      node: children as JxMutableNode,
-      path: [...path, "children"],
       depth: depth + 1,
+      node: children as JxMutableNode,
       nodeType: "map",
+      path: [...path, "children"],
     });
     const mapDef = (children as JxMutableNode).map;
     if (mapDef && typeof mapDef === "object") {
@@ -197,17 +218,17 @@ export function flattenTree(
       const casePath = [...path, "cases", caseName];
       if (caseDef && typeof caseDef === "object" && (caseDef as JxMutableNode).$ref) {
         rows.push({
-          node: caseDef as JxMutableNode,
-          path: casePath,
           depth: depth + 1,
+          node: caseDef as JxMutableNode,
           nodeType: "case-ref",
+          path: casePath,
         });
       } else if (caseDef && typeof caseDef === "object") {
         rows.push({
-          node: caseDef as JxMutableNode,
-          path: casePath,
           depth: depth + 1,
+          node: caseDef as JxMutableNode,
           nodeType: "case",
+          path: casePath,
         });
         // Recurse into case children (skip the case node itself — already emitted)
         const caseChildren = flattenTree(caseDef as JxMutableNode, casePath, depth + 2);
@@ -226,14 +247,21 @@ export function flattenTree(
  * @returns {string}
  */
 export function nodeLabel(node: JxMutableNode | null) {
-  if (!node) return "?";
+  if (!node) {
+    return "?";
+  }
   // $map container (Repeater)
   if (node.$prototype === "Array") {
-    const ref = node.items?.$ref || "items";
+    const { items } = node;
+    const ref = (isRef(items) ? items.$ref : undefined) || "items";
     return `Repeater → ${ref}`;
   }
-  if (node.$title) return node.$title;
-  if (node.$id) return node.$id;
+  if (node.$title) {
+    return node.$title;
+  }
+  if (node.$id) {
+    return node.$id;
+  }
   const tag = node.tagName ?? "div";
   const suffix = node.$switch ? " ⇆" : "";
   if (typeof node.textContent === "string" && node.textContent.length > 0) {
@@ -251,47 +279,47 @@ export function nodeLabel(node: JxMutableNode | null) {
 export function createState(doc: JxMutableNode): StudioState {
   const initial = { document: doc, selection: null };
   return {
-    document: doc,
-    selection: null,
-    hover: null,
-    history: [initial],
-    historyIndex: 0,
+    canvas: {
+      error: null, // Error message on failure
+      scope: null, // $defs scope from runtime buildScope
+      status: "idle", // "idle" | "loading" | "ready" | "error"
+    },
+    content: { frontmatter: {} }, // Frontmatter metadata for .md files
     dirty: false,
+    document: doc,
+    documentPath: null, // Root-relative path, e.g. "examples/markdown/blog.json"
+    documentStack: [], // Frames for component navigation
     fileHandle: null,
-    documentPath: null, // root-relative path, e.g. "examples/markdown/blog.json"
-    documentStack: [], // frames for component navigation
     handlersSource: null,
+    history: [initial],
+    historyIndex: 0,
+    hover: null,
     mode: "component", // 'component' | 'content'
-    content: { frontmatter: {} }, // frontmatter metadata for .md files
+    selection: null,
     ui: {
-      rightTab: "properties", // 'properties' | 'events' | 'style'
-      zoom: 1,
       activeMedia: null, // '--md' | null (base) — focused canvas/breakpoint
       activeSelector: null, // ':hover' | '.child' | null (base) — nested selector context
+      editingFunction: null, // Null | { type: 'def', defName } | { type: 'event', path, eventKey }
       featureToggles: {}, // { '--dark': true } — non-size media toggles
-      styleSections: {}, // { layout: true, ... } — section open/closed state
+      gitBranches: null, // { current, branches: [] }
+      gitCommitMessage: "", // Commit message input
+      gitDiffState: null,
+      gitError: null, // Error message string
+      gitLoading: false, // Loading indicator during async ops
+      gitStatus: null, // { branch, ahead, behind, files: [] }
       inspectorSections: {}, // { identity: true, ... } — properties panel section open/closed state
+      pendingInlineEdit: null, // Null | { path, mediaName } — deferred inline edit awaiting canvas readiness
+      rightTab: "properties", // 'properties' | 'events' | 'style'
+      settingsTab: "stylebook", // "stylebook" | "definitions" | "contentTypes"
+      styleFilter: "", // Free-text filter for CSS property names
+      styleFilterActive: false, // True = show only props with values set
+      styleSections: {}, // { layout: true, ... } — section open/closed state
       styleShorthands: {}, // { padding: true, ... } — shorthand expand/collapse state
-      styleFilter: "", // free-text filter for CSS property names
-      styleFilterActive: false, // true = show only props with values set
-      editingFunction: null, // null | { type: 'def', defName } | { type: 'event', path, eventKey }
-      stylebookSelection: null, // tag name string, e.g. "h1"
+      stylebookCustomizedOnly: false, // Show only customized elements
+      stylebookFilter: "", // Search filter text
+      stylebookSelection: null, // Tag name string, e.g. "h1"
       stylebookTab: "elements", // "elements" | "variables"
-      stylebookFilter: "", // search filter text
-      stylebookCustomizedOnly: false, // show only customized elements
-      settingsTab: "stylebook", // "stylebook" | "definitions" | "contentTypes"
-      gitStatus: null, // { branch, ahead, behind, files: [] }
-      gitBranches: null, // { current, branches: [] }
-      gitCommitMessage: "", // commit message input
-      gitLoading: false, // loading indicator during async ops
-      gitError: null, // error message string
-      gitDiffState: null,
-      pendingInlineEdit: null, // null | { path, mediaName } — deferred inline edit awaiting canvas readiness
-    },
-    canvas: {
-      status: "idle", // "idle" | "loading" | "ready" | "error"
-      scope: null, // $defs scope from runtime buildScope
-      error: null, // error message on failure
+      zoom: 1,
     },
   };
 }
@@ -334,26 +362,26 @@ export function fromFlat(S: StudioState) {
   } = S;
   return {
     doc: {
-      document,
+      content,
       dirty,
-      fileHandle,
+      document,
       documentPath,
       documentStack,
+      fileHandle,
       handlersSource,
-      mode,
-      content,
       history,
       historyIndex,
+      mode,
     },
-    session: { selection, hover, ui, canvas },
+    session: { canvas, hover, selection, ui },
   };
 }
 
 // ─── Project state (persists across document switches) ────────────────────────
 //
 // Shape: { root, name, projectRoot, isSiteProject, projectConfig,
-//          dirs: Map<string, DirEntry[]>, expanded: Set<string>,
-//          selectedPath: string|null, searchQuery: string }
+//          Dirs: Map<string, DirEntry[]>, expanded: Set<string>,
+//          SelectedPath: string|null, searchQuery: string }
 // DirEntry: { name, path, type: "file"|"directory", size, modified }
 
 export let projectState: ProjectState | null = null;
@@ -386,8 +414,11 @@ export function requireProjectState() {
  */
 export function updateFrontmatter(state: StudioState, field: string, value: unknown) {
   const fm = { ...state.content?.frontmatter };
-  if (value === undefined || value === null || value === "") delete fm[field];
-  else fm[field] = value;
+  if (value === undefined || value === null || value === "") {
+    delete fm[field];
+  } else {
+    fm[field] = value;
+  }
   return {
     ...state,
     content: { ...state.content, frontmatter: fm },
@@ -427,14 +458,14 @@ export function hoverNode(state: StudioState, path: JxPath | null) {
  */
 export function pushDocument(state: StudioState, doc: JxMutableNode, documentPath: string | null) {
   const frame = {
+    dirty: state.dirty,
     document: state.document,
-    selection: state.selection,
-    fileHandle: state.fileHandle,
     documentPath: state.documentPath,
-    dirty: state.dirty,
+    fileHandle: state.fileHandle,
     history: state.history,
     historyIndex: state.historyIndex,
     mode: state.mode,
+    selection: state.selection,
   };
   const newState = createState(doc);
   newState.documentStack = [...(state.documentStack || []), frame];
@@ -450,7 +481,9 @@ export function pushDocument(state: StudioState, doc: JxMutableNode, documentPat
  * @returns {StudioState}
  */
 export function popDocument(state: StudioState) {
-  if (!state.documentStack || state.documentStack.length === 0) return state;
+  if (!state.documentStack || state.documentStack.length === 0) {
+    return state;
+  }
   const stack = [...state.documentStack];
   const frame = stack.pop();
   return {

package/src/store.ts

@@ -10,12 +10,15 @@
 // ─── Re-exports from state.js ────────────────────────────────────────────────
 
 import { activeTab } from "./workspace/workspace";
+import { isEventBinding } from "@jxsuite/schema/guards";
 import type { JxPath } from "./state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { CanvasPanel } from "./panels/canvas-dnd.js";
 
 export {
   createState,
   getNodeAtPath,
+  childList,
   flattenTree,
   nodeLabel,
   pathKey,
@@ -49,9 +52,9 @@ export function initShellRefs() {
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 
-export const elToPath: WeakMap<Element, JxPath> = new WeakMap();
+export const elToPath = new WeakMap<Element, JxPath>();
 
-export const canvasPanels: import("./panels/canvas-dnd.js").CanvasPanel[] = [];
+export const canvasPanels: CanvasPanel[] = [];
 
 // ─── Shared constants ────────────────────────────────────────────────────────
 
@@ -101,8 +104,12 @@ const _styleDebounceTimers = new Map();
  * @param {number} ms
  * @param {(...args: unknown[]) => void} fn
  */
-export function debouncedStyleCommit(prop: string, ms: number, fn: (...args: any[]) => void) {
-  return (...args: unknown[]) => {
+export function debouncedStyleCommit<A extends unknown[]>(
+  prop: string,
+  ms: number,
+  fn: (...args: A) => void,
+) {
+  return (...args: A) => {
     clearTimeout(_styleDebounceTimers.get(prop));
     _styleDebounceTimers.set(
       prop,
@@ -127,30 +134,34 @@ export function cancelStyleDebounce(prop: string) {
  * @returns {JxMutableNode}
  */
 export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
-  if (!node || typeof node !== "object") return node;
-  if (Array.isArray(node)) return node.map(stripEventHandlers);
+  if (!node || typeof node !== "object") {
+    return node;
+  }
+  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;
+  }
   const out: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node)) {
-    if (
-      k.startsWith("on") &&
-      typeof v === "object" &&
-      (v?.$ref || v?.$prototype === "Function" || v?.$expression)
-    )
+    if (k.startsWith("on") && isEventBinding(v)) {
       continue;
+    }
     if (k === "children") {
       out.children = Array.isArray(v)
-        ? v.map(stripEventHandlers)
+        ? v.map((c) => stripEventHandlers(c))
         : stripEventHandlers(v as JxMutableNode);
     } else if (k === "cases" && typeof v === "object") {
       const cases: Record<string, unknown> = {};
-      for (const [ck, cv] of Object.entries(v as Record<string, unknown>))
+      for (const [ck, cv] of Object.entries(v as Record<string, unknown>)) {
         cases[ck] = stripEventHandlers(cv as JxMutableNode);
+      }
       out.cases = cases;
     } else if (k === "state" && typeof v === "object" && v !== null) {
       const state: Record<string, unknown> = {};
       for (const [sk, sv] of Object.entries(v as Record<string, unknown>)) {
-        if (sv && typeof sv === "object" && (sv as Record<string, unknown>).timing === "server")
+        if (sv && typeof sv === "object" && (sv as Record<string, unknown>).timing === "server") {
           continue;
+        }
         state[sk] = sv;
       }
       out.state = state;
@@ -165,7 +176,7 @@ export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
 
 // ─── Render orchestration ────────────────────────────────────────────────────
 
-const _renderers: Map<string, Function> = new Map();
+const _renderers = new Map<string, () => void>();
 
 /**
  * Register a named renderer. Called at module import time by each module.
@@ -182,8 +193,8 @@ export function render() {
   for (const [name, fn] of _renderers.entries()) {
     try {
       fn();
-    } catch (e) {
-      console.error(`Renderer "${name}" failed:`, e);
+    } catch (error) {
+      console.error(`Renderer "${name}" failed:`, error);
     }
   }
 }
@@ -196,11 +207,13 @@ export function render() {
 export function renderOnly(...names: string[]) {
   for (const name of names) {
     const fn = _renderers.get(name);
-    if (!fn) continue;
+    if (!fn) {
+      continue;
+    }
     try {
       fn();
-    } catch (e) {
-      console.error(`Renderer "${name}" failed:`, e);
+    } catch (error) {
+      console.error(`Renderer "${name}" failed:`, error);
     }
   }
 }
@@ -221,9 +234,15 @@ export function updateSession(patch: {
 }) {
   const tab = activeTab.value;
   if (tab) {
-    if (patch.selection !== undefined) tab.session.selection = patch.selection as JxPath | null;
-    if (patch.hover !== undefined) tab.session.hover = patch.hover as JxPath | null;
-    if (patch.clipboard !== undefined) tab.session.clipboard = patch.clipboard!;
+    if (patch.selection !== undefined) {
+      tab.session.selection = patch.selection as JxPath | null;
+    }
+    if (patch.hover !== undefined) {
+      tab.session.hover = patch.hover as JxPath | null;
+    }
+    if (patch.clipboard !== undefined) {
+      tab.session.clipboard = patch.clipboard!;
+    }
     if (patch.ui) {
       for (const [k, v] of Object.entries(patch.ui)) {
         (tab.session.ui as unknown as Record<string, unknown>)[k] = v;