@flanksource/clicky-ui 0.3.46 → 0.3.47

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":";;;;;;;;;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,WAAW,QACfA,2BAAAA,IAACI,KAAAA,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,WAAU;AAExF,QAAM,UACJH,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;AAAA,IACDH,2BAAAA,IAAC,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM;AAAA,EAAA,GACpC;AAGF,MAAI,UAAU;AAGZ,UAAM,gBACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACDF,2BAAAA,IAAC,QAAA,EAAK,WAAU,YAAY,UAAA,OAAM;AAAA,MACjC,UAAU,UACTA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,mBAAgB;AAAA,UAEf,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAEF,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,eACH;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;;;;"}

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":"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"}
+{"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

package/dist/data/Properties.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.cjs","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import {\n  Fragment,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport { PropertiesContext } from \"./properties-context\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables a child area spanning both columns, with nested labels indented. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?:\n    | string\n    | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(12rem, 20rem) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(7rem, 12rem) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(8rem, 14rem) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const parent = useContext(PropertiesContext);\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const activeDensity = parent?.density ?? densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n  const columns =\n    parent?.columns ?? gridTemplateColumns ?? styles.gridTemplateColumns;\n  const depth = parent?.depth ?? 0;\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20\",\n        parent && \"col-span-full rounded-none border-0 bg-transparent\",\n        className,\n      )}\n      style={{ gridTemplateColumns: parent ? \"subgrid\" : columns }}\n    >\n      {showDensityMenu && !parent ? (\n        <div className=\"col-span-full flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu\n              density={activeDensity}\n              onChange={updateDensity}\n            />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\"\n            ? labelIcon(item.key, item.value, item)\n            : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel =\n          typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <Fragment key={item.key}>\n            <div\n              className={cn(\n                \"col-span-full grid min-w-0 grid-cols-subgrid gap-density-3\",\n                styles.row,\n                rowClassName,\n              )}\n            >\n              <dt\n                aria-label={ariaLabel}\n                className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n                style={{ paddingInlineStart: depth * 16 }}\n              >\n                <div className=\"flex min-w-0 items-center gap-density-1\">\n                  {iconName ? (\n                    <Icon name={iconName} className=\"text-xs shrink-0\" />\n                  ) : null}\n                  <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n                </div>\n                {item.subtitle ? (\n                  <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                    {item.subtitle}\n                  </div>\n                ) : null}\n              </dt>\n              <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n                <div className=\"flex min-w-0 items-start gap-density-1\">\n                  <ActionList\n                    actions={prefixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                  <div\n                    className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}\n                  >\n                    {renderValue\n                      ? renderValue(item.key, item.value, item)\n                      : defaultRenderValue(item.value)}\n                  </div>\n                  <ActionList\n                    actions={suffixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                </div>\n              </dd>\n            </div>\n            {item.expandable && item.expanded && item.renderChildren ? (\n              <div className=\"col-span-full grid grid-cols-subgrid\">\n                <dt className=\"sr-only\">{ariaLabel} properties</dt>\n                <dd className=\"col-span-full grid min-w-0 grid-cols-subgrid\">\n                  <PropertiesContext.Provider\n                    value={{\n                      depth: depth + 1,\n                      columns,\n                      density: activeDensity,\n                    }}\n                  >\n                    {item.renderChildren()}\n                  </PropertiesContext.Provider>\n                </dd>\n              </div>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\"\n          ? { name: action.icon }\n          : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":["UiRows","UiListFlat","UiListDashes","useContext","PropertiesContext","useState","useEffect","jsx","jsxs","cn","formatPropertyLabel","Fragment","Icon","DropdownMenu","IconButton","UiDotsVertical","UiCheck"],"mappings":"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"}
+{"version":3,"file":"Properties.cjs","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import {\n  Fragment,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport { PropertiesContext } from \"./properties-context\";\nimport { PropertyValue } from \"./PropertyValue\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Optional display type; structured values otherwise render as JSON. */\n  type?: \"text\" | \"json\" | \"bytes\" | \"duration\" | \"number\" | \"boolean\" | \"date\";\n  /** Unit for numeric values, such as ms, s, bytes, or percent. */\n  unit?: string;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables a child area spanning both columns, with nested labels indented. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?:\n    | string\n    | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(12rem, 20rem) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(7rem, 12rem) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(8rem, 14rem) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const parent = useContext(PropertiesContext);\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const activeDensity = parent?.density ?? densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n  const columns =\n    parent?.columns ?? gridTemplateColumns ?? styles.gridTemplateColumns;\n  const depth = parent?.depth ?? 0;\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20\",\n        parent && \"col-span-full rounded-none border-0 bg-transparent\",\n        className,\n      )}\n      style={{ gridTemplateColumns: parent ? \"subgrid\" : columns }}\n    >\n      {showDensityMenu && !parent ? (\n        <div className=\"col-span-full flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu\n              density={activeDensity}\n              onChange={updateDensity}\n            />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\"\n            ? labelIcon(item.key, item.value, item)\n            : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel =\n          typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <Fragment key={item.key}>\n            <div\n              className={cn(\n                \"col-span-full grid min-w-0 grid-cols-subgrid gap-density-3\",\n                styles.row,\n                rowClassName,\n              )}\n            >\n              <dt\n                aria-label={ariaLabel}\n                className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n                style={{ paddingInlineStart: depth * 16 }}\n              >\n                <div className=\"flex min-w-0 items-center gap-density-1\">\n                  {iconName ? (\n                    <Icon name={iconName} className=\"text-xs shrink-0\" />\n                  ) : null}\n                  <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n                </div>\n                {item.subtitle ? (\n                  <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                    {item.subtitle}\n                  </div>\n                ) : null}\n              </dt>\n              <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n                <div className=\"flex min-w-0 items-start gap-density-1\">\n                  <ActionList\n                    actions={prefixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                  <div\n                    className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}\n                  >\n                    {renderValue\n                      ? renderValue(item.key, item.value, item)\n                      : <PropertyValue item={item} density={activeDensity} />}\n                  </div>\n                  <ActionList\n                    actions={suffixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                </div>\n              </dd>\n            </div>\n            {item.expandable && item.expanded && item.renderChildren ? (\n              <div className=\"col-span-full grid grid-cols-subgrid\">\n                <dt className=\"sr-only\">{ariaLabel} properties</dt>\n                <dd className=\"col-span-full grid min-w-0 grid-cols-subgrid\">\n                  <PropertiesContext.Provider\n                    value={{\n                      depth: depth + 1,\n                      columns,\n                      density: activeDensity,\n                    }}\n                  >\n                    {item.renderChildren()}\n                  </PropertiesContext.Provider>\n                </dd>\n              </div>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\"\n          ? { name: action.icon }\n          : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n"],"names":["UiRows","UiListFlat","UiListDashes","useContext","PropertiesContext","useState","useEffect","jsx","jsxs","cn","formatPropertyLabel","Fragment","Icon","PropertyValue","DropdownMenu","IconButton","UiDotsVertical","UiCheck"],"mappings":"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"}

package/dist/data/Properties.d.ts

@@ -19,6 +19,10 @@ export type PropertiesItem<V = unknown> = {
     key: string;
     /** Property value passed to renderers and actions. */
     value: V;
+    /** Optional display type; structured values otherwise render as JSON. */
+    type?: "text" | "json" | "bytes" | "duration" | "number" | "boolean" | "date";
+    /** Unit for numeric values, such as ms, s, bytes, or percent. */
+    unit?: string;
     /** Secondary text shown below the label. */
     subtitle?: ReactNode;
     /** Hide this row without removing it from the item array. */