voodoojs 0.11.2 → 0.12.1

package/dist/index.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -2237,6 +2237,10 @@ var magics = /* @__PURE__ */ new Map();
 function magic(name, getter) {
   magics.set(name.startsWith("$") ? name : `$${name}`, getter);
 }
+var hooks = /* @__PURE__ */ new Map();
+function hook(name, getter) {
+  hooks.set(name, getter);
+}
 var Scope = class _Scope {
   // Assignment order matches the order the fields were declared in before, so
   // the properties are created in the same sequence they always were.
@@ -2292,7 +2296,10 @@ var Scope = class _Scope {
       s = s.parent;
     }
     if (name.charCodeAt(0) === 36 && magics.has(name)) {
-      return this.magicContainer(name);
+      return this.magicContainer(name, magics);
+    }
+    if (hooks.has(name)) {
+      return this.magicContainer(name, hooks);
     }
     return void 0;
   }
@@ -2321,11 +2328,11 @@ var Scope = class _Scope {
   reactiveChild(vars, el = null) {
     return new _Scope(reactive(vars), this, el ?? this.el);
   }
-  magicContainer(name) {
+  magicContainer(name, registry) {
     if (!this.magicCache) this.magicCache = /* @__PURE__ */ new Map();
     const cached = this.magicCache.get(name);
     if (cached) return cached;
-    const getter = magics.get(name);
+    const getter = registry.get(name);
     const scope = this;
     const container2 = {};
     Object.defineProperty(container2, name, {
@@ -2722,7 +2729,16 @@ function runDirective(el, attr2, scope) {
     },
     effect(fn) {
       const owner = ownerScope();
-      owner.run(() => effect(fn, { scope: owner }));
+      const hosted = () => {
+        const previous = hookHost;
+        hookHost = el;
+        try {
+          fn();
+        } finally {
+          hookHost = previous;
+        }
+      };
+      owner.run(() => effect(hosted, { scope: owner }));
     },
     cleanup(fn) {
       addCleanup(el, fn);
@@ -2770,6 +2786,56 @@ function walk(node, scope) {
     return;
   }
   initialized.add(el);
+  const previousHost = hookHost;
+  hookHost = el;
+  try {
+    walkElementDirectives(el, attrs, tagComponent, current2);
+  } finally {
+    hookHost = previousHost;
+  }
+}
+var hookHost = null;
+function currentHookHost() {
+  return hookHost;
+}
+function createDataScope(expression, parent, el) {
+  let ast = null;
+  try {
+    ast = parse(expression);
+  } catch {
+    ast = null;
+  }
+  const plain = ast && ast.t === "obj" && ast.props.every(
+    (p2) => !p2.spread && !p2.keyExpr
+  );
+  if (!plain) {
+    const raw = evaluateIn(expression, parent, "v-data");
+    return parent.reactiveChild(raw && typeof raw === "object" ? raw : {}, el);
+  }
+  const scope = parent.reactiveChild({}, el);
+  const props = ast.props;
+  for (const prop of props) {
+    if (prop.key === null) continue;
+    try {
+      if (prop.getter) {
+        const compute2 = evaluate(prop.value, scope);
+        Object.defineProperty(scope.data, prop.key, {
+          enumerable: true,
+          configurable: true,
+          get: () => compute2.call(scope.data)
+        });
+      } else {
+        scope.data[prop.key] = evaluate(prop.value, scope);
+      }
+    } catch (err) {
+      if (inDevelopment()) warnInvalidExpression(el, expression, expression, err);
+      else handleError(err, "v-data");
+    }
+  }
+  return scope;
+}
+function walkElementDirectives(el, attrs, tagComponent, scope) {
+  let current2 = scope;
   for (const attr2 of attrs) {
     const def = directives.get(attr2.name);
     if (def?.terminal) {
@@ -2789,11 +2855,10 @@ function walk(node, scope) {
       nodeScopes.set(el, current2);
     }
   } else if (dataAttr || componentAttr) {
-    const raw = dataAttr ? evaluateIn(dataAttr.expression || "{}", current2, "v-data") : {};
-    current2 = current2.reactiveChild(raw && typeof raw === "object" ? raw : {}, el);
+    current2 = createDataScope(dataAttr ? dataAttr.expression || "{}" : "{}", current2, el);
     nodeScopes.set(el, current2);
   }
-  const attributeScope = mountedComponent ? activeScope2 : current2;
+  const attributeScope = mountedComponent ? scope : current2;
   for (const attr2 of attrs) {
     if (attr2.name === "data" || attr2.name === "component") continue;
     runDirective(el, attr2, attributeScope);
@@ -2948,13 +3013,13 @@ var componentAliases = /* @__PURE__ */ new Map();
 var started = false;
 var observer = null;
 var startHooks = [];
-function onStart(hook) {
-  startHooks.push(hook);
+function onStart(hook2) {
+  startHooks.push(hook2);
 }
 function runPhase(target2, after) {
-  for (const hook of startHooks) {
+  for (const hook2 of startHooks) {
     try {
-      hook(target2, after);
+      hook2(target2, after);
     } catch (error) {
       console.error("[Voodoo] a start hook failed", error);
     }
@@ -3332,10 +3397,10 @@ var LIFECYCLE = /* @__PURE__ */ new Set([
   "destroyed"
 ]);
 function callHook(def, instance, name) {
-  const hook = def[name];
-  if (typeof hook !== "function") return;
+  const hook2 = def[name];
+  if (typeof hook2 !== "function") return;
   try {
-    hook.call(instance);
+    hook2.call(instance);
   } catch (err) {
     handleError(err, `hook ${name}`);
   }
@@ -4775,6 +4840,7 @@ var toast = Object.assign(
 );
 
 // src/storage/index.ts
+init_reactivity();
 function createStorage(getStore, prefix = "") {
   const full = (key) => prefix + key;
   return {
@@ -4944,21 +5010,28 @@ var cache2 = {
 };
 var THEME_KEY = "voodoo:theme";
 var picked = null;
+var revision = ref(0);
 var theme = {
   /** Theme chosen by the user, or `system` when never set. */
   get current() {
+    void revision.value;
     return storage.get(THEME_KEY) ?? picked ?? "system";
   },
   /** Theme effectively applied, resolving `system`. */
   get resolved() {
     const value = this.current;
     if (value !== "system") return value;
+    if (typeof document !== "undefined") {
+      const authored = document.documentElement.getAttribute("data-theme");
+      if (authored === "light" || authored === "dark") return authored;
+    }
     if (typeof matchMedia === "undefined") return "light";
     return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   },
   set(value) {
     picked = value;
     storage.set(THEME_KEY, value);
+    revision.value++;
     this.apply();
   },
   toggle() {
@@ -4992,8 +5065,17 @@ var theme = {
   init() {
     if (typeof document === "undefined") return;
     this.apply();
+    if (typeof MutationObserver !== "undefined") {
+      new MutationObserver(() => {
+        revision.value++;
+      }).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-theme"]
+      });
+    }
     if (typeof matchMedia === "undefined") return;
     matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      revision.value++;
       if (this.current === "system") this.apply();
     });
   }
@@ -5126,6 +5208,140 @@ function installMagics() {
   );
 }
 
+// src/hooks/index.ts
+init_reactivity();
+var tables = /* @__PURE__ */ new WeakMap();
+function tableFor(scope) {
+  const host = currentHookHost() ?? scope.el ?? scope;
+  let table = tables.get(host);
+  if (!table) {
+    table = { slots: [], index: 0, scheduled: false, bound: false };
+    tables.set(host, table);
+  }
+  const el = currentHookHost() ?? scope.el;
+  if (!table.bound && el) {
+    table.bound = true;
+    const owned = table;
+    addCleanup(el, () => {
+      for (const slot of owned.slots) {
+        if (slot.dispose) slot.dispose();
+        if (slot.runner) stop(slot.runner);
+      }
+      owned.slots.length = 0;
+    });
+  }
+  if (!table.scheduled) {
+    table.scheduled = true;
+    const pending2 = table;
+    queueMicrotask(() => {
+      pending2.index = 0;
+      pending2.scheduled = false;
+    });
+  }
+  return table;
+}
+function nextSlot(scope, kind) {
+  const table = tableFor(scope);
+  const at = table.index++;
+  let slot = table.slots[at];
+  if (!slot || slot.kind !== kind) {
+    if (slot) {
+      if (slot.dispose) slot.dispose();
+      if (slot.runner) stop(slot.runner);
+    }
+    slot = { kind, deps: null, value: void 0 };
+    table.slots[at] = slot;
+  }
+  return slot;
+}
+function depsChanged(previous, next) {
+  if (!previous || !next) return true;
+  if (previous.length !== next.length) return true;
+  for (let i = 0; i < next.length; i++) {
+    if (!Object.is(previous[i], next[i])) return true;
+  }
+  return false;
+}
+function normalizeDeps(deps) {
+  return Array.isArray(deps) ? deps.slice() : null;
+}
+function useState(scope, initial) {
+  const slot = nextSlot(scope, "state");
+  if (slot.value === void 0) slot.value = ref(initial);
+  return slot.value;
+}
+function useEffect(scope, fn, deps) {
+  const slot = nextSlot(scope, "effect");
+  const next = normalizeDeps(deps);
+  const runCleanup = () => {
+    if (slot.dispose) {
+      const dispose = slot.dispose;
+      slot.dispose = void 0;
+      dispose();
+    }
+  };
+  if (next) {
+    const first = slot.deps === null && !slot.runner;
+    if (first || depsChanged(slot.deps, next)) {
+      slot.deps = next;
+      runCleanup();
+      const result = fn();
+      if (typeof result === "function") slot.dispose = result;
+    }
+    return;
+  }
+  if (slot.runner) return;
+  slot.deps = null;
+  slot.runner = effect(() => {
+    runCleanup();
+    const result = fn();
+    if (typeof result === "function") slot.dispose = result;
+  });
+}
+function useMemo(scope, fn, deps) {
+  const slot = nextSlot(scope, "memo");
+  const next = normalizeDeps(deps);
+  if (!next) {
+    if (!slot.value) slot.value = computed(fn);
+    return slot.value;
+  }
+  if (!slot.value) {
+    slot.value = ref(fn());
+    slot.deps = next;
+  } else if (depsChanged(slot.deps, next)) {
+    slot.deps = next;
+    slot.value.value = fn();
+  }
+  return slot.value;
+}
+function useRef(scope, initial) {
+  const slot = nextSlot(scope, "ref");
+  if (!slot.value) slot.value = markRaw({ current: initial });
+  return slot.value;
+}
+function useContext(name, initial) {
+  if (initial !== void 0 && !(name in allStores)) {
+    store(name, initial);
+  }
+  return allStores[name];
+}
+function installHooks() {
+  hook("useState", (scope) => (initial) => useState(scope, initial));
+  hook(
+    "useEffect",
+    (scope) => (fn, deps) => useEffect(scope, fn, deps)
+  );
+  hook(
+    "useMemo",
+    (scope) => (fn, deps) => useMemo(scope, fn, deps)
+  );
+  hook("useRef", (scope) => (initial) => useRef(scope, initial));
+  hook(
+    "useContext",
+    () => (name, initial) => useContext(name, initial)
+  );
+}
+
 // src/http/resource.ts
 init_reactivity();
 function pick(value, path) {
@@ -6708,6 +6924,7 @@ setComponentMounter(mountComponent);
 setScopeMarker(markNodeScope);
 setDirectiveRegistrar(directive);
 installMagics();
+installHooks();
 var eventBus = /* @__PURE__ */ new Map();
 function on(name, handler) {
   let set2 = eventBus.get(name);
@@ -6741,7 +6958,7 @@ function off(name, handler) {
   eventBus.get(name)?.delete(handler);
 }
 function directive(name, definition) {
-  const hooks = typeof definition === "function" ? { mounted: definition, updated: definition } : definition;
+  const hooks2 = typeof definition === "function" ? { mounted: definition, updated: definition } : definition;
   defineDirective(
     name,
     (ctx) => {
@@ -6757,36 +6974,36 @@ function directive(name, definition) {
         scope: ctx.scope,
         instance: ctx.scope.owner?.component ?? null
       });
-      const initial = hooks.raw ? ctx.expression : ctx.evaluate();
-      hooks.created?.(ctx.el, makeBinding(initial));
-      hooks.beforeMount?.(ctx.el, makeBinding(initial));
+      const initial = hooks2.raw ? ctx.expression : ctx.evaluate();
+      hooks2.created?.(ctx.el, makeBinding(initial));
+      hooks2.beforeMount?.(ctx.el, makeBinding(initial));
       ctx.effect(() => {
-        const value = hooks.raw ? ctx.expression : ctx.evaluate();
+        const value = hooks2.raw ? ctx.expression : ctx.evaluate();
         if (!mounted2) {
           mounted2 = true;
           oldValue = value;
-          hooks.mounted?.(ctx.el, makeBinding(value));
+          hooks2.mounted?.(ctx.el, makeBinding(value));
           return;
         }
         if (value === oldValue) return;
         const binding = makeBinding(value);
-        hooks.updated?.(ctx.el, binding);
+        hooks2.updated?.(ctx.el, binding);
         oldValue = value;
       });
       ctx.cleanup(() => {
         const binding = makeBinding(oldValue);
-        hooks.beforeUnmount?.(ctx.el, binding);
-        hooks.unmounted?.(ctx.el, binding);
+        hooks2.beforeUnmount?.(ctx.el, binding);
+        hooks2.unmounted?.(ctx.el, binding);
       });
     },
-    { priority: hooks.priority ?? exports.PRIORITY.DEFAULT, terminal: hooks.terminal ?? false }
+    { priority: hooks2.priority ?? exports.PRIORITY.DEFAULT, terminal: hooks2.terminal ?? false }
   );
 }
 function data(values) {
   Object.defineProperties(rootScope.data, Object.getOwnPropertyDescriptors(values));
   return rootScope.data;
 }
-var version2 = "0.11.2";
+var version2 = "0.12.1";
 var core = {
   // Utilities first: Voodoo's own names can override.
   ...utils_exports,
@@ -13148,12 +13365,15 @@ magic("$history", (scope) => scope.el ? findController(scope.el) : null);
 
 // src/sound/index.ts
 init_registry();
+init_reactivity();
+init_style();
 var audioContext = null;
 var masterVolume = 0.35;
 var isMuted = false;
 var hasLoadedPreference = false;
 var VOLUME_KEY = "voodoo:sound:volume";
 var MUTE_KEY = "voodoo:sound:muted";
+var muteRevision = ref(0);
 function loadPreference() {
   if (hasLoadedPreference) return;
   hasLoadedPreference = true;
@@ -13465,6 +13685,7 @@ var sound = {
     loadPreference();
     isMuted = value;
     storage.set(MUTE_KEY, isMuted);
+    muteRevision.value++;
   },
   /** Unmutes sound. */
   unmute() {
@@ -13476,8 +13697,18 @@ var sound = {
     this.mute(!isMuted);
     return isMuted;
   },
-  /** `true` when muted. */
+  /**
+   * `true` when muted.
+   *
+   * Reads a revision ref first, so that an expression asking whether sound is
+   * muted actually re-runs when it changes. The state lives in a module
+   * variable and in localStorage, both invisible to the Proxy, so
+   * `v-show="$sound.muted"` used to render once and then never move: a page had
+   * no way to show whether it was muted, which made the mute button look like
+   * it did nothing at all.
+   */
   get muted() {
+    void muteRevision.value;
     loadPreference();
     return isMuted;
   },
@@ -13527,11 +13758,18 @@ defineDirective("sound", ({ el, arg, expression, modifiers, scope, cleanup, eval
   el.addEventListener(event, play);
   cleanup(() => el.removeEventListener(event, play));
 });
+var MUTE_CSS = `
+.v-muted{opacity:.55}
+.v-muted::after{content:" \\1F507";font-size:.9em}
+.v-mute-on::after{content:" \\1F50A";font-size:.9em}
+`;
 defineDirective("mute", ({ el, cleanup }) => {
+  injectStyle("mute", MUTE_CSS);
   const sync = () => {
     const isMuted2 = sound.muted;
     el.setAttribute("aria-pressed", String(isMuted2));
     el.classList.toggle("v-muted", isMuted2);
+    el.classList.toggle("v-mute-on", !isMuted2);
   };
   const toggle = () => {
     sound.toggle();
@@ -23569,11 +23807,14 @@ exports.getLocale = getLocale;
 exports.getScope = getScope;
 exports.gpu = gpu;
 exports.groupBy = groupBy;
+exports.hook = hook;
+exports.hooks = hooks;
 exports.hotkey = hotkey;
 exports.http = http;
 exports.i18n = i18n;
 exports.inView = inView;
 exports.injectStyle = injectStyle;
+exports.installHooks = installHooks;
 exports.instances = instances;
 exports.isBrowser = isBrowser;
 exports.isDevtoolsWidgetMounted = isDevtoolsWidgetMounted;
@@ -23660,6 +23901,11 @@ exports.unmask = unmask;
 exports.unmountDevtoolsWidget = unmountDevtoolsWidget;
 exports.unref = unref;
 exports.url = url;
+exports.useContext = useContext;
+exports.useEffect = useEffect;
+exports.useMemo = useMemo;
+exports.useRef = useRef;
+exports.useState = useState;
 exports.uuid = uuid;
 exports.validate = validate;
 exports.validator = validator;

package/dist/index.d.cts

@@ -1,5 +1,6 @@
-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';
+import { S as Scope, c as core, V as VoodooCollection } from './query-XooOh4vB.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 hook, H as hooks, I as injectStyle, J as instances, K as leave, L as magic, M as magics, N as mountComponent, O as parse, Q as query, T as ready, U as refresh, W as removeStore, q as resource, X as rootScope, Y as session, Z as slideDown, _ as slideUp, $ as start, a0 as storage, a1 as store, a2 as storeNames, a3 as stringify, a4 as theme, a5 as toast, a6 as tokenize, a7 as url, a8 as viewTransition, a9 as walk, aa as whenElement, ab as whenReady } from './query-XooOh4vB.cjs';
+import { Ref } from './reactivity.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';
@@ -171,7 +172,16 @@ declare const sound: {
     unmute(): void;
     /** Toggles between muted and unmuted, and returns the new state. */
     toggle(): boolean;
-    /** `true` when muted. */
+    /**
+     * `true` when muted.
+     *
+     * Reads a revision ref first, so that an expression asking whether sound is
+     * muted actually re-runs when it changes. The state lives in a module
+     * variable and in localStorage, both invisible to the Proxy, so
+     * `v-show="$sound.muted"` used to render once and then never move: a page had
+     * no way to show whether it was muted, which made the mute button look like
+     * it did nothing at all.
+     */
     readonly muted: boolean;
     /** Names of all available effects. */
     readonly names: string[];
@@ -481,6 +491,80 @@ declare const charts: {
     colors: string[];
 };
 
+/**
+ * @module hooks
+ *
+ * React-style hooks, reachable by bare name inside any expression.
+ *
+ * These are a thin surface over primitives the library already had — `effect`,
+ * `computed`, `ref` and `store`. The value is not new machinery, it is that
+ * someone arriving from React can write what they already know and have it mean
+ * the right thing here.
+ *
+ * Two differences from React are deliberate, and both are improvements rather
+ * than gaps:
+ *
+ * 1. `deps` is optional everywhere. Voodoo tracks reads through a Proxy, so a
+ *    hook with no dependency array re-runs exactly when something it actually
+ *    read changes. The array is there for when you want to narrow that, not
+ *    because the library cannot work it out.
+ *
+ * 2. There is no rule against calling a hook in a branch. Slots are keyed per
+ *    scope in call order within one evaluation, and `v-data` and `v-init` each
+ *    evaluate once per scope, so the order is stable without a rule asking you
+ *    to keep it stable.
+ *
+ * `useState` and `useMemo` return refs, and `reactive()` unwraps refs on read,
+ * so inside `v-data` they read as plain values with no `.value` anywhere.
+ * `useRef` deliberately does not: it returns a raw `{ current }` box that no
+ * effect subscribes to, which is the whole point of it.
+ */
+
+/**
+ * A value that survives re-evaluation and re-renders whatever reads it.
+ *
+ * Returns a ref. Written into `v-data` it reads and assigns as a plain value,
+ * because reactive objects unwrap refs, so `count++` works with no `.value`.
+ */
+declare function useState<T>(scope: Scope, initial: T): Ref<T>;
+/**
+ * Runs a side effect, and re-runs it when what it depends on changes.
+ *
+ * With no dependency array it tracks its own reads and re-runs when any of them
+ * change. With `[]` it runs once. With `[a, b]` it re-runs only when one of
+ * those differs from last time. Returning a function from `fn` registers
+ * cleanup, called before the next run and again when the element is removed.
+ */
+declare function useEffect(scope: Scope, fn: () => void | (() => void), deps?: unknown): void;
+/**
+ * Caches a computation.
+ *
+ * With no dependency array it becomes a `computed`: lazy, cached, and
+ * recomputed only when something it read actually changed. With an array it
+ * recomputes when that array changes. Returns a ref, so inside `v-data` it
+ * reads as the value itself.
+ */
+declare function useMemo<T>(scope: Scope, fn: () => T, deps?: unknown): Ref<T>;
+/**
+ * A box that survives re-evaluation and that nothing subscribes to.
+ *
+ * Use it for a DOM element, a timer id, or a previous value — anything you want
+ * to keep without the page reacting when it changes. Deliberately not a ref, so
+ * reading `.current` inside an effect does not make that effect depend on it.
+ */
+declare function useRef<T>(scope: Scope, initial: T): {
+    current: T;
+};
+/**
+ * Shared state, reachable from any component without threading it through the
+ * markup by hand.
+ *
+ * Backed by the store registry, so `useContext('user')` and `$store.user` are
+ * the same object. Passing a second argument creates the store on first use.
+ */
+declare function useContext<T extends Record<string, any>>(name: string, initial?: T): T;
+declare function installHooks(): void;
+
 /**
  * @module runtime/magics
  *
@@ -1714,4 +1798,4 @@ interface Voodoo extends Omit<typeof core, never> {
 }
 declare const V: Voodoo;
 
-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 };
+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, installHooks, 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, useContext, useEffect, useMemo, useRef, useState, validate, validator, xray };