@getforma/core 0.3.0 → 0.6.1

package/dist/runtime-hardened.d.cts

@@ -0,0 +1,86 @@
+type UnsafeEvalMode = 'mutable' | 'locked-off' | 'locked-on';
+interface RuntimeDiagnostic {
+    kind: 'handler-unsupported' | 'expression-unsupported';
+    expr: string;
+    reason: string;
+    count: number;
+    firstSeenAt: number;
+    lastSeenAt: number;
+}
+/** Yield control to keep the main thread responsive during large batches. */
+declare function yieldToMain(): Promise<void>;
+interface ContainmentHintsOptions {
+    selector?: string;
+    contain?: string;
+    contentVisibility?: string;
+    containIntrinsicSize?: string;
+    skipIfAlreadySet?: boolean;
+}
+/** Apply CSS containment hints to opt-in containers for lower layout/paint cost. */
+declare function applyContainmentHints(root?: ParentNode, options?: ContainmentHintsOptions): number;
+/**
+ * Load a pre-compiled directive map from the server.
+ * Keys are data-forma-id values, values are arrays of directive attribute names.
+ */
+declare function setDirectiveMap(map: Record<string, string[]> | null): void;
+declare function initRuntime(): void;
+/** Dispose all FormaJS scopes — clears effects, intervals, event listeners, and stops the observer. */
+declare function destroyRuntime(): void;
+/**
+ * Mount a specific element or subtree — scans for `data-forma-state`
+ * elements and initializes their reactive bindings.
+ *
+ * Use this for manual control when injecting HTML dynamically.
+ * With the MutationObserver active, this is usually not needed.
+ *
+ * @param el - The root element to scan (checks itself and all descendants).
+ */
+declare function mount(el: Element): void;
+/**
+ * Unmount a specific element or subtree — disposes all reactive bindings
+ * for `data-forma-state` elements within.
+ *
+ * @param el - The root element to clean up (checks itself and all descendants).
+ */
+declare function unmount(el: Element): void;
+/** Enable/disable debug logging. Also toggleable via window.__FORMA_DEBUG = true */
+declare function setDebug(on: boolean): void;
+/** Set unsafe-eval mode. `locked-off` is hardened and non-toggleable via setUnsafeEval. */
+declare function setUnsafeEvalMode(mode: UnsafeEvalMode): void;
+/** Enable/disable unsafe `new Function` fallback for complex expressions. */
+declare function setUnsafeEval(on: boolean): void;
+/** Get current unsafe-eval policy mode. */
+declare function getUnsafeEvalMode(): UnsafeEvalMode;
+/** Enable/disable runtime diagnostics for unsupported expressions/handlers. */
+declare function setDiagnostics(on: boolean): void;
+/** Runtime diagnostics captured while parsing/binding templates. */
+declare function getDiagnostics(): RuntimeDiagnostic[];
+/** Clear runtime diagnostics collected so far. */
+declare function clearDiagnostics(): void;
+interface ScopeDescriptor {
+    element: Element;
+    id: string;
+    values: Record<string, {
+        value: unknown;
+        type: string;
+    }>;
+    initialJSON: string;
+}
+/**
+ * DevTools: enumerate all active scopes and their current signal values.
+ * Only called when the State Inspector panel is open — zero overhead otherwise.
+ */
+declare function getScopes(): ScopeDescriptor[];
+/**
+ * DevTools: set a state value on a specific scope element.
+ * Triggers normal reactive effects (data-show, data-text, etc.).
+ */
+declare function setScopeValue(element: Element, key: string, value: unknown): void;
+/**
+ * DevTools: reset all values on a scope to their initial JSON state.
+ */
+declare function resetScope(element: Element): void;
+/** Reconcile a container's DOM against a new HTML string. */
+declare function reconcile(container: Element, html: string): void;
+
+export { applyContainmentHints, clearDiagnostics, destroyRuntime, getDiagnostics, getScopes, getUnsafeEvalMode, initRuntime, mount, reconcile, resetScope, setDebug, setDiagnostics, setDirectiveMap, setScopeValue, setUnsafeEval, setUnsafeEvalMode, unmount, yieldToMain };

package/dist/runtime-hardened.d.ts

@@ -0,0 +1,86 @@
+type UnsafeEvalMode = 'mutable' | 'locked-off' | 'locked-on';
+interface RuntimeDiagnostic {
+    kind: 'handler-unsupported' | 'expression-unsupported';
+    expr: string;
+    reason: string;
+    count: number;
+    firstSeenAt: number;
+    lastSeenAt: number;
+}
+/** Yield control to keep the main thread responsive during large batches. */
+declare function yieldToMain(): Promise<void>;
+interface ContainmentHintsOptions {
+    selector?: string;
+    contain?: string;
+    contentVisibility?: string;
+    containIntrinsicSize?: string;
+    skipIfAlreadySet?: boolean;
+}
+/** Apply CSS containment hints to opt-in containers for lower layout/paint cost. */
+declare function applyContainmentHints(root?: ParentNode, options?: ContainmentHintsOptions): number;
+/**
+ * Load a pre-compiled directive map from the server.
+ * Keys are data-forma-id values, values are arrays of directive attribute names.
+ */
+declare function setDirectiveMap(map: Record<string, string[]> | null): void;
+declare function initRuntime(): void;
+/** Dispose all FormaJS scopes — clears effects, intervals, event listeners, and stops the observer. */
+declare function destroyRuntime(): void;
+/**
+ * Mount a specific element or subtree — scans for `data-forma-state`
+ * elements and initializes their reactive bindings.
+ *
+ * Use this for manual control when injecting HTML dynamically.
+ * With the MutationObserver active, this is usually not needed.
+ *
+ * @param el - The root element to scan (checks itself and all descendants).
+ */
+declare function mount(el: Element): void;
+/**
+ * Unmount a specific element or subtree — disposes all reactive bindings
+ * for `data-forma-state` elements within.
+ *
+ * @param el - The root element to clean up (checks itself and all descendants).
+ */
+declare function unmount(el: Element): void;
+/** Enable/disable debug logging. Also toggleable via window.__FORMA_DEBUG = true */
+declare function setDebug(on: boolean): void;
+/** Set unsafe-eval mode. `locked-off` is hardened and non-toggleable via setUnsafeEval. */
+declare function setUnsafeEvalMode(mode: UnsafeEvalMode): void;
+/** Enable/disable unsafe `new Function` fallback for complex expressions. */
+declare function setUnsafeEval(on: boolean): void;
+/** Get current unsafe-eval policy mode. */
+declare function getUnsafeEvalMode(): UnsafeEvalMode;
+/** Enable/disable runtime diagnostics for unsupported expressions/handlers. */
+declare function setDiagnostics(on: boolean): void;
+/** Runtime diagnostics captured while parsing/binding templates. */
+declare function getDiagnostics(): RuntimeDiagnostic[];
+/** Clear runtime diagnostics collected so far. */
+declare function clearDiagnostics(): void;
+interface ScopeDescriptor {
+    element: Element;
+    id: string;
+    values: Record<string, {
+        value: unknown;
+        type: string;
+    }>;
+    initialJSON: string;
+}
+/**
+ * DevTools: enumerate all active scopes and their current signal values.
+ * Only called when the State Inspector panel is open — zero overhead otherwise.
+ */
+declare function getScopes(): ScopeDescriptor[];
+/**
+ * DevTools: set a state value on a specific scope element.
+ * Triggers normal reactive effects (data-show, data-text, etc.).
+ */
+declare function setScopeValue(element: Element, key: string, value: unknown): void;
+/**
+ * DevTools: reset all values on a scope to their initial JSON state.
+ */
+declare function resetScope(element: Element): void;
+/** Reconcile a container's DOM against a new HTML string. */
+declare function reconcile(container: Element, html: string): void;
+
+export { applyContainmentHints, clearDiagnostics, destroyRuntime, getDiagnostics, getScopes, getUnsafeEvalMode, initRuntime, mount, reconcile, resetScope, setDebug, setDiagnostics, setDirectiveMap, setScopeValue, setUnsafeEval, setUnsafeEvalMode, unmount, yieldToMain };

package/dist/runtime-hardened.js

@@ -1,4 +1,4 @@
-import { computed, effect, signal, startBatch, endBatch, pauseTracking, resumeTracking } from 'alien-signals';
+import { signal, computed, effect, startBatch, endBatch, pauseTracking, resumeTracking } from 'alien-signals';
 
 // src/reactive/signal.ts
 function applySignalSet(s, v) {
@@ -17,7 +17,6 @@ function createSignal(initialValue) {
   const setter = (v) => applySignalSet(s, v);
   return [getter, setter];
 }
-var createValueSignal = createSignal;
 function internalEffect(fn) {
   const dispose = effect(fn);
   return dispose;
@@ -753,6 +752,7 @@ if (buildUnsafeEvalMode) {
   _unsafeEvalMode = buildUnsafeEvalMode;
   if (_unsafeEvalMode === "locked-off") _allowUnsafeEval = false;
   if (_unsafeEvalMode === "locked-on") _allowUnsafeEval = true;
+  if (_unsafeEvalMode === "mutable") _allowUnsafeEval = true;
 }
 var runtimeConfig = readRuntimeConfig();
 var configUnsafeMode = runtimeConfig.lockUnsafeEval ? "locked-off" : runtimeConfig.unsafeEvalMode;
@@ -830,7 +830,6 @@ var RE_STRING_DOUBLE = /^"[^"]*"$/;
 var RE_NUMBER = /^-?\d+(\.\d+)?$/;
 var RE_IDENTIFIER = /^[a-zA-Z_$]\w*$/;
 var RE_DOT_ACCESS = /^(\w+)\.(\w+)$/;
-var RE_DEEP_DOT = /^(\w+)\.(\w+)\.(\w+)(?:\.(\w+))?$/;
 var RE_BRACKET = /^(\w+)\[(\d+|'[^']*'|"[^"]*")\]$/;
 var RE_TERNARY = /^(.+?)\s*\?\s*(.+?)\s*:\s*(.+)$/;
 var RE_NULLISH = /^(.+?)\s*\?\?\s*(.+)$/;
@@ -841,7 +840,6 @@ var RE_MUL = /^(.+?)\s*([*/%])\s*(.+)$/;
 var RE_ADD = /^(.+?)\s*([+-])\s*(.+)$/;
 var RE_TEMPLATE_LIT = /^`([^`]*)`$/;
 var RE_TEMPLATE_INTERP = /\$\{([^}]+)\}/g;
-var RE_METHOD_CALL = /^(\w+)\.(\w+)\((.*)\)$/;
 var RE_GROUP_METHOD_CALL = /^\((.+)\)\.(\w+)\((.*)\)$/;
 var RE_STRIP_BRACES = /^\{|\}$/g;
 var RE_DIGIT_ONLY = /^\d+$/;
@@ -851,11 +849,11 @@ var RE_TOGGLE = /^(\w+)\s*=\s*!(\w+)$/;
 var RE_ASSIGN = /^(\w+)\s*=\s*(.+)$/;
 var RE_COMPOUND = /^(\w+)\s*(\+=|-=|\*=|\/=)\s*(.+)$/;
 var RE_IF_PREFIX = /^if\b/;
-var RE_UNQUOTED_KEYS = /(\w+)\s*:/g;
 var RE_COMPUTED = /^(\w+)\s*=\s*(.+)$/;
 var RE_FETCH = /^(.+?)(?:→|->)\s*(\S+)(.*)$/;
 var RE_FETCH_METHOD = /^(GET|POST|PUT|PATCH|DELETE)\s+(.+)$/i;
 var RE_STRIP_ITEM_BRACES = /^\{item\.?|\}$/g;
+var RE_EVENT_REF = /\bevent\s*[.([]|\$event\b/;
 var RE_REFETCH_CALL = /^\$refetch\(\s*['"]([^'"]+)['"]\s*\)$/;
 var TRANSITION_STATE_SYM = /* @__PURE__ */ Symbol.for("forma-transition-state");
 var EXPRESSION_CACHE_MAX = 2048;
@@ -870,7 +868,77 @@ function cacheExpression(key, factory) {
 var scopeExpressionCache = /* @__PURE__ */ new WeakMap();
 var scopeHandlerCache = /* @__PURE__ */ new WeakMap();
 var compiledTemplateCache = /* @__PURE__ */ new Map();
-var UNSAFE_METHOD_NAMES = /* @__PURE__ */ new Set(["constructor", "__proto__", "prototype"]);
+var COMPILED_TEMPLATE_CACHE_MAX = 2048;
+function cacheCompiledTemplate(key, template) {
+  if (compiledTemplateCache.size >= COMPILED_TEMPLATE_CACHE_MAX) {
+    const first = compiledTemplateCache.keys().next().value;
+    if (first !== void 0) compiledTemplateCache.delete(first);
+  }
+  compiledTemplateCache.set(key, template);
+}
+var UNSAFE_METHOD_NAMES = /* @__PURE__ */ new Set([
+  "constructor",
+  "__proto__",
+  "prototype",
+  "__defineGetter__",
+  "__defineSetter__",
+  "__lookupGetter__",
+  "__lookupSetter__",
+  "eval",
+  "Function"
+]);
+var BLOCKED_METHOD_REGEXES = (() => {
+  const result = [];
+  for (const name of UNSAFE_METHOD_NAMES) {
+    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    result.push({
+      name,
+      // Match as property access (.name) or bare identifier at start
+      dotRe: new RegExp(`(?:^|\\.)${escaped}(?:\\s*\\(|\\s*$|[^\\w$])`, "m"),
+      // Match bracket access with single quotes, double quotes, or backticks
+      bracketRe: new RegExp(`\\[\\s*(?:'${escaped}'|"${escaped}"|\`` + escaped + `\`)\\s*\\]`)
+    });
+  }
+  return result;
+})();
+function findBlockedMethod(expr) {
+  let cleaned = expr.replace(/\/\*[\s\S]*?\*\//g, "");
+  cleaned = cleaned.replace(/\/\/[^\n]*/g, "");
+  cleaned = cleaned.replace(/\s*\.\s*/g, ".");
+  for (const { name, dotRe, bracketRe } of BLOCKED_METHOD_REGEXES) {
+    if (dotRe.test(cleaned)) return name;
+    if (bracketRe.test(cleaned)) return name;
+  }
+  if (cleaned.includes("[")) {
+    const bracketContents = extractBracketContents(cleaned);
+    for (const content of bracketContents) {
+      if (!content.includes("+")) continue;
+      const fragments = content.match(/['"`]([^'"`]*?)['"`]/g);
+      if (!fragments) continue;
+      const joined = fragments.map((f) => f.slice(1, -1)).join("");
+      if (UNSAFE_METHOD_NAMES.has(joined)) return joined;
+    }
+  }
+  return null;
+}
+function extractBracketContents(expr) {
+  const results = [];
+  let depth = 0;
+  let start = -1;
+  for (let i = 0; i < expr.length; i++) {
+    if (expr[i] === "[") {
+      if (depth === 0) start = i + 1;
+      depth++;
+    } else if (expr[i] === "]") {
+      depth--;
+      if (depth === 0 && start >= 0) {
+        results.push(expr.slice(start, i));
+        start = -1;
+      }
+    }
+  }
+  return results;
+}
 var TEXT_BINDING_SYM = /* @__PURE__ */ Symbol.for("forma-text-binding-cache");
 function toTextValue(value2) {
   if (value2 == null) return "";
@@ -1145,6 +1213,7 @@ function consumeStatement(raw) {
 function parseIfHandler(expr, scope) {
   const input = expr.trim();
   if (!RE_IF_PREFIX.test(input)) return null;
+  if (RE_EVENT_REF.test(input)) return null;
   let idx = 2;
   while (idx < input.length && /\s/.test(input[idx])) idx++;
   if (input[idx] !== "(") return null;
@@ -1205,7 +1274,7 @@ function compileTemplate(text) {
     dynamics,
     hasItemRef: dynamics.length > 0
   };
-  compiledTemplateCache.set(text, result);
+  cacheCompiledTemplate(text, result);
   return result;
 }
 var templateTexts = /* @__PURE__ */ new WeakMap();
@@ -1546,6 +1615,68 @@ function cloneAttributeTemplates(el, item) {
     }
   }
 }
+function parseChainedAccess(expr, scope) {
+  let pos = 0;
+  const identMatch = expr.match(/^[a-zA-Z_$]\w*/);
+  if (!identMatch) return null;
+  const rootName = identMatch[0];
+  pos = rootName.length;
+  if (pos >= expr.length) return null;
+  if (expr[pos] !== "." && !(expr[pos] === "?" && expr[pos + 1] === ".")) return null;
+  const steps = [];
+  while (pos < expr.length) {
+    let optional = false;
+    if (expr[pos] === "?" && expr[pos + 1] === ".") {
+      optional = true;
+      pos += 2;
+    } else if (expr[pos] === ".") {
+      pos += 1;
+    } else {
+      return null;
+    }
+    const nameMatch = expr.slice(pos).match(/^\w+/);
+    if (!nameMatch) return null;
+    const name = nameMatch[0];
+    pos += name.length;
+    if (UNSAFE_METHOD_NAMES.has(name)) return () => void 0;
+    if (pos < expr.length && expr[pos] === "(") {
+      const balanced = readBalancedSegment(expr, pos, "(", ")");
+      if (!balanced) return null;
+      const argsRaw = balanced.inner.trim();
+      const argFns = [];
+      for (const arg of splitCallArgs(argsRaw)) {
+        const parsed = parseExpression(arg, scope);
+        if (!parsed) return null;
+        argFns.push(parsed);
+      }
+      steps.push({ type: "call", name, optional, argFns });
+      pos = balanced.end + 1;
+    } else {
+      steps.push({ type: "prop", name, optional });
+    }
+  }
+  if (pos !== expr.length) return null;
+  if (steps.length === 0) return null;
+  const rootExpr = rootName === "Math" ? (() => Math) : (() => scope.getters[rootName]?.());
+  return () => {
+    let val = rootExpr();
+    for (const step of steps) {
+      if (val == null) {
+        if (step.optional) return void 0;
+        return void 0;
+      }
+      if (step.type === "prop") {
+        val = val[step.name];
+      } else {
+        const method = val[step.name];
+        if (typeof method !== "function") return void 0;
+        const args = step.argFns.map((fn) => fn());
+        val = method.apply(val, args);
+      }
+    }
+    return val;
+  };
+}
 function parseExpression(expr, scope) {
   const cachedFactory = expressionCache.get(expr);
   if (cachedFactory) return cachedFactory(scope);
@@ -1596,24 +1727,9 @@ function parseExpressionUncached(expr, scope) {
   if (RE_IDENTIFIER.test(expr)) {
     return () => scope.getters[expr]?.();
   }
-  const dotMatch = expr.match(RE_DOT_ACCESS);
-  if (dotMatch) {
-    const p1 = dotMatch[1], p2 = dotMatch[2];
-    return () => {
-      const obj = scope.getters[p1]?.();
-      return obj?.[p2];
-    };
-  }
-  const deepDotMatch = expr.match(RE_DEEP_DOT);
-  if (deepDotMatch) {
-    const p1 = deepDotMatch[1], p2 = deepDotMatch[2], p3 = deepDotMatch[3], p4 = deepDotMatch[4];
-    return () => {
-      let val = scope.getters[p1]?.();
-      val = val?.[p2];
-      val = val?.[p3];
-      if (p4) val = val?.[p4];
-      return val;
-    };
+  {
+    const chainResult = parseChainedAccess(expr, scope);
+    if (chainResult) return chainResult;
   }
   const groupedCallMatch = expr.match(RE_GROUP_METHOD_CALL);
   if (groupedCallMatch) {
@@ -1637,28 +1753,6 @@ function parseExpressionUncached(expr, scope) {
       return method.apply(base, args);
     };
   }
-  const callMatch = expr.match(RE_METHOD_CALL);
-  if (callMatch) {
-    const baseName = callMatch[1];
-    const methodName = callMatch[2];
-    const argsRaw = callMatch[3].trim();
-    if (UNSAFE_METHOD_NAMES.has(methodName)) return () => void 0;
-    const baseExpr = baseName === "Math" ? (() => Math) : parseExpression(baseName, scope);
-    if (!baseExpr) return null;
-    const argFns = [];
-    for (const arg of splitCallArgs(argsRaw)) {
-      const parsed = parseExpression(arg, scope);
-      if (!parsed) return null;
-      argFns.push(parsed);
-    }
-    return () => {
-      const base = baseExpr();
-      const method = base?.[methodName];
-      if (typeof method !== "function") return void 0;
-      const args = argFns.map((fn) => fn());
-      return method.apply(base, args);
-    };
-  }
   if (expr.startsWith("!")) {
     const inner = parseExpression(expr.slice(1).trim(), scope);
     if (inner) return () => !inner();
@@ -1677,6 +1771,29 @@ function parseExpressionUncached(expr, scope) {
       return () => objExpr()?.[key];
     }
   }
+  if (expr.startsWith("[")) {
+    const balanced = readBalancedSegment(expr, 0, "[", "]");
+    if (balanced && balanced.end === expr.length - 1) {
+      const inner = balanced.inner.trim();
+      if (inner === "") {
+        return () => [];
+      }
+      const elements = splitCallArgs(inner);
+      const elementFns = [];
+      let allParsed = true;
+      for (const el of elements) {
+        const parsed = parseExpression(el.trim(), scope);
+        if (!parsed) {
+          allParsed = false;
+          break;
+        }
+        elementFns.push(parsed);
+      }
+      if (allParsed) {
+        return () => elementFns.map((fn) => fn());
+      }
+    }
+  }
   const ternaryMatch = expr.match(RE_TERNARY);
   if (ternaryMatch) {
     const cond = parseExpression(ternaryMatch[1].trim(), scope);
@@ -1806,6 +1923,15 @@ function getScopeCache(cache, scope) {
   }
   return scoped;
 }
+function cspExpressionHint(expr) {
+  if (expr.includes("...")) {
+    return `Unsupported expression in CSP-safe mode: spread syntax detected. Use .concat() instead, or enable unsafe-eval via setUnsafeEval(true).`;
+  }
+  if (expr.includes("=>")) {
+    return `Unsupported expression in CSP-safe mode: arrow function detected. Extract logic to a data-computed attribute, or enable unsafe-eval via setUnsafeEval(true).`;
+  }
+  return `Unsupported expression in CSP-safe mode. Simplify the expression or enable unsafe-eval via setUnsafeEval(true).`;
+}
 function buildEvaluator(expr, scope) {
   const cleaned = expr.replace(RE_STRIP_BRACES, "").trim();
   const cache = getScopeCache(scopeExpressionCache, scope);
@@ -1818,11 +1944,17 @@ function buildEvaluator(expr, scope) {
   }
   if (!_allowUnsafeEval) {
     dbg("buildEvaluator: blocked unsafe eval fallback for expression:", cleaned);
-    reportDiagnostic("expression-unsupported", cleaned, "Unsupported expression in CSP-safe mode");
+    reportDiagnostic("expression-unsupported", cleaned, cspExpressionHint(cleaned));
     const blocked = () => void 0;
     cache.set(cleaned, blocked);
     return blocked;
   }
+  const blockedMethod = findBlockedMethod(cleaned);
+  if (blockedMethod) {
+    const msg = `Blocked unsafe method "${blockedMethod}" in expression`;
+    reportDiagnostic("expression-unsupported", cleaned, msg);
+    throw new Error(`[FormaJS] ${msg}: ${cleaned}`);
+  }
   try {
     const fn = new Function("__scope", `with(__scope) { return (${cleaned}); }`);
     const proxy = new Proxy(/* @__PURE__ */ Object.create(null), {
@@ -1830,6 +1962,7 @@ function buildEvaluator(expr, scope) {
         return key in scope.getters;
       },
       get(_, key) {
+        if (UNSAFE_METHOD_NAMES.has(key)) return void 0;
         const g = scope.getters[key];
         return g ? g() : void 0;
       }
@@ -1838,7 +1971,7 @@ function buildEvaluator(expr, scope) {
     cache.set(cleaned, unsafe);
     return unsafe;
   } catch {
-    reportDiagnostic("expression-unsupported", cleaned, "Expression failed to compile");
+    reportDiagnostic("expression-unsupported", cleaned, "Expression too complex for CSP-safe mode. Enable unsafe-eval via FormaRuntime.unsafeEval = true, or use the standard (non-hardened) build.");
     const failed = () => void 0;
     cache.set(cleaned, failed);
     return failed;
@@ -1944,7 +2077,13 @@ function parseHandler(expr, scope) {
   return null;
 }
 function buildHandler(expr, scope) {
-  const cleaned = expr.replace(RE_STRIP_BRACES, "").trim();
+  let cleaned = expr.trim();
+  if (cleaned.startsWith("{")) {
+    const seg = readBalancedSegment(cleaned, 0, "{", "}");
+    if (seg && seg.end === cleaned.length - 1) {
+      cleaned = seg.inner.trim();
+    }
+  }
   const cache = getScopeCache(scopeHandlerCache, scope);
   const cached = cache.get(cleaned);
   if (cached) return cached;
@@ -1956,7 +2095,7 @@ function buildHandler(expr, scope) {
   }
   if (!_allowUnsafeEval) {
     dbg("buildHandler: blocked unsafe eval fallback for expression:", cleaned);
-    reportDiagnostic("handler-unsupported", cleaned, "Unsupported handler in CSP-safe mode");
+    reportDiagnostic("handler-unsupported", cleaned, cspExpressionHint(cleaned));
     const result = {
       handler: () => {
       },
@@ -1965,6 +2104,12 @@ function buildHandler(expr, scope) {
     cache.set(cleaned, result);
     return result;
   }
+  const blockedMethod = findBlockedMethod(cleaned);
+  if (blockedMethod) {
+    const msg = `Blocked unsafe method "${blockedMethod}" in handler`;
+    reportDiagnostic("handler-unsupported", cleaned, msg);
+    throw new Error(`[FormaJS] ${msg}: ${cleaned}`);
+  }
   try {
     const fn = new Function("__scope", "$event", "event", `with(__scope) { ${cleaned} }`);
     const proxy = new Proxy(/* @__PURE__ */ Object.create(null), {
@@ -1973,6 +2118,7 @@ function buildHandler(expr, scope) {
         return key in scope.getters || key in scope.setters;
       },
       get(_, key) {
+        if (UNSAFE_METHOD_NAMES.has(key)) return void 0;
         const g = scope.getters[key];
         return g ? g() : void 0;
       },
@@ -1992,7 +2138,7 @@ function buildHandler(expr, scope) {
     cache.set(cleaned, result);
     return result;
   } catch {
-    reportDiagnostic("handler-unsupported", cleaned, "Handler failed to compile");
+    reportDiagnostic("handler-unsupported", cleaned, "Expression too complex for CSP-safe mode. Enable unsafe-eval via FormaRuntime.unsafeEval = true, or use the standard (non-hardened) build.");
     const result = {
       handler: () => {
       },
@@ -2002,16 +2148,21 @@ function buildHandler(expr, scope) {
     return result;
   }
 }
+var FORBIDDEN_STATE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 function parseState(raw) {
+  let parsed;
   try {
-    return JSON.parse(raw);
+    parsed = JSON.parse(raw);
   } catch {
-    try {
-      return JSON.parse(raw.replace(RE_UNQUOTED_KEYS, '"$1":'));
-    } catch {
-      return {};
+    if (_debug) {
+      dbg("parseState: Invalid JSON in data-forma-state \u2014 use valid JSON with quoted keys. Got:", raw.slice(0, 200));
     }
+    return {};
+  }
+  for (const key of FORBIDDEN_STATE_KEYS) {
+    if (key in parsed) delete parsed[key];
   }
+  return parsed;
 }
 function initScope(stateEl) {
   const raw = stateEl.getAttribute("data-forma-state") ?? "{}";
@@ -2026,7 +2177,7 @@ function initScope(stateEl) {
   const getters = {};
   const setters = {};
   for (const [key, initial] of Object.entries(state)) {
-    const [get, set] = createValueSignal(initial);
+    const [get, set] = createSignal(initial);
     getters[key] = get;
     setters[key] = set;
   }
@@ -2034,6 +2185,18 @@ function initScope(stateEl) {
   return { getters, setters };
 }
 function bindElement(el, scope, disposers) {
+  const elMagics = {
+    $el: el,
+    $dispatch: (name, detail) => {
+      el.dispatchEvent(new CustomEvent(name, {
+        bubbles: true,
+        composed: true,
+        // crosses Shadow DOM boundaries (important for <forma-stage>)
+        detail
+      }));
+    }
+  };
+  scope = createChildScope(scope, elMagics);
   const known = getDirectives(el);
   const computedAttr = !known || known.has("data-computed") ? el.getAttribute("data-computed") : null;
   if (computedAttr) {
@@ -2413,16 +2576,16 @@ function bindElement(el, scope, disposers) {
         else if (k === "error") errorTarget = v;
         else if (k === "poll") interval = parseInt(v ?? "0", 10);
       }
-      const [getTarget, setTarget] = createValueSignal(null);
+      const [getTarget, setTarget] = createSignal(null);
       scope.getters[target] = getTarget;
       scope.setters[target] = setTarget;
       if (loadingTarget) {
-        const [gl, sl] = createValueSignal(false);
+        const [gl, sl] = createSignal(false);
         scope.getters[loadingTarget] = gl;
         scope.setters[loadingTarget] = sl;
       }
       if (errorTarget) {
-        const [ge, se] = createValueSignal(null);
+        const [ge, se] = createSignal(null);
         scope.getters[errorTarget] = ge;
         scope.setters[errorTarget] = se;
       }
@@ -2681,6 +2844,7 @@ function setUnsafeEvalMode(mode) {
   _unsafeEvalMode = mode;
   if (mode === "locked-off") _allowUnsafeEval = false;
   if (mode === "locked-on") _allowUnsafeEval = true;
+  if (mode === "mutable") _allowUnsafeEval = true;
   scopeExpressionCache = /* @__PURE__ */ new WeakMap();
   scopeHandlerCache = /* @__PURE__ */ new WeakMap();
 }