@mugenlabs/logtape-devtools 0.2.0

package/dist/index.mjs

@@ -0,0 +1,1234 @@
+// src/store.ts
+function createLogStore(maxSize = 1e3) {
+  let records = [];
+  let max = maxSize;
+  const listeners = /* @__PURE__ */ new Set();
+  function notify() {
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  return {
+    getSnapshot: () => records,
+    addRecord: (record) => {
+      records = [...records, record];
+      if (records.length > max) {
+        records = records.slice(records.length - max);
+      }
+      notify();
+    },
+    clear: () => {
+      records = [];
+      notify();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    setMaxSize: (size) => {
+      max = size;
+      if (records.length > max) {
+        records = records.slice(records.length - max);
+        notify();
+      }
+    }
+  };
+}
+var defaultLogStore = createLogStore();
+
+// src/plugin/logtape-devtools-plugin.tsx
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState2, useSyncExternalStore } from "react";
+
+// src/plugin/components/log-list.tsx
+import { useEffect, useRef } from "react";
+
+// src/plugin/theme.ts
+var theme = {
+  colors: {
+    background: "#1e1e1e",
+    surface: "#1a1a1a",
+    surfaceHover: "#2a2a2a",
+    surfaceSelected: "#2a2a3a",
+    border: "#333",
+    borderInput: "#444",
+    borderFocus: "#6366f1",
+    textPrimary: "#e0e0e0",
+    textSecondary: "#888",
+    textMuted: "#666",
+    textDimmed: "#555",
+    white: "#fff",
+    accent: "#6366f1",
+    accentHover: "#818cf8",
+    levels: {
+      trace: { bg: "#1a1a2e", color: "#8888bb", badge: "#5555aa" },
+      debug: { bg: "#1a2a1a", color: "#88bb88", badge: "#55aa55" },
+      info: { bg: "#1a2a3a", color: "#60a5fa", badge: "#3b82f6" },
+      warning: { bg: "#2a2a1a", color: "#facc15", badge: "#eab308" },
+      error: { bg: "#2a1a1a", color: "#ef4444", badge: "#dc2626" },
+      fatal: { bg: "#3a0a0a", color: "#ff6b6b", badge: "#b91c1c" }
+    },
+    scrollbar: "#444",
+    scrollbarHover: "#555"
+  },
+  fontFamily: {
+    mono: 'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',
+    sans: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
+  },
+  fontSize: {
+    xs: "9px",
+    sm: "10px",
+    md: "11px",
+    base: "12px",
+    lg: "13px"
+  },
+  radius: {
+    sm: "3px",
+    md: "4px",
+    lg: "6px",
+    pill: "10px"
+  },
+  spacing: {
+    xs: "2px",
+    sm: "4px",
+    md: "6px",
+    lg: "8px",
+    xl: "12px",
+    xxl: "16px"
+  }
+};
+
+// src/plugin/components/log-row.tsx
+import { useCallback } from "react";
+
+// src/plugin/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaults = { size: 14, color: "currentColor" };
+var Svg = ({
+  size = defaults.size,
+  color = defaults.color,
+  style,
+  children
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: size,
+    stroke: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    style,
+    viewBox: "0 0 24 24",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg",
+    children
+  }
+);
+var PlayIcon = (props) => /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" }) });
+var PauseIcon = (props) => /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+  /* @__PURE__ */ jsx("rect", { height: 18, rx: 1, width: 5, x: 14, y: 3 }),
+  /* @__PURE__ */ jsx("rect", { height: 18, rx: 1, width: 5, x: 5, y: 3 })
+] });
+var XIcon = (props) => /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+] });
+var CheckIcon = (props) => /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var ChevronRightIcon = (props) => /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+var PanelLeftCloseIcon = (props) => /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+  /* @__PURE__ */ jsx("rect", { height: 18, rx: 2, width: 18, x: 3, y: 3 }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "m16 15-3-3 3-3" })
+] });
+var PanelLeftOpenIcon = (props) => /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+  /* @__PURE__ */ jsx("rect", { height: 18, rx: 2, width: 18, x: 3, y: 3 }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "m14 9 3 3-3 3" })
+] });
+var Trash2Icon = (props) => /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M10 11v6" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 11v6" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+] });
+
+// src/plugin/components/level-badge.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LEVEL_LABELS = {
+  trace: "TRC",
+  debug: "DBG",
+  info: "INF",
+  warning: "WRN",
+  error: "ERR",
+  fatal: "FTL"
+};
+var LevelBadge = ({ level }) => {
+  const colors = theme.colors.levels[level];
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      style: {
+        background: colors.badge,
+        borderRadius: theme.radius.sm,
+        color: theme.colors.white,
+        display: "inline-block",
+        fontFamily: theme.fontFamily.mono,
+        fontSize: theme.fontSize.sm,
+        fontWeight: 600,
+        lineHeight: 1,
+        minWidth: "28px",
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+        textAlign: "center",
+        textTransform: "uppercase"
+      },
+      children: LEVEL_LABELS[level]
+    }
+  );
+};
+
+// src/plugin/components/log-detail.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatTimestamp(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString(void 0, {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function safeStringify(value, indent = 2) {
+  try {
+    return JSON.stringify(value, null, indent);
+  } catch {
+    return String(value);
+  }
+}
+var DetailRow = ({ label, children }) => /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: theme.spacing.lg, marginBottom: theme.spacing.md }, children: [
+  /* @__PURE__ */ jsx3(
+    "span",
+    {
+      style: {
+        color: theme.colors.textMuted,
+        flexShrink: 0,
+        fontSize: theme.fontSize.md,
+        minWidth: "72px",
+        textAlign: "right"
+      },
+      children: label
+    }
+  ),
+  /* @__PURE__ */ jsx3("span", { style: { fontSize: theme.fontSize.base, wordBreak: "break-all" }, children })
+] });
+var LogDetail = ({ record }) => {
+  const levelColors = theme.colors.levels[record.level];
+  const hasProperties = Object.keys(record.properties).length > 0;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-testid": "log-detail",
+      style: {
+        background: levelColors.bg,
+        borderTop: `1px solid ${theme.colors.border}`,
+        padding: `${theme.spacing.lg} ${theme.spacing.xl}`
+      },
+      children: [
+        /* @__PURE__ */ jsx3(DetailRow, { label: "Time", children: formatTimestamp(record.timestamp) }),
+        /* @__PURE__ */ jsx3(DetailRow, { label: "Level", children: /* @__PURE__ */ jsx3("span", { style: { color: levelColors.color, fontWeight: 600 }, children: record.level }) }),
+        /* @__PURE__ */ jsx3(DetailRow, { label: "Category", children: /* @__PURE__ */ jsx3("span", { style: { color: theme.colors.accent, fontFamily: theme.fontFamily.mono }, children: record.category.join(".") }) }),
+        record.caller && /* @__PURE__ */ jsx3(DetailRow, { label: "Caller", children: /* @__PURE__ */ jsx3("span", { style: { color: theme.colors.textSecondary, fontFamily: theme.fontFamily.mono }, children: record.caller }) }),
+        /* @__PURE__ */ jsx3(DetailRow, { label: "Message", children: /* @__PURE__ */ jsx3("span", { style: { color: theme.colors.textPrimary }, children: record.messageText }) }),
+        hasProperties && /* @__PURE__ */ jsx3(DetailRow, { label: "Data", children: /* @__PURE__ */ jsx3(
+          "pre",
+          {
+            style: {
+              background: "rgba(0,0,0,0.3)",
+              borderRadius: theme.radius.md,
+              color: theme.colors.textPrimary,
+              fontFamily: theme.fontFamily.mono,
+              fontSize: theme.fontSize.md,
+              margin: 0,
+              maxHeight: "200px",
+              overflow: "auto",
+              padding: theme.spacing.lg,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            },
+            children: safeStringify(record.properties)
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/plugin/components/log-row.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString(void 0, {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+var LogRow = ({ record, expanded, onToggle }) => {
+  const levelColors = theme.colors.levels[record.level];
+  const handleClick = useCallback(() => {
+    onToggle(expanded ? null : record.id);
+  }, [expanded, onToggle, record.id]);
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        "aria-expanded": expanded,
+        "data-lt-interactive": "",
+        "data-testid": "log-row",
+        onClick: handleClick,
+        style: {
+          alignItems: "center",
+          background: expanded ? levelColors.bg : "transparent",
+          border: "none",
+          borderBottom: `1px solid ${theme.colors.border}`,
+          cursor: "pointer",
+          display: "flex",
+          gap: theme.spacing.lg,
+          padding: `${theme.spacing.md} ${theme.spacing.xl}`,
+          textAlign: "left",
+          transition: "background 0.1s, filter 0.1s",
+          width: "100%"
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                color: theme.colors.textDimmed,
+                flexShrink: 0,
+                fontFamily: theme.fontFamily.mono,
+                fontSize: theme.fontSize.md
+              },
+              children: formatTime(record.timestamp)
+            }
+          ),
+          /* @__PURE__ */ jsx4(LevelBadge, { level: record.level }),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                color: theme.colors.accent,
+                flexShrink: 0,
+                fontFamily: theme.fontFamily.mono,
+                fontSize: theme.fontSize.md,
+                maxWidth: "180px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: record.category.join(".")
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                color: theme.colors.textPrimary,
+                flex: 1,
+                fontSize: theme.fontSize.base,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: record.messageText
+            }
+          ),
+          record.caller && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                color: theme.colors.textDimmed,
+                flexShrink: 0,
+                fontFamily: theme.fontFamily.mono,
+                fontSize: theme.fontSize.sm,
+                maxWidth: "200px",
+                opacity: 0.7,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: record.caller
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                color: theme.colors.textDimmed,
+                display: "flex",
+                flexShrink: 0,
+                transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 0.15s"
+              },
+              children: /* @__PURE__ */ jsx4(ChevronRightIcon, { size: 12 })
+            }
+          )
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx4(LogDetail, { record })
+  ] });
+};
+
+// src/plugin/components/log-list.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LogList = ({ records, expandedId, onToggle, autoScroll }) => {
+  const containerRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  const recordCount = records.length;
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!(el && autoScroll && isAtBottomRef.current)) {
+      return;
+    }
+    el.scrollTop = el.scrollHeight;
+  }, [autoScroll, recordCount]);
+  const handleScroll = () => {
+    const el = containerRef.current;
+    if (!el) {
+      return;
+    }
+    isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+  };
+  if (records.length === 0) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        "data-testid": "log-list-empty",
+        style: {
+          alignItems: "center",
+          color: theme.colors.textMuted,
+          display: "flex",
+          flex: 1,
+          fontSize: theme.fontSize.lg,
+          justifyContent: "center"
+        },
+        children: "No logs yet"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-testid": "log-list",
+      onScroll: handleScroll,
+      ref: containerRef,
+      style: {
+        flex: 1,
+        overflow: "auto",
+        scrollbarColor: `${theme.colors.scrollbar} transparent`,
+        scrollbarWidth: "thin"
+      },
+      children: records.map((record) => /* @__PURE__ */ jsx5(
+        LogRow,
+        {
+          expanded: expandedId === record.id,
+          onToggle,
+          record
+        },
+        record.id
+      ))
+    }
+  );
+};
+
+// src/plugin/components/toolbar.tsx
+import { Combobox } from "@base-ui-components/react/combobox";
+import { Popover } from "@base-ui-components/react/popover";
+import { Debouncer } from "@tanstack/pacer";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState } from "react";
+
+// src/types.ts
+var LOG_LEVELS = ["trace", "debug", "info", "warning", "error", "fatal"];
+
+// src/plugin/components/toolbar.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var HOVER_STYLE_ID = "logtape-devtools-hover";
+function useHoverStyles() {
+  useEffect2(() => {
+    if (document.getElementById(HOVER_STYLE_ID)) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = HOVER_STYLE_ID;
+    style.textContent = `
+      [data-lt-interactive]:hover {
+        filter: brightness(1.25);
+      }
+      [data-lt-interactive]:active {
+        filter: brightness(0.9);
+      }
+      [data-lt-clear-btn]:hover {
+        color: ${theme.colors.textPrimary} !important;
+      }
+      [data-lt-chip-remove]:hover {
+        opacity: 1 !important;
+        color: ${theme.colors.white} !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+}
+var buttonStyle = {
+  background: theme.colors.surfaceHover,
+  border: `1px solid ${theme.colors.border}`,
+  borderRadius: theme.radius.md,
+  color: theme.colors.textPrimary,
+  cursor: "pointer",
+  fontFamily: theme.fontFamily.sans,
+  fontSize: theme.fontSize.md,
+  padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+  transition: "filter 0.1s, background 0.1s, border-color 0.1s",
+  width: "100%"
+};
+var inputStyle = {
+  background: theme.colors.surface,
+  border: `1px solid ${theme.colors.borderInput}`,
+  borderRadius: theme.radius.md,
+  color: theme.colors.textPrimary,
+  fontFamily: theme.fontFamily.sans,
+  fontSize: theme.fontSize.md,
+  outline: "none",
+  padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+  transition: "border-color 0.15s",
+  width: "100%"
+};
+var sectionLabelStyle = {
+  color: theme.colors.textMuted,
+  fontSize: "9px",
+  fontWeight: 600,
+  letterSpacing: "0.05em",
+  textTransform: "uppercase"
+};
+var LevelToggle = ({
+  level,
+  active,
+  onToggle
+}) => {
+  const colors = theme.colors.levels[level];
+  const handleClick = useCallback2(() => onToggle(level), [level, onToggle]);
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      "aria-pressed": active,
+      "data-lt-interactive": "",
+      "data-testid": `level-toggle-${level}`,
+      onClick: handleClick,
+      style: {
+        background: active ? colors.badge : "transparent",
+        border: `1px solid ${active ? colors.badge : theme.colors.border}`,
+        borderRadius: theme.radius.sm,
+        color: active ? theme.colors.white : colors.color,
+        cursor: "pointer",
+        fontFamily: theme.fontFamily.mono,
+        fontSize: theme.fontSize.sm,
+        fontWeight: 600,
+        lineHeight: 1,
+        minWidth: "30px",
+        opacity: active ? 1 : 0.5,
+        padding: "3px 0",
+        textAlign: "center",
+        transition: "all 0.15s"
+      },
+      title: `Filter ${level} logs`,
+      type: "button",
+      children: level.slice(0, 3).toUpperCase()
+    }
+  );
+};
+var Toolbar = ({
+  paused,
+  onPause,
+  onResume,
+  onClear,
+  levelFilter,
+  onLevelFilterChange,
+  categories,
+  categoryFilter,
+  onCategoryFilterChange,
+  searchText,
+  onSearchTextChange,
+  totalCount,
+  filteredCount
+}) => {
+  useHoverStyles();
+  const [localSearch, setLocalSearch] = useState(searchText);
+  const debouncedSearch = useMemo(
+    () => new Debouncer(onSearchTextChange, { wait: 200 }),
+    [onSearchTextChange]
+  );
+  const handleSearchChange = useCallback2(
+    (e) => {
+      const value = e.target.value;
+      setLocalSearch(value);
+      debouncedSearch.maybeExecute(value);
+    },
+    [debouncedSearch]
+  );
+  useEffect2(() => {
+    if (searchText === "" && localSearch !== "") {
+      setLocalSearch("");
+    }
+  }, [searchText, localSearch]);
+  const handleLevelToggle = useCallback2(
+    (level) => {
+      const next = new Set(levelFilter);
+      if (next.has(level)) {
+        next.delete(level);
+      } else {
+        next.add(level);
+      }
+      onLevelFilterChange(next);
+    },
+    [levelFilter, onLevelFilterChange]
+  );
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-testid": "toolbar",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flexShrink: 0,
+        gap: theme.spacing.xl,
+        height: "100%",
+        minWidth: "200px",
+        overflow: "auto",
+        padding: `${theme.spacing.lg} ${theme.spacing.xl}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              style: {
+                color: theme.colors.textPrimary,
+                fontFamily: theme.fontFamily.mono,
+                fontSize: theme.fontSize.lg,
+                fontWeight: 600
+              },
+              children: filteredCount === totalCount ? `${totalCount}` : `${filteredCount} / ${totalCount}`
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { style: { color: theme.colors.textMuted, fontSize: theme.fontSize.sm }, children: "logs" })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: theme.spacing.sm }, children: [
+          /* @__PURE__ */ jsx6("div", { style: sectionLabelStyle, children: "Actions" }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              "data-lt-interactive": "",
+              onClick: paused ? onResume : onPause,
+              style: {
+                ...buttonStyle,
+                background: paused ? theme.colors.levels.warning.badge : buttonStyle.background,
+                color: paused ? theme.colors.white : buttonStyle.color
+              },
+              title: paused ? "Resume live updates" : "Pause live updates",
+              type: "button",
+              children: /* @__PURE__ */ jsxs4("span", { style: { alignItems: "center", display: "inline-flex", gap: "6px" }, children: [
+                paused ? /* @__PURE__ */ jsx6(PlayIcon, { size: 12 }) : /* @__PURE__ */ jsx6(PauseIcon, { size: 12 }),
+                paused ? "Resume" : "Pause"
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              "data-lt-interactive": "",
+              onClick: onClear,
+              style: buttonStyle,
+              title: "Clear all logs",
+              type: "button",
+              children: /* @__PURE__ */ jsxs4("span", { style: { alignItems: "center", display: "inline-flex", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx6(Trash2Icon, { size: 12 }),
+                "Clear"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: theme.spacing.sm }, children: [
+          /* @__PURE__ */ jsxs4("div", { style: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx6("div", { style: sectionLabelStyle, children: "Levels" }),
+            levelFilter.size > 0 && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                "data-lt-clear-btn": "",
+                onClick: () => onLevelFilterChange(/* @__PURE__ */ new Set()),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: theme.colors.textMuted,
+                  cursor: "pointer",
+                  fontSize: "9px",
+                  padding: 0,
+                  transition: "color 0.1s"
+                },
+                title: "Show all levels",
+                type: "button",
+                children: "clear"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gap: theme.spacing.xs,
+                gridTemplateColumns: "repeat(3, 1fr)"
+              },
+              children: LOG_LEVELS.map((level) => /* @__PURE__ */ jsx6(
+                LevelToggle,
+                {
+                  active: levelFilter.size === 0 || levelFilter.has(level),
+                  level,
+                  onToggle: handleLevelToggle
+                },
+                level
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: theme.spacing.sm }, children: [
+          /* @__PURE__ */ jsxs4("div", { style: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx6("div", { style: sectionLabelStyle, children: "Category" }),
+            categoryFilter.length > 0 && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                "data-lt-clear-btn": "",
+                onClick: () => onCategoryFilterChange([]),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: theme.colors.textMuted,
+                  cursor: "pointer",
+                  fontSize: "9px",
+                  padding: 0,
+                  transition: "color 0.1s"
+                },
+                title: "Clear all categories",
+                type: "button",
+                children: "clear"
+              }
+            )
+          ] }),
+          categories.length === 0 ? /* @__PURE__ */ jsxs4(Popover.Root, { children: [
+            /* @__PURE__ */ jsx6(
+              Popover.Trigger,
+              {
+                delay: 300,
+                nativeButton: false,
+                openOnHover: true,
+                render: /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    "data-testid": "category-input",
+                    style: {
+                      ...inputStyle,
+                      color: theme.colors.textMuted,
+                      cursor: "not-allowed",
+                      opacity: 0.5
+                    },
+                    children: "Category\u2026"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx6(Popover.Portal, { children: /* @__PURE__ */ jsx6(Popover.Positioner, { sideOffset: 6, style: { zIndex: 999999 }, children: /* @__PURE__ */ jsx6(
+              Popover.Popup,
+              {
+                style: {
+                  background: theme.colors.surface,
+                  border: `1px solid ${theme.colors.border}`,
+                  borderRadius: theme.radius.md,
+                  boxShadow: "0 8px 24px rgba(0,0,0,0.5)",
+                  fontSize: theme.fontSize.sm,
+                  maxWidth: "200px",
+                  padding: `${theme.spacing.sm} ${theme.spacing.lg}`
+                },
+                children: /* @__PURE__ */ jsx6("p", { style: { color: theme.colors.textMuted, lineHeight: 1.4, margin: 0 }, children: "Waiting for logs to populate available categories." })
+              }
+            ) }) })
+          ] }) : /* @__PURE__ */ jsxs4(
+            Combobox.Root,
+            {
+              items: categories,
+              multiple: true,
+              onValueChange: onCategoryFilterChange,
+              value: categoryFilter,
+              children: [
+                /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    style: {
+                      background: theme.colors.surface,
+                      border: `1px solid ${theme.colors.borderInput}`,
+                      borderRadius: theme.radius.md,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: "3px",
+                      minHeight: "28px",
+                      padding: "3px",
+                      transition: "border-color 0.15s"
+                    },
+                    children: [
+                      categoryFilter.map((cat) => /* @__PURE__ */ jsxs4(
+                        "span",
+                        {
+                          style: {
+                            alignItems: "center",
+                            background: "rgba(99, 102, 241, 0.15)",
+                            border: "1px solid rgba(99, 102, 241, 0.3)",
+                            borderRadius: theme.radius.sm,
+                            color: theme.colors.accentHover,
+                            display: "inline-flex",
+                            fontFamily: theme.fontFamily.mono,
+                            fontSize: "9px",
+                            gap: "3px",
+                            lineHeight: 1,
+                            padding: "1px 4px"
+                          },
+                          children: [
+                            cat,
+                            /* @__PURE__ */ jsx6(
+                              "button",
+                              {
+                                "data-lt-chip-remove": "",
+                                onClick: () => onCategoryFilterChange(categoryFilter.filter((c) => c !== cat)),
+                                style: {
+                                  background: "none",
+                                  border: "none",
+                                  color: theme.colors.textMuted,
+                                  cursor: "pointer",
+                                  fontSize: "7px",
+                                  lineHeight: 1,
+                                  opacity: 0.7,
+                                  padding: 0,
+                                  transition: "color 0.1s, opacity 0.1s"
+                                },
+                                title: `Remove ${cat}`,
+                                type: "button",
+                                children: /* @__PURE__ */ jsx6(XIcon, { size: 7 })
+                              }
+                            )
+                          ]
+                        },
+                        cat
+                      )),
+                      /* @__PURE__ */ jsx6(
+                        Combobox.Input,
+                        {
+                          "data-testid": "category-input",
+                          placeholder: categoryFilter.length === 0 ? "Category\u2026" : "",
+                          style: {
+                            background: "transparent",
+                            border: "none",
+                            color: theme.colors.textPrimary,
+                            flex: 1,
+                            fontFamily: theme.fontFamily.sans,
+                            fontSize: theme.fontSize.md,
+                            minWidth: "40px",
+                            outline: "none",
+                            padding: `${theme.spacing.xs} ${theme.spacing.sm}`
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx6(Combobox.Portal, { children: /* @__PURE__ */ jsx6(Combobox.Positioner, { style: { zIndex: 999999 }, children: /* @__PURE__ */ jsx6(
+                  Combobox.Popup,
+                  {
+                    style: {
+                      background: theme.colors.surface,
+                      border: `1px solid ${theme.colors.border}`,
+                      borderRadius: theme.radius.md,
+                      boxShadow: "0 8px 24px rgba(0,0,0,0.5)",
+                      maxHeight: "200px",
+                      overflow: "auto",
+                      padding: theme.spacing.xs
+                    },
+                    children: /* @__PURE__ */ jsx6(Combobox.List, { children: (item, index) => /* @__PURE__ */ jsxs4(
+                      Combobox.Item,
+                      {
+                        index,
+                        style: {
+                          alignItems: "center",
+                          borderRadius: theme.radius.sm,
+                          color: theme.colors.textPrimary,
+                          cursor: "pointer",
+                          display: "flex",
+                          fontFamily: theme.fontFamily.mono,
+                          fontSize: theme.fontSize.md,
+                          gap: theme.spacing.sm,
+                          justifyContent: "space-between",
+                          padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+                          transition: "background 0.1s"
+                        },
+                        value: item,
+                        children: [
+                          /* @__PURE__ */ jsx6("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: String(item) }),
+                          /* @__PURE__ */ jsx6(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx6(CheckIcon, { color: theme.colors.accent, size: 14 }) })
+                        ]
+                      },
+                      String(item)
+                    ) })
+                  }
+                ) }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: theme.spacing.sm }, children: [
+          /* @__PURE__ */ jsx6("div", { style: sectionLabelStyle, children: "Search" }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              "data-testid": "search-input",
+              onChange: handleSearchChange,
+              placeholder: "Search\u2026",
+              style: inputStyle,
+              type: "text",
+              value: localSearch
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/plugin/logtape-devtools-plugin.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var LogTapeDevtoolsPlugin = ({ store }) => {
+  const allRecords = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const [paused, setPaused] = useState2(false);
+  const [pausedRecords, setPausedRecords] = useState2([]);
+  const [levelFilter, setLevelFilter] = useState2(/* @__PURE__ */ new Set());
+  const [categoryFilter, setCategoryFilter] = useState2([]);
+  const [searchText, setSearchText] = useState2("");
+  const [expandedId, setExpandedId] = useState2(null);
+  const [sidebarOpen, setSidebarOpen] = useState2(true);
+  const handlePause = useCallback3(() => {
+    setPaused(true);
+    setPausedRecords(store.getSnapshot());
+  }, [store]);
+  const handleResume = useCallback3(() => {
+    setPaused(false);
+    setPausedRecords([]);
+  }, []);
+  const handleClear = useCallback3(() => {
+    store.clear();
+    setPausedRecords([]);
+    setExpandedId(null);
+  }, [store]);
+  const records = paused ? pausedRecords : allRecords;
+  const uniqueCategories = useMemo2(() => {
+    const seen = /* @__PURE__ */ new Set();
+    for (const r of records) {
+      seen.add(r.category.join("."));
+    }
+    return Array.from(seen).sort();
+  }, [records]);
+  const filteredRecords = useMemo2(() => {
+    return records.filter((r) => {
+      if (levelFilter.size > 0 && !levelFilter.has(r.level)) {
+        return false;
+      }
+      if (categoryFilter.length > 0 && !categoryFilter.includes(r.category.join("."))) {
+        return false;
+      }
+      if (searchText) {
+        const term = searchText.toLowerCase();
+        if (!(r.messageText.toLowerCase().includes(term) || r.category.join(".").toLowerCase().includes(term))) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }, [records, levelFilter, categoryFilter, searchText]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        background: theme.colors.background,
+        color: theme.colors.textPrimary,
+        display: "flex",
+        flexDirection: "row",
+        fontFamily: theme.fontFamily.sans,
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              borderRight: sidebarOpen ? `1px solid ${theme.colors.border}` : "none",
+              flexShrink: 0,
+              opacity: sidebarOpen ? 1 : 0,
+              overflow: "hidden",
+              transition: "width 0.2s ease, opacity 0.15s ease",
+              width: sidebarOpen ? "200px" : "0px"
+            },
+            children: /* @__PURE__ */ jsx7(
+              Toolbar,
+              {
+                categories: uniqueCategories,
+                categoryFilter,
+                filteredCount: filteredRecords.length,
+                levelFilter,
+                onCategoryFilterChange: setCategoryFilter,
+                onClear: handleClear,
+                onLevelFilterChange: setLevelFilter,
+                onPause: handlePause,
+                onResume: handleResume,
+                onSearchTextChange: setSearchText,
+                paused,
+                searchText,
+                totalCount: records.length
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flex: 1, flexDirection: "column", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              style: {
+                alignItems: "center",
+                borderBottom: `1px solid ${theme.colors.border}`,
+                display: "flex",
+                flexShrink: 0,
+                gap: theme.spacing.lg,
+                padding: `${theme.spacing.sm} ${theme.spacing.lg}`
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    "aria-expanded": sidebarOpen,
+                    "data-lt-clear-btn": "",
+                    onClick: () => setSidebarOpen((v) => !v),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: theme.colors.textMuted,
+                      cursor: "pointer",
+                      fontFamily: theme.fontFamily.sans,
+                      fontSize: theme.fontSize.md,
+                      padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                      transition: "color 0.1s"
+                    },
+                    title: sidebarOpen ? "Collapse sidebar" : "Expand sidebar",
+                    type: "button",
+                    children: /* @__PURE__ */ jsxs5("span", { style: { alignItems: "center", display: "inline-flex", gap: "6px" }, children: [
+                      sidebarOpen ? /* @__PURE__ */ jsx7(PanelLeftCloseIcon, { size: 14 }) : /* @__PURE__ */ jsx7(PanelLeftOpenIcon, { size: 14 }),
+                      sidebarOpen ? "Hide controls" : "Show controls"
+                    ] })
+                  }
+                ),
+                !sidebarOpen && /* @__PURE__ */ jsxs5(Fragment, { children: [
+                  /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      style: {
+                        color: theme.colors.textMuted,
+                        fontFamily: theme.fontFamily.mono,
+                        fontSize: theme.fontSize.sm
+                      },
+                      children: filteredRecords.length === records.length ? `${records.length} logs` : `${filteredRecords.length} / ${records.length} logs`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      "data-lt-interactive": "",
+                      onClick: paused ? handleResume : handlePause,
+                      style: {
+                        background: paused ? theme.colors.levels.warning.badge : theme.colors.surfaceHover,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.radius.sm,
+                        color: paused ? theme.colors.white : theme.colors.textPrimary,
+                        cursor: "pointer",
+                        fontFamily: theme.fontFamily.sans,
+                        fontSize: theme.fontSize.sm,
+                        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                        transition: "filter 0.1s"
+                      },
+                      title: paused ? "Resume" : "Pause",
+                      type: "button",
+                      children: paused ? /* @__PURE__ */ jsx7(PlayIcon, { size: 12 }) : /* @__PURE__ */ jsx7(PauseIcon, { size: 12 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      "data-lt-interactive": "",
+                      onClick: handleClear,
+                      style: {
+                        background: theme.colors.surfaceHover,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.radius.sm,
+                        color: theme.colors.textPrimary,
+                        cursor: "pointer",
+                        fontFamily: theme.fontFamily.sans,
+                        fontSize: theme.fontSize.sm,
+                        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                        transition: "filter 0.1s"
+                      },
+                      title: "Clear",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx7(Trash2Icon, { size: 12 })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            LogList,
+            {
+              autoScroll: !paused,
+              expandedId,
+              onToggle: setExpandedId,
+              records: filteredRecords
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/plugin/create-logtape-devtools-plugin.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var createLogTapeDevtoolsPlugin = (options) => ({
+  defaultOpen: options?.defaultOpen ?? true,
+  id: "logtape-devtools-plugin",
+  name: options?.name ?? "LogTape",
+  render: /* @__PURE__ */ jsx8(LogTapeDevtoolsPlugin, { store: options?.store ?? defaultLogStore })
+});
+
+// src/sink.ts
+var counter = 0;
+function renderMessage(message) {
+  return message.map((part) => {
+    if (typeof part === "string") {
+      return part;
+    }
+    if (part === null || part === void 0) {
+      return String(part);
+    }
+    try {
+      return JSON.stringify(part);
+    } catch {
+      return String(part);
+    }
+  }).join("");
+}
+function safeCloneProperties(properties) {
+  try {
+    return JSON.parse(JSON.stringify(properties));
+  } catch {
+    const result = {};
+    for (const [key, value] of Object.entries(properties)) {
+      try {
+        result[key] = JSON.parse(JSON.stringify(value));
+      } catch {
+        result[key] = String(value);
+      }
+    }
+    return result;
+  }
+}
+var v8FrameRe = /at\s+(?:.*?\s+\()?(.+?):(\d+):(\d+)\)?$/;
+var smFrameRe = /(?:^|@)(.+?):(\d+):(\d+)$/;
+function captureCallerInfo() {
+  const stack = new Error().stack;
+  if (!stack) {
+    return void 0;
+  }
+  const lines = stack.split("\n");
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed === "Error") {
+      continue;
+    }
+    if (/logtape/i.test(trimmed)) {
+      continue;
+    }
+    const match = v8FrameRe.exec(trimmed) ?? smFrameRe.exec(trimmed);
+    if (!match) {
+      continue;
+    }
+    const [, filePath, lineNo, colNo] = match;
+    const fileName = filePath.replace(/[?#].*$/, "").split("/").pop() ?? filePath;
+    return `${fileName}:${lineNo}:${colNo}`;
+  }
+  return void 0;
+}
+function normalizeRecord(record, captureStack) {
+  const normalized = {
+    id: `log-${++counter}-${record.timestamp}`,
+    timestamp: record.timestamp,
+    level: record.level,
+    category: [...record.category],
+    message: [...record.message],
+    messageText: renderMessage(record.message),
+    properties: safeCloneProperties(record.properties)
+  };
+  if (captureStack) {
+    const caller = captureCallerInfo();
+    if (caller) {
+      normalized.caller = caller;
+    }
+  }
+  return normalized;
+}
+function isProductionEnv() {
+  try {
+    if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
+      return true;
+    }
+  } catch {
+  }
+  return false;
+}
+function createDevtoolsSink(options) {
+  const store = options?.store ?? defaultLogStore;
+  const wantsStack = options?.experimentalCaptureStackTrace ?? true;
+  const captureStack = wantsStack && (options?.forceStackTrace || !isProductionEnv());
+  return (record) => {
+    try {
+      const normalized = normalizeRecord(record, captureStack);
+      store.addRecord(normalized);
+    } catch {
+    }
+  };
+}
+export {
+  LOG_LEVELS,
+  LogTapeDevtoolsPlugin,
+  createDevtoolsSink,
+  createLogStore,
+  createLogTapeDevtoolsPlugin,
+  defaultLogStore
+};
+//# sourceMappingURL=index.mjs.map