@djangocfg/debuger 2.1.219

package/dist/index.cjs

@@ -0,0 +1,887 @@
+'use strict';
+
+var react = require('react');
+var lucideReact = require('lucide-react');
+var components = require('@djangocfg/ui-core/components');
+var lib = require('@djangocfg/ui-core/lib');
+var zustand = require('zustand');
+var hooks = require('@djangocfg/ui-core/hooks');
+var client = require('@djangocfg/monitor/client');
+var uiTools = require('@djangocfg/ui-tools');
+var reactVirtual = require('@tanstack/react-virtual');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var useDebugStore = zustand.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 isDev2 = typeof process !== "undefined" && true;
+  hooks.useHotkey(
+    "meta+d",
+    (e) => {
+      e.preventDefault();
+      if (!isDev2 && !isUnlocked) return;
+      toggle();
+    },
+    { preventDefault: true }
+  );
+}
+__name(useDebugShortcut, "useDebugShortcut");
+var MAX_LOGS = 1e3;
+var DEFAULT_FILTER = {
+  levels: ["debug", "info", "warn", "error", "success"]
+};
+var _counter = 0;
+function generateId() {
+  return `log-${Date.now()}-${++_counter}`;
+}
+__name(generateId, "generateId");
+function matchesFilter(entry, filter) {
+  if (!filter.levels.includes(entry.level)) return false;
+  if (filter.component) {
+    if (!entry.component.toLowerCase().includes(filter.component.toLowerCase())) return false;
+  }
+  if (filter.search) {
+    const s = filter.search.toLowerCase();
+    const inMsg = entry.message.toLowerCase().includes(s);
+    const inData = entry.data ? JSON.stringify(entry.data).toLowerCase().includes(s) : false;
+    if (!inMsg && !inData) return false;
+  }
+  return true;
+}
+__name(matchesFilter, "matchesFilter");
+var useDebugLogStore = zustand.create((set, get) => ({
+  logs: [],
+  filter: DEFAULT_FILTER,
+  addLog: /* @__PURE__ */ __name((entry) => {
+    const newEntry = {
+      ...entry,
+      id: generateId(),
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    set((state) => {
+      const next = [...state.logs, newEntry];
+      return { logs: next.length > MAX_LOGS ? next.slice(-MAX_LOGS) : next };
+    });
+  }, "addLog"),
+  clearLogs: /* @__PURE__ */ __name(() => set({ logs: [] }), "clearLogs"),
+  setFilter: /* @__PURE__ */ __name((filter) => set((state) => ({ filter: { ...state.filter, ...filter } })), "setFilter"),
+  getFilteredLogs: /* @__PURE__ */ __name(() => {
+    const { logs, filter } = get();
+    return logs.filter((e) => matchesFilter(e, filter));
+  }, "getFilteredLogs"),
+  exportLogs: /* @__PURE__ */ __name(() => JSON.stringify(get().logs, null, 2), "exportLogs")
+}));
+var useDebugFilteredLogs = /* @__PURE__ */ __name(() => {
+  const logs = useDebugLogStore((s) => s.logs);
+  const filter = useDebugLogStore((s) => s.filter);
+  return logs.filter((e) => matchesFilter(e, filter));
+}, "useDebugFilteredLogs");
+var useDebugLogCount = /* @__PURE__ */ __name(() => useDebugLogStore((s) => s.logs.length), "useDebugLogCount");
+var useDebugErrorCount = /* @__PURE__ */ __name(() => useDebugLogStore((s) => s.logs.filter((l) => l.level === "error").length), "useDebugErrorCount");
+var isBrowser = typeof window !== "undefined";
+function extractStack(data) {
+  if (!data) return { cleanData: void 0, stack: void 0 };
+  const cleanData = { ...data };
+  let stack;
+  if (data.error instanceof Error) {
+    stack = data.error.stack;
+    cleanData.error = { name: data.error.name, message: data.error.message };
+  } else if (typeof data.error === "object" && data.error !== null) {
+    const e = data.error;
+    if (typeof e.stack === "string") stack = e.stack;
+    if (typeof e.message === "string") cleanData.error = e.message;
+  }
+  return { cleanData, stack };
+}
+__name(extractStack, "extractStack");
+function createDebugLogger(component) {
+  const write = /* @__PURE__ */ __name((level, message, data) => {
+    const { cleanData, stack } = extractStack(data);
+    if (isBrowser) {
+      useDebugLogStore.getState().addLog({ level, component, message, data: cleanData, stack });
+    }
+    {
+      const method = level === "error" ? "error" : level === "warn" ? "warn" : "log";
+      const prefix = `[${component}]`;
+      if (cleanData) {
+        console[method](prefix, message, cleanData);
+      } else {
+        console[method](prefix, message);
+      }
+    }
+  }, "write");
+  return {
+    debug: /* @__PURE__ */ __name((msg, data) => write("debug", msg, data), "debug"),
+    info: /* @__PURE__ */ __name((msg, data) => write("info", msg, data), "info"),
+    warn: /* @__PURE__ */ __name((msg, data) => write("warn", msg, data), "warn"),
+    error: /* @__PURE__ */ __name((msg, data) => write("error", msg, data), "error"),
+    success: /* @__PURE__ */ __name((msg, data) => write("success", msg, data), "success")
+  };
+}
+__name(createDebugLogger, "createDebugLogger");
+function debugLog(component, level, message, data) {
+  const { cleanData, stack } = extractStack(data);
+  if (isBrowser) {
+    useDebugLogStore.getState().addLog({ level, component, message, data: cleanData, stack });
+  }
+  {
+    const method = level === "error" ? "error" : level === "warn" ? "warn" : "log";
+    if (cleanData) {
+      console[method](`[${component}]`, message, cleanData);
+    } else {
+      console[method](`[${component}]`, message);
+    }
+  }
+}
+__name(debugLog, "debugLog");
+var _installed = false;
+function installMonitorBridge() {
+  if (typeof window === "undefined") return;
+  if (_installed) return;
+  let prevLen = client.monitorStore.getState().buffer.length;
+  const unsub = client.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: lucideReact.Bug, color: "text-muted-foreground" },
+  info: { icon: lucideReact.Info, color: "text-blue-500" },
+  warn: { icon: lucideReact.AlertTriangle, color: "text-yellow-500" },
+  error: { icon: lucideReact.AlertCircle, color: "text-red-500" },
+  success: { icon: lucideReact.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__ */ jsxRuntime.jsxs("div", { className: "border-b border-border/50 last:border-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: isExpandable ? onToggle : void 0,
+        disabled: !isExpandable,
+        className: lib.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__ */ jsxRuntime.jsx(Icon, { className: lib.cn("h-3.5 w-3.5 mt-0.5 shrink-0", config.color) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono shrink-0", children: time }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: "outline", className: "shrink-0 text-[10px] px-1 py-0", children: entry.component }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: entry.message }),
+          isExpandable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3" }) })
+        ]
+      }
+    ),
+    expanded && isExpandable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-2 pl-8", children: [
+      hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(uiTools.LazyJsonTree, { data: entry.data, mode: "compact" }) }),
+      hasStack && /* @__PURE__ */ jsxRuntime.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] = react.useState(/* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [selectedLevels, setSelectedLevels] = react.useState(
+    /* @__PURE__ */ new Set(["debug", "info", "warn", "error", "success"])
+  );
+  const [componentFilter, setComponentFilter] = react.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 = react.useRef(null);
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: logs.length,
+    getScrollElement: /* @__PURE__ */ __name(() => scrollRef.current, "getScrollElement"),
+    estimateSize: /* @__PURE__ */ __name(() => ROW_ESTIMATE_PX, "estimateSize"),
+    overscan: OVERSCAN
+  });
+  react.useEffect(() => {
+    if (!isActive) return;
+    setFilter({
+      levels: Array.from(selectedLevels),
+      component: componentFilter || void 0,
+      search: searchQuery || void 0
+    });
+  }, [isActive, selectedLevels, componentFilter, searchQuery, setFilter]);
+  const handleToggleExpand = react.useCallback((id) => {
+    setExpandedLogs((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }, []);
+  const handleToggleLevel = react.useCallback((level) => {
+    setSelectedLevels((prev) => {
+      const next = new Set(prev);
+      next.has(level) ? next.delete(level) : next.add(level);
+      return next;
+    });
+  }, []);
+  const handleExport = react.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 = react.useCallback(() => {
+    clearLogs();
+    setExpandedLogs(/* @__PURE__ */ new Set());
+  }, [clearLogs]);
+  const logsJson = exportLogs();
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-1.5 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(components.Badge, { variant: "secondary", className: "text-[10px]", children: [
+        logCount,
+        " logs"
+      ] }),
+      errorCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(components.Badge, { variant: "destructive", className: "text-[10px]", children: [
+        errorCount,
+        " errors"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-[140px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Input,
+          {
+            placeholder: "Search...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "h-7 pl-7 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components.Input,
+        {
+          placeholder: "Component...",
+          value: componentFilter,
+          onChange: (e) => setComponentFilter(e.target.value),
+          className: "h-7 w-24 text-xs"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(components.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: active ? "secondary" : "ghost", size: "icon", className: "h-6 w-6", onClick: () => handleToggleLevel(level), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: lib.cn("h-3.5 w-3.5", active && color) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.TooltipContent, { children: level })
+        ] }, level);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 ml-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.CopyButton, { value: logsJson, size: "icon", className: "h-6 w-6" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(components.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: handleExport, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.TooltipContent, { children: "Export JSON" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(components.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: handleClear, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.TooltipContent, { children: "Clear" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto", children: logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-10 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bug, { className: "h-8 w-8 mb-2 opacity-40" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No logs yet" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: `${totalSize}px`, position: "relative" }, children: virtualItems.map((vItem) => {
+      const entry = logs[vItem.index];
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            LogEntryRow,
+            {
+              entry,
+              expanded: expandedLogs.has(entry.id),
+              onToggle: () => handleToggleExpand(entry.id)
+            }
+          )
+        },
+        entry.id
+      );
+    }) }) })
+  ] });
+}
+__name(LogsPanel, "LogsPanel");
+
+// src/emitters/Emitter.ts
+var _Emitter = class _Emitter {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Emit an event. No-op if no listeners are registered.
+   */
+  emit(event, data) {
+    const handlers = this.listeners.get(event);
+    if (!handlers || handlers.size === 0) return;
+    handlers.forEach((h) => h(data));
+  }
+  /**
+   * Subscribe to an event. Returns an unsubscribe function.
+   */
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(handler);
+    return () => this.listeners.get(event)?.delete(handler);
+  }
+  /** True when at least one listener is registered for this event (hot-path guard) */
+  hasListeners(event) {
+    return (this.listeners.get(event)?.size ?? 0) > 0;
+  }
+  /** Remove all listeners (useful for testing / cleanup) */
+  clear() {
+    this.listeners.clear();
+  }
+};
+__name(_Emitter, "Emitter");
+var Emitter = _Emitter;
+
+// src/emitters/audioEmitter.ts
+var _emitter = new Emitter();
+var BUFFER_SIZE = 200;
+var _buffer = [];
+var emitAudioEvent = /* @__PURE__ */ __name((event) => {
+  if (_buffer.length >= BUFFER_SIZE) _buffer.shift();
+  _buffer.push(event);
+  _emitter.emit("event", event);
+}, "emitAudioEvent");
+var subscribeAudioEvents = /* @__PURE__ */ __name((fn) => {
+  for (const e of _buffer) fn(e);
+  return _emitter.on("event", fn);
+}, "subscribeAudioEvents");
+var clearAudioEventBuffer = /* @__PURE__ */ __name(() => {
+  _buffer.length = 0;
+}, "clearAudioEventBuffer");
+var hasAudioListeners = /* @__PURE__ */ __name(() => _emitter.hasListeners("event"), "hasAudioListeners");
+
+// src/hooks/useAudioEventLog.ts
+var MAX_EVENTS = 200;
+function useAudioEventLog(active) {
+  const [events, setEvents] = react.useState([]);
+  const [syncIntervalMs, setSyncIntervalMs] = react.useState(null);
+  const [kindCounts, setKindCounts] = react.useState({});
+  const [seekRate, setSeekRate] = react.useState(0);
+  const queueRef = react.useRef([]);
+  const counterRef = react.useRef(0);
+  const lastSyncTs = react.useRef(null);
+  const seekTimestamps = react.useRef([]);
+  const kindCountsRef = react.useRef({});
+  const clear = react.useCallback(() => {
+    clearAudioEventBuffer();
+    queueRef.current = [];
+    counterRef.current = 0;
+    kindCountsRef.current = {};
+    seekTimestamps.current = [];
+    lastSyncTs.current = null;
+    setEvents([]);
+    setSyncIntervalMs(null);
+    setKindCounts({});
+    setSeekRate(0);
+  }, []);
+  react.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]);
+  react.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]);
+  react.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] = react.useState(getDebugAudioMode);
+  const handleSetDebugAudio = react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+        "Sync interval:",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground font-mono", children: syncIntervalMs !== null ? `${syncIntervalMs.toFixed(1)}ms` : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+        "Seeks/s: ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground font-mono", children: seekRate })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+        "Total: ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground font-mono", children: events.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 flex-wrap ml-auto", children: activeKinds.map(([kind, count]) => /* @__PURE__ */ jsxRuntime.jsxs(components.Badge, { variant: "outline", className: lib.cn("text-[10px] px-1 py-0", KIND_STYLES[kind]?.className), children: [
+        KIND_STYLES[kind]?.label ?? kind,
+        " ",
+        count
+      ] }, kind)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "icon", className: "h-6 w-6 ml-1", onClick: clear, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 border-b border-border px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground mr-1", children: "DEBUG_AUDIO:" }),
+      DEBUG_MODES.map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: lib.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__ */ jsxRuntime.jsx(components.ScrollArea, { className: "flex-1", children: reversedEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-10 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Radio, { className: "h-8 w-8 mb-2 opacity-40" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No audio events yet" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs mt-1", children: [
+        "Wire ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs", children: "emitAudioEvent()" }),
+        " into your audio engine"
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 px-3 py-1 text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-muted-foreground shrink-0 w-[88px]", children: formatTs(entry.ts) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: lib.cn("shrink-0 w-12 font-medium", style.className), children: style.label }),
+        entry.trackId && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-mono text-muted-foreground", children: entry.trackId.slice(0, 6) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground/80", children: entry.msg })
+      ] }, entry.id);
+    }) }) })
+  ] });
+}
+__name(AudioDebugPanel, "AudioDebugPanel");
+var BUILTIN_TABS = [
+  { id: "logs", label: "Logs", icon: lucideReact.ScrollText },
+  { id: "audio", label: "Audio", icon: lucideReact.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] = react.useState(false);
+  react.useEffect(() => {
+    const unsub = installMonitorBridge();
+    return () => unsub?.();
+  }, []);
+  const allTabs = react.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: lib.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/50 px-3 py-2 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bug, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Debug" }),
+          errorCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(components.Badge, { variant: "destructive", className: "ml-1 text-[10px]", children: [
+            errorCount,
+            " errors"
+          ] }),
+          !isMinimized && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setTab(tab.id),
+                className: lib.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__ */ jsxRuntime.jsx(Icon, { className: "h-3 w-3" }),
+                  tab.label
+                ]
+              },
+              tab.id
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(components.Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => setIsMinimized((v) => !v), children: isMinimized ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-3.5 w-3.5" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(components.TooltipContent, { children: isMinimized ? "Expand" : "Minimize" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(components.Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: close, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(components.TooltipContent, { children: "Close" })
+            ] })
+          ] })
+        ] }),
+        !isMinimized && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden", children: [
+          activeTab === "logs" && /* @__PURE__ */ jsxRuntime.jsx(LogsPanel, { isActive: activeTab === "logs" }),
+          activeTab === "audio" && /* @__PURE__ */ jsxRuntime.jsx(AudioDebugPanel, { isActive: activeTab === "audio" }),
+          customTabs.map((tab) => {
+            const Panel = tab.panel;
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("h-full", activeTab !== tab.id && "hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(Panel, { isActive: activeTab === tab.id }) }, tab.id);
+          })
+        ] })
+      ]
+    }
+  );
+}
+__name(DebugPanel, "DebugPanel");
+function useEasterEgg(onTriggered) {
+  const clicks = react.useRef([]);
+  return react.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 isDev2 = typeof process !== "undefined" && true;
+  useDebugShortcut();
+  react.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]);
+  react.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 = react.useCallback(() => {
+    unlock("1");
+    toggle();
+  }, [unlock, toggle]);
+  const handleEasterEggTrigger = useEasterEgg(handleEasterEggClick);
+  if (!isDev2 && !isUnlocked) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed bottom-5 left-5 w-9 h-9 z-[99999] opacity-0",
+        onClick: handleEasterEggTrigger
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-5 left-16 z-[99999]", children: /* @__PURE__ */ jsxRuntime.jsxs(components.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: lib.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__ */ jsxRuntime.jsx(lucideReact.Bug, { className: lib.cn("h-4 w-4", errorCount > 0 ? "text-white" : "text-white/80") }),
+            errorCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(components.TooltipContent, { side: "top", children: [
+        "Debug Panel ",
+        /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "ml-1 text-[10px] opacity-60", children: "\u2318D" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.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 = react.useRef(getState);
+  getStateRef.current = getState;
+  const [snapshot, setSnapshot] = react.useState(() => getState());
+  react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto text-[10px] text-muted-foreground/60", children: [
+        "polling ",
+        intervalMs,
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(components.ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(uiTools.LazyJsonTree, { data: snapshot, mode: "full" }) }) })
+  ] });
+}
+__name(StorePanel, "StorePanel");
+
+// src/emitters/customEmitter.ts
+var _emitter2 = new Emitter();
+var emitDebugEvent = /* @__PURE__ */ __name((event) => _emitter2.emit("event", event), "emitDebugEvent");
+var subscribeCustomEvents = /* @__PURE__ */ __name((fn) => _emitter2.on("event", fn), "subscribeCustomEvents");
+var hasCustomListeners = /* @__PURE__ */ __name(() => _emitter2.hasListeners("event"), "hasCustomListeners");
+
+// src/hooks/useCustomEventLog.ts
+var MAX_EVENTS2 = 300;
+function useCustomEventLog(active, channel) {
+  const [events, setEvents] = react.useState([]);
+  const counterRef = react.useRef(0);
+  const clear = react.useCallback(() => setEvents([]), []);
+  react.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");
+
+exports.AudioDebugPanel = AudioDebugPanel;
+exports.DebugButton = DebugButton;
+exports.DebugPanel = DebugPanel;
+exports.LogsPanel = LogsPanel;
+exports.StorePanel = StorePanel;
+exports.clearAudioEventBuffer = clearAudioEventBuffer;
+exports.createDebugLogger = createDebugLogger;
+exports.debugLog = debugLog;
+exports.emitAudioEvent = emitAudioEvent;
+exports.emitDebugEvent = emitDebugEvent;
+exports.hasAudioListeners = hasAudioListeners;
+exports.hasCustomListeners = hasCustomListeners;
+exports.installMonitorBridge = installMonitorBridge;
+exports.subscribeAudioEvents = subscribeAudioEvents;
+exports.subscribeCustomEvents = subscribeCustomEvents;
+exports.useAudioEventLog = useAudioEventLog;
+exports.useCustomEventLog = useCustomEventLog;
+exports.useDebugErrorCount = useDebugErrorCount;
+exports.useDebugFilteredLogs = useDebugFilteredLogs;
+exports.useDebugLogCount = useDebugLogCount;
+exports.useDebugLogStore = useDebugLogStore;
+exports.useDebugShortcut = useDebugShortcut;
+exports.useDebugStore = useDebugStore;
+exports.useStoreSnapshot = useStoreSnapshot;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map