voodoojs 0.11.2 → 0.12.1

package/README.md

@@ -22,7 +22,7 @@ npm install voodoojs
 Or drop it into a page, with nothing else:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/voodoojs@0.11.2/dist/voodoo.full.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/voodoojs@0.12.1/dist/voodoo.full.min.js" defer></script>
 
 <div v-data="{ count: 0 }">
   <button @click="count++">Clicked { count } times</button>

package/dist/{chunk-H2ZUEQWV.js → chunk-4M4ZXHNY.js}

@@ -1,10 +1,10 @@
-import { reactive, handleError, EffectScope, effect } from './chunk-WJP3YGUI.js';
-import { inDevelopment, warnInvalidExpression, warnUnknownDirective } from './chunk-UV5PMS7P.js';
-import { config, directives, components } from './chunk-NFDXVIII.js';
-import { __publicField } from './chunk-IS3DR2KY.js';
+import { reactive, handleError, EffectScope, effect } from './chunk-LLNDLLKV.js';
+import { inDevelopment, warnInvalidExpression, warnUnknownDirective } from './chunk-72PMUUMT.js';
+import { config, directives, components } from './chunk-T5ION5NG.js';
+import { __publicField } from './chunk-GXPNWCGE.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -1417,6 +1417,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.
@@ -1472,7 +1476,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;
   }
@@ -1501,11 +1508,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 container = {};
     Object.defineProperty(container, name, {
@@ -1826,7 +1833,16 @@ function runDirective(el, attr, 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);
@@ -1874,6 +1890,56 @@ function walk(node, scope) {
     return;
   }
   initialized.add(el);
+  const previousHost = hookHost;
+  hookHost = el;
+  try {
+    walkElementDirectives(el, attrs, tagComponent, current);
+  } 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(
+    (p) => !p.spread && !p.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 compute = evaluate(prop.value, scope);
+        Object.defineProperty(scope.data, prop.key, {
+          enumerable: true,
+          configurable: true,
+          get: () => compute.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 current = scope;
   for (const attr of attrs) {
     const def = directives.get(attr.name);
     if (def?.terminal) {
@@ -1893,11 +1959,10 @@ function walk(node, scope) {
       nodeScopes.set(el, current);
     }
   } else if (dataAttr || componentAttr) {
-    const raw = dataAttr ? evaluateIn(dataAttr.expression || "{}", current, "v-data") : {};
-    current = current.reactiveChild(raw && typeof raw === "object" ? raw : {}, el);
+    current = createDataScope(dataAttr ? dataAttr.expression || "{}" : "{}", current, el);
     nodeScopes.set(el, current);
   }
-  const attributeScope = mountedComponent ? activeScope : current;
+  const attributeScope = mountedComponent ? scope : current;
   for (const attr of attrs) {
     if (attr.name === "data" || attr.name === "component") continue;
     runDirective(el, attr, attributeScope);
@@ -2052,13 +2117,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(target, after) {
-  for (const hook of startHooks) {
+  for (const hook2 of startHooks) {
     try {
-      hook(target, after);
+      hook2(target, after);
     } catch (error) {
       console.error("[Voodoo] a start hook failed", error);
     }
@@ -2109,6 +2174,6 @@ function refresh(root) {
   walk(root ?? document.body, root ? findScope(root.parentNode) : rootScope);
 }
 
-export { Scope, VoodooRuntimeError, VoodooSyntaxError, addCleanup, allowedGlobals, clearParseCache, closestDirective, collectDirectives, componentAliases, destroy, evaluate, evaluateIn, findScope, getEffectScopes, getScope, hadDirectives, hasAttr, hasDirective, hasDirectives, isInitialized, magic, magics, markInitialized, markNodeScope, markSkipChildren, onStart, originalAttributes, parse, parseAttribute, queryDirective, readAttr, refresh, removeQuietly, restoreAttributes, rootScope, setComponentMounter, start, stopObserving, stringify, tokenize, unwrap, walk };
-//# sourceMappingURL=chunk-H2ZUEQWV.js.map
-//# sourceMappingURL=chunk-H2ZUEQWV.js.map
+export { Scope, VoodooRuntimeError, VoodooSyntaxError, addCleanup, allowedGlobals, clearParseCache, closestDirective, collectDirectives, componentAliases, currentHookHost, destroy, evaluate, evaluateIn, findScope, getEffectScopes, getScope, hadDirectives, hasAttr, hasDirective, hasDirectives, hook, hooks, isInitialized, magic, magics, markInitialized, markNodeScope, markSkipChildren, onStart, originalAttributes, parse, parseAttribute, queryDirective, readAttr, refresh, removeQuietly, restoreAttributes, rootScope, setComponentMounter, start, stopObserving, stringify, tokenize, unwrap, walk };
+//# sourceMappingURL=chunk-4M4ZXHNY.js.map
+//# sourceMappingURL=chunk-4M4ZXHNY.js.map

package/dist/{chunk-UV5PMS7P.js → chunk-72PMUUMT.js}

@@ -1,7 +1,7 @@
-import { config } from './chunk-NFDXVIII.js';
+import { config } from './chunk-T5ION5NG.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -78,5 +78,5 @@ function warnAlias(alias, canonical) {
 }
 
 export { describeElement, inDevelopment, warn, warnAlias, warnDuplicateKey, warnInvalidExpression, warnOnce, warnRequiredProp, warnUnknownComponent, warnUnknownDirective };
-//# sourceMappingURL=chunk-UV5PMS7P.js.map
-//# sourceMappingURL=chunk-UV5PMS7P.js.map
+//# sourceMappingURL=chunk-72PMUUMT.js.map
+//# sourceMappingURL=chunk-72PMUUMT.js.map

package/dist/{chunk-KQYSJHZR.js → chunk-AFMCDNYS.js}

@@ -1,8 +1,8 @@
-import { handleError } from './chunk-WJP3YGUI.js';
-import { warn } from './chunk-UV5PMS7P.js';
+import { handleError } from './chunk-LLNDLLKV.js';
+import { warn } from './chunk-72PMUUMT.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -1192,5 +1192,5 @@ var gpu = {
 };
 
 export { clock, compute, describeWgslType, destroy, effect, findEntry, flattenValue, frame, frameLoop, gpu, inferStruct, init, packStruct, reflectBindings, reflectEntries, reflectStructs, reflectWgsl, resetShared, shared, splitTopLevel, stripWgslComments, supported, surface, target, uniforms, writeField, writeStruct };
-//# sourceMappingURL=chunk-KQYSJHZR.js.map
-//# sourceMappingURL=chunk-KQYSJHZR.js.map
+//# sourceMappingURL=chunk-AFMCDNYS.js.map
+//# sourceMappingURL=chunk-AFMCDNYS.js.map

package/dist/{chunk-DJJB35SR.js → chunk-D7675IJG.js}

@@ -1,9 +1,9 @@
-import { warnOnce } from './chunk-UV5PMS7P.js';
-import { parseDuration } from './chunk-IGZSDZKU.js';
-import { __publicField } from './chunk-IS3DR2KY.js';
+import { warnOnce } from './chunk-72PMUUMT.js';
+import { parseDuration } from './chunk-KN7NAKBL.js';
+import { __publicField } from './chunk-GXPNWCGE.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -444,5 +444,5 @@ var http = {
 };
 
 export { HttpError, clearCache, flushOfflineQueue, http, request };
-//# sourceMappingURL=chunk-DJJB35SR.js.map
-//# sourceMappingURL=chunk-DJJB35SR.js.map
+//# sourceMappingURL=chunk-D7675IJG.js.map
+//# sourceMappingURL=chunk-D7675IJG.js.map

package/dist/{chunk-IS3DR2KY.js → chunk-GXPNWCGE.js}

@@ -1,5 +1,5 @@
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -12,5 +12,5 @@ var __export = (target, all) => {
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 export { __export, __publicField };
-//# sourceMappingURL=chunk-IS3DR2KY.js.map
-//# sourceMappingURL=chunk-IS3DR2KY.js.map
+//# sourceMappingURL=chunk-GXPNWCGE.js.map
+//# sourceMappingURL=chunk-GXPNWCGE.js.map

package/dist/{chunk-DCE5WIGA.js → chunk-HNM3CTBD.js}

@@ -1,8 +1,8 @@
-import { reactive } from './chunk-WJP3YGUI.js';
-import { warnOnce } from './chunk-UV5PMS7P.js';
+import { reactive } from './chunk-LLNDLLKV.js';
+import { warnOnce } from './chunk-72PMUUMT.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -942,5 +942,5 @@ Object.defineProperty(factory, "open", {
 var socket = factory;
 
 export { ENGINE, SIO, createSocket, decodeEngine, decodeSocketIo, devtoolsBus, encodeSocketIo, engineURL, resolveSocketURL, socket, socketSupported };
-//# sourceMappingURL=chunk-DCE5WIGA.js.map
-//# sourceMappingURL=chunk-DCE5WIGA.js.map
+//# sourceMappingURL=chunk-HNM3CTBD.js.map
+//# sourceMappingURL=chunk-HNM3CTBD.js.map

package/dist/{chunk-IGZSDZKU.js → chunk-KN7NAKBL.js}

@@ -1,7 +1,7 @@
-import { __export } from './chunk-IS3DR2KY.js';
+import { __export } from './chunk-GXPNWCGE.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -397,5 +397,5 @@ var device = {
 };
 
 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, utils_exports, uuid };
-//# sourceMappingURL=chunk-IGZSDZKU.js.map
-//# sourceMappingURL=chunk-IGZSDZKU.js.map
+//# sourceMappingURL=chunk-KN7NAKBL.js.map
+//# sourceMappingURL=chunk-KN7NAKBL.js.map

package/dist/{chunk-WJP3YGUI.js → chunk-LLNDLLKV.js}

@@ -1,7 +1,7 @@
-import { __publicField } from './chunk-IS3DR2KY.js';
+import { __publicField } from './chunk-GXPNWCGE.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -637,5 +637,5 @@ function traverse(value, seen = /* @__PURE__ */ new Set()) {
 }
 
 export { EffectScope, ITERATE_KEY, ReactiveEffect, TriggerType, computed, effect, effectScope, enableTracking, flushSync, getActiveEffect, getActiveScope, handleError, hasChanged, isReactive, isRef, markRaw, nextTick, pauseTracking, queueJob, queuePostFlush, reactive, ref, resetTracking, setErrorHandler, shallowRef, stop, toRaw, track, trigger, unref, warn, watch, watchEffect };
-//# sourceMappingURL=chunk-WJP3YGUI.js.map
-//# sourceMappingURL=chunk-WJP3YGUI.js.map
+//# sourceMappingURL=chunk-LLNDLLKV.js.map
+//# sourceMappingURL=chunk-LLNDLLKV.js.map

package/dist/{chunk-V3O3WOZH.js → chunk-NP66JM2P.js}

@@ -1,7 +1,7 @@
-import { config } from './chunk-NFDXVIII.js';
+import { config } from './chunk-T5ION5NG.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -68,5 +68,5 @@ function ensureTokens() {
 }
 
 export { BASE_TOKENS, ensureTokens, injectStyle };
-//# sourceMappingURL=chunk-V3O3WOZH.js.map
-//# sourceMappingURL=chunk-V3O3WOZH.js.map
+//# sourceMappingURL=chunk-NP66JM2P.js.map
+//# sourceMappingURL=chunk-NP66JM2P.js.map

package/dist/{chunk-AH2VXDZD.js → chunk-RDHYPGH6.js}

@@ -1,14 +1,14 @@
-import { http, HttpError, request } from './chunk-DJJB35SR.js';
-import { stringify, markInitialized, markSkipChildren, destroy, walk, removeQuietly, evaluateIn, addCleanup, markNodeScope, setComponentMounter, closestDirective, magic, readAttr, hasAttr, componentAliases, Scope, queryDirective, parse, evaluate, parseAttribute, originalAttributes, hasDirective, findScope, VoodooRuntimeError, VoodooSyntaxError, allowedGlobals, clearParseCache, tokenize, getScope, stopObserving, refresh, start, magics, rootScope, isInitialized, restoreAttributes, hasDirectives } from './chunk-H2ZUEQWV.js';
-import { ref, reactive, handleError, nextTick, queuePostFlush, warn, watch, EffectScope, computed, effect, toRaw, flushSync, effectScope, stop, unref, markRaw, watchEffect, shallowRef, setErrorHandler } from './chunk-WJP3YGUI.js';
-import { warnDuplicateKey, warn as warn$1, describeElement, warnUnknownComponent, warnAlias, warnRequiredProp } from './chunk-UV5PMS7P.js';
-import { parseDuration, debounce, utils_exports, throttle, uid, device, escapeHtml } from './chunk-IGZSDZKU.js';
-import { injectStyle, ensureTokens } from './chunk-V3O3WOZH.js';
-import { defineDirective, config, PRIORITY, directives, normalizeComponentName, components, usePlugin } from './chunk-NFDXVIII.js';
-import { __publicField } from './chunk-IS3DR2KY.js';
+import { http, HttpError, request } from './chunk-D7675IJG.js';
+import { stringify, markInitialized, markSkipChildren, destroy, walk, removeQuietly, evaluateIn, addCleanup, markNodeScope, setComponentMounter, closestDirective, magic, readAttr, hasAttr, componentAliases, Scope, hook, queryDirective, parse, evaluate, parseAttribute, originalAttributes, hasDirective, currentHookHost, findScope, VoodooRuntimeError, VoodooSyntaxError, allowedGlobals, clearParseCache, tokenize, getScope, stopObserving, refresh, start, magics, rootScope, isInitialized, restoreAttributes, hasDirectives } from './chunk-4M4ZXHNY.js';
+import { ref, reactive, handleError, nextTick, queuePostFlush, warn, watch, EffectScope, computed, effect, toRaw, markRaw, stop, flushSync, effectScope, unref, watchEffect, shallowRef, setErrorHandler } from './chunk-LLNDLLKV.js';
+import { warnDuplicateKey, warn as warn$1, describeElement, warnUnknownComponent, warnAlias, warnRequiredProp } from './chunk-72PMUUMT.js';
+import { parseDuration, debounce, utils_exports, throttle, uid, device, escapeHtml } from './chunk-KN7NAKBL.js';
+import { injectStyle, ensureTokens } from './chunk-NP66JM2P.js';
+import { defineDirective, config, PRIORITY, directives, normalizeComponentName, components, usePlugin } from './chunk-T5ION5NG.js';
+import { __publicField } from './chunk-GXPNWCGE.js';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -338,10 +338,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}`);
   }
@@ -1116,21 +1116,28 @@ var cache = {
 };
 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() {
@@ -1164,8 +1171,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();
     });
   }
@@ -1298,6 +1314,139 @@ function installMagics() {
   );
 }
 
+// src/hooks/index.ts
+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 pending = table;
+    queueMicrotask(() => {
+      pending.index = 0;
+      pending.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
 function pick(value, path) {
   if (!path) return value;
@@ -2662,7 +2811,7 @@ var jsonStylesInjected = false;
 function injectJSONStyles() {
   if (jsonStylesInjected) return;
   jsonStylesInjected = true;
-  void import('./style-4X62SABN.js').then(({ injectStyle: injectStyle2 }) => {
+  void import('./style-GR4X6O7I.js').then(({ injectStyle: injectStyle2 }) => {
     injectStyle2(
       "json-render",
       `
@@ -2871,6 +3020,7 @@ setComponentMounter(mountComponent);
 setScopeMarker(markNodeScope);
 setDirectiveRegistrar(directive);
 installMagics();
+installHooks();
 var eventBus = /* @__PURE__ */ new Map();
 function on(name, handler) {
   let set = eventBus.get(name);
@@ -2949,7 +3099,7 @@ 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,
@@ -8367,6 +8517,7 @@ 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;
@@ -8678,6 +8829,7 @@ var sound = {
     loadPreference();
     isMuted = value;
     storage.set(MUTE_KEY, isMuted);
+    muteRevision.value++;
   },
   /** Unmutes sound. */
   unmute() {
@@ -8689,8 +8841,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;
   },
@@ -8740,11 +8902,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();
@@ -10270,6 +10439,6 @@ defineDirective(
   { priority: PRIORITY.MODEL + 5 }
 );
 
-export { VoodooCollection, alert, allStores, applyMask, cache, clearErrors, clipboard, confirm, cookie, core, createApp, createResource, defineComponent, dialog, efeitos, ensurePalette, enter, fadeIn, fadeOut, fromHtml, hotkey, instances, leave, mask, masks, messages, modal, mountComponent, network, palette, prompt, query, ready, ready2, registerMask, removeStore, screen, serializeForm, session, showFieldError, showFormErrors, slideDown, slideUp, sound, storage, store, storeNames, theme, toast, unmask, url, validate, validator, viewTransition, whenElement, whenReady };
-//# sourceMappingURL=chunk-AH2VXDZD.js.map
-//# sourceMappingURL=chunk-AH2VXDZD.js.map
+export { VoodooCollection, alert, allStores, applyMask, cache, clearErrors, clipboard, confirm, cookie, core, createApp, createResource, defineComponent, dialog, efeitos, ensurePalette, enter, fadeIn, fadeOut, fromHtml, hotkey, installHooks, instances, leave, mask, masks, messages, modal, mountComponent, network, palette, prompt, query, ready, ready2, registerMask, removeStore, screen, serializeForm, session, showFieldError, showFormErrors, slideDown, slideUp, sound, storage, store, storeNames, theme, toast, unmask, url, useContext, useEffect, useMemo, useRef, useState, validate, validator, viewTransition, whenElement, whenReady };
+//# sourceMappingURL=chunk-RDHYPGH6.js.map
+//# sourceMappingURL=chunk-RDHYPGH6.js.map

package/dist/{chunk-NFDXVIII.js → chunk-T5ION5NG.js}

@@ -1,5 +1,5 @@
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.1
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -61,5 +61,5 @@ function usePlugin(V, plugin, options) {
 }
 
 export { PRIORITY, components, config, defineDirective, directives, normalizeComponentName, usePlugin };
-//# sourceMappingURL=chunk-NFDXVIII.js.map
-//# sourceMappingURL=chunk-NFDXVIII.js.map
+//# sourceMappingURL=chunk-T5ION5NG.js.map
+//# sourceMappingURL=chunk-T5ION5NG.js.map