@jxsuite/studio 0.37.1 → 1.1.0

package/dist/iframe-entry.js

@@ -113,8 +113,9 @@ class EffectScope {
       this._isPaused = true;
       let i, l;
       if (this.scopes) {
-        for (i = 0, l = this.scopes.length;i < l; i++) {
-          this.scopes[i].pause();
+        const scopes = this.scopes.slice();
+        for (i = 0, l = scopes.length;i < l; i++) {
+          scopes[i].pause();
         }
       }
       for (i = 0, l = this.effects.length;i < l; i++) {
@@ -128,12 +129,14 @@ class EffectScope {
         this._isPaused = false;
         let i, l;
         if (this.scopes) {
-          for (i = 0, l = this.scopes.length;i < l; i++) {
-            this.scopes[i].resume();
+          const scopes = this.scopes.slice();
+          for (i = 0, l = scopes.length;i < l; i++) {
+            scopes[i].resume();
           }
         }
-        for (i = 0, l = this.effects.length;i < l; i++) {
-          this.effects[i].resume();
+        const effects = this.effects.slice();
+        for (i = 0, l = effects.length;i < l; i++) {
+          effects[i].resume();
         }
       }
     }
@@ -187,8 +190,9 @@ class EffectScope {
       }
       this.cleanups.length = 0;
       if (this.scopes) {
-        for (i = 0, l = this.scopes.length;i < l; i++) {
-          this.scopes[i].stop(true);
+        const scopes = this.scopes.slice();
+        for (i = 0, l = scopes.length;i < l; i++) {
+          scopes[i].stop(true);
         }
         this.scopes.length = 0;
       }
@@ -1444,33 +1448,142 @@ var BINARY_OPS = new Set([
   ">",
   ">=",
   "&&",
-  "||"
+  "||",
+  "??"
 ]);
 var ASSIGNMENT_OPS = new Set(["=", "+=", "-=", "*=", "/="]);
 var ARRAY_METHOD_OPS = new Set(["push", "pop", "shift", "unshift", "splice"]);
 var AGGREGATE_OPS = new Set(["reduce", "map", "filter"]);
+var CONDITIONAL_OPS = new Set(["?:", "switch"]);
+var PURE_METHOD_OPS = new Set([
+  "includes",
+  "indexOf",
+  "lastIndexOf",
+  "join",
+  "slice",
+  "concat",
+  "at",
+  "flat",
+  "toSorted",
+  "toReversed",
+  "toSpliced",
+  "with",
+  "toUpperCase",
+  "toLowerCase",
+  "trim",
+  "trimStart",
+  "trimEnd",
+  "split",
+  "startsWith",
+  "endsWith",
+  "padStart",
+  "padEnd",
+  "replaceAll",
+  "repeat",
+  "charAt",
+  "normalize",
+  "toLocaleUpperCase",
+  "toLocaleLowerCase",
+  "toFixed",
+  "toPrecision",
+  "toLocaleString"
+]);
 var BLESSED_OPERATORS = new Set([
   ...MUTATING_OPS,
   ...UNARY_OPS,
   ...BINARY_OPS,
-  ...AGGREGATE_OPS
+  ...AGGREGATE_OPS,
+  ...CONDITIONAL_OPS,
+  ...PURE_METHOD_OPS,
+  "call"
+]);
+var BLESSED_GLOBALS = new Set([
+  "isNaN",
+  "isFinite",
+  "parseFloat",
+  "parseInt",
+  "encodeURIComponent",
+  "decodeURIComponent",
+  "structuredClone",
+  "Math/abs",
+  "Math/ceil",
+  "Math/floor",
+  "Math/round",
+  "Math/trunc",
+  "Math/sign",
+  "Math/sqrt",
+  "Math/cbrt",
+  "Math/pow",
+  "Math/exp",
+  "Math/log",
+  "Math/log2",
+  "Math/log10",
+  "Math/min",
+  "Math/max",
+  "Math/hypot",
+  "Number/isInteger",
+  "Number/isFinite",
+  "Number/isNaN",
+  "Number/parseFloat",
+  "Number/parseInt",
+  "JSON/parse",
+  "JSON/stringify",
+  "Object/keys",
+  "Object/values",
+  "Object/entries",
+  "Object/fromEntries",
+  "Array/from",
+  "Array/isArray",
+  "Array/of",
+  "String/fromCharCode",
+  "String/fromCodePoint",
+  "Intl/formatNumber",
+  "Intl/formatDate",
+  "Intl/formatRelativeTime"
 ]);
+var BLESSED_HELPERS = {
+  "Intl/formatDate": (value, locale, options) => new Intl.DateTimeFormat(locale, options).format(new Date(value)),
+  "Intl/formatNumber": (value, locale, options) => new Intl.NumberFormat(locale, options).format(value),
+  "Intl/formatRelativeTime": (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale, options).format(value, unit)
+};
+function isBlessedGlobal(ref2) {
+  return ref2.startsWith("window#/") && BLESSED_GLOBALS.has(ref2.slice("window#/".length));
+}
 function isMutating(op) {
   return MUTATING_OPS.has(op);
 }
-function resolveOperand(operand, state, event, iterCtx) {
+var MAX_CALL_DEPTH = 64;
+var MAX_REPORT_DEPTH = 64;
+function subTrace(trace, seg) {
+  if (!trace) {
+    return;
+  }
+  const depth = (trace.depth ?? 0) + 1;
+  if (depth > MAX_REPORT_DEPTH) {
+    return;
+  }
+  return {
+    depth,
+    path: [...trace.path ?? [], ...Array.isArray(seg) ? seg : [seg]],
+    report: trace.report
+  };
+}
+function resolveOperand(operand, state, event, iterCtx, trace) {
   if (operand === null || operand === undefined) {
     return operand;
   }
   if (typeof operand === "object" && !Array.isArray(operand) && "operator" in operand) {
-    return evaluateExpression(operand, state, event, iterCtx);
+    return evaluateExpression(operand, state, event, iterCtx, trace);
   }
   if (typeof operand === "object" && !Array.isArray(operand) && "$ref" in operand) {
-    return resolveExprRef(operand.$ref, state, event, iterCtx);
+    const resolved = resolveExprRef(operand.$ref, state, event, iterCtx);
+    trace?.report(trace.path ?? [], resolved);
+    return resolved;
   }
   if (Array.isArray(operand)) {
-    return operand.map((o) => resolveOperand(o, state, event, iterCtx));
+    return operand.map((o, i) => resolveOperand(o, state, event, iterCtx, subTrace(trace, i)));
   }
+  trace?.report(trace.path ?? [], operand);
   return operand;
 }
 function resolveExprRef(ref2, state, event, iterCtx) {
@@ -1480,6 +1593,11 @@ function resolveExprRef(ref2, state, event, iterCtx) {
   if (ref2.startsWith("$reduce/")) {
     return iterCtx?.acc;
   }
+  if (ref2.startsWith("$args/")) {
+    const parts = ref2.slice("$args/".length).split("/");
+    const base = iterCtx?.args?.[parts[0]];
+    return parts.length > 1 ? getPath(base, parts.slice(1).join("/")) : base;
+  }
   if (ref2.startsWith("event#/")) {
     const path = ref2.slice("event#/".length);
     return getPath(event, path);
@@ -1557,13 +1675,18 @@ function resolveWritableRef(ref2, state, _event, iterCtx) {
   }
   return { key: ref2, obj: state };
 }
-function evaluateExpression(node, state, event, iterCtx) {
+function evaluateExpression(node, state, event, iterCtx, trace) {
+  const result = evaluateNode(node, state, event, iterCtx, trace);
+  trace?.report(trace.path ?? [], result);
+  return result;
+}
+function evaluateNode(node, state, event, iterCtx, trace) {
   const { operator, target, value, initial } = node;
   if (!BLESSED_OPERATORS.has(operator)) {
     throw new Error(`$expression: unknown operator "${operator}"`);
   }
   if (UNARY_OPS.has(operator) && !("value" in node)) {
-    const operand = resolveOperand(target, state, event, iterCtx);
+    const operand = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
     if (operator === "!") {
       return !operand;
     }
@@ -1571,9 +1694,78 @@ function evaluateExpression(node, state, event, iterCtx) {
       return -operand;
     }
   }
+  if (operator === "call") {
+    const calleeRef = target?.$ref;
+    if (typeof calleeRef !== "string") {
+      throw new TypeError("$expression: call target must be a $ref pointer");
+    }
+    const callDepth = (iterCtx?.callDepth ?? 0) + 1;
+    if (callDepth > MAX_CALL_DEPTH) {
+      throw new Error(`$expression: call depth exceeded (${MAX_CALL_DEPTH})`);
+    }
+    const argValues = Array.isArray(value) ? value.map((o, i) => resolveOperand(o, state, event, iterCtx, subTrace(trace, ["value", i]))) : [];
+    if (calleeRef.startsWith("window#/")) {
+      if (!isBlessedGlobal(calleeRef)) {
+        throw new Error(`$expression: "${calleeRef}" is not a blessed pure global`);
+      }
+      const globalPath = calleeRef.slice("window#/".length);
+      const helper = BLESSED_HELPERS[globalPath];
+      if (helper) {
+        return helper(...argValues);
+      }
+      const fn = getPath(globalThis.window, globalPath);
+      const lastSlash = globalPath.lastIndexOf("/");
+      const thisArg = lastSlash === -1 ? globalThis.window : getPath(globalThis.window, globalPath.slice(0, lastSlash));
+      return fn.apply(thisArg, argValues);
+    }
+    const callee = resolveExprRef(calleeRef, state, event, iterCtx);
+    if (typeof callee === "function") {
+      return callee(...argValues);
+    }
+    if (callee && typeof callee === "object" && "$expression" in callee) {
+      const def2 = callee;
+      const args = {};
+      for (const [i, p] of (def2.parameters ?? []).entries()) {
+        const name = typeof p === "string" ? p : p?.name ?? "";
+        if (!name) {
+          continue;
+        }
+        args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
+      }
+      return evaluateExpression(def2.$expression, state, event, { args, callDepth });
+    }
+    throw new TypeError(`$expression: call target "${calleeRef}" is not callable`);
+  }
+  if (CONDITIONAL_OPS.has(operator)) {
+    if (operator === "?:") {
+      const test = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+      if (trace) {
+        const consequent = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
+        const alternate = resolveOperand(initial, state, event, iterCtx, subTrace(trace, "initial"));
+        return test ? consequent : alternate;
+      }
+      return test ? resolveOperand(value, state, event, iterCtx) : resolveOperand(initial, state, event, iterCtx);
+    }
+    const discriminant = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+    const key = String(discriminant);
+    const cases = node.cases ?? {};
+    const matched = Object.hasOwn(cases, key);
+    if (trace) {
+      let result;
+      for (const [k, caseOperand] of Object.entries(cases)) {
+        const v = resolveOperand(caseOperand, state, event, iterCtx, subTrace(trace, ["cases", k]));
+        if (k === key) {
+          result = v;
+        }
+      }
+      const fallback = resolveOperand(node.default, state, event, iterCtx, subTrace(trace, "default"));
+      return matched ? result : fallback;
+    }
+    return matched ? resolveOperand(cases[key], state, event, iterCtx) : resolveOperand(node.default, state, event, iterCtx);
+  }
   if (BINARY_OPS.has(operator)) {
-    const left = resolveOperand(target, state, event, iterCtx);
-    const right = resolveOperand(value, state, event, iterCtx);
+    const left = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+    const right = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
     switch (operator) {
       case "+": {
         return left + right;
@@ -1614,13 +1806,16 @@ function evaluateExpression(node, state, event, iterCtx) {
       case "||": {
         return left || right;
       }
+      case "??": {
+        return left ?? right;
+      }
       default: {
         break;
       }
     }
   }
   if (ASSIGNMENT_OPS.has(operator)) {
-    const rhs = resolveOperand(value, state, event, iterCtx);
+    const rhs = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
     const { obj, key } = resolveWritableRef(target.$ref, state, event, iterCtx);
     switch (operator) {
       case "=": {
@@ -1654,13 +1849,13 @@ function evaluateExpression(node, state, event, iterCtx) {
     return;
   }
   if (ARRAY_METHOD_OPS.has(operator)) {
-    const arr = resolveOperand(target, state, event, iterCtx);
+    const arr = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
     switch (operator) {
       case "push": {
-        return arr.push(resolveOperand(value, state, event, iterCtx));
+        return arr.push(resolveOperand(value, state, event, iterCtx, subTrace(trace, "value")));
       }
       case "unshift": {
-        return arr.unshift(resolveOperand(value, state, event, iterCtx));
+        return arr.unshift(resolveOperand(value, state, event, iterCtx, subTrace(trace, "value")));
       }
       case "pop": {
         return arr.pop();
@@ -1669,7 +1864,7 @@ function evaluateExpression(node, state, event, iterCtx) {
         return arr.shift();
       }
       case "splice": {
-        const args = resolveOperand(value, state, event, iterCtx);
+        const args = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
         return arr.splice(...args);
       }
       default: {
@@ -1677,32 +1872,29 @@ function evaluateExpression(node, state, event, iterCtx) {
       }
     }
   }
+  if (PURE_METHOD_OPS.has(operator)) {
+    const receiver = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+    const args = value === undefined ? [] : Array.isArray(value) ? resolveOperand(value, state, event, iterCtx, subTrace(trace, "value")) : [resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"))];
+    const method = receiver?.[operator];
+    if (typeof method !== "function") {
+      return;
+    }
+    return method.apply(receiver, args);
+  }
   if (AGGREGATE_OPS.has(operator)) {
-    const arr = resolveOperand(target, state, event, iterCtx);
+    const arr = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
     if (operator === "reduce") {
-      let acc = resolveOperand(initial, state, event, iterCtx);
+      let acc = resolveOperand(initial, state, event, iterCtx, subTrace(trace, "initial"));
       for (const [index, item] of arr.entries()) {
-        acc = evaluateExpression(value, state, event, {
-          acc,
-          index,
-          item
-        });
+        acc = evaluateExpression(value, state, event, { acc, index, item }, index === 0 ? subTrace(trace, "value") : undefined);
       }
       return acc;
     }
     if (operator === "map") {
-      return arr.map((item, index) => evaluateExpression(value, state, event, {
-        ...iterCtx,
-        index,
-        item
-      }));
+      return arr.map((item, index) => evaluateExpression(value, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
     }
     if (operator === "filter") {
-      return arr.filter((item, index) => evaluateExpression(value, state, event, {
-        ...iterCtx,
-        index,
-        item
-      }));
+      return arr.filter((item, index) => evaluateExpression(value, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
     }
   }
   return;
@@ -1714,6 +1906,9 @@ function getPath(obj, path) {
   }
   return current;
 }
+function evaluateOperand(operand, state, event, iterCtx) {
+  return resolveOperand(operand, state, event, iterCtx);
+}
 
 // ../schema/src/guards.ts
 function isJsonObject(value) {
@@ -1728,6 +1923,12 @@ function isFunctionDef(value) {
 function isExpressionDef(value) {
   return isJsonObject(value) && isJsonObject(value.$expression);
 }
+function isNamedFormulaDef(value) {
+  return isExpressionDef(value) && Array.isArray(value.parameters) && value.parameters.length > 0;
+}
+function hasStructuredBody(value) {
+  return isFunctionDef(value) && Array.isArray(value.body);
+}
 function isPrototypeDef(value) {
   return isJsonObject(value) && typeof value.$prototype === "string" && value.$prototype !== "Function";
 }
@@ -1763,6 +1964,74 @@ function paramNames(parameters) {
   return parameters.map((p) => typeof p === "string" ? p : p.name);
 }
 
+// ../runtime/src/statements.ts
+function statementKind(statement) {
+  if ("operator" in statement) {
+    return "expression";
+  }
+  if ("if" in statement) {
+    return "if";
+  }
+  if ("$switch" in statement) {
+    return "switch";
+  }
+  return "dispatch";
+}
+async function runStatements(statements, state, event, opts = {}) {
+  const iterCtx = opts.args ? { args: opts.args } : undefined;
+  for (const statement of statements) {
+    switch (statementKind(statement)) {
+      case "expression": {
+        const result = evaluateExpression(statement, state, event, iterCtx);
+        if (result && typeof result.then === "function") {
+          await result;
+        }
+        break;
+      }
+      case "if": {
+        const branch = statement;
+        const taken = evaluateOperand(branch.if, state, event, iterCtx) ? branch.then : branch.else;
+        if (Array.isArray(taken)) {
+          await runStatements(taken, state, event, opts);
+        }
+        break;
+      }
+      case "switch": {
+        const branch = statement;
+        const key = String(evaluateOperand(branch.$switch, state, event, iterCtx));
+        const cases = branch.cases ?? {};
+        const taken = Object.hasOwn(cases, key) ? cases[key] : branch.default;
+        if (Array.isArray(taken)) {
+          await runStatements(taken, state, event, opts);
+        }
+        break;
+      }
+      case "dispatch": {
+        const dispatch = statement;
+        const target = opts.target ?? event?.currentTarget;
+        if (!target) {
+          break;
+        }
+        const init = {};
+        if ("detail" in dispatch) {
+          init.detail = evaluateOperand(dispatch.detail, state, event, iterCtx);
+        }
+        if (dispatch.bubbles !== undefined) {
+          init.bubbles = dispatch.bubbles;
+        }
+        if (dispatch.composed !== undefined) {
+          init.composed = dispatch.composed;
+        }
+        target.dispatchEvent(new CustomEvent(dispatch.dispatchEvent, init));
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+}
+
 // ../runtime/src/runtime.ts
 var _resolveCache = new Map;
 async function resolve(source) {
@@ -1851,6 +2120,37 @@ function canvasAttrName(el, key) {
   }
   return key;
 }
+var _stampPropBindings = false;
+function setStampPropBindings(on) {
+  _stampPropBindings = on;
+}
+var PURE_STATE_TEMPLATE = /^\s*\$\{\s*state\.(\w+)\s*\}\s*$/;
+function boundPropKey(key, val, state) {
+  if (!_stampPropBindings || key !== "textContent") {
+    return null;
+  }
+  let sub = null;
+  if (isRefObj(val)) {
+    if (!val.$ref.startsWith("#/state/")) {
+      return null;
+    }
+    const rest = val.$ref.slice("#/state/".length);
+    sub = rest && !rest.includes("/") ? rest : null;
+  } else if (typeof val === "string") {
+    sub = PURE_STATE_TEMPLATE.exec(val)?.[1] ?? null;
+  }
+  if (!sub) {
+    return null;
+  }
+  const stored = toRaw(state)[sub];
+  if (isRef(stored) || typeof stored === "function") {
+    return null;
+  }
+  if (typeof stored === "object" && stored !== null) {
+    return null;
+  }
+  return sub;
+}
 async function buildScope(doc, parentScope = {}, base = location.href) {
   const raw = {};
   for (const [key, val] of Object.entries(parentScope)) {
@@ -1914,7 +2214,20 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
   for (const [key, def2] of Object.entries(defs)) {
     if (isExpressionDef(def2)) {
       const node = def2.$expression;
-      if (isMutating(node.operator)) {
+      if (isNamedFormulaDef(def2)) {
+        const params = def2.parameters;
+        state[key] = (...argValues) => {
+          const args = {};
+          for (const [i, p] of params.entries()) {
+            const name = typeof p === "string" ? p : p?.name ?? "";
+            if (!name) {
+              continue;
+            }
+            args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
+          }
+          return evaluateExpression(node, state, null, { args });
+        };
+      } else if (isMutating(node.operator)) {
         const handler = (s, event) => evaluateExpression(node, s, event);
         state[key] = handler;
       } else {
@@ -1923,7 +2236,28 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
     }
   }
   for (const [key, def2] of Object.entries(defs)) {
-    if (isFunctionDef(def2)) {
+    if (hasStructuredBody(def2)) {
+      const { body } = def2;
+      if (Array.isArray(def2.parameters) && def2.parameters.length > 0) {
+        const params = def2.parameters;
+        state[key] = (...argValues) => {
+          const args = {};
+          for (const [i, p] of params.entries()) {
+            const name = typeof p === "string" ? p : p?.name ?? "";
+            if (!name) {
+              continue;
+            }
+            args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
+          }
+          return runStatements(body, state, null, { args });
+        };
+      } else {
+        const handler = (s, event) => {
+          runStatements(body, s, event ?? null);
+        };
+        state[key] = handler;
+      }
+    } else if (isFunctionDef(def2)) {
       state[key] = await resolveFunction(def2, state, key, base);
     }
   }
@@ -1974,7 +2308,7 @@ async function resolveFunction(def2, state, key, base) {
     return noop;
   }
   let fn;
-  if (def2.body) {
+  if (typeof def2.body === "string") {
     const params = resolveParamNames(def2);
     fn = new Function(...params, def2.body);
     Object.defineProperty(fn, "name", {
@@ -2012,7 +2346,7 @@ async function resolveFunction(def2, state, key, base) {
   const hasParams = (def2.parameters ?? def2.arguments ?? []).length > 0;
   let isComputed = false;
   if (!hasParams) {
-    if (def2.body) {
+    if (typeof def2.body === "string") {
       isComputed = /\breturn\b/.test(def2.body);
     } else if (fn) {
       isComputed = fn.length <= 1 && /\breturn\b/.test(fn.toString());
@@ -2138,7 +2472,15 @@ function applyProperties(el, def2, state) {
         }
         continue;
       }
-      if (isFunctionDef(val) && val.body) {
+      if (hasStructuredBody(val)) {
+        const { body } = val;
+        const scope = state;
+        el.addEventListener(key.slice(2), (e) => {
+          runStatements(body, scope, e);
+        });
+        continue;
+      }
+      if (isFunctionDef(val) && typeof val.body === "string") {
         const params = resolveParamNames(val);
         const fn = new Function(...params, val.body);
         const scope = state;
@@ -2157,6 +2499,10 @@ function applyProperties(el, def2, state) {
 }
 function bindProperty(el, key, val, state) {
   const target = el;
+  const boundProp = boundPropKey(key, val, state);
+  if (boundProp) {
+    el.dataset.jxBoundProp = boundProp;
+  }
   if (isRefObj(val)) {
     const refVal = val;
     if (key === "id") {
@@ -3304,6 +3650,18 @@ var EDIT_PLACEHOLDER_CSS = `
   font-size: 13px;
   pointer-events: none;
 }
+[data-jx-bound-prop]:hover {
+  cursor: text;
+  outline: 1px dashed color-mix(in srgb, #808080 40%, transparent);
+  outline-offset: 1px;
+}
+[data-jx-bound-prop]:empty:not([contenteditable="plaintext-only"]):not([contenteditable="true"])::after {
+  content: "Empty \\2014  double-click to edit";
+  color: color-mix(in srgb, #808080 40%, transparent);
+  font-style: italic;
+  font-size: 13px;
+  pointer-events: none;
+}
 `;
 function syncEditModeCss(doc, mode) {
   const existing = doc.head.querySelector(`#${EDIT_PLACEHOLDER_STYLE_ID}`);
@@ -3509,6 +3867,7 @@ async function renderResolvedDocument(opts) {
   setSkipServerFunctions(opts.mode !== "preview");
   setCanvasViewportTranspose(true);
   setCanvasDelinkAnchors(opts.mode !== "preview");
+  setStampPropBindings(opts.mode === "design" || opts.mode === "edit");
   applySiteStyle(opts.siteStyle);
   injectHead(opts.doc);
   syncEditModeCss(opts.container.ownerDocument, opts.mode);
@@ -4073,6 +4432,8 @@ var splitFn = null;
 var insertFn = null;
 var endFn = null;
 var _blurCloseSuspended = false;
+var _plainMode = false;
+var _plainOriginal = "";
 function suspendBlurClose() {
   _blurCloseSuspended = true;
 }
@@ -4082,7 +4443,7 @@ function resumeBlurClose() {
 function isEditableBlock(el) {
   return EDITABLE_BLOCKS.has(el.tagName.toLowerCase());
 }
-function startEditing(el, path, callbacks) {
+function startEditing(el, path, callbacks, opts) {
   if (activeEl) {
     stopEditing(true);
   }
@@ -4092,7 +4453,17 @@ function startEditing(el, path, callbacks) {
   splitFn = callbacks.onSplit;
   insertFn = callbacks.onInsert;
   endFn = callbacks.onEnd;
-  el.contentEditable = "true";
+  _plainMode = opts?.plainText === true;
+  _plainOriginal = _plainMode ? el.textContent ?? "" : "";
+  if (_plainMode) {
+    try {
+      el.contentEditable = "plaintext-only";
+    } catch {
+      el.contentEditable = "true";
+    }
+  } else {
+    el.contentEditable = "true";
+  }
   el.style.pointerEvents = "auto";
   el.style.outline = "2px solid var(--accent, #4a9eff)";
   el.style.outlineOffset = "1px";
@@ -4131,6 +4502,8 @@ function stopEditing(silent = false) {
   commitFn = null;
   splitFn = null;
   insertFn = null;
+  _plainMode = false;
+  _plainOriginal = "";
   if (silent) {
     endFn = null;
   } else if (endFn) {
@@ -4152,6 +4525,27 @@ function isSlashActive() {
   return slash.isOpen();
 }
 function handleKeydown(e) {
+  if (_plainMode) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (activeEl) {
+        activeEl.textContent = _plainOriginal;
+      }
+      stopEditing();
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      stopEditing();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && ["b", "i", "u", "`"].includes(e.key)) {
+      e.preventDefault();
+    }
+    return;
+  }
   if (e.key === "Escape") {
     e.preventDefault();
     e.stopPropagation();
@@ -4271,6 +4665,11 @@ function commitChanges() {
   if (!commitFn || !activeEl || !activePath) {
     return;
   }
+  if (_plainMode) {
+    commitFn(activePath, null, (activeEl.textContent ?? "").replaceAll(`
+`, " "));
+    return;
+  }
   normalizeInlineContent(activeEl);
   const result = elementToJx(activeEl);
   commitFn(activePath, result.children ?? null, result.textContent ?? null);
@@ -5152,6 +5551,31 @@ function findEditableTarget(target) {
   }
   return null;
 }
+function findPropBoundTarget(target) {
+  let el = target instanceof Element ? target : null;
+  while (el) {
+    if (el instanceof HTMLElement) {
+      if (el.dataset.jxBoundProp) {
+        return { el, prop: el.dataset.jxBoundProp };
+      }
+      if (el.dataset.jxPath) {
+        return null;
+      }
+    }
+    el = el.parentElement;
+  }
+  return null;
+}
+function ownerInstanceOf(el) {
+  let cur = el.parentElement;
+  while (cur) {
+    if (cur.tagName.includes("-")) {
+      return cur;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+}
 function elementForPath(container, path) {
   const serialized = serializeJxPath(path);
   const esc = serialized.replaceAll("\\", String.raw`\\`).replaceAll("'", String.raw`\'`);
@@ -5268,6 +5692,36 @@ function startIframeInlineEdit(channel, container, opts) {
     cacheRange();
     onSelectionChange();
   };
+  const propEditableAt = (hostPath, prop) => {
+    const shadowDoc = opts?.getShadowDoc?.();
+    if (!shadowDoc) {
+      return true;
+    }
+    const node = getNodeAtPath(shadowDoc, hostPath);
+    const raw = node?.$props?.[prop];
+    if (raw == null) {
+      return true;
+    }
+    if (typeof raw === "object") {
+      return false;
+    }
+    return !(typeof raw === "string" && raw.includes("${"));
+  };
+  const enterPropEditAt = (el, hostPath, prop) => {
+    channel.post({ kind: "editStart", path: hostPath, prop });
+    suspendBlurClose();
+    startEditing(el, hostPath, {
+      onCommit: (p, _children, textContent) => channel.post({ kind: "editCommitProp", path: p, prop, value: textContent ?? "" }),
+      onEnd: () => {
+        resumeBlurClose();
+        clearHighlight();
+        lastNonEmptyRange = null;
+        channel.post({ kind: "editEnd" });
+      },
+      onInsert: () => {},
+      onSplit: () => {}
+    }, { plainText: true });
+  };
   const applyFormatIntent = (intent) => {
     const el = getActiveElement();
     if (!el) {
@@ -5296,6 +5750,18 @@ function startIframeInlineEdit(channel, container, opts) {
     if (!editingAllowed()) {
       return;
     }
+    const propHit = findPropBoundTarget(e.target);
+    if (propHit) {
+      const host = ownerInstanceOf(propHit.el);
+      const hostPathRaw = host?.dataset.jxPath;
+      if (host && hostPathRaw) {
+        const hostPath = parseJxPath(hostPathRaw);
+        if (propEditableAt(hostPath, propHit.prop)) {
+          enterPropEditAt(propHit.el, hostPath, propHit.prop);
+        }
+      }
+      return;
+    }
     const hit = findEditableTarget(e.target);
     if (hit) {
       enterEditAt(hit.el, hit.path);
@@ -5850,6 +6316,107 @@ function textDisplayValue(node) {
   return String(v);
 }
 
+// src/utils/preview-format.ts
+var MAX_BADGE_LENGTH = 48;
+function formatPreviewValue(value) {
+  if (value === undefined) {
+    return "undefined";
+  }
+  let text;
+  try {
+    text = typeof value === "string" ? JSON.stringify(value) : JSON.stringify(value) ?? "undefined";
+  } catch {
+    text = String(value);
+  }
+  if (text.length > MAX_BADGE_LENGTH) {
+    text = `${text.slice(0, MAX_BADGE_LENGTH - 1)}…`;
+  }
+  return text;
+}
+
+// src/canvas/iframe-eval.ts
+function isNamedFormulaEntry(entry) {
+  return typeof entry === "object" && entry !== null && !Array.isArray(entry) && "$expression" in entry && Array.isArray(entry.parameters);
+}
+function cloneLiveScope(defs, rawState) {
+  const out = {};
+  for (const key of Object.keys(defs)) {
+    try {
+      const value = defs[key];
+      if (typeof value === "function") {
+        if (isNamedFormulaEntry(rawState?.[key])) {
+          out[key] = value;
+        }
+        continue;
+      }
+      const json = JSON.stringify(value);
+      out[key] = json === undefined ? null : JSON.parse(json);
+    } catch {
+      out[key] = null;
+    }
+  }
+  return out;
+}
+function bindRepeaterContext(scope, shadowDoc, contextPath) {
+  if (!contextPath || contextPath.length === 0) {
+    return scope;
+  }
+  let node = shadowDoc;
+  let bound = scope;
+  for (const seg of contextPath) {
+    if (!node || typeof node !== "object") {
+      break;
+    }
+    const rec = node;
+    if (rec.$prototype === "Array" && seg === "map") {
+      const itemsDef = rec.items;
+      const items = itemsDef && typeof itemsDef === "object" && "$ref" in itemsDef ? resolveRef(itemsDef.$ref, bound) : itemsDef;
+      if (Array.isArray(items) && items.length > 0) {
+        let item;
+        try {
+          item = structuredClone(items[0]);
+        } catch {
+          item = null;
+        }
+        const child = Object.create(bound);
+        child.$map = { index: 0, item };
+        child["$map/item"] = item;
+        child["$map/index"] = 0;
+        bound = child;
+      }
+    }
+    node = rec[seg];
+  }
+  return bound;
+}
+function evaluateLiveExprs(exprs, defs, shadowDoc, contextPath) {
+  const rawState = shadowDoc && typeof shadowDoc === "object" ? shadowDoc.state ?? null : null;
+  return exprs.map(({ id, node }) => {
+    const values = new Map;
+    let scope;
+    try {
+      scope = bindRepeaterContext(cloneLiveScope(defs, rawState), shadowDoc, contextPath);
+    } catch (error) {
+      return { error: error instanceof Error ? error.message : String(error), id, values: [] };
+    }
+    try {
+      if (!node || typeof node !== "object" || !("operator" in node)) {
+        throw new Error("not an expression node");
+      }
+      evaluateExpression(node, scope, null, undefined, {
+        report: (path, value) => values.set(path.join("/"), formatPreviewValue(value))
+      });
+      return { id, values: [...values.entries()] };
+    } catch (error) {
+      return {
+        error: error instanceof Error ? error.message : String(error),
+        id,
+        values: [...values.entries()]
+      };
+    }
+  });
+}
+
 // src/canvas/serialize-scope.ts
 var MAX_VALUE_CHARS = 256000;
 var LARGE_VALUE_PLACEHOLDER = "[large value omitted]";
@@ -5983,7 +6550,8 @@ function startCanvasIframe(opts) {
   });
   const stopKeyForwarding = startKeyForwarding(channel, container.ownerDocument);
   const stopInlineEdit = startIframeInlineEdit(channel, container, {
-    getMode: () => currentMode
+    getMode: () => currentMode,
+    getShadowDoc: () => shadowDoc
   });
   const stopSlashBridge = startIframeSlashBridge(channel, container.ownerDocument);
   const stopGrabDetector = startGrabDetector(channel, container.ownerDocument, {
@@ -6074,6 +6642,11 @@ function startCanvasIframe(opts) {
       });
       return;
     }
+    if (msg.kind === "evalExpr") {
+      const results = msg.gen === renderedGen && renderCtx && shadowDoc ? evaluateLiveExprs(msg.exprs, renderCtx.defs, shadowDoc, msg.contextPath) : [];
+      channel.post({ gen: msg.gen, kind: "evalResult", reqId: msg.reqId, results });
+      return;
+    }
     if (msg.kind === "patch") {
       const { gen: gen2 } = msg;
       if (gen2 < renderedGen) {
@@ -6243,5 +6816,5 @@ export {
   bootCanvasIframe
 };
 
-//# debugId=FE3AC1CBD1F2F79E64756E2164756E21
+//# debugId=861006CEFE04044264756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map