vsn 1.0.2 → 1.0.4

package/dist/index.cjs

@@ -22,16 +22,21 @@ var index_exports = {};
 __export(index_exports, {
   ArrayExpression: () => ArrayExpression,
   ArrayPattern: () => ArrayPattern,
+  AssertError: () => AssertError,
+  AssertNode: () => AssertNode,
   AssignmentNode: () => AssignmentNode,
   AwaitExpression: () => AwaitExpression,
   BaseNode: () => BaseNode,
   BehaviorNode: () => BehaviorNode,
   BinaryExpression: () => BinaryExpression,
   BlockNode: () => BlockNode,
+  BreakNode: () => BreakNode,
   CallExpression: () => CallExpression,
+  ContinueNode: () => ContinueNode,
   DeclarationNode: () => DeclarationNode,
   DirectiveExpression: () => DirectiveExpression,
   Engine: () => Engine,
+  ForEachNode: () => ForEachNode,
   ForNode: () => ForNode,
   FunctionDeclarationNode: () => FunctionDeclarationNode,
   FunctionExpression: () => FunctionExpression,
@@ -51,8 +56,6 @@ __export(index_exports, {
   ReturnNode: () => ReturnNode,
   SelectorNode: () => SelectorNode,
   SpreadElement: () => SpreadElement,
-  StateBlockNode: () => StateBlockNode,
-  StateEntryNode: () => StateEntryNode,
   TemplateExpression: () => TemplateExpression,
   TernaryExpression: () => TernaryExpression,
   TokenType: () => TokenType,
@@ -88,6 +91,9 @@ var TokenType = /* @__PURE__ */ ((TokenType2) => {
   TokenType2["While"] = "While";
   TokenType2["Try"] = "Try";
   TokenType2["Catch"] = "Catch";
+  TokenType2["Assert"] = "Assert";
+  TokenType2["Break"] = "Break";
+  TokenType2["Continue"] = "Continue";
   TokenType2["LBrace"] = "LBrace";
   TokenType2["RBrace"] = "RBrace";
   TokenType2["LParen"] = "LParen";
@@ -103,7 +109,9 @@ var TokenType = /* @__PURE__ */ ((TokenType2) => {
   TokenType2["Greater"] = "Greater";
   TokenType2["Less"] = "Less";
   TokenType2["Plus"] = "Plus";
+  TokenType2["PlusPlus"] = "PlusPlus";
   TokenType2["Minus"] = "Minus";
+  TokenType2["MinusMinus"] = "MinusMinus";
   TokenType2["Tilde"] = "Tilde";
   TokenType2["Star"] = "Star";
   TokenType2["Slash"] = "Slash";
@@ -143,6 +151,9 @@ var KEYWORDS = {
   while: "While" /* While */,
   try: "Try" /* Try */,
   catch: "Catch" /* Catch */,
+  assert: "Assert" /* Assert */,
+  break: "Break" /* Break */,
+  continue: "Continue" /* Continue */,
   true: "Boolean" /* Boolean */,
   false: "Boolean" /* Boolean */,
   null: "Null" /* Null */
@@ -244,8 +255,20 @@ var Lexer = class {
   readIdentifier() {
     const start = this.position();
     let value = "";
-    while (!this.eof() && (this.isAlphaNumeric(this.peek()) || this.peek() === "_" || this.peek() === "-")) {
-      value += this.next();
+    while (!this.eof()) {
+      const ch = this.peek();
+      if (this.isAlphaNumeric(ch) || ch === "_") {
+        value += this.next();
+        continue;
+      }
+      if (ch === "-") {
+        if (this.peek(1) === "-") {
+          break;
+        }
+        value += this.next();
+        continue;
+      }
+      break;
     }
     const keywordType = KEYWORDS[value];
     if (keywordType) {
@@ -386,6 +409,16 @@ var Lexer = class {
       this.next();
       return this.token("Pipe" /* Pipe */, "|>", start);
     }
+    if (ch === "+" && next === "+") {
+      this.next();
+      this.next();
+      return this.token("PlusPlus" /* PlusPlus */, "++", start);
+    }
+    if (ch === "-" && next === "-") {
+      this.next();
+      this.next();
+      return this.token("MinusMinus" /* MinusMinus */, "--", start);
+    }
     if (ch === "." && next === "." && this.peek(2) === ".") {
       this.next();
       this.next();
@@ -488,11 +521,20 @@ var BaseNode = class {
   async prepare(_context) {
     return;
   }
-  async evaluate(_context) {
+  evaluate(_context) {
     return void 0;
   }
 };
-async function evaluateWithChildScope(context, block) {
+function isPromiseLike(value) {
+  return Boolean(value) && typeof value.then === "function";
+}
+function resolveMaybe(value, next) {
+  if (isPromiseLike(value)) {
+    return value.then(next);
+  }
+  return next(value);
+}
+function evaluateWithChildScope(context, block) {
   const scope = context.scope;
   if (!scope || !scope.createChild) {
     return block.evaluate(context);
@@ -500,7 +542,7 @@ async function evaluateWithChildScope(context, block) {
   const previousScope = context.scope;
   context.scope = scope.createChild();
   try {
-    return await block.evaluate(context);
+    return block.evaluate(context);
   } finally {
     context.scope = previousScope;
   }
@@ -526,15 +568,25 @@ var BlockNode = class extends BaseNode {
     super("Block");
     this.statements = statements;
   }
-  async evaluate(context) {
-    for (const statement of this.statements) {
-      if (context.returning) {
-        break;
-      }
-      if (statement && typeof statement.evaluate === "function") {
-        await statement.evaluate(context);
+  evaluate(context) {
+    let index = 0;
+    const run = () => {
+      while (index < this.statements.length) {
+        if (context.returning || context.breaking || context.continuing) {
+          break;
+        }
+        const statement = this.statements[index];
+        index += 1;
+        if (statement && typeof statement.evaluate === "function") {
+          const result = statement.evaluate(context);
+          if (isPromiseLike(result)) {
+            return result.then(() => run());
+          }
+        }
       }
-    }
+      return void 0;
+    };
+    return run();
   }
 };
 var SelectorNode = class extends BaseNode {
@@ -544,136 +596,186 @@ var SelectorNode = class extends BaseNode {
   }
 };
 var BehaviorNode = class extends BaseNode {
-  constructor(selector, body) {
+  constructor(selector, body, flags = {}, flagArgs = {}) {
     super("Behavior");
     this.selector = selector;
     this.body = body;
-  }
-};
-var StateEntryNode = class extends BaseNode {
-  constructor(name, value, important) {
-    super("StateEntry");
-    this.name = name;
-    this.value = value;
-    this.important = important;
-  }
-};
-var StateBlockNode = class extends BaseNode {
-  constructor(entries) {
-    super("StateBlock");
-    this.entries = entries;
+    this.flags = flags;
+    this.flagArgs = flagArgs;
   }
 };
 var OnBlockNode = class extends BaseNode {
-  constructor(eventName, args, body, modifiers = []) {
+  constructor(eventName, args, body, flags = {}, flagArgs = {}) {
     super("OnBlock");
     this.eventName = eventName;
     this.args = args;
     this.body = body;
-    this.modifiers = modifiers;
+    this.flags = flags;
+    this.flagArgs = flagArgs;
   }
 };
 var AssignmentNode = class extends BaseNode {
-  constructor(target, value, operator = "=") {
+  constructor(target, value, operator = "=", prefix = false) {
     super("Assignment");
     this.target = target;
     this.value = value;
     this.operator = operator;
+    this.prefix = prefix;
   }
-  async evaluate(context) {
+  evaluate(context) {
     if (!context.scope || !context.scope.setPath) {
       return void 0;
     }
-    const value = await this.value.evaluate(context);
-    if (this.operator !== "=") {
-      return await this.applyCompoundAssignment(context, value);
-    }
-    if (this.target instanceof IdentifierExpression && this.target.name.startsWith("root.") && context.rootScope) {
-      const path = this.target.name.slice("root.".length);
-      context.rootScope.setPath?.(path, value);
-      return value;
-    }
-    if (this.target instanceof MemberExpression || this.target instanceof IndexExpression) {
-      const resolved = await this.resolveAssignmentTarget(context);
-      if (resolved?.scope?.setPath) {
-        resolved.scope.setPath(resolved.path, value);
-        return value;
+    if (this.operator === "++" || this.operator === "--") {
+      return this.applyIncrement(context);
+    }
+    const value = this.value.evaluate(context);
+    return resolveMaybe(value, (resolvedValue) => {
+      if (this.operator !== "=") {
+        return this.applyCompoundAssignment(context, resolvedValue);
+      }
+      if (this.target instanceof IdentifierExpression && this.target.name.startsWith("root.") && context.rootScope) {
+        const path = this.target.name.slice("root.".length);
+        context.rootScope.setPath?.(`self.${path}`, resolvedValue);
+        return resolvedValue;
+      }
+      if (this.target instanceof MemberExpression || this.target instanceof IndexExpression) {
+        const resolved = this.resolveAssignmentTarget(context);
+        return resolveMaybe(resolved, (resolvedTarget) => {
+          if (resolvedTarget?.scope?.setPath) {
+            resolvedTarget.scope.setPath(resolvedTarget.path, resolvedValue);
+            return resolvedValue;
+          }
+          this.assignTarget(context, this.target, resolvedValue);
+          return resolvedValue;
+        });
       }
-    }
-    this.assignTarget(context, this.target, value);
-    return value;
+      this.assignTarget(context, this.target, resolvedValue);
+      return resolvedValue;
+    });
   }
-  async applyCompoundAssignment(context, value) {
+  applyCompoundAssignment(context, value) {
     if (!context.scope || !context.scope.setPath) {
       return void 0;
     }
-    const resolved = await this.resolveAssignmentTarget(context);
-    if (!resolved) {
-      throw new Error("Compound assignment requires a simple identifier or member path");
-    }
-    const { scope, path } = resolved;
-    const current = scope?.getPath ? scope.getPath(path) : void 0;
-    let result;
-    if (this.operator === "+=") {
-      result = current + value;
-    } else if (this.operator === "-=") {
-      result = current - value;
-    } else if (this.operator === "*=") {
-      result = current * value;
-    } else {
-      result = current / value;
+    const resolved = this.resolveAssignmentTarget(context);
+    return resolveMaybe(resolved, (resolvedTarget) => {
+      if (!resolvedTarget) {
+        throw new Error("Compound assignment requires a simple identifier or member path");
+      }
+      const { scope, path } = resolvedTarget;
+      const current = scope?.getPath ? scope.getPath(path) : void 0;
+      let result;
+      if (this.operator === "+=") {
+        result = current + value;
+      } else if (this.operator === "-=") {
+        result = current - value;
+      } else if (this.operator === "*=") {
+        result = current * value;
+      } else {
+        result = current / value;
+      }
+      scope?.setPath?.(path, result);
+      return result;
+    });
+  }
+  applyIncrement(context) {
+    if (!context.scope || !context.scope.setPath) {
+      return void 0;
     }
-    scope?.setPath?.(path, result);
-    return result;
+    const resolved = this.resolveAssignmentTarget(context);
+    return resolveMaybe(resolved, (resolvedTarget) => {
+      if (!resolvedTarget) {
+        throw new Error("Increment/decrement requires a simple identifier or member path");
+      }
+      const { scope, path } = resolvedTarget;
+      const current = scope?.getPath ? scope.getPath(path) : void 0;
+      const numeric = typeof current === "number" ? current : Number(current);
+      const delta = this.operator === "++" ? 1 : -1;
+      const next = (Number.isNaN(numeric) ? 0 : numeric) + delta;
+      scope?.setPath?.(path, next);
+      return this.prefix ? next : numeric;
+    });
   }
-  async resolveAssignmentTarget(context) {
+  resolveAssignmentTarget(context) {
     if (this.target instanceof IdentifierExpression) {
       const isRoot = this.target.name.startsWith("root.");
       const rawPath = isRoot ? this.target.name.slice("root.".length) : this.target.name;
       if (isRoot) {
+        if (context.rootScope) {
+          return { scope: context.rootScope, path: `self.${rawPath}` };
+        }
         return { scope: context.scope, path: `root.${rawPath}` };
       }
       return { scope: context.scope, path: rawPath };
     }
     if (this.target instanceof MemberExpression) {
       const resolvedPath = this.target.getIdentifierPath();
-      if (!resolvedPath) {
-        return null;
-      }
-      const path = resolvedPath.path;
-      const isRoot = path.startsWith("root.");
-      const rawPath = isRoot ? path.slice("root.".length) : path;
-      if (isRoot) {
-        return { scope: context.scope, path: `root.${rawPath}` };
+      if (resolvedPath) {
+        const path = resolvedPath.path;
+        const isRoot = path.startsWith("root.");
+        const rawPath = isRoot ? path.slice("root.".length) : path;
+        if (isRoot) {
+          if (context.rootScope) {
+            return { scope: context.rootScope, path: `self.${rawPath}` };
+          }
+          return { scope: context.scope, path: `root.${rawPath}` };
+        }
+        return { scope: context.scope, path: rawPath };
       }
-      return { scope: context.scope, path: rawPath };
+      const targetExpr = this.target;
+      const basePath = this.resolveTargetPath(context, targetExpr.target);
+      return resolveMaybe(basePath, (resolvedBase) => {
+        if (!resolvedBase) {
+          return null;
+        }
+        const path = `${resolvedBase}.${targetExpr.property}`;
+        const isRoot = path.startsWith("root.");
+        const rawPath = isRoot ? path.slice("root.".length) : path;
+        if (isRoot) {
+          if (context.rootScope) {
+            return { scope: context.rootScope, path: `self.${rawPath}` };
+          }
+          return { scope: context.scope, path: `root.${rawPath}` };
+        }
+        return { scope: context.scope, path: rawPath };
+      });
     }
     if (this.target instanceof IndexExpression) {
-      const path = await this.resolveIndexPath(context, this.target);
-      if (!path) {
-        return null;
-      }
-      const isRoot = path.startsWith("root.");
-      const rawPath = isRoot ? path.slice("root.".length) : path;
-      if (isRoot) {
-        return { scope: context.scope, path: `root.${rawPath}` };
-      }
-      return { scope: context.scope, path: rawPath };
+      const path = this.resolveIndexPath(context, this.target);
+      return resolveMaybe(path, (resolvedPath) => {
+        if (!resolvedPath) {
+          return null;
+        }
+        const isRoot = resolvedPath.startsWith("root.");
+        const rawPath = isRoot ? resolvedPath.slice("root.".length) : resolvedPath;
+        if (isRoot) {
+          if (context.rootScope) {
+            return { scope: context.rootScope, path: `self.${rawPath}` };
+          }
+          return { scope: context.scope, path: `root.${rawPath}` };
+        }
+        return { scope: context.scope, path: rawPath };
+      });
     }
     return null;
   }
-  async resolveIndexPath(context, expr) {
-    const base = await this.resolveTargetPath(context, expr.target);
-    if (!base) {
-      return null;
-    }
-    const indexValue = await expr.index.evaluate(context);
-    if (indexValue == null) {
-      return null;
-    }
-    return `${base}.${indexValue}`;
+  resolveIndexPath(context, expr) {
+    const base = this.resolveTargetPath(context, expr.target);
+    return resolveMaybe(base, (resolvedBase) => {
+      if (!resolvedBase) {
+        return null;
+      }
+      const indexValue = expr.index.evaluate(context);
+      return resolveMaybe(indexValue, (resolvedIndex) => {
+        if (resolvedIndex == null) {
+          return null;
+        }
+        return `${resolvedBase}.${resolvedIndex}`;
+      });
+    });
   }
-  async resolveTargetPath(context, target) {
+  resolveTargetPath(context, target) {
     if (target instanceof IdentifierExpression) {
       return target.name;
     }
@@ -689,6 +791,10 @@ var AssignmentNode = class extends BaseNode {
     if (!context.scope || !context.scope.setPath) {
       return;
     }
+    if (target instanceof DirectiveExpression) {
+      this.assignDirectiveTarget(context, target, value);
+      return;
+    }
     if (target instanceof IdentifierExpression) {
       context.scope.setPath(target.name, value);
       return;
@@ -730,19 +836,99 @@ var AssignmentNode = class extends BaseNode {
       return;
     }
   }
+  assignDirectiveTarget(context, target, value) {
+    const element = context.element;
+    if (!element) {
+      return;
+    }
+    if (target.kind === "attr") {
+      if (target.name === "value") {
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+          element.value = value == null ? "" : String(value);
+          element.setAttribute("value", element.value);
+          return;
+        }
+        if (element instanceof HTMLSelectElement) {
+          element.value = value == null ? "" : String(value);
+          return;
+        }
+      }
+      if (target.name === "checked" && element instanceof HTMLInputElement) {
+        const checked = value === true || value === "true" || value === 1 || value === "1";
+        element.checked = checked;
+        if (checked) {
+          element.setAttribute("checked", "");
+        } else {
+          element.removeAttribute("checked");
+        }
+        return;
+      }
+      if (target.name === "html" && element instanceof HTMLElement) {
+        element.innerHTML = value == null ? "" : String(value);
+        return;
+      }
+      element.setAttribute(target.name, value == null ? "" : String(value));
+      return;
+    }
+    if (target.kind === "style" && element instanceof HTMLElement) {
+      element.style.setProperty(target.name, value == null ? "" : String(value));
+    }
+  }
 };
 var ReturnNode = class extends BaseNode {
   constructor(value) {
     super("Return");
     this.value = value;
   }
-  async evaluate(context) {
+  evaluate(context) {
     if (context.returning) {
       return context.returnValue;
     }
-    context.returnValue = this.value ? await this.value.evaluate(context) : void 0;
-    context.returning = true;
-    return context.returnValue;
+    const nextValue = this.value ? this.value.evaluate(context) : void 0;
+    return resolveMaybe(nextValue, (resolved) => {
+      context.returnValue = resolved;
+      context.returning = true;
+      return context.returnValue;
+    });
+  }
+};
+var BreakNode = class extends BaseNode {
+  constructor() {
+    super("Break");
+  }
+  evaluate(context) {
+    context.breaking = true;
+    return void 0;
+  }
+};
+var ContinueNode = class extends BaseNode {
+  constructor() {
+    super("Continue");
+  }
+  evaluate(context) {
+    context.continuing = true;
+    return void 0;
+  }
+};
+var AssertError = class extends Error {
+  constructor(message = "Assertion failed") {
+    super(message);
+    this.name = "AssertError";
+  }
+};
+var AssertNode = class extends BaseNode {
+  constructor(test) {
+    super("Assert");
+    this.test = test;
+  }
+  evaluate(context) {
+    const value = this.test.evaluate(context);
+    return resolveMaybe(value, (resolved) => {
+      if (!resolved) {
+        throw new AssertError();
+      }
+      return resolved;
+    });
   }
 };
 var IfNode = class extends BaseNode {
@@ -752,14 +938,17 @@ var IfNode = class extends BaseNode {
     this.consequent = consequent;
     this.alternate = alternate;
   }
-  async evaluate(context) {
-    const condition = await this.test.evaluate(context);
-    if (condition) {
-      return evaluateWithChildScope(context, this.consequent);
-    }
-    if (this.alternate) {
-      return evaluateWithChildScope(context, this.alternate);
-    }
+  evaluate(context) {
+    const condition = this.test.evaluate(context);
+    return resolveMaybe(condition, (resolved) => {
+      if (resolved) {
+        return evaluateWithChildScope(context, this.consequent);
+      }
+      if (this.alternate) {
+        return evaluateWithChildScope(context, this.alternate);
+      }
+      return void 0;
+    });
   }
 };
 var WhileNode = class extends BaseNode {
@@ -768,21 +957,104 @@ var WhileNode = class extends BaseNode {
     this.test = test;
     this.body = body;
   }
-  async evaluate(context) {
+  evaluate(context) {
     const previousScope = context.scope;
     if (context.scope?.createChild) {
       context.scope = context.scope.createChild();
     }
-    try {
-      while (await this.test.evaluate(context)) {
-        await this.body.evaluate(context);
-        if (context.returning) {
-          break;
+    const run = () => {
+      const condition = this.test.evaluate(context);
+      return resolveMaybe(condition, (resolved) => {
+        if (!resolved || context.returning) {
+          return void 0;
         }
+        const bodyResult = this.body.evaluate(context);
+        return resolveMaybe(bodyResult, () => {
+          if (context.breaking) {
+            context.breaking = false;
+            return void 0;
+          }
+          if (context.continuing) {
+            context.continuing = false;
+          }
+          return run();
+        });
+      });
+    };
+    const result = run();
+    if (isPromiseLike(result)) {
+      return result.finally(() => {
+        context.scope = previousScope;
+      });
+    }
+    context.scope = previousScope;
+    return result;
+  }
+};
+var ForEachNode = class extends BaseNode {
+  constructor(target, iterable, kind, body) {
+    super("ForEach");
+    this.target = target;
+    this.iterable = iterable;
+    this.kind = kind;
+    this.body = body;
+  }
+  evaluate(context) {
+    const iterableValue = this.iterable.evaluate(context);
+    return resolveMaybe(iterableValue, (resolved) => {
+      const entries = this.getEntries(resolved);
+      const previousScope = context.scope;
+      let bodyScope = context.scope;
+      if (context.scope?.createChild) {
+        bodyScope = context.scope.createChild();
       }
-    } finally {
-      context.scope = previousScope;
+      let index = 0;
+      const loop = () => {
+        if (index >= entries.length || context.returning) {
+          context.scope = previousScope;
+          return void 0;
+        }
+        const value = entries[index];
+        index += 1;
+        context.scope = bodyScope;
+        context.scope?.setPath?.(this.target.name, value);
+        const bodyResult = this.body.evaluate(context);
+        return resolveMaybe(bodyResult, () => {
+          if (context.breaking) {
+            context.breaking = false;
+            context.scope = previousScope;
+            return void 0;
+          }
+          if (context.continuing) {
+            context.continuing = false;
+          }
+          context.scope = previousScope;
+          return loop();
+        });
+      };
+      return loop();
+    });
+  }
+  getEntries(value) {
+    if (value == null) {
+      return [];
+    }
+    if (this.kind === "in") {
+      if (typeof value === "object") {
+        return Object.keys(value);
+      }
+      return [];
+    }
+    if (typeof value === "string") {
+      return Array.from(value);
     }
+    if (typeof value[Symbol.iterator] === "function") {
+      return Array.from(value);
+    }
+    if (typeof value === "object") {
+      return Object.values(value);
+    }
+    return [];
   }
 };
 var ForNode = class extends BaseNode {
@@ -793,27 +1065,45 @@ var ForNode = class extends BaseNode {
     this.update = update;
     this.body = body;
   }
-  async evaluate(context) {
-    if (this.init) {
-      await this.init.evaluate(context);
-    }
-    const previousScope = context.scope;
-    let bodyScope = context.scope;
-    if (context.scope?.createChild) {
-      bodyScope = context.scope.createChild();
-    }
-    while (this.test ? await this.test.evaluate(context) : true) {
-      context.scope = bodyScope;
-      await this.body.evaluate(context);
-      if (context.returning) {
-        break;
-      }
-      context.scope = previousScope;
-      if (this.update) {
-        await this.update.evaluate(context);
-      }
-    }
-    context.scope = previousScope;
+  evaluate(context) {
+    const initResult = this.init ? this.init.evaluate(context) : void 0;
+    const run = () => {
+      const previousScope = context.scope;
+      let bodyScope = context.scope;
+      if (context.scope?.createChild) {
+        bodyScope = context.scope.createChild();
+      }
+      const loop = () => {
+        const testResult = this.test ? this.test.evaluate(context) : true;
+        return resolveMaybe(testResult, (passed) => {
+          if (!passed || context.returning) {
+            context.scope = previousScope;
+            return void 0;
+          }
+          context.scope = bodyScope;
+          const bodyResult = this.body.evaluate(context);
+          return resolveMaybe(bodyResult, () => {
+            if (context.returning) {
+              context.scope = previousScope;
+              return void 0;
+            }
+            if (context.breaking) {
+              context.breaking = false;
+              context.scope = previousScope;
+              return void 0;
+            }
+            context.scope = previousScope;
+            if (context.continuing) {
+              context.continuing = false;
+            }
+            const updateResult = this.update ? this.update.evaluate(context) : void 0;
+            return resolveMaybe(updateResult, () => loop());
+          });
+        });
+      };
+      return loop();
+    };
+    return resolveMaybe(initResult, () => run());
   }
 };
 var TryNode = class extends BaseNode {
@@ -823,10 +1113,8 @@ var TryNode = class extends BaseNode {
     this.errorName = errorName;
     this.handler = handler;
   }
-  async evaluate(context) {
-    try {
-      return await evaluateWithChildScope(context, this.body);
-    } catch (error) {
+  evaluate(context) {
+    const handleError = (error) => {
       if (context.returning) {
         return context.returnValue;
       }
@@ -844,11 +1132,23 @@ var TryNode = class extends BaseNode {
           scope.setPath(`self.${this.errorName}`, error);
         }
       }
-      await this.handler.evaluate(context);
-      if (scope && scope.setPath && handlerScope === previousScope) {
-        scope.setPath(this.errorName, previous);
+      const handlerResult = this.handler.evaluate(context);
+      return resolveMaybe(handlerResult, () => {
+        if (scope && scope.setPath && handlerScope === previousScope) {
+          scope.setPath(this.errorName, previous);
+        }
+        context.scope = previousScope;
+        return void 0;
+      });
+    };
+    try {
+      const bodyResult = evaluateWithChildScope(context, this.body);
+      if (isPromiseLike(bodyResult)) {
+        return bodyResult.catch((error) => handleError(error));
       }
-      context.scope = previousScope;
+      return bodyResult;
+    } catch (error) {
+      return handleError(error);
     }
   }
 };
@@ -868,11 +1168,35 @@ var FunctionExpression = class extends BaseNode {
     this.body = body;
     this.isAsync = isAsync;
   }
-  async evaluate(context) {
+  evaluate(context) {
     const scope = context.scope;
     const globals = context.globals;
     const element = context.element;
-    return async (...args) => {
+    if (this.isAsync) {
+      return (...args) => {
+        const activeScope = scope?.createChild ? scope.createChild() : scope;
+        const inner = {
+          scope: activeScope,
+          rootScope: context.rootScope,
+          ...globals ? { globals } : {},
+          ...element ? { element } : {},
+          returnValue: void 0,
+          returning: false,
+          breaking: false,
+          continuing: false
+        };
+        const previousValues = /* @__PURE__ */ new Map();
+        const applyResult = activeScope ? this.applyParams(activeScope, previousValues, inner, args) : void 0;
+        const bodyResult = resolveMaybe(applyResult, () => this.body.evaluate(inner));
+        const finalResult = resolveMaybe(bodyResult, () => inner.returnValue);
+        return Promise.resolve(finalResult).finally(() => {
+          if (activeScope && activeScope === scope) {
+            this.restoreParams(activeScope, previousValues);
+          }
+        });
+      };
+    }
+    return (...args) => {
       const activeScope = scope?.createChild ? scope.createChild() : scope;
       const inner = {
         scope: activeScope,
@@ -880,47 +1204,69 @@ var FunctionExpression = class extends BaseNode {
         ...globals ? { globals } : {},
         ...element ? { element } : {},
         returnValue: void 0,
-        returning: false
+        returning: false,
+        breaking: false,
+        continuing: false
       };
-      if (activeScope) {
-        const previousValues = /* @__PURE__ */ new Map();
-        await this.applyParams(activeScope, previousValues, inner, args);
-        await this.body.evaluate(inner);
-        if (activeScope === scope) {
-          this.restoreParams(activeScope, previousValues);
-        }
-      } else {
-        await this.body.evaluate(inner);
+      const previousValues = /* @__PURE__ */ new Map();
+      const applyResult = activeScope ? this.applyParams(activeScope, previousValues, inner, args) : void 0;
+      const bodyResult = resolveMaybe(applyResult, () => this.body.evaluate(inner));
+      const finalResult = resolveMaybe(bodyResult, () => inner.returnValue);
+      if (isPromiseLike(finalResult)) {
+        return finalResult.finally(() => {
+          if (activeScope && activeScope === scope) {
+            this.restoreParams(activeScope, previousValues);
+          }
+        });
       }
-      return inner.returnValue;
+      if (activeScope && activeScope === scope) {
+        this.restoreParams(activeScope, previousValues);
+      }
+      return finalResult;
     };
   }
-  async applyParams(scope, previousValues, context, args) {
-    if (!scope || !scope.setPath) {
+  applyParams(scope, previousValues, context, args) {
+    if (!scope) {
       return;
     }
-    let argIndex = 0;
-    for (const param of this.params) {
-      const name = param.name;
-      if (!name) {
-        continue;
-      }
-      previousValues.set(name, scope.getPath(name));
-      if (param.rest) {
-        scope.setPath(`self.${name}`, args.slice(argIndex));
-        argIndex = args.length;
-        continue;
-      }
-      let value = args[argIndex];
-      if (value === void 0 && param.defaultValue) {
-        value = await param.defaultValue.evaluate(context);
+    const setPath = scope.setPath?.bind(scope);
+    if (!setPath) {
+      return;
+    }
+    const params = this.params;
+    const applyAt = (paramIndex, argIndex) => {
+      for (let i = paramIndex; i < params.length; i += 1) {
+        const param = params[i];
+        const name = param.name;
+        if (!name) {
+          continue;
+        }
+        previousValues.set(name, scope.getPath(name));
+        if (param.rest) {
+          setPath(`self.${name}`, args.slice(argIndex));
+          return;
+        }
+        let value = args[argIndex];
+        if (value === void 0 && param.defaultValue) {
+          const defaultValue = param.defaultValue.evaluate(context);
+          return resolveMaybe(defaultValue, (resolvedDefault) => {
+            setPath(`self.${name}`, resolvedDefault);
+            return applyAt(i + 1, argIndex + 1);
+          });
+        }
+        setPath(`self.${name}`, value);
+        argIndex += 1;
       }
-      scope.setPath(`self.${name}`, value);
-      argIndex += 1;
-    }
+      return;
+    };
+    return applyAt(0, 0);
   }
   restoreParams(scope, previousValues) {
-    if (!scope || !scope.setPath) {
+    if (!scope) {
+      return;
+    }
+    const setPath = scope.setPath?.bind(scope);
+    if (!setPath) {
       return;
     }
     for (const param of this.params) {
@@ -928,7 +1274,7 @@ var FunctionExpression = class extends BaseNode {
       if (!name) {
         continue;
       }
-      scope.setPath(name, previousValues.get(name));
+      setPath(name, previousValues.get(name));
     }
   }
 };
@@ -947,7 +1293,7 @@ var IdentifierExpression = class extends BaseNode {
     super("Identifier");
     this.name = name;
   }
-  async evaluate(context) {
+  evaluate(context) {
     if (this.name.startsWith("root.") && context.rootScope) {
       const path = this.name.slice("root.".length);
       return context.rootScope.getPath(`self.${path}`);
@@ -992,7 +1338,7 @@ var LiteralExpression = class extends BaseNode {
     super("Literal");
     this.value = value;
   }
-  async evaluate() {
+  evaluate() {
     return this.value;
   }
 };
@@ -1001,13 +1347,22 @@ var TemplateExpression = class extends BaseNode {
     super("TemplateExpression");
     this.parts = parts;
   }
-  async evaluate(context) {
+  evaluate(context) {
     let result = "";
-    for (const part of this.parts) {
-      const value = await part.evaluate(context);
-      result += value == null ? "" : String(value);
-    }
-    return result;
+    let index = 0;
+    const run = () => {
+      while (index < this.parts.length) {
+        const part = this.parts[index];
+        index += 1;
+        const value = part.evaluate(context);
+        return resolveMaybe(value, (resolved) => {
+          result += resolved == null ? "" : String(resolved);
+          return run();
+        });
+      }
+      return result;
+    };
+    return run();
   }
 };
 var UnaryExpression = class extends BaseNode {
@@ -1016,15 +1371,17 @@ var UnaryExpression = class extends BaseNode {
     this.operator = operator;
     this.argument = argument;
   }
-  async evaluate(context) {
-    const value = await this.argument.evaluate(context);
-    if (this.operator === "!") {
-      return !value;
-    }
-    if (this.operator === "-") {
-      return -value;
-    }
-    return value;
+  evaluate(context) {
+    const value = this.argument.evaluate(context);
+    return resolveMaybe(value, (resolved) => {
+      if (this.operator === "!") {
+        return !resolved;
+      }
+      if (this.operator === "-") {
+        return -resolved;
+      }
+      return resolved;
+    });
   }
 };
 var BinaryExpression = class extends BaseNode {
@@ -1034,61 +1391,71 @@ var BinaryExpression = class extends BaseNode {
     this.left = left;
     this.right = right;
   }
-  async evaluate(context) {
-    if (this.operator === "&&") {
-      const leftValue = await this.left.evaluate(context);
-      return leftValue && await this.right.evaluate(context);
-    }
-    if (this.operator === "||") {
-      const leftValue = await this.left.evaluate(context);
-      return leftValue || await this.right.evaluate(context);
-    }
-    if (this.operator === "??") {
-      const leftValue = await this.left.evaluate(context);
-      return leftValue ?? await this.right.evaluate(context);
-    }
-    const left = await this.left.evaluate(context);
-    const right = await this.right.evaluate(context);
-    if (this.operator === "+") {
-      return left + right;
-    }
-    if (this.operator === "-") {
-      return left - right;
-    }
-    if (this.operator === "*") {
-      return left * right;
-    }
-    if (this.operator === "/") {
-      return left / right;
-    }
-    if (this.operator === "%") {
-      return left % right;
-    }
-    if (this.operator === "==") {
-      return left == right;
-    }
-    if (this.operator === "!=") {
-      return left != right;
-    }
-    if (this.operator === "===") {
-      return left === right;
-    }
-    if (this.operator === "!==") {
-      return left !== right;
-    }
-    if (this.operator === "<") {
-      return left < right;
-    }
-    if (this.operator === ">") {
-      return left > right;
-    }
-    if (this.operator === "<=") {
-      return left <= right;
-    }
-    if (this.operator === ">=") {
-      return left >= right;
-    }
-    return void 0;
+  evaluate(context) {
+    const leftValue = this.left.evaluate(context);
+    return resolveMaybe(leftValue, (resolvedLeft) => {
+      if (this.operator === "&&") {
+        if (!resolvedLeft) {
+          return resolvedLeft;
+        }
+        return this.right.evaluate(context);
+      }
+      if (this.operator === "||") {
+        if (resolvedLeft) {
+          return resolvedLeft;
+        }
+        return this.right.evaluate(context);
+      }
+      if (this.operator === "??") {
+        if (resolvedLeft !== null && resolvedLeft !== void 0) {
+          return resolvedLeft;
+        }
+        return this.right.evaluate(context);
+      }
+      const rightValue = this.right.evaluate(context);
+      return resolveMaybe(rightValue, (resolvedRight) => {
+        if (this.operator === "+") {
+          return resolvedLeft + resolvedRight;
+        }
+        if (this.operator === "-") {
+          return resolvedLeft - resolvedRight;
+        }
+        if (this.operator === "*") {
+          return resolvedLeft * resolvedRight;
+        }
+        if (this.operator === "/") {
+          return resolvedLeft / resolvedRight;
+        }
+        if (this.operator === "%") {
+          return resolvedLeft % resolvedRight;
+        }
+        if (this.operator === "==") {
+          return resolvedLeft == resolvedRight;
+        }
+        if (this.operator === "!=") {
+          return resolvedLeft != resolvedRight;
+        }
+        if (this.operator === "===") {
+          return resolvedLeft === resolvedRight;
+        }
+        if (this.operator === "!==") {
+          return resolvedLeft !== resolvedRight;
+        }
+        if (this.operator === "<") {
+          return resolvedLeft < resolvedRight;
+        }
+        if (this.operator === ">") {
+          return resolvedLeft > resolvedRight;
+        }
+        if (this.operator === "<=") {
+          return resolvedLeft <= resolvedRight;
+        }
+        if (this.operator === ">=") {
+          return resolvedLeft >= resolvedRight;
+        }
+        return void 0;
+      });
+    });
   }
 };
 var TernaryExpression = class extends BaseNode {
@@ -1098,12 +1465,14 @@ var TernaryExpression = class extends BaseNode {
     this.consequent = consequent;
     this.alternate = alternate;
   }
-  async evaluate(context) {
-    const condition = await this.test.evaluate(context);
-    if (condition) {
-      return this.consequent.evaluate(context);
-    }
-    return this.alternate.evaluate(context);
+  evaluate(context) {
+    const condition = this.test.evaluate(context);
+    return resolveMaybe(condition, (resolved) => {
+      if (resolved) {
+        return this.consequent.evaluate(context);
+      }
+      return this.alternate.evaluate(context);
+    });
   }
 };
 var MemberExpression = class _MemberExpression extends BaseNode {
@@ -1113,11 +1482,11 @@ var MemberExpression = class _MemberExpression extends BaseNode {
     this.property = property;
     this.optional = optional;
   }
-  async evaluate(context) {
-    const resolved = await this.resolve(context);
-    return resolved?.value;
+  evaluate(context) {
+    const resolved = this.resolve(context);
+    return resolveMaybe(resolved, (resolvedValue) => resolvedValue?.value);
   }
-  async resolve(context) {
+  resolve(context) {
     const path = this.getIdentifierPath();
     if (path) {
       const resolved = this.resolveFromScope(context, path);
@@ -1129,11 +1498,13 @@ var MemberExpression = class _MemberExpression extends BaseNode {
         return resolvedGlobal;
       }
     }
-    const target = await this.target.evaluate(context);
-    if (target == null) {
-      return { value: void 0, target, optional: this.optional };
-    }
-    return { value: target[this.property], target, optional: this.optional };
+    const target = this.target.evaluate(context);
+    return resolveMaybe(target, (resolvedTarget) => {
+      if (resolvedTarget == null) {
+        return { value: void 0, target: resolvedTarget, optional: this.optional };
+      }
+      return { value: resolvedTarget[this.property], target: resolvedTarget, optional: this.optional };
+    });
   }
   getIdentifierPath() {
     const targetPath = this.getTargetIdentifierPath();
@@ -1209,25 +1580,39 @@ var CallExpression = class extends BaseNode {
     this.callee = callee;
     this.args = args;
   }
-  async evaluate(context) {
-    const resolved = await this.resolveCallee(context);
-    const fn = resolved?.fn ?? await this.callee.evaluate(context);
-    if (typeof fn !== "function") {
-      return void 0;
-    }
-    const values = [];
-    for (const arg of this.args) {
-      values.push(await arg.evaluate(context));
-    }
-    return fn.apply(resolved?.thisArg, values);
+  evaluate(context) {
+    const resolved = this.resolveCallee(context);
+    return resolveMaybe(resolved, (resolvedCallee) => {
+      const fnValue = resolvedCallee?.fn ?? this.callee.evaluate(context);
+      return resolveMaybe(fnValue, (resolvedFn) => {
+        if (typeof resolvedFn !== "function") {
+          return void 0;
+        }
+        const values = [];
+        const evalArgs = (index) => {
+          for (let i = index; i < this.args.length; i += 1) {
+            const arg = this.args[i];
+            const argValue = arg.evaluate(context);
+            return resolveMaybe(argValue, (resolvedArg) => {
+              values.push(resolvedArg);
+              return evalArgs(i + 1);
+            });
+          }
+          return resolvedFn.apply(resolvedCallee?.thisArg, values);
+        };
+        return evalArgs(0);
+      });
+    });
   }
-  async resolveCallee(context) {
+  resolveCallee(context) {
     if (this.callee instanceof MemberExpression) {
-      const resolved = await this.callee.resolve(context);
-      if (!resolved) {
-        return void 0;
-      }
-      return { fn: resolved.value, thisArg: resolved.target };
+      const resolved = this.callee.resolve(context);
+      return resolveMaybe(resolved, (resolvedValue) => {
+        if (!resolvedValue) {
+          return void 0;
+        }
+        return { fn: resolvedValue.value, thisArg: resolvedValue.target };
+      });
     }
     if (!(this.callee instanceof IdentifierExpression)) {
       return void 0;
@@ -1269,27 +1654,40 @@ var ArrayExpression = class extends BaseNode {
     super("ArrayExpression");
     this.elements = elements;
   }
-  async evaluate(context) {
+  evaluate(context) {
     const values = [];
-    for (const element of this.elements) {
-      if (element instanceof SpreadElement) {
-        const spreadValue = await element.value.evaluate(context);
-        if (spreadValue == null) {
-          continue;
+    const pushElements = (value) => {
+      if (value == null) {
+        return;
+      }
+      const iterator = value[Symbol.iterator];
+      if (typeof iterator === "function") {
+        for (const entry of value) {
+          values.push(entry);
         }
-        const iterator = spreadValue[Symbol.iterator];
-        if (typeof iterator === "function") {
-          for (const entry of spreadValue) {
-            values.push(entry);
-          }
-        } else {
-          values.push(spreadValue);
+      } else {
+        values.push(value);
+      }
+    };
+    const evalAt = (index) => {
+      for (let i = index; i < this.elements.length; i += 1) {
+        const element = this.elements[i];
+        if (element instanceof SpreadElement) {
+          const spreadValue = element.value.evaluate(context);
+          return resolveMaybe(spreadValue, (resolvedSpread) => {
+            pushElements(resolvedSpread);
+            return evalAt(i + 1);
+          });
         }
-        continue;
+        const value = element.evaluate(context);
+        return resolveMaybe(value, (resolvedValue) => {
+          values.push(resolvedValue);
+          return evalAt(i + 1);
+        });
       }
-      values.push(await element.evaluate(context));
-    }
-    return values;
+      return values;
+    };
+    return evalAt(0);
   }
 };
 var ObjectExpression = class extends BaseNode {
@@ -1297,24 +1695,39 @@ var ObjectExpression = class extends BaseNode {
     super("ObjectExpression");
     this.entries = entries;
   }
-  async evaluate(context) {
+  evaluate(context) {
     const result = {};
-    for (const entry of this.entries) {
-      if ("spread" in entry) {
-        const spreadValue = await entry.spread.evaluate(context);
-        if (spreadValue != null) {
-          Object.assign(result, spreadValue);
+    const evalAt = (index) => {
+      for (let i = index; i < this.entries.length; i += 1) {
+        const entry = this.entries[i];
+        if ("spread" in entry) {
+          const spreadValue = entry.spread.evaluate(context);
+          return resolveMaybe(spreadValue, (resolvedSpread) => {
+            if (resolvedSpread != null) {
+              Object.assign(result, resolvedSpread);
+            }
+            return evalAt(i + 1);
+          });
         }
-        continue;
-      }
-      if ("computed" in entry && entry.computed) {
-        const keyValue = await entry.keyExpr.evaluate(context);
-        result[String(keyValue)] = await entry.value.evaluate(context);
-      } else {
-        result[entry.key] = await entry.value.evaluate(context);
+        if ("computed" in entry && entry.computed) {
+          const keyValue = entry.keyExpr.evaluate(context);
+          return resolveMaybe(keyValue, (resolvedKey) => {
+            const entryValue = entry.value.evaluate(context);
+            return resolveMaybe(entryValue, (resolvedValue) => {
+              result[String(resolvedKey)] = resolvedValue;
+              return evalAt(i + 1);
+            });
+          });
+        }
+        const value = entry.value.evaluate(context);
+        return resolveMaybe(value, (resolvedValue) => {
+          result[entry.key] = resolvedValue;
+          return evalAt(i + 1);
+        });
       }
-    }
-    return result;
+      return result;
+    };
+    return evalAt(0);
   }
 };
 var IndexExpression = class extends BaseNode {
@@ -1323,16 +1736,30 @@ var IndexExpression = class extends BaseNode {
     this.target = target;
     this.index = index;
   }
-  async evaluate(context) {
-    const target = await this.target.evaluate(context);
-    if (target == null) {
-      return void 0;
-    }
-    const index = await this.index.evaluate(context);
-    if (index == null) {
-      return void 0;
+  evaluate(context) {
+    const target = this.target.evaluate(context);
+    return resolveMaybe(target, (resolvedTarget) => {
+      if (resolvedTarget == null) {
+        return void 0;
+      }
+      const index = this.index.evaluate(context);
+      return resolveMaybe(index, (resolvedIndex) => {
+        if (resolvedIndex == null) {
+          return void 0;
+        }
+        const key = this.normalizeIndexKey(resolvedTarget, resolvedIndex);
+        return resolvedTarget[key];
+      });
+    });
+  }
+  normalizeIndexKey(target, index) {
+    if (Array.isArray(target) && typeof index === "string" && index.trim() !== "") {
+      const numeric = Number(index);
+      if (!Number.isNaN(numeric)) {
+        return numeric;
+      }
     }
-    return target[index];
+    return index;
   }
 };
 var DirectiveExpression = class extends BaseNode {
@@ -1341,7 +1768,7 @@ var DirectiveExpression = class extends BaseNode {
     this.kind = kind;
     this.name = name;
   }
-  async evaluate(context) {
+  evaluate(context) {
     const element = context.element;
     if (!element) {
       return `${this.kind}:${this.name}`;
@@ -1355,6 +1782,12 @@ var DirectiveExpression = class extends BaseNode {
           return element.value;
         }
       }
+      if (this.name === "text" && element instanceof HTMLElement) {
+        return element.innerText;
+      }
+      if (this.name === "content" && element instanceof HTMLElement) {
+        return element.textContent ?? "";
+      }
       if (this.name === "checked" && element instanceof HTMLInputElement) {
         return element.checked;
       }
@@ -1374,9 +1807,9 @@ var AwaitExpression = class extends BaseNode {
     super("AwaitExpression");
     this.argument = argument;
   }
-  async evaluate(context) {
-    const value = await this.argument.evaluate(context);
-    return await value;
+  evaluate(context) {
+    const value = this.argument.evaluate(context);
+    return Promise.resolve(value);
   }
 };
 var QueryExpression = class extends BaseNode {
@@ -1385,7 +1818,7 @@ var QueryExpression = class extends BaseNode {
     this.direction = direction;
     this.selector = selector;
   }
-  async evaluate(context) {
+  evaluate(context) {
     const selector = this.selector.trim();
     if (!selector) {
       return [];
@@ -1451,6 +1884,9 @@ var TokenStream = class {
     let count = 0;
     for (let i = this.index; i < this.tokens.length; i++) {
       const token = this.tokens[i];
+      if (!token) {
+        continue;
+      }
       if (token.type === "Whitespace" /* Whitespace */) {
         continue;
       }
@@ -1461,6 +1897,29 @@ var TokenStream = class {
     }
     return null;
   }
+  indexAfterDelimited(openType, closeType, offset = 0) {
+    const first = this.peekNonWhitespace(offset);
+    if (!first || first.type !== openType) {
+      return null;
+    }
+    let index = offset + 1;
+    let depth = 1;
+    while (true) {
+      const token = this.peekNonWhitespace(index);
+      if (!token) {
+        return null;
+      }
+      if (token.type === openType) {
+        depth += 1;
+      } else if (token.type === closeType) {
+        depth -= 1;
+        if (depth === 0) {
+          return index + 1;
+        }
+      }
+      index += 1;
+    }
+  }
 };
 
 // src/parser/parser.ts
@@ -1468,11 +1927,14 @@ var Parser = class _Parser {
   stream;
   source;
   customFlags;
+  behaviorFlags;
   allowImplicitSemicolon = false;
   awaitStack = [];
+  functionDepth = 0;
   constructor(input, options) {
     this.source = input;
-    this.customFlags = options?.customFlags ?? /* @__PURE__ */ new Set();
+    this.customFlags = options?.customFlags ?? /* @__PURE__ */ new Set(["important", "debounce"]);
+    this.behaviorFlags = options?.behaviorFlags ?? /* @__PURE__ */ new Set();
     const lexer = new Lexer(input);
     this.stream = new TokenStream(lexer.tokenize());
   }
@@ -1512,8 +1974,9 @@ var Parser = class _Parser {
       this.stream.skipWhitespace();
       this.stream.expect("Behavior" /* Behavior */);
       const selector = this.parseSelector();
+      const { flags, flagArgs } = this.parseBehaviorFlags();
       const body = this.parseBlock({ allowDeclarations: true });
-      return new BehaviorNode(selector, body);
+      return new BehaviorNode(selector, body, flags, flagArgs);
     });
   }
   parseSelector() {
@@ -1527,6 +1990,9 @@ var Parser = class _Parser {
       if (token.type === "LBrace" /* LBrace */) {
         break;
       }
+      if (token.type === "Bang" /* Bang */) {
+        break;
+      }
       if (token.type === "Whitespace" /* Whitespace */) {
         this.stream.next();
         if (sawNonWhitespace && selectorText[selectorText.length - 1] !== " ") {
@@ -1542,6 +2008,10 @@ var Parser = class _Parser {
     }
     return new SelectorNode(selectorText.trim());
   }
+  parseBehaviorFlags() {
+    const result = this.parseFlags(this.behaviorFlags, "behavior modifier");
+    return { flags: result.flags, flagArgs: result.flagArgs };
+  }
   parseUseStatement() {
     return this.wrapErrors(() => {
       this.stream.expect("Use" /* Use */);
@@ -1625,6 +2095,7 @@ ${caret}`;
   }
   parseBlock(options) {
     const allowDeclarations = options?.allowDeclarations ?? false;
+    const allowReturn = options?.allowReturn ?? this.functionDepth > 0;
     this.stream.skipWhitespace();
     this.stream.expect("LBrace" /* LBrace */);
     const statements = [];
@@ -1686,7 +2157,7 @@ ${caret}`;
           }
           sawConstruct = true;
         }
-        statements.push(this.parseStatement());
+        statements.push(this.parseStatement({ allowReturn }));
       }
     }
     return new BlockNode(statements);
@@ -1705,6 +2176,15 @@ ${caret}`;
       }
       return this.parseReturnStatement();
     }
+    if (next.type === "Assert" /* Assert */) {
+      return this.parseAssertStatement();
+    }
+    if (next.type === "Break" /* Break */) {
+      return this.parseBreakStatement();
+    }
+    if (next.type === "Continue" /* Continue */) {
+      return this.parseContinueStatement();
+    }
     if (allowBlocks && next.type === "On" /* On */) {
       return this.parseOnBlock();
     }
@@ -1740,44 +2220,6 @@ ${caret}`;
     }
     throw new Error(`Unexpected token ${next.type}`);
   }
-  parseStateBlock() {
-    this.stream.expect("State" /* State */);
-    this.stream.skipWhitespace();
-    this.stream.expect("LBrace" /* LBrace */);
-    const entries = [];
-    while (true) {
-      this.stream.skipWhitespace();
-      const next = this.stream.peek();
-      if (!next) {
-        throw new Error("Unterminated state block");
-      }
-      if (next.type === "RBrace" /* RBrace */) {
-        this.stream.next();
-        break;
-      }
-      const nameToken = this.stream.expect("Identifier" /* Identifier */);
-      this.stream.skipWhitespace();
-      this.stream.expect("Colon" /* Colon */);
-      this.stream.skipWhitespace();
-      const value = this.parseExpression();
-      this.stream.skipWhitespace();
-      let important = false;
-      if (this.stream.peek()?.type === "Bang" /* Bang */) {
-        this.stream.next();
-        this.stream.skipWhitespace();
-        const importantToken = this.stream.next();
-        if (importantToken.type === "Identifier" /* Identifier */ && importantToken.value === "important") {
-          important = true;
-        } else {
-          throw new Error("Expected 'important' after '!'");
-        }
-      }
-      this.stream.skipWhitespace();
-      this.stream.expect("Semicolon" /* Semicolon */);
-      entries.push(new StateEntryNode(nameToken.value, value, important));
-    }
-    return new StateBlockNode(entries);
-  }
   parseOnBlock() {
     this.stream.expect("On" /* On */);
     this.stream.skipWhitespace();
@@ -1805,22 +2247,9 @@ ${caret}`;
       }
       throw new Error(`Unexpected token in on() args: ${next.type}`);
     }
-    const modifiers = this.parseOnModifiers();
+    const { flags, flagArgs } = this.parseFlags(this.customFlags, "flag");
     const body = this.parseBlock({ allowDeclarations: false });
-    return new OnBlockNode(event, args, body, modifiers);
-  }
-  parseOnModifiers() {
-    const modifiers = [];
-    while (true) {
-      this.stream.skipWhitespace();
-      if (this.stream.peek()?.type !== "Bang" /* Bang */) {
-        break;
-      }
-      this.stream.next();
-      const name = this.stream.expect("Identifier" /* Identifier */).value;
-      modifiers.push(name);
-    }
-    return modifiers;
+    return new OnBlockNode(event, args, body, flags, flagArgs);
   }
   parseAssignment() {
     const target = this.parseAssignmentTarget();
@@ -2030,6 +2459,11 @@ ${caret}`;
     if (!token) {
       throw new Error("Expected expression");
     }
+    if (token.type === "PlusPlus" /* PlusPlus */ || token.type === "MinusMinus" /* MinusMinus */) {
+      this.stream.next();
+      const argument = this.parseUnaryExpression();
+      return this.createIncrementNode(token, argument, true);
+    }
     if (token.type === "Bang" /* Bang */) {
       this.stream.next();
       const argument = this.parseUnaryExpression();
@@ -2045,7 +2479,31 @@ ${caret}`;
       const argument = this.parseUnaryExpression();
       return new AwaitExpression(argument);
     }
-    return this.parseCallExpression();
+    return this.parsePostfixExpression();
+  }
+  parsePostfixExpression() {
+    let expr = this.parseCallExpression();
+    while (true) {
+      this.stream.skipWhitespace();
+      const token = this.stream.peek();
+      if (!token) {
+        break;
+      }
+      if (token.type === "PlusPlus" /* PlusPlus */ || token.type === "MinusMinus" /* MinusMinus */) {
+        this.stream.next();
+        expr = this.createIncrementNode(token, expr, false);
+        continue;
+      }
+      break;
+    }
+    return expr;
+  }
+  createIncrementNode(token, argument, prefix) {
+    if (!(argument instanceof IdentifierExpression) && !(argument instanceof MemberExpression) && !(argument instanceof IndexExpression) && !(argument instanceof DirectiveExpression)) {
+      throw new Error("Increment/decrement requires a mutable target");
+    }
+    const operator = token.type === "PlusPlus" /* PlusPlus */ ? "++" : "--";
+    return new AssignmentNode(argument, new LiteralExpression(1), operator, prefix);
   }
   parseCallExpression() {
     let expr = this.parsePrimaryExpression();
@@ -2357,6 +2815,7 @@ ${caret}`;
     this.stream.expect("LBrace" /* LBrace */);
     const statements = [];
     this.awaitStack.push(allowAwait);
+    this.functionDepth += 1;
     try {
       while (true) {
         this.stream.skipWhitespace();
@@ -2368,9 +2827,10 @@ ${caret}`;
           this.stream.next();
           break;
         }
-        statements.push(this.parseStatement({ allowBlocks: false, allowReturn: true }));
+        statements.push(this.parseStatement({ allowBlocks: true, allowReturn: true }));
       }
     } finally {
+      this.functionDepth -= 1;
       this.awaitStack.pop();
     }
     return new BlockNode(statements);
@@ -2566,7 +3026,7 @@ ${caret}`;
     const operator = this.parseDeclarationOperator();
     this.stream.skipWhitespace();
     const value = this.parseExpression();
-    const { flags, flagArgs } = this.parseFlags();
+    const { flags, flagArgs } = this.parseFlags(this.customFlags, "flag");
     this.stream.skipWhitespace();
     this.stream.expect("Semicolon" /* Semicolon */);
     return new DeclarationNode(target, operator, value, flags, flagArgs);
@@ -2607,7 +3067,7 @@ ${caret}`;
     }
     return ":";
   }
-  parseFlags() {
+  parseFlags(allowed, errorLabel) {
     const flags = {};
     const flagArgs = {};
     while (true) {
@@ -2617,30 +3077,13 @@ ${caret}`;
       }
       this.stream.next();
       const name = this.stream.expect("Identifier" /* Identifier */).value;
-      if (name === "important") {
-        flags.important = true;
-      } else if (name === "trusted") {
-        flags.trusted = true;
-      } else if (name === "debounce") {
-        flags.debounce = true;
-        if (this.stream.peek()?.type === "LParen" /* LParen */) {
-          this.stream.next();
-          this.stream.skipWhitespace();
-          const numberToken = this.stream.expect("Number" /* Number */);
-          flagArgs.debounce = Number(numberToken.value);
-          this.stream.skipWhitespace();
-          this.stream.expect("RParen" /* RParen */);
-        } else {
-          flagArgs.debounce = 200;
-        }
-      } else if (this.customFlags.has(name)) {
-        flags[name] = true;
-        const customArg = this.parseCustomFlagArg();
-        if (customArg !== void 0) {
-          flagArgs[name] = customArg;
-        }
-      } else {
-        throw new Error(`Unknown flag ${name}`);
+      if (allowed && !allowed.has(name)) {
+        throw new Error(`Unknown ${errorLabel} ${name}`);
+      }
+      flags[name] = true;
+      const customArg = this.parseCustomFlagArg();
+      if (customArg !== void 0) {
+        flagArgs[name] = customArg;
       }
     }
     return { flags, flagArgs };
@@ -2655,21 +3098,86 @@ ${caret}`;
     if (!token) {
       throw new Error("Unterminated flag arguments");
     }
-    let value;
+    const value = this.parseCustomFlagLiteral();
+    this.stream.skipWhitespace();
+    this.stream.expect("RParen" /* RParen */);
+    return value;
+  }
+  parseCustomFlagLiteral() {
+    const token = this.stream.peek();
+    if (!token) {
+      throw new Error("Unterminated flag arguments");
+    }
     if (token.type === "Number" /* Number */) {
-      value = Number(this.stream.next().value);
-    } else if (token.type === "String" /* String */) {
-      value = this.stream.next().value;
-    } else if (token.type === "Boolean" /* Boolean */) {
-      value = this.stream.next().value === "true";
-    } else if (token.type === "Identifier" /* Identifier */) {
-      value = this.stream.next().value;
-    } else {
-      throw new Error(`Unsupported flag argument ${token.type}`);
+      return Number(this.stream.next().value);
+    }
+    if (token.type === "String" /* String */) {
+      return this.stream.next().value;
+    }
+    if (token.type === "Boolean" /* Boolean */) {
+      return this.stream.next().value === "true";
+    }
+    if (token.type === "Identifier" /* Identifier */) {
+      return this.stream.next().value;
+    }
+    if (token.type === "LBracket" /* LBracket */) {
+      return this.parseCustomFlagArray();
+    }
+    if (token.type === "LBrace" /* LBrace */) {
+      return this.parseCustomFlagObject();
+    }
+    throw new Error(`Unsupported flag argument ${token.type}`);
+  }
+  parseCustomFlagArray() {
+    this.stream.expect("LBracket" /* LBracket */);
+    const items = [];
+    while (true) {
+      this.stream.skipWhitespace();
+      const next = this.stream.peek();
+      if (!next) {
+        throw new Error("Unterminated flag array");
+      }
+      if (next.type === "RBracket" /* RBracket */) {
+        this.stream.next();
+        break;
+      }
+      items.push(this.parseCustomFlagLiteral());
+      this.stream.skipWhitespace();
+      if (this.stream.peek()?.type === "Comma" /* Comma */) {
+        this.stream.next();
+      }
+    }
+    return items;
+  }
+  parseCustomFlagObject() {
+    this.stream.expect("LBrace" /* LBrace */);
+    const obj = {};
+    while (true) {
+      this.stream.skipWhitespace();
+      const next = this.stream.peek();
+      if (!next) {
+        throw new Error("Unterminated flag object");
+      }
+      if (next.type === "RBrace" /* RBrace */) {
+        this.stream.next();
+        break;
+      }
+      let key;
+      if (next.type === "Identifier" /* Identifier */ || next.type === "String" /* String */) {
+        key = this.stream.next().value;
+      } else {
+        throw new Error(`Unsupported flag object key ${next.type}`);
+      }
+      this.stream.skipWhitespace();
+      this.stream.expect("Colon" /* Colon */);
+      this.stream.skipWhitespace();
+      obj[key] = this.parseCustomFlagLiteral();
+      this.stream.skipWhitespace();
+      if (this.stream.peek()?.type === "Comma" /* Comma */) {
+        this.stream.next();
+      }
     }
-    this.stream.skipWhitespace();
-    this.stream.expect("RParen" /* RParen */);
-    return value;
+    return obj;
   }
   isDeclarationStart() {
     const first = this.stream.peekNonWhitespace(0);
@@ -2694,33 +3202,29 @@ ${caret}`;
     }
     if (first.type === "Identifier" /* Identifier */) {
       let index = 1;
-      while (this.stream.peekNonWhitespace(index)?.type === "Dot" /* Dot */ && this.stream.peekNonWhitespace(index + 1)?.type === "Identifier" /* Identifier */) {
-        index += 2;
-      }
-      while (this.stream.peekNonWhitespace(index)?.type === "LBracket" /* LBracket */) {
-        let depth = 0;
-        while (true) {
-          const token = this.stream.peekNonWhitespace(index);
-          if (!token) {
+      while (true) {
+        const token = this.stream.peekNonWhitespace(index);
+        if (!token) {
+          return false;
+        }
+        if (token.type === "Dot" /* Dot */ && this.stream.peekNonWhitespace(index + 1)?.type === "Identifier" /* Identifier */) {
+          index += 2;
+          continue;
+        }
+        if (token.type === "LBracket" /* LBracket */) {
+          const indexAfter = this.stream.indexAfterDelimited("LBracket" /* LBracket */, "RBracket" /* RBracket */, index);
+          if (indexAfter === null) {
             return false;
           }
-          if (token.type === "LBracket" /* LBracket */) {
-            depth += 1;
-          } else if (token.type === "RBracket" /* RBracket */) {
-            depth -= 1;
-            if (depth === 0) {
-              index += 1;
-              break;
-            }
-          }
-          index += 1;
+          index = indexAfter;
+          continue;
         }
+        break;
       }
       return this.isAssignmentOperatorStart(index);
     }
     if (first.type === "At" /* At */ || first.type === "Dollar" /* Dollar */) {
       const second = this.stream.peekNonWhitespace(1);
-      const third = this.stream.peekNonWhitespace(2);
       return second?.type === "Identifier" /* Identifier */ && this.isAssignmentOperatorStart(2);
     }
     if (first.type === "LBrace" /* LBrace */ || first.type === "LBracket" /* LBracket */) {
@@ -2758,17 +3262,6 @@ ${caret}`;
     }
     return false;
   }
-  isCallStart() {
-    const first = this.stream.peekNonWhitespace(0);
-    if (!first || first.type !== "Identifier" /* Identifier */) {
-      return false;
-    }
-    let index = 1;
-    while (this.stream.peekNonWhitespace(index)?.type === "Dot" /* Dot */ && this.stream.peekNonWhitespace(index + 1)?.type === "Identifier" /* Identifier */) {
-      index += 2;
-    }
-    return this.stream.peekNonWhitespace(index)?.type === "LParen" /* LParen */;
-  }
   isExpressionStatementStart() {
     const first = this.stream.peekNonWhitespace(0);
     if (!first) {
@@ -2798,50 +3291,22 @@ ${caret}`;
     if (this.stream.peekNonWhitespace(index)?.type !== "LParen" /* LParen */) {
       return false;
     }
-    index += 1;
-    let depth = 1;
-    while (true) {
-      const token = this.stream.peekNonWhitespace(index);
-      if (!token) {
-        return false;
-      }
-      if (token.type === "LParen" /* LParen */) {
-        depth += 1;
-      } else if (token.type === "RParen" /* RParen */) {
-        depth -= 1;
-        if (depth === 0) {
-          index += 1;
-          break;
-        }
-      }
-      index += 1;
+    const indexAfterParams = this.stream.indexAfterDelimited("LParen" /* LParen */, "RParen" /* RParen */, index);
+    if (indexAfterParams === null) {
+      return false;
     }
-    return this.stream.peekNonWhitespace(index)?.type === "LBrace" /* LBrace */;
+    return this.stream.peekNonWhitespace(indexAfterParams)?.type === "LBrace" /* LBrace */;
   }
   isArrowFunctionStart() {
     const first = this.stream.peekNonWhitespace(0);
     if (!first || first.type !== "LParen" /* LParen */) {
       return false;
     }
-    let index = 1;
-    let depth = 1;
-    while (true) {
-      const token = this.stream.peekNonWhitespace(index);
-      if (!token) {
-        return false;
-      }
-      if (token.type === "LParen" /* LParen */) {
-        depth += 1;
-      } else if (token.type === "RParen" /* RParen */) {
-        depth -= 1;
-        if (depth === 0) {
-          index += 1;
-          break;
-        }
-      }
-      index += 1;
+    const indexAfterParams = this.stream.indexAfterDelimited("LParen" /* LParen */, "RParen" /* RParen */, 0);
+    if (indexAfterParams === null) {
+      return false;
     }
-    return this.stream.peekNonWhitespace(index)?.type === "Arrow" /* Arrow */;
+    return this.stream.peekNonWhitespace(indexAfterParams)?.type === "Arrow" /* Arrow */;
   }
   isAsyncArrowFunctionStart() {
     const first = this.stream.peekNonWhitespace(0);
@@ -2851,25 +3316,11 @@ ${caret}`;
     if (this.stream.peekNonWhitespace(1)?.type !== "LParen" /* LParen */) {
       return false;
     }
-    let index = 2;
-    let depth = 1;
-    while (true) {
-      const token = this.stream.peekNonWhitespace(index);
-      if (!token) {
-        return false;
-      }
-      if (token.type === "LParen" /* LParen */) {
-        depth += 1;
-      } else if (token.type === "RParen" /* RParen */) {
-        depth -= 1;
-        if (depth === 0) {
-          index += 1;
-          break;
-        }
-      }
-      index += 1;
+    const indexAfterParams = this.stream.indexAfterDelimited("LParen" /* LParen */, "RParen" /* RParen */, 1);
+    if (indexAfterParams === null) {
+      return false;
     }
-    return this.stream.peekNonWhitespace(index)?.type === "Arrow" /* Arrow */;
+    return this.stream.peekNonWhitespace(indexAfterParams)?.type === "Arrow" /* Arrow */;
   }
   isFunctionExpressionAssignmentStart() {
     const first = this.stream.peekNonWhitespace(0);
@@ -2886,25 +3337,11 @@ ${caret}`;
     if (this.stream.peekNonWhitespace(index)?.type !== "LParen" /* LParen */) {
       return false;
     }
-    index += 1;
-    let depth = 1;
-    while (true) {
-      const token = this.stream.peekNonWhitespace(index);
-      if (!token) {
-        return false;
-      }
-      if (token.type === "LParen" /* LParen */) {
-        depth += 1;
-      } else if (token.type === "RParen" /* RParen */) {
-        depth -= 1;
-        if (depth === 0) {
-          index += 1;
-          break;
-        }
-      }
-      index += 1;
+    const indexAfterParams = this.stream.indexAfterDelimited("LParen" /* LParen */, "RParen" /* RParen */, index);
+    if (indexAfterParams === null) {
+      return false;
     }
-    return this.stream.peekNonWhitespace(index)?.type === "Arrow" /* Arrow */;
+    return this.stream.peekNonWhitespace(indexAfterParams)?.type === "Arrow" /* Arrow */;
   }
   parseExpressionStatement() {
     const expr = this.parseExpression();
@@ -2919,7 +3356,7 @@ ${caret}`;
     const test = this.parseExpression();
     this.stream.skipWhitespace();
     this.stream.expect("RParen" /* RParen */);
-    const consequent = this.parseBlock({ allowDeclarations: false });
+    const consequent = this.parseConditionalBody();
     this.stream.skipWhitespace();
     let alternate;
     if (this.stream.peek()?.type === "Else" /* Else */) {
@@ -2929,11 +3366,19 @@ ${caret}`;
         const nested = this.parseIfBlock();
         alternate = new BlockNode([nested]);
       } else {
-        alternate = this.parseBlock({ allowDeclarations: false });
+        alternate = this.parseConditionalBody();
       }
     }
     return new IfNode(test, consequent, alternate);
   }
+  parseConditionalBody() {
+    this.stream.skipWhitespace();
+    if (this.stream.peek()?.type === "LBrace" /* LBrace */) {
+      return this.parseBlock({ allowDeclarations: false });
+    }
+    const statement = this.parseStatement({ allowBlocks: false, allowReturn: this.functionDepth > 0 });
+    return new BlockNode([statement]);
+  }
   parseWhileBlock() {
     this.stream.expect("While" /* While */);
     this.stream.skipWhitespace();
@@ -2950,6 +3395,21 @@ ${caret}`;
     this.stream.skipWhitespace();
     this.stream.expect("LParen" /* LParen */);
     this.stream.skipWhitespace();
+    const eachKind = this.detectForEachKind();
+    if (eachKind) {
+      const target = this.parseForEachTarget();
+      this.stream.skipWhitespace();
+      const keyword = this.stream.expect("Identifier" /* Identifier */);
+      if (keyword.value !== eachKind) {
+        throw new Error(`Expected '${eachKind}' but got '${keyword.value}'`);
+      }
+      this.stream.skipWhitespace();
+      const iterable = this.parseExpression();
+      this.stream.skipWhitespace();
+      this.stream.expect("RParen" /* RParen */);
+      const body2 = this.parseBlock({ allowDeclarations: false });
+      return new ForEachNode(target, iterable, eachKind, body2);
+    }
     let init;
     if (this.stream.peek()?.type !== "Semicolon" /* Semicolon */) {
       init = this.parseForClause();
@@ -2973,6 +3433,43 @@ ${caret}`;
     const body = this.parseBlock({ allowDeclarations: false });
     return new ForNode(init, test, update, body);
   }
+  detectForEachKind() {
+    let offset = 0;
+    let depth = 0;
+    while (true) {
+      const token = this.stream.peekNonWhitespace(offset);
+      if (!token) {
+        return null;
+      }
+      if (token.type === "LParen" /* LParen */ || token.type === "LBracket" /* LBracket */ || token.type === "LBrace" /* LBrace */) {
+        depth += 1;
+      } else if (token.type === "RParen" /* RParen */ || token.type === "RBracket" /* RBracket */ || token.type === "RBrace" /* RBrace */) {
+        if (depth === 0) {
+          return null;
+        }
+        depth -= 1;
+      }
+      if (depth === 0) {
+        if (token.type === "Semicolon" /* Semicolon */) {
+          return null;
+        }
+        if (token.type === "Identifier" /* Identifier */ && (token.value === "in" || token.value === "of")) {
+          return token.value;
+        }
+      }
+      offset += 1;
+    }
+  }
+  parseForEachTarget() {
+    const token = this.stream.peek();
+    if (!token) {
+      throw new Error("Expected for-each target");
+    }
+    if (token.type !== "Identifier" /* Identifier */) {
+      throw new Error("for-in/of target must be an identifier");
+    }
+    return new IdentifierExpression(this.stream.next().value);
+  }
   parseForClause() {
     if (this.isAssignmentStart()) {
       return this.parseAssignmentExpression();
@@ -3068,9 +3565,6 @@ ${caret}`;
     const body = this.parseFunctionBlockWithAwait(isAsync);
     return new FunctionDeclarationNode(name, params, body, isAsync);
   }
-  parseFunctionBlock() {
-    return this.parseFunctionBlockWithAwait(false);
-  }
   parseReturnStatement() {
     this.stream.expect("Return" /* Return */);
     this.stream.skipWhitespace();
@@ -3083,6 +3577,23 @@ ${caret}`;
     this.stream.expect("Semicolon" /* Semicolon */);
     return new ReturnNode(value);
   }
+  parseAssertStatement() {
+    this.stream.expect("Assert" /* Assert */);
+    this.stream.skipWhitespace();
+    const test = this.parseExpression();
+    this.consumeStatementTerminator();
+    return new AssertNode(test);
+  }
+  parseBreakStatement() {
+    this.stream.expect("Break" /* Break */);
+    this.consumeStatementTerminator();
+    return new BreakNode();
+  }
+  parseContinueStatement() {
+    this.stream.expect("Continue" /* Continue */);
+    this.consumeStatementTerminator();
+    return new ContinueNode();
+  }
   parseArrowFunctionExpression(isAsync = false) {
     const params = this.parseFunctionParams();
     this.stream.skipWhitespace();
@@ -3192,6 +3703,7 @@ var Scope = class _Scope {
   root;
   listeners = /* @__PURE__ */ new Map();
   anyListeners = /* @__PURE__ */ new Set();
+  isEachItem = false;
   createChild() {
     return new _Scope(this);
   }
@@ -3420,17 +3932,14 @@ function applyShow(element, expression, scope) {
 }
 
 // src/runtime/html.ts
-function sanitizeHtml(value) {
-  return value.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "");
-}
-function applyHtml(element, expression, scope, trusted) {
+function applyHtml(element, expression, scope) {
   const key = expression.trim();
   if (!key) {
     return;
   }
   const value = scope.get(key);
   const html = value == null ? "" : String(value);
-  element.innerHTML = trusted ? html : sanitizeHtml(html);
+  element.innerHTML = html;
 }
 
 // src/runtime/http.ts
@@ -3450,7 +3959,7 @@ async function applyGet(element, config, scope, onHtmlApplied) {
   }
   if (config.swap === "outer") {
     const wrapper = document.createElement("div");
-    applyHtml(wrapper, "__html", { get: () => html }, config.trusted);
+    applyHtml(wrapper, "__html", { get: () => html });
     const replacement = wrapper.firstElementChild;
     if (replacement && target.parentNode) {
       target.parentNode.replaceChild(replacement, target);
@@ -3458,7 +3967,7 @@ async function applyGet(element, config, scope, onHtmlApplied) {
     }
     return;
   }
-  applyHtml(target, "__html", { get: () => html }, config.trusted);
+  applyHtml(target, "__html", { get: () => html });
   onHtmlApplied?.(target);
 }
 function resolveTarget(element, selector) {
@@ -3494,18 +4003,19 @@ var Engine = class _Engine {
   eachBindings = /* @__PURE__ */ new WeakMap();
   lifecycleBindings = /* @__PURE__ */ new WeakMap();
   behaviorRegistry = [];
+  behaviorRegistryHashes = /* @__PURE__ */ new Set();
   behaviorBindings = /* @__PURE__ */ new WeakMap();
   behaviorListeners = /* @__PURE__ */ new WeakMap();
   behaviorId = 0;
   codeCache = /* @__PURE__ */ new Map();
   behaviorCache = /* @__PURE__ */ new Map();
   observer;
-  observerRoot;
   attributeHandlers = [];
   globals = {};
   importantFlags = /* @__PURE__ */ new WeakMap();
   inlineDeclarations = /* @__PURE__ */ new WeakMap();
   flagHandlers = /* @__PURE__ */ new Map();
+  behaviorModifiers = /* @__PURE__ */ new Map();
   pendingAdded = /* @__PURE__ */ new Set();
   pendingRemoved = /* @__PURE__ */ new Set();
   pendingUpdated = /* @__PURE__ */ new Set();
@@ -3514,10 +4024,118 @@ var Engine = class _Engine {
   diagnostics;
   logger;
   pendingUses = [];
+  pendingAutoBindToScope = [];
+  scopeWatchers = /* @__PURE__ */ new WeakMap();
+  executionStack = [];
+  groupProxyCache = /* @__PURE__ */ new WeakMap();
   constructor(options = {}) {
     this.diagnostics = options.diagnostics ?? false;
     this.logger = options.logger ?? console;
     this.registerGlobal("console", console);
+    this.registerFlag("important");
+    this.registerFlag("debounce", {
+      onEventBind: ({ args }) => ({
+        debounceMs: typeof args === "number" ? args : 200
+      })
+    });
+    this.registerFlag("prevent", {
+      onEventBefore: ({ event }) => {
+        event?.preventDefault();
+      }
+    });
+    this.registerFlag("stop", {
+      onEventBefore: ({ event }) => {
+        event?.stopPropagation();
+      }
+    });
+    this.registerFlag("self", {
+      onEventBefore: ({ event, element }) => {
+        const target = event?.target;
+        if (!(target instanceof Node)) {
+          return false;
+        }
+        return target === element;
+      }
+    });
+    this.registerFlag("outside", {
+      onEventBind: ({ element }) => ({ listenerTarget: element.ownerDocument }),
+      onEventBefore: ({ event, element }) => {
+        const target = event?.target;
+        if (!(target instanceof Node)) {
+          return false;
+        }
+        return !element.contains(target);
+      }
+    });
+    this.registerFlag("once", {
+      onEventBind: () => ({ options: { once: true } })
+    });
+    this.registerFlag("passive", {
+      onEventBind: () => ({ options: { passive: true } })
+    });
+    this.registerFlag("capture", {
+      onEventBind: () => ({ options: { capture: true } })
+    });
+    this.registerFlag("shift", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "shift")
+    });
+    this.registerFlag("ctrl", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "ctrl")
+    });
+    this.registerFlag("control", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "ctrl")
+    });
+    this.registerFlag("alt", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "alt")
+    });
+    this.registerFlag("meta", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "meta")
+    });
+    this.registerFlag("enter", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "enter")
+    });
+    this.registerFlag("escape", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "escape")
+    });
+    this.registerFlag("esc", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "escape")
+    });
+    this.registerFlag("tab", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "tab")
+    });
+    this.registerFlag("space", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "space")
+    });
+    this.registerFlag("up", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowup")
+    });
+    this.registerFlag("down", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowdown")
+    });
+    this.registerFlag("left", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowleft")
+    });
+    this.registerFlag("right", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowright")
+    });
+    this.registerFlag("arrowup", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowup")
+    });
+    this.registerFlag("arrowdown", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowdown")
+    });
+    this.registerFlag("arrowleft", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowleft")
+    });
+    this.registerFlag("arrowright", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "arrowright")
+    });
+    this.registerFlag("delete", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "delete")
+    });
+    this.registerFlag("backspace", {
+      onEventBefore: ({ event }) => this.matchesKeyFlag(event, "backspace")
+    });
     this.registerGlobal("list", {
       async map(items, fn) {
         if (!Array.isArray(items) || typeof fn !== "function") {
@@ -3555,6 +4173,96 @@ var Engine = class _Engine {
       }
     });
     this.registerDefaultAttributeHandlers();
+    this.registerFlag("int", {
+      transformValue: (_context, value) => this.coerceInt(value)
+    });
+    this.registerFlag("float", {
+      transformValue: (_context, value) => this.coerceFloat(value)
+    });
+    this.registerBehaviorModifier("group", {
+      onConstruct: ({ args, scope, rootScope, behavior, element }) => {
+        const key = typeof args === "string" ? args : void 0;
+        if (!key) {
+          return;
+        }
+        const targetScope = this.getGroupTargetScope(element, behavior, scope, rootScope);
+        const existing = targetScope.getPath?.(key);
+        const list = Array.isArray(existing) ? existing : [];
+        const proxy = this.getGroupProxy(scope);
+        if (!list.includes(proxy)) {
+          list.push(proxy);
+          targetScope.setPath?.(key, list);
+        } else if (!Array.isArray(existing)) {
+          targetScope.setPath?.(key, list);
+        }
+      },
+      onUnbind: ({ args, scope, rootScope, behavior, element }) => {
+        const key = typeof args === "string" ? args : void 0;
+        if (!key) {
+          return;
+        }
+        const targetScope = this.getGroupTargetScope(element, behavior, scope, rootScope);
+        const existing = targetScope.getPath?.(key);
+        if (!Array.isArray(existing)) {
+          return;
+        }
+        const proxy = this.getGroupProxy(scope);
+        const next = existing.filter((entry) => entry !== proxy);
+        if (next.length !== existing.length) {
+          targetScope.setPath?.(key, next);
+        }
+      }
+    });
+  }
+  getGroupTargetScope(element, behavior, scope, rootScope) {
+    let targetScope = rootScope ?? scope;
+    if (behavior.parentSelector) {
+      const parentElement = element.closest(behavior.parentSelector);
+      if (parentElement) {
+        targetScope = this.getScope(parentElement);
+      }
+    }
+    return targetScope;
+  }
+  getGroupProxy(scope) {
+    const cached = this.groupProxyCache.get(scope);
+    if (cached) {
+      return cached;
+    }
+    const proxy = new Proxy(
+      {},
+      {
+        get: (_target, prop) => {
+          if (typeof prop === "symbol") {
+            return void 0;
+          }
+          if (prop === "__scope") {
+            return scope;
+          }
+          return scope.getPath(String(prop));
+        },
+        set: (_target, prop, value) => {
+          if (typeof prop === "symbol") {
+            return false;
+          }
+          scope.setPath(String(prop), value);
+          return true;
+        },
+        has: (_target, prop) => {
+          if (typeof prop === "symbol") {
+            return false;
+          }
+          return scope.getPath(String(prop)) !== void 0;
+        },
+        getOwnPropertyDescriptor: () => ({
+          enumerable: true,
+          configurable: true
+        }),
+        ownKeys: () => []
+      }
+    );
+    this.groupProxyCache.set(scope, proxy);
+    return proxy;
   }
   async mount(root) {
     const documentRoot = root.ownerDocument;
@@ -3581,7 +4289,10 @@ var Engine = class _Engine {
     this.disconnectObserver();
   }
   registerBehaviors(source) {
-    const program = new Parser(source, { customFlags: new Set(this.flagHandlers.keys()) }).parseProgram();
+    const program = new Parser(source, {
+      customFlags: new Set(this.flagHandlers.keys()),
+      behaviorFlags: new Set(this.behaviorModifiers.keys())
+    }).parseProgram();
     for (const use of program.uses) {
       if (use.flags?.wait) {
         this.pendingUses.push(this.waitForUseGlobal(use));
@@ -3605,11 +4316,14 @@ var Engine = class _Engine {
     Object.assign(this.globals, values);
   }
   registerFlag(name, handler = {}) {
-    const reserved = /* @__PURE__ */ new Set(["important", "trusted", "debounce"]);
+    this.flagHandlers.set(name, handler);
+  }
+  registerBehaviorModifier(name, handler = {}) {
+    const reserved = /* @__PURE__ */ new Set(["important", "debounce"]);
     if (reserved.has(name)) {
-      throw new Error(`Flag '${name}' is reserved`);
+      throw new Error(`Behavior modifier '${name}' is reserved`);
     }
-    this.flagHandlers.set(name, handler);
+    this.behaviorModifiers.set(name, handler);
   }
   getRegistryStats() {
     return {
@@ -3707,17 +4421,14 @@ var Engine = class _Engine {
     }
     const htmlBinding = this.htmlBindings.get(element);
     if (htmlBinding && element instanceof HTMLElement) {
-      applyHtml(element, htmlBinding.expr, scope, htmlBinding.trusted);
-      if (htmlBinding.trusted) {
-        this.handleTrustedHtml(element);
-      }
+      applyHtml(element, htmlBinding.expr, scope);
+      this.handleHtmlBehaviors(element);
     }
   }
   attachObserver(root) {
     if (this.observer) {
       return;
     }
-    this.observerRoot = root;
     this.observerFlush = debounce(() => this.flushObserverQueue(), 10);
     this.observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
@@ -3747,7 +4458,6 @@ var Engine = class _Engine {
   disconnectObserver() {
     this.observer?.disconnect();
     this.observer = void 0;
-    this.observerRoot = void 0;
     this.pendingAdded.clear();
     this.pendingRemoved.clear();
     this.pendingUpdated.clear();
@@ -3776,6 +4486,8 @@ var Engine = class _Engine {
     if (this.behaviorBindings.has(node)) {
       this.runBehaviorDestruct(node);
     }
+    this.cleanupScopeWatchers(node);
+    this.cleanupBehaviorListeners(node);
     for (const child of Array.from(node.querySelectorAll("*"))) {
       if (this.lifecycleBindings.has(child)) {
         this.runDestruct(child);
@@ -3783,6 +4495,8 @@ var Engine = class _Engine {
       if (this.behaviorBindings.has(child)) {
         this.runBehaviorDestruct(child);
       }
+      this.cleanupScopeWatchers(child);
+      this.cleanupBehaviorListeners(child);
     }
   }
   handleAddedNode(node) {
@@ -3806,13 +4520,13 @@ var Engine = class _Engine {
   }
   async applyBehaviors(root) {
     await this.waitForUses();
-    if (this.behaviorRegistry.length === 0) {
-      return;
-    }
-    const elements = [root, ...Array.from(root.querySelectorAll("*"))];
-    for (const element of elements) {
-      await this.reapplyBehaviorsForElement(element);
+    if (this.behaviorRegistry.length > 0) {
+      const elements = [root, ...Array.from(root.querySelectorAll("*"))];
+      for (const element of elements) {
+        await this.reapplyBehaviorsForElement(element);
+      }
     }
+    this.flushAutoBindQueue();
   }
   async reapplyBehaviorsForElement(element) {
     if (this.behaviorRegistry.length === 0) {
@@ -3844,15 +4558,18 @@ var Engine = class _Engine {
     const rootScope = this.getBehaviorRootScope(element, behavior);
     this.applyBehaviorFunctions(element, scope, behavior.functions, rootScope);
     await this.applyBehaviorDeclarations(element, scope, behavior.declarations, rootScope);
+    await this.applyBehaviorModifierHook("onBind", behavior, element, scope, rootScope);
     if (behavior.construct) {
       await this.safeExecuteBlock(behavior.construct, scope, element, rootScope);
     }
+    await this.applyBehaviorModifierHook("onConstruct", behavior, element, scope, rootScope);
     for (const onBlock of behavior.onBlocks) {
       this.attachBehaviorOnHandler(
         element,
         onBlock.event,
         onBlock.body,
-        onBlock.modifiers,
+        onBlock.flags,
+        onBlock.flagArgs,
         onBlock.args,
         behavior.id,
         rootScope
@@ -3862,10 +4579,11 @@ var Engine = class _Engine {
   }
   unbindBehaviorForElement(behavior, element, scope, bound) {
     bound.delete(behavior.id);
+    const rootScope = this.getBehaviorRootScope(element, behavior);
     if (behavior.destruct) {
-      const rootScope = this.getBehaviorRootScope(element, behavior);
       void this.safeExecuteBlock(behavior.destruct, scope, element, rootScope);
     }
+    void this.applyBehaviorModifierHook("onDestruct", behavior, element, scope, rootScope);
     const listenerMap = this.behaviorListeners.get(element);
     const listeners = listenerMap?.get(behavior.id);
     if (listeners) {
@@ -3874,6 +4592,7 @@ var Engine = class _Engine {
       }
       listenerMap?.delete(behavior.id);
     }
+    void this.applyBehaviorModifierHook("onUnbind", behavior, element, scope, rootScope);
     this.logDiagnostic("unbind", element, behavior);
   }
   runBehaviorDestruct(element) {
@@ -3883,11 +4602,15 @@ var Engine = class _Engine {
     }
     const scope = this.getScope(element);
     for (const behavior of this.behaviorRegistry) {
-      if (!bound.has(behavior.id) || !behavior.destruct) {
+      if (!bound.has(behavior.id) || !behavior.destruct && !this.behaviorHasModifierHooks(behavior)) {
         continue;
       }
       const rootScope = this.getBehaviorRootScope(element, behavior);
-      void this.safeExecuteBlock(behavior.destruct, scope, element, rootScope);
+      if (behavior.destruct) {
+        void this.safeExecuteBlock(behavior.destruct, scope, element, rootScope);
+      }
+      void this.applyBehaviorModifierHook("onDestruct", behavior, element, scope, rootScope);
+      void this.applyBehaviorModifierHook("onUnbind", behavior, element, scope, rootScope);
     }
   }
   attachAttributes(element) {
@@ -3971,6 +4694,7 @@ var Engine = class _Engine {
       const fragment = element.content.cloneNode(true);
       const roots = Array.from(fragment.children);
       const itemScope = new Scope(scope);
+      itemScope.isEachItem = true;
       itemScope.setPath(`self.${binding.itemName}`, item);
       if (binding.indexName) {
         itemScope.setPath(`self.${binding.indexName}`, index);
@@ -4009,7 +4733,93 @@ var Engine = class _Engine {
     if (name.includes(":to")) {
       return "to";
     }
-    return "both";
+    return "auto";
+  }
+  resolveBindConfig(element, expr, scope, direction) {
+    if (direction !== "auto") {
+      return {
+        direction,
+        seedFromScope: false,
+        syncToScope: direction === "to" || direction === "both",
+        deferToScope: false
+      };
+    }
+    if (this.isInEachScope(scope)) {
+      return { direction: "both", seedFromScope: false, syncToScope: false, deferToScope: false };
+    }
+    if (this.isFormControl(element)) {
+      if (this.hasScopeValue(scope, expr)) {
+        return { direction: "both", seedFromScope: true, syncToScope: false, deferToScope: false };
+      }
+      return { direction: "both", seedFromScope: false, syncToScope: false, deferToScope: true };
+    }
+    if (this.hasScopeValue(scope, expr)) {
+      return { direction: "both", seedFromScope: false, syncToScope: false, deferToScope: false };
+    }
+    if (this.hasElementValue(element)) {
+      return { direction: "both", seedFromScope: false, syncToScope: false, deferToScope: true };
+    }
+    return { direction: "both", seedFromScope: false, syncToScope: false, deferToScope: false };
+  }
+  isFormControl(element) {
+    return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement;
+  }
+  hasScopeValue(scope, expr) {
+    const key = expr.trim();
+    if (!key) {
+      return false;
+    }
+    const value = scope.get(key);
+    return value !== void 0 && value !== null;
+  }
+  hasElementValue(element) {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      return element.value.length > 0;
+    }
+    return (element.textContent ?? "").trim().length > 0;
+  }
+  coerceInt(value) {
+    if (value == null || value === "") {
+      return value;
+    }
+    const num = typeof value === "number" ? value : Number.parseInt(String(value), 10);
+    return Number.isNaN(num) ? value : num;
+  }
+  coerceFloat(value) {
+    if (value == null || value === "") {
+      return value;
+    }
+    const num = typeof value === "number" ? value : Number.parseFloat(String(value));
+    return Number.isNaN(num) ? value : num;
+  }
+  isInEachScope(scope) {
+    let cursor = scope;
+    while (cursor) {
+      if (cursor.isEachItem) {
+        return true;
+      }
+      cursor = cursor.parent;
+    }
+    return false;
+  }
+  flushAutoBindQueue() {
+    if (this.pendingAutoBindToScope.length === 0) {
+      return;
+    }
+    const pending = this.pendingAutoBindToScope;
+    this.pendingAutoBindToScope = [];
+    for (const entry of pending) {
+      if (!entry.element.isConnected) {
+        continue;
+      }
+      if (this.hasScopeValue(entry.scope, entry.expr)) {
+        continue;
+      }
+      if (!this.hasElementValue(entry.element)) {
+        continue;
+      }
+      applyBindToScope(entry.element, entry.expr, entry.scope);
+    }
   }
   hasVsnAttributes(element) {
     return element.getAttributeNames().some((name) => name.startsWith("vsn-"));
@@ -4034,7 +4844,7 @@ var Engine = class _Engine {
     }
     return void 0;
   }
-  watch(scope, expr, handler) {
+  watch(scope, expr, handler, element) {
     const key = expr.trim();
     if (!key) {
       return;
@@ -4049,29 +4859,70 @@ var Engine = class _Engine {
     }
     if (target) {
       target.on(key, handler);
+      if (element) {
+        this.trackScopeWatcher(element, target, "path", handler, key);
+      }
       return;
     }
     let cursor = scope;
     while (cursor) {
       cursor.on(key, handler);
+      if (element) {
+        this.trackScopeWatcher(element, cursor, "path", handler, key);
+      }
       cursor = cursor.parent;
     }
   }
-  watchWithDebounce(scope, expr, handler, debounceMs) {
-    if (debounceMs) {
-      this.watch(scope, expr, debounce(handler, debounceMs));
-    } else {
-      this.watch(scope, expr, handler);
-    }
+  watchWithDebounce(scope, expr, handler, debounceMs, element) {
+    const effectiveHandler = debounceMs ? debounce(handler, debounceMs) : handler;
+    this.watch(scope, expr, effectiveHandler, element);
   }
-  watchAllScopes(scope, handler, debounceMs) {
+  watchAllScopes(scope, handler, debounceMs, element) {
     const effectiveHandler = debounceMs ? debounce(handler, debounceMs) : handler;
     let cursor = scope;
     while (cursor) {
       cursor.onAny(effectiveHandler);
+      if (element) {
+        this.trackScopeWatcher(element, cursor, "any", effectiveHandler);
+      }
       cursor = cursor.parent;
     }
   }
+  trackScopeWatcher(element, scope, kind, handler, key) {
+    const watchers = this.scopeWatchers.get(element) ?? [];
+    watchers.push({ scope, kind, handler, ...key ? { key } : {} });
+    this.scopeWatchers.set(element, watchers);
+  }
+  cleanupScopeWatchers(element) {
+    const watchers = this.scopeWatchers.get(element);
+    if (!watchers) {
+      return;
+    }
+    for (const watcher of watchers) {
+      if (watcher.kind === "any") {
+        watcher.scope.offAny(watcher.handler);
+        continue;
+      }
+      if (watcher.key) {
+        watcher.scope.off(watcher.key, watcher.handler);
+      }
+    }
+    this.scopeWatchers.delete(element);
+  }
+  cleanupBehaviorListeners(element) {
+    const listenerMap = this.behaviorListeners.get(element);
+    if (!listenerMap) {
+      return;
+    }
+    for (const listeners of listenerMap.values()) {
+      for (const listener of listeners) {
+        listener.target.removeEventListener(listener.event, listener.handler, listener.options);
+      }
+    }
+    listenerMap.clear();
+    this.behaviorListeners.delete(element);
+    this.behaviorBindings.delete(element);
+  }
   parseOnAttribute(name, value) {
     if (!name.startsWith("vsn-on:")) {
       return null;
@@ -4081,111 +4932,56 @@ var Engine = class _Engine {
     if (!event) {
       return null;
     }
-    const descriptor = this.parseEventDescriptor(event);
-    if (!descriptor.event) {
-      return null;
-    }
-    let debounceMs;
-    const modifiers = [];
-    for (const flag of flags) {
-      if (flag.startsWith("debounce")) {
-        const match = flag.match(/debounce\((\d+)\)/);
-        debounceMs = match ? Number(match[1]) : 200;
-        continue;
-      }
-      modifiers.push(flag);
+    if (event.includes(".")) {
+      throw new Error("vsn:on does not support dot modifiers; use !flags instead");
     }
-    const combinedModifiers = [...modifiers, ...descriptor.modifiers];
+    const { flagMap, flagArgs } = this.parseInlineFlags(flags);
     const config = {
-      event: descriptor.event,
+      event,
       code: value,
-      ...debounceMs !== void 0 ? { debounceMs } : {},
-      ...combinedModifiers.length > 0 ? { modifiers: combinedModifiers } : {},
-      ...descriptor.keyModifiers.length > 0 ? { keyModifiers: descriptor.keyModifiers } : {}
+      flags: flagMap,
+      flagArgs
     };
     return config;
   }
-  parseEventDescriptor(raw) {
-    const parts = raw.split(".").map((part) => part.trim()).filter(Boolean);
-    const event = parts.shift() ?? "";
-    const modifiers = [];
-    const keyModifiers = [];
-    const modifierSet = /* @__PURE__ */ new Set(["outside", "self"]);
-    for (const part of parts) {
-      if (modifierSet.has(part)) {
-        modifiers.push(part);
-      } else {
-        keyModifiers.push(part);
+  parseInlineFlags(parts) {
+    const flagMap = {};
+    const flagArgs = {};
+    for (const raw of parts) {
+      const trimmed = raw.trim();
+      if (!trimmed) {
+        continue;
       }
-    }
-    return { event, keyModifiers, modifiers };
-  }
-  matchesKeyModifiers(event, keyModifiers) {
-    if (!keyModifiers || keyModifiers.length === 0) {
-      return true;
-    }
-    if (!(event instanceof KeyboardEvent)) {
-      return false;
-    }
-    const modifierChecks = {
-      shift: event.shiftKey,
-      ctrl: event.ctrlKey,
-      control: event.ctrlKey,
-      alt: event.altKey,
-      meta: event.metaKey
-    };
-    const keyAliases = {
-      esc: "escape",
-      escape: "escape",
-      enter: "enter",
-      tab: "tab",
-      space: "space",
-      spacebar: "space",
-      up: "arrowup",
-      down: "arrowdown",
-      left: "arrowleft",
-      right: "arrowright",
-      arrowup: "arrowup",
-      arrowdown: "arrowdown",
-      arrowleft: "arrowleft",
-      arrowright: "arrowright",
-      delete: "delete",
-      backspace: "backspace"
-    };
-    let key = event.key?.toLowerCase() ?? "";
-    if (key === " ") {
-      key = "space";
-    }
-    for (const rawModifier of keyModifiers) {
-      const modifier = rawModifier.toLowerCase();
-      if (modifier in modifierChecks) {
-        if (!modifierChecks[modifier]) {
-          return false;
-        }
+      const match = trimmed.match(/^([a-zA-Z][\w-]*)(?:\((.+)\))?$/);
+      if (!match) {
         continue;
       }
-      const expectedKey = keyAliases[modifier] ?? modifier;
-      if (key !== expectedKey) {
-        return false;
+      const name = match[1] ?? "";
+      if (!name) {
+        continue;
+      }
+      if (!this.flagHandlers.has(name)) {
+        throw new Error(`Unknown flag ${name}`);
+      }
+      flagMap[name] = true;
+      if (match[2] !== void 0) {
+        flagArgs[name] = this.parseInlineFlagArg(match[2]);
       }
     }
-    return true;
+    return { flagMap, flagArgs };
   }
-  matchesTargetModifiers(element, event, modifiers) {
-    if (!modifiers || modifiers.length === 0) {
+  parseInlineFlagArg(raw) {
+    const trimmed = raw.trim();
+    if (trimmed === "true") {
       return true;
     }
-    const target = event?.target;
-    if (!target || !(target instanceof Node)) {
-      return !modifiers.includes("self") && !modifiers.includes("outside");
-    }
-    if (modifiers.includes("self") && target !== element) {
+    if (trimmed === "false") {
       return false;
     }
-    if (modifiers.includes("outside") && element.contains(target)) {
-      return false;
+    if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+      return Number(trimmed);
     }
-    return true;
+    return trimmed;
   }
   describeElement(element) {
     const tag = element.tagName.toLowerCase();
@@ -4227,51 +5023,50 @@ var Engine = class _Engine {
     }
   }
   attachOnHandler(element, config) {
-    const options = this.getListenerOptions(config.modifiers);
-    const listenerTarget = config.modifiers?.includes("outside") ? element.ownerDocument : element;
+    const { listenerTarget, options, debounceMs } = this.getEventBindingConfig(
+      element,
+      config.flags,
+      config.flagArgs
+    );
     let effectiveHandler;
     const handler = async (event) => {
       if (!element.isConnected) {
         listenerTarget.removeEventListener(config.event, effectiveHandler, options);
         return;
       }
-      if (!this.matchesKeyModifiers(event, config.keyModifiers)) {
-        return;
-      }
-      if (!this.matchesTargetModifiers(element, event, config.modifiers)) {
+      const scope = this.getScope(element);
+      if (!this.applyEventFlagBefore(element, scope, config.flags, config.flagArgs, event)) {
         return;
       }
-      this.applyEventModifiers(event, config.modifiers);
-      const scope = this.getScope(element);
       try {
         await this.execute(config.code, scope, element);
         this.evaluate(element);
       } catch (error) {
         this.emitError(element, error);
+      } finally {
+        this.applyEventFlagAfter(element, scope, config.flags, config.flagArgs, event);
       }
     };
-    effectiveHandler = config.debounceMs ? debounce(handler, config.debounceMs) : handler;
+    effectiveHandler = debounceMs ? debounce(handler, debounceMs) : handler;
     listenerTarget.addEventListener(config.event, effectiveHandler, options);
   }
-  attachBehaviorOnHandler(element, event, body, modifiers, args, behaviorId, rootScope) {
-    const descriptor = this.parseEventDescriptor(event);
-    const combinedModifiers = modifiers ? [...modifiers, ...descriptor.modifiers] : descriptor.modifiers.length > 0 ? [...descriptor.modifiers] : void 0;
-    const listenerTarget = combinedModifiers?.includes("outside") ? element.ownerDocument : element;
+  attachBehaviorOnHandler(element, event, body, flags, flagArgs, args, behaviorId, rootScope) {
+    if (event.includes(".")) {
+      throw new Error("vsn:on does not support dot modifiers; use !flags instead");
+    }
+    const { listenerTarget, options, debounceMs } = this.getEventBindingConfig(element, flags, flagArgs);
     const handler = async (evt) => {
-      if (!this.matchesKeyModifiers(evt, descriptor.keyModifiers)) {
-        return;
-      }
-      if (!this.matchesTargetModifiers(element, evt, combinedModifiers)) {
+      const scope = this.getScope(element);
+      if (!this.applyEventFlagBefore(element, scope, flags, flagArgs, evt)) {
         return;
       }
-      this.applyEventModifiers(evt, combinedModifiers);
-      const scope = this.getScope(element);
       const previousValues = /* @__PURE__ */ new Map();
       if (args && args.length > 0) {
         const argName = args[0];
         if (argName) {
           previousValues.set(argName, scope.getPath(argName));
-          scope.setPath(argName, evt);
+          const [nextArg] = this.applyEventFlagArgTransforms(element, scope, flags, flagArgs, evt);
+          scope.setPath(argName, nextArg);
         }
       }
       let failed = false;
@@ -4284,16 +5079,17 @@ var Engine = class _Engine {
         for (const [name, value] of previousValues.entries()) {
           scope.setPath(name, value);
         }
+        this.applyEventFlagAfter(element, scope, flags, flagArgs, evt);
       }
       if (!failed) {
         this.evaluate(element);
       }
     };
-    const options = this.getListenerOptions(combinedModifiers);
-    listenerTarget.addEventListener(descriptor.event, handler, options);
+    const effectiveHandler = debounceMs ? debounce(handler, debounceMs) : handler;
+    listenerTarget.addEventListener(event, effectiveHandler, options);
     const listenerMap = this.behaviorListeners.get(element) ?? /* @__PURE__ */ new Map();
     const listeners = listenerMap.get(behaviorId) ?? [];
-    listeners.push({ target: listenerTarget, event: descriptor.event, handler, options });
+    listeners.push({ target: listenerTarget, event, handler: effectiveHandler, options });
     listenerMap.set(behaviorId, listeners);
     this.behaviorListeners.set(element, listenerMap);
   }
@@ -4305,9 +5101,7 @@ var Engine = class _Engine {
       }
       try {
         await applyGet(element, config, this.getScope(element), (target) => {
-          if (config.trusted) {
-            this.handleTrustedHtml(target);
-          }
+          this.handleHtmlBehaviors(target);
         });
       } catch (error) {
         console.warn("vsn:getError", error);
@@ -4324,33 +5118,158 @@ var Engine = class _Engine {
       Promise.resolve().then(handler);
     }
   }
-  applyEventModifiers(event, modifiers) {
-    if (!event || !modifiers || modifiers.length === 0) {
-      return;
+  getEventBindingConfig(element, flags, flagArgs) {
+    let listenerTarget = element;
+    let options = {};
+    let debounceMs;
+    for (const name of Object.keys(flags)) {
+      const handler = this.flagHandlers.get(name);
+      if (!handler?.onEventBind) {
+        continue;
+      }
+      const patch = handler.onEventBind({
+        name,
+        args: flagArgs[name],
+        element,
+        scope: this.getScope(element),
+        rootScope: void 0,
+        event: void 0,
+        engine: this
+      });
+      if (!patch) {
+        continue;
+      }
+      if (patch.listenerTarget) {
+        listenerTarget = patch.listenerTarget;
+      }
+      if (patch.options) {
+        options = { ...options, ...patch.options };
+      }
+      if (patch.debounceMs !== void 0) {
+        debounceMs = patch.debounceMs;
+      }
+    }
+    return {
+      listenerTarget,
+      ...Object.keys(options).length > 0 ? { options } : {},
+      ...debounceMs !== void 0 ? { debounceMs } : {}
+    };
+  }
+  applyEventFlagBefore(element, scope, flags, flagArgs, event) {
+    for (const name of Object.keys(flags)) {
+      const handler = this.flagHandlers.get(name);
+      if (!handler?.onEventBefore) {
+        continue;
+      }
+      const result = handler.onEventBefore({
+        name,
+        args: flagArgs[name],
+        element,
+        scope,
+        rootScope: void 0,
+        event,
+        engine: this
+      });
+      if (result === false) {
+        return false;
+      }
     }
-    for (const modifier of modifiers) {
-      if (modifier === "prevent") {
-        event.preventDefault();
-      } else if (modifier === "stop") {
-        event.stopPropagation();
+    return true;
+  }
+  applyEventFlagAfter(element, scope, flags, flagArgs, event) {
+    for (const name of Object.keys(flags)) {
+      const handler = this.flagHandlers.get(name);
+      if (!handler?.onEventAfter) {
+        continue;
       }
+      handler.onEventAfter({
+        name,
+        args: flagArgs[name],
+        element,
+        scope,
+        rootScope: void 0,
+        event,
+        engine: this
+      });
     }
   }
-  getListenerOptions(modifiers) {
-    if (!modifiers || modifiers.length === 0) {
-      return void 0;
+  applyEventFlagArgTransforms(element, scope, flags, flagArgs, event) {
+    let args = [event];
+    for (const name of Object.keys(flags)) {
+      const handler = this.flagHandlers.get(name);
+      if (!handler?.transformEventArgs) {
+        continue;
+      }
+      const nextArgs = handler.transformEventArgs(
+        {
+          name,
+          args: flagArgs[name],
+          element,
+          scope,
+          rootScope: void 0,
+          event,
+          engine: this
+        },
+        args
+      );
+      if (Array.isArray(nextArgs)) {
+        args = nextArgs;
+      }
     }
-    const options = {};
-    if (modifiers.includes("once")) {
-      options.once = true;
+    return args;
+  }
+  matchesKeyFlag(event, flag) {
+    if (!(event instanceof KeyboardEvent)) {
+      return false;
+    }
+    const modifierChecks = {
+      shift: event.shiftKey,
+      ctrl: event.ctrlKey,
+      alt: event.altKey,
+      meta: event.metaKey
+    };
+    if (flag in modifierChecks) {
+      return modifierChecks[flag] ?? false;
+    }
+    const keyAliases = {
+      escape: "escape",
+      esc: "escape",
+      enter: "enter",
+      tab: "tab",
+      space: "space",
+      spacebar: "space",
+      up: "arrowup",
+      down: "arrowdown",
+      left: "arrowleft",
+      right: "arrowright",
+      arrowup: "arrowup",
+      arrowdown: "arrowdown",
+      arrowleft: "arrowleft",
+      arrowright: "arrowright",
+      delete: "delete",
+      backspace: "backspace"
+    };
+    let key = event.key?.toLowerCase() ?? "";
+    if (key === " ") {
+      key = "space";
     }
-    if (modifiers.includes("passive")) {
-      options.passive = true;
+    const expectedKey = keyAliases[flag] ?? flag;
+    return key === expectedKey;
+  }
+  async withExecutionElement(element, fn) {
+    if (!element) {
+      await fn();
+      return;
     }
-    if (modifiers.includes("capture")) {
-      options.capture = true;
+    this.executionStack.push(element);
+    try {
+      await fn();
+    } finally {
+      this.executionStack.pop();
     }
-    return Object.keys(options).length > 0 ? options : void 0;
+  }
+  getCurrentElement() {
+    return this.executionStack[this.executionStack.length - 1];
   }
   async execute(code, scope, element, rootScope) {
     let block = this.codeCache.get(code);
@@ -4358,22 +5277,26 @@ var Engine = class _Engine {
       block = Parser.parseInline(code);
       this.codeCache.set(code, block);
     }
-    const context = {
-      scope,
-      rootScope,
-      globals: this.globals,
-      ...element ? { element } : {}
-    };
-    await block.evaluate(context);
+    await this.withExecutionElement(element, async () => {
+      const context = {
+        scope,
+        rootScope,
+        globals: this.globals,
+        ...element ? { element } : {}
+      };
+      await block.evaluate(context);
+    });
   }
   async executeBlock(block, scope, element, rootScope) {
-    const context = {
-      scope,
-      rootScope,
-      globals: this.globals,
-      ...element ? { element } : {}
-    };
-    await block.evaluate(context);
+    await this.withExecutionElement(element, async () => {
+      const context = {
+        scope,
+        rootScope,
+        globals: this.globals,
+        ...element ? { element } : {}
+      };
+      await block.evaluate(context);
+    });
   }
   async safeExecute(code, scope, element, rootScope) {
     try {
@@ -4396,15 +5319,26 @@ var Engine = class _Engine {
   collectBehavior(behavior, parentSelector, rootSelectorOverride) {
     const selector = parentSelector ? `${parentSelector} ${behavior.selector.selectorText}` : behavior.selector.selectorText;
     const rootSelector = rootSelectorOverride ?? (parentSelector ?? behavior.selector.selectorText);
+    const behaviorHash = this.hashBehavior(behavior);
+    const hash = `${selector}::${rootSelector}::${behaviorHash}`;
+    if (this.behaviorRegistryHashes.has(hash)) {
+      return;
+    }
     const cached = this.getCachedBehavior(behavior);
-    this.behaviorRegistry.push({
+    const entry = {
       id: this.behaviorId += 1,
+      hash,
       selector,
       rootSelector,
       specificity: this.computeSpecificity(selector),
       order: this.behaviorRegistry.length,
-      ...cached
-    });
+      flags: behavior.flags ?? {},
+      flagArgs: behavior.flagArgs ?? {},
+      ...cached,
+      ...parentSelector ? { parentSelector } : {}
+    };
+    this.behaviorRegistry.push(entry);
+    this.behaviorRegistryHashes.add(hash);
     this.collectNestedBehaviors(behavior.body, selector, rootSelector);
   }
   collectNestedBehaviors(block, parentSelector, rootSelector) {
@@ -4477,7 +5411,8 @@ var Engine = class _Engine {
         blocks.push({
           event: statement.eventName,
           body: statement.body,
-          modifiers: statement.modifiers,
+          flags: statement.flags,
+          flagArgs: statement.flagArgs,
           args: statement.args
         });
       }
@@ -4542,6 +5477,8 @@ var Engine = class _Engine {
       return {
         type,
         selector: node.selector?.selectorText ?? "",
+        flags: node.flags ?? {},
+        flagArgs: node.flagArgs ?? {},
         body: this.normalizeNode(node.body)
       };
     }
@@ -4559,6 +5496,8 @@ var Engine = class _Engine {
         type,
         eventName: node.eventName ?? "",
         args: Array.isArray(node.args) ? node.args : [],
+        flags: node.flags ?? {},
+        flagArgs: node.flagArgs ?? {},
         body: this.normalizeNode(node.body)
       };
     }
@@ -4576,21 +5515,9 @@ var Engine = class _Engine {
       return {
         type,
         target: this.normalizeNode(node.target),
-        value: this.normalizeNode(node.value)
-      };
-    }
-    if (type === "StateBlock") {
-      return {
-        type,
-        entries: Array.isArray(node.entries) ? node.entries.map((entry) => this.normalizeNode(entry)) : []
-      };
-    }
-    if (type === "StateEntry") {
-      return {
-        type,
-        name: node.name ?? "",
         value: this.normalizeNode(node.value),
-        important: Boolean(node.important)
+        operator: node.operator ?? "",
+        prefix: Boolean(node.prefix)
       };
     }
     if (type === "FunctionDeclaration") {
@@ -4624,6 +5551,15 @@ var Engine = class _Engine {
         value: this.normalizeNode(node.value ?? null)
       };
     }
+    if (type === "Assert") {
+      return {
+        type,
+        test: this.normalizeNode(node.test)
+      };
+    }
+    if (type === "Break" || type === "Continue") {
+      return { type };
+    }
     if (type === "If") {
       return {
         type,
@@ -4648,6 +5584,15 @@ var Engine = class _Engine {
         body: this.normalizeNode(node.body)
       };
     }
+    if (type === "ForEach") {
+      return {
+        type,
+        kind: node.kind ?? "of",
+        target: this.normalizeNode(node.target),
+        iterable: this.normalizeNode(node.iterable),
+        body: this.normalizeNode(node.body)
+      };
+    }
     if (type === "Try") {
       return {
         type,
@@ -4770,7 +5715,9 @@ var Engine = class _Engine {
         globals: this.globals,
         element,
         returnValue: void 0,
-        returning: false
+        returning: false,
+        breaking: false,
+        continuing: false
       };
       const previousValues = /* @__PURE__ */ new Map();
       await this.applyFunctionParams(callScope, declaration.params, previousValues, context, args);
@@ -4821,6 +5768,7 @@ var Engine = class _Engine {
     const context = { scope, rootScope, element };
     const operator = declaration.operator;
     const debounceMs = declaration.flags.debounce ? declaration.flagArgs.debounce ?? 200 : void 0;
+    const transform = (value) => this.applyCustomFlagTransforms(value, element, scope, declaration);
     const importantKey = this.getImportantKey(declaration);
     if (!declaration.flags.important && importantKey && this.isImportant(element, importantKey)) {
       return;
@@ -4831,7 +5779,8 @@ var Engine = class _Engine {
     this.applyCustomFlags(element, scope, declaration);
     if (declaration.target instanceof IdentifierExpression) {
       const value = await declaration.value.evaluate(context);
-      scope.setPath(declaration.target.name, value);
+      const transformed = this.applyCustomFlagTransforms(value, element, scope, declaration);
+      scope.setPath(declaration.target.name, transformed);
       if (declaration.flags.important && importantKey) {
         this.markImportant(element, importantKey);
       }
@@ -4844,7 +5793,7 @@ var Engine = class _Engine {
     const exprIdentifier = declaration.value instanceof IdentifierExpression ? declaration.value.name : void 0;
     if (operator === ":>") {
       if (exprIdentifier) {
-        this.applyDirectiveToScope(element, target, exprIdentifier, scope, debounceMs, rootScope);
+        this.applyDirectiveToScope(element, target, exprIdentifier, scope, debounceMs, rootScope, transform);
       }
       if (declaration.flags.important && importantKey) {
         this.markImportant(element, importantKey);
@@ -4852,11 +5801,12 @@ var Engine = class _Engine {
       return;
     }
     if (operator === ":=" && exprIdentifier) {
-      this.applyDirectiveToScope(element, target, exprIdentifier, scope, debounceMs, rootScope);
+      this.applyDirectiveToScope(element, target, exprIdentifier, scope, debounceMs, rootScope, transform);
     }
     if (!exprIdentifier) {
       const value = await declaration.value.evaluate(context);
-      this.setDirectiveValue(element, target, value, declaration.flags.trusted);
+      const transformed = this.applyCustomFlagTransforms(value, element, scope, declaration);
+      this.setDirectiveValue(element, target, transformed);
       const shouldWatch2 = operator === ":<" || operator === ":=";
       if (shouldWatch2) {
         this.applyDirectiveFromExpression(
@@ -4864,7 +5814,6 @@ var Engine = class _Engine {
           target,
           declaration.value,
           scope,
-          declaration.flags.trusted,
           debounceMs,
           rootScope
         );
@@ -4880,7 +5829,6 @@ var Engine = class _Engine {
       target,
       exprIdentifier,
       scope,
-      declaration.flags.trusted,
       debounceMs,
       shouldWatch,
       rootScope
@@ -4906,23 +5854,78 @@ var Engine = class _Engine {
       });
     }
   }
-  applyDirectiveFromScope(element, target, expr, scope, trusted, debounceMs, watch = true, rootScope) {
+  applyCustomFlagTransforms(value, element, scope, declaration) {
+    if (this.flagHandlers.size === 0) {
+      return value;
+    }
+    let nextValue = value;
+    for (const [name, handler] of this.flagHandlers) {
+      if (!declaration.flags[name] || !handler.transformValue) {
+        continue;
+      }
+      nextValue = handler.transformValue(
+        {
+          name,
+          args: declaration.flagArgs[name],
+          element,
+          scope,
+          declaration
+        },
+        nextValue
+      );
+    }
+    return nextValue;
+  }
+  async applyBehaviorModifierHook(hook, behavior, element, scope, rootScope) {
+    if (this.behaviorModifiers.size === 0) {
+      return;
+    }
+    for (const [name, handler] of this.behaviorModifiers) {
+      if (!behavior.flags?.[name]) {
+        continue;
+      }
+      const callback = handler[hook];
+      if (!callback) {
+        continue;
+      }
+      await callback({
+        name,
+        args: behavior.flagArgs?.[name],
+        element,
+        scope,
+        rootScope,
+        behavior,
+        engine: this
+      });
+    }
+  }
+  behaviorHasModifierHooks(behavior) {
+    if (this.behaviorModifiers.size === 0) {
+      return false;
+    }
+    const flags = behavior.flags ?? {};
+    for (const name of Object.keys(flags)) {
+      if (flags[name] && this.behaviorModifiers.has(name)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  applyDirectiveFromScope(element, target, expr, scope, debounceMs, watch = true, rootScope) {
     if (target.kind === "attr" && target.name === "html" && element instanceof HTMLElement) {
       const handler2 = () => {
         const useRoot = expr.startsWith("root.") && rootScope;
         const sourceScope = useRoot ? rootScope : scope;
         const localExpr = useRoot ? `self.${expr.slice("root.".length)}` : expr;
-        applyHtml(element, localExpr, sourceScope, Boolean(trusted));
+        applyHtml(element, localExpr, sourceScope);
       };
       handler2();
-      if (trusted) {
-        this.handleTrustedHtml(element);
-      }
+      this.handleHtmlBehaviors(element);
       if (watch) {
         const useRoot = expr.startsWith("root.") && rootScope;
         const sourceScope = useRoot ? rootScope : scope;
         const watchExpr = useRoot ? expr.slice("root.".length) : expr;
-        this.watchWithDebounce(sourceScope, watchExpr, handler2, debounceMs);
+        this.watchWithDebounce(sourceScope, watchExpr, handler2, debounceMs, element);
       }
       return;
     }
@@ -4934,80 +5937,90 @@ var Engine = class _Engine {
       if (value == null) {
         return;
       }
-      this.setDirectiveValue(element, target, value, trusted);
+      this.setDirectiveValue(element, target, value);
     };
     handler();
     if (watch) {
       const useRoot = expr.startsWith("root.") && rootScope;
       const sourceScope = useRoot ? rootScope : scope;
       const watchExpr = useRoot ? expr.slice("root.".length) : expr;
-      this.watchWithDebounce(sourceScope, watchExpr, handler, debounceMs);
+      this.watchWithDebounce(sourceScope, watchExpr, handler, debounceMs, element);
     }
   }
-  applyDirectiveFromExpression(element, target, expr, scope, trusted, debounceMs, rootScope) {
+  applyDirectiveFromExpression(element, target, expr, scope, debounceMs, rootScope) {
     const handler = async () => {
       const context = { scope, rootScope, element };
       const value = await expr.evaluate(context);
-      this.setDirectiveValue(element, target, value, trusted);
+      this.setDirectiveValue(element, target, value);
     };
     void handler();
     this.watchAllScopes(scope, () => {
       void handler();
-    }, debounceMs);
+    }, debounceMs, element);
   }
-  applyDirectiveToScope(element, target, expr, scope, debounceMs, rootScope) {
+  applyDirectiveToScope(element, target, expr, scope, debounceMs, rootScope, transform) {
     const useRoot = expr.startsWith("root.") && rootScope;
     const targetScope = useRoot ? rootScope : scope;
     const targetExpr = useRoot ? `self.${expr.slice("root.".length)}` : expr;
     if (target.kind === "attr" && target.name === "value") {
-      this.applyValueBindingToScope(element, targetExpr, debounceMs, targetScope);
+      this.applyValueBindingToScope(element, targetExpr, debounceMs, targetScope, transform);
       return;
     }
     if (target.kind === "attr" && target.name === "checked") {
-      this.applyCheckedBindingToScope(element, targetExpr, debounceMs, targetScope);
+      this.applyCheckedBindingToScope(element, targetExpr, debounceMs, targetScope, transform);
       return;
     }
     const value = this.getDirectiveValue(element, target);
     if (value != null) {
-      targetScope.set(targetExpr, value);
+      const nextValue = transform ? transform(value) : value;
+      targetScope.set(targetExpr, nextValue);
     }
   }
-  applyCheckedBindingToScope(element, expr, debounceMs, scope) {
+  applyCheckedBindingToScope(element, expr, debounceMs, scope, transform) {
     if (!(element instanceof HTMLInputElement)) {
       return;
     }
     const handler = () => {
       const targetScope = scope ?? this.getScope(element);
-      targetScope.set(expr, element.checked);
+      const value = transform ? transform(element.checked) : element.checked;
+      targetScope.set(expr, value);
     };
     const effectiveHandler = debounceMs ? debounce(handler, debounceMs) : handler;
     effectiveHandler();
     element.addEventListener("change", effectiveHandler);
     element.addEventListener("input", effectiveHandler);
   }
-  applyValueBindingToScope(element, expr, debounceMs, scope) {
+  applyValueBindingToScope(element, expr, debounceMs, scope, transform) {
     if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {
       return;
     }
     const handler = () => {
       const targetScope = scope ?? this.getScope(element);
-      applyBindToScope(element, expr, targetScope);
+      const value = element.value;
+      const nextValue = transform ? transform(value) : value;
+      targetScope.set(expr, nextValue);
     };
     const effectiveHandler = debounceMs ? debounce(handler, debounceMs) : handler;
     effectiveHandler();
     element.addEventListener("input", effectiveHandler);
     element.addEventListener("change", effectiveHandler);
   }
-  setDirectiveValue(element, target, value, trusted) {
+  setDirectiveValue(element, target, value) {
     if (target.kind === "attr" && target.name === "html" && element instanceof HTMLElement) {
       const html = value == null ? "" : String(value);
-      element.innerHTML = trusted ? html : html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "");
-      if (trusted) {
-        this.handleTrustedHtml(element);
-      }
+      element.innerHTML = html;
+      this.handleHtmlBehaviors(element);
       return;
     }
     if (target.kind === "attr") {
+      if (target.name === "text" && element instanceof HTMLElement) {
+        element.innerText = value == null ? "" : String(value);
+        return;
+      }
+      if (target.name === "content" && element instanceof HTMLElement) {
+        element.textContent = value == null ? "" : String(value);
+        return;
+      }
       if (target.name === "value") {
         if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
           element.value = value == null ? "" : String(value);
@@ -5038,6 +6051,12 @@ var Engine = class _Engine {
   }
   getDirectiveValue(element, target) {
     if (target.kind === "attr") {
+      if (target.name === "text" && element instanceof HTMLElement) {
+        return element.innerText;
+      }
+      if (target.name === "content" && element instanceof HTMLElement) {
+        return element.textContent ?? "";
+      }
       if (target.name === "value") {
         if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
           return element.value;
@@ -5056,7 +6075,7 @@ var Engine = class _Engine {
     }
     return void 0;
   }
-  handleTrustedHtml(root) {
+  handleHtmlBehaviors(root) {
     const scripts = Array.from(root.querySelectorAll('script[type="text/vsn"]'));
     if (scripts.length === 0) {
       return;
@@ -5073,17 +6092,27 @@ var Engine = class _Engine {
       id: "vsn-bind",
       match: (name) => name.startsWith("vsn-bind"),
       handle: (element, name, value, scope) => {
-        const direction = this.parseBindDirection(name);
-        this.bindBindings.set(element, { expr: value, direction });
-        if (direction === "to" || direction === "both") {
+        const parsedDirection = this.parseBindDirection(name);
+        const config = this.resolveBindConfig(element, value, scope, parsedDirection);
+        const direction = config.direction;
+        const auto = parsedDirection === "auto";
+        this.bindBindings.set(element, { expr: value, direction, auto });
+        if (!auto && (direction === "to" || direction === "both")) {
           this.markInlineDeclaration(element, `state:${value}`);
         }
-        if (direction === "to" || direction === "both") {
+        if (config.seedFromScope) {
+          applyBindToElement(element, value, scope);
+        }
+        if (config.deferToScope) {
+          this.pendingAutoBindToScope.push({ element, expr: value, scope });
+        } else if (config.syncToScope) {
           applyBindToScope(element, value, scope);
+        }
+        if (direction === "to" || direction === "both") {
           this.attachBindInputHandler(element, value);
         }
         if (direction === "from" || direction === "both") {
-          this.watch(scope, value, () => applyBindToElement(element, value, scope));
+          this.watch(scope, value, () => applyBindToElement(element, value, scope), element);
         }
       }
     });
@@ -5095,7 +6124,7 @@ var Engine = class _Engine {
         if (element instanceof HTMLElement) {
           applyIf(element, value, scope);
         }
-        this.watch(scope, value, () => this.evaluate(element));
+        this.watch(scope, value, () => this.evaluate(element), element);
       }
     });
     this.registerAttributeHandler({
@@ -5106,23 +6135,20 @@ var Engine = class _Engine {
         if (element instanceof HTMLElement) {
           applyShow(element, value, scope);
         }
-        this.watch(scope, value, () => this.evaluate(element));
+        this.watch(scope, value, () => this.evaluate(element), element);
       }
     });
     this.registerAttributeHandler({
       id: "vsn-html",
       match: (name) => name.startsWith("vsn-html"),
-      handle: (element, name, value, scope) => {
-        const trusted = name.includes("!trusted");
-        this.htmlBindings.set(element, { expr: value, trusted });
+      handle: (element, _name, value, scope) => {
+        this.htmlBindings.set(element, { expr: value });
         this.markInlineDeclaration(element, "attr:html");
         if (element instanceof HTMLElement) {
-          applyHtml(element, value, scope, trusted);
-          if (trusted) {
-            this.handleTrustedHtml(element);
-          }
+          applyHtml(element, value, scope);
+          this.handleHtmlBehaviors(element);
         }
-        this.watch(scope, value, () => this.evaluate(element));
+        this.watch(scope, value, () => this.evaluate(element), element);
       }
     });
     this.registerAttributeHandler({
@@ -5135,14 +6161,13 @@ var Engine = class _Engine {
         }
         this.eachBindings.set(element, { ...config, rendered: [] });
         this.renderEach(element);
-        this.watch(scope, config.listExpr, () => this.renderEach(element));
+        this.watch(scope, config.listExpr, () => this.renderEach(element), element);
       }
     });
     this.registerAttributeHandler({
       id: "vsn-get",
       match: (name) => name.startsWith("vsn-get"),
       handle: (element, name) => {
-        const trusted = name.includes("!trusted");
         const autoLoad = name.includes("!load");
         const url = element.getAttribute(name) ?? "";
         const target = element.getAttribute("vsn-target") ?? void 0;
@@ -5150,7 +6175,6 @@ var Engine = class _Engine {
         const config = {
           url,
           swap,
-          trusted,
           ...target ? { targetSelector: target } : {}
         };
         this.getBindings.set(element, config);
@@ -5190,15 +6214,27 @@ function parseCFS(source) {
   const parser = new Parser(source);
   return parser.parseProgram();
 }
+if (typeof window !== "undefined") {
+  window["parseCFS"] = parseCFS;
+}
 function autoMount(root = document) {
   if (typeof document === "undefined") {
     return null;
   }
   const engine = new Engine();
+  globalThis.VSNEngine = engine;
   const startTime = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
   const mount = () => {
     const target = root instanceof Document ? root.body : root;
     if (target) {
+      const plugins = globalThis.VSNPlugins;
+      if (plugins && typeof plugins === "object") {
+        for (const plugin of Object.values(plugins)) {
+          if (typeof plugin === "function") {
+            plugin(engine);
+          }
+        }
+      }
       const sources = Array.from(document.querySelectorAll('script[type="text/vsn"]')).map((script) => script.textContent ?? "").join("\n");
       if (sources.trim()) {
         engine.registerBehaviors(sources);
@@ -5210,9 +6246,9 @@ function autoMount(root = document) {
     }
   };
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", mount, { once: true });
+    document.addEventListener("DOMContentLoaded", () => setTimeout(mount, 0), { once: true });
   } else {
-    mount();
+    setTimeout(mount, 0);
   }
   return engine;
 }
@@ -5226,16 +6262,21 @@ if (typeof document !== "undefined") {
 0 && (module.exports = {
   ArrayExpression,
   ArrayPattern,
+  AssertError,
+  AssertNode,
   AssignmentNode,
   AwaitExpression,
   BaseNode,
   BehaviorNode,
   BinaryExpression,
   BlockNode,
+  BreakNode,
   CallExpression,
+  ContinueNode,
   DeclarationNode,
   DirectiveExpression,
   Engine,
+  ForEachNode,
   ForNode,
   FunctionDeclarationNode,
   FunctionExpression,
@@ -5255,8 +6296,6 @@ if (typeof document !== "undefined") {
   ReturnNode,
   SelectorNode,
   SpreadElement,
-  StateBlockNode,
-  StateEntryNode,
   TemplateExpression,
   TernaryExpression,
   TokenType,