@mugenlabs/logtape-devtools 0.4.1 → 0.4.2

package/dist/index.mjs

@@ -1,431 +1,4 @@
-import {
-  LOG_LEVELS,
-  createDevtoolsSink,
-  createLogStore,
-  defaultLogStore,
-  safeStringify
-} from "./chunk-FDWUISCJ.mjs";
-
-// src/plugin/logtape-devtools-plugin.tsx
-import { useCallback as useCallback4, useMemo as useMemo2, useState as useState2, useSyncExternalStore } from "react";
-
-// src/plugin/components/log-list.tsx
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback as useCallback2, useEffect, useRef } from "react";
-
-// src/plugin/theme.ts
-var theme = {
-  colors: {
-    accent: "#6366f1",
-    accentHover: "#818cf8",
-    background: "#1e1e1e",
-    border: "#333",
-    borderFocus: "#6366f1",
-    borderInput: "#444",
-    levels: {
-      // Badge colours keep at least 4.5:1 contrast against white badge text.
-      debug: { badge: "#2f7a2f", bg: "#1a2a1a", color: "#88bb88" },
-      error: { badge: "#dc2626", bg: "#2a1a1a", color: "#ef4444" },
-      fatal: { badge: "#b91c1c", bg: "#3a0a0a", color: "#ff6b6b" },
-      info: { badge: "#2563eb", bg: "#1a2a3a", color: "#60a5fa" },
-      trace: { badge: "#5555aa", bg: "#1a1a2e", color: "#8888bb" },
-      warning: { badge: "#eab308", bg: "#2a2a1a", color: "#facc15" }
-    },
-    scrollbar: "#444",
-    scrollbarHover: "#555",
-    surface: "#1a1a1a",
-    surfaceHover: "#2a2a2a",
-    surfaceSelected: "#2a2a3a",
-    textDimmed: "#555",
-    textMuted: "#666",
-    textPrimary: "#e0e0e0",
-    textSecondary: "#888",
-    white: "#fff"
-  },
-  fontFamily: {
-    mono: 'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',
-    sans: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
-  },
-  fontSize: {
-    base: "12px",
-    lg: "13px",
-    md: "11px",
-    sm: "10px",
-    xs: "9px"
-  },
-  radius: {
-    lg: "6px",
-    md: "4px",
-    pill: "10px",
-    sm: "3px"
-  },
-  spacing: {
-    lg: "8px",
-    md: "6px",
-    sm: "4px",
-    xl: "12px",
-    xs: "2px",
-    xxl: "16px"
-  }
-};
-var getLevelColors = (level) => theme.colors.levels[level] ?? theme.colors.levels.info;
-
-// src/plugin/components/log-row.tsx
-import { memo, useCallback } from "react";
-
-// src/plugin/format.ts
-var timeFormatter;
-function formatTime(ts) {
-  timeFormatter ??= new Intl.DateTimeFormat(void 0, {
-    hour: "2-digit",
-    hour12: false,
-    minute: "2-digit",
-    second: "2-digit"
-  });
-  return timeFormatter.format(new Date(ts));
-}
-
-// src/plugin/icons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var defaults = { color: "currentColor", size: 14 };
-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 = {
-  debug: "DBG",
-  error: "ERR",
-  fatal: "FTL",
-  info: "INF",
-  trace: "TRC",
-  warning: "WRN"
-};
-var LevelBadge = ({ level }) => {
-  const colors = getLevelColors(level);
-  const label = LEVEL_LABELS[level] ?? level.toUpperCase();
-  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: label
-    }
-  );
-};
-
-// src/plugin/components/log-detail.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-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 = getLevelColors(record.level);
-  const hasProperties = Object.keys(record.properties).length > 0;
-  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 }) }) : null,
-    /* @__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";
-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 LogRowComponent = ({ record, expanded, onToggle }) => {
-  const levelColors = getLevelColors(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: { ...rowStyle, background: expanded ? levelColors.bg : "transparent" },
-        type: "button",
-        children: [
-          /* @__PURE__ */ jsx4("span", { style: timestampStyle, children: formatTime(record.timestamp) }),
-          /* @__PURE__ */ jsx4(LevelBadge, { level: record.level }),
-          /* @__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 }) : null,
-          /* @__PURE__ */ jsx4("span", { style: { ...chevronStyle, transform: expanded ? "rotate(90deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ jsx4(ChevronRightIcon, { size: 12 }) })
-        ]
-      }
-    ),
-    expanded ? /* @__PURE__ */ jsx4(LogDetail, { record }) : null
-  ] });
-};
-var LogRow = memo(LogRowComponent);
-
-// 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,
-    // The virtualizer can ask for keys of indices from a previous, longer list
-    // (after clear or a narrowing filter), so never assume the index exists.
-    getItemKey: (index) => records[index]?.id ?? index,
-    getScrollElement: () => containerRef.current,
-    overscan: OVERSCAN
-  });
-  const recordCount = records.length;
-  const lastRecordId = records[recordCount - 1]?.id;
-  useEffect(() => {
-    if (lastRecordId === void 0 || !(autoScroll && isAtBottomRef.current)) {
-      return;
-    }
-    virtualizer.scrollToIndex(recordCount - 1, { align: "end" });
-  }, [autoScroll, lastRecordId, recordCount, virtualizer]);
-  useEffect(() => {
-    if (recordCount === 0) {
-      isAtBottomRef.current = true;
-    }
-  }, [recordCount]);
-  const handleScroll = useCallback2(() => {
-    const el = containerRef.current;
-    if (!el) {
-      return;
-    }
-    isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;
-  }, []);
-  if (records.length === 0) {
-    return /* @__PURE__ */ jsx5("div", { "data-testid": "log-list-empty", style: emptyStyle, children: "No logs yet" });
-  }
-  const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ jsx5("div", { "data-testid": "log-list", onScroll: handleScroll, ref: containerRef, style: containerStyle2, children: /* @__PURE__ */ jsx5(
-    "div",
-    {
-      style: {
-        height: `${virtualizer.getTotalSize()}px`,
-        position: "relative",
-        width: "100%"
-      },
-      children: /* @__PURE__ */ jsx5(
-        "div",
-        {
-          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 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() {
-  useEffect2(() => {
-    if (document.getElementById(HOVER_STYLE_ID)) {
-      return;
-    }
-    const style = document.createElement("style");
-    style.id = HOVER_STYLE_ID;
-    style.textContent = `
+import{a as Ce,b as F,c as ee,d as Y,e as j}from"./chunk-HWGRZ7VO.mjs";import{useCallback as K,useMemo as he,useState as R,useSyncExternalStore as to}from"react";import{useVirtualizer as Ke}from"@tanstack/react-virtual";import{useCallback as Ge,useEffect as me,useRef as fe}from"react";var e={colors:{accent:"#6366f1",accentHover:"#818cf8",background:"#1e1e1e",border:"#333",borderFocus:"#6366f1",borderInput:"#444",levels:{debug:{badge:"#2f7a2f",bg:"#1a2a1a",color:"#88bb88"},error:{badge:"#dc2626",bg:"#2a1a1a",color:"#ef4444"},fatal:{badge:"#b91c1c",bg:"#3a0a0a",color:"#ff6b6b"},info:{badge:"#2563eb",bg:"#1a2a3a",color:"#60a5fa"},trace:{badge:"#5555aa",bg:"#1a1a2e",color:"#8888bb"},warning:{badge:"#eab308",bg:"#2a2a1a",color:"#facc15"}},scrollbar:"#444",scrollbarHover:"#555",surface:"#1a1a1a",surfaceHover:"#2a2a2a",surfaceSelected:"#2a2a3a",textDimmed:"#555",textMuted:"#666",textPrimary:"#e0e0e0",textSecondary:"#888",white:"#fff"},fontFamily:{mono:'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',sans:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'},fontSize:{base:"12px",lg:"13px",md:"11px",sm:"10px",xs:"9px"},radius:{lg:"6px",md:"4px",pill:"10px",sm:"3px"},spacing:{lg:"8px",md:"6px",sm:"4px",xl:"12px",xs:"2px",xxl:"16px"}},D=o=>e.colors.levels[o]??e.colors.levels.info;import{memo as He,useCallback as Me}from"react";var oe;function W(o){return oe??=new Intl.DateTimeFormat(void 0,{hour:"2-digit",hour12:!1,minute:"2-digit",second:"2-digit"}),oe.format(new Date(o))}import{jsx as s,jsxs as O}from"react/jsx-runtime";var te={color:"currentColor",size:14},w=({size:o=te.size,color:t=te.color,style:l,children:m})=>s("svg",{"aria-hidden":"true",fill:"none",height:o,stroke:t,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,style:l,viewBox:"0 0 24 24",width:o,xmlns:"http://www.w3.org/2000/svg",children:m}),B=o=>s(w,{...o,children:s("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"})}),A=o=>O(w,{...o,children:[s("rect",{height:18,rx:1,width:5,x:14,y:3}),s("rect",{height:18,rx:1,width:5,x:5,y:3})]}),ne=o=>O(w,{...o,children:[s("path",{d:"M18 6 6 18"}),s("path",{d:"m6 6 12 12"})]}),re=o=>s(w,{...o,children:s("path",{d:"M20 6 9 17l-5-5"})}),se=o=>s(w,{...o,children:s("path",{d:"m9 18 6-6-6-6"})}),ae=o=>O(w,{...o,children:[s("rect",{height:18,rx:2,width:18,x:3,y:3}),s("path",{d:"M9 3v18"}),s("path",{d:"m16 15-3-3 3-3"})]}),le=o=>O(w,{...o,children:[s("rect",{height:18,rx:2,width:18,x:3,y:3}),s("path",{d:"M9 3v18"}),s("path",{d:"m14 9 3 3-3 3"})]}),V=o=>O(w,{...o,children:[s("path",{d:"M10 11v6"}),s("path",{d:"M14 11v6"}),s("path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}),s("path",{d:"M3 6h18"}),s("path",{d:"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"})]});import{jsx as Pe}from"react/jsx-runtime";var ke={debug:"DBG",error:"ERR",fatal:"FTL",info:"INF",trace:"TRC",warning:"WRN"},ie=({level:o})=>{let t=D(o),l=ke[o]??o.toUpperCase();return Pe("span",{style:{background:t.badge,borderRadius:e.radius.sm,color:e.colors.white,display:"inline-block",fontFamily:e.fontFamily.mono,fontSize:e.fontSize.sm,fontWeight:600,lineHeight:1,minWidth:"28px",padding:`${e.spacing.xs} ${e.spacing.sm}`,textAlign:"center",textTransform:"uppercase"},children:l})};import{jsx as f,jsxs as de}from"react/jsx-runtime";var Re={display:"flex",gap:e.spacing.lg,marginBottom:e.spacing.md},ze={color:e.colors.textMuted,flexShrink:0,fontSize:e.fontSize.md,minWidth:"72px",textAlign:"right"},Ie={fontSize:e.fontSize.base,wordBreak:"break-all"},De={borderTop:`1px solid ${e.colors.border}`,padding:`${e.spacing.lg} ${e.spacing.xl}`},Te={color:e.colors.accent,fontFamily:e.fontFamily.mono},$e={color:e.colors.textSecondary,fontFamily:e.fontFamily.mono},Fe={color:e.colors.textPrimary},Oe={background:"rgba(0,0,0,0.3)",borderRadius:e.radius.md,color:e.colors.textPrimary,fontFamily:e.fontFamily.mono,fontSize:e.fontSize.md,margin:0,maxHeight:"200px",overflow:"auto",padding:e.spacing.lg,whiteSpace:"pre-wrap",wordBreak:"break-all"},T=({label:o,children:t})=>de("div",{style:Re,children:[f("span",{style:ze,children:o}),f("span",{style:Ie,children:t})]}),ce=({record:o})=>{let t=D(o.level),l=Object.keys(o.properties).length>0;return de("div",{"data-testid":"log-detail",style:{...De,background:t.bg},children:[f(T,{label:"Time",children:W(o.timestamp)}),f(T,{label:"Level",children:f("span",{style:{color:t.color,fontWeight:600},children:o.level})}),f(T,{label:"Category",children:f("span",{style:Te,children:o.category.join(".")})}),o.caller?f(T,{label:"Caller",children:f("span",{style:$e,children:o.caller})}):null,f(T,{label:"Message",children:f("span",{style:Fe,children:o.messageText})}),l&&f(T,{label:"Data",children:f("pre",{style:Oe,children:ee(o.properties,2)})})]})};import{jsx as C,jsxs as pe}from"react/jsx-runtime";var Ee={alignItems:"center",border:"none",borderBottom:`1px solid ${e.colors.border}`,cursor:"pointer",display:"flex",gap:e.spacing.lg,padding:`${e.spacing.md} ${e.spacing.xl}`,textAlign:"left",transition:"background 0.1s, filter 0.1s",width:"100%"},We={color:e.colors.textDimmed,flexShrink:0,fontFamily:e.fontFamily.mono,fontSize:e.fontSize.md},Be={color:e.colors.accent,flexShrink:0,fontFamily:e.fontFamily.mono,fontSize:e.fontSize.md,maxWidth:"180px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},Ae={color:e.colors.textPrimary,flex:1,fontSize:e.fontSize.base,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},Ve={color:e.colors.textDimmed,flexShrink:0,fontFamily:e.fontFamily.mono,fontSize:e.fontSize.sm,maxWidth:"200px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},_e={color:e.colors.textDimmed,display:"flex",flexShrink:0,transition:"transform 0.15s"},Ne=({record:o,expanded:t,onToggle:l})=>{let m=D(o.level),a=Me(()=>{l(t?null:o.id)},[t,l,o.id]);return pe("div",{children:[pe("button",{"aria-expanded":t,"data-lt-interactive":"","data-testid":"log-row",onClick:a,style:{...Ee,background:t?m.bg:"transparent"},type:"button",children:[C("span",{style:We,children:W(o.timestamp)}),C(ie,{level:o.level}),C("span",{"data-testid":"log-row-category",style:Be,children:o.category.join(".")}),C("span",{"data-testid":"log-row-message",style:Ae,children:o.messageText}),o.caller?C("span",{style:Ve,children:o.caller}):null,C("span",{style:{..._e,transform:t?"rotate(90deg)":"rotate(0deg)"},children:C(se,{size:12})})]}),t?C(ce,{record:o}):null]})},ge=He(Ne);import{jsx as $}from"react/jsx-runtime";var Ue=28,Xe=10,Ye=40,je={alignItems:"center",color:e.colors.textMuted,display:"flex",flex:1,fontSize:e.fontSize.lg,justifyContent:"center"},qe={flex:1,overflow:"auto",scrollbarColor:`${e.colors.scrollbar} transparent`,scrollbarWidth:"thin"},ue=({records:o,expandedId:t,onToggle:l,autoScroll:m})=>{let a=fe(null),p=fe(!0),y=Ke({count:o.length,estimateSize:()=>Ue,getItemKey:c=>o[c]?.id??c,getScrollElement:()=>a.current,overscan:Xe}),i=o.length,v=o[i-1]?.id;me(()=>{v===void 0||!(m&&p.current)||y.scrollToIndex(i-1,{align:"end"})},[m,v,i,y]),me(()=>{i===0&&(p.current=!0)},[i]);let h=Ge(()=>{let c=a.current;c&&(p.current=c.scrollHeight-c.scrollTop-c.clientHeight<Ye)},[]);if(o.length===0)return $("div",{"data-testid":"log-list-empty",style:je,children:"No logs yet"});let S=y.getVirtualItems();return $("div",{"data-testid":"log-list",onScroll:h,ref:a,style:qe,children:$("div",{style:{height:`${y.getTotalSize()}px`,position:"relative",width:"100%"},children:$("div",{style:{left:0,position:"absolute",top:0,transform:`translateY(${S[0]?.start??0}px)`,width:"100%"},children:S.map(c=>{let P=o[c.index];return $("div",{"data-index":c.index,ref:y.measureElement,children:$(ge,{expanded:t===P.id,onToggle:l,record:P})},c.key)})})})})};import{Combobox as k}from"@base-ui-components/react/combobox";import{Popover as H}from"@base-ui-components/react/popover";import{Debouncer as Je}from"@tanstack/pacer";import{useCallback as q,useEffect as be,useMemo as Qe,useState as Ze}from"react";import{jsx as n,jsxs as d}from"react/jsx-runtime";var ye="logtape-devtools-hover";function eo(){be(()=>{if(document.getElementById(ye))return;let o=document.createElement("style");o.id=ye,o.textContent=`
       [data-lt-interactive]:hover {
         filter: brightness(1.25);
       }
@@ -434,668 +7,14 @@ function useHoverStyles() {
       }
       [data-lt-interactive]:focus-visible,
       [data-lt-input]:focus-visible {
-        outline: 2px solid ${theme.colors.accent};
+        outline: 2px solid ${e.colors.accent};
         outline-offset: 1px;
       }
       [data-lt-clear-btn]:hover {
-        color: ${theme.colors.textPrimary} !important;
+        color: ${e.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,
-  pressed,
-  onToggle
-}) => {
-  const colors = theme.colors.levels[level];
-  const handleClick = useCallback3(() => onToggle(level), [level, onToggle]);
-  return /* @__PURE__ */ jsx6(
-    "button",
-    {
-      "aria-pressed": pressed,
-      "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,
-  onSearchTextChange,
-  totalCount,
-  filteredCount
-}) => {
-  useHoverStyles();
-  const [search, setSearch] = useState("");
-  const debouncedSearch = useMemo(
-    () => new Debouncer(onSearchTextChange, { wait: 200 }),
-    [onSearchTextChange]
-  );
-  useEffect2(() => () => debouncedSearch.cancel(), [debouncedSearch]);
-  const handleSearchChange = useCallback3(
-    (e) => {
-      const { value } = e.target;
-      setSearch(value);
-      debouncedSearch.maybeExecute(value);
-    },
-    [debouncedSearch]
-  );
-  const handleLevelToggle = useCallback3(
-    (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,
-                  pressed: levelFilter.has(level)
-                },
-                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,
-                        {
-                          "aria-label": "Filter by category",
-                          "data-lt-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",
-            {
-              "aria-label": "Search logs",
-              "data-lt-input": "",
-              "data-testid": "search-input",
-              onChange: handleSearchChange,
-              placeholder: "Search\u2026",
-              style: inputStyle,
-              type: "text",
-              value: search
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-
-// 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);
-  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 = useCallback4(() => {
-    setPaused(true);
-    setPausedRecords(store.getSnapshot());
-  }, [store]);
-  const handleResume = useCallback4(() => {
-    setPaused(false);
-    setPausedRecords([]);
-  }, []);
-  const handleClear = useCallback4(() => {
-    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(
-    () => 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: 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
-          }
-        )
+        color: ${e.colors.white} !important;
       }
-    ),
-    /* @__PURE__ */ jsxs5("div", { style: mainStyle, children: [
-      /* @__PURE__ */ jsxs5("div", { style: topBarStyle, children: [
-        /* @__PURE__ */ jsx7(
-          "button",
-          {
-            "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"
-            ] })
-          }
-        ),
-        !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: {
-                ...compactButtonStyle,
-                background: paused ? theme.colors.levels.warning.badge : compactButtonStyle.background,
-                color: paused ? theme.colors.white : compactButtonStyle.color
-              },
-              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: 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
-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/create-logtape-devtools.ts
-function createLogTapeDevtools(options) {
-  const store = options?.store ?? defaultLogStore;
-  return {
-    plugin: createLogTapeDevtoolsPlugin({ ...options?.plugin, store }),
-    sink: createDevtoolsSink({ ...options?.sink, store })
-  };
-}
-export {
-  LOG_LEVELS,
-  createDevtoolsSink,
-  createLogStore,
-  createLogTapeDevtools,
-  createLogTapeDevtoolsPlugin,
-  defaultLogStore
-};
-//# sourceMappingURL=index.mjs.map
+    `,document.head.appendChild(o)},[])}var _={background:e.colors.surfaceHover,border:`1px solid ${e.colors.border}`,borderRadius:e.radius.md,color:e.colors.textPrimary,cursor:"pointer",fontFamily:e.fontFamily.sans,fontSize:e.fontSize.md,padding:`${e.spacing.sm} ${e.spacing.lg}`,transition:"filter 0.1s, background 0.1s, border-color 0.1s",width:"100%"},xe={background:e.colors.surface,border:`1px solid ${e.colors.borderInput}`,borderRadius:e.radius.md,color:e.colors.textPrimary,fontFamily:e.fontFamily.sans,fontSize:e.fontSize.md,outline:"none",padding:`${e.spacing.sm} ${e.spacing.lg}`,transition:"border-color 0.15s",width:"100%"},N={color:e.colors.textMuted,fontSize:"9px",fontWeight:600,letterSpacing:"0.05em",textTransform:"uppercase"},oo=({level:o,active:t,pressed:l,onToggle:m})=>{let a=e.colors.levels[o],p=q(()=>m(o),[o,m]);return n("button",{"aria-pressed":l,"data-lt-interactive":"","data-testid":`level-toggle-${o}`,onClick:p,style:{background:t?a.badge:"transparent",border:`1px solid ${t?a.badge:e.colors.border}`,borderRadius:e.radius.sm,color:t?e.colors.white:a.color,cursor:"pointer",fontFamily:e.fontFamily.mono,fontSize:e.fontSize.sm,fontWeight:600,lineHeight:1,minWidth:"30px",opacity:t?1:.5,padding:"3px 0",textAlign:"center",transition:"all 0.15s"},title:`Filter ${o} logs`,type:"button",children:o.slice(0,3).toUpperCase()})},ve=({paused:o,onPause:t,onResume:l,onClear:m,levelFilter:a,onLevelFilterChange:p,categories:y,categoryFilter:i,onCategoryFilterChange:v,onSearchTextChange:h,totalCount:S,filteredCount:c})=>{eo();let[P,x]=Ze(""),z=Qe(()=>new Je(h,{wait:200}),[h]);be(()=>()=>z.cancel(),[z]);let U=q(r=>{let{value:g}=r.target;x(g),z.maybeExecute(g)},[z]),X=q(r=>{let g=new Set(a);g.has(r)?g.delete(r):g.add(r),p(g)},[a,p]);return d("div",{"data-testid":"toolbar",style:{display:"flex",flexDirection:"column",flexShrink:0,gap:e.spacing.xl,height:"100%",minWidth:"200px",overflow:"auto",padding:`${e.spacing.lg} ${e.spacing.xl}`},children:[d("div",{style:{textAlign:"center"},children:[n("span",{style:{color:e.colors.textPrimary,fontFamily:e.fontFamily.mono,fontSize:e.fontSize.lg,fontWeight:600},children:c===S?`${S}`:`${c} / ${S}`}),n("div",{style:{color:e.colors.textMuted,fontSize:e.fontSize.sm},children:"logs"})]}),d("div",{style:{display:"flex",flexDirection:"column",gap:e.spacing.sm},children:[n("div",{style:N,children:"Actions"}),n("button",{"data-lt-interactive":"",onClick:o?l:t,style:{..._,background:o?e.colors.levels.warning.badge:_.background,color:o?e.colors.white:_.color},title:o?"Resume live updates":"Pause live updates",type:"button",children:d("span",{style:{alignItems:"center",display:"inline-flex",gap:"6px"},children:[o?n(B,{size:12}):n(A,{size:12}),o?"Resume":"Pause"]})}),n("button",{"data-lt-interactive":"",onClick:m,style:_,title:"Clear all logs",type:"button",children:d("span",{style:{alignItems:"center",display:"inline-flex",gap:"6px"},children:[n(V,{size:12}),"Clear"]})})]}),d("div",{style:{display:"flex",flexDirection:"column",gap:e.spacing.sm},children:[d("div",{style:{alignItems:"center",display:"flex",justifyContent:"space-between"},children:[n("div",{style:N,children:"Levels"}),a.size>0&&n("button",{"data-lt-clear-btn":"",onClick:()=>p(new Set),style:{background:"none",border:"none",color:e.colors.textMuted,cursor:"pointer",fontSize:"9px",padding:0,transition:"color 0.1s"},title:"Show all levels",type:"button",children:"clear"})]}),n("div",{style:{display:"grid",gap:e.spacing.xs,gridTemplateColumns:"repeat(3, 1fr)"},children:Y.map(r=>n(oo,{active:a.size===0||a.has(r),level:r,onToggle:X,pressed:a.has(r)},r))})]}),d("div",{style:{display:"flex",flexDirection:"column",gap:e.spacing.sm},children:[d("div",{style:{alignItems:"center",display:"flex",justifyContent:"space-between"},children:[n("div",{style:N,children:"Category"}),i.length>0&&n("button",{"data-lt-clear-btn":"",onClick:()=>v([]),style:{background:"none",border:"none",color:e.colors.textMuted,cursor:"pointer",fontSize:"9px",padding:0,transition:"color 0.1s"},title:"Clear all categories",type:"button",children:"clear"})]}),y.length===0?d(H.Root,{children:[n(H.Trigger,{delay:300,nativeButton:!1,openOnHover:!0,render:n("div",{"data-testid":"category-input",style:{...xe,color:e.colors.textMuted,cursor:"not-allowed",opacity:.5},children:"Category\u2026"})}),n(H.Portal,{children:n(H.Positioner,{sideOffset:6,style:{zIndex:999999},children:n(H.Popup,{style:{background:e.colors.surface,border:`1px solid ${e.colors.border}`,borderRadius:e.radius.md,boxShadow:"0 8px 24px rgba(0,0,0,0.5)",fontSize:e.fontSize.sm,maxWidth:"200px",padding:`${e.spacing.sm} ${e.spacing.lg}`},children:n("p",{style:{color:e.colors.textMuted,lineHeight:1.4,margin:0},children:"Waiting for logs to populate available categories."})})})})]}):d(k.Root,{items:y,multiple:!0,onValueChange:v,value:i,children:[d("div",{style:{background:e.colors.surface,border:`1px solid ${e.colors.borderInput}`,borderRadius:e.radius.md,display:"flex",flexWrap:"wrap",gap:"3px",minHeight:"28px",padding:"3px",transition:"border-color 0.15s"},children:[i.map(r=>d("span",{style:{alignItems:"center",background:"rgba(99, 102, 241, 0.15)",border:"1px solid rgba(99, 102, 241, 0.3)",borderRadius:e.radius.sm,color:e.colors.accentHover,display:"inline-flex",fontFamily:e.fontFamily.mono,fontSize:"9px",gap:"3px",lineHeight:1,padding:"1px 4px"},children:[r,n("button",{"data-lt-chip-remove":"",onClick:()=>v(i.filter(g=>g!==r)),style:{background:"none",border:"none",color:e.colors.textMuted,cursor:"pointer",fontSize:"7px",lineHeight:1,opacity:.7,padding:0,transition:"color 0.1s, opacity 0.1s"},title:`Remove ${r}`,type:"button",children:n(ne,{size:7})})]},r)),n(k.Input,{"aria-label":"Filter by category","data-lt-input":"","data-testid":"category-input",placeholder:i.length===0?"Category\u2026":"",style:{background:"transparent",border:"none",color:e.colors.textPrimary,flex:1,fontFamily:e.fontFamily.sans,fontSize:e.fontSize.md,minWidth:"40px",outline:"none",padding:`${e.spacing.xs} ${e.spacing.sm}`}})]}),n(k.Portal,{children:n(k.Positioner,{style:{zIndex:999999},children:n(k.Popup,{style:{background:e.colors.surface,border:`1px solid ${e.colors.border}`,borderRadius:e.radius.md,boxShadow:"0 8px 24px rgba(0,0,0,0.5)",maxHeight:"200px",overflow:"auto",padding:e.spacing.xs},children:n(k.List,{children:(r,g)=>d(k.Item,{index:g,style:{alignItems:"center",borderRadius:e.radius.sm,color:e.colors.textPrimary,cursor:"pointer",display:"flex",fontFamily:e.fontFamily.mono,fontSize:e.fontSize.md,gap:e.spacing.sm,justifyContent:"space-between",padding:`${e.spacing.sm} ${e.spacing.lg}`,transition:"background 0.1s"},value:r,children:[n("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:String(r)}),n(k.ItemIndicator,{children:n(re,{color:e.colors.accent,size:14})})]},String(r))})})})})]})]}),d("div",{style:{display:"flex",flexDirection:"column",gap:e.spacing.sm},children:[n("div",{style:N,children:"Search"}),n("input",{"aria-label":"Search logs","data-lt-input":"","data-testid":"search-input",onChange:U,placeholder:"Search\u2026",style:xe,type:"text",value:P})]})]})};import{Fragment as po,jsx as u,jsxs as M}from"react/jsx-runtime";var no={background:e.colors.background,color:e.colors.textPrimary,display:"flex",flexDirection:"row",fontFamily:e.fontFamily.sans,height:"100%",overflow:"hidden"},ro={flexShrink:0,overflow:"hidden",transition:"width 0.2s ease, opacity 0.15s ease"},so={display:"flex",flex:1,flexDirection:"column",overflow:"hidden"},ao={alignItems:"center",borderBottom:`1px solid ${e.colors.border}`,display:"flex",flexShrink:0,gap:e.spacing.lg,padding:`${e.spacing.sm} ${e.spacing.lg}`},lo={background:"none",border:"none",color:e.colors.textMuted,cursor:"pointer",fontFamily:e.fontFamily.sans,fontSize:e.fontSize.md,padding:`${e.spacing.xs} ${e.spacing.sm}`,transition:"color 0.1s"},io={alignItems:"center",display:"inline-flex",gap:"6px"},co={color:e.colors.textMuted,fontFamily:e.fontFamily.mono,fontSize:e.fontSize.sm},G={background:e.colors.surfaceHover,border:`1px solid ${e.colors.border}`,borderRadius:e.radius.sm,color:e.colors.textPrimary,cursor:"pointer",fontFamily:e.fontFamily.sans,fontSize:e.fontSize.sm,padding:`${e.spacing.xs} ${e.spacing.sm}`,transition:"filter 0.1s"};function Se(o){return o.categoryKey??o.category.join(".")}var Le=({store:o})=>{let[t,l]=R(!1),[m,a]=R([]),[p,y]=R(new Set),[i,v]=R([]),[h,S]=R(""),[c,P]=R(null),[x,z]=R(!0),U=K(b=>t?()=>{}:o.subscribe(b),[o,t]),X=to(U,o.getSnapshot,o.getSnapshot),r=K(()=>{a(o.getSnapshot()),l(!0)},[o]),g=K(()=>{l(!1),a([])},[]),Q=K(()=>{o.clear(),a([]),P(null)},[o]),L=t?m:X,we=he(()=>{let b=new Set;for(let I of L)b.add(Se(I));return Array.from(b).sort()},[L]),E=he(()=>{let b=h?h.toLowerCase():"";return L.filter(I=>{if(p.size>0&&!p.has(I.level))return!1;let Z=Se(I);return!(i.length>0&&!i.includes(Z)||b&&!((I.messageSearchText??I.messageText.toLowerCase()).includes(b)||Z.toLowerCase().includes(b)))})},[L,p,i,h]);return M("div",{style:no,children:[u("div",{style:{...ro,borderRight:x?`1px solid ${e.colors.border}`:"none",opacity:x?1:0,width:x?"200px":"0px"},children:u(ve,{categories:we,categoryFilter:i,filteredCount:E.length,levelFilter:p,onCategoryFilterChange:v,onClear:Q,onLevelFilterChange:y,onPause:r,onResume:g,onSearchTextChange:S,paused:t,totalCount:L.length})}),M("div",{style:so,children:[M("div",{style:ao,children:[u("button",{"aria-expanded":x,"data-lt-clear-btn":"",onClick:()=>z(b=>!b),style:lo,title:x?"Collapse sidebar":"Expand sidebar",type:"button",children:M("span",{style:io,children:[x?u(ae,{size:14}):u(le,{size:14}),x?"Hide controls":"Show controls"]})}),!x&&M(po,{children:[u("span",{style:co,children:E.length===L.length?`${L.length} logs`:`${E.length} / ${L.length} logs`}),u("button",{"data-lt-interactive":"",onClick:t?g:r,style:{...G,background:t?e.colors.levels.warning.badge:G.background,color:t?e.colors.white:G.color},title:t?"Resume":"Pause",type:"button",children:t?u(B,{size:12}):u(A,{size:12})}),u("button",{"data-lt-interactive":"",onClick:Q,style:G,title:"Clear",type:"button",children:u(V,{size:12})})]})]}),u(ue,{autoScroll:!t,expandedId:c,onToggle:P,records:E})]})]})};import{jsx as go}from"react/jsx-runtime";var J=o=>({defaultOpen:o?.defaultOpen??!0,id:"logtape-devtools-plugin",name:o?.name??"LogTape",render:go(Le,{store:o?.store??F})});function mo(o){let t=o?.store??F;return{plugin:J({...o?.plugin,store:t}),sink:j({...o?.sink,store:t})}}export{Y as LOG_LEVELS,j as createDevtoolsSink,Ce as createLogStore,mo as createLogTapeDevtools,J as createLogTapeDevtoolsPlugin,F as defaultLogStore};