voodoojs 0.7.0 → 0.10.1

package/dist/voodoo.full.js

@@ -1,5 +1,5 @@
 /**
- * Voodoo.js v0.7.0
+ * Voodoo.js v0.10.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -730,6 +730,7 @@ var Voodoo = (() => {
         autoDiscover: true,
         root: null,
         devtools: false,
+        xrayShortcut: "ctrl+shift+f2",
         baseURL: "",
         globals: {},
         locale: typeof navigator !== "undefined" ? navigator.language || "pt-BR" : "pt-BR",
@@ -865,6 +866,7 @@ ${pointer}`);
     "!==",
     "**=",
     "...",
+    ">>>",
     "<<=",
     ">>=",
     "&&=",
@@ -887,6 +889,11 @@ ${pointer}`);
     "*=",
     "/=",
     "%=",
+    "&=",
+    "|=",
+    "^=",
+    "<<",
+    ">>",
     "+",
     "-",
     "*",
@@ -896,6 +903,10 @@ ${pointer}`);
     "<",
     ">",
     "=",
+    "&",
+    "|",
+    "^",
+    "~",
     "(",
     ")",
     "[",
@@ -960,6 +971,10 @@ ${pointer}`);
           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] === ".") {
@@ -1116,25 +1131,31 @@ ${pointer}`);
     "??": 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,
@@ -1216,6 +1237,13 @@ ${pointer}`);
      * 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("(");
@@ -1269,7 +1297,7 @@ ${pointer}`);
       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();
@@ -1306,19 +1334,108 @@ ${pointer}`);
       const after = this.tokens[i + 1];
       if (!after || after.type !== "punct" || after.value !== "=>") return null;
       this.next();
+      let params;
+      try {
+        params = this.parseParamList();
+      } catch (e) {
+        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);
@@ -1378,8 +1495,57 @@ ${pointer}`);
       }
       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();
@@ -1444,16 +1610,7 @@ ${pointer}`);
         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") {
@@ -1559,16 +1716,7 @@ ${pointer}`);
             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 } });
@@ -1672,6 +1820,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);
@@ -1718,6 +1874,19 @@ Expression: ${expression}` : message);
         );
         return obj[key];
       }
+      case "new": {
+        const target = evaluate(node.callee, scope);
+        if (typeof target !== "function") {
+          throw new VoodooRuntimeError(
+            `Cannot construct ${stringify(target)}: it is not a constructor`
+          );
+        }
+        if (target === Function) {
+          throw new VoodooRuntimeError("Cannot construct Function: expressions never compile code");
+        }
+        const args = evalArgs(node.args, scope);
+        return Reflect.construct(target, args);
+      }
       case "call": {
         let thisArg;
         let fn;
@@ -1765,6 +1934,19 @@ Expression: ${expression}` : message);
       }
       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";
@@ -1782,6 +1964,8 @@ Expression: ${expression}` : message);
             return -v;
           case "+":
             return +v;
+          case "~":
+            return ~v;
           case "void":
             return void 0;
         }
@@ -1829,6 +2013,23 @@ Expression: ${expression}` : message);
             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}`);
       }
@@ -1886,21 +2087,16 @@ Expression: ${expression}` : message);
         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 = {};
@@ -1938,14 +2134,65 @@ Expression: ${expression}` : message);
         }
         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) {
@@ -2724,13 +2971,28 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
   var componentAliases = /* @__PURE__ */ new Map();
   var started = false;
   var observer = null;
+  var startHooks = [];
+  function onStart(hook) {
+    startHooks.push(hook);
+  }
+  function runPhase(target, after) {
+    for (const hook of startHooks) {
+      try {
+        hook(target, after);
+      } catch (error) {
+        console.error("[Voodoo] a start hook failed", error);
+      }
+    }
+  }
   function start(root) {
     var _a2;
     if (typeof document === "undefined") return;
     const target = (_a2 = root != null ? root : config.root) != null ? _a2 : document.body;
     if (!target) return;
     Object.assign(allowedGlobals, config.globals);
+    runPhase(target, false);
     walk(target, rootScope);
+    runPhase(target, true);
     if (!started) {
       started = true;
       if (config.autoDiscover) observeDOM(target);
@@ -6621,7 +6883,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     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,
@@ -8270,7 +8532,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
         el.innerHTML = html != null ? 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 == null ? void 0 : record.view) {
           el.classList.add("v-router-loading");
@@ -8291,7 +8553,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
         const matched = route.matched;
         void paramsSignature(route.params);
         const record = findRecord(matched);
-        void render2(record, ++token);
+        void render3(record, ++token);
       });
       cleanup(() => {
         token++;
@@ -8507,8 +8769,8 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       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) => {
@@ -11078,7 +11340,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       close();
       option.el.click();
     };
-    const render2 = () => {
+    const render3 = () => {
       var _a2;
       list.replaceChildren();
       if (!visible.length) {
@@ -11110,7 +11372,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
         row.addEventListener("pointermove", () => {
           if (cursor === index) return;
           cursor = index;
-          render2();
+          render3();
         });
         list.appendChild(row);
       });
@@ -11124,7 +11386,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       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") {
@@ -11135,13 +11397,13 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       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") {
@@ -11156,7 +11418,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     });
     input.addEventListener("input", filter);
     document.addEventListener("keydown", onKeyDown, true);
-    render2();
+    render3();
     input.focus();
     document.addEventListener("focusin", keepFocusTrapped, true);
   }
@@ -13502,8 +13764,8 @@ form.v-loading [type="submit"],form.v-loading button[disabled]{opacity:.6}
   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);
@@ -20708,12 +20970,39 @@ textarea.v-dialog-input{min-height:96px;resize:vertical}
   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 = 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();
     });
@@ -20726,6 +21015,234 @@ textarea.v-dialog-input{min-height:96px;resize:vertical}
     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) {
+    var _a2;
+    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 = (_a2 = node.textContent) != null ? _a2 : "";
+        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) {
+    var _a2;
+    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 = (_a2 = handle.scope) != null ? _a2 : scope;
+      applyRegions(clone2, at);
+      activateJsx();
+      walk(clone2, at);
+      out.push(clone2);
+      return;
+    }
+    out.push(document.createTextNode(String(value)));
+  }
+  function applyRegions(root, parentScope) {
+    var _a2, _b, _c;
+    if (OPAQUE.has(root.tagName)) return;
+    const scope = parentScope != null ? parentScope : findScope(root);
+    let child = root.firstChild;
+    while (child) {
+      const next = child.nextSibling;
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        applyRegions(child, (_a2 = getScope(child)) != null ? _a2 : scope);
+        child = next;
+        continue;
+      }
+      if (child.nodeType !== Node.TEXT_NODE) {
+        child = next;
+        continue;
+      }
+      const text = (_b = child.textContent) != null ? _b : "";
+      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 = (_c = collected.nodes[collected.nodes.length - 1]) == null ? void 0 : _c.nextSibling;
+    }
+  }
+  var pending = [];
+  function install(parent, collected, hint) {
+    var _a2;
+    const { source, templates, nodes, tail } = collected;
+    let ast;
+    try {
+      ast = parse(source);
+    } catch (error) {
+      if (config.devtools) {
+        console.warn(`[Voodoo] could not parse the inline expression: ${source}`, error);
+      }
+      return;
+    }
+    if (tail && tail.offset < ((_a2 = tail.node.textContent) != null ? _a2 : "").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) {
+    var _a2;
+    for (const node of Array.from(root.childNodes)) {
+      if (node.nodeType !== Node.TEXT_NODE) continue;
+      const text = ((_a2 = node.textContent) != null ? _a2 : "").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 (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";
@@ -20906,9 +21423,9 @@ textarea.v-dialog-input{min-height:96px;resize:vertical}
     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";
@@ -21096,6 +21613,9 @@ textarea.v-dialog-input{min-height:96px;resize:vertical}
     query,
     ready,
     fromHtml,
+    jsx,
+    extractJsx,
+    activateJsx,
     Collection: VoodooCollection,
     // Routes
     router,
@@ -21179,6 +21699,10 @@ textarea.v-dialog-input{min-height:96px;resize:vertical}
     const locale = script.getAttribute("data-locale");
     if (locale) config.locale = locale;
     if (readDevtoolsFlag(script)) config.devtools = true;
+    const xrayShortcut = script.getAttribute("data-xray-shortcut");
+    if (xrayShortcut !== null) {
+      config.xrayShortcut = xrayShortcut === "false" || xrayShortcut === "" ? false : xrayShortcut;
+    }
     if (script.hasAttribute("data-no-styles")) config.injectStyles = false;
     if (script.hasAttribute("data-no-observer")) config.autoDiscover = false;
     if (script.hasAttribute("data-keep-attributes")) config.cleanAttributes = false;
@@ -21208,6 +21732,7 @@ textarea.v-dialog-input{min-height:96px;resize:vertical}
       theme.init();
       applySavedPalette();
       V2.start();
+      if (typeof V2.enableXrayShortcut === "function") V2.enableXrayShortcut();
       if (config.devtools) mountDevtools(V2);
     };
     whenReady(boot);