@djangocfg/debuger 2.1.219

package/dist/index.mjs

@@ -0,0 +1,694 @@
+import { clearAudioEventBuffer, subscribeAudioEvents, subscribeCustomEvents } from './chunk-YQE3KTBG.mjs';
+export { clearAudioEventBuffer, emitAudioEvent, emitDebugEvent, hasAudioListeners, hasCustomListeners, subscribeAudioEvents, subscribeCustomEvents } from './chunk-YQE3KTBG.mjs';
+import { useDebugLogStore, useDebugFilteredLogs, useDebugLogCount, useDebugErrorCount } from './chunk-ESIQODSI.mjs';
+export { createDebugLogger, debugLog, useDebugErrorCount, useDebugFilteredLogs, useDebugLogCount, useDebugLogStore } from './chunk-ESIQODSI.mjs';
+import { __name } from './chunk-PAWJFY3S.mjs';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { CheckCircle, AlertCircle, AlertTriangle, Info, Bug, ChevronUp, ChevronDown, Search, Download, Trash2, Radio, ScrollText, Maximize2, Minimize2, X, Database } from 'lucide-react';
+import { Badge, Input, Tooltip, TooltipTrigger, Button, TooltipContent, CopyButton, ScrollArea } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { create } from 'zustand';
+import { useHotkey } from '@djangocfg/ui-core/hooks';
+import { monitorStore } from '@djangocfg/monitor/client';
+import { LazyJsonTree } from '@djangocfg/ui-tools';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var useDebugStore = create((set) => ({
+  isOpen: false,
+  tab: "logs",
+  isUnlocked: false,
+  open: /* @__PURE__ */ __name(() => set({ isOpen: true }), "open"),
+  close: /* @__PURE__ */ __name(() => set({ isOpen: false }), "close"),
+  toggle: /* @__PURE__ */ __name(() => set((s) => ({ isOpen: !s.isOpen })), "toggle"),
+  setTab: /* @__PURE__ */ __name((tab) => set({ tab }), "setTab"),
+  unlock: /* @__PURE__ */ __name((_key) => {
+    const valid = true;
+    set({ isUnlocked: true });
+    return valid;
+  }, "unlock")
+}));
+function useDebugShortcut() {
+  const toggle = useDebugStore((s) => s.toggle);
+  const isUnlocked = useDebugStore((s) => s.isUnlocked);
+  const isDev = typeof process !== "undefined" && true;
+  useHotkey(
+    "meta+d",
+    (e) => {
+      e.preventDefault();
+      if (!isDev && !isUnlocked) return;
+      toggle();
+    },
+    { preventDefault: true }
+  );
+}
+__name(useDebugShortcut, "useDebugShortcut");
+var _installed = false;
+function installMonitorBridge() {
+  if (typeof window === "undefined") return;
+  if (_installed) return;
+  let prevLen = monitorStore.getState().buffer.length;
+  const unsub = monitorStore.subscribe((state) => {
+    const buffer = state.buffer;
+    if (buffer.length <= prevLen) {
+      prevLen = buffer.length;
+      return;
+    }
+    const newEvents = buffer.slice(prevLen);
+    prevLen = buffer.length;
+    for (const event of newEvents) {
+      const level = event.level === "error" ? "error" : event.level === "warn" ? "warn" : "info";
+      useDebugLogStore.getState().addLog({
+        level,
+        component: `monitor:${event.event_type ?? "event"}`,
+        message: event.message ?? "",
+        data: {
+          ...event.url && { url: event.url },
+          ...event.session_id && { session_id: event.session_id },
+          ...event.http_status !== void 0 && {
+            http_status: event.http_status,
+            http_method: event.http_method,
+            http_url: event.http_url
+          },
+          ...event.extra ? { extra: event.extra } : {}
+        },
+        stack: event.stack_trace
+      });
+    }
+  });
+  _installed = true;
+  return () => {
+    unsub();
+    _installed = false;
+  };
+}
+__name(installMonitorBridge, "installMonitorBridge");
+var ROW_ESTIMATE_PX = 32;
+var OVERSCAN = 5;
+var LOG_LEVEL_CONFIG = {
+  debug: { icon: Bug, color: "text-muted-foreground" },
+  info: { icon: Info, color: "text-blue-500" },
+  warn: { icon: AlertTriangle, color: "text-yellow-500" },
+  error: { icon: AlertCircle, color: "text-red-500" },
+  success: { icon: CheckCircle, color: "text-green-500" }
+};
+var LOG_LEVELS = Object.keys(LOG_LEVEL_CONFIG);
+function LogEntryRow({ entry, expanded, onToggle }) {
+  const config = LOG_LEVEL_CONFIG[entry.level];
+  const Icon = config.icon;
+  const pad = /* @__PURE__ */ __name((n, len = 2) => String(n).padStart(len, "0"), "pad");
+  const d = entry.timestamp;
+  const time = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+  const hasData = entry.data && Object.keys(entry.data).length > 0;
+  const hasStack = !!entry.stack;
+  const isExpandable = hasData || hasStack;
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/50 last:border-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: isExpandable ? onToggle : void 0,
+        disabled: !isExpandable,
+        className: cn(
+          "flex w-full items-start gap-2 px-3 py-1.5 text-left text-xs",
+          isExpandable ? "hover:bg-muted/50 cursor-pointer" : "cursor-default"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn("h-3.5 w-3.5 mt-0.5 shrink-0", config.color) }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono shrink-0", children: time }),
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "shrink-0 text-[10px] px-1 py-0", children: entry.component }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: entry.message }),
+          isExpandable && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) })
+        ]
+      }
+    ),
+    expanded && isExpandable && /* @__PURE__ */ jsxs("div", { className: "px-3 pb-2 pl-8", children: [
+      hasData && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(LazyJsonTree, { data: entry.data, mode: "compact" }) }),
+      hasStack && /* @__PURE__ */ jsx("pre", { className: "mt-2 text-[10px] text-red-400 whitespace-pre-wrap font-mono bg-red-950/20 p-2 rounded", children: entry.stack })
+    ] })
+  ] });
+}
+__name(LogEntryRow, "LogEntryRow");
+function LogsPanel({ isActive }) {
+  const [expandedLogs, setExpandedLogs] = useState(/* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedLevels, setSelectedLevels] = useState(
+    /* @__PURE__ */ new Set(["debug", "info", "warn", "error", "success"])
+  );
+  const [componentFilter, setComponentFilter] = useState("");
+  const logs = useDebugFilteredLogs();
+  const logCount = useDebugLogCount();
+  const errorCount = useDebugErrorCount();
+  const clearLogs = useDebugLogStore((s) => s.clearLogs);
+  const setFilter = useDebugLogStore((s) => s.setFilter);
+  const exportLogs = useDebugLogStore((s) => s.exportLogs);
+  const scrollRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: logs.length,
+    getScrollElement: /* @__PURE__ */ __name(() => scrollRef.current, "getScrollElement"),
+    estimateSize: /* @__PURE__ */ __name(() => ROW_ESTIMATE_PX, "estimateSize"),
+    overscan: OVERSCAN
+  });
+  useEffect(() => {
+    if (!isActive) return;
+    setFilter({
+      levels: Array.from(selectedLevels),
+      component: componentFilter || void 0,
+      search: searchQuery || void 0
+    });
+  }, [isActive, selectedLevels, componentFilter, searchQuery, setFilter]);
+  const handleToggleExpand = useCallback((id) => {
+    setExpandedLogs((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }, []);
+  const handleToggleLevel = useCallback((level) => {
+    setSelectedLevels((prev) => {
+      const next = new Set(prev);
+      next.has(level) ? next.delete(level) : next.add(level);
+      return next;
+    });
+  }, []);
+  const handleExport = useCallback(() => {
+    const json = exportLogs();
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `debug-logs-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-")}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [exportLogs]);
+  const handleClear = useCallback(() => {
+    clearLogs();
+    setExpandedLogs(/* @__PURE__ */ new Set());
+  }, [clearLogs]);
+  const logsJson = exportLogs();
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-1.5 shrink-0", children: [
+      /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-[10px]", children: [
+        logCount,
+        " logs"
+      ] }),
+      errorCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "destructive", className: "text-[10px]", children: [
+        errorCount,
+        " errors"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2 shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-[140px]", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Search...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "h-7 pl-7 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: "Component...",
+          value: componentFilter,
+          onChange: (e) => setComponentFilter(e.target.value),
+          className: "h-7 w-24 text-xs"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: LOG_LEVELS.map((level) => {
+        const { icon: Icon, color } = LOG_LEVEL_CONFIG[level];
+        const active = selectedLevels.has(level);
+        return /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: active ? "secondary" : "ghost", size: "icon", className: "h-6 w-6", onClick: () => handleToggleLevel(level), children: /* @__PURE__ */ jsx(Icon, { className: cn("h-3.5 w-3.5", active && color) }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: level })
+        ] }, level);
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 ml-auto", children: [
+        /* @__PURE__ */ jsx(CopyButton, { value: logsJson, size: "icon", className: "h-6 w-6" }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: handleExport, children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Export JSON" })
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: handleClear, children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Clear" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto", children: logs.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-10 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Bug, { className: "h-8 w-8 mb-2 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No logs yet" })
+    ] }) : /* @__PURE__ */ jsx("div", { style: { height: `${totalSize}px`, position: "relative" }, children: virtualItems.map((vItem) => {
+      const entry = logs[vItem.index];
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-index": vItem.index,
+          ref: virtualizer.measureElement,
+          style: { position: "absolute", top: 0, left: 0, width: "100%", transform: `translateY(${vItem.start}px)` },
+          children: /* @__PURE__ */ jsx(
+            LogEntryRow,
+            {
+              entry,
+              expanded: expandedLogs.has(entry.id),
+              onToggle: () => handleToggleExpand(entry.id)
+            }
+          )
+        },
+        entry.id
+      );
+    }) }) })
+  ] });
+}
+__name(LogsPanel, "LogsPanel");
+var MAX_EVENTS = 200;
+function useAudioEventLog(active) {
+  const [events, setEvents] = useState([]);
+  const [syncIntervalMs, setSyncIntervalMs] = useState(null);
+  const [kindCounts, setKindCounts] = useState({});
+  const [seekRate, setSeekRate] = useState(0);
+  const queueRef = useRef([]);
+  const counterRef = useRef(0);
+  const lastSyncTs = useRef(null);
+  const seekTimestamps = useRef([]);
+  const kindCountsRef = useRef({});
+  const clear = useCallback(() => {
+    clearAudioEventBuffer();
+    queueRef.current = [];
+    counterRef.current = 0;
+    kindCountsRef.current = {};
+    seekTimestamps.current = [];
+    lastSyncTs.current = null;
+    setEvents([]);
+    setSyncIntervalMs(null);
+    setKindCounts({});
+    setSeekRate(0);
+  }, []);
+  useEffect(() => {
+    if (!active) return;
+    const unsubscribe = subscribeAudioEvents((event) => {
+      const entry = { ...event, id: String(++counterRef.current) };
+      queueRef.current.push(entry);
+      if (event.kind === "sync") {
+        if (lastSyncTs.current !== null) {
+          const interval = event.ts - lastSyncTs.current;
+          entry._interval = interval;
+        }
+        lastSyncTs.current = event.ts;
+      }
+      if (event.kind === "seek") {
+        seekTimestamps.current.push(event.ts);
+      }
+      kindCountsRef.current = {
+        ...kindCountsRef.current,
+        [event.kind]: (kindCountsRef.current[event.kind] ?? 0) + 1
+      };
+    });
+    return unsubscribe;
+  }, [active]);
+  useEffect(() => {
+    if (!active) return;
+    let rafId;
+    const flush = /* @__PURE__ */ __name(() => {
+      if (queueRef.current.length > 0) {
+        const incoming = queueRef.current.splice(0);
+        const lastSync = [...incoming].reverse().find((e) => e.kind === "sync");
+        if (lastSync?._interval !== void 0) {
+          setSyncIntervalMs(lastSync._interval);
+        }
+        setEvents((prev) => {
+          const next = [...prev, ...incoming];
+          return next.length > MAX_EVENTS ? next.slice(-MAX_EVENTS) : next;
+        });
+        setKindCounts({ ...kindCountsRef.current });
+      }
+      rafId = requestAnimationFrame(flush);
+    }, "flush");
+    rafId = requestAnimationFrame(flush);
+    return () => cancelAnimationFrame(rafId);
+  }, [active]);
+  useEffect(() => {
+    if (!active) return;
+    const id = setInterval(() => {
+      const now = Date.now();
+      seekTimestamps.current = seekTimestamps.current.filter((t) => now - t < 5e3);
+      setSeekRate(Math.round(seekTimestamps.current.length / 5 * 10) / 10);
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [active]);
+  return { events, clear, seekRate, syncIntervalMs, kindCounts };
+}
+__name(useAudioEventLog, "useAudioEventLog");
+var DEBUG_MODES = ["off", "on", "verbose"];
+var KIND_STYLES = {
+  play: { label: "play", className: "text-green-400" },
+  pause: { label: "pause", className: "text-yellow-400" },
+  seek: { label: "seek", className: "text-blue-400" },
+  ended: { label: "ended", className: "text-muted-foreground" },
+  sync: { label: "sync", className: "text-muted-foreground/50" },
+  load: { label: "load", className: "text-purple-400" },
+  error: { label: "error", className: "text-red-400" },
+  engine: { label: "eng", className: "text-cyan-400" },
+  custom: { label: "custom", className: "text-orange-400" }
+};
+function getDebugAudioMode() {
+  try {
+    const v = localStorage.getItem("DEBUG_AUDIO");
+    if (v === "verbose") return "verbose";
+    if (v) return "on";
+  } catch {
+  }
+  return "off";
+}
+__name(getDebugAudioMode, "getDebugAudioMode");
+function formatTs(ts) {
+  const d = new Date(ts);
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}.${String(d.getMilliseconds()).padStart(3, "0")}`;
+}
+__name(formatTs, "formatTs");
+function AudioDebugPanel({ isActive }) {
+  const { events, clear, seekRate, syncIntervalMs, kindCounts } = useAudioEventLog(isActive);
+  const [debugMode, setDebugMode] = useState(getDebugAudioMode);
+  const handleSetDebugAudio = useCallback((mode) => {
+    if (mode === "off") {
+      localStorage.removeItem("DEBUG_AUDIO");
+    } else {
+      localStorage.setItem("DEBUG_AUDIO", mode === "verbose" ? "verbose" : "1");
+    }
+    setDebugMode(mode);
+  }, []);
+  const kindEntries = Object.entries(kindCounts);
+  const activeKinds = kindEntries.filter(([, count]) => count > 0);
+  const reversedEvents = [...events].reverse();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        "Sync interval:",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono", children: syncIntervalMs !== null ? `${syncIntervalMs.toFixed(1)}ms` : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        "Seeks/s: ",
+        /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono", children: seekRate })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        "Total: ",
+        /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono", children: events.length })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap ml-auto", children: activeKinds.map(([kind, count]) => /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: cn("text-[10px] px-1 py-0", KIND_STYLES[kind]?.className), children: [
+        KIND_STYLES[kind]?.label ?? kind,
+        " ",
+        count
+      ] }, kind)) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 ml-1", onClick: clear, children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-border px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground mr-1", children: "DEBUG_AUDIO:" }),
+      DEBUG_MODES.map((mode) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "text-[10px] px-2 py-0.5 rounded border transition-colors",
+            debugMode === mode ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-muted text-muted-foreground"
+          ),
+          onClick: () => handleSetDebugAudio(mode),
+          children: mode
+        },
+        mode
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: reversedEvents.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-10 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Radio, { className: "h-8 w-8 mb-2 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No audio events yet" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs mt-1", children: [
+        "Wire ",
+        /* @__PURE__ */ jsx("code", { className: "text-xs", children: "emitAudioEvent()" }),
+        " into your audio engine"
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/30", children: reversedEvents.map((entry) => {
+      const style = KIND_STYLES[entry.kind] ?? { label: entry.kind, className: "text-foreground" };
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 px-3 py-1 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground shrink-0 w-[88px]", children: formatTs(entry.ts) }),
+        /* @__PURE__ */ jsx("span", { className: cn("shrink-0 w-12 font-medium", style.className), children: style.label }),
+        entry.trackId && /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-muted-foreground", children: entry.trackId.slice(0, 6) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-foreground/80", children: entry.msg })
+      ] }, entry.id);
+    }) }) })
+  ] });
+}
+__name(AudioDebugPanel, "AudioDebugPanel");
+var BUILTIN_TABS = [
+  { id: "logs", label: "Logs", icon: ScrollText },
+  { id: "audio", label: "Audio", icon: Radio }
+];
+var POSITION_CLASSES = {
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4"
+};
+function DebugPanel({
+  tabs: customTabs = [],
+  position = "bottom-left",
+  defaultHeight = 480,
+  defaultWidth = 560
+}) {
+  const isOpen = useDebugStore((s) => s.isOpen);
+  const activeTab = useDebugStore((s) => s.tab);
+  const setTab = useDebugStore((s) => s.setTab);
+  const close = useDebugStore((s) => s.close);
+  const errorCount = useDebugErrorCount();
+  const [isMinimized, setIsMinimized] = useState(false);
+  useEffect(() => {
+    const unsub = installMonitorBridge();
+    return () => unsub?.();
+  }, []);
+  const allTabs = useMemo(() => [
+    ...BUILTIN_TABS,
+    ...customTabs.map((t) => ({ id: t.id, label: t.label, icon: t.icon }))
+  ], [customTabs]);
+  const panelHeight = isMinimized ? 48 : defaultHeight;
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed z-[100] flex flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+        POSITION_CLASSES[position]
+      ),
+      style: { width: defaultWidth, height: panelHeight },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/50 px-3 py-2 shrink-0", children: [
+          /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Debug" }),
+          errorCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "destructive", className: "ml-1 text-[10px]", children: [
+            errorCount,
+            " errors"
+          ] }),
+          !isMinimized && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 ml-3", children: allTabs.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = activeTab === tab.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setTab(tab.id),
+                className: cn(
+                  "flex items-center gap-1.5 px-2 py-0.5 rounded text-xs transition-colors",
+                  isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+                  tab.label
+                ]
+              },
+              tab.id
+            );
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => setIsMinimized((v) => !v), children: isMinimized ? /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: isMinimized ? "Expand" : "Minimize" })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: close, children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "Close" })
+            ] })
+          ] })
+        ] }),
+        !isMinimized && /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden", children: [
+          activeTab === "logs" && /* @__PURE__ */ jsx(LogsPanel, { isActive: activeTab === "logs" }),
+          activeTab === "audio" && /* @__PURE__ */ jsx(AudioDebugPanel, { isActive: activeTab === "audio" }),
+          customTabs.map((tab) => {
+            const Panel = tab.panel;
+            return /* @__PURE__ */ jsx("div", { className: cn("h-full", activeTab !== tab.id && "hidden"), children: /* @__PURE__ */ jsx(Panel, { isActive: activeTab === tab.id }) }, tab.id);
+          })
+        ] })
+      ]
+    }
+  );
+}
+__name(DebugPanel, "DebugPanel");
+function useEasterEgg(onTriggered) {
+  const clicks = useRef([]);
+  return useCallback(() => {
+    const now = Date.now();
+    clicks.current = [...clicks.current.filter((t) => now - t < 2e3), now];
+    if (clicks.current.length >= 5) {
+      clicks.current = [];
+      onTriggered();
+    }
+  }, [onTriggered]);
+}
+__name(useEasterEgg, "useEasterEgg");
+function DebugButton({ className, panel = {} }) {
+  const isOpen = useDebugStore((s) => s.isOpen);
+  const isUnlocked = useDebugStore((s) => s.isUnlocked);
+  const unlock = useDebugStore((s) => s.unlock);
+  const toggle = useDebugStore((s) => s.toggle);
+  const errorCount = useDebugErrorCount();
+  const isDev = typeof process !== "undefined" && true;
+  useDebugShortcut();
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const apply = /* @__PURE__ */ __name(() => {
+      document.querySelectorAll("nextjs-portal").forEach((el) => {
+        el.style.display = isOpen ? "none" : "";
+      });
+    }, "apply");
+    apply();
+    const observer = new MutationObserver(apply);
+    observer.observe(document.body, { childList: true });
+    return () => observer.disconnect();
+  }, [isOpen]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const key = params.get("debug");
+    if (key) {
+      unlock(key);
+      params.delete("debug");
+      const newUrl = `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ""}${window.location.hash}`;
+      window.history.replaceState(null, "", newUrl);
+    }
+  }, [unlock]);
+  const handleEasterEggClick = useCallback(() => {
+    unlock("1");
+    toggle();
+  }, [unlock, toggle]);
+  const handleEasterEggTrigger = useEasterEgg(handleEasterEggClick);
+  if (!isDev && !isUnlocked) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed bottom-5 left-5 w-9 h-9 z-[99999] opacity-0",
+        onClick: handleEasterEggTrigger
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isOpen && /* @__PURE__ */ jsx("div", { className: "fixed bottom-5 left-16 z-[99999]", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "relative w-9 h-9 flex items-center justify-center rounded-full",
+            "bg-black/80 backdrop-blur-xl",
+            "shadow-[0_0_0_1px_#171717,inset_0_0_0_1px_hsla(0,0%,100%,0.14),0px_16px_32px_-8px_rgba(0,0,0,0.24)]",
+            "transition-all duration-150 hover:scale-105",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+            errorCount > 0 && "bg-red-600/90",
+            className
+          ),
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx(Bug, { className: cn("h-4 w-4", errorCount > 0 ? "text-white" : "text-white/80") }),
+            errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-white text-[10px] font-semibold text-red-600 shadow-sm", children: errorCount })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(TooltipContent, { side: "top", children: [
+        "Debug Panel ",
+        /* @__PURE__ */ jsx("kbd", { className: "ml-1 text-[10px] opacity-60", children: "\u2318D" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(DebugPanel, { ...panel })
+  ] });
+}
+__name(DebugButton, "DebugButton");
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object") return false;
+  if (a === null || b === null) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+__name(shallowEqual, "shallowEqual");
+function useStoreSnapshot(getState, intervalMs = 200, active = true) {
+  const getStateRef = useRef(getState);
+  getStateRef.current = getState;
+  const [snapshot, setSnapshot] = useState(() => getState());
+  useEffect(() => {
+    if (!active) return;
+    const id = setInterval(() => {
+      const next = getStateRef.current();
+      setSnapshot((prev) => shallowEqual(prev, next) ? prev : next);
+    }, intervalMs);
+    return () => clearInterval(id);
+  }, [active, intervalMs]);
+  return snapshot;
+}
+__name(useStoreSnapshot, "useStoreSnapshot");
+function StorePanel({ label, getState, intervalMs = 200, isActive }) {
+  const snapshot = useStoreSnapshot(getState, intervalMs, isActive);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2 shrink-0", children: [
+      /* @__PURE__ */ jsx(Database, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-muted-foreground/60", children: [
+        "polling ",
+        intervalMs,
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(LazyJsonTree, { data: snapshot, mode: "full" }) }) })
+  ] });
+}
+__name(StorePanel, "StorePanel");
+var MAX_EVENTS2 = 300;
+function useCustomEventLog(active, channel) {
+  const [events, setEvents] = useState([]);
+  const counterRef = useRef(0);
+  const clear = useCallback(() => setEvents([]), []);
+  useEffect(() => {
+    if (!active) return;
+    const unsubscribe = subscribeCustomEvents((event) => {
+      if (channel && event.channel !== channel) return;
+      const entry = { ...event, id: String(++counterRef.current) };
+      setEvents((prev) => {
+        const next = [...prev, entry];
+        return next.length > MAX_EVENTS2 ? next.slice(-MAX_EVENTS2) : next;
+      });
+    });
+    return unsubscribe;
+  }, [active, channel]);
+  return { events, clear };
+}
+__name(useCustomEventLog, "useCustomEventLog");
+
+export { AudioDebugPanel, DebugButton, DebugPanel, LogsPanel, StorePanel, installMonitorBridge, useAudioEventLog, useCustomEventLog, useDebugShortcut, useDebugStore, useStoreSnapshot };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map