@pinia/colada-devtools 0.0.2 → 0.0.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as $, ref as R, onMounted as L, renderSlot as ne, createCommentVNode as M, toValue as C, getCurrentScope as J, onScopeDispose as Q, useTemplateRef as oe, shallowRef as N, watch as P, onBeforeUnmount as ie, createBlock as W, openBlock as x, Teleport as re, createElementVNode as se, nextTick as G, readonly as K, getCurrentInstance as ae, toRef as le, customRef as ue, computed as U, unref as F, withCtx as ce, createElementBlock as de } from "vue";
+import { defineComponent as $, ref as R, onMounted as L, renderSlot as ne, createCommentVNode as M, toValue as T, getCurrentScope as J, onScopeDispose as Q, useTemplateRef as oe, shallowRef as N, watch as _, onBeforeUnmount as ie, createBlock as W, openBlock as x, Teleport as re, createElementVNode as se, nextTick as G, readonly as K, getCurrentInstance as ae, toRef as le, customRef as ue, computed as U, unref as F, withCtx as ce, createElementBlock as de } from "vue";
 import { useQueryCache as fe } from "@pinia/colada";
 import { DEVTOOLS_INFO_KEY as p, DuplexChannel as pe } from "@pinia/colada-devtools/shared";
 const ve = /* @__PURE__ */ $({
@@ -7,70 +7,87 @@ const ve = /* @__PURE__ */ $({
     const t = R(!1);
     return L(() => {
       t.value = !0;
-    }), (o, l) => t.value ? ne(o.$slots, "default", { key: 0 }) : M("", !0);
+    }), (n, l) => t.value ? ne(n.$slots, "default", { key: 0 }) : M("", !0);
   }
 }), b = () => performance.timeOrigin + performance.now();
 function me(e) {
-  I.has(e) || (I.set(e, !0), e.$onAction(({ name: t, args: o, after: l, onError: s }) => {
-    var c, y;
-    if (t === "create")
-      l((r) => {
-        r[p] = {
-          count: {
-            total: 0,
-            succeed: 0,
-            errored: 0,
-            cancelled: 0
-          },
-          updatedAt: b(),
-          inactiveAt: 0,
-          simulate: null,
-          history: []
-        };
-      });
-    else if (t === "fetch") {
-      const [r] = o;
-      r[p].count.total++, r[p].updatedAt = b();
-      const u = b(), f = {
-        id: (((c = r[p].history.at(0)) == null ? void 0 : c.id) ?? -1) + 1,
-        key: r.key,
-        state: r.state.value,
-        updatedAt: u,
-        createdAt: u,
-        fetchTime: null
-      }, h = C((y = r.options) == null ? void 0 : y.enabled) ?? !0;
-      h && (f.fetchTime = {
-        start: u,
-        end: null
-      }), r[p].history.unshift(f), r[p].history = r[p].history.slice(0, 10), l(() => {
-        h && (f.fetchTime.end = b(), r[p].count.succeed++, f.state = r.state.value, f.updatedAt = b());
-      }), s(() => {
-        h && (f.fetchTime.end = b(), r[p].count.errored++, f.state = r.state.value, f.updatedAt = b());
-      });
-    } else if (t === "cancel") {
-      const [r] = o;
-      r.pending && r[p].count.cancelled++;
-    } else if (t === "setEntryState") {
-      const [r] = o;
-      let u = r[p].history[0];
-      l(() => {
-        r[p].updatedAt = b(), u ?? (u = r[p].history[0]), u && (u.state = r.state.value, u.updatedAt = b());
-      });
-    } else if (t === "untrack") {
-      const [r] = o;
-      l(() => {
-        r.active || (r[p].inactiveAt = b());
-      });
-    } else if (t === "setQueryData") {
-      const [r] = o;
-      l(() => {
-        const u = e.getEntries({ key: r, exact: !0 })[0];
-        u && !u.active && (u[p].inactiveAt = b());
+  var t;
+  if (!I.has(e)) {
+    I.set(e, !0);
+    for (const n of e.getEntries())
+      n[t = p] ?? (n[t] = {
+        count: {
+          total: 0,
+          succeed: 0,
+          errored: 0,
+          cancelled: 0
+        },
+        updatedAt: b(),
+        inactiveAt: 0,
+        simulate: null,
+        history: []
       });
-    }
-  }));
+    e.$onAction(({ name: n, args: l, after: r, onError: d }) => {
+      var h, f;
+      if (n === "create")
+        r((s) => {
+          s[p] = {
+            count: {
+              total: 0,
+              succeed: 0,
+              errored: 0,
+              cancelled: 0
+            },
+            updatedAt: b(),
+            inactiveAt: 0,
+            simulate: null,
+            history: []
+          };
+        });
+      else if (n === "fetch") {
+        const [s] = l;
+        s[p].count.total++, s[p].updatedAt = b();
+        const u = b(), v = {
+          id: (((h = s[p].history.at(0)) == null ? void 0 : h.id) ?? -1) + 1,
+          key: s.key,
+          state: s.state.value,
+          updatedAt: u,
+          createdAt: u,
+          fetchTime: null
+        }, E = T((f = s.options) == null ? void 0 : f.enabled) ?? !0;
+        E && (v.fetchTime = {
+          start: u,
+          end: null
+        }), s[p].history.unshift(v), s[p].history = s[p].history.slice(0, 10), r(() => {
+          E && (v.fetchTime.end = b(), s[p].count.succeed++, v.state = s.state.value, v.updatedAt = b());
+        }), d(() => {
+          E && (v.fetchTime.end = b(), s[p].count.errored++, v.state = s.state.value, v.updatedAt = b());
+        });
+      } else if (n === "cancel") {
+        const [s] = l;
+        s.pending && s[p].count.cancelled++;
+      } else if (n === "setEntryState") {
+        const [s] = l;
+        let u = s[p].history[0];
+        r(() => {
+          s[p].updatedAt = b(), u ?? (u = s[p].history[0]), u && (u.state = s.state.value, u.updatedAt = b());
+        });
+      } else if (n === "untrack") {
+        const [s] = l;
+        r(() => {
+          s.active || (s[p].inactiveAt = b());
+        });
+      } else if (n === "setQueryData") {
+        const [s] = l;
+        r(() => {
+          const u = e.getEntries({ key: s, exact: !0 })[0];
+          u && !u.active && (u[p].inactiveAt = b());
+        });
+      }
+    });
+  }
 }
-function w(e) {
+function S(e) {
   return {
     id: e.key.join("\0"),
     key: e.key,
@@ -82,10 +99,10 @@ function w(e) {
     options: e.options && {
       staleTime: e.options.staleTime,
       gcTime: e.options.gcTime,
-      refetchOnMount: C(e.options.refetchOnMount),
-      refetchOnReconnect: C(e.options.refetchOnReconnect),
-      refetchOnWindowFocus: C(e.options.refetchOnWindowFocus),
-      enabled: C(e.options.enabled)
+      refetchOnMount: T(e.options.refetchOnMount),
+      refetchOnReconnect: T(e.options.refetchOnReconnect),
+      refetchOnWindowFocus: T(e.options.refetchOnWindowFocus),
+      enabled: T(e.options.enabled)
     },
     deps: Array.from(e.deps).map(
       (t) => "uid" in t ? {
@@ -103,161 +120,170 @@ function w(e) {
   };
 }
 const I = /* @__PURE__ */ new WeakMap();
-function ye(e, t, o, l) {
-  e.addEventListener(t, o, l), J() && Q(() => {
-    e.removeEventListener(t, o);
+function ye(e, t, n, l) {
+  e.addEventListener(t, n, l), J() && Q(() => {
+    e.removeEventListener(t, n);
   });
 }
 const he = [".isPip", ".port"], ge = /* @__PURE__ */ $({
   __name: "PiniaColadaDevtools",
   setup(e) {
     const t = fe();
-    me(t), t.$onAction(({ name: n, after: i, onError: v, args: S }) => {
-      if (n === "remove") {
-        const [a] = S;
-        i(() => {
-          s.emit("queries:delete", w(a));
+    me(t), t.$onAction(({ name: i, after: o, onError: m, args: g }) => {
+      if (i === "remove") {
+        const [a] = g;
+        o(() => {
+          r.emit("queries:delete", S(a));
         });
-      } else if (n === "track" || n === "untrack" || n === "cancel" || n === "invalidate" || n === "fetch" || n === "setEntryState") {
-        const [a] = S;
-        if (n === "fetch") {
-          const m = w(a);
-          m.asyncStatus = "loading", s.emit("queries:update", m);
+      } else if (i === "track" || i === "untrack" || i === "cancel" || i === "invalidate" || i === "fetch" || i === "setEntryState") {
+        const [a] = g;
+        if (i === "fetch") {
+          const y = S(a);
+          y.asyncStatus = "loading", r.emit("queries:update", y);
         }
-        i(() => {
-          var m;
-          a[p].simulate = null, s.emit("queries:update", w(a)), n === "fetch" && ((m = a.options) == null ? void 0 : m.staleTime) != null && Number.isFinite(a.options.staleTime) && setTimeout(() => {
-            s.emit("queries:update", w(a));
+        o(() => {
+          var y;
+          a[p].simulate = null, r.emit("queries:update", S(a)), i === "fetch" && ((y = a.options) == null ? void 0 : y.staleTime) != null && Number.isFinite(a.options.staleTime) && setTimeout(() => {
+            r.emit("queries:update", S(a));
           }, a.options.staleTime);
-        }), v(() => {
-          s.emit("queries:update", w(a));
+        }), m(() => {
+          r.emit("queries:update", S(a));
         });
-      } else if (n === "create")
-        i((a) => {
-          s.emit("queries:update", w(a));
+      } else if (i === "create")
+        o((a) => {
+          r.emit("queries:update", S(a));
         });
-      else if (n === "setQueryData") {
-        const [a] = S;
-        i(() => {
-          const m = t.getEntries({ key: a, exact: !0 })[0];
-          m && s.emit("queries:update", w(m));
+      else if (i === "setQueryData") {
+        const [a] = g;
+        o(() => {
+          const y = t.getEntries({ key: a, exact: !0 })[0];
+          y && r.emit("queries:update", S(y));
         });
       }
     });
-    const o = oe("devtools"), l = N(new MessageChannel()), s = new pe(l.value.port1);
-    P(
+    const n = oe("devtools"), l = N(new MessageChannel()), r = new pe(l.value.port1);
+    _(
       l,
-      (n) => {
-        s.setPort(n.port1);
+      (i) => {
+        r.setPort(i.port1);
       },
       { flush: "sync" }
-    ), s.on("ping", () => {
-      console.log("[App] Received ping from devtools"), s.emit("pong");
-    }), s.on("pong", () => {
+    ), r.on("ping", () => {
+      console.log("[App] Received ping from devtools"), r.emit("pong");
+    }), r.on("pong", () => {
       console.log("[App] Received pong from devtools");
-    }), s.on("queries:refetch", (n) => {
-      t.invalidateQueries({ key: n, exact: !0, active: null, stale: null });
-    }), s.on("queries:invalidate", (n) => {
-      t.invalidateQueries({ key: n, exact: !0 });
-    }), s.on("queries:reset", (n) => {
-      const i = t.getEntries({ key: n, exact: !0 })[0];
-      i && (t.cancel(i), t.setEntryState(i, {
+    }), r.on("queries:refetch", (i) => {
+      t.invalidateQueries({ key: i, exact: !0, active: null, stale: null });
+    }), r.on("queries:invalidate", (i) => {
+      t.invalidateQueries({ key: i, exact: !0 });
+    }), r.on("queries:reset", (i) => {
+      const o = t.getEntries({ key: i, exact: !0 })[0];
+      o && (t.cancel(o), t.setEntryState(o, {
         status: "pending",
         data: void 0,
         error: null
       }));
-    }), s.on("queries:set:state", (n, i) => {
-      const v = t.getEntries({ key: n, exact: !0 })[0];
-      v && (t.setEntryState(v, i), s.emit("queries:update", w(v)));
-    }), s.on("queries:simulate:loading", (n) => {
-      const i = t.getEntries({ key: n, exact: !0 })[0];
-      i && (i.asyncStatus.value = "loading", i[p].simulate = "loading", s.emit("queries:update", w(i)));
-    }), s.on("queries:simulate:loading:stop", (n) => {
-      const i = t.getEntries({ key: n, exact: !0 })[0];
-      i && i[p].simulate === "loading" && (i.asyncStatus.value = "idle", i[p].simulate = null, s.emit("queries:update", w(i)));
-    }), s.on("queries:simulate:error", (n) => {
-      const i = t.getEntries({ key: n, exact: !0 })[0];
-      i && (t.cancel(i), t.setEntryState(i, {
-        ...i.state.value,
+    }), r.on("queries:set:state", (i, o) => {
+      const m = t.getEntries({ key: i, exact: !0 })[0];
+      m && (t.setEntryState(m, o), r.emit("queries:update", S(m)));
+    }), r.on("queries:simulate:loading", (i) => {
+      const o = t.getEntries({ key: i, exact: !0 })[0];
+      o && (o.asyncStatus.value = "loading", o[p].simulate = "loading", r.emit("queries:update", S(o)));
+    }), r.on("queries:simulate:loading:stop", (i) => {
+      const o = t.getEntries({ key: i, exact: !0 })[0];
+      o && o[p].simulate === "loading" && (o.asyncStatus.value = "idle", o[p].simulate = null, r.emit("queries:update", S(o)));
+    }), r.on("queries:simulate:error", (i) => {
+      const o = t.getEntries({ key: i, exact: !0 })[0];
+      o && (t.cancel(o), t.setEntryState(o, {
+        ...o.state.value,
         status: "error",
         error: new Error("Simulated error")
-      }), i[p].simulate = "error", s.emit("queries:update", w(i)));
-    }), s.on("queries:simulate:error:stop", (n) => {
-      const i = t.getEntries({ key: n, exact: !0 })[0];
-      i && i[p].simulate === "error" && (t.cancel(i), t.setEntryState(i, {
-        ...i.state.value,
-        status: i.state.value.data !== void 0 ? "success" : "pending",
+      }), o[p].simulate = "error", r.emit("queries:update", S(o)));
+    }), r.on("queries:simulate:error:stop", (i) => {
+      const o = t.getEntries({ key: i, exact: !0 })[0];
+      o && o[p].simulate === "error" && (t.cancel(o), t.setEntryState(o, {
+        ...o.state.value,
+        status: o.state.value.data !== void 0 ? "success" : "pending",
         error: null
-      }), i[p].simulate = null, s.emit("queries:update", w(i)));
+      }), o[p].simulate = null, r.emit("queries:update", S(o)));
     });
-    const c = N(null);
-    P(c, () => {
+    const d = N(null);
+    _(d, () => {
       l.value = new MessageChannel();
     }), ye(
       window,
       "unload",
       () => {
-        var n;
-        (n = c.value) == null || n.close();
+        var i;
+        (i = d.value) == null || i.close();
       },
       { passive: !0 }
     ), ie(() => {
-      var n;
-      (n = c.value) == null || n.close();
+      var i;
+      (i = d.value) == null || i.close();
     });
-    function y() {
-      var n;
-      (n = c.value) == null || n.close(), c.value = null;
+    function h() {
+      var i;
+      (i = d.value) == null || i.close(), d.value = null;
     }
-    function r() {
-      const n = o.value;
-      if (!n || !n.shadowRoot)
+    function f() {
+      const i = n.value;
+      if (!i || !i.shadowRoot)
         throw new Error("No devtools elemnt found for Pinia Colada devtools");
-      const i = n.shadowRoot.getElementById("root");
-      if (!i)
+      const o = i.shadowRoot.getElementById("root");
+      if (!o)
         throw new Error("No devtools root element found for Pinia Colada devtools");
-      const v = Math.max(i.offsetWidth, 400), S = Math.max(i.offsetHeight, 400), a = window.open(
+      const m = Math.max(o.offsetWidth, 400), g = Math.max(o.offsetHeight, 400), a = window.open(
         "",
         "pinia-colada-devtools",
-        `popup,width=${v},height=${S}`
+        `popup,width=${m},height=${g}`
       );
       if (!a)
         throw new Error("Failed to open PiP window for Pinia Colada devtools");
-      c.value = a, a.document.head.innerHTML = "", a.document.body.innerHTML = "", a.document.title = "🍹 Pinia Colada Devtools", a.document.body.style.margin = "0", u(n, a.document), a.addEventListener(
+      d.value = a, a.document.head.innerHTML = "", a.document.body.innerHTML = "", a.document.title = "🍹 Pinia Colada Devtools", a.document.body.style.margin = "0", s(i, a.document), a.addEventListener(
         "unload",
         () => {
-          c.value = null;
+          d.value = null;
         },
         { passive: !0 }
       );
     }
-    function u(n, i = document) {
-      if (!n || !n.shadowRoot)
+    function s(i, o = document) {
+      if (!i || !i.shadowRoot)
         throw new Error("No devtools element found for Pinia Colada devtools");
-      const v = i.getElementById("__pc-tw-properties") ?? i.createElement("style");
-      v.setAttribute("id", "__pc-tw-properties");
-      const S = [...n.shadowRoot.styleSheets].flatMap((a) => [...a.cssRules]).filter((a) => a instanceof CSSPropertyRule).map((a) => a.cssText).join("");
-      v.textContent = S, i.head.appendChild(v);
+      const m = o.getElementById("__pc-tw-properties") ?? o.createElement("style");
+      m.setAttribute("id", "__pc-tw-properties");
+      const g = [...i.shadowRoot.styleSheets].flatMap((a) => [...a.cssRules]).filter((a) => a instanceof CSSPropertyRule).map((a) => a.cssText).join("");
+      m.textContent = g, o.head.appendChild(m);
     }
-    function f() {
-      c.value ? y() : r();
+    function u() {
+      d.value ? h() : f();
     }
-    async function h() {
-      u(o.value), s.emit("queries:all", t.getEntries({}).map(w)), s.emit(
+    let v = 0;
+    async function E() {
+      if (!n.value) {
+        if (++v > 100)
+          throw new Error("Failed to find devtools element for Pinia Colada devtools");
+        setTimeout(() => {
+          E();
+        }, 100);
+        return;
+      }
+      s(n.value), r.emit("queries:all", t.getEntries({}).map(S)), r.emit(
         "mutations:all",
         // FIXME: mutations
-        t.getEntries({}).map(w)
+        t.getEntries({}).map(S)
       );
     }
-    return (n, i) => (x(), W(re, {
-      to: c.value ? c.value.document.body : "body"
+    return (i, o) => (x(), W(re, {
+      to: d.value ? d.value.document.body : "body"
     }, [
       se("pinia-colada-devtools-panel", {
         ref: "devtools",
-        ".isPip": !!c.value,
+        ".isPip": !!d.value,
         ".port": l.value.port2,
-        onTogglePip: i[0] || (i[0] = (v) => f()),
-        onReady: i[1] || (i[1] = (v) => h())
+        onTogglePip: o[0] || (o[0] = (m) => u()),
+        onReady: o[1] || (o[1] = (m) => E())
       }, null, 40, he)
     ], 8, ["to"]));
   }
@@ -265,128 +291,128 @@ const he = [".isPip", ".port"], ge = /* @__PURE__ */ $({
 function we(e) {
   return J() ? (Q(e), !0) : !1;
 }
-const Se = typeof window < "u" && typeof document < "u";
+const Ee = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Ee = Object.prototype.toString, be = (e) => Ee.call(e) === "[object Object]", Ce = () => {
+const Se = Object.prototype.toString, be = (e) => Se.call(e) === "[object Object]", Ae = () => {
 };
 function Te(...e) {
   if (e.length !== 1)
     return le(...e);
   const t = e[0];
-  return typeof t == "function" ? K(ue(() => ({ get: t, set: Ce }))) : R(t);
+  return typeof t == "function" ? K(ue(() => ({ get: t, set: Ae }))) : R(t);
 }
-function Ae(e, t) {
-  function o(...l) {
-    return new Promise((s, c) => {
-      Promise.resolve(e(() => t.apply(this, l), { fn: t, thisArg: this, args: l })).then(s).catch(c);
+function Ce(e, t) {
+  function n(...l) {
+    return new Promise((r, d) => {
+      Promise.resolve(e(() => t.apply(this, l), { fn: t, thisArg: this, args: l })).then(r).catch(d);
     });
   }
-  return o;
+  return n;
 }
 const Y = (e) => e();
-function _e(e = Y, t = {}) {
+function Pe(e = Y, t = {}) {
   const {
-    initialState: o = "active"
-  } = t, l = Te(o === "active");
-  function s() {
+    initialState: n = "active"
+  } = t, l = Te(n === "active");
+  function r() {
     l.value = !1;
   }
-  function c() {
+  function d() {
     l.value = !0;
   }
-  const y = (...r) => {
-    l.value && e(...r);
+  const h = (...f) => {
+    l.value && e(...f);
   };
-  return { isActive: K(l), pause: s, resume: c, eventFilter: y };
+  return { isActive: K(l), pause: r, resume: d, eventFilter: h };
 }
 function q(e) {
   return Array.isArray(e) ? e : [e];
 }
-function Pe(e) {
+function _e(e) {
   return ae();
 }
-function Oe(e, t, o = {}) {
+function Oe(e, t, n = {}) {
   const {
     eventFilter: l = Y,
-    ...s
-  } = o;
-  return P(
+    ...r
+  } = n;
+  return _(
     e,
-    Ae(
+    Ce(
       l,
       t
     ),
-    s
+    r
   );
 }
-function ke(e, t, o = {}) {
+function ke(e, t, n = {}) {
   const {
     eventFilter: l,
-    initialState: s = "active",
-    ...c
-  } = o, { eventFilter: y, pause: r, resume: u, isActive: f } = _e(l, { initialState: s });
+    initialState: r = "active",
+    ...d
+  } = n, { eventFilter: h, pause: f, resume: s, isActive: u } = Pe(l, { initialState: r });
   return { stop: Oe(
     e,
     t,
     {
-      ...c,
-      eventFilter: y
+      ...d,
+      eventFilter: h
     }
-  ), pause: r, resume: u, isActive: f };
+  ), pause: f, resume: s, isActive: u };
 }
-function xe(e, t = !0, o) {
-  Pe() ? L(e, o) : t ? e() : G(e);
+function xe(e, t = !0, n) {
+  _e() ? L(e, n) : t ? e() : G(e);
 }
-function De(e, t, o) {
-  return P(
+function De(e, t, n) {
+  return _(
     e,
     t,
     {
-      ...o,
+      ...n,
       immediate: !0
     }
   );
 }
-const D = Se ? window : void 0;
+const D = Ee ? window : void 0;
 function Re(e) {
   var t;
-  const o = C(e);
-  return (t = o == null ? void 0 : o.$el) != null ? t : o;
+  const n = T(e);
+  return (t = n == null ? void 0 : n.$el) != null ? t : n;
 }
 function z(...e) {
-  const t = [], o = () => {
-    t.forEach((r) => r()), t.length = 0;
-  }, l = (r, u, f, h) => (r.addEventListener(u, f, h), () => r.removeEventListener(u, f, h)), s = U(() => {
-    const r = q(C(e[0])).filter((u) => u != null);
-    return r.every((u) => typeof u != "string") ? r : void 0;
-  }), c = De(
+  const t = [], n = () => {
+    t.forEach((f) => f()), t.length = 0;
+  }, l = (f, s, u, v) => (f.addEventListener(s, u, v), () => f.removeEventListener(s, u, v)), r = U(() => {
+    const f = q(T(e[0])).filter((s) => s != null);
+    return f.every((s) => typeof s != "string") ? f : void 0;
+  }), d = De(
     () => {
-      var r, u;
+      var f, s;
       return [
-        (u = (r = s.value) == null ? void 0 : r.map((f) => Re(f))) != null ? u : [D].filter((f) => f != null),
-        q(C(s.value ? e[1] : e[0])),
-        q(F(s.value ? e[2] : e[1])),
+        (s = (f = r.value) == null ? void 0 : f.map((u) => Re(u))) != null ? s : [D].filter((u) => u != null),
+        q(T(r.value ? e[1] : e[0])),
+        q(F(r.value ? e[2] : e[1])),
         // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        C(s.value ? e[3] : e[2])
+        T(r.value ? e[3] : e[2])
       ];
     },
-    ([r, u, f, h]) => {
-      if (o(), !(r != null && r.length) || !(u != null && u.length) || !(f != null && f.length))
+    ([f, s, u, v]) => {
+      if (n(), !(f != null && f.length) || !(s != null && s.length) || !(u != null && u.length))
         return;
-      const n = be(h) ? { ...h } : h;
+      const E = be(v) ? { ...v } : v;
       t.push(
-        ...r.flatMap(
-          (i) => u.flatMap(
-            (v) => f.map((S) => l(i, v, S, n))
+        ...f.flatMap(
+          (i) => s.flatMap(
+            (o) => u.map((m) => l(i, o, m, E))
           )
         )
       );
     },
     { flush: "post" }
-  ), y = () => {
-    c(), o();
+  ), h = () => {
+    d(), n();
   };
-  return we(o), y;
+  return we(n), h;
 }
 const O = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, k = "__vueuse_ssr_handlers__", qe = /* @__PURE__ */ Me();
 function Me() {
@@ -432,128 +458,128 @@ const Fe = {
     write: (e) => e.toISOString()
   }
 }, B = "vueuse-storage";
-function $e(e, t, o, l = {}) {
-  var s;
+function $e(e, t, n, l = {}) {
+  var r;
   const {
-    flush: c = "pre",
-    deep: y = !0,
-    listenToStorageChanges: r = !0,
-    writeDefaults: u = !0,
-    mergeDefaults: f = !1,
-    shallow: h,
-    window: n = D,
+    flush: d = "pre",
+    deep: h = !0,
+    listenToStorageChanges: f = !0,
+    writeDefaults: s = !0,
+    mergeDefaults: u = !1,
+    shallow: v,
+    window: E = D,
     eventFilter: i,
-    onError: v = (d) => {
-      console.error(d);
+    onError: o = (c) => {
+      console.error(c);
     },
-    initOnMounted: S
-  } = l, a = (h ? N : R)(t), m = U(() => C(e));
-  if (!o)
+    initOnMounted: m
+  } = l, g = (v ? N : R)(t), a = U(() => T(e));
+  if (!n)
     try {
-      o = Ne("getDefaultStorage", () => {
-        var d;
-        return (d = D) == null ? void 0 : d.localStorage;
+      n = Ne("getDefaultStorage", () => {
+        var c;
+        return (c = D) == null ? void 0 : c.localStorage;
       })();
-    } catch (d) {
-      v(d);
+    } catch (c) {
+      o(c);
     }
-  if (!o)
-    return a;
-  const T = C(t), j = We(T), A = (s = l.serializer) != null ? s : Fe[j], { pause: X, resume: V } = ke(
-    a,
-    () => Z(a.value),
-    { flush: c, deep: y, eventFilter: i }
+  if (!n)
+    return g;
+  const y = T(t), j = We(y), C = (r = l.serializer) != null ? r : Fe[j], { pause: X, resume: V } = ke(
+    g,
+    () => Z(g.value),
+    { flush: d, deep: h, eventFilter: i }
   );
-  P(m, () => _(), { flush: c }), n && r && xe(() => {
-    o instanceof Storage ? z(n, "storage", _, { passive: !0 }) : z(n, B, te), S && _();
-  }), S || _();
-  function H(d, g) {
-    if (n) {
-      const E = {
-        key: m.value,
-        oldValue: d,
-        newValue: g,
-        storageArea: o
+  _(a, () => P(), { flush: d }), E && f && xe(() => {
+    n instanceof Storage ? z(E, "storage", P, { passive: !0 }) : z(E, B, te), m && P();
+  }), m || P();
+  function H(c, w) {
+    if (E) {
+      const A = {
+        key: a.value,
+        oldValue: c,
+        newValue: w,
+        storageArea: n
       };
-      n.dispatchEvent(o instanceof Storage ? new StorageEvent("storage", E) : new CustomEvent(B, {
-        detail: E
+      E.dispatchEvent(n instanceof Storage ? new StorageEvent("storage", A) : new CustomEvent(B, {
+        detail: A
       }));
     }
   }
-  function Z(d) {
+  function Z(c) {
     try {
-      const g = o.getItem(m.value);
-      if (d == null)
-        H(g, null), o.removeItem(m.value);
+      const w = n.getItem(a.value);
+      if (c == null)
+        H(w, null), n.removeItem(a.value);
       else {
-        const E = A.write(d);
-        g !== E && (o.setItem(m.value, E), H(g, E));
+        const A = C.write(c);
+        w !== A && (n.setItem(a.value, A), H(w, A));
       }
-    } catch (g) {
-      v(g);
+    } catch (w) {
+      o(w);
     }
   }
-  function ee(d) {
-    const g = d ? d.newValue : o.getItem(m.value);
-    if (g == null)
-      return u && T != null && o.setItem(m.value, A.write(T)), T;
-    if (!d && f) {
-      const E = A.read(g);
-      return typeof f == "function" ? f(E, T) : j === "object" && !Array.isArray(E) ? { ...T, ...E } : E;
-    } else return typeof g != "string" ? g : A.read(g);
+  function ee(c) {
+    const w = c ? c.newValue : n.getItem(a.value);
+    if (w == null)
+      return s && y != null && n.setItem(a.value, C.write(y)), y;
+    if (!c && u) {
+      const A = C.read(w);
+      return typeof u == "function" ? u(A, y) : j === "object" && !Array.isArray(A) ? { ...y, ...A } : A;
+    } else return typeof w != "string" ? w : C.read(w);
   }
-  function _(d) {
-    if (!(d && d.storageArea !== o)) {
-      if (d && d.key == null) {
-        a.value = T;
+  function P(c) {
+    if (!(c && c.storageArea !== n)) {
+      if (c && c.key == null) {
+        g.value = y;
         return;
       }
-      if (!(d && d.key !== m.value)) {
+      if (!(c && c.key !== a.value)) {
         X();
         try {
-          (d == null ? void 0 : d.newValue) !== A.write(a.value) && (a.value = ee(d));
-        } catch (g) {
-          v(g);
+          (c == null ? void 0 : c.newValue) !== C.write(g.value) && (g.value = ee(c));
+        } catch (w) {
+          o(w);
         } finally {
-          d ? G(V) : V();
+          c ? G(V) : V();
         }
       }
     }
   }
-  function te(d) {
-    _(d.detail);
+  function te(c) {
+    P(c.detail);
   }
-  return a;
+  return g;
 }
-function Le(e, t, o = {}) {
-  const { window: l = D } = o;
-  return $e(e, t, l == null ? void 0 : l.localStorage, o);
+function Le(e, t, n = {}) {
+  const { window: l = D } = n;
+  return $e(e, t, l == null ? void 0 : l.localStorage, n);
 }
 const Ie = /* @__PURE__ */ $({
   __name: "PCDevtoolsWrapper",
   setup(e) {
-    const t = R(!1), o = Le("pinia-colada-devtools-open", !1);
+    const t = R(!1), n = Le("pinia-colada-devtools-open", !1);
     async function l() {
       if (!t.value && (t.value = !0, !customElements.get("pinia-colada-devtools-panel"))) {
-        const { DevtoolsPanel: c } = await import("@pinia/colada-devtools/panel");
-        customElements.define("pinia-colada-devtools-panel", c);
+        const { DevtoolsPanel: d } = await import("@pinia/colada-devtools/panel");
+        customElements.define("pinia-colada-devtools-panel", d);
       }
     }
-    async function s() {
-      await l(), o.value = !0;
+    async function r() {
+      await l(), n.value = !0;
     }
     return L(() => {
       requestIdleCallback(() => {
         import("@pinia/colada-devtools/panel");
-      }), o.value && s();
-    }), (c, y) => (x(), W(ve, null, {
+      }), n.value && r();
+    }), (d, h) => (x(), W(ve, null, {
       default: ce(() => [
-        F(o) ? M("", !0) : (x(), de("button", {
+        F(n) ? M("", !0) : (x(), de("button", {
           key: 0,
           class: "fixed bottom-2 right-2 bg-primary-500 hover:cursor-pointer z-99999",
-          onClick: y[0] || (y[0] = (r) => s())
+          onClick: h[0] || (h[0] = (f) => r())
         }, " 🍹 Devtools ")),
-        t.value && F(o) ? (x(), W(ge, { key: 1 })) : M("", !0)
+        t.value && F(n) ? (x(), W(ge, { key: 1 })) : M("", !0)
       ]),
       _: 1
     }));