voodoojs 0.7.0 → 0.10.1

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { c as core, V as VoodooCollection } from './query-sEJXe_cO.cjs';
-export { A as App, a as AppOptions, C as ComponentDefinition, D as DirectiveBinding, b as DirectiveHooks, P as PRIORITY, R as Resource, d as ResourceOptions, S as Scope, e as VoodooConfig, f as VoodooPlugin, g as VoodooRuntimeError, h as VoodooSyntaxError, i as addCleanup, j as allStores, k as allowedGlobals, l as cache, m as clearParseCache, n as config, o as cookie, p as createApp, q as createResource, r as defineComponent, s as defineDirective, t as destroy, u as documentReady, v as ensureTokens, w as enter, x as evaluate, y as fadeIn, z as fadeOut, B as findScope, E as fromHtml, F as getScope, G as injectStyle, H as instances, I as leave, J as magic, K as magics, L as mountComponent, M as parse, N as query, O as ready, Q as refresh, T as removeStore, q as resource, U as rootScope, W as session, X as slideDown, Y as slideUp, Z as start, _ as storage, $ as store, a0 as storeNames, a1 as stringify, a2 as theme, a3 as toast, a4 as tokenize, a5 as url, a6 as viewTransition, a7 as walk, a8 as whenElement, a9 as whenReady } from './query-sEJXe_cO.cjs';
+import { S as Scope, c as core, V as VoodooCollection } from './query-DiQAS73Q.cjs';
+export { A as App, a as AppOptions, C as ComponentDefinition, D as DirectiveBinding, b as DirectiveHooks, P as PRIORITY, R as Resource, d as ResourceOptions, e as VoodooConfig, f as VoodooPlugin, g as VoodooRuntimeError, h as VoodooSyntaxError, i as addCleanup, j as allStores, k as allowedGlobals, l as cache, m as clearParseCache, n as config, o as cookie, p as createApp, q as createResource, r as defineComponent, s as defineDirective, t as destroy, u as documentReady, v as ensureTokens, w as enter, x as evaluate, y as fadeIn, z as fadeOut, B as findScope, E as fromHtml, F as getScope, G as injectStyle, H as instances, I as leave, J as magic, K as magics, L as mountComponent, M as parse, N as query, O as ready, Q as refresh, T as removeStore, q as resource, U as rootScope, W as session, X as slideDown, Y as slideUp, Z as start, _ as storage, $ as store, a0 as storeNames, a1 as stringify, a2 as theme, a3 as toast, a4 as tokenize, a5 as url, a6 as viewTransition, a7 as walk, a8 as whenElement, a9 as whenReady } from './query-DiQAS73Q.cjs';
 export { EffectScope, computed, effect, effectScope, flushSync, isReactive, markRaw, nextTick, reactive, ref, shallowRef, stop, toRaw, unref, watch, watchEffect } from './reactivity.cjs';
 export { HttpError, HttpMethod, HttpResponse, RequestConfig, http, request } from './http.cjs';
 export { R as RoomOptions, a as RoomState, S as SocketMessage, b as SocketOptions, c as SocketRoom, d as SocketState, e as SocketTransport, V as VoodooSocket, f as createSocket, s as socket, g as socketSupported } from './index-DTllqUtj.cjs';
@@ -520,6 +520,120 @@ declare const clipboard: {
     read(): Promise<string>;
 };
 
+/**
+ * @module jsx
+ *
+ * JSX written directly in ordinary HTML, with no build step and no compiler.
+ *
+ * ```html
+ * <ul>
+ *   {frutas.map((fruta) => (
+ *     <li>{fruta}</li>
+ *   ))}
+ * </ul>
+ * ```
+ *
+ * The trick is that the browser has already parsed the page before any of this
+ * runs, and what it leaves behind is recoverable. For the block above the DOM is
+ * three siblings:
+ *
+ *   text     "{frutas.map((fruta) => ("
+ *   element  <li>{fruta}</li>
+ *   text     "))}"
+ *
+ * The element is not a mistake to be worked around, it is the template. Joining
+ * the text back together with a placeholder where the element sat reconstructs
+ * the expression exactly as it was typed:
+ *
+ *   frutas.map((fruta) => ($t(0, $__jsx)))
+ *
+ * `$t` returns a handle to that `<li>` together with the scope the call was made
+ * in, so the arrow returns one clone per item, each rendered where `fruta` is
+ * bound. Nothing is compiled, nothing is evaluated as a string, and the whole
+ * thing goes through the same lexer, parser and interpreter as every other
+ * expression, which is what keeps it working under a strict Content Security
+ * Policy.
+ *
+ * ATTRIBUTE VALUES MUST BE QUOTED
+ *
+ *   style="{{ backgroundColor: cor }}"     works
+ *   style={{ backgroundColor: cor }}       does not
+ *
+ * This one is not a decision, it is the order things happen in. An unquoted
+ * attribute value ends at the first space, so the browser turns the second line
+ * into six separate attributes, `style="{{"`, `backgroundcolor:=""`, `cor,=""`
+ * and so on, before a single line of JavaScript has run.
+ *
+ * The pieces do survive in order, so they could in principle be rejoined. What
+ * does not survive is case: the browser lowercases every attribute NAME, so
+ * `backgroundColor` comes back as `backgroundcolor` and any identifier with a
+ * capital in it is gone. Quoting costs two characters and has no such rule.
+ */
+
+/**
+ * Finds and installs every `{ ... }` region inside one element's children.
+ *
+ * Text-only interpolation such as `<h1>Ola, {nome}!</h1>` is deliberately left
+ * alone: the core already renders it, and taking it over here would mean two
+ * implementations of the same thing disagreeing at some point. This module only
+ * claims a region that spans an element, which is the part the core cannot do.
+ */
+declare function applyRegions(root: Element, parentScope?: Scope): void;
+/**
+ * Reads a top-level declaration block into state.
+ *
+ * ```html
+ * {
+ * const produtos = [...];
+ * const ativo = true;
+ * }
+ * ```
+ *
+ * The block is a text node in `<body>`, and `const` is not part of the
+ * expression language, so the keywords are stripped and what remains is a
+ * sequence of assignments, which the parser already understands. The names land
+ * on a reactive object that becomes the root scope's data, so everything below
+ * sees them and updates when they change.
+ */
+declare function readDeclarationBlock(root?: ParentNode): Record<string, unknown> | null;
+/**
+ * Turns the whole page into one where JSX works.
+ *
+ * ```js
+ * V.jsx();                  // the document
+ * V.jsx(document.querySelector('#app'));
+ * ```
+ *
+ * Reads the declaration block if there is one, puts its names in scope, and
+ * then installs every `{ ... }` region below the root.
+ */
+/**
+ * Makes every extracted region live.
+ *
+ * Separate from `jsx()` because it must run after `V.start()`, once `v-data`
+ * has created the scopes a region may need to resolve against. `jsx()` takes
+ * the templates out of the document; this puts the rendered result back.
+ */
+declare function activateJsx(): void;
+/**
+ * Takes every region out of the document, without rendering anything yet.
+ *
+ * This is the half that must run BEFORE `V.start()`. `jsx()` is extract plus
+ * activate in one call, which is right for a caller doing it by hand and wrong
+ * for the bootstrap: calling `jsx()` there activated immediately, with the
+ * `v-data` scopes not yet created, and the later `activateJsx()` found an empty
+ * queue. Every list on the page came out blank.
+ */
+declare function extractJsx(root?: Element): void;
+/**
+ * Extract and render in one call, for a caller doing this by hand.
+ *
+ * The bootstrap does not use this: it calls `extractJsx()` before `V.start()`
+ * and `activateJsx()` after, because the two halves belong on opposite sides of
+ * it.
+ */
+declare function jsx(root?: Element): void;
+
 /**
  * @module ui/dialog
  *
@@ -1513,7 +1627,7 @@ declare function isXrayEnabled(): boolean;
  * V.xray(false)   // disable
  * ```
  *
- * The first call also installs the `Alt+Shift+V` shortcut.
+ * The first call also installs the `Ctrl+Shift+F2` shortcut.
  *
  * @param force enable or disable explicitly. Without argument, toggles.
  * @returns the state after the call.
@@ -1600,4 +1714,4 @@ interface Voodoo extends Omit<typeof core, never> {
 }
 declare const V: Voodoo;
 
-export { V, type Voodoo, VoodooCollection, alert, animate, applyMask, charts, clearErrors, clipboard, confirm, V as default, devtoolsBus, devtoolsWidget, dialog, disableXray, easings, enableXray, getLocale, hotkey, i18n, inView, isDevtoolsWidgetMounted, isXrayEnabled, mask, masks, modal, motionPresets, mountDevtoolsWidget, navigate, network, palette, prompt, registerMask, renderChart, route, router, screen, scrollProgress, serializeForm, setLocale, showFormErrors, sound, efeitos as soundEffects, spring, stagger, t, unmask, unmountDevtoolsWidget, validate, validator, xray };
+export { Scope, V, type Voodoo, VoodooCollection, activateJsx, alert, animate, applyMask, applyRegions, charts, clearErrors, clipboard, confirm, V as default, devtoolsBus, devtoolsWidget, dialog, disableXray, easings, enableXray, extractJsx, getLocale, hotkey, i18n, inView, isDevtoolsWidgetMounted, isXrayEnabled, jsx, mask, masks, modal, motionPresets, mountDevtoolsWidget, navigate, network, palette, prompt, readDeclarationBlock, registerMask, renderChart, route, router, screen, scrollProgress, serializeForm, setLocale, showFormErrors, sound, efeitos as soundEffects, spring, stagger, t, unmask, unmountDevtoolsWidget, validate, validator, xray };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { c as core, V as VoodooCollection } from './query-CC-_z7v0.js';
-export { A as App, a as AppOptions, C as ComponentDefinition, D as DirectiveBinding, b as DirectiveHooks, P as PRIORITY, R as Resource, d as ResourceOptions, S as Scope, e as VoodooConfig, f as VoodooPlugin, g as VoodooRuntimeError, h as VoodooSyntaxError, i as addCleanup, j as allStores, k as allowedGlobals, l as cache, m as clearParseCache, n as config, o as cookie, p as createApp, q as createResource, r as defineComponent, s as defineDirective, t as destroy, u as documentReady, v as ensureTokens, w as enter, x as evaluate, y as fadeIn, z as fadeOut, B as findScope, E as fromHtml, F as getScope, G as injectStyle, H as instances, I as leave, J as magic, K as magics, L as mountComponent, M as parse, N as query, O as ready, Q as refresh, T as removeStore, q as resource, U as rootScope, W as session, X as slideDown, Y as slideUp, Z as start, _ as storage, $ as store, a0 as storeNames, a1 as stringify, a2 as theme, a3 as toast, a4 as tokenize, a5 as url, a6 as viewTransition, a7 as walk, a8 as whenElement, a9 as whenReady } from './query-CC-_z7v0.js';
+import { S as Scope, c as core, V as VoodooCollection } from './query-Cf-7iibE.js';
+export { A as App, a as AppOptions, C as ComponentDefinition, D as DirectiveBinding, b as DirectiveHooks, P as PRIORITY, R as Resource, d as ResourceOptions, e as VoodooConfig, f as VoodooPlugin, g as VoodooRuntimeError, h as VoodooSyntaxError, i as addCleanup, j as allStores, k as allowedGlobals, l as cache, m as clearParseCache, n as config, o as cookie, p as createApp, q as createResource, r as defineComponent, s as defineDirective, t as destroy, u as documentReady, v as ensureTokens, w as enter, x as evaluate, y as fadeIn, z as fadeOut, B as findScope, E as fromHtml, F as getScope, G as injectStyle, H as instances, I as leave, J as magic, K as magics, L as mountComponent, M as parse, N as query, O as ready, Q as refresh, T as removeStore, q as resource, U as rootScope, W as session, X as slideDown, Y as slideUp, Z as start, _ as storage, $ as store, a0 as storeNames, a1 as stringify, a2 as theme, a3 as toast, a4 as tokenize, a5 as url, a6 as viewTransition, a7 as walk, a8 as whenElement, a9 as whenReady } from './query-Cf-7iibE.js';
 export { EffectScope, computed, effect, effectScope, flushSync, isReactive, markRaw, nextTick, reactive, ref, shallowRef, stop, toRaw, unref, watch, watchEffect } from './reactivity.js';
 export { HttpError, HttpMethod, HttpResponse, RequestConfig, http, request } from './http.js';
 export { R as RoomOptions, a as RoomState, S as SocketMessage, b as SocketOptions, c as SocketRoom, d as SocketState, e as SocketTransport, V as VoodooSocket, f as createSocket, s as socket, g as socketSupported } from './index-DTllqUtj.js';
@@ -520,6 +520,120 @@ declare const clipboard: {
     read(): Promise<string>;
 };
 
+/**
+ * @module jsx
+ *
+ * JSX written directly in ordinary HTML, with no build step and no compiler.
+ *
+ * ```html
+ * <ul>
+ *   {frutas.map((fruta) => (
+ *     <li>{fruta}</li>
+ *   ))}
+ * </ul>
+ * ```
+ *
+ * The trick is that the browser has already parsed the page before any of this
+ * runs, and what it leaves behind is recoverable. For the block above the DOM is
+ * three siblings:
+ *
+ *   text     "{frutas.map((fruta) => ("
+ *   element  <li>{fruta}</li>
+ *   text     "))}"
+ *
+ * The element is not a mistake to be worked around, it is the template. Joining
+ * the text back together with a placeholder where the element sat reconstructs
+ * the expression exactly as it was typed:
+ *
+ *   frutas.map((fruta) => ($t(0, $__jsx)))
+ *
+ * `$t` returns a handle to that `<li>` together with the scope the call was made
+ * in, so the arrow returns one clone per item, each rendered where `fruta` is
+ * bound. Nothing is compiled, nothing is evaluated as a string, and the whole
+ * thing goes through the same lexer, parser and interpreter as every other
+ * expression, which is what keeps it working under a strict Content Security
+ * Policy.
+ *
+ * ATTRIBUTE VALUES MUST BE QUOTED
+ *
+ *   style="{{ backgroundColor: cor }}"     works
+ *   style={{ backgroundColor: cor }}       does not
+ *
+ * This one is not a decision, it is the order things happen in. An unquoted
+ * attribute value ends at the first space, so the browser turns the second line
+ * into six separate attributes, `style="{{"`, `backgroundcolor:=""`, `cor,=""`
+ * and so on, before a single line of JavaScript has run.
+ *
+ * The pieces do survive in order, so they could in principle be rejoined. What
+ * does not survive is case: the browser lowercases every attribute NAME, so
+ * `backgroundColor` comes back as `backgroundcolor` and any identifier with a
+ * capital in it is gone. Quoting costs two characters and has no such rule.
+ */
+
+/**
+ * Finds and installs every `{ ... }` region inside one element's children.
+ *
+ * Text-only interpolation such as `<h1>Ola, {nome}!</h1>` is deliberately left
+ * alone: the core already renders it, and taking it over here would mean two
+ * implementations of the same thing disagreeing at some point. This module only
+ * claims a region that spans an element, which is the part the core cannot do.
+ */
+declare function applyRegions(root: Element, parentScope?: Scope): void;
+/**
+ * Reads a top-level declaration block into state.
+ *
+ * ```html
+ * {
+ * const produtos = [...];
+ * const ativo = true;
+ * }
+ * ```
+ *
+ * The block is a text node in `<body>`, and `const` is not part of the
+ * expression language, so the keywords are stripped and what remains is a
+ * sequence of assignments, which the parser already understands. The names land
+ * on a reactive object that becomes the root scope's data, so everything below
+ * sees them and updates when they change.
+ */
+declare function readDeclarationBlock(root?: ParentNode): Record<string, unknown> | null;
+/**
+ * Turns the whole page into one where JSX works.
+ *
+ * ```js
+ * V.jsx();                  // the document
+ * V.jsx(document.querySelector('#app'));
+ * ```
+ *
+ * Reads the declaration block if there is one, puts its names in scope, and
+ * then installs every `{ ... }` region below the root.
+ */
+/**
+ * Makes every extracted region live.
+ *
+ * Separate from `jsx()` because it must run after `V.start()`, once `v-data`
+ * has created the scopes a region may need to resolve against. `jsx()` takes
+ * the templates out of the document; this puts the rendered result back.
+ */
+declare function activateJsx(): void;
+/**
+ * Takes every region out of the document, without rendering anything yet.
+ *
+ * This is the half that must run BEFORE `V.start()`. `jsx()` is extract plus
+ * activate in one call, which is right for a caller doing it by hand and wrong
+ * for the bootstrap: calling `jsx()` there activated immediately, with the
+ * `v-data` scopes not yet created, and the later `activateJsx()` found an empty
+ * queue. Every list on the page came out blank.
+ */
+declare function extractJsx(root?: Element): void;
+/**
+ * Extract and render in one call, for a caller doing this by hand.
+ *
+ * The bootstrap does not use this: it calls `extractJsx()` before `V.start()`
+ * and `activateJsx()` after, because the two halves belong on opposite sides of
+ * it.
+ */
+declare function jsx(root?: Element): void;
+
 /**
  * @module ui/dialog
  *
@@ -1513,7 +1627,7 @@ declare function isXrayEnabled(): boolean;
  * V.xray(false)   // disable
  * ```
  *
- * The first call also installs the `Alt+Shift+V` shortcut.
+ * The first call also installs the `Ctrl+Shift+F2` shortcut.
  *
  * @param force enable or disable explicitly. Without argument, toggles.
  * @returns the state after the call.
@@ -1600,4 +1714,4 @@ interface Voodoo extends Omit<typeof core, never> {
 }
 declare const V: Voodoo;
 
-export { V, type Voodoo, VoodooCollection, alert, animate, applyMask, charts, clearErrors, clipboard, confirm, V as default, devtoolsBus, devtoolsWidget, dialog, disableXray, easings, enableXray, getLocale, hotkey, i18n, inView, isDevtoolsWidgetMounted, isXrayEnabled, mask, masks, modal, motionPresets, mountDevtoolsWidget, navigate, network, palette, prompt, registerMask, renderChart, route, router, screen, scrollProgress, serializeForm, setLocale, showFormErrors, sound, efeitos as soundEffects, spring, stagger, t, unmask, unmountDevtoolsWidget, validate, validator, xray };
+export { Scope, V, type Voodoo, VoodooCollection, activateJsx, alert, animate, applyMask, applyRegions, charts, clearErrors, clipboard, confirm, V as default, devtoolsBus, devtoolsWidget, dialog, disableXray, easings, enableXray, extractJsx, getLocale, hotkey, i18n, inView, isDevtoolsWidgetMounted, isXrayEnabled, jsx, mask, masks, modal, motionPresets, mountDevtoolsWidget, navigate, network, palette, prompt, readDeclarationBlock, registerMask, renderChart, route, router, screen, scrollProgress, serializeForm, setLocale, showFormErrors, sound, efeitos as soundEffects, spring, stagger, t, unmask, unmountDevtoolsWidget, validate, validator, xray };

package/dist/index.js

@@ -1,25 +1,25 @@
-import { core, sound, hotkey, palette, registerMask, unmask, applyMask, masks, mask, clearErrors, showFieldError, showFormErrors, messages, serializeForm, validate, validator, dialog, prompt, confirm, alert, modal, VoodooCollection, fromHtml, ready2, query, viewTransition, defineComponent, storage, ensurePalette, instances, storeNames, allStores } from './chunk-II3XBOAP.js';
-export { VoodooCollection, alert, allStores, applyMask, cache, clearErrors, clipboard, confirm, cookie, createApp, createResource, defineComponent, dialog, ready as documentReady, enter, fadeIn, fadeOut, fromHtml, hotkey, instances, leave, mask, masks, modal, mountComponent, network, palette, prompt, query, ready2 as ready, registerMask, removeStore, createResource as resource, screen, serializeForm, session, showFormErrors, slideDown, slideUp, sound, efeitos as soundEffects, storage, store, storeNames, theme, toast, unmask, url, validate, validator, viewTransition, whenElement, whenReady } from './chunk-II3XBOAP.js';
-export { gpu, reflectWgsl } from './chunk-E5T65CEI.js';
-import { http } from './chunk-WSDB7K4X.js';
-export { HttpError, http, request } from './chunk-WSDB7K4X.js';
-import { devtoolsBus } from './chunk-QO3I7VLJ.js';
-export { createSocket, devtoolsBus, socket, socketSupported } from './chunk-QO3I7VLJ.js';
-import { magic, markSkipChildren, destroy, readAttr, walk, hadDirectives, getScope, collectDirectives, findScope, getEffectScopes, evaluateIn } from './chunk-JB2YYNK6.js';
-export { Scope, VoodooRuntimeError, VoodooSyntaxError, addCleanup, allowedGlobals, clearParseCache, destroy, evaluate, findScope, getScope, magic, magics, parse, refresh, rootScope, start, stringify, tokenize, walk } from './chunk-JB2YYNK6.js';
-import { reactive, warn, handleError, queuePostFlush, nextTick } from './chunk-4T2UIPWX.js';
-export { EffectScope, computed, effect, effectScope, flushSync, isReactive, markRaw, nextTick, reactive, ref, shallowRef, stop, toRaw, unref, watch, watchEffect } from './chunk-4T2UIPWX.js';
-import { warnAlias } from './chunk-CYN6VLMD.js';
-import { parseDuration, formatNumber, formatCurrency, formatDate, relativeTime, device, setFormatDefaults, uid, merge, escapeHtml, truncate, get, titleCase } from './chunk-ZIWLQZZL.js';
-export { capitalize, chunk, clone, debounce, device, escapeHtml, formatCurrency, formatDate, formatFileSize, formatNumber, formatPercent, get, groupBy, isBrowser, matchesMedia, memoize, merge, once, parseDuration, random, relativeTime, sample, set, setFormatDefaults, sleep, slugify, sortBy, stripTags, throttle, titleCase, truncate, uid, unique, uuid } from './chunk-ZIWLQZZL.js';
-import { ensureTokens, injectStyle } from './chunk-GIWKGFGY.js';
-export { ensureTokens, injectStyle } from './chunk-GIWKGFGY.js';
-import { defineDirective, PRIORITY, config } from './chunk-MMLUK37L.js';
-export { PRIORITY, config, defineDirective } from './chunk-MMLUK37L.js';
-import './chunk-YOZTHZS2.js';
+import { core, sound, hotkey, palette, registerMask, unmask, applyMask, masks, mask, clearErrors, showFieldError, showFormErrors, messages, serializeForm, validate, validator, dialog, prompt, confirm, alert, modal, VoodooCollection, fromHtml, ready2, query, viewTransition, defineComponent, storage, ensurePalette, instances, storeNames, allStores } from './chunk-4MJIS5RZ.js';
+export { VoodooCollection, alert, allStores, applyMask, cache, clearErrors, clipboard, confirm, cookie, createApp, createResource, defineComponent, dialog, ready as documentReady, enter, fadeIn, fadeOut, fromHtml, hotkey, instances, leave, mask, masks, modal, mountComponent, network, palette, prompt, query, ready2 as ready, registerMask, removeStore, createResource as resource, screen, serializeForm, session, showFormErrors, slideDown, slideUp, sound, efeitos as soundEffects, storage, store, storeNames, theme, toast, unmask, url, validate, validator, viewTransition, whenElement, whenReady } from './chunk-4MJIS5RZ.js';
+export { gpu, reflectWgsl } from './chunk-WYSN4IOV.js';
+import { http } from './chunk-DNIQLT66.js';
+export { HttpError, http, request } from './chunk-DNIQLT66.js';
+import { devtoolsBus } from './chunk-5D7TM3GL.js';
+export { createSocket, devtoolsBus, socket, socketSupported } from './chunk-5D7TM3GL.js';
+import { magic, markSkipChildren, onStart, rootScope, findScope, destroy, readAttr, evaluate, parse, Scope, getScope, walk, unwrap, addCleanup, hadDirectives, collectDirectives, getEffectScopes, evaluateIn } from './chunk-5E3UZREN.js';
+export { Scope, VoodooRuntimeError, VoodooSyntaxError, addCleanup, allowedGlobals, clearParseCache, destroy, evaluate, findScope, getScope, magic, magics, parse, refresh, rootScope, start, stringify, tokenize, walk } from './chunk-5E3UZREN.js';
+import { reactive, warn, handleError, effect, queuePostFlush, nextTick } from './chunk-246ZC2JD.js';
+export { EffectScope, computed, effect, effectScope, flushSync, isReactive, markRaw, nextTick, reactive, ref, shallowRef, stop, toRaw, unref, watch, watchEffect } from './chunk-246ZC2JD.js';
+import { warnAlias } from './chunk-RREZZ4FB.js';
+import { parseDuration, formatNumber, formatCurrency, formatDate, relativeTime, device, setFormatDefaults, uid, merge, escapeHtml, truncate, get, titleCase } from './chunk-F3Z3HMZR.js';
+export { capitalize, chunk, clone, debounce, device, escapeHtml, formatCurrency, formatDate, formatFileSize, formatNumber, formatPercent, get, groupBy, isBrowser, matchesMedia, memoize, merge, once, parseDuration, random, relativeTime, sample, set, setFormatDefaults, sleep, slugify, sortBy, stripTags, throttle, titleCase, truncate, uid, unique, uuid } from './chunk-F3Z3HMZR.js';
+import { ensureTokens, injectStyle } from './chunk-KQRWQPD6.js';
+export { ensureTokens, injectStyle } from './chunk-KQRWQPD6.js';
+import { defineDirective, PRIORITY, config } from './chunk-D4DNTWIS.js';
+export { PRIORITY, config, defineDirective } from './chunk-D4DNTWIS.js';
+import './chunk-2UST7MKN.js';
 
 /**
- * Voodoo.js v0.7.0
+ * Voodoo.js v0.10.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -536,7 +536,7 @@ defineDirective(
       el.innerHTML = html ?? fallbackHtml;
       for (const child of Array.from(el.childNodes)) walk(child, scope);
     };
-    const render = async (record, current) => {
+    const render2 = async (record, current) => {
       let html = null;
       if (record?.view) {
         el.classList.add("v-router-loading");
@@ -557,7 +557,7 @@ defineDirective(
       const matched = route.matched;
       void paramsSignature(route.params);
       const record = findRecord(matched);
-      void render(record, ++token);
+      void render2(record, ++token);
     });
     cleanup(() => {
       token++;
@@ -765,8 +765,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((data) => {
     if (data && typeof data === "object") addMessages(locale, data);
   }).catch((err) => {
@@ -917,8 +917,8 @@ var frameCallbacks = /* @__PURE__ */ new Set();
 var frameHandle = 0;
 function runFrame(now) {
   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(now);
   }
   if (frameCallbacks.size > 0) frameHandle = requestAnimationFrame(runFrame);
@@ -6497,12 +6497,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 shortcut = {
+    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") shortcut.ctrl = true;
+    else if (part === "alt" || part === "option") shortcut.alt = true;
+    else if (part === "shift") shortcut.shift = true;
+    else if (part === "meta" || part === "cmd" || part === "command" || part === "win")
+      shortcut.meta = true;
+    else return null;
+  }
+  return shortcut;
+}
 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();
   });
@@ -6515,6 +6542,227 @@ function xray(force) {
   return enabled;
 }
 
+// src/jsx/index.ts
+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 render(value, templates, scope, out) {
+  if (value == null || value === false || value === true) return;
+  if (Array.isArray(value)) {
+    for (const item of value) render(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 (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 = [];
+      render(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 data = reactive({});
+    try {
+      evaluate(parse(body), new Scope(data));
+    } catch (error) {
+      if (config.devtools) {
+        console.warn("[Voodoo] could not read the declaration block", error);
+      }
+      return null;
+    }
+    node.remove();
+    return data;
+  }
+  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 data = readDeclarationBlock(root);
+  if (data) {
+    Object.assign(rootScope.data, data);
+  }
+  applyRegions(root, findScope(root));
+}
+function jsx(root = document.body) {
+  extractJsx(root);
+  activateJsx();
+}
+
 // src/devtools/launcher.ts
 var POSITION_KEY = "voodoo:devtools:widget-position";
 var HIDDEN_KEY = "voodoo:devtools:widget-hidden";
@@ -6694,9 +6942,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";
@@ -6885,6 +7133,9 @@ Object.assign(V, core, {
   query,
   ready: ready2,
   fromHtml,
+  jsx,
+  extractJsx,
+  activateJsx,
   Collection: VoodooCollection,
   // Routes
   router,
@@ -6944,6 +7195,6 @@ Object.assign(V, core, {
 });
 var src_default = V;
 
-export { V, animate, charts, src_default as default, devtoolsWidget, disableXray, easings, enableXray, getLocale, i18n, inView, isDevtoolsWidgetMounted, isXrayEnabled, motionPresets, mountDevtoolsWidget, navigate, renderChart, route, router, scrollProgress, setLocale, spring, stagger, t, unmountDevtoolsWidget, xray };
+export { V, activateJsx, animate, applyRegions, charts, src_default as default, devtoolsWidget, disableXray, easings, enableXray, extractJsx, getLocale, i18n, inView, isDevtoolsWidgetMounted, isXrayEnabled, jsx, motionPresets, mountDevtoolsWidget, navigate, readDeclarationBlock, renderChart, route, router, scrollProgress, setLocale, spring, stagger, t, unmountDevtoolsWidget, xray };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map