@flanksource/clicky-ui 0.3.46 → 0.3.48

package/dist/data/CodeLine.cjs

@@ -2,20 +2,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const useTheme = require("../hooks/use-theme.cjs");
 const codeHighlight = require("./code-highlight.cjs");
 const HighlightedTokens = require("./HighlightedTokens.cjs");
 function CodeLine({ code, language, className }) {
   const [tokens, setTokens] = react.useState(void 0);
+  const theme = useTheme.useResolvedTheme();
   react.useEffect(() => {
     let cancelled = false;
     setTokens(void 0);
-    codeHighlight.highlightToLines(code, { lang: language }).then((out) => {
+    codeHighlight.highlightToLines(code, { lang: language, theme: theme === "dark" ? "github-dark" : "github-light" }).then((out) => {
       if (!cancelled) setTokens(out == null ? void 0 : out[0]);
     });
     return () => {
       cancelled = true;
     };
-  }, [code, language]);
+  }, [code, language, theme]);
   return /* @__PURE__ */ jsxRuntime.jsx("code", { className: ["whitespace-pre font-mono", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedTokens.HighlightedTokens, { tokens, content: code }) });
 }
 exports.CodeLine = CodeLine;

package/dist/data/CodeLine.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeLine.cjs","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":["useState","useEffect","highlightToLines","jsx","HighlightedTokens"],"mappings":";;;;;;AAaO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAsC,MAAS;AAE3EC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnBC,kBAAAA,iBAAiB,MAAM,EAAE,MAAM,SAAA,CAAU,EAAE,KAAK,CAAC,QAAQ;AACvD,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,wCACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAAC,2BAAAA,IAACC,kBAAAA,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;;"}
+{"version":3,"file":"CodeLine.cjs","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useResolvedTheme } from \"../hooks/use-theme\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n  const theme = useResolvedTheme();\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language, theme: theme === \"dark\" ? \"github-dark\" : \"github-light\" }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, theme]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":["useState","useResolvedTheme","useEffect","highlightToLines","jsx","HighlightedTokens"],"mappings":";;;;;;;AAcO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAsC,MAAS;AAC3E,QAAM,QAAQC,SAAAA,iBAAA;AAEdC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnBC,kBAAAA,iBAAiB,MAAM,EAAE,MAAM,UAAU,OAAO,UAAU,SAAS,gBAAgB,eAAA,CAAgB,EAAE,KAAK,CAAC,QAAQ;AACjH,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,wCACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAAC,2BAAAA,IAACC,kBAAAA,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;;"}

package/dist/data/CodeLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeLine.d.ts","sourceRoot":"","sources":["../../src/data/CodeLine.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,+BAmBpE"}
+{"version":3,"file":"CodeLine.d.ts","sourceRoot":"","sources":["../../src/data/CodeLine.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,+BAoBpE"}

package/dist/data/CodeLine.js

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { useResolvedTheme } from "../hooks/use-theme.js";
 import { highlightToLines } from "./code-highlight.js";
 import { HighlightedTokens } from "./HighlightedTokens.js";
 function CodeLine({ code, language, className }) {
   const [tokens, setTokens] = useState(void 0);
+  const theme = useResolvedTheme();
   useEffect(() => {
     let cancelled = false;
     setTokens(void 0);
-    highlightToLines(code, { lang: language }).then((out) => {
+    highlightToLines(code, { lang: language, theme: theme === "dark" ? "github-dark" : "github-light" }).then((out) => {
       if (!cancelled) setTokens(out == null ? void 0 : out[0]);
     });
     return () => {
       cancelled = true;
     };
-  }, [code, language]);
+  }, [code, language, theme]);
   return /* @__PURE__ */ jsx("code", { className: ["whitespace-pre font-mono", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx(HighlightedTokens, { tokens, content: code }) });
 }
 export {

package/dist/data/CodeLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeLine.js","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":[],"mappings":";;;;AAaO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsC,MAAS;AAE3E,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnB,qBAAiB,MAAM,EAAE,MAAM,SAAA,CAAU,EAAE,KAAK,CAAC,QAAQ;AACvD,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,6BACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAA,oBAAC,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;"}
+{"version":3,"file":"CodeLine.js","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useResolvedTheme } from \"../hooks/use-theme\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n  const theme = useResolvedTheme();\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language, theme: theme === \"dark\" ? \"github-dark\" : \"github-light\" }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, theme]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":[],"mappings":";;;;;AAcO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsC,MAAS;AAC3E,QAAM,QAAQ,iBAAA;AAEd,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnB,qBAAiB,MAAM,EAAE,MAAM,UAAU,OAAO,UAAU,SAAS,gBAAgB,eAAA,CAAgB,EAAE,KAAK,CAAC,QAAQ;AACjH,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,6BACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAA,oBAAC,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;"}

package/dist/data/FilterPill.cjs

@@ -112,6 +112,7 @@ function FilterPill({
   className
 }) {
   const triState = !!onModeChange;
+  const iconNode = icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" });
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -123,10 +124,22 @@ function FilterPill({
         children: count
       }
     ),
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" }),
+    iconNode,
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
   ] });
   if (triState) {
+    const optionContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      iconNode,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+      count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "shrink-0 text-[10px] tabular-nums text-muted-foreground",
+          "data-pill-count": "",
+          children: count
+        }
+      )
+    ] });
     const control = /* @__PURE__ */ jsxRuntime.jsx(
       TristateSwitch,
       {
@@ -136,7 +149,7 @@ function FilterPill({
         ...title ? { ariaLabel: title } : {}
       }
     );
-    const labelContent = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: content });
+    const labelContent = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: optionContent });
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("inline-flex items-center gap-1.5 select-none", className), title, children: togglePosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       labelContent,
       control

package/dist/data/FilterPill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.cjs","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","Fragment","cn","Icon","UiClose","UiCheck","UiAdd","UiRemove"],"mappings":";;;;;;;;;AA2CA,SAAS,YAAY,MAA0B;AAC7C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EAAA;AAEb;AAIA,MAAM,iBAA2C;AAAA,EAC/C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAKG;AACD,QAAM,OACJ,SAAS,YAAY,YAAY,SAAS,YAAY,YAAY;AACpE,QAAM,KACJ,SAAS,YAAY,kBAAkB,SAAS,YAAY,oBAAoB;AAQlF,QAAM,SAAS,CAAC,MAAkB,eAChCA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,wBAAsB;AAAA,MACtB,SAAS,CAAC,UAAU;AAClB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA;AAId,QAAM,UACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,IAAA,OAAO,SAAS,YAAY,YAAY,WAAW,SAAS;AAAA,IAC5D,OAAO,iBAAiB,IAAI,GAAG,SAAS;AAAA,IACxC,OAAO,SAAS,YAAY,YAAY,WAAW,SAAS;AAAA,IAC7DF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAWG,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA,UAIT;AAAA,UACA,eAAe,IAAI;AAAA,QAAA;AAAA,QAGpB,mBAAS,aACRH,2BAAAA;AAAAA,UAACI,KAAAA;AAAAA,UAAA;AAAA,YACC,MAAM,SAAS,YAAYC,QAAAA,UAAUC,QAAAA;AAAAA,YACrC,WAAWH,MAAAA;AAAAA,cACT;AAAA,cACA,SAAS,aAAa;AAAA,cACtB,SAAS,aAAa;AAAA,YAAA;AAAA,UACxB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ,GACF;AAGF,QAAM,eAAeA,MAAAA;AAAAA,IACnB;AAAA,IACA;AAAA,EAAA;AAKF,MAAI,CAAC,aAAa;AAChB,0CACG,QAAA,EAAK,eAAW,MAAC,WAAW,cAC1B,UAAA,SACH;AAAA,EAEJ;AAEA,SACEH,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS,CAAC,UAAU;AAGlB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAS,iBAAiB,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,WAAW;AAAA,MAEV,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,QAAM,UACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,IAAA,UAAU,UACTF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG,MAAAA;AAAAA,UACT;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,QACCH,2BAAAA,IAACI,KAAAA,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,UAAA,CAAU;AAAA,IAExFJ,2BAAAA,IAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,EAAA,GACpC;AAGF,MAAI,UAAU;AACZ,UAAM,UACJA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACC,GAAI,QAAQ,EAAE,WAAW,UAAU,CAAA;AAAA,MAAC;AAAA,IAAA;AAGzC,UAAM,eACJA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oEACb,UAAA,SACH;AAGF,WACEA,2BAAAA,IAAC,QAAA,EAAK,WAAWG,MAAAA,GAAG,gDAAgD,SAAS,GAAG,OAC7E,UAAA,mBAAmB,UAClBF,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,IAEAD,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,EAAA,CAEJ;AAAA,EAEJ;AAEA,SACED,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAWE,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAH,+BAAC,gBAAa,MAAY;AAAA,QACzB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,aAAa,EAAE,QAA8B;AACpD,MAAI,SAAS,UAAW,QAAOA,+BAACI,KAAAA,QAAK,MAAMG,MAAAA,OAAO,WAAU,WAAU;AACtE,MAAI,SAAS,UAAW,QAAOP,+BAACI,KAAAA,QAAK,MAAMI,SAAAA,UAAU,WAAU,WAAU;AACzE,MAAI,SAAS,SAAU,QAAOR,2BAAAA,IAAC,QAAA,EAAK,WAAU,mCAAkC;AAChF,SAAOA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAAA,CAA6C;AACtE;AAEA,SAAS,iBAAiB,MAA8B;AACtD,MAAI,SAAS,UAAW,QAAO;AAC/B,MAAI,SAAS,UAAW,QAAO;AAC/B,SAAO;AACT;AASO,SAAS,gBAAgB,EAAE,UAAU,aAAmC;AAC7E,wCAAQ,OAAA,EAAI,WAAWG,MAAAA,GAAG,uCAAuC,SAAS,GAAI,UAAS;AACzF;AAEO,SAAS,kBAAkB;AAChC,wCACG,QAAA,EAAK,eAAW,MAAC,WAAU,sBAAqB,UAAA,KAEjD;AAEJ;;;;"}
+{"version":3,"file":"FilterPill.cjs","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count: a badge before the label, or muted text after it on a tri-state option. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const iconNode = icon && (\n    <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n  );\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {iconNode}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    // In an option list the count is a facet of the label, not a badge: it\n    // trails the label in muted text so the labels stay aligned.\n    const optionContent = (\n      <>\n        {iconNode}\n        <span className=\"truncate\">{label}</span>\n        {count !== undefined && (\n          <span\n            className=\"shrink-0 text-[10px] tabular-nums text-muted-foreground\"\n            data-pill-count=\"\"\n          >\n            {count}\n          </span>\n        )}\n      </>\n    );\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {optionContent}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","Fragment","cn","Icon","UiClose","UiCheck","UiAdd","UiRemove"],"mappings":"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"}

package/dist/data/FilterPill.d.ts

@@ -6,7 +6,7 @@ export type FilterPillProps = {
     mode?: FilterMode;
     /** Primary visible label. */
     label: ReactNode;
-    /** Optional count badge rendered before the label. */
+    /** Optional count: a badge before the label, or muted text after it on a tri-state option. */
     count?: number;
     /** Iconify name or imported icon component. */
     icon?: string | StaticIconComponent;

package/dist/data/FilterPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0HF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,WAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BAoEjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,+BAE5E;AAED,wBAAgB,eAAe,gCAM9B"}
+{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0HF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,WAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BAqFjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,+BAE5E;AAED,wBAAgB,eAAe,gCAM9B"}

package/dist/data/FilterPill.js

@@ -110,6 +110,7 @@ function FilterPill({
   className
 }) {
   const triState = !!onModeChange;
+  const iconNode = icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" });
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     count !== void 0 && /* @__PURE__ */ jsx(
       "span",
@@ -121,10 +122,22 @@ function FilterPill({
         children: count
       }
     ),
-    icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-sm" }),
+    iconNode,
     /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
   ] });
   if (triState) {
+    const optionContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      iconNode,
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+      count !== void 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "shrink-0 text-[10px] tabular-nums text-muted-foreground",
+          "data-pill-count": "",
+          children: count
+        }
+      )
+    ] });
     const control = /* @__PURE__ */ jsx(
       TristateSwitch,
       {
@@ -134,7 +147,7 @@ function FilterPill({
         ...title ? { ariaLabel: title } : {}
       }
     );
-    const labelContent = /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: content });
+    const labelContent = /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground", children: optionContent });
     return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-1.5 select-none", className), title, children: togglePosition === "right" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       labelContent,
       control

package/dist/data/FilterPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA2CA,SAAS,YAAY,MAA0B;AAC7C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EAAA;AAEb;AAIA,MAAM,iBAA2C;AAAA,EAC/C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAKG;AACD,QAAM,OACJ,SAAS,YAAY,YAAY,SAAS,YAAY,YAAY;AACpE,QAAM,KACJ,SAAS,YAAY,kBAAkB,SAAS,YAAY,oBAAoB;AAQlF,QAAM,SAAS,CAAC,MAAkB,eAChC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,wBAAsB;AAAA,MACtB,SAAS,CAAC,UAAU;AAClB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA;AAId,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,OAAO,SAAS,YAAY,YAAY,WAAW,SAAS;AAAA,IAC5D,OAAO,iBAAiB,IAAI,GAAG,SAAS;AAAA,IACxC,OAAO,SAAS,YAAY,YAAY,WAAW,SAAS;AAAA,IAC7D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA,UAIT;AAAA,UACA,eAAe,IAAI;AAAA,QAAA;AAAA,QAGpB,mBAAS,aACR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,SAAS,YAAY,UAAU;AAAA,YACrC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,aAAa;AAAA,cACtB,SAAS,aAAa;AAAA,YAAA;AAAA,UACxB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ,GACF;AAGF,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EAAA;AAKF,MAAI,CAAC,aAAa;AAChB,+BACG,QAAA,EAAK,eAAW,MAAC,WAAW,cAC1B,UAAA,SACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS,CAAC,UAAU;AAGlB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAS,iBAAiB,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,WAAW;AAAA,MAEV,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,UAAU,UACT;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,QACC,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,UAAA,CAAU;AAAA,IAExF,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,EAAA,GACpC;AAGF,MAAI,UAAU;AACZ,UAAM,UACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACC,GAAI,QAAQ,EAAE,WAAW,UAAU,CAAA;AAAA,MAAC;AAAA,IAAA;AAGzC,UAAM,eACJ,oBAAC,QAAA,EAAK,WAAU,oEACb,UAAA,SACH;AAGF,WACE,oBAAC,QAAA,EAAK,WAAW,GAAG,gDAAgD,SAAS,GAAG,OAC7E,UAAA,mBAAmB,UAClB,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,IAEA,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACH,EAAA,CAEJ;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,gBAAa,MAAY;AAAA,QACzB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,aAAa,EAAE,QAA8B;AACpD,MAAI,SAAS,UAAW,QAAO,oBAAC,QAAK,MAAM,OAAO,WAAU,WAAU;AACtE,MAAI,SAAS,UAAW,QAAO,oBAAC,QAAK,MAAM,UAAU,WAAU,WAAU;AACzE,MAAI,SAAS,SAAU,QAAO,oBAAC,QAAA,EAAK,WAAU,mCAAkC;AAChF,SAAO,oBAAC,QAAA,EAAK,WAAU,6CAAA,CAA6C;AACtE;AAEA,SAAS,iBAAiB,MAA8B;AACtD,MAAI,SAAS,UAAW,QAAO;AAC/B,MAAI,SAAS,UAAW,QAAO;AAC/B,SAAO;AACT;AASO,SAAS,gBAAgB,EAAE,UAAU,aAAmC;AAC7E,6BAAQ,OAAA,EAAI,WAAW,GAAG,uCAAuC,SAAS,GAAI,UAAS;AACzF;AAEO,SAAS,kBAAkB;AAChC,6BACG,QAAA,EAAK,eAAW,MAAC,WAAU,sBAAqB,UAAA,KAEjD;AAEJ;"}
+{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count: a badge before the label, or muted text after it on a tri-state option. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const iconNode = icon && (\n    <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n  );\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {iconNode}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    // In an option list the count is a facet of the label, not a badge: it\n    // trails the label in muted text so the labels stay aligned.\n    const optionContent = (\n      <>\n        {iconNode}\n        <span className=\"truncate\">{label}</span>\n        {count !== undefined && (\n          <span\n            className=\"shrink-0 text-[10px] tabular-nums text-muted-foreground\"\n            data-pill-count=\"\"\n          >\n            {count}\n          </span>\n        )}\n      </>\n    );\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {optionContent}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/LogViewer.cjs

@@ -3,29 +3,48 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
+const AnsiHtml = require("./AnsiHtml.cjs");
+const VARIANTS = {
+  muted: {
+    bg: "bg-muted",
+    border: "border-border",
+    text: "text-muted-foreground"
+  },
+  terminal: {
+    bg: "bg-zinc-950",
+    border: "border-zinc-800",
+    text: "text-zinc-100"
+  }
+};
 function LogViewer({
   logs,
   collapsedLines = 5,
+  maxHeight,
   maxExpandedVh = 70,
-  bgClass = "bg-muted",
-  borderClass = "border-border",
+  variant = "muted",
+  bgClass,
+  borderClass,
   className
 }) {
   const [expanded, setExpanded] = react.useState(false);
   const lines = react.useMemo(() => logs.split("\n"), [logs]);
   const hasMore = lines.length > collapsedLines;
-  const maxHeight = expanded ? `${maxExpandedVh}vh` : `${collapsedLines * 1.4}em`;
+  const tone = VARIANTS[variant];
+  const collapsedHeight = maxHeight ?? `${collapsedLines * 1.4}em`;
+  const shown = expanded || maxHeight ? logs : lines.slice(0, collapsedLines).join("\n");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "pre",
       {
         className: utils.cn(
-          "mt-0.5 text-[11px] text-muted-foreground rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200",
-          bgClass,
-          borderClass
+          "mt-0.5 text-[11px] rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200",
+          tone.text,
+          bgClass ?? tone.bg,
+          borderClass ?? tone.border
         ),
-        style: { maxHeight },
-        children: expanded ? logs : lines.slice(0, collapsedLines).join("\n")
+        style: { maxHeight: expanded ? `${maxExpandedVh}vh` : collapsedHeight },
+        "data-log-variant": variant,
+        children: /* @__PURE__ */ jsxRuntime.jsx(AnsiHtml.AnsiHtml, { as: "span", text: shown })
       }
     ),
     hasMore && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/data/LogViewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LogViewer.cjs","sources":["../../src/data/LogViewer.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type LogViewerProps = {\n  /** Raw log text separated by newlines. */\n  logs: string;\n  /** Number of lines shown before the viewer is expanded. */\n  collapsedLines?: number;\n  /** Maximum expanded height in viewport-height units. */\n  maxExpandedVh?: number;\n  /** Background utility class for the log container. */\n  bgClass?: string;\n  /** Border utility class for the log container. */\n  borderClass?: string;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n};\n\nexport function LogViewer({\n  logs,\n  collapsedLines = 5,\n  maxExpandedVh = 70,\n  bgClass = \"bg-muted\",\n  borderClass = \"border-border\",\n  className,\n}: LogViewerProps) {\n  const [expanded, setExpanded] = useState(false);\n  const lines = useMemo(() => logs.split(\"\\n\"), [logs]);\n  const hasMore = lines.length > collapsedLines;\n\n  const maxHeight = expanded ? `${maxExpandedVh}vh` : `${collapsedLines * 1.4}em`;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <pre\n        className={cn(\n          \"mt-0.5 text-[11px] text-muted-foreground rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200\",\n          bgClass,\n          borderClass,\n        )}\n        style={{ maxHeight }}\n      >\n        {expanded ? logs : lines.slice(0, collapsedLines).join(\"\\n\")}\n      </pre>\n      {hasMore && (\n        <button\n          type=\"button\"\n          className={cn(\n            \"text-[10px] mt-0.5\",\n            expanded ? \"text-muted-foreground\" : \"text-primary hover:opacity-80\",\n          )}\n          onClick={() => setExpanded((e) => !e)}\n        >\n          {expanded ? `▲ Collapse (${lines.length} lines)` : `▼ Show more (${lines.length} lines)`}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useMemo","cn","jsx"],"mappings":";;;;;AAkBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAAS,KAAK;AAC9C,QAAM,QAAQC,MAAAA,QAAQ,MAAM,KAAK,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC;AACpD,QAAM,UAAU,MAAM,SAAS;AAE/B,QAAM,YAAY,WAAW,GAAG,aAAa,OAAO,GAAG,iBAAiB,GAAG;AAE3E,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACtC,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,UAAA;AAAA,QAER,UAAA,WAAW,OAAO,MAAM,MAAM,GAAG,cAAc,EAAE,KAAK,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE5D,WACCC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA,WAAW,0BAA0B;AAAA,QAAA;AAAA,QAEvC,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,QAEnC,qBAAW,eAAe,MAAM,MAAM,YAAY,gBAAgB,MAAM,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACjF,GAEJ;AAEJ;;"}
+{"version":3,"file":"LogViewer.cjs","sources":["../../src/data/LogViewer.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { AnsiHtml } from \"./AnsiHtml\";\n\nexport type LogViewerProps = {\n  /** Raw log text separated by newlines; ANSI SGR escapes are styled. */\n  logs: string;\n  /** Number of lines shown before the viewer is expanded. Ignored when `maxHeight` is set. */\n  collapsedLines?: number;\n  /**\n   * Collapsed height as a CSS length (e.g. `25cqh` for a quarter of the\n   * enclosing size container). Every line is rendered and the block scrolls,\n   * instead of cutting the text at `collapsedLines`.\n   */\n  maxHeight?: string;\n  /** Maximum expanded height in viewport-height units. */\n  maxExpandedVh?: number;\n  /** `terminal` renders light text on black, like the console it came from. */\n  variant?: \"muted\" | \"terminal\";\n  /** Background utility class for the log container. */\n  bgClass?: string;\n  /** Border utility class for the log container. */\n  borderClass?: string;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n};\n\nconst VARIANTS = {\n  muted: {\n    bg: \"bg-muted\",\n    border: \"border-border\",\n    text: \"text-muted-foreground\",\n  },\n  terminal: {\n    bg: \"bg-zinc-950\",\n    border: \"border-zinc-800\",\n    text: \"text-zinc-100\",\n  },\n};\n\nexport function LogViewer({\n  logs,\n  collapsedLines = 5,\n  maxHeight,\n  maxExpandedVh = 70,\n  variant = \"muted\",\n  bgClass,\n  borderClass,\n  className,\n}: LogViewerProps) {\n  const [expanded, setExpanded] = useState(false);\n  const lines = useMemo(() => logs.split(\"\\n\"), [logs]);\n  const hasMore = lines.length > collapsedLines;\n  const tone = VARIANTS[variant];\n\n  const collapsedHeight = maxHeight ?? `${collapsedLines * 1.4}em`;\n  const shown = expanded || maxHeight ? logs : lines.slice(0, collapsedLines).join(\"\\n\");\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <pre\n        className={cn(\n          \"mt-0.5 text-[11px] rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200\",\n          tone.text,\n          bgClass ?? tone.bg,\n          borderClass ?? tone.border,\n        )}\n        style={{ maxHeight: expanded ? `${maxExpandedVh}vh` : collapsedHeight }}\n        data-log-variant={variant}\n      >\n        <AnsiHtml as=\"span\" text={shown} />\n      </pre>\n      {hasMore && (\n        <button\n          type=\"button\"\n          className={cn(\n            \"text-[10px] mt-0.5\",\n            expanded ? \"text-muted-foreground\" : \"text-primary hover:opacity-80\",\n          )}\n          onClick={() => setExpanded((e) => !e)}\n        >\n          {expanded ? `▲ Collapse (${lines.length} lines)` : `▼ Show more (${lines.length} lines)`}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useMemo","cn","jsx","AnsiHtml"],"mappings":";;;;;;AA2BA,MAAM,WAAW;AAAA,EACf,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAEV;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAAS,KAAK;AAC9C,QAAM,QAAQC,MAAAA,QAAQ,MAAM,KAAK,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC;AACpD,QAAM,UAAU,MAAM,SAAS;AAC/B,QAAM,OAAO,SAAS,OAAO;AAE7B,QAAM,kBAAkB,aAAa,GAAG,iBAAiB,GAAG;AAC5D,QAAM,QAAQ,YAAY,YAAY,OAAO,MAAM,MAAM,GAAG,cAAc,EAAE,KAAK,IAAI;AAErF,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACtC,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA,KAAK;AAAA,UACL,WAAW,KAAK;AAAA,UAChB,eAAe,KAAK;AAAA,QAAA;AAAA,QAEtB,OAAO,EAAE,WAAW,WAAW,GAAG,aAAa,OAAO,gBAAA;AAAA,QACtD,oBAAkB;AAAA,QAElB,UAAAC,2BAAAA,IAACC,mBAAA,EAAS,IAAG,QAAO,MAAM,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAElC,WACCD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA,WAAW,0BAA0B;AAAA,QAAA;AAAA,QAEvC,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,QAEnC,qBAAW,eAAe,MAAM,MAAM,YAAY,gBAAgB,MAAM,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACjF,GAEJ;AAEJ;;"}

package/dist/data/LogViewer.d.ts

@@ -1,10 +1,18 @@
 export type LogViewerProps = {
-    /** Raw log text separated by newlines. */
+    /** Raw log text separated by newlines; ANSI SGR escapes are styled. */
     logs: string;
-    /** Number of lines shown before the viewer is expanded. */
+    /** Number of lines shown before the viewer is expanded. Ignored when `maxHeight` is set. */
     collapsedLines?: number;
+    /**
+     * Collapsed height as a CSS length (e.g. `25cqh` for a quarter of the
+     * enclosing size container). Every line is rendered and the block scrolls,
+     * instead of cutting the text at `collapsedLines`.
+     */
+    maxHeight?: string;
     /** Maximum expanded height in viewport-height units. */
     maxExpandedVh?: number;
+    /** `terminal` renders light text on black, like the console it came from. */
+    variant?: "muted" | "terminal";
     /** Background utility class for the log container. */
     bgClass?: string;
     /** Border utility class for the log container. */
@@ -12,5 +20,5 @@ export type LogViewerProps = {
     /** Classes applied to the root wrapper. */
     className?: string;
 };
-export declare function LogViewer({ logs, collapsedLines, maxExpandedVh, bgClass, borderClass, className, }: LogViewerProps): import("react").JSX.Element;
+export declare function LogViewer({ logs, collapsedLines, maxHeight, maxExpandedVh, variant, bgClass, borderClass, className, }: LogViewerProps): import("react").JSX.Element;
 //# sourceMappingURL=LogViewer.d.ts.map

package/dist/data/LogViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogViewer.d.ts","sourceRoot":"","sources":["../../src/data/LogViewer.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,cAAkB,EAClB,aAAkB,EAClB,OAAoB,EACpB,WAA6B,EAC7B,SAAS,GACV,EAAE,cAAc,+BAiChB"}
+{"version":3,"file":"LogViewer.d.ts","sourceRoot":"","sources":["../../src/data/LogViewer.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IAC3B,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAeF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,cAAkB,EAClB,SAAS,EACT,aAAkB,EAClB,OAAiB,EACjB,OAAO,EACP,WAAW,EACX,SAAS,GACV,EAAE,cAAc,+BAqChB"}

package/dist/data/LogViewer.js

@@ -1,29 +1,48 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { cn } from "../lib/utils.js";
+import { AnsiHtml } from "./AnsiHtml.js";
+const VARIANTS = {
+  muted: {
+    bg: "bg-muted",
+    border: "border-border",
+    text: "text-muted-foreground"
+  },
+  terminal: {
+    bg: "bg-zinc-950",
+    border: "border-zinc-800",
+    text: "text-zinc-100"
+  }
+};
 function LogViewer({
   logs,
   collapsedLines = 5,
+  maxHeight,
   maxExpandedVh = 70,
-  bgClass = "bg-muted",
-  borderClass = "border-border",
+  variant = "muted",
+  bgClass,
+  borderClass,
   className
 }) {
   const [expanded, setExpanded] = useState(false);
   const lines = useMemo(() => logs.split("\n"), [logs]);
   const hasMore = lines.length > collapsedLines;
-  const maxHeight = expanded ? `${maxExpandedVh}vh` : `${collapsedLines * 1.4}em`;
+  const tone = VARIANTS[variant];
+  const collapsedHeight = maxHeight ?? `${collapsedLines * 1.4}em`;
+  const shown = expanded || maxHeight ? logs : lines.slice(0, collapsedLines).join("\n");
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx(
       "pre",
       {
         className: cn(
-          "mt-0.5 text-[11px] text-muted-foreground rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200",
-          bgClass,
-          borderClass
+          "mt-0.5 text-[11px] rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200",
+          tone.text,
+          bgClass ?? tone.bg,
+          borderClass ?? tone.border
         ),
-        style: { maxHeight },
-        children: expanded ? logs : lines.slice(0, collapsedLines).join("\n")
+        style: { maxHeight: expanded ? `${maxExpandedVh}vh` : collapsedHeight },
+        "data-log-variant": variant,
+        children: /* @__PURE__ */ jsx(AnsiHtml, { as: "span", text: shown })
       }
     ),
     hasMore && /* @__PURE__ */ jsx(

package/dist/data/LogViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogViewer.js","sources":["../../src/data/LogViewer.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type LogViewerProps = {\n  /** Raw log text separated by newlines. */\n  logs: string;\n  /** Number of lines shown before the viewer is expanded. */\n  collapsedLines?: number;\n  /** Maximum expanded height in viewport-height units. */\n  maxExpandedVh?: number;\n  /** Background utility class for the log container. */\n  bgClass?: string;\n  /** Border utility class for the log container. */\n  borderClass?: string;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n};\n\nexport function LogViewer({\n  logs,\n  collapsedLines = 5,\n  maxExpandedVh = 70,\n  bgClass = \"bg-muted\",\n  borderClass = \"border-border\",\n  className,\n}: LogViewerProps) {\n  const [expanded, setExpanded] = useState(false);\n  const lines = useMemo(() => logs.split(\"\\n\"), [logs]);\n  const hasMore = lines.length > collapsedLines;\n\n  const maxHeight = expanded ? `${maxExpandedVh}vh` : `${collapsedLines * 1.4}em`;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <pre\n        className={cn(\n          \"mt-0.5 text-[11px] text-muted-foreground rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200\",\n          bgClass,\n          borderClass,\n        )}\n        style={{ maxHeight }}\n      >\n        {expanded ? logs : lines.slice(0, collapsedLines).join(\"\\n\")}\n      </pre>\n      {hasMore && (\n        <button\n          type=\"button\"\n          className={cn(\n            \"text-[10px] mt-0.5\",\n            expanded ? \"text-muted-foreground\" : \"text-primary hover:opacity-80\",\n          )}\n          onClick={() => setExpanded((e) => !e)}\n        >\n          {expanded ? `▲ Collapse (${lines.length} lines)` : `▼ Show more (${lines.length} lines)`}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAkBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,QAAQ,QAAQ,MAAM,KAAK,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC;AACpD,QAAM,UAAU,MAAM,SAAS;AAE/B,QAAM,YAAY,WAAW,GAAG,aAAa,OAAO,GAAG,iBAAiB,GAAG;AAE3E,8BACG,OAAA,EAAI,WAAW,GAAG,YAAY,SAAS,GACtC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,UAAA;AAAA,QAER,UAAA,WAAW,OAAO,MAAM,MAAM,GAAG,cAAc,EAAE,KAAK,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE5D,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,WAAW,0BAA0B;AAAA,QAAA;AAAA,QAEvC,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,QAEnC,qBAAW,eAAe,MAAM,MAAM,YAAY,gBAAgB,MAAM,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACjF,GAEJ;AAEJ;"}
+{"version":3,"file":"LogViewer.js","sources":["../../src/data/LogViewer.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { AnsiHtml } from \"./AnsiHtml\";\n\nexport type LogViewerProps = {\n  /** Raw log text separated by newlines; ANSI SGR escapes are styled. */\n  logs: string;\n  /** Number of lines shown before the viewer is expanded. Ignored when `maxHeight` is set. */\n  collapsedLines?: number;\n  /**\n   * Collapsed height as a CSS length (e.g. `25cqh` for a quarter of the\n   * enclosing size container). Every line is rendered and the block scrolls,\n   * instead of cutting the text at `collapsedLines`.\n   */\n  maxHeight?: string;\n  /** Maximum expanded height in viewport-height units. */\n  maxExpandedVh?: number;\n  /** `terminal` renders light text on black, like the console it came from. */\n  variant?: \"muted\" | \"terminal\";\n  /** Background utility class for the log container. */\n  bgClass?: string;\n  /** Border utility class for the log container. */\n  borderClass?: string;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n};\n\nconst VARIANTS = {\n  muted: {\n    bg: \"bg-muted\",\n    border: \"border-border\",\n    text: \"text-muted-foreground\",\n  },\n  terminal: {\n    bg: \"bg-zinc-950\",\n    border: \"border-zinc-800\",\n    text: \"text-zinc-100\",\n  },\n};\n\nexport function LogViewer({\n  logs,\n  collapsedLines = 5,\n  maxHeight,\n  maxExpandedVh = 70,\n  variant = \"muted\",\n  bgClass,\n  borderClass,\n  className,\n}: LogViewerProps) {\n  const [expanded, setExpanded] = useState(false);\n  const lines = useMemo(() => logs.split(\"\\n\"), [logs]);\n  const hasMore = lines.length > collapsedLines;\n  const tone = VARIANTS[variant];\n\n  const collapsedHeight = maxHeight ?? `${collapsedLines * 1.4}em`;\n  const shown = expanded || maxHeight ? logs : lines.slice(0, collapsedLines).join(\"\\n\");\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <pre\n        className={cn(\n          \"mt-0.5 text-[11px] rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200\",\n          tone.text,\n          bgClass ?? tone.bg,\n          borderClass ?? tone.border,\n        )}\n        style={{ maxHeight: expanded ? `${maxExpandedVh}vh` : collapsedHeight }}\n        data-log-variant={variant}\n      >\n        <AnsiHtml as=\"span\" text={shown} />\n      </pre>\n      {hasMore && (\n        <button\n          type=\"button\"\n          className={cn(\n            \"text-[10px] mt-0.5\",\n            expanded ? \"text-muted-foreground\" : \"text-primary hover:opacity-80\",\n          )}\n          onClick={() => setExpanded((e) => !e)}\n        >\n          {expanded ? `▲ Collapse (${lines.length} lines)` : `▼ Show more (${lines.length} lines)`}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AA2BA,MAAM,WAAW;AAAA,EACf,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAEV;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,QAAQ,QAAQ,MAAM,KAAK,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC;AACpD,QAAM,UAAU,MAAM,SAAS;AAC/B,QAAM,OAAO,SAAS,OAAO;AAE7B,QAAM,kBAAkB,aAAa,GAAG,iBAAiB,GAAG;AAC5D,QAAM,QAAQ,YAAY,YAAY,OAAO,MAAM,MAAM,GAAG,cAAc,EAAE,KAAK,IAAI;AAErF,8BACG,OAAA,EAAI,WAAW,GAAG,YAAY,SAAS,GACtC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,KAAK;AAAA,UACL,WAAW,KAAK;AAAA,UAChB,eAAe,KAAK;AAAA,QAAA;AAAA,QAEtB,OAAO,EAAE,WAAW,WAAW,GAAG,aAAa,OAAO,gBAAA;AAAA,QACtD,oBAAkB;AAAA,QAElB,UAAA,oBAAC,UAAA,EAAS,IAAG,QAAO,MAAM,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAElC,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,WAAW,0BAA0B;AAAA,QAAA;AAAA,QAEvC,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,QAEnC,qBAAW,eAAe,MAAM,MAAM,YAAY,gBAAgB,MAAM,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACjF,GAEJ;AAEJ;"}

package/dist/data/Properties.cjs

@@ -8,6 +8,7 @@ const DropdownMenu = require("../overlay/DropdownMenu.cjs");
 const Icon = require("./Icon.cjs");
 const propertiesUtils = require("./properties-utils.cjs");
 const propertiesContext = require("./properties-context.cjs");
+const PropertyValue = require("./PropertyValue.cjs");
 const UiRows = require("../icons/components/UiRows.cjs");
 const UiListFlat = require("../icons/components/UiListFlat.cjs");
 const UiListDashes = require("../icons/components/UiListDashes.cjs");
@@ -133,7 +134,7 @@ function Properties({
                       "div",
                       {
                         className: utils.cn("min-w-0 max-w-full flex-1", styles.value),
-                        children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value)
+                        children: renderValue ? renderValue(item.key, item.value, item) : /* @__PURE__ */ jsxRuntime.jsx(PropertyValue.PropertyValue, { item, density: activeDensity })
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -299,19 +300,5 @@ function PropertiesActionButton({
     }
   );
 }
-function defaultRenderValue(value) {
-  if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono italic text-muted-foreground", children: "null" });
-  }
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: String(value) });
-  }
-  try {
-    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed", children: JSON.stringify(value, null, 2) });
-  } catch {
-    return String(value);
-  }
-}
 exports.Properties = Properties;
 //# sourceMappingURL=Properties.cjs.map