voodoojs 0.7.0 → 0.10.1

package/dist/index.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * Voodoo.js v0.7.0
+ * Voodoo.js v0.10.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -715,6 +715,7 @@ var init_registry = __esm({
       autoDiscover: true,
       root: null,
       devtools: false,
+      xrayShortcut: "ctrl+shift+f2",
       baseURL: "",
       globals: {},
       locale: typeof navigator !== "undefined" ? navigator.language || "pt-BR" : "pt-BR",
@@ -843,6 +844,7 @@ var PUNCTUATORS = [
   "!==",
   "**=",
   "...",
+  ">>>",
   "<<=",
   ">>=",
   "&&=",
@@ -865,6 +867,11 @@ var PUNCTUATORS = [
   "*=",
   "/=",
   "%=",
+  "&=",
+  "|=",
+  "^=",
+  "<<",
+  ">>",
   "+",
   "-",
   "*",
@@ -874,6 +881,10 @@ var PUNCTUATORS = [
   "<",
   ">",
   "=",
+  "&",
+  "|",
+  "^",
+  "~",
   "(",
   ")",
   "[",
@@ -937,6 +948,10 @@ function tokenize(source) {
         raw = "0b";
         i += 2;
         while (i < len && /[01_]/.test(source[i])) raw += source[i++];
+      } else if (ch === "0" && (source[i + 1] === "o" || source[i + 1] === "O")) {
+        raw = "0o";
+        i += 2;
+        while (i < len && /[0-7_]/.test(source[i])) raw += source[i++];
       } else {
         while (i < len && /[0-9_]/.test(source[i])) raw += source[i++];
         if (source[i] === ".") {
@@ -1093,25 +1108,31 @@ var BINARY_PRECEDENCE = {
   "??": 1,
   "||": 2,
   "&&": 3,
-  "==": 6,
-  "!=": 6,
-  "===": 6,
-  "!==": 6,
-  "<": 7,
-  ">": 7,
-  "<=": 7,
-  ">=": 7,
-  in: 7,
-  instanceof: 7,
-  "+": 9,
-  "-": 9,
-  "*": 10,
-  "/": 10,
-  "%": 10,
-  "**": 11
+  "|": 4,
+  "^": 5,
+  "&": 6,
+  "==": 7,
+  "!=": 7,
+  "===": 7,
+  "!==": 7,
+  "<": 8,
+  ">": 8,
+  "<=": 8,
+  ">=": 8,
+  in: 8,
+  instanceof: 8,
+  "<<": 9,
+  ">>": 9,
+  ">>>": 9,
+  "+": 10,
+  "-": 10,
+  "*": 11,
+  "/": 11,
+  "%": 11,
+  "**": 12
 };
 var ASSIGN_OPS = /* @__PURE__ */ new Set(["=", "+=", "-=", "*=", "/=", "%=", "**=", "&&=", "||=", "??="]);
-var UNARY_OPS = /* @__PURE__ */ new Set(["!", "-", "+", "typeof", "void"]);
+var UNARY_OPS = /* @__PURE__ */ new Set(["!", "-", "+", "~", "typeof", "void", "delete"]);
 var LITERALS = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   true: true,
   false: false,
@@ -1193,6 +1214,13 @@ var Parser = class {
    * language is an expression.
    */
   parseStatement() {
+    if (this.peek().type === "ident" && this.peek().value === "return") {
+      this.next();
+      if (this.isPunct(";") || this.isPunct(",") || this.isPunct("}") || this.peek().type === "eof") {
+        return { t: "return", a: null };
+      }
+      return { t: "return", a: this.parseExpression() };
+    }
     if (this.peek().type === "ident" && this.peek().value === "if" && this.isPunct("(", 1)) {
       this.next();
       this.expect("(");
@@ -1246,7 +1274,7 @@ var Parser = class {
     if (this.peek().type === "ident" && this.isPunct("=>", 1)) {
       const param = this.next().value;
       this.next();
-      return { t: "arrow", params: [param], body: this.parseArrowBody() };
+      return { t: "arrow", params: [{ kind: "id", name: param }], body: this.parseArrowBody() };
     }
     if (this.isPunct("(")) {
       const arrow = this.tryParseParenArrow();
@@ -1283,19 +1311,108 @@ var Parser = class {
     const after = this.tokens[i + 1];
     if (!after || after.type !== "punct" || after.value !== "=>") return null;
     this.next();
+    let params;
+    try {
+      params = this.parseParamList();
+    } catch {
+      this.pos = start2;
+      return null;
+    }
+    this.expect("=>");
+    return { t: "arrow", params, body: this.parseArrowBody() };
+  }
+  /** Parameters up to the closing parenthesis, which it consumes. */
+  parseParamList() {
     const params = [];
     while (!this.isPunct(")")) {
-      const t2 = this.next();
-      if (t2.type !== "ident") {
-        this.pos = start2;
-        return null;
-      }
-      params.push(t2.value);
+      params.push(this.parseParam());
       if (this.isPunct(",")) this.next();
+      else break;
     }
     this.expect(")");
-    this.expect("=>");
-    return { t: "arrow", params, body: this.parseArrowBody() };
+    return params;
+  }
+  /**
+   * One binding: `x`, `x = 1`, `...xs`, `{ a, b: c = 2 }`, `[a, , b]`.
+   *
+   * Recursive, so a pattern nests to any depth the way JavaScript's does.
+   */
+  parseParam() {
+    if (this.isPunct("...")) {
+      this.next();
+      const name = this.next();
+      if (name.type !== "ident") {
+        throw new VoodooSyntaxError("Expected a name after ...", this.source, name.start);
+      }
+      return { kind: "rest", name: name.value };
+    }
+    let param;
+    if (this.isPunct("{")) {
+      this.next();
+      const props = [];
+      let rest;
+      while (!this.isPunct("}")) {
+        if (this.isPunct("...")) {
+          this.next();
+          const name = this.next();
+          if (name.type !== "ident") {
+            throw new VoodooSyntaxError("Expected a name after ...", this.source, name.start);
+          }
+          rest = name.value;
+        } else {
+          const key = this.next();
+          if (key.type !== "ident" && key.type !== "str") {
+            throw new VoodooSyntaxError("Expected a property name", this.source, key.start);
+          }
+          const value = this.isPunct(":") ? (this.next(), this.parseParam()) : { kind: "id", name: key.value };
+          if (this.isPunct("=")) {
+            this.next();
+            value.def = this.parseAssignment();
+          }
+          props.push({ key: String(key.value), value });
+        }
+        if (this.isPunct(",")) this.next();
+        else break;
+      }
+      this.expect("}");
+      param = { kind: "obj", props, rest };
+    } else if (this.isPunct("[")) {
+      this.next();
+      const elements = [];
+      let rest;
+      while (!this.isPunct("]")) {
+        if (this.isPunct(",")) {
+          this.next();
+          elements.push(null);
+          continue;
+        }
+        if (this.isPunct("...")) {
+          this.next();
+          const name = this.next();
+          if (name.type !== "ident") {
+            throw new VoodooSyntaxError("Expected a name after ...", this.source, name.start);
+          }
+          rest = name.value;
+        } else {
+          elements.push(this.parseParam());
+        }
+        if (this.isPunct(",")) this.next();
+        else break;
+      }
+      this.expect("]");
+      param = { kind: "arr", elements, rest };
+    } else {
+      const name = this.next();
+      if (name.type !== "ident") {
+        throw new VoodooSyntaxError("Expected a parameter name", this.source, name.start);
+      }
+      param = { kind: "id", name: name.value };
+    }
+    if (this.isPunct("=")) {
+      this.next();
+      param.def = this.parseAssignment();
+    }
+    return param;
   }
   parseConditional() {
     const test = this.parseBinary(0);
@@ -1355,8 +1472,57 @@ var Parser = class {
     }
     return expr;
   }
+  /**
+   * `new X`, `new X(a, b)`, and `new a.b.C(x)`.
+   *
+   * `new` did not exist here, in the lexer, or in the interpreter. So
+   * `new Date(0)` lexed as the identifier `new` followed by `Date(0)`, the
+   * parser dropped the dangling identifier, and what ran was `Date(0)`. Called
+   * without `new`, `Date` returns a STRING of the current time, so
+   * `new Date(0)` produced today's date as text, `new Date(0) instanceof Date`
+   * was false, and `new Date(0).getTime()` failed with "getTime is not a
+   * function". Three wrong answers, none of them an error.
+   *
+   * The callee is parsed as a member chain WITHOUT consuming a call, because in
+   * JavaScript the argument list binds to the `new`: `new a.b.C(x)` constructs
+   * `a.b.C` with `x`, and never calls `a.b.C(x)` and constructs the result. The
+   * trailing `(` is then read here, and anything after it, such as
+   * `new Date(0).getTime()`, is left to the ordinary member loop below.
+   */
+  parseNew() {
+    this.next();
+    const callee = this.parseMemberOnly(this.parsePrimary());
+    const args = this.isPunct("(") ? this.parseArguments() : [];
+    return { t: "new", callee, args };
+  }
+  /**
+   * Member access only: `.x`, `?.x` and `[x]`, stopping at a call.
+   *
+   * Used for a `new` callee, where the argument list belongs to the `new`
+   * rather than to the expression it is constructing.
+   */
+  parseMemberOnly(start2) {
+    let expr = start2;
+    for (; ; ) {
+      if (this.isPunct(".")) {
+        this.next();
+        const prop = this.next();
+        if (prop.type !== "ident") {
+          throw new VoodooSyntaxError("Invalid property name", this.source, prop.start);
+        }
+        expr = { t: "member", o: expr, p: { t: "lit", v: prop.value }, computed: false, opt: false };
+      } else if (this.isPunct("[")) {
+        this.next();
+        const p2 = this.parseExpression();
+        this.expect("]");
+        expr = { t: "member", o: expr, p: p2, computed: true, opt: false };
+      } else {
+        return expr;
+      }
+    }
+  }
   parseCallMember() {
-    let expr = this.parsePrimary();
+    let expr = this.isIdent("new") ? this.parseNew() : this.parsePrimary();
     for (; ; ) {
       if (this.isPunct(".")) {
         this.next();
@@ -1421,16 +1587,7 @@ var Parser = class {
       this.next();
       if (this.peek().type === "ident") this.next();
       this.expect("(");
-      const params = [];
-      while (!this.isPunct(")")) {
-        const param = this.next();
-        if (param.type !== "ident") {
-          throw new VoodooSyntaxError("Expected a parameter name", this.source, param.start);
-        }
-        params.push(param.value);
-        if (this.isPunct(",")) this.next();
-      }
-      this.expect(")");
+      const params = this.parseParamList();
       return { t: "arrow", params, body: this.parseArrowBody() };
     }
     if (t2.type === "num" || t2.type === "str") {
@@ -1535,16 +1692,7 @@ var Parser = class {
           props.push({ key, value: this.parseAssignment() });
         } else if (this.isPunct("(")) {
           this.next();
-          const params = [];
-          while (!this.isPunct(")")) {
-            const param = this.next();
-            if (param.type !== "ident") {
-              throw new VoodooSyntaxError("Expected a parameter name", this.source, param.start);
-            }
-            params.push(param.value);
-            if (this.isPunct(",")) this.next();
-          }
-          this.expect(")");
+          const params = this.parseParamList();
           props.push({ key, value: { t: "method", params, body: this.parseArrowBody() } });
         } else {
           props.push({ key, value: { t: "id", n: key } });
@@ -1647,6 +1795,14 @@ Expression: ${expression}` : message);
   }
 };
 var SPREAD = /* @__PURE__ */ Symbol("spread");
+var ReturnSignal = class {
+  constructor(value) {
+    __publicField(this, "value", value);
+  }
+};
+function unwrap(value) {
+  return value instanceof ReturnSignal ? value.value : value;
+}
 var BLOCKED_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 function chaveBloqueada(key) {
   return typeof key === "string" && BLOCKED_KEYS.has(key);
@@ -1692,6 +1848,19 @@ function evaluate(node, scope) {
       );
       return obj[key];
     }
+    case "new": {
+      const target2 = evaluate(node.callee, scope);
+      if (typeof target2 !== "function") {
+        throw new VoodooRuntimeError(
+          `Cannot construct ${stringify(target2)}: it is not a constructor`
+        );
+      }
+      if (target2 === Function) {
+        throw new VoodooRuntimeError("Cannot construct Function: expressions never compile code");
+      }
+      const args = evalArgs(node.args, scope);
+      return Reflect.construct(target2, args);
+    }
     case "call": {
       let thisArg;
       let fn;
@@ -1739,6 +1908,19 @@ function evaluate(node, scope) {
     }
     case "unary": {
       if (node.op === "...") return { [SPREAD]: evaluate(node.a, scope) };
+      if (node.op === "delete") {
+        if (node.a.t !== "member") {
+          throw new VoodooRuntimeError(
+            "delete needs a property, as in `delete user.name` or `delete list[0]`"
+          );
+        }
+        const owner = evaluate(node.a.o, scope);
+        if (owner == null) return true;
+        const key = checkKey(
+          node.a.computed ? evaluate(node.a.p, scope) : node.a.p.v
+        );
+        return delete owner[key];
+      }
       if (node.op === "typeof") {
         if (node.a.t === "id") {
           if (chaveBloqueada(node.a.n)) return "undefined";
@@ -1756,6 +1938,8 @@ function evaluate(node, scope) {
           return -v;
         case "+":
           return +v;
+        case "~":
+          return ~v;
         case "void":
           return void 0;
       }
@@ -1803,6 +1987,23 @@ function evaluate(node, scope) {
           return l in r2;
         case "instanceof":
           return l instanceof r2;
+        // The bitwise operators coerce through ToInt32, and `>>>` through
+        // ToUint32, which is why the two shifts disagree for negatives:
+        // `-1 >> 0` is -1 and `-1 >>> 0` is 4294967295. Applying the JavaScript
+        // operator directly gets that for free; hand-rolling the coercion is
+        // how an implementation ends up subtly wrong on exactly those cases.
+        case "&":
+          return l & r2;
+        case "|":
+          return l | r2;
+        case "^":
+          return l ^ r2;
+        case "<<":
+          return l << r2;
+        case ">>":
+          return l >> r2;
+        case ">>>":
+          return l >>> r2;
       }
       throw new VoodooRuntimeError(`Unsupported operator: ${node.op}`);
     }
@@ -1860,21 +2061,16 @@ function evaluate(node, scope) {
       const methodParams = node.params;
       const methodBody = node.body;
       return function(...args) {
-        const vars = {};
-        for (let i = 0; i < methodParams.length; i++) vars[methodParams[i]] = args[i];
+        const vars = bindParams(methodParams, args, scope);
         const owner = this;
         const base = owner !== null && typeof owner === "object" ? scope.child(owner) : scope;
-        return evaluate(methodBody, base.child(vars));
+        return unwrap(evaluate(methodBody, base.child(vars)));
       };
     }
     case "arrow": {
       const params = node.params;
       const body = node.body;
-      return (...args) => {
-        const vars = {};
-        for (let i = 0; i < params.length; i++) vars[params[i]] = args[i];
-        return evaluate(body, scope.child(vars));
-      };
+      return (...args) => unwrap(evaluate(body, scope.child(bindParams(params, args, scope))));
     }
     case "obj": {
       const out = {};
@@ -1912,14 +2108,65 @@ function evaluate(node, scope) {
       }
       return out;
     }
+    case "return":
+      return new ReturnSignal(node.a ? evaluate(node.a, scope) : void 0);
     case "seq": {
       let last;
-      for (const stmt of node.body) last = evaluate(stmt, scope);
+      for (const stmt of node.body) {
+        last = evaluate(stmt, scope);
+        if (last instanceof ReturnSignal) return last;
+      }
       return last;
     }
   }
   throw new VoodooRuntimeError(`Unknown node: ${node.t}`);
 }
+function bindParam(param, value, vars, scope) {
+  if (param.kind === "rest") {
+    vars[param.name] = value;
+    return;
+  }
+  if (param.def !== void 0 && value === void 0) {
+    value = evaluate(param.def, scope.child(vars));
+  }
+  if (param.kind === "id") {
+    vars[param.name] = value;
+    return;
+  }
+  if (param.kind === "obj") {
+    if (value == null) {
+      throw new VoodooRuntimeError(
+        `Cannot destructure ${value === null ? "null" : "undefined"}`
+      );
+    }
+    const taken = /* @__PURE__ */ new Set();
+    for (const { key, value: inner } of param.props) {
+      taken.add(key);
+      bindParam(inner, value[checkKey(key)], vars, scope);
+    }
+    if (param.rest) {
+      const rest = {};
+      for (const key of Object.keys(value)) {
+        if (!taken.has(key)) rest[key] = value[key];
+      }
+      vars[param.rest] = rest;
+    }
+    return;
+  }
+  const items = Array.isArray(value) ? value : Array.from(value);
+  param.elements.forEach((element, index) => {
+    if (element) bindParam(element, items[index], vars, scope);
+  });
+  if (param.rest) vars[param.rest] = items.slice(param.elements.length);
+}
+function bindParams(params, args, scope) {
+  const vars = {};
+  for (let i = 0; i < params.length; i++) {
+    const param = params[i];
+    bindParam(param, param.kind === "rest" ? args.slice(i) : args[i], vars, scope);
+  }
+  return vars;
+}
 function evalArgs(args, scope) {
   const out = [];
   for (const arg of args) {
@@ -2692,12 +2939,27 @@ function resolveComponentTag(tagName) {
 var componentAliases = /* @__PURE__ */ new Map();
 var started = false;
 var observer = null;
+var startHooks = [];
+function onStart(hook) {
+  startHooks.push(hook);
+}
+function runPhase(target2, after) {
+  for (const hook of startHooks) {
+    try {
+      hook(target2, after);
+    } catch (error) {
+      console.error("[Voodoo] a start hook failed", error);
+    }
+  }
+}
 function start(root) {
   if (typeof document === "undefined") return;
   const target2 = root ?? exports.config.root ?? document.body;
   if (!target2) return;
   Object.assign(allowedGlobals, exports.config.globals);
+  runPhase(target2, false);
   walk(target2, rootScope);
+  runPhase(target2, true);
   if (!started) {
     started = true;
     if (exports.config.autoDiscover) observeDOM(target2);
@@ -6516,7 +6778,7 @@ function data(values) {
   Object.defineProperties(rootScope.data, Object.getOwnPropertyDescriptors(values));
   return rootScope.data;
 }
-var version2 = "0.7.0";
+var version2 = "0.10.1";
 var core = {
   // Utilities first: Voodoo's own names can override.
   ...utils_exports,
@@ -8140,7 +8402,7 @@ defineDirective(
       el.innerHTML = html ?? fallbackHtml;
       for (const child of Array.from(el.childNodes)) walk(child, scope);
     };
-    const render2 = async (record, current2) => {
+    const render3 = async (record, current2) => {
       let html = null;
       if (record?.view) {
         el.classList.add("v-router-loading");
@@ -8161,7 +8423,7 @@ defineDirective(
       const matched = route.matched;
       void paramsSignature(route.params);
       const record = findRecord(matched);
-      void render2(record, ++token);
+      void render3(record, ++token);
     });
     cleanup(() => {
       token++;
@@ -8371,8 +8633,8 @@ async function loadMessages(locale, source) {
     addMessages(locale, source);
     return;
   }
-  const pending = loading.get(locale);
-  if (pending) return pending;
+  const pending2 = loading.get(locale);
+  if (pending2) return pending2;
   const task = http.get(source, { responseType: "json" }).then((data2) => {
     if (data2 && typeof data2 === "object") addMessages(locale, data2);
   }).catch((err) => {
@@ -10903,7 +11165,7 @@ function commandPalette() {
     close();
     option.el.click();
   };
-  const render2 = () => {
+  const render3 = () => {
     list.replaceChildren();
     if (!visible.length) {
       const empty = document.createElement("li");
@@ -10934,7 +11196,7 @@ function commandPalette() {
       row.addEventListener("pointermove", () => {
         if (cursor === index) return;
         cursor = index;
-        render2();
+        render3();
       });
       list.appendChild(row);
     });
@@ -10948,7 +11210,7 @@ function commandPalette() {
     const term = normalizeSearch(input.value.trim());
     visible = term ? commands.filter((option) => normalizeSearch(`${option.label} ${option.hint}`).includes(term)) : commands;
     cursor = 0;
-    render2();
+    render3();
   };
   const onKeyDown = (event) => {
     if (event.key === "Escape") {
@@ -10959,13 +11221,13 @@ function commandPalette() {
     if (event.key === "ArrowDown") {
       event.preventDefault();
       cursor = visible.length ? (cursor + 1) % visible.length : 0;
-      render2();
+      render3();
       return;
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
       cursor = visible.length ? (cursor - 1 + visible.length) % visible.length : 0;
-      render2();
+      render3();
       return;
     }
     if (event.key === "Enter") {
@@ -10980,7 +11242,7 @@ function commandPalette() {
   });
   input.addEventListener("input", filter);
   document.addEventListener("keydown", onKeyDown, true);
-  render2();
+  render3();
   input.focus();
   document.addEventListener("focusin", keepFocusTrapped, true);
 }
@@ -13285,8 +13547,8 @@ var frameCallbacks = /* @__PURE__ */ new Set();
 var frameHandle = 0;
 function runFrame(now2) {
   frameHandle = 0;
-  const pending = Array.from(frameCallbacks);
-  for (const callback of pending) {
+  const pending2 = Array.from(frameCallbacks);
+  for (const callback of pending2) {
     if (frameCallbacks.has(callback)) callback(now2);
   }
   if (frameCallbacks.size > 0) frameHandle = requestAnimationFrame(runFrame);
@@ -20393,12 +20655,39 @@ function disableXray() {
 function isXrayEnabled() {
   return enabled;
 }
+function parseShortcut(text) {
+  const parts = text.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+  if (!parts.length) return null;
+  const key = parts.pop();
+  const shortcut2 = {
+    ctrl: false,
+    alt: false,
+    shift: false,
+    meta: false,
+    code: /^f\d{1,2}$/.test(key) ? key.toUpperCase() : key.length === 1 && key >= "a" && key <= "z" ? `Key${key.toUpperCase()}` : key.length === 1 && key >= "0" && key <= "9" ? `Digit${key}` : key.charAt(0).toUpperCase() + key.slice(1)
+  };
+  for (const part of parts) {
+    if (part === "ctrl" || part === "control") shortcut2.ctrl = true;
+    else if (part === "alt" || part === "option") shortcut2.alt = true;
+    else if (part === "shift") shortcut2.shift = true;
+    else if (part === "meta" || part === "cmd" || part === "command" || part === "win")
+      shortcut2.meta = true;
+    else return null;
+  }
+  return shortcut2;
+}
 function enableXrayShortcut() {
   if (shortcutInstalled || typeof document === "undefined") return;
   shortcutInstalled = true;
   document.addEventListener("keydown", (event) => {
-    if (!event.altKey || !event.shiftKey || event.ctrlKey || event.metaKey) return;
-    if (event.code !== "KeyV" && event.key !== "V" && event.key !== "v") return;
+    const setting = exports.config.xrayShortcut;
+    if (setting === false) return;
+    const wanted = parseShortcut(typeof setting === "string" ? setting : "ctrl+shift+f2");
+    if (!wanted) return;
+    if (event.ctrlKey !== wanted.ctrl || event.altKey !== wanted.alt || event.shiftKey !== wanted.shift || event.metaKey !== wanted.meta)
+      return;
+    if (event.code !== wanted.code && event.key.toUpperCase() !== wanted.code.replace(/^Key/, ""))
+      return;
     event.preventDefault();
     xray();
   });
@@ -20411,6 +20700,229 @@ function xray(force) {
   return enabled;
 }
 
+// src/jsx/index.ts
+init_reactivity();
+init_registry();
+var OPAQUE = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "PRE",
+  "CODE",
+  "SAMP",
+  "KBD",
+  "TEXTAREA",
+  "TEMPLATE",
+  "NOSCRIPT"
+]);
+magic("$__jsx", (scope) => scope);
+onStart((root, after) => {
+  if (after) activateJsx();
+  else extractJsx(root);
+});
+var TEMPLATE = /* @__PURE__ */ Symbol("voodoo.jsx.template");
+function isTemplate(value) {
+  return typeof value === "object" && value !== null && TEMPLATE in value;
+}
+function collect(start2, offset) {
+  const templates = [];
+  const nodes = [];
+  let source = "";
+  let depth = 0;
+  let quote = null;
+  let escaped = false;
+  let node = start2;
+  let index = offset;
+  let closed = false;
+  let tail = null;
+  while (node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent ?? "";
+      for (; index < text.length; index++) {
+        const ch = text[index];
+        if (escaped) {
+          escaped = false;
+          source += ch;
+          continue;
+        }
+        if (quote) {
+          if (ch === "\\") escaped = true;
+          else if (ch === quote) quote = null;
+          source += ch;
+          continue;
+        }
+        if (ch === '"' || ch === "'" || ch === "`") {
+          quote = ch;
+          source += ch;
+          continue;
+        }
+        if (ch === "{") {
+          depth++;
+          if (depth > 1) source += ch;
+          continue;
+        }
+        if (ch === "}") {
+          depth--;
+          if (depth === 0) {
+            index++;
+            closed = true;
+            break;
+          }
+          source += ch;
+          continue;
+        }
+        source += ch;
+      }
+      nodes.push(node);
+      if (closed) {
+        tail = { node, offset: index };
+        break;
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if (depth === 0) return null;
+      source += `$t(${templates.length}, $__jsx)`;
+      templates.push(node);
+      nodes.push(node);
+    } else {
+      nodes.push(node);
+    }
+    index = 0;
+    node = node.nextSibling;
+  }
+  if (!closed) return null;
+  return { source, templates, nodes, tail };
+}
+function render2(value, templates, scope, out) {
+  if (value == null || value === false || value === true) return;
+  if (Array.isArray(value)) {
+    for (const item of value) render2(item, templates, scope, out);
+    return;
+  }
+  if (isTemplate(value)) {
+    const handle = value;
+    const source = templates[handle.index];
+    const clone2 = source.cloneNode(true);
+    const at = handle.scope ?? scope;
+    applyRegions(clone2, at);
+    activateJsx();
+    walk(clone2, at);
+    out.push(clone2);
+    return;
+  }
+  out.push(document.createTextNode(String(value)));
+}
+function applyRegions(root, parentScope) {
+  if (OPAQUE.has(root.tagName)) return;
+  const scope = parentScope ?? findScope(root);
+  let child = root.firstChild;
+  while (child) {
+    const next = child.nextSibling;
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      applyRegions(child, getScope(child) ?? scope);
+      child = next;
+      continue;
+    }
+    if (child.nodeType !== Node.TEXT_NODE) {
+      child = next;
+      continue;
+    }
+    const text = child.textContent ?? "";
+    const open = text.indexOf("{");
+    if (open < 0) {
+      child = next;
+      continue;
+    }
+    const collected = collect(child, open);
+    if (!collected || collected.templates.length === 0) {
+      child = next;
+      continue;
+    }
+    install(root, collected, scope);
+    child = collected.nodes[collected.nodes.length - 1]?.nextSibling;
+  }
+}
+var pending = [];
+function install(parent, collected, hint) {
+  const { source, templates, nodes, tail } = collected;
+  let ast;
+  try {
+    ast = parse(source);
+  } catch (error) {
+    if (exports.config.devtools) {
+      console.warn(`[Voodoo] could not parse the inline expression: ${source}`, error);
+    }
+    return;
+  }
+  if (tail && tail.offset < (tail.node.textContent ?? "").length) {
+    tail.node.splitText(tail.offset);
+  }
+  const anchor = document.createComment("v-jsx");
+  parent.insertBefore(anchor, nodes[0]);
+  for (const node of nodes) node.remove();
+  let rendered = [];
+  pending.push(() => activateRegion());
+  function activateRegion() {
+    const found = findScope(anchor);
+    const scope = found === rootScope && hint ? hint : found;
+    const local = scope.child({
+      $t: (index, at) => ({ [TEMPLATE]: true, index, scope: at })
+    });
+    const runner = effect(() => {
+      const value = unwrap(evaluate(ast, local));
+      const out = [];
+      render2(value, templates, local, out);
+      for (const node of rendered) node.remove();
+      rendered = out;
+      for (const node of out) parent.insertBefore(node, anchor);
+    });
+    addCleanup(anchor, () => {
+      runner.effect.stop();
+      for (const node of rendered) node.remove();
+    });
+  }
+}
+function readDeclarationBlock(root = document.body) {
+  for (const node of Array.from(root.childNodes)) {
+    if (node.nodeType !== Node.TEXT_NODE) continue;
+    const text = (node.textContent ?? "").trim();
+    if (!text.startsWith("{") || !text.endsWith("}")) continue;
+    if (!/\b(const|let|var)\s/.test(text)) continue;
+    const body = text.slice(1, -1).replace(/\b(?:const|let|var)\s+/g, "");
+    const data2 = reactive({});
+    try {
+      evaluate(parse(body), new Scope(data2));
+    } catch (error) {
+      if (exports.config.devtools) {
+        console.warn("[Voodoo] could not read the declaration block", error);
+      }
+      return null;
+    }
+    node.remove();
+    return data2;
+  }
+  return null;
+}
+function activateJsx() {
+  const work = pending.splice(0, pending.length);
+  for (const run of work) {
+    try {
+      run();
+    } catch (error) {
+      console.error("[Voodoo] a JSX region failed to render", error);
+    }
+  }
+}
+function extractJsx(root = document.body) {
+  const data2 = readDeclarationBlock(root);
+  if (data2) {
+    Object.assign(rootScope.data, data2);
+  }
+  applyRegions(root, findScope(root));
+}
+function jsx(root = document.body) {
+  extractJsx(root);
+  activateJsx();
+}
+
 // src/devtools/launcher.ts
 init_style();
 var POSITION_KEY = "voodoo:devtools:widget-position";
@@ -20591,9 +21103,9 @@ function build() {
   const button = document.createElement("button");
   button.type = "button";
   button.className = "v-devtools-btn";
-  button.setAttribute("aria-label", "Open Voodoo devtools (Alt+Shift+V)");
+  button.setAttribute("aria-label", "Open Voodoo devtools (Ctrl+Shift+F2)");
   button.setAttribute("aria-pressed", "false");
-  button.title = "Voodoo devtools \u2014 click to inspect, drag to move (Alt+Shift+V)";
+  button.title = "Voodoo devtools \u2014 click to inspect, drag to move (Ctrl+Shift+F2)";
   button.innerHTML = MARK;
   const label = document.createElement("span");
   label.className = "v-devtools-label";
@@ -21111,9 +21623,9 @@ function createSocket(url2, options = {}) {
   }
   function drainQueue() {
     if (!queue3.length) return;
-    const pending = queue3.splice(0, queue3.length);
+    const pending2 = queue3.splice(0, queue3.length);
     state2.queued = 0;
-    for (const text of pending) sendText(text);
+    for (const text of pending2) sendText(text);
   }
   function sendText(text) {
     if (ws && ws.readyState === 1 && (!socketIo || state2.connected)) {
@@ -22870,6 +23382,9 @@ Object.assign(V, core, {
   query,
   ready: ready2,
   fromHtml,
+  jsx,
+  extractJsx,
+  activateJsx,
   Collection: VoodooCollection,
   // Routes
   router,
@@ -22935,12 +23450,14 @@ exports.V = V;
 exports.VoodooCollection = VoodooCollection;
 exports.VoodooRuntimeError = VoodooRuntimeError;
 exports.VoodooSyntaxError = VoodooSyntaxError;
+exports.activateJsx = activateJsx;
 exports.addCleanup = addCleanup;
 exports.alert = alert;
 exports.allStores = allStores;
 exports.allowedGlobals = allowedGlobals;
 exports.animate = animate;
 exports.applyMask = applyMask;
+exports.applyRegions = applyRegions;
 exports.cache = cache2;
 exports.capitalize = capitalize;
 exports.charts = charts;
@@ -22974,6 +23491,7 @@ exports.ensureTokens = ensureTokens;
 exports.enter = enter;
 exports.escapeHtml = escapeHtml;
 exports.evaluate = evaluate;
+exports.extractJsx = extractJsx;
 exports.fadeIn = fadeIn;
 exports.fadeOut = fadeOut;
 exports.findScope = findScope;
@@ -22999,6 +23517,7 @@ exports.isBrowser = isBrowser;
 exports.isDevtoolsWidgetMounted = isDevtoolsWidgetMounted;
 exports.isReactive = isReactive;
 exports.isXrayEnabled = isXrayEnabled;
+exports.jsx = jsx;
 exports.leave = leave;
 exports.magic = magic;
 exports.magics = magics;
@@ -23023,6 +23542,7 @@ exports.prompt = prompt;
 exports.query = query;
 exports.random = random;
 exports.reactive = reactive;
+exports.readDeclarationBlock = readDeclarationBlock;
 exports.ready = ready2;
 exports.ref = ref;
 exports.reflectWgsl = reflectWgsl;