@pinia/colada-devtools 0.0.2 → 0.0.3

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 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 { useQueryCache as fe } from "@pinia/colada";
 import { DEVTOOLS_INFO_KEY as p, DuplexChannel as pe } from "@pinia/colada-devtools/shared";
 const ve = /* @__PURE__ */ $({
@@ -9,66 +9,83 @@ const ve = /* @__PURE__ */ $({
       t.value = !0;
     }), (o, l) => t.value ? ne(o.$slots, "default", { key: 0 }) : M("", !0);
   }
-}), b = () => performance.timeOrigin + performance.now();
+}), S = () => 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 o of e.getEntries())
+      o[t = p] ?? (o[t] = {
+        count: {
+          total: 0,
+          succeed: 0,
+          errored: 0,
+          cancelled: 0
+        },
+        updatedAt: S(),
+        inactiveAt: 0,
+        simulate: null,
+        history: []
       });
-    }
-  }));
+    e.$onAction(({ name: o, args: l, after: s, onError: d }) => {
+      var h, f;
+      if (o === "create")
+        s((r) => {
+          r[p] = {
+            count: {
+              total: 0,
+              succeed: 0,
+              errored: 0,
+              cancelled: 0
+            },
+            updatedAt: S(),
+            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,
+          updatedAt: u,
+          createdAt: u,
+          fetchTime: null
+        }, n = A((f = r.options) == null ? void 0 : f.enabled) ?? !0;
+        n && (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());
+        }), d(() => {
+          n && (v.fetchTime.end = S(), r[p].count.errored++, v.state = r.state.value, v.updatedAt = S());
+        });
+      } 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 (o === "untrack") {
+        const [r] = l;
+        s(() => {
+          r.active || (r[p].inactiveAt = S());
+        });
+      } else if (o === "setQueryData") {
+        const [r] = l;
+        s(() => {
+          const u = e.getEntries({ key: r, exact: !0 })[0];
+          u && !u.active && (u[p].inactiveAt = S());
+        });
+      }
+    });
+  }
 }
 function w(e) {
   return {
@@ -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: A(e.options.refetchOnMount),
+      refetchOnReconnect: A(e.options.refetchOnReconnect),
+      refetchOnWindowFocus: A(e.options.refetchOnWindowFocus),
+      enabled: A(e.options.enabled)
     },
     deps: Array.from(e.deps).map(
       (t) => "uid" in t ? {
@@ -112,24 +129,24 @@ 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 }) => {
+    me(t), t.$onAction(({ name: n, after: i, onError: m, args: E }) => {
       if (n === "remove") {
-        const [a] = S;
+        const [a] = E;
         i(() => {
           s.emit("queries:delete", w(a));
         });
       } else if (n === "track" || n === "untrack" || n === "cancel" || n === "invalidate" || n === "fetch" || n === "setEntryState") {
-        const [a] = S;
+        const [a] = E;
         if (n === "fetch") {
-          const m = w(a);
-          m.asyncStatus = "loading", s.emit("queries:update", m);
+          const y = w(a);
+          y.asyncStatus = "loading", s.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(() => {
+          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.options.staleTime);
-        }), v(() => {
+        }), m(() => {
           s.emit("queries:update", w(a));
         });
       } else if (n === "create")
@@ -137,10 +154,10 @@ const he = [".isPip", ".port"], ge = /* @__PURE__ */ $({
           s.emit("queries:update", w(a));
         });
       else if (n === "setQueryData") {
-        const [a] = S;
+        const [a] = E;
         i(() => {
-          const m = t.getEntries({ key: a, exact: !0 })[0];
-          m && s.emit("queries:update", w(m));
+          const y = t.getEntries({ key: a, exact: !0 })[0];
+          y && s.emit("queries:update", w(y));
         });
       }
     });
@@ -167,8 +184,8 @@ const he = [".isPip", ".port"], ge = /* @__PURE__ */ $({
         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)));
+      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)));
@@ -190,74 +207,74 @@ const he = [".isPip", ".port"], ge = /* @__PURE__ */ $({
         error: null
       }), i[p].simulate = null, s.emit("queries:update", w(i)));
     });
-    const c = N(null);
-    P(c, () => {
+    const d = N(null);
+    P(d, () => {
       l.value = new MessageChannel();
     }), ye(
       window,
       "unload",
       () => {
         var n;
-        (n = c.value) == null || n.close();
+        (n = d.value) == null || n.close();
       },
       { passive: !0 }
     ), ie(() => {
       var n;
-      (n = c.value) == null || n.close();
+      (n = d.value) == null || n.close();
     });
-    function y() {
+    function h() {
       var n;
-      (n = c.value) == null || n.close(), c.value = null;
+      (n = d.value) == null || n.close(), d.value = null;
     }
-    function r() {
+    function f() {
       const n = o.value;
       if (!n || !n.shadowRoot)
         throw new Error("No devtools elemnt found for Pinia Colada devtools");
       const i = n.shadowRoot.getElementById("root");
       if (!i)
         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(i.offsetWidth, 400), E = Math.max(i.offsetHeight, 400), a = window.open(
         "",
         "pinia-colada-devtools",
-        `popup,width=${v},height=${S}`
+        `popup,width=${m},height=${E}`
       );
       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", r(n, a.document), a.addEventListener(
         "unload",
         () => {
-          c.value = null;
+          d.value = null;
         },
         { passive: !0 }
       );
     }
-    function u(n, i = document) {
+    function r(n, i = document) {
       if (!n || !n.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 = i.getElementById("__pc-tw-properties") ?? i.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);
     }
-    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(
+    async function v() {
+      r(o.value), s.emit("queries:all", t.getEntries({}).map(w)), s.emit(
         "mutations:all",
         // FIXME: mutations
         t.getEntries({}).map(w)
       );
     }
-    return (n, i) => (x(), W(re, {
-      to: c.value ? c.value.document.body : "body"
+    return (n, i) => (x(), W(se, {
+      to: d.value ? d.value.document.body : "body"
     }, [
-      se("pinia-colada-devtools-panel", {
+      re("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: i[0] || (i[0] = (m) => u()),
+        onReady: i[1] || (i[1] = (m) => v())
       }, null, 40, he)
     ], 8, ["to"]));
   }
@@ -265,20 +282,20 @@ 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 Ce(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);
+    return new Promise((s, d) => {
+      Promise.resolve(e(() => t.apply(this, l), { fn: t, thisArg: this, args: l })).then(s).catch(d);
     });
   }
   return o;
@@ -291,13 +308,13 @@ function _e(e = Y, t = {}) {
   function s() {
     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: s, resume: d, eventFilter: h };
 }
 function q(e) {
   return Array.isArray(e) ? e : [e];
@@ -312,7 +329,7 @@ function Oe(e, t, o = {}) {
   } = o;
   return P(
     e,
-    Ae(
+    Ce(
       l,
       t
     ),
@@ -323,16 +340,16 @@ function ke(e, t, o = {}) {
   const {
     eventFilter: l,
     initialState: s = "active",
-    ...c
-  } = o, { eventFilter: y, pause: r, resume: u, isActive: f } = _e(l, { initialState: s });
+    ...d
+  } = o, { eventFilter: h, pause: f, resume: r, isActive: u } = _e(l, { initialState: s });
   return { stop: Oe(
     e,
     t,
     {
-      ...c,
-      eventFilter: y
+      ...d,
+      eventFilter: h
     }
-  ), pause: r, resume: u, isActive: f };
+  ), pause: f, resume: r, isActive: u };
 }
 function xe(e, t = !0, o) {
   Pe() ? L(e, o) : t ? e() : G(e);
@@ -347,46 +364,46 @@ function De(e, t, o) {
     }
   );
 }
-const D = Se ? window : void 0;
+const D = Ee ? window : void 0;
 function Re(e) {
   var t;
-  const o = C(e);
+  const o = A(e);
   return (t = o == null ? void 0 : o.$el) != null ? t : o;
 }
 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(
+    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;
+  }), d = De(
     () => {
-      var r, u;
+      var f, r;
       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])),
+        (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])),
         // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        C(s.value ? e[3] : e[2])
+        A(s.value ? e[3] : e[2])
       ];
     },
-    ([r, u, f, h]) => {
-      if (o(), !(r != null && r.length) || !(u != null && u.length) || !(f != null && f.length))
+    ([f, r, u, v]) => {
+      if (o(), !(f != null && f.length) || !(r != null && r.length) || !(u != null && u.length))
         return;
-      const n = be(h) ? { ...h } : h;
+      const n = be(v) ? { ...v } : v;
       t.push(
-        ...r.flatMap(
-          (i) => u.flatMap(
-            (v) => f.map((S) => l(i, v, S, n))
+        ...f.flatMap(
+          (i) => r.flatMap(
+            (m) => u.map((E) => l(i, m, E, n))
           )
         )
       );
     },
     { flush: "post" }
-  ), y = () => {
-    c(), o();
+  ), h = () => {
+    d(), o();
   };
-  return we(o), y;
+  return we(o), 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() {
@@ -435,93 +452,93 @@ const Fe = {
 function $e(e, t, o, l = {}) {
   var s;
   const {
-    flush: c = "pre",
-    deep: y = !0,
-    listenToStorageChanges: r = !0,
-    writeDefaults: u = !0,
-    mergeDefaults: f = !1,
-    shallow: h,
+    flush: d = "pre",
+    deep: h = !0,
+    listenToStorageChanges: f = !0,
+    writeDefaults: r = !0,
+    mergeDefaults: u = !1,
+    shallow: v,
     window: n = D,
     eventFilter: i,
-    onError: v = (d) => {
-      console.error(d);
+    onError: m = (c) => {
+      console.error(c);
     },
-    initOnMounted: S
-  } = l, a = (h ? N : R)(t), m = U(() => C(e));
+    initOnMounted: E
+  } = l, a = (v ? N : R)(t), y = U(() => A(e));
   if (!o)
     try {
       o = Ne("getDefaultStorage", () => {
-        var d;
-        return (d = D) == null ? void 0 : d.localStorage;
+        var c;
+        return (c = D) == null ? void 0 : c.localStorage;
       })();
-    } catch (d) {
-      v(d);
+    } catch (c) {
+      m(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(
+  const T = A(t), j = We(T), C = (s = l.serializer) != null ? s : Fe[j], { pause: X, resume: V } = ke(
     a,
     () => Z(a.value),
-    { flush: c, deep: y, eventFilter: i }
+    { 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) {
+  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 E = {
-        key: m.value,
-        oldValue: d,
+      const b = {
+        key: y.value,
+        oldValue: c,
         newValue: g,
         storageArea: o
       };
-      n.dispatchEvent(o instanceof Storage ? new StorageEvent("storage", E) : new CustomEvent(B, {
-        detail: E
+      n.dispatchEvent(o instanceof Storage ? new StorageEvent("storage", b) : new CustomEvent(B, {
+        detail: b
       }));
     }
   }
-  function Z(d) {
+  function Z(c) {
     try {
-      const g = o.getItem(m.value);
-      if (d == null)
-        H(g, null), o.removeItem(m.value);
+      const g = o.getItem(y.value);
+      if (c == null)
+        H(g, null), o.removeItem(y.value);
       else {
-        const E = A.write(d);
-        g !== E && (o.setItem(m.value, E), H(g, E));
+        const b = C.write(c);
+        g !== b && (o.setItem(y.value, b), H(g, b));
       }
     } catch (g) {
-      v(g);
+      m(g);
     }
   }
-  function ee(d) {
-    const g = d ? d.newValue : o.getItem(m.value);
+  function ee(c) {
+    const g = c ? c.newValue : o.getItem(y.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);
+      return r && T != null && o.setItem(y.value, C.write(T)), T;
+    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);
   }
-  function _(d) {
-    if (!(d && d.storageArea !== o)) {
-      if (d && d.key == null) {
+  function _(c) {
+    if (!(c && c.storageArea !== o)) {
+      if (c && c.key == null) {
         a.value = T;
         return;
       }
-      if (!(d && d.key !== m.value)) {
+      if (!(c && c.key !== y.value)) {
         X();
         try {
-          (d == null ? void 0 : d.newValue) !== A.write(a.value) && (a.value = ee(d));
+          (c == null ? void 0 : c.newValue) !== C.write(a.value) && (a.value = ee(c));
         } catch (g) {
-          v(g);
+          m(g);
         } finally {
-          d ? G(V) : V();
+          c ? G(V) : V();
         }
       }
     }
   }
-  function te(d) {
-    _(d.detail);
+  function te(c) {
+    _(c.detail);
   }
   return a;
 }
@@ -535,8 +552,8 @@ const Ie = /* @__PURE__ */ $({
     const t = R(!1), o = 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() {
@@ -546,12 +563,12 @@ const Ie = /* @__PURE__ */ $({
       requestIdleCallback(() => {
         import("@pinia/colada-devtools/panel");
       }), o.value && s();
-    }), (c, y) => (x(), W(ve, null, {
+    }), (d, h) => (x(), W(ve, null, {
       default: ce(() => [
         F(o) ? 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) => s())
         }, " 🍹 Devtools ")),
         t.value && F(o) ? (x(), W(ge, { key: 1 })) : M("", !0)
       ]),