voodoojs 0.11.2 → 0.12.2

package/dist/http.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.2
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */

package/dist/http.js

@@ -1,7 +1,7 @@
-export { HttpError, clearCache, flushOfflineQueue, http, request } from './chunk-DJJB35SR.js';
-import './chunk-UV5PMS7P.js';
-import './chunk-IGZSDZKU.js';
-import './chunk-NFDXVIII.js';
-import './chunk-IS3DR2KY.js';
+export { HttpError, clearCache, flushOfflineQueue, http, request } from './chunk-NVANUFWZ.js';
+import './chunk-YV4I45SK.js';
+import './chunk-7AKBELZA.js';
+import './chunk-RXOLGHSU.js';
+import './chunk-MEE2ZAKJ.js';
 //# sourceMappingURL=http.js.map
 //# sourceMappingURL=http.js.map

package/dist/index.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.2
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -1773,6 +1773,23 @@ var DELIBERATELY_WITHHELD = /* @__PURE__ */ new Set([
   "SharedWorker",
   "ServiceWorker"
 ]);
+function guardedTimer(name) {
+  return function(handler, timeout, ...rest) {
+    if (typeof handler !== "function") {
+      throw new VoodooRuntimeError(
+        `${name} needs a function. Passing a string would compile it, which this library never does.`
+      );
+    }
+    const timer = globalThis[name];
+    return timer(handler, timeout, ...rest);
+  };
+}
+function forwardGlobal(name) {
+  return function(...args) {
+    const fn = globalThis[name];
+    return fn(...args);
+  };
+}
 var allowedGlobals = {
   Math,
   JSON,
@@ -1791,7 +1808,17 @@ var allowedGlobals = {
   isFinite,
   encodeURIComponent,
   decodeURIComponent,
-  console
+  console,
+  ...typeof setTimeout !== "undefined" ? {
+    setTimeout: guardedTimer("setTimeout"),
+    setInterval: guardedTimer("setInterval"),
+    clearTimeout: forwardGlobal("clearTimeout"),
+    clearInterval: forwardGlobal("clearInterval")
+  } : {},
+  ...typeof requestAnimationFrame !== "undefined" ? {
+    requestAnimationFrame: forwardGlobal("requestAnimationFrame"),
+    cancelAnimationFrame: forwardGlobal("cancelAnimationFrame")
+  } : {}
 };
 var VoodooRuntimeError = class extends Error {
   constructor(message, expression) {
@@ -2237,6 +2264,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 +2323,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 +2355,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 +2756,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 +2813,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 +2882,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 +3040,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 +3424,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 +4867,7 @@ var toast = Object.assign(
 );
 
 // src/storage/index.ts
+init_reactivity();
 function createStorage(getStore, prefix = "") {
   const full = (key) => prefix + key;
   return {
@@ -4944,21 +5037,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 +5092,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 +5235,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 +6951,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 +6985,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 +7001,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.2";
 var core = {
   // Utilities first: Voodoo's own names can override.
   ...utils_exports,
@@ -9908,6 +10152,7 @@ defineDirective("collapse", ({ el }) => {
   ensureUi();
   collapseOf(el);
 });
+var selfToggling = /* @__PURE__ */ new WeakSet();
 defineDirective("collapse-toggle", ({ el, expression, cleanup }) => {
   ensureUi();
   const target2 = resolveTarget(el, expression);
@@ -9916,6 +10161,8 @@ defineDirective("collapse-toggle", ({ el, expression, cleanup }) => {
   controller.triggers.add(el);
   controller.sync();
   makeInteractive(el, cleanup);
+  selfToggling.add(el);
+  cleanup(() => selfToggling.delete(el));
   const onClick = (event) => {
     event.preventDefault();
     controller.toggle();
@@ -10326,10 +10573,11 @@ defineDirective("accordion", ({ el, cleanup }) => {
     if (index === -1) return;
     event.preventDefault();
     const controller = controllers2[index];
-    if (single && !controller.open) {
+    const ownToggle = selfToggling.has(header);
+    if (single && (ownToggle ? controller.open : !controller.open)) {
       for (const other of controllers2) if (other !== controller) other.hide();
     }
-    controller.toggle();
+    if (!ownToggle) controller.toggle();
   };
   const onKeyDown = (event) => {
     const header = event.target?.closest(".v-accordion-header");
@@ -13148,12 +13396,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 +13716,7 @@ var sound = {
     loadPreference();
     isMuted = value;
     storage.set(MUTE_KEY, isMuted);
+    muteRevision.value++;
   },
   /** Unmutes sound. */
   unmute() {
@@ -13476,8 +13728,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 +13789,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();
@@ -17829,8 +18098,22 @@ register("v-table", {
     }
   },
   methods: {
-    cell(row, column) {
-      const value = get(row, column.key);
+    /**
+     * A row may be an object keyed by column, or a positional array.
+     *
+     * Only the object form was ever read. The documentation's own example on
+     * the components page passes `[['Ada', 'Engineer']]` against columns
+     * `['Name', 'Role']`, and looking `'Name'` up on an array finds nothing, so
+     * every cell rendered empty while the header row and the row count both
+     * looked perfectly right — which is a hard failure to even notice, let
+     * alone diagnose.
+     *
+     * The index comes from the template rather than `cols.indexOf(column)`,
+     * because `cols` is a computed and identity is not guaranteed to survive a
+     * recomputation.
+     */
+    cell(row, column, index) {
+      const value = Array.isArray(row) && typeof index === "number" ? row[index] : get(row, column.key);
       if (value === null || value === void 0) return "";
       return String(value);
     },
@@ -17878,8 +18161,8 @@ register("v-table", {
         </thead>
         <tbody>
           <tr v-for="(row, index) in sorted" :key="index">
-            <td v-for="column in cols" :key="column.key" :style="alignStyle(column)"
-              v-text="cell(row, column)"></td>
+            <td v-for="(column, ci) in cols" :key="column.key" :style="alignStyle(column)"
+              v-text="cell(row, column, ci)"></td>
           </tr>
           <tr v-if="!sorted.length">
             <td class="v-table-empty" :colspan="cols.length || 1" v-text="empty"></td>
@@ -23569,11 +23852,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 +23946,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;