atomirx 0.0.8 → 0.1.1

package/dist/react-devtools/index.js

@@ -0,0 +1,1589 @@
+import { jsxs as i, jsx as r, Fragment as z } from "react/jsx-runtime";
+import { useCallback as h, useSyncExternalStore as V, useState as L, useEffect as S, memo as I, useMemo as M } from "react";
+import { createRoot as me } from "react-dom/client";
+import { STORAGE_KEY_PREFERENCES as j, DEFAULT_PREFERENCES as N, MIN_PANEL_SIZE as H, MAX_PANEL_SIZE as K, ANIMATION_DURATION as E, FLOATING_BUTTON_SIZE as O, DEVTOOLS_Z_INDEX as U, setupDevtools as X, getDevtoolsRegistry as _ } from "../devtools/index.js";
+import { DEFAULT_MAX_HISTORY_SIZE as pt, DEFAULT_PANEL_SIZE as ht, ENTITY_ID_PREFIX as xt, STORAGE_VERSION as vt, _resetDevtools as gt, getRegistry as bt, isDevtoolsEnabled as yt, resetRegistry as St } from "../devtools/index.js";
+function fe() {
+  try {
+    const e = localStorage.getItem(j);
+    if (e) {
+      const t = JSON.parse(e);
+      return { ...N, ...t };
+    }
+  } catch {
+  }
+  return N;
+}
+function pe(e) {
+  try {
+    localStorage.setItem(j, JSON.stringify(e));
+  } catch {
+  }
+}
+function he() {
+  const [e, t] = L(
+    () => fe()
+  );
+  S(() => {
+    pe(e);
+  }, [e]);
+  const n = h((c) => {
+    t((u) => ({ ...u, isOpen: c }));
+  }, []), o = h((c) => {
+    t((u) => ({ ...u, position: c }));
+  }, []), a = h((c) => {
+    t((u) => ({ ...u, activeTab: c }));
+  }, []), l = h((c) => {
+    const u = Math.max(H, Math.min(K, c));
+    t((b) => ({ ...b, panelSize: u }));
+  }, []), d = h((c, u) => {
+    t((b) => ({
+      ...b,
+      searchText: { ...b.searchText, [c]: u }
+    }));
+  }, []), m = h((c) => {
+    t((u) => ({ ...u, atomFilter: c }));
+  }, []), x = h((c) => {
+    t((u) => ({ ...u, selectedEntityId: c }));
+  }, []), s = h((c) => {
+    t((u) => ({ ...u, showAtomValues: c }));
+  }, []), f = h(() => {
+    t((c) => ({
+      ...c,
+      showAtomValues: !c.showAtomValues
+    }));
+  }, []), g = h(() => {
+    t((c) => ({ ...c, isOpen: !c.isOpen }));
+  }, []), D = h(() => {
+    t((c) => {
+      const u = ["bottom", "right", "left"], R = (u.indexOf(c.position) + 1) % u.length;
+      return { ...c, position: u[R] };
+    });
+  }, []);
+  return {
+    preferences: e,
+    setIsOpen: n,
+    setPosition: o,
+    setActiveTab: a,
+    setPanelSize: l,
+    setSearchText: d,
+    setAtomFilter: m,
+    setSelectedEntityId: x,
+    setShowAtomValues: s,
+    togglePanel: g,
+    cyclePosition: D,
+    toggleShowAtomValues: f
+  };
+}
+function xe(e) {
+  const t = h(
+    (o) => e ? e.subscribe(o) : () => {
+    },
+    [e]
+  ), n = h(() => e ? e.entities : null, [e]);
+  return V(t, n, n);
+}
+function ve(e) {
+  const t = h(
+    (o) => e ? e.subscribe(o) : () => {
+    },
+    [e]
+  ), n = h(() => e ? e.logs : null, [e]);
+  return V(t, n, n);
+}
+function ge(e, t = !0) {
+  S(() => {
+    if (!t) return;
+    const n = (o) => {
+      (o.ctrlKey || o.metaKey) && o.shiftKey && o.key.toLowerCase() === "d" && (o.preventDefault(), e());
+    };
+    return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
+  }, [e, t]);
+}
+function be(e, t, n) {
+  const [o, a] = L(!1), l = h((d) => {
+    d.preventDefault(), a(!0);
+  }, []);
+  return S(() => {
+    if (!o) return;
+    const d = (x) => {
+      let s;
+      switch (e) {
+        case "bottom":
+          s = window.innerHeight - x.clientY;
+          break;
+        case "right":
+          s = window.innerWidth - x.clientX;
+          break;
+        case "left":
+          s = x.clientX;
+          break;
+      }
+      n(Math.max(H, Math.min(K, s)));
+    }, m = () => {
+      a(!1);
+    };
+    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", m), () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", m);
+    };
+  }, [o, e, n]), {
+    isResizing: o,
+    handleMouseDown: l
+  };
+}
+function k(e, t = 500) {
+  if (e === void 0) return "undefined";
+  if (e === null) return "null";
+  try {
+    const n = /* @__PURE__ */ new WeakSet(), o = JSON.stringify(
+      e,
+      (a, l) => {
+        if (typeof l == "object" && l !== null) {
+          if (n.has(l)) return "[Circular]";
+          n.add(l);
+        }
+        return typeof l == "function" ? "[Function]" : typeof l == "symbol" ? l.toString() : l instanceof Error ? `[Error: ${l.message}]` : l instanceof Map ? `[Map(${l.size})]` : l instanceof Set ? `[Set(${l.size})]` : l instanceof WeakMap ? "[WeakMap]" : l instanceof WeakSet ? "[WeakSet]" : l instanceof Promise ? "[Promise]" : l;
+      },
+      2
+    );
+    return o.length > t ? o.slice(0, t) + "..." : o;
+  } catch {
+    return "[unserializable]";
+  }
+}
+function A(e) {
+  const t = new Date(e), n = t.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }), o = String(t.getMilliseconds()).padStart(3, "0");
+  return `${n}.${o}`;
+}
+const ye = {
+  // Colors
+  "--atomirx-bg-primary": "#1a1a2e",
+  "--atomirx-bg-secondary": "#16213e",
+  "--atomirx-bg-tertiary": "#0f3460",
+  "--atomirx-bg-hover": "#1f4287",
+  "--atomirx-text-primary": "#eaeaea",
+  "--atomirx-text-secondary": "#a0a0a0",
+  "--atomirx-text-muted": "#666666",
+  "--atomirx-border": "#2a2a4a",
+  "--atomirx-accent": "#e94560",
+  "--atomirx-accent-hover": "#ff6b6b",
+  "--atomirx-success": "#4ade80",
+  "--atomirx-warning": "#fbbf24",
+  "--atomirx-error": "#ef4444",
+  "--atomirx-info": "#3b82f6",
+  // Badges
+  "--atomirx-badge-mutable": "#3b82f6",
+  "--atomirx-badge-derived": "#8b5cf6",
+  "--atomirx-badge-effect": "#f59e0b",
+  "--atomirx-badge-pool": "#10b981",
+  "--atomirx-badge-module": "#ec4899",
+  // Sizing
+  "--atomirx-radius": "6px",
+  "--atomirx-radius-lg": "8px",
+  "--atomirx-font-size": "11px",
+  "--atomirx-font-size-sm": "9px",
+  "--atomirx-font-mono": "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
+}, Se = {
+  ...Object.fromEntries(Object.entries(ye).map(([e, t]) => [e, t])),
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontSize: "var(--atomirx-font-size)",
+  color: "var(--atomirx-text-primary)",
+  boxSizing: "border-box"
+}, we = {
+  position: "fixed",
+  bottom: 16,
+  left: 16,
+  width: O,
+  height: O,
+  borderRadius: "50%",
+  backgroundColor: "var(--atomirx-accent)",
+  color: "white",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+  zIndex: U + 1,
+  transition: `transform ${E}ms ease, background-color ${E}ms ease`
+}, ke = (e, t, n) => {
+  const o = {
+    position: "fixed",
+    backgroundColor: "var(--atomirx-bg-primary)",
+    borderColor: "var(--atomirx-border)",
+    borderStyle: "solid",
+    borderTopWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    zIndex: U,
+    display: "flex",
+    flexDirection: "column",
+    transition: `transform ${E}ms ease`,
+    overflow: "hidden"
+  };
+  switch (e) {
+    case "bottom":
+      return {
+        ...o,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: t,
+        borderTopWidth: 1,
+        transform: n ? "translateY(0)" : "translateY(100%)"
+      };
+    case "right":
+      return {
+        ...o,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: t,
+        borderLeftWidth: 1,
+        transform: n ? "translateX(0)" : "translateX(100%)"
+      };
+    case "left":
+      return {
+        ...o,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: t,
+        borderRightWidth: 1,
+        transform: n ? "translateX(0)" : "translateX(-100%)"
+      };
+  }
+}, Ce = {
+  display: "flex",
+  alignItems: "center",
+  gap: 0,
+  backgroundColor: "var(--atomirx-bg-secondary)",
+  borderBottom: "1px solid var(--atomirx-border)",
+  padding: "0 8px",
+  height: 40,
+  flexShrink: 0
+}, ze = (e) => ({
+  padding: "8px 14px",
+  background: "none",
+  border: "none",
+  color: e ? "var(--atomirx-text-primary)" : "var(--atomirx-text-secondary)",
+  cursor: "pointer",
+  fontSize: "var(--atomirx-font-size)",
+  fontWeight: e ? 600 : 400,
+  borderBottom: e ? "2px solid var(--atomirx-accent)" : "2px solid transparent",
+  marginBottom: -1,
+  transition: `color ${E}ms ease, border-color ${E}ms ease`
+}), Ee = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "8px 12px",
+  backgroundColor: "var(--atomirx-bg-secondary)",
+  borderBottom: "1px solid var(--atomirx-border)",
+  flexShrink: 0
+}, Ie = {
+  flex: 1,
+  padding: "6px 10px",
+  backgroundColor: "var(--atomirx-bg-tertiary)",
+  border: "1px solid var(--atomirx-border)",
+  borderRadius: "var(--atomirx-radius)",
+  color: "var(--atomirx-text-primary)",
+  fontSize: "var(--atomirx-font-size)",
+  outline: "none",
+  minWidth: 0
+}, De = {
+  display: "flex",
+  gap: 0,
+  borderRadius: "var(--atomirx-radius)",
+  overflow: "hidden",
+  border: "1px solid var(--atomirx-border)"
+}, $ = (e) => ({
+  padding: "4px 10px",
+  background: e ? "var(--atomirx-bg-hover)" : "var(--atomirx-bg-tertiary)",
+  border: "none",
+  color: e ? "var(--atomirx-text-primary)" : "var(--atomirx-text-secondary)",
+  cursor: "pointer",
+  fontSize: "var(--atomirx-font-size-sm)",
+  transition: `background-color ${E}ms ease`
+}), G = {
+  flex: 1,
+  overflow: "auto",
+  padding: 0
+}, Le = (e) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "8px 12px",
+  borderBottom: "1px solid var(--atomirx-border)",
+  cursor: "pointer",
+  backgroundColor: e ? "var(--atomirx-bg-hover)" : "transparent",
+  transition: `background-color ${E}ms ease`
+}), Y = (e) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 22,
+  height: 22,
+  borderRadius: "var(--atomirx-radius)",
+  backgroundColor: {
+    mutable: "var(--atomirx-badge-mutable)",
+    derived: "var(--atomirx-badge-derived)",
+    effect: "var(--atomirx-badge-effect)",
+    pool: "var(--atomirx-badge-pool)",
+    module: "var(--atomirx-badge-module)"
+  }[e],
+  color: "white",
+  fontSize: "var(--atomirx-font-size-sm)",
+  fontWeight: 600,
+  flexShrink: 0
+}), Z = {
+  flex: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  fontFamily: "var(--atomirx-font-mono)",
+  fontSize: 11
+}, J = {
+  color: "var(--atomirx-text-muted)",
+  fontSize: "var(--atomirx-font-size-sm)",
+  fontFamily: "var(--atomirx-font-mono)",
+  maxWidth: 150,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}, Me = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "var(--atomirx-bg-primary)",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  zIndex: 100
+}, Te = {
+  padding: "10px",
+  borderBottom: "1px solid var(--atomirx-border)",
+  fontWeight: 600
+}, Re = {
+  padding: "10px",
+  borderBottom: "1px solid var(--atomirx-border)"
+}, Ae = {
+  fontSize: "var(--atomirx-font-size-sm)",
+  color: "var(--atomirx-text-secondary)",
+  marginBottom: 4,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+}, y = {
+  fontFamily: "var(--atomirx-font-mono)",
+  fontSize: "var(--atomirx-font-size)",
+  wordBreak: "break-all"
+}, T = {
+  backgroundColor: "var(--atomirx-bg-tertiary)",
+  padding: "6px 8px",
+  borderRadius: "var(--atomirx-radius)",
+  fontFamily: "var(--atomirx-font-mono)",
+  fontSize: "var(--atomirx-font-size-sm)",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-all"
+}, Be = {
+  padding: "4px 0",
+  borderBottom: "1px solid var(--atomirx-border)",
+  fontSize: "var(--atomirx-font-size-sm)"
+}, Pe = {
+  color: "var(--atomirx-text-muted)",
+  fontSize: "var(--atomirx-font-size-sm)"
+}, We = {
+  padding: "4px 8px",
+  background: "var(--atomirx-bg-tertiary)",
+  border: "1px solid var(--atomirx-border)",
+  borderRadius: "var(--atomirx-radius)",
+  color: "var(--atomirx-text-secondary)",
+  cursor: "pointer",
+  fontSize: "var(--atomirx-font-size-sm)",
+  marginLeft: "auto"
+}, q = {
+  padding: "4px 8px",
+  background: "none",
+  border: "none",
+  color: "var(--atomirx-text-secondary)",
+  cursor: "pointer",
+  fontSize: 18,
+  lineHeight: 1
+}, Q = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 32,
+  color: "var(--atomirx-text-muted)",
+  fontStyle: "italic"
+}, P = (e) => ({
+  display: "inline-block",
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor: {
+    ready: "var(--atomirx-success)",
+    loading: "var(--atomirx-warning)",
+    error: "var(--atomirx-error)"
+  }[e],
+  marginRight: 6
+}), Fe = (e) => {
+  const t = {
+    position: "absolute",
+    backgroundColor: "transparent",
+    zIndex: 1
+  };
+  switch (e) {
+    case "bottom":
+      return {
+        ...t,
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 4,
+        cursor: "ns-resize"
+      };
+    case "right":
+      return {
+        ...t,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: 4,
+        cursor: "ew-resize"
+      };
+    case "left":
+      return {
+        ...t,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: 4,
+        cursor: "ew-resize"
+      };
+  }
+}, Ne = {
+  display: "flex",
+  flex: 1,
+  overflow: "hidden"
+};
+function Oe(e, t) {
+  const n = e.instanceRef.deref();
+  if (!n) return "[disposed]";
+  switch (e.type) {
+    case "mutable":
+      return t ? k(n.get(), 50) : "—";
+    case "derived":
+      return t ? k(n.staleValue, 50) : "—";
+    case "effect":
+      return `runs: ${e.runCount}`;
+    case "pool":
+      return `entries: ${n.size()}`;
+    case "module":
+      return "[module]";
+    default:
+      return "";
+  }
+}
+function B(e) {
+  const t = e.instanceRef.deref();
+  return t ? t.state().status : "error";
+}
+const _e = I(function({
+  entity: t,
+  isSelected: n,
+  onClick: o,
+  showValues: a
+}) {
+  const [l, d] = L(0);
+  S(() => {
+    const s = t.instanceRef.deref();
+    if (s) {
+      if (t.type === "mutable" || t.type === "derived")
+        return a ? s.on(() => {
+          d((g) => g + 1);
+        }) : void 0;
+      if (t.type === "pool")
+        return s.on(() => {
+          d((g) => g + 1);
+        });
+    }
+  }, [t, a]);
+  const m = M(
+    () => Oe(t, a),
+    // updateCount triggers recalculation on atom changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, a, l]
+  ), x = t.key || `anonymous-${t.id.split("-").pop()}`;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        ...Le(n),
+        flexDirection: "column",
+        alignItems: "stretch",
+        gap: 4
+      },
+      onClick: o,
+      onMouseEnter: (s) => {
+        n || (s.currentTarget.style.backgroundColor = "var(--atomirx-bg-hover)");
+      },
+      onMouseLeave: (s) => {
+        n || (s.currentTarget.style.backgroundColor = "transparent");
+      },
+      children: [
+        /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ r("span", { style: Y(t.type), children: t.type === "mutable" ? "M" : t.type === "derived" ? "D" : t.type === "pool" ? "P" : t.type === "effect" ? "E" : "M" }),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                ...Z,
+                ...t.type === "derived" && {
+                  color: B(t) === "ready" ? "var(--atomirx-success)" : B(t) === "loading" ? "var(--atomirx-warning)" : B(t) === "error" ? "var(--atomirx-error)" : void 0
+                }
+              },
+              title: x,
+              children: x
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                color: "var(--atomirx-text-muted)",
+                fontSize: "var(--atomirx-font-size-sm)",
+                flexShrink: 0,
+                marginLeft: "auto"
+              },
+              children: A(t.lastUpdatedAt)
+            }
+          )
+        ] }),
+        a && m !== "—" && /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              ...J,
+              marginLeft: 30,
+              // Align with text after badge
+              maxWidth: "none"
+            },
+            title: m,
+            children: m
+          }
+        )
+      ]
+    }
+  );
+}), $e = I(function({
+  entities: t,
+  activeTab: n,
+  searchText: o,
+  atomFilter: a,
+  selectedEntityId: l,
+  onSelectEntity: d,
+  showValues: m
+}) {
+  const x = M(() => {
+    var D;
+    const f = [], g = o.toLowerCase();
+    for (const c of t.values()) {
+      switch (n) {
+        case "atoms":
+          if (c.type !== "mutable" && c.type !== "derived" || a === "mutable" && c.type !== "mutable" || a === "derived" && c.type !== "derived") continue;
+          break;
+        case "effects":
+          if (c.type !== "effect") continue;
+          break;
+        case "pools":
+          if (c.type !== "pool") continue;
+          break;
+        case "modules":
+          if (c.type !== "module") continue;
+          break;
+      }
+      if (o) {
+        const u = (D = c.key) == null ? void 0 : D.toLowerCase().includes(g), b = c.id.toLowerCase().includes(g);
+        if (!u && !b) continue;
+      }
+      f.push(c);
+    }
+    return f.sort((c, u) => u.lastUpdatedAt - c.lastUpdatedAt), f;
+  }, [t, n, o, a]), s = h(
+    (f) => {
+      d(l === f ? null : f);
+    },
+    [l, d]
+  );
+  return x.length === 0 ? /* @__PURE__ */ r("div", { style: Q, children: o ? `No ${n} matching "${o}"` : `No ${n} registered` }) : /* @__PURE__ */ r("div", { style: G, children: x.map((f) => /* @__PURE__ */ r(
+    _e,
+    {
+      entity: f,
+      isSelected: f.id === l,
+      onClick: () => s(f.id),
+      showValues: m
+    },
+    f.id
+  )) });
+});
+function ee(e) {
+  const t = e.instanceRef.deref();
+  if (!t)
+    return { value: "[disposed]", status: "error" };
+  switch (e.type) {
+    case "mutable":
+      return { value: k(t.get()), status: "ready" };
+    case "derived": {
+      const o = t.state();
+      return o.status === "loading" ? { value: "[loading...]", status: "loading" } : o.status === "error" ? {
+        value: k(o.error),
+        status: "error"
+      } : { value: k(o.value), status: "ready" };
+    }
+    case "pool": {
+      const n = t, o = [];
+      return n.forEach((a, l) => {
+        o.push({ params: l, value: a });
+      }), { value: k(o), status: "ready" };
+    }
+    case "effect":
+    case "module":
+      return { value: "[N/A]", status: "ready" };
+    default:
+      return { value: "[unknown]" };
+  }
+}
+function v({
+  label: e,
+  children: t
+}) {
+  return /* @__PURE__ */ i("div", { style: Re, children: [
+    /* @__PURE__ */ r("div", { style: Ae, children: e }),
+    t
+  ] });
+}
+function te({ entry: e }) {
+  return /* @__PURE__ */ i("div", { style: Be, children: [
+    /* @__PURE__ */ r("div", { style: Pe, children: A(e.timestamp) }),
+    /* @__PURE__ */ i("div", { style: { marginTop: 4 }, children: [
+      /* @__PURE__ */ r("span", { style: { color: "var(--atomirx-error)" }, children: "- " }),
+      /* @__PURE__ */ r("span", { style: { fontFamily: "var(--atomirx-font-mono)" }, children: e.previousValue.length > 100 ? e.previousValue.slice(0, 100) + "..." : e.previousValue })
+    ] }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ r("span", { style: { color: "var(--atomirx-success)" }, children: "+ " }),
+      /* @__PURE__ */ r("span", { style: { fontFamily: "var(--atomirx-font-mono)" }, children: e.newValue.length > 100 ? e.newValue.slice(0, 100) + "..." : e.newValue })
+    ] })
+  ] });
+}
+function Ve({ entity: e }) {
+  const { value: t, status: n } = M(() => ee(e), [e]);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ i(v, { label: "Current Value", children: [
+      /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", marginBottom: 8 }, children: [
+        /* @__PURE__ */ r("span", { style: P(n || "ready") }),
+        /* @__PURE__ */ r("span", { style: y, children: n })
+      ] }),
+      /* @__PURE__ */ r("div", { style: T, children: t })
+    ] }),
+    /* @__PURE__ */ r(v, { label: "Stats", children: /* @__PURE__ */ i("div", { style: y, children: [
+      /* @__PURE__ */ i("div", { children: [
+        "Changes: ",
+        e.changeCount
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        "Subscribers: ",
+        e.subscriberCount
+      ] })
+    ] }) }),
+    e.history.length > 0 && /* @__PURE__ */ r(v, { label: `History (${e.history.length})`, children: e.history.map((o, a) => /* @__PURE__ */ r(te, { entry: o }, a)) })
+  ] });
+}
+function je({ entity: e }) {
+  const { value: t, status: n } = M(() => ee(e), [e]);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ i(v, { label: "Current Value", children: [
+      /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", marginBottom: 8 }, children: [
+        /* @__PURE__ */ r("span", { style: P(n || "ready") }),
+        /* @__PURE__ */ r("span", { style: y, children: n })
+      ] }),
+      /* @__PURE__ */ r("div", { style: T, children: t })
+    ] }),
+    /* @__PURE__ */ r(v, { label: "Stats", children: /* @__PURE__ */ i("div", { style: y, children: [
+      /* @__PURE__ */ i("div", { children: [
+        "Changes: ",
+        e.changeCount
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        "Subscribers: ",
+        e.subscriberCount
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        "Dependencies: ",
+        e.dependencyIds.length || "unknown"
+      ] })
+    ] }) }),
+    e.dependencyIds.length > 0 && /* @__PURE__ */ r(v, { label: "Dependencies", children: /* @__PURE__ */ r("div", { style: T, children: e.dependencyIds.map((o) => /* @__PURE__ */ r("div", { children: o }, o)) }) }),
+    e.history.length > 0 && /* @__PURE__ */ r(v, { label: `History (${e.history.length})`, children: e.history.map((o, a) => /* @__PURE__ */ r(te, { entry: o }, a)) })
+  ] });
+}
+function He({ entity: e }) {
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ r(v, { label: "Status", children: /* @__PURE__ */ r("div", { style: y, children: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ r("span", { style: P(e.isActive ? "ready" : "error") }),
+      e.isActive ? "Active" : "Disposed"
+    ] }) }) }),
+    /* @__PURE__ */ r(v, { label: "Stats", children: /* @__PURE__ */ i("div", { style: y, children: [
+      /* @__PURE__ */ i("div", { children: [
+        "Run count: ",
+        e.runCount
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        "Changes: ",
+        e.changeCount
+      ] })
+    ] }) }),
+    e.dependencyIds.length > 0 && /* @__PURE__ */ r(v, { label: "Dependencies", children: /* @__PURE__ */ r("div", { style: T, children: e.dependencyIds.map((t) => /* @__PURE__ */ r("div", { children: t }, t)) }) })
+  ] });
+}
+function Ke({ params: e, value: t }) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        padding: "8px",
+        borderBottom: "1px solid var(--atomirx-border)"
+      },
+      children: [
+        /* @__PURE__ */ i("div", { style: { marginBottom: 4 }, children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                fontSize: "var(--atomirx-font-size-sm)",
+                color: "var(--atomirx-text-secondary)",
+                marginRight: 6
+              },
+              children: "params:"
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                fontFamily: "var(--atomirx-font-mono)",
+                fontSize: "var(--atomirx-font-size)",
+                color: "var(--atomirx-info)"
+              },
+              children: k(e, 100)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                fontSize: "var(--atomirx-font-size-sm)",
+                color: "var(--atomirx-text-secondary)",
+                marginRight: 6
+              },
+              children: "value:"
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                fontFamily: "var(--atomirx-font-mono)",
+                fontSize: "var(--atomirx-font-size)"
+              },
+              children: k(t, 200)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Ue({ entity: e }) {
+  const [t, n] = L(0);
+  S(() => {
+    const a = e.instanceRef.deref();
+    return a ? a.on(() => {
+      n((d) => d + 1);
+    }) : void 0;
+  }, [e]);
+  const o = M(() => {
+    const a = e.instanceRef.deref();
+    if (!a) return [];
+    const l = a, d = [];
+    return l.forEach((m, x) => {
+      d.push({ params: x, value: m });
+    }), d;
+  }, [e, t]);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ r(v, { label: "Config", children: /* @__PURE__ */ i("div", { style: y, children: [
+      /* @__PURE__ */ i("div", { children: [
+        "Entry count: ",
+        o.length
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        "GC time: ",
+        e.gcTime,
+        "ms"
+      ] }),
+      /* @__PURE__ */ i("div", { children: [
+        "Changes: ",
+        e.changeCount
+      ] })
+    ] }) }),
+    /* @__PURE__ */ r(v, { label: `Entries (${o.length})`, children: o.length === 0 ? /* @__PURE__ */ r(
+      "div",
+      {
+        style: {
+          color: "var(--atomirx-text-muted)",
+          fontStyle: "italic",
+          padding: 8
+        },
+        children: "No entries"
+      }
+    ) : /* @__PURE__ */ r(
+      "div",
+      {
+        style: {
+          backgroundColor: "var(--atomirx-bg-tertiary)",
+          borderRadius: "var(--atomirx-radius)",
+          overflow: "hidden"
+        },
+        children: o.map((a, l) => /* @__PURE__ */ r(
+          Ke,
+          {
+            params: a.params,
+            value: a.value
+          },
+          l
+        ))
+      }
+    ) })
+  ] });
+}
+function Xe({ entity: e }) {
+  const t = e.instanceRef.deref(), n = t ? Object.keys(t) : [];
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ r(v, { label: "Exports", children: /* @__PURE__ */ r("div", { style: T, children: n.length > 0 ? n.join(", ") : "[empty or disposed]" }) }),
+    /* @__PURE__ */ r(v, { label: "Stats", children: /* @__PURE__ */ r("div", { style: y, children: /* @__PURE__ */ i("div", { children: [
+      "Changes: ",
+      e.changeCount
+    ] }) }) })
+  ] });
+}
+const Ge = I(function({
+  entity: t,
+  onClose: n
+}) {
+  const o = t.key || `anonymous-${t.id.split("-").pop()}`;
+  return /* @__PURE__ */ i("div", { style: Me, children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          ...Te,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          flexShrink: 0
+        },
+        children: [
+          /* @__PURE__ */ r("button", { style: q, onClick: n, title: "Back to list", children: "←" }),
+          /* @__PURE__ */ r("span", { style: Y(t.type), children: t.type === "mutable" ? "M" : t.type === "derived" ? "D" : t.type === "pool" ? "P" : t.type === "effect" ? "E" : "M" }),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                minWidth: 0,
+                fontSize: 12
+              },
+              title: o,
+              children: o
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ i("div", { style: { flex: "1 1 0", overflow: "auto", minHeight: 0, height: 0 }, children: [
+      /* @__PURE__ */ r(v, { label: "ID", children: /* @__PURE__ */ r(
+        "div",
+        {
+          style: {
+            ...y,
+            fontSize: "var(--atomirx-font-size-sm)"
+          },
+          children: t.id
+        }
+      ) }),
+      /* @__PURE__ */ r(v, { label: "Created", children: /* @__PURE__ */ r("div", { style: y, children: A(t.createdAt) }) }),
+      t.type === "mutable" && /* @__PURE__ */ r(Ve, { entity: t }),
+      t.type === "derived" && /* @__PURE__ */ r(je, { entity: t }),
+      t.type === "effect" && /* @__PURE__ */ r(He, { entity: t }),
+      t.type === "pool" && /* @__PURE__ */ r(Ue, { entity: t }),
+      t.type === "module" && /* @__PURE__ */ r(Xe, { entity: t })
+    ] })
+  ] });
+}), re = {
+  "action.dispatch": { color: "#3b82f6", label: "A" },
+  // blue - Action
+  error: { color: "#ef4444", label: "E" },
+  // red - Error
+  "mutable.change": { color: "#10b981", label: "M" },
+  // green - Mutable
+  "mutable.reset": { color: "#10b981", label: "M" },
+  // green - Mutable
+  "derived.change": { color: "#8b5cf6", label: "D" },
+  // purple - Derived
+  "derived.refresh": { color: "#8b5cf6", label: "D" },
+  // purple - Derived
+  "pool.create": { color: "#f97316", label: "P" },
+  // orange - Pool
+  "pool.set": { color: "#f97316", label: "P" },
+  // orange - Pool
+  "pool.remove": { color: "#f97316", label: "P" }
+  // orange - Pool
+};
+function Ye(e) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 22,
+    height: 22,
+    borderRadius: "var(--atomirx-radius)",
+    backgroundColor: (re[e] ?? { color: "#6b7280" }).color,
+    color: "white",
+    fontSize: "var(--atomirx-font-size-sm)",
+    fontWeight: 600,
+    flexShrink: 0
+  };
+}
+function Ze(e) {
+  var t;
+  return ((t = re[e]) == null ? void 0 : t.label) ?? "?";
+}
+function oe(e) {
+  switch (e.type) {
+    case "action.dispatch":
+      return e.actionKey;
+    case "error":
+      return e.sourceKey || e.sourceType;
+    case "mutable.change":
+    case "mutable.reset":
+    case "derived.change":
+    case "derived.refresh":
+      return e.atomKey;
+    case "pool.create":
+    case "pool.set":
+    case "pool.remove":
+      return e.poolKey;
+    default:
+      return "unknown";
+  }
+}
+function ne(e) {
+  switch (e.type) {
+    case "action.dispatch":
+      return "dispatch";
+    case "error":
+      return "error";
+    case "mutable.change":
+      return "change";
+    case "mutable.reset":
+      return "reset";
+    case "derived.change":
+      return "change";
+    case "derived.refresh":
+      return "refresh";
+    case "pool.create":
+      return "create";
+    case "pool.set":
+      return "set";
+    case "pool.remove":
+      return "remove";
+    default:
+      return "";
+  }
+}
+function ie(e) {
+  switch (e.type) {
+    case "action.dispatch":
+      return e.deps;
+    case "error":
+      return e.error;
+    case "pool.create":
+    case "pool.set":
+    case "pool.remove":
+      return e.params;
+    case "mutable.change":
+    case "mutable.reset":
+    case "derived.change":
+    case "derived.refresh":
+      return null;
+    default:
+      return null;
+  }
+}
+const Je = I(function({
+  log: t,
+  showValues: n
+}) {
+  const o = t.type === "error", a = ie(t);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        padding: "8px 12px",
+        borderBottom: "1px solid var(--atomirx-border)",
+        cursor: "default"
+      },
+      children: [
+        /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ r("span", { style: Ye(t.type), children: Ze(t.type) }),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                ...Z,
+                color: o ? "var(--atomirx-error)" : "var(--atomirx-text-primary)"
+              },
+              children: oe(t)
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                color: "var(--atomirx-text-secondary)",
+                fontSize: "var(--atomirx-font-size-sm)"
+              },
+              children: ne(t)
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: {
+                color: "var(--atomirx-text-muted)",
+                fontSize: "var(--atomirx-font-size-sm)",
+                flexShrink: 0,
+                marginLeft: "auto"
+              },
+              children: A(t.timestamp)
+            }
+          )
+        ] }),
+        n && a && /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              ...J,
+              marginLeft: 30,
+              // Align with text after badge
+              maxWidth: "none"
+            },
+            title: a,
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}), qe = {
+  padding: "4px 8px",
+  fontSize: "var(--atomirx-font-size-sm)",
+  backgroundColor: "var(--atomirx-bg-tertiary)",
+  border: "1px solid var(--atomirx-border)",
+  borderRadius: "var(--atomirx-radius)",
+  color: "var(--atomirx-text-secondary)",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+}, Qe = I(function({
+  logs: t,
+  searchText: n,
+  onClearLogs: o,
+  showValues: a = !0
+}) {
+  const l = M(() => {
+    if (!n) return t;
+    const d = n.toLowerCase();
+    return t.filter((m) => {
+      var g;
+      const x = oe(m).toLowerCase(), s = ne(m).toLowerCase(), f = ((g = ie(m)) == null ? void 0 : g.toLowerCase()) ?? "";
+      return x.includes(d) || s.includes(d) || f.includes(d);
+    });
+  }, [t, n]);
+  return l.length === 0 ? /* @__PURE__ */ r("div", { style: { ...Q, width: "100%" }, children: n ? `No logs matching "${n}"` : "No logs yet. Dispatch actions or trigger errors to see logs." }) : /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "center",
+              padding: "6px 12px",
+              borderBottom: "1px solid var(--atomirx-border)",
+              backgroundColor: "var(--atomirx-bg-secondary)",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ i(
+                "span",
+                {
+                  style: {
+                    fontSize: "var(--atomirx-font-size-sm)",
+                    color: "var(--atomirx-text-muted)",
+                    marginRight: "auto"
+                  },
+                  children: [
+                    l.length,
+                    " log",
+                    l.length !== 1 ? "s" : ""
+                  ]
+                }
+              ),
+              o && /* @__PURE__ */ i(
+                "button",
+                {
+                  style: qe,
+                  onClick: o,
+                  title: "Clear all logs",
+                  children: [
+                    /* @__PURE__ */ i(
+                      "svg",
+                      {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                          /* @__PURE__ */ r("polyline", { points: "3,6 5,6 21,6" }),
+                          /* @__PURE__ */ r("path", { d: "M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2" })
+                        ]
+                      }
+                    ),
+                    "Clear"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("div", { style: { ...G, flex: 1 }, children: l.map((d) => /* @__PURE__ */ r(Je, { log: d, showValues: a }, d.id)) })
+      ]
+    }
+  );
+});
+function et() {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor" }),
+        /* @__PURE__ */ r(
+          "ellipse",
+          {
+            cx: "12",
+            cy: "12",
+            rx: "10",
+            ry: "4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "ellipse",
+          {
+            cx: "12",
+            cy: "12",
+            rx: "10",
+            ry: "4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            fill: "none",
+            transform: "rotate(60 12 12)"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "ellipse",
+          {
+            cx: "12",
+            cy: "12",
+            rx: "10",
+            ry: "4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            fill: "none",
+            transform: "rotate(120 12 12)"
+          }
+        )
+      ]
+    }
+  );
+}
+function tt() {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+        /* @__PURE__ */ r("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
+      ]
+    }
+  );
+}
+const rt = [
+  { id: "atoms", label: "Atoms" },
+  { id: "effects", label: "Effects" },
+  { id: "pools", label: "Pools" },
+  { id: "modules", label: "Modules" },
+  { id: "logs", label: "Logs" }
+], ot = [
+  { id: "all", label: "A" },
+  { id: "mutable", label: "M" },
+  { id: "derived", label: "D" }
+], nt = I(function({
+  defaultPosition: t,
+  defaultOpen: n,
+  autoSetup: o = !0,
+  enableInProduction: a = !1
+}) {
+  S(() => {
+    if (o)
+      return X({ enableInProduction: a });
+  }, [o, a]);
+  const [l, d] = L(() => _());
+  S(() => {
+    const p = () => {
+      const F = _();
+      F !== l && d(F);
+    };
+    p();
+    const ue = setTimeout(p, 100);
+    return () => clearTimeout(ue);
+  }, [l]);
+  const m = xe(l), x = ve(l), {
+    preferences: s,
+    setIsOpen: f,
+    setActiveTab: g,
+    setPanelSize: D,
+    setSearchText: c,
+    setAtomFilter: u,
+    setSelectedEntityId: b,
+    togglePanel: R,
+    cyclePosition: ae,
+    toggleShowAtomValues: se
+  } = he();
+  S(() => {
+    t && s.position, n !== void 0 && !s.isOpen && n && f(!0);
+  }, []), ge(R);
+  const { handleMouseDown: le } = be(
+    s.position,
+    s.panelSize,
+    D
+  ), W = s.selectedEntityId ? m == null ? void 0 : m.get(s.selectedEntityId) : null, ce = h(
+    (p) => {
+      c(s.activeTab, p.target.value);
+    },
+    [s.activeTab, c]
+  ), de = h(
+    (p) => {
+      g(p), b(null);
+    },
+    [g, b]
+  );
+  return l ? /* @__PURE__ */ i("div", { style: Se, children: [
+    !s.isOpen && /* @__PURE__ */ r(
+      "button",
+      {
+        style: we,
+        onClick: R,
+        title: "Toggle Atomirx DevTools (Ctrl+Shift+D)",
+        onMouseEnter: (p) => {
+          p.currentTarget.style.backgroundColor = "var(--atomirx-accent-hover)";
+        },
+        onMouseLeave: (p) => {
+          p.currentTarget.style.backgroundColor = "var(--atomirx-accent)";
+        },
+        children: /* @__PURE__ */ r(et, {})
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: ke(
+          s.position,
+          s.panelSize,
+          s.isOpen
+        ),
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              style: Fe(s.position),
+              onMouseDown: le
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "8px 12px",
+                backgroundColor: "var(--atomirx-bg-secondary)",
+                borderBottom: "1px solid var(--atomirx-border)",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    style: { fontWeight: 600, fontSize: "var(--atomirx-font-size)" },
+                    children: "Atomirx Devtools"
+                  }
+                ),
+                /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      style: We,
+                      onClick: ae,
+                      title: `Position: ${s.position} (click to change)`,
+                      children: /* @__PURE__ */ r(tt, {})
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      style: q,
+                      onClick: () => f(!1),
+                      title: "Close panel",
+                      children: "×"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                position: "relative",
+                minHeight: 0
+              },
+              children: [
+                /* @__PURE__ */ r("div", { style: Ce, children: rt.map((p) => /* @__PURE__ */ r(
+                  "button",
+                  {
+                    style: ze(s.activeTab === p.id),
+                    onClick: () => de(p.id),
+                    children: p.label
+                  },
+                  p.id
+                )) }),
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    style: {
+                      padding: "8px 12px",
+                      borderBottom: "1px solid var(--atomirx-border)"
+                    },
+                    children: /* @__PURE__ */ r(
+                      "input",
+                      {
+                        type: "text",
+                        style: { ...Ie, width: "100%" },
+                        placeholder: `Search ${s.activeTab}...`,
+                        value: s.searchText[s.activeTab],
+                        onChange: ce
+                      }
+                    )
+                  }
+                ),
+                s.activeTab === "atoms" && /* @__PURE__ */ i("div", { style: { ...Ee, justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ r("div", { style: De, children: ot.map((p) => /* @__PURE__ */ r(
+                    "button",
+                    {
+                      style: $(
+                        s.atomFilter === p.id
+                      ),
+                      onClick: () => u(p.id),
+                      children: p.label
+                    },
+                    p.id
+                  )) }),
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      style: {
+                        ...$(s.showAtomValues),
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        padding: "4px 8px"
+                      },
+                      onClick: se,
+                      title: s.showAtomValues ? "Hide values (single line)" : "Show values (two lines with data)",
+                      children: /* @__PURE__ */ r(
+                        "svg",
+                        {
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: s.showAtomValues ? /* @__PURE__ */ i(z, { children: [
+                            /* @__PURE__ */ r("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+                            /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "3" })
+                          ] }) : /* @__PURE__ */ i(z, { children: [
+                            /* @__PURE__ */ r("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+                            /* @__PURE__ */ r("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+                            /* @__PURE__ */ r("path", { d: "M1 1l22 22" })
+                          ] })
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ r("div", { style: Ne, children: s.activeTab === "logs" ? /* @__PURE__ */ r(
+                  Qe,
+                  {
+                    logs: x ?? [],
+                    searchText: s.searchText.logs,
+                    onClearLogs: () => l.clearLogs()
+                  }
+                ) : /* @__PURE__ */ r(
+                  $e,
+                  {
+                    entities: m ?? /* @__PURE__ */ new Map(),
+                    activeTab: s.activeTab,
+                    searchText: s.searchText[s.activeTab],
+                    atomFilter: s.atomFilter,
+                    selectedEntityId: s.selectedEntityId,
+                    onSelectEntity: b,
+                    showValues: s.showAtomValues
+                  }
+                ) }),
+                W && s.activeTab !== "logs" && /* @__PURE__ */ r(
+                  Ge,
+                  {
+                    entity: W,
+                    onClose: () => b(null)
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) : null;
+});
+let w = null, C = null;
+function it(e = {}) {
+  return new Promise((t) => {
+    const { containerId: n = "atomirx-devtools-root", ...o } = e;
+    w && (w.unmount(), w = null), C && (C.remove(), C = null), o.autoSetup !== !1 && X({ enableInProduction: o.enableInProduction });
+    const a = document.createElement("div");
+    a.id = n, a.style.position = "fixed", a.style.top = "0", a.style.left = "0", a.style.width = "0", a.style.height = "0", a.style.overflow = "visible", a.style.zIndex = "999999", a.style.pointerEvents = "none", document.body.appendChild(a), C = a, w = e.root ?? me(a), w.render(
+      /* @__PURE__ */ r("div", { style: { pointerEvents: "auto" }, children: /* @__PURE__ */ r(nt, { ...o, autoSetup: !1 }) })
+    ), queueMicrotask(t);
+  });
+}
+function at() {
+  w && (w.unmount(), w = null), C && (C.remove(), C = null);
+}
+const ut = I(function(t) {
+  const [n, o] = L(!1);
+  return S(() => (it({ ...t, autoSetup: t.autoSetup }), o(!0), () => {
+    at();
+  }), []), null;
+});
+export {
+  E as ANIMATION_DURATION,
+  pt as DEFAULT_MAX_HISTORY_SIZE,
+  ht as DEFAULT_PANEL_SIZE,
+  N as DEFAULT_PREFERENCES,
+  U as DEVTOOLS_Z_INDEX,
+  ut as DevToolsPanel,
+  xt as ENTITY_ID_PREFIX,
+  O as FLOATING_BUTTON_SIZE,
+  K as MAX_PANEL_SIZE,
+  H as MIN_PANEL_SIZE,
+  j as STORAGE_KEY_PREFERENCES,
+  vt as STORAGE_VERSION,
+  gt as _resetDevtools,
+  A as formatTimestamp,
+  _ as getDevtoolsRegistry,
+  bt as getRegistry,
+  yt as isDevtoolsEnabled,
+  it as renderDevtools,
+  St as resetRegistry,
+  k as serializeValue,
+  X as setupDevtools,
+  at as unmountDevtools,
+  ve as useDevtoolsLogs,
+  he as useDevtoolsPreferences,
+  xe as useDevtoolsRegistry,
+  ge as useKeyboardShortcuts,
+  be as usePanelResize
+};