@jxsuite/studio 0.28.2 → 0.28.4

package/src/ui/expression-editor.ts

@@ -1,8 +1,12 @@
 /// <reference lib="dom" />
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
+import { isJsonObject, isRef } from "@jxsuite/schema/guards";
 import { renderFieldRow } from "./field-row";
 
+import type { JxExpressionNode, JxExpressionOperand } from "@jxsuite/schema/types";
+import type { TemplateResult } from "lit-html";
+
 // ─── Operator Categories ────────────────────────────────────────────────────
 
 const UNARY_OPS = new Set(["!", "-"]);
@@ -49,75 +53,83 @@ const OPERATOR_GROUPS = [
  * }}
  */
 function operatorInfo(op: string) {
-  if (UNARY_OPS.has(op))
+  if (UNARY_OPS.has(op)) {
     return {
-      needsValue: false,
       needsInitial: false,
-      targetMustBeRef: false,
+      needsValue: false,
       spliceArray: false,
+      targetMustBeRef: false,
       valueIsNode: false,
     };
-  if (BINARY_OPS.has(op))
+  }
+  if (BINARY_OPS.has(op)) {
     return {
-      needsValue: true,
       needsInitial: false,
-      targetMustBeRef: false,
+      needsValue: true,
       spliceArray: false,
+      targetMustBeRef: false,
       valueIsNode: false,
     };
-  if (ASSIGN_OPS.has(op))
+  }
+  if (ASSIGN_OPS.has(op)) {
     return {
-      needsValue: true,
       needsInitial: false,
-      targetMustBeRef: true,
+      needsValue: true,
       spliceArray: false,
+      targetMustBeRef: true,
       valueIsNode: false,
     };
-  if (NO_ARG_OPS.has(op))
+  }
+  if (NO_ARG_OPS.has(op)) {
     return {
-      needsValue: false,
       needsInitial: false,
-      targetMustBeRef: true,
+      needsValue: false,
       spliceArray: false,
+      targetMustBeRef: true,
       valueIsNode: false,
     };
-  if (ONE_ARG_OPS.has(op))
+  }
+  if (ONE_ARG_OPS.has(op)) {
     return {
-      needsValue: true,
       needsInitial: false,
-      targetMustBeRef: true,
+      needsValue: true,
       spliceArray: false,
+      targetMustBeRef: true,
       valueIsNode: false,
     };
-  if (op === "splice")
+  }
+  if (op === "splice") {
     return {
-      needsValue: true,
       needsInitial: false,
-      targetMustBeRef: true,
+      needsValue: true,
       spliceArray: true,
+      targetMustBeRef: true,
       valueIsNode: false,
     };
-  if (op === "reduce")
+  }
+  if (op === "reduce") {
     return {
-      needsValue: true,
       needsInitial: true,
-      targetMustBeRef: true,
+      needsValue: true,
       spliceArray: false,
+      targetMustBeRef: true,
       valueIsNode: true,
     };
-  if (op === "map" || op === "filter")
+  }
+  if (op === "map" || op === "filter") {
     return {
-      needsValue: true,
       needsInitial: false,
-      targetMustBeRef: true,
+      needsValue: true,
       spliceArray: false,
+      targetMustBeRef: true,
       valueIsNode: true,
     };
+  }
   return {
-    needsValue: false,
     needsInitial: false,
-    targetMustBeRef: false,
+    needsValue: false,
     spliceArray: false,
+    targetMustBeRef: false,
     valueIsNode: false,
   };
 }
@@ -125,71 +137,105 @@ function operatorInfo(op: string) {
 // ─── Operand Mode Detection ─────────────────────────────────────────────────
 
 /**
- * @param {any} operand
+ * @param {unknown} operand
  * @returns {"ref" | "expression" | "literal"}
  */
-function operandMode(operand: any) {
+function operandMode(operand: unknown) {
   if (operand && typeof operand === "object") {
-    if ("$ref" in operand) return "ref";
-    if ("operator" in operand) return "expression";
+    if ("$ref" in operand) {
+      return "ref";
+    }
+    if ("operator" in operand) {
+      return "expression";
+    }
   }
   return "literal";
 }
 
 /**
  * @param {string} mode
- * @returns {any}
+ * @returns {JxExpressionOperand}
  */
-function defaultForMode(mode: string) {
-  if (mode === "ref") return { $ref: "" };
-  if (mode === "expression") return { operator: "!", target: null };
+function defaultForMode(mode: string): JxExpressionOperand {
+  if (mode === "ref") {
+    return { $ref: "" };
+  }
+  if (mode === "expression") {
+    return { operator: "!", target: null };
+  }
   return null;
 }
 
 // ─── Literal Type Detection ─────────────────────────────────────────────────
 
 /**
- * @param {any} val
+ * @param {unknown} val
  * @returns {"string" | "number" | "boolean" | "null"}
  */
-function literalType(val: any) {
-  if (val === null || val === undefined) return "null";
-  if (typeof val === "boolean") return "boolean";
-  if (typeof val === "number") return "number";
+function literalType(val: unknown) {
+  if (val === null || val === undefined) {
+    return "null";
+  }
+  if (typeof val === "boolean") {
+    return "boolean";
+  }
+  if (typeof val === "number") {
+    return "number";
+  }
   return "string";
 }
 
 /**
  * @param {string} type
- * @returns {any}
+ * @returns {JxExpressionOperand}
  */
-function defaultForLiteralType(type: string) {
-  if (type === "number") return 0;
-  if (type === "boolean") return false;
-  if (type === "null") return null;
+function defaultForLiteralType(type: string): JxExpressionOperand {
+  if (type === "number") {
+    return 0;
+  }
+  if (type === "boolean") {
+    return false;
+  }
+  if (type === "null") {
+    return null;
+  }
   return "";
 }
 
 // ─── Hint (one-line summary for signal rows) ────────────────────────────────
 
 /**
- * @param {any} node
+ * @param {unknown} node
  * @returns {string}
  */
-export function expressionHint(node: any) {
-  if (!node || !node.operator) return "$expression";
-  const op = node.operator;
-  const targetLabel = node.target?.$ref
-    ? node.target.$ref.replace("#/state/", "")
-    : node.target?.operator
-      ? `(${node.target.operator}…)`
-      : String(node.target ?? "?");
+export function expressionHint(node: unknown) {
+  if (!isJsonObject(node) || typeof node.operator !== "string") {
+    return "$expression";
+  }
+  const expr = node as unknown as JxExpressionNode;
+  const op = expr.operator;
+  const { target } = expr;
+  const targetLabel = isRef(target)
+    ? target.$ref.replace("#/state/", "")
+    : isJsonObject(target) && typeof target.operator === "string"
+      ? `(${target.operator}…)`
+      : String(target ?? "?");
 
-  if (ASSIGN_OPS.has(op) || ONE_ARG_OPS.has(op)) return `${op} ${targetLabel}`;
-  if (NO_ARG_OPS.has(op)) return `${op}(${targetLabel})`;
-  if (op === "splice") return `splice(${targetLabel})`;
-  if (op === "reduce" || op === "map" || op === "filter") return `${op}(${targetLabel})`;
-  if (UNARY_OPS.has(op)) return `${op}${targetLabel}`;
+  if (ASSIGN_OPS.has(op) || ONE_ARG_OPS.has(op)) {
+    return `${op} ${targetLabel}`;
+  }
+  if (NO_ARG_OPS.has(op)) {
+    return `${op}(${targetLabel})`;
+  }
+  if (op === "splice") {
+    return `splice(${targetLabel})`;
+  }
+  if (op === "reduce" || op === "map" || op === "filter") {
+    return `${op}(${targetLabel})`;
+  }
+  if (UNARY_OPS.has(op)) {
+    return `${op}${targetLabel}`;
+  }
   return `${targetLabel} ${op} …`;
 }
 
@@ -219,7 +265,9 @@ function renderRefPicker(
       .value=${live(isCustom ? "__custom__" : refVal || "")}
       @change=${(e: Event) => {
         const val = (e.target as HTMLInputElement).value;
-        if (val === "__custom__") return;
+        if (val === "__custom__") {
+          return;
+        }
         onRefChange(val);
       }}
     >
@@ -241,11 +289,11 @@ function renderRefPicker(
 // ─── Literal Editor ─────────────────────────────────────────────────────────
 
 /**
- * @param {any} operand
- * @param {(newVal: any) => void} onChange
+ * @param {unknown} operand
+ * @param {(newVal: JxExpressionOperand) => void} onChange
  * @returns {import("lit-html").TemplateResult}
  */
-function renderLiteralEditor(operand: any, onChange: (newVal: any) => void) {
+function renderLiteralEditor(operand: unknown, onChange: (newVal: JxExpressionOperand) => void) {
   const type = literalType(operand);
   return html`
     <div style="display:flex;gap:4px;align-items:center;flex:1">
@@ -280,7 +328,7 @@ function renderLiteralEditor(operand: any, onChange: (newVal: any) => void) {
           : type === "boolean"
             ? html`<sp-checkbox
                 size="s"
-                ?checked=${!!operand}
+                ?checked=${Boolean(operand)}
                 @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
                 >true</sp-checkbox
               >`
@@ -294,8 +342,8 @@ function renderLiteralEditor(operand: any, onChange: (newVal: any) => void) {
 // ─── Operand Editor ─────────────────────────────────────────────────────────
 
 /**
- * @param {any} operand
- * @param {(newOperand: any) => void} onChange
+ * @param {unknown} operand
+ * @param {(newOperand: unknown) => void} onChange
  * @param {{
  *   stateDefs: string[];
  *   allowEventRef: boolean;
@@ -313,7 +361,7 @@ function renderOperandEditor(
     depth: number;
     mustBeRef?: boolean;
   },
-): import("lit-html").TemplateResult {
+): TemplateResult {
   if (opts.mustBeRef) {
     const refVal = ((operand as Record<string, unknown> | null)?.$ref as string) ?? "";
     return html`
@@ -356,8 +404,8 @@ function renderOperandEditor(
 // ─── Splice Args Editor ─────────────────────────────────────────────────────
 
 /**
- * @param {any[]} args
- * @param {(newArgs: any[]) => void} onChange
+ * @param {unknown[]} args
+ * @param {(newArgs: unknown[]) => void} onChange
  * @param {{ stateDefs: string[]; allowEventRef: boolean; depth: number }} opts
  * @returns {import("lit-html").TemplateResult}
  */
@@ -365,7 +413,7 @@ function renderSpliceArgsEditor(
   args: unknown[],
   onChange: (newArgs: unknown[]) => void,
   opts: { stateDefs: string[]; allowEventRef: boolean; depth: number },
-): import("lit-html").TemplateResult {
+): TemplateResult {
   const safeArgs = Array.isArray(args) ? args : [];
   const labels = ["start", "del", "item"];
 
@@ -424,8 +472,8 @@ const _operatorMenuCache = OPERATOR_GROUPS.map(
 // ─── Main Expression Editor ─────────────────────────────────────────────────
 
 /**
- * @param {any} node
- * @param {(node: any) => void} onChange
+ * @param {unknown} node
+ * @param {(node: unknown) => void} onChange
  * @param {{
  *   stateDefs: string[];
  *   allowEventRef: boolean;
@@ -437,7 +485,7 @@ export function renderExpressionEditor(
   node: unknown,
   onChange: (node: unknown) => void,
   opts: { stateDefs: string[]; allowEventRef: boolean; depth?: number },
-): import("lit-html").TemplateResult {
+): TemplateResult {
   const depth = opts.depth ?? 0;
   const safeNode: Record<string, unknown> =
     node && typeof node === "object"
@@ -454,9 +502,9 @@ export function renderExpressionEditor(
   return html`
     <div class="expression-editor" style=${nestStyle}>
       ${renderFieldRow({
-        prop: "operator",
-        label: "Operator",
         hasValue: false,
+        label: "Operator",
+        prop: "operator",
         widget: html`
           <sp-picker
             size="s"
@@ -464,7 +512,10 @@ export function renderExpressionEditor(
             @change=${(e: Event) => {
               const newOp = (e.target as HTMLInputElement).value;
               const newInfo = operatorInfo(newOp);
-              const updated: any = { operator: newOp, target: safeNode.target };
+              const updated: Record<string, unknown> = {
+                operator: newOp,
+                target: safeNode.target,
+              };
               if (newInfo.targetMustBeRef && operandMode(safeNode.target) !== "ref") {
                 updated.target = { $ref: "" };
               }
@@ -478,7 +529,9 @@ export function renderExpressionEditor(
                   updated.value = safeNode.value ?? null;
                 }
               }
-              if (newInfo.needsInitial) updated.initial = safeNode.initial ?? 0;
+              if (newInfo.needsInitial) {
+                updated.initial = safeNode.initial ?? 0;
+              }
               onChange(updated);
             }}
           >
@@ -487,9 +540,9 @@ export function renderExpressionEditor(
         `,
       })}
       ${renderFieldRow({
-        prop: "target",
-        label: "Target",
         hasValue: false,
+        label: "Target",
+        prop: "target",
         widget: renderOperandEditor(safeNode.target, (t) => onChange({ ...safeNode, target: t }), {
           ...opts,
           depth,
@@ -498,9 +551,9 @@ export function renderExpressionEditor(
       })}
       ${info.needsValue && !info.valueIsNode && !info.spliceArray
         ? renderFieldRow({
-            prop: "value",
-            label: "Value",
             hasValue: false,
+            label: "Value",
+            prop: "value",
             widget: renderOperandEditor(
               safeNode.value,
               (v) => onChange({ ...safeNode, value: v }),
@@ -512,9 +565,9 @@ export function renderExpressionEditor(
         ? html`
             <div style="margin-top:4px">
               ${renderFieldRow({
-                prop: "value",
-                label: "Per-item",
                 hasValue: false,
+                label: "Per-item",
+                prop: "value",
                 widget: nothing,
               })}
               ${renderExpressionEditor(
@@ -531,9 +584,9 @@ export function renderExpressionEditor(
         ? html`
             <div style="margin-top:4px">
               ${renderFieldRow({
-                prop: "value",
-                label: "Args",
                 hasValue: false,
+                label: "Args",
+                prop: "value",
                 widget: nothing,
               })}
               ${renderSpliceArgsEditor(
@@ -549,9 +602,9 @@ export function renderExpressionEditor(
         : nothing}
       ${info.needsInitial
         ? renderFieldRow({
-            prop: "initial",
-            label: "Initial",
             hasValue: false,
+            label: "Initial",
+            prop: "initial",
             widget: renderOperandEditor(
               safeNode.initial,
               (v) => onChange({ ...safeNode, initial: v }),

package/src/ui/field-input.ts

@@ -49,14 +49,19 @@ export function hasDraft(key: string): boolean {
 /** Record the in-progress value for a field without committing it. */
 export function setDraft(key: string, value: string): void {
   const d = _drafts.get(key);
-  if (d) d.value = value;
-  else _drafts.set(key, { value });
+  if (d) {
+    d.value = value;
+  } else {
+    _drafts.set(key, { value });
+  }
 }
 
 /** Discard a field's draft (and cancel any pending debounced commit). */
 export function clearDraft(key: string): void {
   const d = _drafts.get(key);
-  if (d?.timer) clearTimeout(d.timer);
+  if (d?.timer) {
+    clearTimeout(d.timer);
+  }
   _drafts.delete(key);
 }
 
@@ -67,11 +72,17 @@ export function clearDraft(key: string): void {
  */
 export function scheduleDraftCommit(key: string, ms: number, commit: (v: string) => void): void {
   const d = _drafts.get(key);
-  if (!d) return;
-  if (d.timer) clearTimeout(d.timer);
+  if (!d) {
+    return;
+  }
+  if (d.timer) {
+    clearTimeout(d.timer);
+  }
   d.timer = setTimeout(() => {
     const cur = _drafts.get(key);
-    if (!cur) return;
+    if (!cur) {
+      return;
+    }
     delete cur.timer;
     commit(cur.value);
   }, ms);
@@ -83,9 +94,13 @@ export function scheduleDraftCommit(key: string, ms: number, commit: (v: string)
  */
 export function commitField(key: string, commit: (v: string) => void): void {
   const d = _drafts.get(key);
-  if (!d) return;
-  if (d.timer) clearTimeout(d.timer);
-  const value = d.value;
+  if (!d) {
+    return;
+  }
+  if (d.timer) {
+    clearTimeout(d.timer);
+  }
+  const { value } = d;
   _drafts.delete(key);
   commit(value);
 }
@@ -119,15 +134,17 @@ function makeHandlers(
   commitMode: "live" | "blur" = "live",
 ) {
   return {
-    onInput: (e: Event) => {
+    onCommit: (e: Event) => {
       const v = (e.target as HTMLInputElement).value;
       setDraft(key, v);
-      if (commitMode === "live") scheduleDraftCommit(key, ms, commit);
+      commitField(key, commit);
     },
-    onCommit: (e: Event) => {
+    onInput: (e: Event) => {
       const v = (e.target as HTMLInputElement).value;
       setDraft(key, v);
-      commitField(key, commit);
+      if (commitMode === "live") {
+        scheduleDraftCommit(key, ms, commit);
+      }
     },
     onKeydown: (e: KeyboardEvent, multiline: boolean) => {
       if (e.key === "Enter" && !multiline) {
@@ -158,7 +175,7 @@ export function spTextField(
       <sp-textfield
         size=${opts.size ?? "s"}
         placeholder=${opts.placeholder ?? ""}
-        ?disabled=${!!opts.disabled}
+        ?disabled=${Boolean(opts.disabled)}
         style=${opts.style ?? ""}
         .value=${live(getFieldValue(key, value))}
         @input=${onInput}
@@ -185,7 +202,7 @@ export function spTextArea(
         multiline
         size=${opts.size ?? "s"}
         placeholder=${opts.placeholder ?? ""}
-        ?disabled=${!!opts.disabled}
+        ?disabled=${Boolean(opts.disabled)}
         style=${opts.style ?? ""}
         .value=${live(getFieldValue(key, value))}
         @input=${onInput}
@@ -218,7 +235,7 @@ export function rawTextArea(
         class="field-input"
         style=${style}
         placeholder=${opts.placeholder ?? ""}
-        ?disabled=${!!opts.disabled}
+        ?disabled=${Boolean(opts.disabled)}
         .value=${live(getFieldValue(key, value))}
         @input=${onInput}
         @change=${onCommit}
@@ -241,13 +258,13 @@ export function spNumberField(
     <sp-number-field
       size=${opts.size ?? "s"}
       ?hide-stepper=${opts.hideStepper ?? true}
-      ?disabled=${!!opts.disabled}
+      ?disabled=${Boolean(opts.disabled)}
       style=${opts.style ?? ""}
       .value=${live(value !== undefined ? Number(value) : undefined)}
       @change=${(e: Event) => {
         const raw = (e.target as HTMLInputElement).value;
         const n = Number(raw);
-        commit(raw === "" || isNaN(n) ? undefined : n);
+        commit(raw === "" || Number.isNaN(n) ? undefined : n);
       }}
     ></sp-number-field>
   `;

package/src/ui/field-row.ts

@@ -42,7 +42,7 @@ export function renderFieldRow({
 }) {
   return html`
     <div
-      class=${classMap({ "style-row": true, "style-row--warning": !!warning })}
+      class=${classMap({ "style-row": true, "style-row--warning": Boolean(warning) })}
       data-prop=${prop}
       style=${span === 2 ? "grid-column: 1 / -1" : ""}
     >

package/src/ui/icons.ts

@@ -1,11 +1,12 @@
-// packages/studio/icons.js
+// Packages/studio/icons.js
 // Icon templates for style sidebar button groups.
 // Uses Spectrum workflow icons where available; custom SVGs for flex-specific concepts.
 
 import { html } from "lit";
+import type { TemplateResult } from "lit";
 
 // Helper for custom filled-rect icons (alignment/justify diagrams) where no Spectrum match exists
-const _R = (d: import("lit").TemplateResult) =>
+const _R = (d: TemplateResult) =>
   html`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -18,7 +19,7 @@ const _R = (d: import("lit").TemplateResult) =>
   </svg>`;
 
 // Helper for custom stroke icons
-const _S = (d: import("lit").TemplateResult) =>
+const _S = (d: TemplateResult) =>
   html`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -33,7 +34,7 @@ const _S = (d: import("lit").TemplateResult) =>
     ${d}
   </svg>`;
 
-const icons = {
+export const icons = {
   // ─── Arrows — flexDirection ───
   "arrow-right": html`<sp-icon-arrow-right slot="icon"></sp-icon-arrow-right>`,
   "arrow-left": html`<sp-icon-arrow-left slot="icon"></sp-icon-arrow-left>`,
@@ -79,5 +80,3 @@ const icons = {
   "display-inline": html`<sp-icon-remove slot="icon"></sp-icon-remove>`,
   "display-none": html`<sp-icon-visibility-off slot="icon"></sp-icon-visibility-off>`,
 };
-
-export default icons;