mates-devtools 0.1.0-beta.1

package/dist/mates-devtools.es.js

@@ -0,0 +1,3464 @@
+import { event as Ce, html as s, nothing as k, repeat as T, atom as qt, effect as Te, x as Me, render as Jt, isDevToolsInstalled as Ie, installDevToolsHooks as Be, interceptBefore as Le, interceptAfter as Ee, interceptError as Ae } from "mates";
+import { keyframes as Re, globalCSS as ze } from "mates/css-in-js";
+const Kt = "selected", Pe = "selected", He = Re("mates-dt-flash", {
+  "0%": { background: "var(--dt-flash-bg)", color: "#fff" },
+  "100%": { background: "transparent", color: "var(--dt-text-muted)" }
+}), ot = {
+  "&::-webkit-scrollbar": { width: "6px" },
+  "&::-webkit-scrollbar-track": { background: "transparent" },
+  "&::-webkit-scrollbar-thumb": {
+    background: "var(--dt-scrollbar)",
+    borderRadius: "3px"
+  },
+  "&::-webkit-scrollbar-thumb:hover": {
+    background: "var(--dt-scrollbar-hover)"
+  }
+}, r = ze({
+  // ─── Floating Action Button ───────────────────────────────────────────────
+  fab: {
+    position: "fixed",
+    bottom: "50px",
+    right: "50px",
+    width: "44px",
+    height: "44px",
+    borderRadius: "50%",
+    background: "var(--dt-bg)",
+    border: "2px solid var(--dt-border)",
+    color: "var(--dt-text-bright)",
+    fontSize: "20px",
+    lineHeight: "1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "grab",
+    zIndex: "100000",
+    boxShadow: "0 2px 10px rgba(0,0,0,0.4)",
+    userSelect: "none",
+    transition: "box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease",
+    "-webkit-tap-highlight-color": "transparent",
+    "&:hover": {
+      borderColor: "var(--dt-accent)",
+      boxShadow: "0 4px 16px rgba(0,119,230,0.3)"
+    },
+    "&:active": {
+      cursor: "grabbing",
+      transform: "scale(0.95)"
+    }
+  },
+  fabDragging: {
+    cursor: "grabbing",
+    transform: "scale(0.95)"
+  },
+  // ─── Panel ────────────────────────────────────────────────────────────────
+  panel: {
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    right: "0",
+    width: "100%",
+    height: "320px",
+    background: "var(--dt-bg)",
+    borderTop: "1px solid var(--dt-border)",
+    boxShadow: "0 -2px 12px rgba(0,0,0,0.4)",
+    zIndex: "99999",
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
+    fontSize: "13px",
+    color: "var(--dt-text)",
+    opacity: "0",
+    transform: "translateY(12px)",
+    transition: "opacity 0.2s ease, transform 0.2s ease",
+    pointerEvents: "none"
+  },
+  panelVisible: {
+    opacity: "1",
+    transform: "translateY(0)",
+    pointerEvents: "all"
+  },
+  minimized: {
+    display: "none"
+  },
+  // ─── Resize handle ────────────────────────────────────────────────────────
+  resizeHandle: {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    height: "4px",
+    cursor: "ns-resize",
+    zIndex: "1",
+    "&:hover": {
+      background: "rgba(0,119,230,0.4)"
+    }
+  },
+  // ─── Header ───────────────────────────────────────────────────────────────
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0 10px",
+    height: "38px",
+    borderBottom: "1px solid var(--dt-border-2)",
+    flexShrink: "0",
+    gap: "16px"
+  },
+  headerLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: "16px",
+    minWidth: "0"
+  },
+  title: {
+    fontWeight: "700",
+    fontSize: "12px",
+    color: "var(--dt-text-bright)",
+    letterSpacing: "0.06em",
+    textTransform: "uppercase",
+    whiteSpace: "nowrap",
+    flexShrink: "0"
+  },
+  controls: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    flexShrink: "0"
+  },
+  button: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-text-muted)",
+    cursor: "pointer",
+    padding: "4px 6px",
+    borderRadius: "4px",
+    fontSize: "13px",
+    lineHeight: "1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background 0.1s, color 0.1s",
+    "&:hover": {
+      background: "var(--dt-bg-3)",
+      color: "var(--dt-text-bright)"
+    }
+  },
+  // ─── Tab bar ──────────────────────────────────────────────────────────────
+  tabBar: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px"
+  },
+  tabBtn: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-text-muted)",
+    cursor: "pointer",
+    padding: "4px 12px",
+    borderRadius: "4px",
+    fontSize: "12px",
+    fontFamily: "inherit",
+    fontWeight: "500",
+    letterSpacing: "0.03em",
+    transition: "background 0.1s, color 0.1s",
+    position: "relative",
+    "&:hover": {
+      background: "var(--dt-bg-3)",
+      color: "var(--dt-text)"
+    },
+    "&.active": {
+      color: "var(--dt-text-selected)",
+      background: "var(--dt-bg-selected)"
+    }
+  },
+  tabBadge: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "var(--dt-accent)",
+    color: "#fff",
+    borderRadius: "8px",
+    fontSize: "10px",
+    fontWeight: "700",
+    minWidth: "16px",
+    height: "16px",
+    padding: "0 4px",
+    marginLeft: "5px",
+    lineHeight: "1"
+  },
+  // ─── Body (2-column) ──────────────────────────────────────────────────────
+  body: {
+    display: "flex",
+    flex: "1",
+    minHeight: "0",
+    overflow: "hidden"
+  },
+  // ─── Left column ──────────────────────────────────────────────────────────
+  leftColumn: {
+    width: "260px",
+    minWidth: "160px",
+    borderRight: "1px solid var(--dt-border-2)",
+    display: "flex",
+    flexDirection: "column",
+    flexShrink: "0"
+  },
+  leftTabs: {
+    display: "flex",
+    gap: "4px",
+    padding: "5px 8px",
+    borderBottom: "1px solid var(--dt-border-2)",
+    flexShrink: "0"
+  },
+  leftTabBtn: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-text-dim)",
+    cursor: "pointer",
+    padding: "3px 6px",
+    borderRadius: "3px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background 0.1s, color 0.1s",
+    "&:hover": {
+      background: "var(--dt-bg-3)",
+      color: "var(--dt-text)"
+    },
+    "&.active": {
+      background: "var(--dt-bg-selected)",
+      color: "var(--dt-text-selected)"
+    }
+  },
+  content: {
+    flex: "1",
+    overflowY: "auto",
+    ...ot
+  },
+  componentSearch: {
+    width: "100%",
+    boxSizing: "border-box",
+    background: "var(--dt-bg-input)",
+    border: "none",
+    borderBottom: "1px solid var(--dt-border-2)",
+    color: "var(--dt-text)",
+    fontFamily: "inherit",
+    fontSize: "12px",
+    padding: "6px 10px",
+    outline: "none",
+    flexShrink: "0",
+    "&::placeholder": {
+      color: "var(--dt-text-dimmer)"
+    },
+    "&:focus": {
+      borderBottomColor: "var(--dt-accent)"
+    }
+  },
+  componentList: {
+    listStyle: "none",
+    margin: "0",
+    padding: "4px 0"
+  },
+  componentItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    justifyContent: "space-between",
+    padding: "5px 8px",
+    cursor: "pointer",
+    borderRadius: "3px",
+    margin: "1px 4px",
+    transition: "background 0.1s",
+    "&:hover": {
+      background: "var(--dt-bg-hover)"
+    },
+    "&.selected": {
+      background: "var(--dt-bg-selected)",
+      color: "var(--dt-text-selected)"
+    }
+  },
+  componentName: {
+    flex: "1",
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: "12px",
+    color: "var(--dt-text)"
+  },
+  componentBadge: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    flexShrink: "0"
+  },
+  componentBadgeSelected: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    flexShrink: "0",
+    color: "var(--dt-accent)"
+  },
+  componentCount: {
+    fontSize: "11px",
+    color: "var(--dt-text-dim)",
+    background: "var(--dt-bg-3)",
+    borderRadius: "8px",
+    padding: "1px 6px",
+    minWidth: "18px",
+    textAlign: "center"
+  },
+  componentCountSelected: {
+    fontSize: "11px",
+    color: "var(--dt-accent)",
+    background: "var(--dt-bg-3)",
+    borderRadius: "8px",
+    padding: "1px 6px",
+    minWidth: "18px",
+    textAlign: "center"
+  },
+  componentHighlightBtn: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-text-dim)",
+    cursor: "pointer",
+    padding: "2px 4px",
+    borderRadius: "3px",
+    fontSize: "11px",
+    lineHeight: "1",
+    display: "flex",
+    alignItems: "center",
+    opacity: "1",
+    transition: "color 0.1s",
+    "&:hover": {
+      color: "var(--dt-accent)"
+    }
+  },
+  componentHighlightBtnSelected: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-accent)",
+    cursor: "pointer",
+    padding: "2px 4px",
+    borderRadius: "3px",
+    fontSize: "11px",
+    lineHeight: "1",
+    display: "flex",
+    alignItems: "center",
+    opacity: "1",
+    transition: "color 0.1s",
+    "&:hover": {
+      color: "var(--dt-accent)"
+    }
+  },
+  empty: {
+    padding: "16px 12px",
+    color: "var(--dt-text-dimmer)",
+    fontSize: "12px",
+    textAlign: "center"
+  },
+  // ─── Tree view ────────────────────────────────────────────────────────────
+  treeToggle: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-text-dim)",
+    cursor: "pointer",
+    padding: "0 3px",
+    fontSize: "11px",
+    lineHeight: "1",
+    flexShrink: "0",
+    width: "16px",
+    textAlign: "center",
+    "&:hover": {
+      color: "var(--dt-text)"
+    }
+  },
+  treeLeaf: {
+    display: "inline-block",
+    width: "16px",
+    flexShrink: "0",
+    textAlign: "center",
+    color: "var(--dt-text-dim)"
+  },
+  // ─── Right column: inspector ──────────────────────────────────────────────
+  inspector: {
+    flex: "1",
+    minWidth: "0",
+    overflowY: "auto",
+    padding: "10px",
+    ...ot
+  },
+  inspectorBreadcrumb: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    marginBottom: "10px",
+    flexWrap: "wrap"
+  },
+  breadcrumbSegment: {
+    color: "var(--dt-text-dim)",
+    cursor: "pointer",
+    fontSize: "11px",
+    "&:hover": {
+      color: "var(--dt-text-selected)"
+    }
+  },
+  breadcrumbSeparator: {
+    color: "var(--dt-border)",
+    fontSize: "11px"
+  },
+  breadcrumbCurrent: {
+    color: "var(--dt-text-selected)",
+    fontSize: "11px"
+  },
+  inspectorTitle: {
+    fontWeight: "600",
+    fontSize: "13px",
+    color: "var(--dt-text-bright)",
+    marginBottom: "8px"
+  },
+  instanceCount: {
+    fontSize: "11px",
+    color: "var(--dt-text-dim)",
+    marginBottom: "8px"
+  },
+  instanceList: {
+    listStyle: "none",
+    margin: "0 0 8px 0",
+    padding: "0",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  instanceGroup: {
+    border: "1px solid var(--dt-border-2)",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
+  instanceItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "6px",
+    padding: "5px 10px",
+    cursor: "pointer",
+    transition: "background 0.1s",
+    "&:hover": {
+      background: "var(--dt-bg-hover)"
+    },
+    "&.selected": {
+      background: "var(--dt-bg-selected)"
+    }
+  },
+  instanceToggle: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-text-dim)",
+    cursor: "pointer",
+    padding: "0 3px",
+    fontSize: "11px",
+    flexShrink: "0",
+    "&:hover": {
+      color: "var(--dt-text)"
+    }
+  },
+  instanceToggleSelected: {
+    background: "none",
+    border: "none",
+    color: "var(--dt-accent)",
+    cursor: "pointer",
+    padding: "0 3px",
+    fontSize: "11px",
+    flexShrink: "0",
+    "&:hover": {
+      color: "var(--dt-accent)"
+    }
+  },
+  instanceId: {
+    fontSize: "11px",
+    color: "var(--dt-text-dim)",
+    flexShrink: "0",
+    marginRight: "2px"
+  },
+  instanceDetails: {
+    margin: "0 0 6px 0",
+    padding: "8px 12px",
+    borderLeft: "2px solid var(--dt-instance-border)",
+    background: "var(--dt-instance-bg)",
+    borderRadius: "0 4px 4px 0"
+  },
+  // ─── Highlight button (inspect in DOM) ───────────────────────────────────
+  highlightBtn: {
+    background: "none",
+    border: "1px solid var(--dt-border)",
+    color: "var(--dt-text-muted)",
+    cursor: "pointer",
+    padding: "2px 7px",
+    borderRadius: "3px",
+    fontSize: "11px",
+    fontFamily: "inherit",
+    transition: "border-color 0.1s, color 0.1s",
+    "&:hover": {
+      borderColor: "var(--dt-accent)",
+      color: "var(--dt-accent)"
+    }
+  },
+  // ─── DOM highlight overlay ────────────────────────────────────────────────
+  domHighlight: {
+    position: "absolute",
+    zIndex: "100001",
+    pointerEvents: "none",
+    border: "2px solid #e53e3e",
+    background: "rgba(229,62,62,0.18)",
+    borderRadius: "3px",
+    transition: "opacity 0.6s ease"
+  },
+  // ─── Hooks summary ────────────────────────────────────────────────────────
+  hooksSummary: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "5px",
+    marginBottom: "10px"
+  },
+  hookPill: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    background: "var(--dt-bg-2)",
+    border: "1px solid var(--dt-border)",
+    borderRadius: "10px",
+    padding: "2px 8px",
+    fontSize: "11px"
+  },
+  hookPillLabel: {
+    color: "var(--dt-text-muted)"
+  },
+  hookPillCount: {
+    color: "var(--dt-hook-count)",
+    fontWeight: "600"
+  },
+  // ─── Section / props / atoms ──────────────────────────────────────────────
+  sectionHeader: {
+    fontSize: "10px",
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: "0.08em",
+    color: "var(--dt-text-dim)",
+    marginBottom: "4px",
+    marginTop: "12px",
+    "&:first-child": {
+      marginTop: "0"
+    }
+  },
+  propItem: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: "8px",
+    padding: "3px 0",
+    fontSize: "12px",
+    borderBottom: "1px solid var(--dt-border-3)"
+  },
+  propKey: {
+    color: "var(--dt-prop-key)",
+    flexShrink: "0",
+    minWidth: "80px"
+  },
+  propValue: {
+    color: "var(--dt-prop-val)",
+    wordBreak: "break-all"
+  },
+  scopeItem: {
+    padding: "3px 0",
+    fontSize: "12px",
+    borderBottom: "1px solid var(--dt-border-3)"
+  },
+  scopeName: {
+    color: "var(--dt-scope-name)"
+  },
+  atomItem: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: "8px",
+    padding: "3px 0",
+    fontSize: "12px",
+    borderBottom: "1px solid var(--dt-border-3)"
+  },
+  atomName: {
+    color: "var(--dt-prop-key)",
+    flexShrink: "0",
+    minWidth: "80px"
+  },
+  atomValue: {
+    color: "var(--dt-prop-val)",
+    wordBreak: "break-all"
+  },
+  // ─── Highlight flash (render badge) ──────────────────────────────────────
+  highlight: {
+    display: "inline-block",
+    padding: "1px 5px",
+    borderRadius: "8px",
+    fontSize: "11px",
+    color: "var(--dt-text-muted)",
+    background: "transparent",
+    transition: "background 0.1s, color 0.1s"
+  },
+  highlightFlash: {
+    animation: `${He} 0.6s ease forwards`
+  },
+  // ─── Logs tab ─────────────────────────────────────────────────────────────
+  logsPanel: {
+    flex: "1",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0",
+    overflow: "hidden"
+  },
+  logsToolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "5px 10px",
+    borderBottom: "1px solid var(--dt-border-2)",
+    flexShrink: "0",
+    gap: "10px"
+  },
+  logsFilterRow: {
+    display: "flex",
+    gap: "4px"
+  },
+  logsFilterBtn: {
+    background: "none",
+    border: "1px solid var(--dt-border)",
+    color: "var(--dt-text-muted)",
+    cursor: "pointer",
+    padding: "2px 9px",
+    borderRadius: "3px",
+    fontSize: "11px",
+    fontFamily: "inherit",
+    transition: "border-color 0.1s, color 0.1s, background 0.1s",
+    "&:hover": {
+      borderColor: "var(--dt-text-dim)",
+      color: "var(--dt-text)"
+    },
+    "&.active": {
+      borderColor: "var(--dt-border-selected)",
+      color: "var(--dt-text-selected)",
+      background: "var(--dt-bg-active)"
+    }
+  },
+  logsActions: {
+    display: "flex",
+    gap: "6px",
+    alignItems: "center"
+  },
+  logsCount: {
+    fontSize: "11px",
+    color: "var(--dt-text-dimmer)"
+  },
+  logsContainer: {
+    flex: "1",
+    overflowY: "auto",
+    padding: "4px 0",
+    ...ot
+  },
+  logEntry: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: "8px",
+    padding: "3px 10px",
+    fontSize: "12px",
+    borderBottom: "1px solid var(--dt-border-3)",
+    "&:hover": {
+      background: "var(--dt-bg-hover)"
+    }
+  },
+  logTs: {
+    color: "var(--dt-text-dimmer)",
+    flexShrink: "0",
+    fontSize: "11px",
+    minWidth: "56px"
+  },
+  logBadge: {
+    flexShrink: "0",
+    padding: "1px 5px",
+    borderRadius: "3px",
+    fontSize: "10px",
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  logLabel: {
+    color: "var(--dt-text)",
+    flexShrink: "0"
+  },
+  logDetail: {
+    color: "var(--dt-text-muted)",
+    wordBreak: "break-all",
+    flex: "1",
+    minWidth: "0"
+  },
+  // ─── Performance tab ──────────────────────────────────────────────────────
+  perfPanel: {
+    flex: "1",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0",
+    overflow: "hidden"
+  },
+  perfToolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "5px 10px",
+    borderBottom: "1px solid var(--dt-border-2)",
+    flexShrink: "0",
+    gap: "10px"
+  },
+  perfTabs: {
+    display: "flex",
+    gap: "4px"
+  },
+  perfTabBtn: {
+    background: "none",
+    border: "1px solid var(--dt-border)",
+    color: "var(--dt-text-muted)",
+    cursor: "pointer",
+    padding: "2px 9px",
+    borderRadius: "3px",
+    fontSize: "11px",
+    fontFamily: "inherit",
+    transition: "border-color 0.1s, color 0.1s, background 0.1s",
+    "&:hover": {
+      borderColor: "var(--dt-text-dim)",
+      color: "var(--dt-text)"
+    },
+    "&.active": {
+      borderColor: "var(--dt-border-selected)",
+      color: "var(--dt-text-selected)",
+      background: "var(--dt-bg-active)"
+    }
+  },
+  perfActions: {
+    display: "flex",
+    gap: "6px",
+    alignItems: "center"
+  },
+  perfContent: {
+    flex: "1",
+    overflowY: "auto",
+    ...ot
+  },
+  perfTable: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "12px"
+  },
+  perfTh: {
+    padding: "5px 10px",
+    textAlign: "left",
+    color: "var(--dt-text-dim)",
+    fontWeight: "600",
+    fontSize: "10px",
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    borderBottom: "1px solid var(--dt-border-2)",
+    position: "sticky",
+    top: "0",
+    background: "var(--dt-bg)"
+  },
+  perfThRight: {
+    textAlign: "right"
+  },
+  perfRow: {
+    borderBottom: "1px solid var(--dt-border-3)",
+    "&:hover": {
+      background: "var(--dt-bg-hover)"
+    }
+  },
+  perfRowClickable: {
+    cursor: "pointer"
+  },
+  perfCell: {
+    padding: "4px 10px",
+    verticalAlign: "middle"
+  },
+  perfName: {
+    color: "var(--dt-text)",
+    fontWeight: "500"
+  },
+  perfNum: {
+    textAlign: "right",
+    color: "var(--dt-text-muted)",
+    fontVariantNumeric: "tabular-nums"
+  },
+  perfBarWrap: {
+    width: "80px",
+    height: "6px",
+    background: "var(--dt-bg-3)",
+    borderRadius: "3px",
+    overflow: "hidden",
+    display: "inline-block",
+    verticalAlign: "middle"
+  },
+  perfBar: {
+    height: "100%",
+    background: "var(--dt-accent)",
+    borderRadius: "3px",
+    transition: "width 0.2s ease"
+  },
+  perfBarLabel: {
+    fontSize: "11px",
+    color: "var(--dt-text-dim)",
+    marginLeft: "5px"
+  }
+}), At = /* @__PURE__ */ new Set(), lt = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), bt = Ce("devtools");
+function Fe(t, e) {
+  try {
+    At.add(t);
+    let n = lt.get(e);
+    n || (n = /* @__PURE__ */ new Set(), lt.set(e, n)), n.add(t), dt.set(t, 1), bt.trigger({ type: "mount", component: t });
+  } catch {
+  }
+}
+function Oe(t, e) {
+  try {
+    if (At.delete(t), e) {
+      const n = lt.get(e);
+      n && n.delete(t);
+    }
+    bt.trigger({ type: "unmount", component: t });
+  } catch {
+  }
+}
+function De(t) {
+  try {
+    const e = dt.get(t) ?? 0;
+    dt.set(t, e + 1), bt.trigger({ type: "render", component: t });
+  } catch {
+  }
+}
+function xt(t) {
+  try {
+    return dt.get(t) ?? 0;
+  } catch {
+  }
+  return 0;
+}
+function Z(t) {
+  try {
+    return t._depth ?? 0;
+  } catch {
+  }
+  return 0;
+}
+function Tt(t) {
+  try {
+    return t._parentComponent ?? null;
+  } catch {
+  }
+  return null;
+}
+function Qt() {
+  try {
+    return Array.from(At).filter((t) => {
+      const e = t._view || t.oldView;
+      return !e?.__devtools__ && !e?.skipDevToolsRender;
+    });
+  } catch {
+  }
+  return [];
+}
+function _r(t) {
+  try {
+    const e = lt.get(t);
+    return e ? Array.from(e) : [];
+  } catch {
+  }
+  return [];
+}
+function tt(t) {
+  try {
+    return (t._view || t.oldView)?.name || "Anonymous";
+  } catch {
+  }
+  return "";
+}
+function Ne(t) {
+  try {
+    return t._view || t.oldView || null;
+  } catch {
+  }
+  return null;
+}
+function je() {
+  try {
+    const t = Qt(), e = /* @__PURE__ */ new Map();
+    for (const o of t) {
+      const i = Ne(o);
+      if (!i) continue;
+      let c = e.get(i);
+      c || (c = [], e.set(i, c)), c.push(o);
+    }
+    const n = [];
+    for (const [o, i] of e)
+      n.push({
+        viewFn: o,
+        name: o.name || "Anonymous",
+        instances: i
+      });
+    try {
+      n.sort((o, i) => {
+        const c = (a) => a.instances.reduce(
+          (d, l) => Math.min(d, Z(l)),
+          1 / 0
+        );
+        return c(o) - c(i);
+      });
+    } catch {
+    }
+    return n;
+  } catch {
+  }
+  return [];
+}
+const f = {
+  row: "display:flex;align-items:baseline;gap:4px;font-size:13px;line-height:20px;font-family:'SF Mono',Monaco,Consolas,monospace;",
+  toggle: "cursor:pointer;background:none;border:none;color:#888;font-size:10px;padding:0 2px;width:14px;text-align:center;flex-shrink:0;",
+  key: "color:#9cdcfe;white-space:nowrap;",
+  colon: "color:#777;",
+  string: "color:#ce9178;",
+  number: "color:#b5cea8;",
+  boolean: "color:#569cd6;",
+  null: "color:#569cd6;font-style:italic;",
+  undefined: "color:#777;font-style:italic;",
+  function: "color:#dcdcaa;font-style:italic;",
+  symbol: "color:#c586c0;",
+  preview: "color:#888;font-style:italic;",
+  children: "margin-left:14px;padding-left:6px;border-left:1px solid #333;",
+  badge: "color:#777;font-size:11px;margin-left:4px;background:#2a2a2a;padding:0 4px;border-radius:3px;"
+}, jt = /* @__PURE__ */ new WeakMap();
+let Zt = null;
+function te(t) {
+  try {
+    Zt = t;
+  } catch {
+  }
+}
+function ee(t) {
+  try {
+    let e = jt.get(t);
+    return e || (e = /* @__PURE__ */ new Set(), jt.set(t, e)), e;
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function Ve(t, e) {
+  try {
+    return ee(t).has(e);
+  } catch {
+    return !1;
+  }
+}
+function We(t, e) {
+  try {
+    const n = ee(t);
+    n.has(e) ? n.delete(e) : n.add(e);
+    try {
+      Zt?.();
+    } catch {
+    }
+  } catch {
+  }
+}
+function Ge(t) {
+  try {
+    return t == null ? !1 : typeof t == "object";
+  } catch {
+    return !1;
+  }
+}
+function vt(t) {
+  try {
+    return t === null ? "null" : t === void 0 ? "undefined" : Array.isArray(t) ? "array" : t instanceof Date ? "date" : t instanceof RegExp ? "regexp" : t instanceof Map ? "map" : t instanceof Set ? "set" : typeof t;
+  } catch {
+    return "";
+  }
+}
+function Vt(t, e = 60) {
+  try {
+    const n = vt(t);
+    if (n === "array") {
+      const o = t;
+      if (o.length === 0) return "[]";
+      const i = o.slice(0, 5).map((a) => Wt(a)).join(", "), c = o.length > 5 ? ", …" : "";
+      return `[${i}${c}]  (${o.length})`;
+    }
+    if (n === "map")
+      return `Map(${t.size})`;
+    if (n === "set")
+      return `Set(${t.size})`;
+    if (n === "date")
+      return `Date(${t.toISOString()})`;
+    if (n === "regexp")
+      return String(t);
+    if (n === "object") {
+      const o = t, i = Object.keys(o);
+      if (i.length === 0) return "{}";
+      const c = i.slice(0, 4).map((l) => `${l}: ${Wt(o[l])}`).join(", "), a = i.length > 4 ? ", …" : "", d = `{${c}${a}}`;
+      return d.length > e ? d.slice(0, e - 1) + "…}" : d;
+    }
+    return String(t);
+  } catch {
+    return "";
+  }
+}
+function Wt(t) {
+  try {
+    switch (vt(t)) {
+      case "string": {
+        const n = t;
+        return n.length > 30 ? `"${n.slice(0, 27)}…"` : `"${n}"`;
+      }
+      case "number":
+      case "boolean":
+        return String(t);
+      case "null":
+        return "null";
+      case "undefined":
+        return "undefined";
+      case "function":
+        return "ƒ()";
+      case "symbol":
+        return String(t);
+      case "array":
+        return `Array(${t.length})`;
+      case "object":
+        return "{…}";
+      case "date":
+        return "Date";
+      case "map":
+        return `Map(${t.size})`;
+      case "set":
+        return `Set(${t.size})`;
+      default:
+        return String(t);
+    }
+  } catch {
+    return "";
+  }
+}
+function Ye(t) {
+  try {
+    switch (vt(t)) {
+      case "string":
+        return s`<span style="${f.string}">"${String(t)}"</span>`;
+      case "number":
+        return s`<span style="${f.number}">${String(t)}</span>`;
+      case "boolean":
+        return s`<span style="${f.boolean}">${String(t)}</span>`;
+      case "null":
+        return s`<span style="${f.null}">null</span>`;
+      case "undefined":
+        return s`<span style="${f.undefined}">undefined</span>`;
+      case "function":
+        return s`<span style="${f.function}"
+          >ƒ ${t.name || "anonymous"}()</span
+        >`;
+      case "symbol":
+        return s`<span style="${f.symbol}">${String(t)}</span>`;
+      case "date":
+        return s`<span style="${f.string}"
+          >${t.toISOString()}</span
+        >`;
+      case "regexp":
+        return s`<span style="${f.string}">${String(t)}</span>`;
+      default:
+        return s`<span style="${f.preview}">${String(t)}</span>`;
+    }
+  } catch {
+    return s``;
+  }
+}
+function Ue(t) {
+  try {
+    if (t instanceof Map)
+      return Array.from(t.entries()).map(([e, n]) => ({
+        key: String(e),
+        value: n
+      }));
+    if (t instanceof Set)
+      return Array.from(t).map((e, n) => ({
+        key: String(n),
+        value: e
+      }));
+    if (Array.isArray(t))
+      return t.map((e, n) => ({
+        key: String(n),
+        value: e
+      }));
+    if (typeof t == "object" && t !== null) {
+      const e = [], n = /* @__PURE__ */ new Set();
+      for (const i of Object.keys(t)) {
+        n.add(i);
+        try {
+          e.push({ key: i, value: t[i] });
+        } catch {
+          e.push({ key: i, value: "[error reading]" });
+        }
+      }
+      let o = Object.getPrototypeOf(t);
+      for (; o && o !== Object.prototype; ) {
+        for (const i of Object.getOwnPropertyNames(o)) {
+          if (n.has(i) || i === "constructor") continue;
+          if (Object.getOwnPropertyDescriptor(o, i)?.get) {
+            n.add(i);
+            try {
+              e.push({ key: i, value: t[i] });
+            } catch {
+              e.push({ key: i, value: "[error reading]" });
+            }
+          }
+        }
+        o = Object.getPrototypeOf(o);
+      }
+      return e;
+    }
+    return [];
+  } catch {
+    return [];
+  }
+}
+function O(t, e, n, o = "root", i = 0) {
+  try {
+    if (i > 15)
+      return s`
+        <div style="${f.row}">
+          ${e != null ? s`<span style="${f.key}">${e}</span
+                ><span style="${f.colon}">:</span>` : k}
+          <span style="${f.preview}">[max depth]</span>
+        </div>
+      `;
+    const c = Ge(n), a = c && Ve(t, o);
+    if (!c)
+      return s`
+        <div style="${f.row}">
+          <span style="${f.toggle}"></span>
+          ${e != null ? s`<span style="${f.key}">${e}</span
+                ><span style="${f.colon}">:</span>` : k}
+          ${Ye(n)}
+        </div>
+      `;
+    const d = a ? Ue(n) : [], l = vt(n);
+    return s`
+      <div>
+        <div
+          style="${f.row}cursor:pointer;user-select:none;"
+          @click=${(u) => {
+      try {
+        u.stopPropagation(), We(t, o);
+      } catch {
+      }
+    }}
+        >
+          <span style="${f.toggle}">${a ? "▼" : "▶"}</span>
+          ${e != null ? s`<span style="${f.key}">${e}</span
+                ><span style="${f.colon}">:</span>` : k}
+          ${a ? s`<span style="${f.preview}"
+                >${l === "array" ? `Array(${n.length})` : l === "object" ? "{" : Vt(n)}</span
+              >` : s`<span style="${f.preview}">${Vt(n)}</span>`}
+        </div>
+        ${a ? s`
+              <div style="${f.children}">
+                ${d.map(
+      (u) => O(
+        t,
+        u.key,
+        u.value,
+        `${o}.${u.key}`,
+        i + 1
+      )
+    )}
+                ${d.length === 0 ? s`<div style="${f.row}">
+                      <span style="${f.preview}">(empty)</span>
+                    </div>` : k}
+              </div>
+              ${l === "object" && a ? s`<div style="${f.row};margin-left:14px;">
+                    <span style="${f.preview}">}</span>
+                  </div>` : k}
+            ` : k}
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function wr(t, e, n = "root") {
+  try {
+    const o = Object.keys(e);
+    return o.length === 0 ? s`<div style="color:#777;font-size:13px;padding:2px 0;">
+        No data
+      </div>` : s`
+      ${o.map(
+      (i) => O(t, i, e[i], `${n}.${i}`, 0)
+    )}
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Xe(t) {
+  try {
+    const e = Object.keys(t);
+    return e.length === 0 ? s`<div style="color: #777; font-size: 13px;">No props</div>` : s`
+      ${T(
+      e,
+      (n) => n,
+      (n) => O(t, n, t[n], `props.${n}`, 0)
+    )}
+    `;
+  } catch {
+    return s``;
+  }
+}
+function qe(t) {
+  try {
+    return !t || t.size === 0 ? s`<div style="color: #777; font-size: 13px;">No scopes</div>` : s`
+      ${[...t?.entries() || []].map(
+      ([e, n]) => {
+        try {
+          const o = e.name || "AnonymousScope", i = {}, c = /* @__PURE__ */ new Set();
+          for (const l of Object.keys(n))
+            if (!(l === "__isScope___" || l === "reset")) {
+              c.add(l);
+              try {
+                const u = n[l];
+                u && typeof u == "function" && u.__isAtom___ ? i[`${l} (atom)`] = u.get() : i[l] = u;
+              } catch {
+                i[l] = "[error reading]";
+              }
+            }
+          let a = Object.getPrototypeOf(n);
+          for (; a && a !== Object.prototype; ) {
+            for (const l of Object.getOwnPropertyNames(a)) {
+              if (c.has(l) || l === "constructor" || l === "__isScope___" || l === "reset")
+                continue;
+              if (Object.getOwnPropertyDescriptor(a, l)?.get) {
+                c.add(l);
+                try {
+                  i[`${l} (get)`] = n[l];
+                } catch {
+                  i[`${l} (get)`] = "[error reading]";
+                }
+              }
+            }
+            a = Object.getPrototypeOf(a);
+          }
+          const d = n;
+          return s`
+              <div style="margin-bottom:6px;">
+                <div
+                  style="color:#4ec9b0;font-weight:500;font-size:13px;margin-bottom:2px;font-family:'SF Mono',Monaco,Consolas,monospace;"
+                >
+                  ${o}
+                </div>
+                <div style="margin-left:4px;">
+                  ${Object.keys(i).length === 0 ? s`<div style="color:#666;font-size:13px;">
+                        (empty scope)
+                      </div>` : s`
+                        ${Object.keys(i).map(
+            (l) => O(
+              d,
+              l,
+              i[l],
+              `scope_${o}.${l}`,
+              0
+            )
+          )}
+                      `}
+                </div>
+              </div>
+            `;
+        } catch {
+          return s``;
+        }
+      }
+    )}
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Je(t) {
+  try {
+    if (!t) return [];
+    const e = [];
+    for (const n of t.keys())
+      if (n && typeof n == "function" && n.__isAtom___)
+        try {
+          e.push({
+            id: n.__id__ ?? "?",
+            value: n.get(),
+            key: n
+          });
+        } catch {
+        }
+    return e;
+  } catch {
+    return [];
+  }
+}
+function Ke(t) {
+  try {
+    const e = Je(t);
+    return e.length === 0 ? s`<div style="color: #777; font-size: 13px;">No atoms</div>` : s`
+      ${T(
+      e,
+      (n) => n.id,
+      (n, o) => {
+        const i = e.length === 1 ? "atom" : `atom#${o + 1}`, c = typeof n.value == "object" && n.value !== null ? n.value : n.key;
+        return O(c, i, n.value, `atom_${n.id}`, 0);
+      }
+    )}
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Qe(t) {
+  try {
+    return !t || t.length === 0 ? s`<div style="color: #777; font-size: 13px;">No state</div>` : s`
+      ${t.map((e, n) => {
+      const o = t.length === 1 ? "state" : `state#${n + 1}`;
+      let i;
+      try {
+        i = e.atom.get();
+      } catch {
+        i = e.state;
+      }
+      return O(i, o, i, `useState_${n}`, 0);
+    })}
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Ze(t) {
+  try {
+    const e = {
+      onMount: 0,
+      onCleanup: 0,
+      onPaint: 0,
+      onAllMount: 0,
+      effects: 0,
+      on: 0,
+      setters: 0,
+      useState: 0,
+      atoms: 0,
+      events: 0,
+      channels: 0
+    }, n = t._useStates;
+    n && (e.useState = n.length);
+    const o = t.cleanups;
+    if (!o) return e;
+    for (const i of o.keys())
+      if (i != null) {
+        if (i.__isAtom___) {
+          e.atoms++;
+          continue;
+        }
+        if (i.__isSetter___) {
+          e.setters++;
+          continue;
+        }
+        if (i.__isCleanupEvent___) {
+          e.events++;
+          continue;
+        }
+        if (i.__isEvent___) {
+          e.events++;
+          continue;
+        }
+        if (i.__isChannel___) {
+          e.channels++;
+          continue;
+        }
+        if (i.__isOnMount__) {
+          e.onMount++;
+          continue;
+        }
+        if (i.__isOnCleanup__) {
+          e.onCleanup++;
+          continue;
+        }
+        if (i.__isOnPaint__) {
+          e.onPaint++;
+          continue;
+        }
+        if (i.__isOnAllMount__) {
+          e.onAllMount++;
+          continue;
+        }
+        if (i.__isEffect__) {
+          e.effects++;
+          continue;
+        }
+        if (i.__isOn__) {
+          e.on++;
+          continue;
+        }
+      }
+    return e;
+  } catch {
+    return {
+      onMount: 0,
+      onCleanup: 0,
+      onPaint: 0,
+      onAllMount: 0,
+      effects: 0,
+      on: 0,
+      setters: 0,
+      useState: 0,
+      atoms: 0,
+      events: 0,
+      channels: 0
+    };
+  }
+}
+function tn(t, e) {
+  try {
+    return s`
+      <span class="${r.hookPill}">
+        <span class="${r.hookPillLabel}">${t}</span>
+        <span class="${r.hookPillCount}">${e}</span>
+      </span>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function ne(t) {
+  try {
+    const e = Ze(t), n = [];
+    return e.onMount > 0 && n.push({ label: "onMount", count: e.onMount }), e.onCleanup > 0 && n.push({ label: "onCleanup", count: e.onCleanup }), e.onPaint > 0 && n.push({ label: "onPaint", count: e.onPaint }), e.onAllMount > 0 && n.push({ label: "onAllMount", count: e.onAllMount }), e.effects > 0 && n.push({ label: "effect", count: e.effects }), e.on > 0 && n.push({ label: "on", count: e.on }), e.setters > 0 && n.push({ label: "setter", count: e.setters }), e.useState > 0 && n.push({ label: "useState", count: e.useState }), e.atoms > 0 && n.push({ label: "atom", count: e.atoms }), e.events > 0 && n.push({ label: "event", count: e.events }), e.channels > 0 && n.push({ label: "channel", count: e.channels }), n.length === 0 ? k : s`
+      <div class="${r.hooksSummary}">
+        ${n.map((o) => tn(o.label, o.count))}
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function en(t, e) {
+  try {
+    t.stopPropagation(), st(e);
+  } catch {
+  }
+}
+function nn(t) {
+  try {
+    const e = [];
+    let n = Tt(t);
+    for (; n; )
+      e.push(tt(n)), n = Tt(n);
+    return e.reverse(), e;
+  } catch {
+    return [];
+  }
+}
+function re(t) {
+  try {
+    const e = nn(t), n = tt(t);
+    if (e.length === 0)
+      return s`
+        <div class="${r.inspectorBreadcrumb}">
+          <span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
+            >${n}</span
+          >
+        </div>
+      `;
+    const o = [];
+    for (let i = 0; i < e.length; i++)
+      i > 0 && o.push(
+        s`<span class="${r.breadcrumbSeparator}">›</span>`
+      ), o.push(
+        s`<span class="${r.breadcrumbSegment}">${e[i]}</span>`
+      );
+    return o.push(s`<span class="${r.breadcrumbSeparator}">›</span>`), o.push(
+      s`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
+        >${n}</span
+      >`
+    ), s` <div class="${r.inspectorBreadcrumb}">${o}</div> `;
+  } catch {
+    return s``;
+  }
+}
+function oe(t) {
+  try {
+    return s`
+      <div class="${r.instanceDetails}">
+        <div class="${r.sectionHeader}">Props</div>
+        ${Xe(t._props || {})}
+
+        <div class="${r.sectionHeader}">State</div>
+        ${Qe(t._useStates)}
+
+        <div class="${r.sectionHeader}">Atoms</div>
+        ${Ke(t.cleanups)}
+
+        <div class="${r.sectionHeader}">Scopes</div>
+        ${qe(t.scopes)}
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Gt() {
+  try {
+    return s`
+      <div class="${r.inspector}">
+        <div class="${r.empty}">Select a component to inspect</div>
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Yt(t) {
+  try {
+    const e = tt(t), n = t.componentId, o = Z(t), i = xt(t);
+    return s`
+      <div class="${r.inspector}">
+        ${re(t)}
+        <div class="${r.inspectorTitle}">
+          <span>${e}</span>
+          <span class="${r.instanceCount}">
+            #${n.toString().slice(2, 6)} · depth ${o} · renders ${i}
+          </span>
+          <button
+            class="${r.highlightBtn}"
+            style="opacity: 1;"
+            @click=${(c) => {
+      try {
+        en(c, t);
+      } catch {
+      }
+    }}
+            title="Highlight in DOM"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          </button>
+        </div>
+
+        ${ne(t)} ${oe(t)}
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function rn(t, e, n, o) {
+  try {
+    const { name: i, instances: c } = t;
+    return s`
+      <div class="${r.inspector}">
+        <div class="${r.inspectorTitle}">
+          <span>${i}</span>
+          <span class="${r.instanceCount}">
+            ${c.length} instance${c.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+
+        <ul class="${r.instanceList}">
+          ${T(
+      c,
+      (a) => a.componentId,
+      (a) => {
+        const d = a.componentId, l = Z(a), u = xt(a), y = e === d;
+        return s`
+                <li class="${r.instanceGroup}">
+                  <div
+                    class="${r.instanceItem} ${y ? Pe : ""}"
+                    @click=${() => {
+          try {
+            n(d);
+          } catch {
+          }
+        }}
+                  >
+                    <span
+                      class="${r.instanceToggle} ${y ? r.instanceToggleSelected : ""}"
+                      >${y ? "▼" : "▶"}</span
+                    >
+                    <span class="${r.instanceId}"
+                      >#${d.toString().slice(2, 6)}</span
+                    >
+                    <span class="${r.componentBadge}">depth ${l}</span>
+                    <span class="${r.componentBadge}"
+                      >renders ${u}</span
+                    >
+                    <button
+                      class="${r.componentHighlightBtn}"
+                      @click=${(g) => {
+          try {
+            g.stopPropagation(), o(a);
+          } catch {
+          }
+        }}
+                      title="Highlight in page"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <circle cx="11" cy="11" r="8" />
+                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                      </svg>
+                    </button>
+                  </div>
+                  ${y ? s`
+                        ${re(a)} ${ne(a)}
+                        ${oe(a)}
+                      ` : k}
+                </li>
+              `;
+      }
+    )}
+        </ul>
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Ut(t) {
+  try {
+    if ("selectedComponent" in t && t.selectedComponent !== void 0)
+      return t.selectedComponent ? Yt(t.selectedComponent) : Gt();
+    const { selectedGroup: e, selectedInstanceId: n, onSelectInstance: o, onHighlight: i } = t;
+    return e ? e.instances.length === 1 ? Yt(e.instances[0]) : rn(
+      e,
+      n,
+      o,
+      i
+    ) : Gt();
+  } catch {
+    return s``;
+  }
+}
+const I = /* @__PURE__ */ new Set();
+let V = null, W = null, G = null, Y = null, ut = !1, pt = !1;
+const ft = qt(0);
+ft.skipDevToolsLog = !0;
+function A() {
+  try {
+    ft.set(I.size);
+  } catch {
+  }
+}
+function U(t) {
+  pt = !0;
+  try {
+    return t();
+  } finally {
+    pt = !1;
+  }
+}
+function on() {
+  try {
+    if (ut) return;
+    ut = !0, V = window.setTimeout, W = window.setInterval, G = window.clearTimeout, Y = window.clearInterval;
+    const t = V, e = W, n = G, o = Y;
+    window.setTimeout = function(c, a, ...d) {
+      let l;
+      try {
+        if (typeof c != "function")
+          return l = t(c, a, ...d), l;
+        const u = c;
+        l = t(function(...g) {
+          try {
+            return I.delete(l) && A(), u.apply(this, g.length ? g : d);
+          } catch {
+          }
+        }, a, ...d), pt || (I.add(l), A());
+      } catch {
+        l = t(c, a, ...d);
+      }
+      return l;
+    }, window.setInterval = function(c, a, ...d) {
+      let l;
+      try {
+        if (typeof c != "function")
+          return l = e(c, a, ...d), l;
+        const u = c;
+        l = e(function(...g) {
+          try {
+            return u.apply(this, g.length ? g : d);
+          } catch {
+          }
+        }, a, ...d), pt || (I.add(l), A());
+      } catch {
+        l = e(c, a, ...d);
+      }
+      return l;
+    }, window.clearTimeout = function(c) {
+      try {
+        c !== void 0 && I.delete(c) && A();
+      } catch {
+      }
+      n(c);
+    }, window.clearInterval = function(c) {
+      try {
+        c !== void 0 && I.delete(c) && A();
+      } catch {
+      }
+      o(c);
+    };
+  } catch {
+  }
+}
+function cn() {
+  try {
+    if (!ut) return;
+    ut = !1, V && (window.setTimeout = V), W && (window.setInterval = W), G && (window.clearTimeout = G), Y && (window.clearInterval = Y), V = null, W = null, G = null, Y = null, I.clear(), A();
+  } catch {
+  }
+}
+const wt = /* @__PURE__ */ new WeakMap();
+let sn = 0;
+function an(t) {
+  return wt.has(t) || wt.set(t, `mdt-hl-${++sn}`), wt.get(t);
+}
+function ie(t, e, n) {
+  try {
+    const o = n.get(e), i = o !== void 0 && o !== t;
+    n.set(e, t);
+    const c = an(e);
+    return i && U(
+      () => setTimeout(() => {
+        try {
+          const a = document.getElementById(c);
+          if (!a) return;
+          a.classList.remove("mdt-highlight-flash"), a.offsetWidth, a.classList.add("mdt-highlight-flash"), setTimeout(() => {
+            try {
+              a.classList.remove("mdt-highlight-flash");
+            } catch {
+            }
+          }, 600);
+        } catch {
+        }
+      }, 0)
+    ), s`<span id="${c}" class="mdt-highlight">${t}</span>`;
+  } catch {
+    return s``;
+  }
+}
+const ln = /* @__PURE__ */ new WeakMap();
+let kt = "";
+function dn(t) {
+  try {
+    let e = 0;
+    for (const n of t.instances) {
+      const o = xt(n);
+      o > e && (e = o);
+    }
+    return e;
+  } catch {
+    return 0;
+  }
+}
+function St(t) {
+  try {
+    let e = 1 / 0;
+    for (const n of t.instances) {
+      const o = Z(n);
+      o < e && (e = o);
+    }
+    return e === 1 / 0 ? 0 : e;
+  } catch {
+    return 0;
+  }
+}
+function un({
+  groups: t,
+  selectedViewFn: e,
+  onSelectGroup: n,
+  onHighlight: o,
+  renderCallback: i
+}) {
+  try {
+    const c = kt.trim().toLowerCase(), d = [...c ? t.filter((u) => u.name.toLowerCase().includes(c)) : t].sort((u, y) => {
+      const g = St(u), b = St(y);
+      return g - b || u.name.localeCompare(y.name);
+    }), l = (u) => {
+      try {
+        kt = u.target.value, i();
+      } catch {
+      }
+    };
+    return s`
+      <div class="${r.content}">
+        <div style="padding: 0 0 6px 0; flex-shrink: 0;">
+          <input
+            class="${r.componentSearch}"
+            type="text"
+            placeholder="Search components…"
+            .value=${kt}
+            @input=${l}
+          />
+        </div>
+        ${d.length === 0 ? s`<div class="${r.empty}">
+              ${c ? "No matching components" : "No components mounted"}
+            </div>` : s`
+              <ul class="${r.componentList}">
+                ${T(
+      d,
+      (u) => u.viewFn,
+      (u) => {
+        const y = dn(u), g = e === u.viewFn, b = St(u), rt = u.instances.length, Dt = u.instances[0];
+        return s`
+                      <li
+                        class="${r.componentItem} ${g ? Kt : ""}"
+                        @click=${() => {
+          try {
+            n(u.viewFn);
+          } catch {
+          }
+        }}
+                      >
+                        ${ie(
+          y,
+          Dt,
+          ln
+        )}
+                        <span class="${r.componentName}"
+                          >${u.name}</span
+                        >
+                        ${rt > 1 ? s`<span
+                              class="${r.componentCount} ${g ? r.componentCountSelected : ""}"
+                              >×${rt}</span
+                            >` : ""}
+                        <span
+                          class="${r.componentBadge} ${g ? r.componentBadgeSelected : ""}"
+                          >depth ${b}</span
+                        >
+                        <button
+                          class="${r.componentHighlightBtn} ${g ? r.componentHighlightBtnSelected : ""}"
+                          @click=${(Nt) => {
+          try {
+            Nt.stopPropagation(), o(Dt);
+          } catch {
+          }
+        }}
+                          title="Highlight in page"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="12"
+                            height="12"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path d="M1 1l6 6" />
+                            <path d="M7 1L1 7" />
+                            <circle cx="11" cy="11" r="8" />
+                            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                          </svg>
+                        </button>
+                      </li>
+                    `;
+      }
+    )}
+              </ul>
+            `}
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+const pn = /* @__PURE__ */ new WeakMap(), Ct = /* @__PURE__ */ new WeakSet();
+function fn(t) {
+  try {
+    const e = new Set(t), n = /* @__PURE__ */ new Map();
+    for (const c of t)
+      n.set(c, {
+        component: c,
+        name: tt(c),
+        depth: Z(c),
+        id: c.componentId,
+        children: []
+      });
+    const o = [];
+    for (const c of t) {
+      const a = n.get(c), d = Tt(c);
+      if (d && e.has(d)) {
+        const l = n.get(d);
+        if (l) {
+          l.children.push(a);
+          continue;
+        }
+      }
+      o.push(a);
+    }
+    const i = (c) => {
+      try {
+        c.sort((a, d) => a.depth - d.depth || a.name.localeCompare(d.name));
+        for (const a of c)
+          i(a.children);
+      } catch {
+      }
+    };
+    return i(o), o;
+  } catch {
+    return [];
+  }
+}
+function ce(t, e, n, o, i) {
+  try {
+    const c = t.children.length > 0, a = Ct.has(t.component), d = xt(t.component), l = e === t.id, u = t.depth * 16, y = (b) => {
+      try {
+        b.stopPropagation(), a ? Ct.delete(t.component) : Ct.add(t.component), i();
+      } catch {
+      }
+    }, g = () => {
+      try {
+        n(t.id);
+      } catch {
+      }
+    };
+    return s`
+      <li
+        class="${r.componentItem} ${l ? Kt : ""}"
+        style="margin-left: ${u}px;"
+        @click=${g}
+      >
+        ${c ? s`<span class="${r.treeToggle}" @click=${y}
+              >${a ? "▶" : "▼"}</span
+            >` : s`<span class="${r.treeLeaf}">·</span>`}
+        ${ie(d, t.component, pn)}
+        <span class="${r.componentName}">${t.name}</span>
+        <span class="${r.componentBadge}"
+          >#${t.id.toString().slice(2, 6)}</span
+        >
+        <button
+          class="${r.componentHighlightBtn}"
+          @click=${(b) => {
+      try {
+        b.stopPropagation(), o(t.component);
+      } catch {
+      }
+    }}
+          title="Highlight in page"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M1 1l6 6" />
+            <path d="M7 1L1 7" />
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </button>
+      </li>
+      ${c && !a ? T(
+      t.children,
+      (b) => b.component,
+      (b) => ce(
+        b,
+        e,
+        n,
+        o,
+        i
+      )
+    ) : k}
+    `;
+  } catch {
+    return s``;
+  }
+}
+function hn({
+  selectedComponentId: t,
+  onSelectComponent: e,
+  onHighlight: n,
+  renderCallback: o
+}) {
+  try {
+    const i = Qt(), c = fn(i);
+    return s`
+      <div class="${r.content}">
+        ${c.length === 0 ? s`<div class="${r.empty}">No components mounted</div>` : s`
+              <ul class="${r.componentList}">
+                ${T(
+      c,
+      (a) => a.component,
+      (a) => ce(
+        a,
+        t,
+        e,
+        n,
+        o
+      )
+    )}
+              </ul>
+            `}
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+const se = () => (Te(() => {
+  try {
+    console.log(ft());
+  } catch {
+  }
+}), () => {
+  try {
+    return s`Active Timers (${ft()})`;
+  } catch {
+    return s``;
+  }
+});
+se.skipDevToolsRender = !0;
+function gn({
+  activeTab: t,
+  onTabChange: e,
+  onMinimise: n,
+  onClose: o,
+  unreadLogCount: i
+}) {
+  try {
+    return s`
+      <div class="${r.header}">
+        <div class="${r.headerLeft}">
+          <div class="${r.title}">🔧 Mates DevTools</div>
+          <nav class="${r.tabBar}">
+            <button
+              class="${r.tabBtn} ${t === "components" ? "active" : ""}"
+              @click=${() => {
+      try {
+        e("components");
+      } catch {
+      }
+    }}
+            >
+              Components
+            </button>
+            <button
+              class="${r.tabBtn} ${t === "logs" ? "active" : ""}"
+              @click=${() => {
+      try {
+        e("logs");
+      } catch {
+      }
+    }}
+            >
+              Logs
+              ${i > 0 ? s`<span class="${r.tabBadge}"
+                    >${i > 99 ? "99+" : i}</span
+                  >` : ""}
+            </button>
+            <button
+              class="${r.tabBtn} ${t === "performance" ? "active" : ""}"
+              @click=${() => {
+      try {
+        e("performance");
+      } catch {
+      }
+    }}
+            >
+              Performance
+            </button>
+          </nav>
+        </div>
+        <div>
+          <button style="margin-left: 10px">${Me(se)}</button>
+        </div>
+        <div class="${r.controls}">
+          <button
+            class="${r.button}"
+            @click=${() => {
+      try {
+        n();
+      } catch {
+      }
+    }}
+            title="Minimise"
+          >
+            _
+          </button>
+          <button
+            class="${r.button}"
+            @click=${() => {
+      try {
+        o();
+      } catch {
+      }
+    }}
+            title="Close"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+let it = null;
+function mn(t) {
+  try {
+    return it = t, () => {
+      it === t && (it = null);
+    };
+  } catch {
+  }
+  return () => {
+  };
+}
+let v = !1;
+function yn() {
+  v = !0;
+}
+function bn() {
+  v = !1;
+}
+function kr() {
+  return v;
+}
+const xn = 100, R = [];
+let ae = 1, $t = 0;
+const le = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
+function S(t, e, n) {
+  try {
+    R.length >= xn && R.shift(), R.push({
+      id: ae++,
+      ts: performance.now(),
+      category: t,
+      label: e,
+      detail: n
+    }), $t++;
+    try {
+      it?.();
+    } catch {
+    }
+  } catch {
+  }
+}
+function Rt(t) {
+  try {
+    if (t === void 0) return "undefined";
+    if (t === null) return "null";
+    if (typeof t == "function") return "ƒ()";
+    try {
+      const e = JSON.stringify(t);
+      return e.length > 120 ? e.slice(0, 117) + "..." : e;
+    } catch {
+      return String(t);
+    }
+  } catch {
+  }
+  return "";
+}
+function vn() {
+  return R;
+}
+function Sr() {
+  return R.length;
+}
+function $n() {
+  return $t;
+}
+function _n() {
+  try {
+    $t = 0;
+  } catch {
+  }
+}
+function wn() {
+  try {
+    R.length = 0, $t = 0, ae = 1;
+  } catch {
+  }
+}
+function kn(t) {
+  try {
+    if (!v) return;
+    S("mount", t, "mounted");
+  } catch {
+  }
+}
+function Sn(t, e) {
+  try {
+    if (!v) return;
+    S("update", t, `updated (${e.toFixed(2)}ms)`);
+  } catch {
+  }
+}
+function Cn(t) {
+  try {
+    if (!v) return;
+    S("cleanup", t, "cleaned up");
+  } catch {
+  }
+}
+function Tn(t, e) {
+  try {
+    if (!v) return;
+    S("setter", t, Rt(e));
+  } catch {
+  }
+}
+function Mn(t) {
+  try {
+    if (!v) return;
+    S("action", t);
+  } catch {
+  }
+}
+function In(t, e) {
+  try {
+    if (!v || le.has(t)) return;
+    S("event", t, e !== void 0 ? Rt(e) : void 0);
+  } catch {
+  }
+}
+const zt = 80, de = 120;
+function F(t, e) {
+  try {
+    return t.length > e ? t.slice(0, e - 1) + "…" : t;
+  } catch {
+  }
+  return "";
+}
+function Bn(t, e, n) {
+  try {
+    if (!v) return;
+    const o = n ? `pending · ${F(n, 50)}` : "pending";
+    S("fetch", F(`${t} ${e}`, zt), o);
+  } catch {
+  }
+}
+function ue(t, e, n, o) {
+  try {
+    if (!v) return;
+    S(
+      "fetch",
+      F(`${t} ${e}`, zt),
+      F(`${n} · ${o.toFixed(0)}ms`, de)
+    );
+  } catch {
+  }
+}
+function pe(t, e, n, o) {
+  try {
+    if (!v) return;
+    S(
+      "fetch",
+      F(`${t} ${e}`, zt),
+      F(
+        `error · ${o.toFixed(0)}ms · ${n}`,
+        de
+      )
+    );
+  } catch {
+  }
+}
+function Ln(t, e) {
+  try {
+    if (!v || le.has(t)) return;
+    S(
+      "event",
+      `${t} (cleanup)`,
+      e !== void 0 ? Rt(e) : void 0
+    );
+  } catch {
+  }
+}
+const E = {
+  mount: "#66bb6a",
+  update: "#42a5f5",
+  cleanup: "#ef5350",
+  setter: "#4fc3f7",
+  action: "#81c784",
+  event: "#ffb74d",
+  fetch: "#ce93d8"
+}, En = {
+  mount: "MNT",
+  update: "UPD",
+  cleanup: "CLN",
+  setter: "SET",
+  action: "ACT",
+  event: "EVT",
+  fetch: "NET"
+};
+let $ = "all";
+const An = {
+  all: null,
+  lifecycle: ["mount", "update", "cleanup"],
+  logs: ["setter", "action", "event"],
+  network: ["fetch"]
+};
+function Rn(t) {
+  try {
+    const e = t / 1e3 | 0, n = t % 1e3, o = e / 60 | 0, i = e % 60;
+    return `${String(o).padStart(2, "0")}:${String(i).padStart(2, "0")}.${String(n | 0).padStart(3, "0")}`;
+  } catch {
+    return "";
+  }
+}
+function zn() {
+  try {
+    const t = vn(), e = An[$];
+    if (!e) return t;
+    const n = new Set(e);
+    return t.filter((o) => n.has(o.category));
+  } catch {
+    return [];
+  }
+}
+function Pn({ onClear: t, renderCallback: e }) {
+  try {
+    _n();
+    const n = zn();
+    return s`
+      <div class="${r.logsPanel}">
+        <div class="${r.logsToolbar}">
+          <div class="${r.logsFilterRow}">
+            <button
+              class="${r.logsFilterBtn} ${$ === "all" ? "active" : ""}"
+              @click=${() => {
+      try {
+        $ = "all", e();
+      } catch {
+      }
+    }}
+            >
+              All
+            </button>
+            <button
+              class="${r.logsFilterBtn} ${$ === "lifecycle" ? "active" : ""}"
+              style="--mdt-filter-color: ${E.mount}"
+              @click=${() => {
+      try {
+        $ = $ === "lifecycle" ? "all" : "lifecycle", e();
+      } catch {
+      }
+    }}
+            >
+              Mounts / Updates
+            </button>
+            <button
+              class="${r.logsFilterBtn} ${$ === "logs" ? "active" : ""}"
+              style="--mdt-filter-color: ${E.setter}"
+              @click=${() => {
+      try {
+        $ = $ === "logs" ? "all" : "logs", e();
+      } catch {
+      }
+    }}
+            >
+              Logs
+            </button>
+            <button
+              class="${r.logsFilterBtn} ${$ === "network" ? "active" : ""}"
+              style="--mdt-filter-color: ${E.fetch}"
+              @click=${() => {
+      try {
+        $ = $ === "network" ? "all" : "network", e();
+      } catch {
+      }
+    }}
+            >
+              Network
+            </button>
+          </div>
+          <div class="${r.logsActions}">
+            <span class="${r.logsCount}">${n.length} entries</span>
+            <button
+              class="${r.button}"
+              @click=${() => {
+      try {
+        wn(), t();
+      } catch {
+      }
+    }}
+              title="Clear logs"
+            >
+              🗑
+            </button>
+          </div>
+        </div>
+
+        <div class="${r.logsContainer}">
+          ${n.length === 0 ? s`<div class="${r.empty}">
+                No logs yet. Interact with the app to see activity.
+              </div>` : T(
+      n,
+      (o) => o.id,
+      (o) => s`
+                  <div class="${r.logEntry}">
+                    <span class="${r.logTs}">${Rn(o.ts)}</span>
+                    <span
+                      class="${r.logBadge}"
+                      style="background: ${E[o.category]}22; color: ${E[o.category]}; border-color: ${E[o.category]}44;"
+                      >${En[o.category]}</span
+                    >
+                    <span class="${r.logLabel}">${o.label}</span>
+                    ${o.detail ? s`<span class="${r.logDetail}"
+                          >${o.detail}</span
+                        >` : k}
+                  </div>
+                `
+    )}
+        </div>
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+let et = !1;
+function Hn() {
+  try {
+    et = !0;
+  } catch {
+  }
+}
+function Fn() {
+  try {
+    et = !1;
+  } catch {
+  }
+}
+function Cr() {
+  return et;
+}
+const On = 100, Q = /* @__PURE__ */ new Map();
+let fe = 1, ct = null;
+function Dn(t) {
+  try {
+    return ct = t, () => {
+      try {
+        ct === t && (ct = null);
+      } catch {
+      }
+    };
+  } catch {
+  }
+  return () => {
+  };
+}
+function he(t, e, n) {
+  try {
+    if (!et) return;
+    const o = {
+      id: fe++,
+      ts: performance.now(),
+      durationMs: n,
+      componentName: t,
+      instanceId: e
+    };
+    let i = Q.get(t);
+    i || (i = [], Q.set(t, i)), i.length >= On && i.shift(), i.push(o);
+    try {
+      ct?.();
+    } catch {
+    }
+  } catch {
+  }
+}
+function Tr(t, e) {
+  try {
+    if (!et) return Xt;
+    const n = performance.now();
+    return () => he(t, e, performance.now() - n);
+  } catch {
+  }
+  return Xt;
+}
+function Xt() {
+}
+function Nn() {
+  try {
+    const t = [];
+    for (const [e, n] of Q) {
+      if (n.length === 0) continue;
+      let o = 0, i = 0, c = 1 / 0;
+      for (const a of n)
+        o += a.durationMs, a.durationMs > i && (i = a.durationMs), a.durationMs < c && (c = a.durationMs);
+      t.push({
+        name: e,
+        renderCount: n.length,
+        avgMs: o / n.length,
+        maxMs: i,
+        minMs: c,
+        lastMs: n[n.length - 1].durationMs,
+        totalMs: o,
+        timings: n
+      });
+    }
+    return t.sort((e, n) => n.totalMs - e.totalMs), t;
+  } catch {
+  }
+  return [];
+}
+function ge() {
+  try {
+    const t = [];
+    for (const e of Q.values())
+      for (let n = 0; n < e.length; n++) t.push(e[n]);
+    return t;
+  } catch {
+  }
+  return [];
+}
+function Mr(t = 50) {
+  try {
+    const e = ge();
+    return e.sort((n, o) => o.ts - n.ts), e.length > t ? e.slice(0, t) : e;
+  } catch {
+  }
+  return [];
+}
+function jn(t = 20) {
+  try {
+    const e = ge();
+    return e.sort((n, o) => o.durationMs - n.durationMs), e.length > t ? e.slice(0, t) : e;
+  } catch {
+  }
+  return [];
+}
+function Vn() {
+  try {
+    Q.clear(), fe = 1;
+  } catch {
+  }
+}
+qt(0);
+function j(t) {
+  try {
+    return t < 0.01 ? "<0.01ms" : t < 1 ? `${t.toFixed(2)}ms` : t < 10 ? `${t.toFixed(1)}ms` : `${t.toFixed(0)}ms`;
+  } catch {
+    return "";
+  }
+}
+function me(t, e) {
+  try {
+    return e <= 0 ? 0 : Math.max(2, Math.min(100, t / e * 100));
+  } catch {
+    return 0;
+  }
+}
+function ye(t) {
+  try {
+    return t < 16 ? "#66bb6a" : t <= 20 ? "#ffb74d" : "#ef5350";
+  } catch {
+    return "";
+  }
+}
+let N = "summary";
+function Wn(t) {
+  try {
+    if (t.length === 0)
+      return s`<div class="${r.empty}">
+        No render data yet. Interact with the app to see component performance.
+      </div>`;
+    const e = Math.max(...t.map((n) => n.totalMs));
+    return s`
+      <table class="${r.perfTable}">
+        <thead>
+          <tr>
+            <th class="${r.perfTh}">Component</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Renders</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Avg</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Max</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Last</th>
+            <th class="${r.perfTh}" style="width: 40%;">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${T(
+      t,
+      (n) => n.name,
+      (n) => {
+        const o = ye(n.lastMs);
+        return s`
+                <tr class="${r.perfRow}">
+                  <td class="${r.perfCell} ${r.perfName}">
+                    ${n.name}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${n.renderCount}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${j(n.avgMs)}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${j(n.maxMs)}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${j(n.lastMs)}
+                  </td>
+                  <td class="${r.perfCell}">
+                    <div class="${r.perfBarWrap}">
+                      <div
+                        class="${r.perfBar}"
+                        style="width: ${me(
+          n.totalMs,
+          e
+        )}%; background: ${o};"
+                      ></div>
+                      <span class="${r.perfBarLabel}"
+                        >${j(n.totalMs)}</span
+                      >
+                    </div>
+                  </td>
+                </tr>
+              `;
+      }
+    )}
+        </tbody>
+      </table>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Gn(t, e) {
+  try {
+    if (t.length === 0)
+      return s`<div class="${r.empty}">
+        No render data yet. Interact with the app to see slow renders.
+      </div>`;
+    const n = Math.max(...t.map((i) => i.durationMs)), o = !!e;
+    return s`
+      <table class="${r.perfTable}">
+        <thead>
+          <tr>
+            <th class="${r.perfTh}">Component</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Duration</th>
+            <th class="${r.perfTh}" style="width: 50%;">&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${T(
+      t,
+      (i) => i.id,
+      (i) => {
+        const c = ye(i.durationMs), a = o ? () => {
+          try {
+            e(i.instanceId);
+          } catch {
+          }
+        } : void 0;
+        return s`
+                <tr
+                  class="${r.perfRow} ${o ? r.perfRowClickable : ""}"
+                  @click=${a}
+                  title=${o ? `Go to ${i.componentName} in Components tab` : ""}
+                >
+                  <td class="${r.perfCell} ${r.perfName}">
+                    ${i.componentName}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${j(i.durationMs)}
+                  </td>
+                  <td class="${r.perfCell}">
+                    <div class="${r.perfBarWrap}">
+                      <div
+                        class="${r.perfBar}"
+                        style="width: ${me(
+          i.durationMs,
+          n
+        )}%; background: ${c};"
+                      ></div>
+                    </div>
+                  </td>
+                </tr>
+              `;
+      }
+    )}
+        </tbody>
+      </table>
+    `;
+  } catch {
+    return s``;
+  }
+}
+function Yn({
+  onClear: t,
+  renderCallback: e,
+  onNavigateToComponent: n
+}) {
+  try {
+    const o = Nn(), i = jn(30);
+    return s`
+      <div class="${r.perfPanel}">
+        <div class="${r.perfToolbar}">
+          <div class="${r.perfTabs}">
+            <button
+              class="${r.perfTabBtn} ${N === "summary" ? "active" : ""}"
+              @click=${() => {
+      try {
+        N = "summary", e();
+      } catch {
+      }
+    }}
+            >
+              Summary
+            </button>
+            <button
+              class="${r.perfTabBtn} ${N === "slowest" ? "active" : ""}"
+              @click=${() => {
+      try {
+        N = "slowest", e();
+      } catch {
+      }
+    }}
+            >
+              Slowest Renders
+            </button>
+          </div>
+          <div class="${r.perfActions}">
+            <button
+              class="${r.button}"
+              @click=${() => {
+      try {
+        Vn(), t();
+      } catch {
+      }
+    }}
+              title="Clear performance data"
+            >
+              🗑
+            </button>
+          </div>
+        </div>
+
+        <div class="${r.perfContent}">
+          ${N === "summary" ? Wn(o) : Gn(i, n ?? null)}
+        </div>
+      </div>
+    `;
+  } catch {
+    return s``;
+  }
+}
+let L = !1, C = !1, X = "components", M = "list", x = null, _ = null, m = null, D = [], p = null, w = null, z = 0;
+const Un = 150, Xn = 0.8, qn = 0.5;
+let B = null;
+function Pt() {
+  try {
+    const t = document.documentElement;
+    B === null && (B = parseFloat(getComputedStyle(t).paddingBottom) || 0), t.style.paddingBottom = `${B + z}px`;
+  } catch {
+  }
+}
+function Ht() {
+  try {
+    if (B === null) return;
+    document.documentElement.style.paddingBottom = B === 0 ? "" : `${B}px`, B = null;
+  } catch {
+  }
+}
+let Ft = !1, be = 0, xe = 0, ht = !1, q = null, J = null, K = null, P = null, H = null;
+function Jn() {
+  try {
+    H !== null && (clearTimeout(H), H = null);
+  } catch {
+  }
+}
+function gt() {
+  try {
+    Jn(), P && (P.remove(), P = null);
+  } catch {
+  }
+}
+function st(t) {
+  try {
+    let e = function() {
+      try {
+        const c = document.createElement("div");
+        c.className = r.domHighlight, document.body.appendChild(c), P = c;
+        const a = n.getBoundingClientRect();
+        i ? (c.style.position = "fixed", c.style.top = `${a.top}px`, c.style.left = `${a.left}px`) : (c.style.top = `${a.top + window.scrollY}px`, c.style.left = `${a.left + window.scrollX}px`), c.style.width = `${a.width}px`, c.style.height = `${a.height}px`, H = U(
+          () => setTimeout(() => {
+            try {
+              P === c && (c.classList.add("fade-out"), H = U(
+                () => setTimeout(() => {
+                  try {
+                    P === c && gt();
+                  } catch {
+                  }
+                }, 600)
+              ));
+            } catch {
+            }
+          }, 1500)
+        );
+      } catch {
+      }
+    };
+    gt();
+    const n = t.firstElementChild ?? t, o = getComputedStyle(n).position, i = o === "fixed" || o === "sticky";
+    if (i)
+      e();
+    else {
+      const c = n.getBoundingClientRect(), a = c.top >= 0 && c.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+      a || n.scrollIntoView({ behavior: "smooth", block: "center" }), H = U(
+        () => setTimeout(e, a ? 0 : 400)
+      );
+    }
+  } catch {
+  }
+}
+function ve() {
+  try {
+    if (x === null) return null;
+    for (const t of D)
+      for (const e of t.instances)
+        if (e.componentId === x) return e;
+    return null;
+  } catch {
+  }
+  return null;
+}
+function Ot() {
+  try {
+    return _ === null ? null : D.find((t) => t.viewFn === _) ?? null;
+  } catch {
+  }
+  return null;
+}
+function Kn() {
+  try {
+    if (m === null) return null;
+    const t = Ot();
+    return t ? t.instances.find(
+      (e) => e.componentId === m
+    ) ?? null : null;
+  } catch {
+  }
+  return null;
+}
+function _t() {
+  try {
+    D = je(), x !== null && !ve() && (x = null), _ !== null && !Ot() ? (_ = null, m = null) : m !== null && !Kn() && (m = null);
+  } catch {
+  }
+}
+function mt() {
+  try {
+    return L && !C;
+  } catch {
+  }
+  return !1;
+}
+function nt() {
+  try {
+    return w?.querySelector(`.${r.panel}`) ?? null;
+  } catch {
+  }
+  return null;
+}
+function Qn(t) {
+  try {
+    x = x === t ? null : t, h();
+  } catch {
+  }
+}
+function Zn(t) {
+  try {
+    _ === t ? (_ = null, m = null) : (_ = t, m = null), h();
+  } catch {
+  }
+}
+function tr(t) {
+  try {
+    m = m === t ? null : t, h();
+  } catch {
+  }
+}
+function er(t) {
+  try {
+    x = t, X = "components", _t(), _ = null, m = null;
+    for (const e of D) {
+      for (const n of e.instances)
+        if (n.componentId === t) {
+          _ = e.viewFn, m = t;
+          break;
+        }
+      if (_) break;
+    }
+    h();
+  } catch {
+  }
+}
+function nr(t) {
+  try {
+    X = t, h();
+  } catch {
+  }
+}
+function rr() {
+  try {
+    if (!L || C) return;
+    C = !0, nt()?.classList.remove(r.panelVisible), p && (p.style.display = ""), Ht();
+  } catch {
+  }
+}
+function or() {
+  try {
+    if (!C) return;
+    C = !1, p && (p.style.display = "none"), _t(), h(), Pt(), requestAnimationFrame(() => {
+      try {
+        requestAnimationFrame(() => {
+          try {
+            nt()?.classList.add(r.panelVisible);
+          } catch {
+          }
+        });
+      } catch {
+      }
+    });
+  } catch {
+  }
+}
+function ir() {
+  try {
+    L = !1, C = !1, x = null, $e(), gt(), Ht();
+    const t = nt();
+    if (t) {
+      t.classList.remove(r.panelVisible);
+      let e = !1;
+      const n = () => {
+        try {
+          if (e) return;
+          e = !0, t.removeEventListener("transitionend", n), It();
+        } catch {
+        }
+      };
+      t.addEventListener("transitionend", n, { once: !0 }), U(() => setTimeout(n, 350));
+    } else
+      It();
+    p && (p.style.display = "");
+  } catch {
+  }
+}
+function cr() {
+  try {
+    if (L) return;
+    L = !0, C = !1, p && (p.style.display = "none"), z = Math.round(window.innerHeight * qn), sr(), dr(), _t(), h(), Pt(), requestAnimationFrame(() => {
+      try {
+        requestAnimationFrame(() => {
+          try {
+            nt()?.classList.add(r.panelVisible);
+          } catch {
+          }
+        });
+      } catch {
+      }
+    });
+  } catch {
+  }
+}
+function sr() {
+  try {
+    Hn(), q || (q = mn(() => {
+      try {
+        mt() && h();
+      } catch {
+      }
+    })), J || (J = Dn(() => {
+      try {
+        mt() && h();
+      } catch {
+      }
+    }));
+  } catch {
+  }
+}
+function $e() {
+  try {
+    Fn(), q && (q(), q = null), J && (J(), J = null);
+  } catch {
+  }
+}
+const Mt = "mates-devtools-vars";
+function ar() {
+  try {
+    if (document.getElementById(Mt)) return;
+    const t = document.createElement("style");
+    t.id = Mt, t.textContent = `
+    #mates-devtools {
+      --dt-bg:           #1a1a1a;
+      --dt-bg-2:         #222222;
+      --dt-bg-3:         #2a2a2a;
+      --dt-bg-input:     #111111;
+      --dt-bg-hover:     #252525;
+      --dt-bg-selected:  #1a3a6e;
+      --dt-bg-active:    rgba(59,130,246,0.15);
+      --dt-border:       #333333;
+      --dt-border-2:     #2a2a2a;
+      --dt-border-3:     #1e1e1e;
+      --dt-border-selected: #3b82f6;
+      --dt-text:         #cccccc;
+      --dt-text-bright:  #e0e0e0;
+      --dt-text-muted:   #888888;
+      --dt-text-dim:     #666666;
+      --dt-text-dimmer:  #555555;
+      --dt-text-selected: #93c5fd;
+      --dt-accent:       #0077e6;
+      --dt-accent-2:     #3b82f6;
+      --dt-scrollbar:    #444444;
+      --dt-scrollbar-hover: #555555;
+      --dt-prop-key:     #9cdcfe;
+      --dt-prop-val:     #ce9178;
+      --dt-scope-name:   #4ec9b0;
+      --dt-hook-count:   #0099ff;
+      --dt-instance-border: #0066cc;
+      --dt-instance-bg:  #151515;
+      --dt-flash-bg:     rgba(0,180,100,0.45);
+    }
+
+    @media (prefers-color-scheme: light) {
+      #mates-devtools {
+        --dt-bg:           #f5f5f5;
+        --dt-bg-2:         #ebebeb;
+        --dt-bg-3:         #e0e0e0;
+        --dt-bg-input:     #ffffff;
+        --dt-bg-hover:     #e8e8e8;
+        --dt-bg-selected:  #dbeafe;
+        --dt-bg-active:    rgba(59,130,246,0.12);
+        --dt-border:       #cccccc;
+        --dt-border-2:     #d4d4d4;
+        --dt-border-3:     #e4e4e4;
+        --dt-border-selected: #3b82f6;
+        --dt-text:         #333333;
+        --dt-text-bright:  #111111;
+        --dt-text-muted:   #666666;
+        --dt-text-dim:     #888888;
+        --dt-text-dimmer:  #999999;
+        --dt-text-selected: #1d4ed8;
+        --dt-accent:       #0077e6;
+        --dt-accent-2:     #3b82f6;
+        --dt-scrollbar:    #bbbbbb;
+        --dt-scrollbar-hover: #999999;
+        --dt-prop-key:     #0070c1;
+        --dt-prop-val:     #a31515;
+        --dt-scope-name:   #007f6a;
+        --dt-hook-count:   #0070c1;
+        --dt-instance-border: #3b82f6;
+        --dt-instance-bg:  #f0f4ff;
+        --dt-flash-bg:     rgba(0,160,90,0.3);
+      }
+    }
+  `, document.head.appendChild(t);
+  } catch {
+  }
+}
+function lr() {
+  try {
+    document.getElementById(Mt)?.remove();
+  } catch {
+  }
+}
+function dr() {
+  try {
+    if (w) return;
+    ar(), w = document.createElement("div"), w.id = "mates-devtools", document.body.appendChild(w);
+  } catch {
+  }
+}
+function It() {
+  try {
+    if (!w) return;
+    Jt(s``, w), w.remove(), w = null, lr();
+  } catch {
+  }
+}
+function h() {
+  try {
+    if (!w || !L) return;
+    const t = (() => {
+      try {
+        switch (X) {
+          case "components":
+            return s`
+              <div class="${r.body}">
+                <div class="${r.leftColumn}">
+                  <div class="${r.leftTabs}">
+                    <button
+                      class="${r.leftTabBtn} ${M === "list" ? "active" : ""}"
+                      @click=${() => {
+              try {
+                M = "list", h();
+              } catch {
+              }
+            }}
+                      title="Flat list"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <line x1="8" y1="6" x2="21" y2="6" />
+                        <line x1="8" y1="12" x2="21" y2="12" />
+                        <line x1="8" y1="18" x2="21" y2="18" />
+                        <line x1="3" y1="6" x2="3.01" y2="6" />
+                        <line x1="3" y1="12" x2="3.01" y2="12" />
+                        <line x1="3" y1="18" x2="3.01" y2="18" />
+                      </svg>
+                    </button>
+                    <button
+                      class="${r.leftTabBtn} ${M === "tree" ? "active" : ""}"
+                      @click=${() => {
+              try {
+                M = "tree", h();
+              } catch {
+              }
+            }}
+                      title="Tree view"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <line x1="6" y1="3" x2="6" y2="15" />
+                        <circle cx="18" cy="6" r="3" />
+                        <circle cx="6" cy="18" r="3" />
+                        <path d="M6 12a6 6 0 0 0 12-6" />
+                      </svg>
+                    </button>
+                  </div>
+                  ${M === "list" ? un({
+              groups: D,
+              selectedViewFn: _,
+              onSelectGroup: Zn,
+              onHighlight: (e) => st(e),
+              renderCallback: h
+            }) : hn({
+              selectedComponentId: x,
+              onSelectComponent: Qn,
+              onHighlight: (e) => st(e),
+              renderCallback: h
+            })}
+                </div>
+                ${Ut(M === "list" ? {
+              selectedGroup: Ot(),
+              selectedInstanceId: m,
+              onSelectInstance: tr,
+              onHighlight: (e) => st(e)
+            } : {
+              selectedComponent: ve()
+            })}
+              </div>
+            `;
+          case "logs":
+            return Pn({
+              onClear: h,
+              renderCallback: h
+            });
+          case "performance":
+            return Yn({
+              onClear: h,
+              renderCallback: h,
+              onNavigateToComponent: er
+            });
+          default:
+            return s``;
+        }
+      } catch {
+      }
+      return s``;
+    })();
+    Jt(
+      s`
+        <div class="${r.panel}" style="height: ${z}px;">
+          <div class="${r.resizeHandle}" @mousedown=${ur}></div>
+          ${gn({
+        activeTab: X,
+        onTabChange: nr,
+        onMinimise: rr,
+        onClose: ir,
+        unreadLogCount: X === "logs" ? 0 : $n()
+      })}
+          ${t}
+        </div>
+      `,
+      w
+    );
+  } catch {
+  }
+}
+function ur(t) {
+  try {
+    t.preventDefault();
+    const e = t.clientY, n = z, o = (c) => {
+      try {
+        const a = window.innerHeight * Xn;
+        z = Math.max(
+          Un,
+          Math.min(a, n + (e - c.clientY))
+        );
+        const d = nt();
+        d && (d.style.height = `${z}px`), Pt();
+      } catch {
+      }
+    }, i = () => {
+      try {
+        document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", i);
+      } catch {
+      }
+    };
+    document.addEventListener("mousemove", o), document.addEventListener("mouseup", i);
+  } catch {
+  }
+}
+function pr() {
+  try {
+    if (p) return;
+    p = document.createElement("div"), p.className = r.fab, p.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>', p.style.bottom = "50px", p.style.right = "50px", p.addEventListener("mousedown", we), p.addEventListener("click", _e), document.body.appendChild(p);
+  } catch {
+  }
+}
+function fr() {
+  try {
+    if (!p) return;
+    p.removeEventListener("mousedown", we), p.removeEventListener("click", _e), p.remove(), p = null;
+  } catch {
+  }
+}
+function _e() {
+  try {
+    if (ht) {
+      ht = !1;
+      return;
+    }
+    C ? or() : cr();
+  } catch {
+  }
+}
+function we(t) {
+  try {
+    t.preventDefault(), Ft = !0, ht = !1;
+    const e = p.getBoundingClientRect();
+    be = t.clientX - e.left, xe = t.clientY - e.top, p.classList.add(r.fabDragging), document.addEventListener("mousemove", ke), document.addEventListener("mouseup", Se);
+  } catch {
+  }
+}
+function ke(t) {
+  try {
+    if (!Ft || !p) return;
+    ht = !0, p.style.bottom = "auto", p.style.right = "auto", p.style.left = `${Math.max(0, Math.min(window.innerWidth - 48, t.clientX - be))}px`, p.style.top = `${Math.max(0, Math.min(window.innerHeight - 48, t.clientY - xe))}px`;
+  } catch {
+  }
+}
+function Se() {
+  try {
+    Ft = !1, p?.classList.remove(r.fabDragging), document.removeEventListener("mousemove", ke), document.removeEventListener("mouseup", Se);
+  } catch {
+  }
+}
+function hr() {
+  try {
+    on(), pr(), K || (K = bt.__subscribe((t) => {
+      try {
+        t?.type === "unmount" && (x !== null && t.component.componentId === x && (x = null), m !== null && t.component.componentId === m && (m = null)), _t(), mt() && h();
+      } catch {
+      }
+    })), te(() => {
+      try {
+        mt() && h();
+      } catch {
+      }
+    });
+  } catch {
+  }
+}
+function gr() {
+  try {
+    cn(), te(null), gt(), $e(), bn(), Ht(), K && (K(), K = null), L = !1, C = !1, M = "list", x = null, _ = null, m = null, D = [], It(), fr();
+  } catch {
+  }
+}
+const at = [];
+let Bt = null, Lt = null, Et = null;
+function mr() {
+  try {
+    Bt = Le((t, e) => {
+      try {
+        const n = (e.method ?? "GET").toUpperCase();
+        at.push({ method: n, url: t, startTs: performance.now() });
+      } catch {
+      }
+      return { url: t, options: e };
+    }), Lt = Ee((t) => {
+      try {
+        const e = at.shift(), n = e?.method ?? "", o = e?.url ?? t.url ?? "", i = e ? performance.now() - e.startTs : 0;
+        ue(n, o, t.status, i);
+      } catch {
+      }
+      return t;
+    }), Et = Ae((t) => {
+      try {
+        const e = at.shift(), n = e ? performance.now() - e.startTs : 0;
+        pe(
+          e?.method ?? "",
+          e?.url ?? "",
+          t.message,
+          n
+        );
+      } catch {
+      }
+    });
+  } catch {
+  }
+}
+function yr() {
+  try {
+    Bt?.(), Lt?.(), Et?.(), Bt = null, Lt = null, Et = null, at.length = 0;
+  } catch {
+  }
+}
+function br() {
+  try {
+    if (Ie()) return;
+    Be({
+      registerComponent: Fe,
+      unregisterComponent: Oe,
+      notifyRender: De,
+      getComponentName: tt,
+      logComponentMount: kn,
+      logComponentRender: Sn,
+      logComponentUnmount: Cn,
+      logAtomSet: Tn,
+      logAtomUpdate: Mn,
+      logEventTrigger: In,
+      logCleanupEventTrigger: Ln,
+      logFetchRequest: Bn,
+      logFetchResponse: ue,
+      logFetchError: pe,
+      recordRender: he
+    }), yn(), mr();
+  } catch {
+  }
+}
+let yt = !1;
+function Ir() {
+  try {
+    if (yt) return;
+    yt = !0, br(), hr();
+  } catch {
+  }
+}
+function Br() {
+  try {
+    if (!yt) return;
+    yt = !1, yr(), gr();
+  } catch {
+  }
+}
+export {
+  wn as clearLogs,
+  Vn as clearPerfData,
+  yn as connectLogStore,
+  Hn as connectPerfStore,
+  gr as destroyDevTools,
+  Br as destroyMatesDevTools,
+  bt as devToolsEvent,
+  bn as disconnectLogStore,
+  Fn as disconnectPerfStore,
+  Qt as getAllComponents,
+  Z as getComponentDepth,
+  je as getComponentGroups,
+  tt as getComponentName,
+  _r as getComponentsByView,
+  Sr as getLogCount,
+  vn as getLogs,
+  Nn as getPerfSummaries,
+  Mr as getRecentTimings,
+  xt as getRenderVersion,
+  jn as getSlowestRenders,
+  $n as getUnreadLogCount,
+  kr as isLogStoreConnected,
+  Cr as isPerfStoreConnected,
+  Tn as logAtomSet,
+  Mn as logAtomUpdate,
+  Ln as logCleanupEventTrigger,
+  kn as logComponentMount,
+  Sn as logComponentRender,
+  Cn as logComponentUnmount,
+  In as logEventTrigger,
+  _n as markLogsRead,
+  De as notifyRender,
+  mn as onLogEntry,
+  Dn as onPerfEntry,
+  he as recordRender,
+  Fe as registerComponent,
+  Ke as renderAtomsViewer,
+  Ut as renderComponentInspector,
+  un as renderComponentList,
+  hn as renderComponentTree,
+  gn as renderHeader,
+  ne as renderHooksViewer,
+  Pn as renderLogsViewer,
+  Ir as renderMatesDevTools,
+  Yn as renderPerfViewer,
+  Xe as renderPropsViewer,
+  qe as renderScopesViewer,
+  Qe as renderUseStateViewer,
+  O as renderValueTree,
+  wr as renderValueTreeEntries,
+  te as setValueTreeRenderCallback,
+  Tr as startRenderTiming,
+  r as styles,
+  Oe as unregisterComponent
+};