@mugenlabs/logtape-devtools 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,48 +1,17 @@
-// 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();
+import {
+  LOG_LEVELS,
+  createDevtoolsSink,
+  createLogStore,
+  defaultLogStore,
+  safeStringify
+} from "./chunk-CYXOBB6A.mjs";
 
 // src/plugin/logtape-devtools-plugin.tsx
-import { useCallback as useCallback3, useMemo as useMemo2, useState as useState2, useSyncExternalStore } from "react";
+import { useCallback as useCallback4, useMemo as useMemo2, useState as useState2, useSyncExternalStore } from "react";
 
 // src/plugin/components/log-list.tsx
-import { useEffect, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback as useCallback2, useEffect, useRef } from "react";
 
 // src/plugin/theme.ts
 var theme = {
@@ -102,6 +71,17 @@ var theme = {
 // src/plugin/components/log-row.tsx
 import { useCallback } from "react";
 
+// src/plugin/format.ts
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString(void 0, {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+
 // src/plugin/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var defaults = { size: 14, color: "currentColor" };
@@ -192,91 +172,120 @@ var LevelBadge = ({ 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 detailRowStyle = {
+  display: "flex",
+  gap: theme.spacing.lg,
+  marginBottom: theme.spacing.md
+};
+var detailLabelStyle = {
+  color: theme.colors.textMuted,
+  flexShrink: 0,
+  fontSize: theme.fontSize.md,
+  minWidth: "72px",
+  textAlign: "right"
+};
+var detailValueStyle = {
+  fontSize: theme.fontSize.base,
+  wordBreak: "break-all"
+};
+var containerStyle = {
+  borderTop: `1px solid ${theme.colors.border}`,
+  padding: `${theme.spacing.lg} ${theme.spacing.xl}`
+};
+var categoryStyle = {
+  color: theme.colors.accent,
+  fontFamily: theme.fontFamily.mono
+};
+var callerStyle = {
+  color: theme.colors.textSecondary,
+  fontFamily: theme.fontFamily.mono
+};
+var messageStyle = { color: theme.colors.textPrimary };
+var propertiesStyle = {
+  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"
+};
+var DetailRow = ({ label, children }) => /* @__PURE__ */ jsxs2("div", { style: detailRowStyle, children: [
+  /* @__PURE__ */ jsx3("span", { style: detailLabelStyle, children: label }),
+  /* @__PURE__ */ jsx3("span", { style: detailValueStyle, 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)
-          }
-        ) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs2("div", { "data-testid": "log-detail", style: { ...containerStyle, background: levelColors.bg }, children: [
+    /* @__PURE__ */ jsx3(DetailRow, { label: "Time", children: formatTime(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: categoryStyle, children: record.category.join(".") }) }),
+    record.caller && /* @__PURE__ */ jsx3(DetailRow, { label: "Caller", children: /* @__PURE__ */ jsx3("span", { style: callerStyle, children: record.caller }) }),
+    /* @__PURE__ */ jsx3(DetailRow, { label: "Message", children: /* @__PURE__ */ jsx3("span", { style: messageStyle, children: record.messageText }) }),
+    hasProperties && /* @__PURE__ */ jsx3(DetailRow, { label: "Data", children: /* @__PURE__ */ jsx3("pre", { style: propertiesStyle, children: safeStringify(record.properties, 2) }) })
+  ] });
 };
 
 // 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 rowStyle = {
+  alignItems: "center",
+  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%"
+};
+var timestampStyle = {
+  color: theme.colors.textDimmed,
+  flexShrink: 0,
+  fontFamily: theme.fontFamily.mono,
+  fontSize: theme.fontSize.md
+};
+var categoryStyle2 = {
+  color: theme.colors.accent,
+  flexShrink: 0,
+  fontFamily: theme.fontFamily.mono,
+  fontSize: theme.fontSize.md,
+  maxWidth: "180px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var messageStyle2 = {
+  color: theme.colors.textPrimary,
+  flex: 1,
+  fontSize: theme.fontSize.base,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var callerStyle2 = {
+  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"
+};
+var chevronStyle = {
+  color: theme.colors.textDimmed,
+  display: "flex",
+  flexShrink: 0,
+  transition: "transform 0.15s"
+};
 var LogRow = ({ record, expanded, onToggle }) => {
   const levelColors = theme.colors.levels[record.level];
   const handleClick = useCallback(() => {
@@ -290,94 +299,15 @@ var LogRow = ({ record, expanded, onToggle }) => {
         "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%"
-        },
+        style: { ...rowStyle, background: expanded ? levelColors.bg : "transparent" },
         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("span", { style: timestampStyle, 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 })
-            }
-          )
+          /* @__PURE__ */ jsx4("span", { style: categoryStyle2, children: record.category.join(".") }),
+          /* @__PURE__ */ jsx4("span", { style: messageStyle2, children: record.messageText }),
+          record.caller && /* @__PURE__ */ jsx4("span", { style: callerStyle2, children: record.caller }),
+          /* @__PURE__ */ jsx4("span", { style: { ...chevronStyle, transform: expanded ? "rotate(90deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ jsx4(ChevronRightIcon, { size: 12 }) })
         ]
       }
     ),
@@ -387,76 +317,92 @@ var LogRow = ({ record, expanded, onToggle }) => {
 
 // src/plugin/components/log-list.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
+var ESTIMATED_ROW_HEIGHT = 28;
+var OVERSCAN = 10;
+var STICK_THRESHOLD = 40;
+var emptyStyle = {
+  alignItems: "center",
+  color: theme.colors.textMuted,
+  display: "flex",
+  flex: 1,
+  fontSize: theme.fontSize.lg,
+  justifyContent: "center"
+};
+var containerStyle2 = {
+  flex: 1,
+  overflow: "auto",
+  scrollbarColor: `${theme.colors.scrollbar} transparent`,
+  scrollbarWidth: "thin"
+};
 var LogList = ({ records, expandedId, onToggle, autoScroll }) => {
   const containerRef = useRef(null);
   const isAtBottomRef = useRef(true);
+  const virtualizer = useVirtualizer({
+    count: records.length,
+    estimateSize: () => ESTIMATED_ROW_HEIGHT,
+    getItemKey: (index) => records[index].id,
+    getScrollElement: () => containerRef.current,
+    overscan: OVERSCAN
+  });
   const recordCount = records.length;
   useEffect(() => {
-    const el = containerRef.current;
-    if (!(el && autoScroll && isAtBottomRef.current)) {
+    if (recordCount === 0 || !(autoScroll && isAtBottomRef.current)) {
       return;
     }
-    el.scrollTop = el.scrollHeight;
-  }, [autoScroll, recordCount]);
-  const handleScroll = () => {
+    virtualizer.scrollToIndex(recordCount - 1, { align: "end" });
+  }, [autoScroll, recordCount, virtualizer]);
+  const handleScroll = useCallback2(() => {
     const el = containerRef.current;
     if (!el) {
       return;
     }
-    isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
-  };
+    isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;
+  }, []);
   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-empty", style: emptyStyle, children: "No logs yet" });
   }
-  return /* @__PURE__ */ jsx5(
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ jsx5("div", { "data-testid": "log-list", onScroll: handleScroll, ref: containerRef, style: containerStyle2, children: /* @__PURE__ */ jsx5(
     "div",
     {
-      "data-testid": "log-list",
-      onScroll: handleScroll,
-      ref: containerRef,
       style: {
-        flex: 1,
-        overflow: "auto",
-        scrollbarColor: `${theme.colors.scrollbar} transparent`,
-        scrollbarWidth: "thin"
+        height: `${virtualizer.getTotalSize()}px`,
+        position: "relative",
+        width: "100%"
       },
-      children: records.map((record) => /* @__PURE__ */ jsx5(
-        LogRow,
+      children: /* @__PURE__ */ jsx5(
+        "div",
         {
-          expanded: expandedId === record.id,
-          onToggle,
-          record
-        },
-        record.id
-      ))
+          style: {
+            left: 0,
+            position: "absolute",
+            top: 0,
+            transform: `translateY(${virtualItems[0]?.start ?? 0}px)`,
+            width: "100%"
+          },
+          children: virtualItems.map((virtualItem) => {
+            const record = records[virtualItem.index];
+            return /* @__PURE__ */ jsx5(
+              "div",
+              {
+                "data-index": virtualItem.index,
+                ref: virtualizer.measureElement,
+                children: /* @__PURE__ */ jsx5(LogRow, { expanded: expandedId === record.id, onToggle, record })
+              },
+              virtualItem.key
+            );
+          })
+        }
+      )
     }
-  );
+  ) });
 };
 
 // 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 { useCallback as useCallback3, useEffect as useEffect2, useMemo, useState } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var HOVER_STYLE_ID = "logtape-devtools-hover";
 function useHoverStyles() {
@@ -521,7 +467,7 @@ var LevelToggle = ({
   onToggle
 }) => {
   const colors = theme.colors.levels[level];
-  const handleClick = useCallback2(() => onToggle(level), [level, onToggle]);
+  const handleClick = useCallback3(() => onToggle(level), [level, onToggle]);
   return /* @__PURE__ */ jsx6(
     "button",
     {
@@ -561,31 +507,26 @@ var Toolbar = ({
   categories,
   categoryFilter,
   onCategoryFilterChange,
-  searchText,
   onSearchTextChange,
   totalCount,
   filteredCount
 }) => {
   useHoverStyles();
-  const [localSearch, setLocalSearch] = useState(searchText);
+  const [search, setSearch] = useState("");
   const debouncedSearch = useMemo(
     () => new Debouncer(onSearchTextChange, { wait: 200 }),
     [onSearchTextChange]
   );
-  const handleSearchChange = useCallback2(
+  useEffect2(() => () => debouncedSearch.cancel(), [debouncedSearch]);
+  const handleSearchChange = useCallback3(
     (e) => {
       const value = e.target.value;
-      setLocalSearch(value);
+      setSearch(value);
       debouncedSearch.maybeExecute(value);
     },
     [debouncedSearch]
   );
-  useEffect2(() => {
-    if (searchText === "" && localSearch !== "") {
-      setLocalSearch("");
-    }
-  }, [searchText, localSearch]);
-  const handleLevelToggle = useCallback2(
+  const handleLevelToggle = useCallback3(
     (level) => {
       const next = new Set(levelFilter);
       if (next.has(level)) {
@@ -905,7 +846,7 @@ var Toolbar = ({
               placeholder: "Search\u2026",
               style: inputStyle,
               type: "text",
-              value: localSearch
+              value: search
             }
           )
         ] })
@@ -916,6 +857,61 @@ var Toolbar = ({
 
 // src/plugin/logtape-devtools-plugin.tsx
 import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var rootStyle = {
+  background: theme.colors.background,
+  color: theme.colors.textPrimary,
+  display: "flex",
+  flexDirection: "row",
+  fontFamily: theme.fontFamily.sans,
+  height: "100%",
+  overflow: "hidden"
+};
+var sidebarStyle = {
+  flexShrink: 0,
+  overflow: "hidden",
+  transition: "width 0.2s ease, opacity 0.15s ease"
+};
+var mainStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  overflow: "hidden"
+};
+var topBarStyle = {
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.colors.border}`,
+  display: "flex",
+  flexShrink: 0,
+  gap: theme.spacing.lg,
+  padding: `${theme.spacing.sm} ${theme.spacing.lg}`
+};
+var sidebarToggleStyle = {
+  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"
+};
+var iconLabelStyle = { alignItems: "center", display: "inline-flex", gap: "6px" };
+var countStyle = {
+  color: theme.colors.textMuted,
+  fontFamily: theme.fontFamily.mono,
+  fontSize: theme.fontSize.sm
+};
+var compactButtonStyle = {
+  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"
+};
 var LogTapeDevtoolsPlugin = ({ store }) => {
   const allRecords = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
   const [paused, setPaused] = useState2(false);
@@ -925,15 +921,15 @@ var LogTapeDevtoolsPlugin = ({ store }) => {
   const [searchText, setSearchText] = useState2("");
   const [expandedId, setExpandedId] = useState2(null);
   const [sidebarOpen, setSidebarOpen] = useState2(true);
-  const handlePause = useCallback3(() => {
+  const handlePause = useCallback4(() => {
     setPaused(true);
     setPausedRecords(store.getSnapshot());
   }, [store]);
-  const handleResume = useCallback3(() => {
+  const handleResume = useCallback4(() => {
     setPaused(false);
     setPausedRecords([]);
   }, []);
-  const handleClear = useCallback3(() => {
+  const handleClear = useCallback4(() => {
     store.clear();
     setPausedRecords([]);
     setExpandedId(null);
@@ -963,158 +959,93 @@ var LogTapeDevtoolsPlugin = ({ store }) => {
       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: [
+  return /* @__PURE__ */ jsxs5("div", { style: rootStyle, children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        style: {
+          ...sidebarStyle,
+          borderRight: sidebarOpen ? `1px solid ${theme.colors.border}` : "none",
+          opacity: sidebarOpen ? 1 : 0,
+          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,
+            totalCount: records.length
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs5("div", { style: mainStyle, children: [
+      /* @__PURE__ */ jsxs5("div", { style: topBarStyle, children: [
         /* @__PURE__ */ jsx7(
-          "div",
+          "button",
           {
-            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
-              }
-            )
+            "aria-expanded": sidebarOpen,
+            "data-lt-clear-btn": "",
+            onClick: () => setSidebarOpen((v) => !v),
+            style: sidebarToggleStyle,
+            title: sidebarOpen ? "Collapse sidebar" : "Expand sidebar",
+            type: "button",
+            children: /* @__PURE__ */ jsxs5("span", { style: iconLabelStyle, children: [
+              sidebarOpen ? /* @__PURE__ */ jsx7(PanelLeftCloseIcon, { size: 14 }) : /* @__PURE__ */ jsx7(PanelLeftOpenIcon, { size: 14 }),
+              sidebarOpen ? "Hide controls" : "Show controls"
+            ] })
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flex: 1, flexDirection: "column", overflow: "hidden" }, children: [
-          /* @__PURE__ */ jsxs5(
-            "div",
+        !sidebarOpen && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx7("span", { style: countStyle, children: filteredRecords.length === records.length ? `${records.length} logs` : `${filteredRecords.length} / ${records.length} logs` }),
+          /* @__PURE__ */ jsx7(
+            "button",
             {
+              "data-lt-interactive": "",
+              onClick: paused ? handleResume : handlePause,
               style: {
-                alignItems: "center",
-                borderBottom: `1px solid ${theme.colors.border}`,
-                display: "flex",
-                flexShrink: 0,
-                gap: theme.spacing.lg,
-                padding: `${theme.spacing.sm} ${theme.spacing.lg}`
+                ...compactButtonStyle,
+                background: paused ? theme.colors.levels.warning.badge : compactButtonStyle.background,
+                color: paused ? theme.colors.white : compactButtonStyle.color
               },
-              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 })
-                    }
-                  )
-                ] })
-              ]
+              title: paused ? "Resume" : "Pause",
+              type: "button",
+              children: paused ? /* @__PURE__ */ jsx7(PlayIcon, { size: 12 }) : /* @__PURE__ */ jsx7(PauseIcon, { size: 12 })
             }
           ),
           /* @__PURE__ */ jsx7(
-            LogList,
+            "button",
             {
-              autoScroll: !paused,
-              expandedId,
-              onToggle: setExpandedId,
-              records: filteredRecords
+              "data-lt-interactive": "",
+              onClick: handleClear,
+              style: compactButtonStyle,
+              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
@@ -1126,108 +1057,19 @@ var createLogTapeDevtoolsPlugin = (options) => ({
   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) {
+// src/create-logtape-devtools.ts
+function createLogTapeDevtools(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 {
-    }
+  return {
+    plugin: createLogTapeDevtoolsPlugin({ ...options?.plugin, store }),
+    sink: createDevtoolsSink({ ...options?.sink, store })
   };
 }
 export {
   LOG_LEVELS,
-  LogTapeDevtoolsPlugin,
   createDevtoolsSink,
   createLogStore,
+  createLogTapeDevtools,
   createLogTapeDevtoolsPlugin,
   defaultLogStore
 };