@jxsuite/studio 0.1.0 → 0.5.1

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

@@ -0,0 +1,329 @@
+/**
+ * Schema field UI — shared field-card and add-field-dialog templates for the collections and
+ * definitions editors.
+ */
+
+import { html, nothing } from "lit-html";
+
+export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "date"];
+
+/**
+ * @typedef {{
+ *   type?: string;
+ *   properties?: Record<string, SchemaProperty>;
+ *   required?: string[];
+ *   items?: any;
+ *   format?: string;
+ * }} SchemaProperty
+ */
+
+/**
+ * @typedef {{
+ *   onDelete: (name: string) => void;
+ *   onToggleRequired: (name: string) => void;
+ *   onRename: (oldName: string, newName: string) => void;
+ *   onChangeType: (name: string, newType: string) => void;
+ *   onAddNestedField?: (
+ *     parentName: string,
+ *     state: { name: string; type: string; required: boolean },
+ *   ) => void;
+ *   onDeleteNested?: (parentName: string, childName: string) => void;
+ *   onToggleNestedRequired?: (parentName: string, childName: string) => void;
+ *   onRenameNested?: (parentName: string, oldChild: string, newChild: string) => void;
+ *   onChangeNestedType?: (parentName: string, childName: string, newType: string) => void;
+ * }} FieldHandlers
+ */
+
+/**
+ * Render a single schema field as an inline-editable form row.
+ *
+ * @param {string} fieldName
+ * @param {SchemaProperty} fieldSchema — JSON Schema property definition
+ * @param {boolean} isRequired
+ * @param {FieldHandlers} handlers
+ * @returns {any}
+ */
+export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
+  const type = fieldSchema.format === "date" ? "date" : fieldSchema.type || "string";
+  const isNested = type === "object";
+  const nestedProps = fieldSchema.properties || {};
+  const nestedRequired = fieldSchema.required || [];
+
+  return html`
+    <div class="schema-field-card">
+      <div class="schema-field-row">
+        <sp-textfield
+          size="s"
+          quiet
+          value=${fieldName}
+          class="schema-field-name-input"
+          @change=${(/** @type {any} */ e) => {
+            const newName = e.target.value.trim();
+            if (newName && newName !== fieldName) handlers.onRename(fieldName, newName);
+            else e.target.value = fieldName;
+          }}
+          @keydown=${(/** @type {any} */ e) => {
+            if (e.key === "Enter") e.target.blur();
+            if (e.key === "Escape") {
+              e.target.value = fieldName;
+              e.target.blur();
+            }
+          }}
+        ></sp-textfield>
+        ${typePickerTpl(type, (newType) => handlers.onChangeType(fieldName, newType))}
+        <sp-switch
+          size="s"
+          ?checked=${isRequired}
+          @change=${() => handlers.onToggleRequired(fieldName)}
+        >
+          Req
+        </sp-switch>
+        <sp-action-button
+          size="xs"
+          quiet
+          title="Delete field"
+          @click=${() => handlers.onDelete(fieldName)}
+        >
+          <sp-icon-delete slot="icon"></sp-icon-delete>
+        </sp-action-button>
+      </div>
+      ${isNested
+        ? html`
+            <div class="schema-field-nested">
+              ${Object.entries(nestedProps).map(([name, sub]) =>
+                nestedFieldCardTpl(
+                  fieldName,
+                  name,
+                  /** @type {SchemaProperty} */ (sub),
+                  nestedRequired.includes(name),
+                  handlers,
+                ),
+              )}
+              ${nestedAddFieldTpl(fieldName, handlers)}
+            </div>
+          `
+        : nothing}
+    </div>
+  `;
+}
+
+/**
+ * Render a nested (child) field card — same inline-editable pattern but delegates to nested
+ * handlers.
+ *
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {SchemaProperty} childSchema
+ * @param {boolean} isRequired
+ * @param {FieldHandlers} handlers
+ * @returns {any}
+ */
+function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, handlers) {
+  const type = childSchema.format === "date" ? "date" : childSchema.type || "string";
+
+  return html`
+    <div class="schema-field-card schema-field-card--nested">
+      <div class="schema-field-row">
+        <sp-textfield
+          size="s"
+          quiet
+          value=${childName}
+          class="schema-field-name-input"
+          @change=${(/** @type {any} */ e) => {
+            const newName = e.target.value.trim();
+            if (newName && newName !== childName && handlers.onRenameNested) {
+              handlers.onRenameNested(parentName, childName, newName);
+            } else {
+              e.target.value = childName;
+            }
+          }}
+          @keydown=${(/** @type {any} */ e) => {
+            if (e.key === "Enter") e.target.blur();
+            if (e.key === "Escape") {
+              e.target.value = childName;
+              e.target.blur();
+            }
+          }}
+        ></sp-textfield>
+        ${typePickerTpl(type, (newType) => {
+          if (handlers.onChangeNestedType)
+            handlers.onChangeNestedType(parentName, childName, newType);
+        })}
+        <sp-switch
+          size="s"
+          ?checked=${isRequired}
+          @change=${() => {
+            if (handlers.onToggleNestedRequired)
+              handlers.onToggleNestedRequired(parentName, childName);
+          }}
+        >
+          Req
+        </sp-switch>
+        <sp-action-button
+          size="xs"
+          quiet
+          title="Delete field"
+          @click=${() => {
+            if (handlers.onDeleteNested) handlers.onDeleteNested(parentName, childName);
+          }}
+        >
+          <sp-icon-delete slot="icon"></sp-icon-delete>
+        </sp-action-button>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render an inline "Add Field" row for nested objects.
+ *
+ * @param {string} parentName
+ * @param {FieldHandlers} handlers
+ * @returns {any}
+ */
+function nestedAddFieldTpl(parentName, handlers) {
+  return html`
+    <div class="schema-nested-add">
+      <sp-textfield
+        size="s"
+        placeholder="field name"
+        class="schema-nested-add-name"
+        @keydown=${(/** @type {any} */ e) => {
+          if (e.key === "Enter") {
+            const row = e.target.closest(".schema-nested-add");
+            const name = e.target.value.trim();
+            const typePicker = row?.querySelector("sp-picker");
+            const type = typePicker?.value || "string";
+            if (name && handlers.onAddNestedField) {
+              handlers.onAddNestedField(parentName, { name, type, required: false });
+              e.target.value = "";
+            }
+          }
+        }}
+      ></sp-textfield>
+      ${typePickerTpl("string", () => {})}
+      <sp-action-button
+        size="xs"
+        quiet
+        title="Add nested field"
+        @click=${(/** @type {any} */ e) => {
+          const row = e.target.closest(".schema-nested-add");
+          const nameInput = /** @type {any} */ (row?.querySelector(".schema-nested-add-name"));
+          const typePicker = /** @type {any} */ (row?.querySelector("sp-picker"));
+          const name = nameInput?.value?.trim();
+          const type = typePicker?.value || "string";
+          if (name && handlers.onAddNestedField) {
+            handlers.onAddNestedField(parentName, { name, type, required: false });
+            nameInput.value = "";
+          }
+        }}
+      >
+        <sp-icon-add slot="icon"></sp-icon-add>
+      </sp-action-button>
+    </div>
+  `;
+}
+
+/**
+ * Render the type picker as an sp-picker dropdown.
+ *
+ * @param {string} value
+ * @param {(type: string) => void} onChange
+ * @returns {any}
+ */
+export function typePickerTpl(value, onChange) {
+  return html`
+    <sp-picker
+      size="s"
+      label="Type"
+      value=${value}
+      @change=${(/** @type {any} */ e) => onChange(e.target.value)}
+    >
+      ${FIELD_TYPES.map((t) => html`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
+    </sp-picker>
+  `;
+}
+
+/**
+ * Render the add-field form (inline, not a dialog).
+ *
+ * @param {{ name: string; type: string; required: boolean }} state
+ * @param {{
+ *   onInput: (field: string, value: any) => void;
+ *   onConfirm: () => void;
+ *   onCancel: () => void;
+ * }} handlers
+ * @returns {any}
+ */
+export function addFieldFormTpl(state, handlers) {
+  return html`
+    <div class="schema-add-field">
+      <sp-textfield
+        size="s"
+        placeholder="Field name"
+        .value=${state.name}
+        @input=${(/** @type {any} */ e) => handlers.onInput("name", e.target.value)}
+        @keydown=${(/** @type {any} */ e) => {
+          if (e.key === "Enter") handlers.onConfirm();
+          if (e.key === "Escape") handlers.onCancel();
+        }}
+      ></sp-textfield>
+      ${typePickerTpl(state.type, (t) => handlers.onInput("type", t))}
+      <sp-switch
+        size="s"
+        ?checked=${state.required}
+        @change=${(/** @type {any} */ e) => handlers.onInput("required", e.target.checked)}
+      >
+        Required
+      </sp-switch>
+      <sp-action-button size="s" @click=${handlers.onConfirm}>Add</sp-action-button>
+      <sp-action-button size="s" quiet @click=${handlers.onCancel}>Cancel</sp-action-button>
+    </div>
+  `;
+}
+
+/**
+ * Build a JSON Schema property definition from a type string.
+ *
+ * @param {string} type
+ * @returns {object}
+ */
+export function schemaForType(type) {
+  switch (type) {
+    case "number":
+      return { type: "number" };
+    case "boolean":
+      return { type: "boolean" };
+    case "array":
+      return { type: "array", items: { type: "string" } };
+    case "object":
+      return { type: "object", properties: {}, required: [] };
+    case "date":
+      return { type: "string", format: "date" };
+    default:
+      return { type: "string" };
+  }
+}
+
+/**
+ * Generate a YAML frontmatter default value for a given schema type.
+ *
+ * @param {string} type
+ * @param {string} [format]
+ * @returns {string}
+ */
+export function yamlDefault(type, format) {
+  if (format === "date") return new Date().toISOString().split("T")[0];
+  switch (type) {
+    case "boolean":
+      return "false";
+    case "number":
+      return "0";
+    case "array":
+      return "[]";
+    case "object":
+      return "{}";
+    default:
+      return '""';
+  }
+}

package/src/state.js

@@ -129,8 +129,8 @@ export function flattenTree(doc, path = [], depth = 0) {
   /** @type {{ node: any; path: JxPath; depth: number; nodeType: string }[]} */
   const rows = [{ node: doc, path, depth, nodeType: "element" }];
 
-  // Custom component instances are atomic in the layer tree — don't recurse into internals
-  if (doc.$props && (doc.tagName || "").includes("-")) {
+  // 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;
   }
 
@@ -226,10 +226,63 @@ export function createState(doc) {
       stylebookTab: "elements", // "elements" | "variables"
       stylebookFilter: "", // search filter text
       stylebookCustomizedOnly: false, // show only customized elements
+      settingsTab: "stylebook", // "stylebook" | "definitions" | "collections"
     },
   };
 }
 
+// ─── Doc/Session slice helpers ───────────────────────────────────────────────
+
+/**
+ * Compose a flat StudioState from separate doc and session slices.
+ *
+ * @param {any} doc
+ * @param {any} session
+ * @returns {StudioState}
+ */
+export function toFlat(doc, session) {
+  return { ...doc, ...session };
+}
+
+/**
+ * Decompose a flat StudioState into doc and session slices.
+ *
+ * @param {StudioState} S
+ * @returns {{ doc: any; session: any }}
+ */
+export function fromFlat(S) {
+  const {
+    document,
+    dirty,
+    fileHandle,
+    documentPath,
+    documentStack,
+    handlersSource,
+    mode,
+    content,
+    history,
+    historyIndex,
+    selection,
+    hover,
+    ui,
+  } = S;
+  return {
+    doc: {
+      document,
+      dirty,
+      fileHandle,
+      documentPath,
+      documentStack,
+      handlersSource,
+      mode,
+      content,
+      history,
+      historyIndex,
+    },
+    session: { selection, hover, ui },
+  };
+}
+
 // ─── Project state (persists across document switches) ────────────────────────
 //
 // Shape: { root, name, projectRoot, isSiteProject, projectConfig,
@@ -245,6 +298,28 @@ export function setProjectState(ps) {
   projectState = ps;
 }
 
+// ─── Frontmatter mutation ───────────────────────────────────────────────────
+
+/**
+ * Update a frontmatter field. Does not use applyMutation because frontmatter lives in S.content,
+ * not S.document.
+ *
+ * @param {StudioState} state
+ * @param {string} field
+ * @param {any} value
+ * @returns {StudioState}
+ */
+export function updateFrontmatter(state, field, value) {
+  const fm = { ...state.content?.frontmatter };
+  if (value === undefined || value === null || value === "") delete fm[field];
+  else fm[field] = value;
+  return {
+    ...state,
+    content: { ...state.content, frontmatter: fm },
+    dirty: true,
+  };
+}
+
 // ─── Core mutation ────────────────────────────────────────────────────────────
 
 /**
@@ -377,6 +452,28 @@ export function duplicateNode(state, path) {
   return selectNode(newState, [...elemPath, "children", idx + 1]);
 }
 
+/**
+ * Wrap the node at `path` in a new wrapper element (e.g. a div).
+ *
+ * @param {StudioState} state
+ * @param {JxPath} path
+ * @param {string} wrapperTag
+ * @returns {StudioState}
+ */
+export function wrapNode(state, path, wrapperTag = "div") {
+  if (!path || path.length < 2) return state;
+  const node = getNodeAtPath(state.document, path);
+  if (!node) return state;
+  const elemPath = /** @type {JxPath} */ (parentElementPath(path));
+  const idx = /** @type {number} */ (childIndex(path));
+  const wrapper = { tagName: wrapperTag, children: [structuredClone(node)] };
+  const newState = applyMutation(state, (doc) => {
+    const parent = getNodeAtPath(doc, elemPath);
+    parent.children.splice(idx, 1, wrapper);
+  });
+  return selectNode(newState, [...elemPath, "children", idx]);
+}
+
 /**
  * @param {StudioState} state
  * @param {JxPath} fromPath

package/src/store.js

@@ -17,6 +17,7 @@ export {
   insertNode,
   removeNode,
   duplicateNode,
+  wrapNode,
   moveNode,
   updateProperty,
   updateStyle,
@@ -46,6 +47,9 @@ export {
   isAncestor,
   projectState,
   setProjectState,
+  updateFrontmatter,
+  toFlat,
+  fromFlat,
 } from "./state.js";
 
 // ─── DOM shortcuts & element refs ────────────────────────────────────────────
@@ -60,45 +64,6 @@ export const rightPanel = /** @type {any} */ (document.querySelector("#right-pan
 export const toolbarEl = /** @type {any} */ (document.querySelector("#toolbar"));
 export const statusbarEl = /** @type {any} */ (document.querySelector("#statusbar"));
 
-// ─── Shared mutable state container ─────────────────────────────────────────
-// A plain object so all importers share the same reference and see mutations.
-// Used by extracted modules; studio.js keeps local aliases during migration.
-
-/**
- * @type {{
- *   S: any;
- *   canvasMode: string;
- *   panX: number;
- *   panY: number;
- *   panzoomWrap: any;
- *   componentInlineEdit: any;
- *   pendingInlineEdit: any;
- *   monacoEditor: any;
- *   functionEditor: any;
- *   liveScope: any;
- *   blockActionBarEl: any;
- *   inlineEditCleanup: any;
- *   selDragCleanup: any;
- *   componentSlashMenu: any;
- * }}
- */
-export const ctx = {
-  S: undefined,
-  canvasMode: "design",
-  panX: 0,
-  panY: 0,
-  panzoomWrap: null,
-  componentInlineEdit: null,
-  pendingInlineEdit: null,
-  monacoEditor: null,
-  functionEditor: null,
-  liveScope: null,
-  blockActionBarEl: null,
-  inlineEditCleanup: null,
-  selDragCleanup: null,
-  componentSlashMenu: null,
-};
-
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 
 /** WeakMap<HTMLElement, Array> — maps rendered DOM elements to their JSON paths */
@@ -225,7 +190,13 @@ export function registerRenderer(name, fn) {
 
 /** Call all registered renderers (full repaint). */
 export function render() {
-  for (const fn of _renderers.values()) fn();
+  for (const [name, fn] of _renderers.entries()) {
+    try {
+      fn();
+    } catch (e) {
+      console.error(`Renderer "${name}" failed:`, e);
+    }
+  }
 }
 
 /**
@@ -236,7 +207,12 @@ export function render() {
 export function renderOnly(...names) {
   for (const name of names) {
     const fn = _renderers.get(name);
-    if (fn) fn();
+    if (!fn) continue;
+    try {
+      fn();
+    } catch (e) {
+      console.error(`Renderer "${name}" failed:`, e);
+    }
   }
 }
 
@@ -288,6 +264,101 @@ export function update(newState) {
   _updateFn(newState);
 }
 
+// ─── Session dispatch (late-bound) ──────────────────────────────────────────
+// Lightweight dispatcher for session-only changes (selection, hover, ui).
+// Does NOT trigger autosave middleware or push history.
+
+/** @type {Function} */
+let _updateSessionFn = () => {
+  throw new Error("updateSession() called before setUpdateSessionFn() — bootstrap not complete");
+};
+
+/** @type {Function} */
+let _getDocFn = () => null;
+
+/** @type {Function} */
+let _getSessionFn = () => null;
+
+/** @param {Function} fn */
+export function setUpdateSessionFn(fn) {
+  _updateSessionFn = fn;
+}
+
+/** @param {Function} fn */
+export function setGetDocFn(fn) {
+  _getDocFn = fn;
+}
+
+/** @param {Function} fn */
+export function setGetSessionFn(fn) {
+  _getSessionFn = fn;
+}
+
+/** @returns {any} */
+export function getDoc() {
+  return _getDocFn();
+}
+
+/** @returns {any} */
+export function getSession() {
+  return _getSessionFn();
+}
+
+/**
+ * Dispatch a session-only state update (selection, hover, ui). Does not trigger autosave.
+ *
+ * @param {any} patch — partial session object, e.g. { ui: { zoom: 2 } }
+ */
+export function updateSession(patch) {
+  _updateSessionFn(patch);
+}
+
+/**
+ * Update a single UI field and re-render. Routes through session dispatch (no autosave, no
+ * history).
+ *
+ * @param {string} field
+ * @param {any} value
+ */
+export function updateUi(field, value) {
+  _updateSessionFn({ ui: { [field]: value } });
+}
+
+// ─── Subscription system ────────────────────────────────────────────────────
+// Panels subscribe to state changes and decide when to re-render, rather than
+// being called unconditionally from _update/_updateSession.
+
+/** @typedef {{ doc: boolean; selection: boolean; hover: boolean; ui: boolean; mode: boolean }} Change */
+
+/** @type {Set<(change: Change) => void>} */
+const _subscribers = new Set();
+
+/**
+ * Subscribe to state changes. Returns an unsubscribe function.
+ *
+ * @param {(change: Change) => void} fn
+ * @returns {() => void}
+ */
+export function subscribe(fn) {
+  _subscribers.add(fn);
+  return () => _subscribers.delete(fn);
+}
+
+/**
+ * Notify all subscribers of a state change.
+ *
+ * @param {Change} change
+ */
+export function notify(change) {
+  for (const fn of _subscribers) {
+    try {
+      fn(change);
+    } catch (e) {
+      console.error("Subscriber failed:", e);
+    }
+  }
+}
+
 /** @type {Function[]} */
 const _updateMiddleware = [];