@pinia/colada-devtools 0.0.3 → 0.0.5

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 A, 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 se, createElementVNode as re, 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,89 +7,89 @@ 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);
   }
-}), S = () => performance.timeOrigin + performance.now();
+}), b = () => performance.timeOrigin + performance.now();
 function me(e) {
   var t;
   if (!I.has(e)) {
     I.set(e, !0);
-    for (const o of e.getEntries())
-      o[t = p] ?? (o[t] = {
+    for (const n of e.getEntries())
+      n[t = p] ?? (n[t] = {
         count: {
           total: 0,
           succeed: 0,
           errored: 0,
           cancelled: 0
         },
-        updatedAt: S(),
+        updatedAt: b(),
         inactiveAt: 0,
         simulate: null,
         history: []
       });
-    e.$onAction(({ name: o, args: l, after: s, onError: d }) => {
+    e.$onAction(({ name: n, args: l, after: r, onError: d }) => {
       var h, f;
-      if (o === "create")
-        s((r) => {
-          r[p] = {
+      if (n === "create")
+        r((s) => {
+          s[p] = {
             count: {
               total: 0,
               succeed: 0,
               errored: 0,
               cancelled: 0
             },
-            updatedAt: S(),
+            updatedAt: b(),
             inactiveAt: 0,
             simulate: null,
             history: []
           };
         });
-      else if (o === "fetch") {
-        const [r] = l;
-        r[p].count.total++, r[p].updatedAt = S();
-        const u = S(), v = {
-          id: (((h = r[p].history.at(0)) == null ? void 0 : h.id) ?? -1) + 1,
-          key: r.key,
-          state: r.state.value,
+      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
-        }, n = A((f = r.options) == null ? void 0 : f.enabled) ?? !0;
-        n && (v.fetchTime = {
+        }, E = T((f = s.options) == null ? void 0 : f.enabled) ?? !0;
+        E && (v.fetchTime = {
           start: u,
           end: null
-        }), r[p].history.unshift(v), r[p].history = r[p].history.slice(0, 10), s(() => {
-          n && (v.fetchTime.end = S(), r[p].count.succeed++, v.state = r.state.value, v.updatedAt = S());
+        }), 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(() => {
-          n && (v.fetchTime.end = S(), r[p].count.errored++, v.state = r.state.value, v.updatedAt = S());
+          E && (v.fetchTime.end = b(), s[p].count.errored++, v.state = s.state.value, v.updatedAt = b());
         });
-      } else if (o === "cancel") {
-        const [r] = l;
-        r.pending && r[p].count.cancelled++;
-      } else if (o === "setEntryState") {
-        const [r] = l;
-        let u = r[p].history[0];
-        s(() => {
-          r[p].updatedAt = S(), u ?? (u = r[p].history[0]), u && (u.state = r.state.value, u.updatedAt = S());
+      } 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 (o === "untrack") {
-        const [r] = l;
-        s(() => {
-          r.active || (r[p].inactiveAt = S());
+      } else if (n === "untrack") {
+        const [s] = l;
+        r(() => {
+          s.active || (s[p].inactiveAt = b());
         });
-      } else if (o === "setQueryData") {
-        const [r] = l;
-        s(() => {
-          const u = e.getEntries({ key: r, exact: !0 })[0];
-          u && !u.active && (u[p].inactiveAt = S());
+      } 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"),
+    keyHash: e.keyHash,
     key: e.key,
     state: e.state.value,
     asyncStatus: e.asyncStatus.value,
@@ -99,10 +99,10 @@ function w(e) {
     options: e.options && {
       staleTime: e.options.staleTime,
       gcTime: e.options.gcTime,
-      refetchOnMount: A(e.options.refetchOnMount),
-      refetchOnReconnect: A(e.options.refetchOnReconnect),
-      refetchOnWindowFocus: A(e.options.refetchOnWindowFocus),
-      enabled: A(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 ? {
@@ -120,127 +120,127 @@ 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: m, args: E }) => {
-      if (n === "remove") {
-        const [a] = E;
-        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] = E;
-        if (n === "fetch") {
-          const y = w(a);
-          y.asyncStatus = "loading", s.emit("queries:update", y);
+      } 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(() => {
+        o(() => {
           var y;
-          a[p].simulate = null, s.emit("queries:update", w(a)), n === "fetch" && ((y = a.options) == null ? void 0 : y.staleTime) != null && Number.isFinite(a.options.staleTime) && setTimeout(() => {
-            s.emit("queries:update", w(a));
+          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);
         }), m(() => {
-          s.emit("queries:update", w(a));
+          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] = E;
-        i(() => {
+      else if (i === "setQueryData") {
+        const [a] = g;
+        o(() => {
           const y = t.getEntries({ key: a, exact: !0 })[0];
-          y && s.emit("queries:update", w(y));
+          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 m = t.getEntries({ key: n, exact: !0 })[0];
-      m && (t.setEntryState(m, i), s.emit("queries:update", w(m)));
-    }), 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 d = N(null);
-    P(d, () => {
+    _(d, () => {
       l.value = new MessageChannel();
     }), ye(
       window,
       "unload",
       () => {
-        var n;
-        (n = d.value) == null || n.close();
+        var i;
+        (i = d.value) == null || i.close();
       },
       { passive: !0 }
     ), ie(() => {
-      var n;
-      (n = d.value) == null || n.close();
+      var i;
+      (i = d.value) == null || i.close();
     });
     function h() {
-      var n;
-      (n = d.value) == null || n.close(), d.value = null;
+      var i;
+      (i = d.value) == null || i.close(), d.value = null;
     }
     function f() {
-      const n = o.value;
-      if (!n || !n.shadowRoot)
+      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 m = Math.max(i.offsetWidth, 400), E = 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=${m},height=${E}`
+        `popup,width=${m},height=${g}`
       );
       if (!a)
         throw new Error("Failed to open PiP window for Pinia Colada devtools");
-      d.value = a, a.document.head.innerHTML = "", a.document.body.innerHTML = "", a.document.title = "🍹 Pinia Colada Devtools", a.document.body.style.margin = "0", r(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",
         () => {
           d.value = null;
@@ -248,33 +248,42 @@ const he = [".isPip", ".port"], ge = /* @__PURE__ */ $({
         { passive: !0 }
       );
     }
-    function r(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 m = i.getElementById("__pc-tw-properties") ?? i.createElement("style");
+      const m = o.getElementById("__pc-tw-properties") ?? o.createElement("style");
       m.setAttribute("id", "__pc-tw-properties");
-      const E = [...n.shadowRoot.styleSheets].flatMap((a) => [...a.cssRules]).filter((a) => a instanceof CSSPropertyRule).map((a) => a.cssText).join("");
-      m.textContent = E, i.head.appendChild(m);
+      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 u() {
       d.value ? h() : f();
     }
-    async function v() {
-      r(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(se, {
+    return (i, o) => (x(), W(re, {
       to: d.value ? d.value.document.body : "body"
     }, [
-      re("pinia-colada-devtools-panel", {
+      se("pinia-colada-devtools-panel", {
         ref: "devtools",
         ".isPip": !!d.value,
         ".port": l.value.port2,
-        onTogglePip: i[0] || (i[0] = (m) => u()),
-        onReady: i[1] || (i[1] = (m) => v())
+        onTogglePip: o[0] || (o[0] = (m) => u()),
+        onReady: o[1] || (o[1] = (m) => E())
       }, null, 40, he)
     ], 8, ["to"]));
   }
@@ -293,19 +302,19 @@ function Te(...e) {
   return typeof t == "function" ? K(ue(() => ({ get: t, set: Ae }))) : R(t);
 }
 function Ce(e, t) {
-  function o(...l) {
-    return new Promise((s, d) => {
-      Promise.resolve(e(() => t.apply(this, l), { fn: t, thisArg: this, args: l })).then(s).catch(d);
+  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 d() {
@@ -314,34 +323,34 @@ function _e(e = Y, t = {}) {
   const h = (...f) => {
     l.value && e(...f);
   };
-  return { isActive: K(l), pause: s, resume: d, eventFilter: h };
+  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,
     Ce(
       l,
       t
     ),
-    s
+    r
   );
 }
-function ke(e, t, o = {}) {
+function ke(e, t, n = {}) {
   const {
     eventFilter: l,
-    initialState: s = "active",
+    initialState: r = "active",
     ...d
-  } = o, { eventFilter: h, pause: f, resume: r, isActive: u } = _e(l, { initialState: s });
+  } = n, { eventFilter: h, pause: f, resume: s, isActive: u } = Pe(l, { initialState: r });
   return { stop: Oe(
     e,
     t,
@@ -349,17 +358,17 @@ function ke(e, t, o = {}) {
       ...d,
       eventFilter: h
     }
-  ), pause: f, resume: r, isActive: u };
+  ), 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
     }
   );
@@ -367,43 +376,43 @@ function De(e, t, o) {
 const D = Ee ? window : void 0;
 function Re(e) {
   var t;
-  const o = A(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 = () => {
+  const t = [], n = () => {
     t.forEach((f) => f()), t.length = 0;
-  }, l = (f, r, u, v) => (f.addEventListener(r, u, v), () => f.removeEventListener(r, u, v)), s = U(() => {
-    const f = q(A(e[0])).filter((r) => r != null);
-    return f.every((r) => typeof r != "string") ? f : void 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 f, r;
+      var f, s;
       return [
-        (r = (f = s.value) == null ? void 0 : f.map((u) => Re(u))) != null ? r : [D].filter((u) => u != null),
-        q(A(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
-        A(s.value ? e[3] : e[2])
+        T(r.value ? e[3] : e[2])
       ];
     },
-    ([f, r, u, v]) => {
-      if (o(), !(f != null && f.length) || !(r != null && r.length) || !(u != null && u.length))
+    ([f, s, u, v]) => {
+      if (n(), !(f != null && f.length) || !(s != null && s.length) || !(u != null && u.length))
         return;
-      const n = be(v) ? { ...v } : v;
+      const E = be(v) ? { ...v } : v;
       t.push(
         ...f.flatMap(
-          (i) => r.flatMap(
-            (m) => u.map((E) => l(i, m, E, n))
+          (i) => s.flatMap(
+            (o) => u.map((m) => l(i, o, m, E))
           )
         )
       );
     },
     { flush: "post" }
   ), h = () => {
-    d(), o();
+    d(), n();
   };
-  return we(o), h;
+  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() {
@@ -449,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: d = "pre",
     deep: h = !0,
     listenToStorageChanges: f = !0,
-    writeDefaults: r = !0,
+    writeDefaults: s = !0,
     mergeDefaults: u = !1,
     shallow: v,
-    window: n = D,
+    window: E = D,
     eventFilter: i,
-    onError: m = (c) => {
+    onError: o = (c) => {
       console.error(c);
     },
-    initOnMounted: E
-  } = l, a = (v ? N : R)(t), y = U(() => A(e));
-  if (!o)
+    initOnMounted: m
+  } = l, g = (v ? N : R)(t), a = U(() => T(e));
+  if (!n)
     try {
-      o = Ne("getDefaultStorage", () => {
+      n = Ne("getDefaultStorage", () => {
         var c;
         return (c = D) == null ? void 0 : c.localStorage;
       })();
     } catch (c) {
-      m(c);
+      o(c);
     }
-  if (!o)
-    return a;
-  const T = A(t), j = We(T), C = (s = l.serializer) != null ? s : Fe[j], { pause: X, resume: V } = ke(
-    a,
-    () => Z(a.value),
+  if (!n)
+    return g;
+  const y = T(t), j = We(y), C = (r = l.serializer) != null ? r : Fe[j], { pause: X, resume: H } = ke(
+    g,
+    () => Z(g.value),
     { flush: d, deep: h, eventFilter: i }
   );
-  P(y, () => _(), { flush: d }), n && f && xe(() => {
-    o instanceof Storage ? z(n, "storage", _, { passive: !0 }) : z(n, B, te), E && _();
-  }), E || _();
-  function H(c, g) {
-    if (n) {
-      const b = {
-        key: y.value,
+  _(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 V(c, w) {
+    if (E) {
+      const A = {
+        key: a.value,
         oldValue: c,
-        newValue: g,
-        storageArea: o
+        newValue: w,
+        storageArea: n
       };
-      n.dispatchEvent(o instanceof Storage ? new StorageEvent("storage", b) : new CustomEvent(B, {
-        detail: b
+      E.dispatchEvent(n instanceof Storage ? new StorageEvent("storage", A) : new CustomEvent(B, {
+        detail: A
       }));
     }
   }
   function Z(c) {
     try {
-      const g = o.getItem(y.value);
+      const w = n.getItem(a.value);
       if (c == null)
-        H(g, null), o.removeItem(y.value);
+        V(w, null), n.removeItem(a.value);
       else {
-        const b = C.write(c);
-        g !== b && (o.setItem(y.value, b), H(g, b));
+        const A = C.write(c);
+        w !== A && (n.setItem(a.value, A), V(w, A));
       }
-    } catch (g) {
-      m(g);
+    } catch (w) {
+      o(w);
     }
   }
   function ee(c) {
-    const g = c ? c.newValue : o.getItem(y.value);
-    if (g == null)
-      return r && T != null && o.setItem(y.value, C.write(T)), T;
+    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 b = C.read(g);
-      return typeof u == "function" ? u(b, T) : j === "object" && !Array.isArray(b) ? { ...T, ...b } : b;
-    } else return typeof g != "string" ? g : C.read(g);
+      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 _(c) {
-    if (!(c && c.storageArea !== o)) {
+  function P(c) {
+    if (!(c && c.storageArea !== n)) {
       if (c && c.key == null) {
-        a.value = T;
+        g.value = y;
         return;
       }
-      if (!(c && c.key !== y.value)) {
+      if (!(c && c.key !== a.value)) {
         X();
         try {
-          (c == null ? void 0 : c.newValue) !== C.write(a.value) && (a.value = ee(c));
-        } catch (g) {
-          m(g);
+          (c == null ? void 0 : c.newValue) !== C.write(g.value) && (g.value = ee(c));
+        } catch (w) {
+          o(w);
         } finally {
-          c ? G(V) : V();
+          c ? G(H) : H();
         }
       }
     }
   }
   function te(c) {
-    _(c.detail);
+    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: 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();
+      }), 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: h[0] || (h[0] = (f) => 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
     }));