voodoojs 0.11.2 → 0.12.2

package/dist/voodoo.full.js

@@ -1,5 +1,5 @@
 /**
- * Voodoo.js v0.11.2
+ * Voodoo.js v0.12.2
  * JavaScript feels like magic.
  * (c) 2026 Voodoo.js contributors. MIT License.
  */
@@ -1798,6 +1798,23 @@ ${pointer}`);
     "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,
@@ -1816,7 +1833,17 @@ ${pointer}`);
     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) {
@@ -2263,6 +2290,10 @@ Expression: ${expression}` : message);
   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.
@@ -2318,7 +2349,10 @@ Expression: ${expression}` : message);
         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;
     }
@@ -2347,11 +2381,11 @@ Expression: ${expression}` : message);
     reactiveChild(vars, el = null) {
       return new _Scope(reactive(vars), this, el != null ? 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, {
@@ -2753,7 +2787,16 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       },
       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);
@@ -2801,6 +2844,56 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       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 (e) {
+      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 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 current2 = scope;
     for (const attr2 of attrs) {
       const def = directives.get(attr2.name);
       if (def == null ? void 0 : def.terminal) {
@@ -2820,11 +2913,10 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
         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);
@@ -2980,13 +3072,13 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
   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);
       }
@@ -3370,10 +3462,10 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     "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}`);
     }
@@ -4832,6 +4924,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
   );
 
   // src/storage/index.ts
+  init_reactivity();
   function createStorage(getStore, prefix = "") {
     const full = (key) => prefix + key;
     return {
@@ -5007,22 +5100,29 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
   };
   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() {
       var _a2, _b;
+      void revision.value;
       return (_b = (_a2 = storage.get(THEME_KEY)) != null ? _a2 : picked) != null ? _b : "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() {
@@ -5056,8 +5156,17 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     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();
       });
     }
@@ -5201,6 +5310,141 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     );
   }
 
+  // src/hooks/index.ts
+  init_reactivity();
+  var tables = /* @__PURE__ */ new WeakMap();
+  function tableFor(scope) {
+    var _a2, _b, _c;
+    const host = (_b = (_a2 = currentHookHost()) != null ? _a2 : scope.el) != null ? _b : scope;
+    let table = tables.get(host);
+    if (!table) {
+      table = { slots: [], index: 0, scheduled: false, bound: false };
+      tables.set(host, table);
+    }
+    const el = (_c = currentHookHost()) != null ? _c : 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) {
@@ -6805,6 +7049,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
   setScopeMarker(markNodeScope);
   setDirectiveRegistrar(directive);
   installMagics();
+  installHooks();
   var eventBus = /* @__PURE__ */ new Map();
   function on(name, handler) {
     let set2 = eventBus.get(name);
@@ -6840,7 +7085,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
   }
   function directive(name, definition) {
     var _a2, _b;
-    const hooks = typeof definition === "function" ? { mounted: definition, updated: definition } : definition;
+    const hooks2 = typeof definition === "function" ? { mounted: definition, updated: definition } : definition;
     defineDirective(
       name,
       (ctx) => {
@@ -6860,38 +7105,38 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
             instance: (_b3 = (_a4 = ctx.scope.owner) == null ? void 0 : _a4.component) != null ? _b3 : null
           };
         };
-        const initial = hooks.raw ? ctx.expression : ctx.evaluate();
-        (_a3 = hooks.created) == null ? void 0 : _a3.call(hooks, ctx.el, makeBinding(initial));
-        (_b2 = hooks.beforeMount) == null ? void 0 : _b2.call(hooks, ctx.el, makeBinding(initial));
+        const initial = hooks2.raw ? ctx.expression : ctx.evaluate();
+        (_a3 = hooks2.created) == null ? void 0 : _a3.call(hooks2, ctx.el, makeBinding(initial));
+        (_b2 = hooks2.beforeMount) == null ? void 0 : _b2.call(hooks2, ctx.el, makeBinding(initial));
         ctx.effect(() => {
           var _a4, _b3;
-          const value = hooks.raw ? ctx.expression : ctx.evaluate();
+          const value = hooks2.raw ? ctx.expression : ctx.evaluate();
           if (!mounted2) {
             mounted2 = true;
             oldValue = value;
-            (_a4 = hooks.mounted) == null ? void 0 : _a4.call(hooks, ctx.el, makeBinding(value));
+            (_a4 = hooks2.mounted) == null ? void 0 : _a4.call(hooks2, ctx.el, makeBinding(value));
             return;
           }
           if (value === oldValue) return;
           const binding = makeBinding(value);
-          (_b3 = hooks.updated) == null ? void 0 : _b3.call(hooks, ctx.el, binding);
+          (_b3 = hooks2.updated) == null ? void 0 : _b3.call(hooks2, ctx.el, binding);
           oldValue = value;
         });
         ctx.cleanup(() => {
           var _a4, _b3;
           const binding = makeBinding(oldValue);
-          (_a4 = hooks.beforeUnmount) == null ? void 0 : _a4.call(hooks, ctx.el, binding);
-          (_b3 = hooks.unmounted) == null ? void 0 : _b3.call(hooks, ctx.el, binding);
+          (_a4 = hooks2.beforeUnmount) == null ? void 0 : _a4.call(hooks2, ctx.el, binding);
+          (_b3 = hooks2.unmounted) == null ? void 0 : _b3.call(hooks2, ctx.el, binding);
         });
       },
-      { priority: (_a2 = hooks.priority) != null ? _a2 : PRIORITY.DEFAULT, terminal: (_b = hooks.terminal) != null ? _b : false }
+      { priority: (_a2 = hooks2.priority) != null ? _a2 : PRIORITY.DEFAULT, terminal: (_b = hooks2.terminal) != null ? _b : 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,
@@ -10057,6 +10302,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     ensureUi();
     collapseOf(el);
   });
+  var selfToggling = /* @__PURE__ */ new WeakSet();
   defineDirective("collapse-toggle", ({ el, expression, cleanup }) => {
     ensureUi();
     const target = resolveTarget(el, expression);
@@ -10065,6 +10311,8 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     controller.triggers.add(el);
     controller.sync();
     makeInteractive(el, cleanup);
+    selfToggling.add(el);
+    cleanup(() => selfToggling.delete(el));
     const onClick = (event) => {
       event.preventDefault();
       controller.toggle();
@@ -10479,10 +10727,11 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       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) => {
       var _a2;
@@ -13360,12 +13609,15 @@ form.v-loading [type="submit"],form.v-loading button[disabled]{opacity:.6}
 
   // 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;
@@ -13681,6 +13933,7 @@ form.v-loading [type="submit"],form.v-loading button[disabled]{opacity:.6}
       loadPreference();
       isMuted = value;
       storage.set(MUTE_KEY, isMuted);
+      muteRevision.value++;
     },
     /** Unmutes sound. */
     unmute() {
@@ -13692,8 +13945,18 @@ form.v-loading [type="submit"],form.v-loading button[disabled]{opacity:.6}
       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;
     },
@@ -13744,11 +14007,18 @@ form.v-loading [type="submit"],form.v-loading button[disabled]{opacity:.6}
     cleanup(() => el.removeEventListener(event, play));
     void scope;
   });
+  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();
@@ -18097,8 +18367,22 @@ ${block(':root:not([data-theme="light"])', dark.vars)}
       }
     },
     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);
       },
@@ -18146,8 +18430,8 @@ ${block(':root:not([data-theme="light"])', dark.vars)}
         </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>
@@ -21790,9 +22074,14 @@ textarea.v-dialog-input{min-height:96px;resize:vertical}
     allowedGlobals.V = V2;
     allowedGlobals.Voodoo = V2;
     if (config.baseURL && ((_a2 = V2.http) == null ? void 0 : _a2.setBaseURL)) V2.http.setBaseURL(config.baseURL);
-    if (options.manual || !config.autoStart) return;
+    theme.init();
+    if (options.manual || !config.autoStart) {
+      whenReady(() => {
+        applySavedPalette();
+      });
+      return;
+    }
     const boot = () => {
-      theme.init();
       applySavedPalette();
       V2.start();
       if (typeof V2.enableXrayShortcut === "function") V2.enableXrayShortcut();