@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/components/SegmentedControl.cjs

@@ -6,13 +6,15 @@ const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const SIZE_CLASSES = {
   sm: "text-xs px-density-2 py-density-1 gap-1",
-  md: "text-sm px-density-3 py-1.5 gap-1.5"
+  md: "h-full px-control-px text-sm gap-1.5",
+  lg: "min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm"
 };
 function SegmentedControl({
   value,
   options,
   onChange,
   size = "md",
+  wrap = false,
   className,
   "aria-label": ariaLabel
 }) {
@@ -36,7 +38,13 @@ function SegmentedControl({
     {
       role: "radiogroup",
       "aria-label": ariaLabel,
-      className: utils.cn("inline-flex items-center rounded-md bg-muted p-0.5", className),
+      className: utils.cn(
+        "inline-flex items-center rounded-md bg-muted p-0.5",
+        size === "md" && "h-control-h",
+        size === "lg" && "gap-density-2 bg-transparent p-0",
+        wrap && "flex-wrap",
+        className
+      ),
       children: options.map((option, index) => {
         const active = option.id === value;
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -62,20 +70,47 @@ function SegmentedControl({
               }
             },
             className: utils.cn(
-              "inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors",
+              "inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               "disabled:cursor-not-allowed disabled:opacity-50",
+              size === "lg" && "rounded-lg text-left",
+              option.description ? "whitespace-normal" : "whitespace-nowrap",
               SIZE_CLASSES[size],
-              active ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground"
             ),
             children: [
               option.icon && /* @__PURE__ */ jsxRuntime.jsx(
                 Icon.Icon,
                 {
-                  ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon }
+                  ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon },
+                  className: utils.cn(
+                    size === "lg" ? "size-4 shrink-0" : "size-3.5 shrink-0",
+                    size === "lg" && (active ? "text-primary" : "text-muted-foreground")
+                  )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: utils.cn(
+                    "min-w-0",
+                    size === "lg" && "flex flex-col items-start text-left leading-tight"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label }),
+                    option.description && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: utils.cn(
+                          "mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug",
+                          active ? "text-muted-foreground" : "text-muted-foreground/80"
+                        ),
+                        children: option.description
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           },
           option.id

package/dist/components/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser. */\n  size?: SegmentedSize;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"text-sm px-density-3 py-1.5 gap-1.5\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\"inline-flex items-center rounded-md bg-muted p-0.5\", className)}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              SIZE_CLASSES[size],\n              active\n                ? \"bg-card text-foreground shadow-sm\"\n                : \"text-muted-foreground hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\" ? { name: option.icon } : { icon: option.icon })}\n              />\n            )}\n            <span>{option.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useRef","jsx","cn","jsxs","Icon"],"mappings":";;;;;;AAkCA,MAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AACN;AASO,SAAS,iBAA4C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAChB,GAA6B;AAC3B,QAAM,UAAUA,MAAAA,OAAqC,EAAE;AAEvD,QAAM,OAAO,CAAC,MAAc,QAAgB;;AAC1C,UAAM,IAAI,QAAQ;AAClB,QAAI,IAAI;AACR,aAAS,OAAO,GAAG,OAAO,GAAG,QAAQ;AACnC,WAAK,IAAI,MAAM,KAAK;AACpB,YAAM,MAAM,QAAQ,CAAC;AACrB,UAAI,OAAO,CAAC,IAAI,UAAU;AACxB,iBAAS,IAAI,EAAE;AACf,sBAAQ,QAAQ,CAAC,MAAjB,mBAAoB;AACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAWC,MAAAA,GAAG,sDAAsD,SAAS;AAAA,MAE5E,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,SAAS,OAAO,OAAO;AAC7B,eACEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,OAAO;AACX,sBAAQ,QAAQ,KAAK,IAAI;AAAA,YAC3B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,UAAU,SAAS,IAAI;AAAA,YACvB,SAAS,MAAM,CAAC,OAAO,YAAY,SAAS,OAAO,EAAE;AAAA,YACrD,WAAW,CAAC,MAAM;AAChB,kBAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;AACnD,kBAAE,eAAA;AACF,qBAAK,OAAO,CAAC;AAAA,cACf,WAAW,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AACvD,kBAAE,eAAA;AACF,qBAAK,OAAO,EAAE;AAAA,cAChB;AAAA,YACF;AAAA,YACA,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,aAAa,IAAI;AAAA,cACjB,SACI,sCACA;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAA,OAAO,QACND,2BAAAA;AAAAA,gBAACG,KAAAA;AAAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,OAAO,SAAS,WAAW,EAAE,MAAM,OAAO,KAAA,IAAS,EAAE,MAAM,OAAO,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAGvFH,2BAAAA,IAAC,QAAA,EAAM,UAAA,OAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAnCf,OAAO;AAAA,QAAA;AAAA,MAsClB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"SegmentedControl.cjs","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : size === \"lg\"\n                  ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                  : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useRef","jsx","cn","jsxs","Icon"],"mappings":"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"}

package/dist/components/SegmentedControl.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { StaticIconComponent } from '../data/Icon';
-export type SegmentedSize = "sm" | "md";
+export type SegmentedSize = "sm" | "md" | "lg";
 export type SegmentedOption<T extends string = string> = {
     /** Stable value emitted on selection. */
     id: T;
@@ -8,6 +8,8 @@ export type SegmentedOption<T extends string = string> = {
     label: ReactNode;
     /** Optional leading icon (imported `Ui*` component or runtime name). */
     icon?: string | StaticIconComponent;
+    /** Optional secondary line, used by larger card-like segmented controls. */
+    description?: ReactNode;
     /** Native title attribute. */
     title?: string;
     /** Disable this segment. */
@@ -20,8 +22,10 @@ export type SegmentedControlProps<T extends string = string> = {
     options: SegmentedOption<T>[];
     /** Called with the newly selected id. */
     onChange: (id: T) => void;
-    /** Control size. `md` (default) matches form controls; `sm` is denser. */
+    /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */
     size?: SegmentedSize;
+    /** Allows segments to wrap instead of overflowing horizontally. */
+    wrap?: boolean;
     /** Accessible group label. */
     "aria-label"?: string;
     /** Classes applied to the track. */
@@ -34,5 +38,5 @@ export type SegmentedControlProps<T extends string = string> = {
  * dark-mode and density. Use for small, flat choice sets — reach for `Select`
  * when the option count grows.
  */
-export declare function SegmentedControl<T extends string = string>({ value, options, onChange, size, className, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<T extends string = string>({ value, options, onChange, size, wrap, className, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,yCAAyC;IACzC,EAAE,EAAE,CAAC,CAAC;IACN,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,oCAAoC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,yDAAyD;IACzD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAOF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAoE1B"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,yCAAyC;IACzC,EAAE,EAAE,CAAC,CAAC;IACN,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,oCAAoC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,yDAAyD;IACzD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,gGAAgG;IAChG,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAW,EACX,IAAY,EACZ,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CA2G1B"}

package/dist/components/SegmentedControl.js

@@ -4,13 +4,15 @@ import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 const SIZE_CLASSES = {
   sm: "text-xs px-density-2 py-density-1 gap-1",
-  md: "text-sm px-density-3 py-1.5 gap-1.5"
+  md: "h-full px-control-px text-sm gap-1.5",
+  lg: "min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm"
 };
 function SegmentedControl({
   value,
   options,
   onChange,
   size = "md",
+  wrap = false,
   className,
   "aria-label": ariaLabel
 }) {
@@ -34,7 +36,13 @@ function SegmentedControl({
     {
       role: "radiogroup",
       "aria-label": ariaLabel,
-      className: cn("inline-flex items-center rounded-md bg-muted p-0.5", className),
+      className: cn(
+        "inline-flex items-center rounded-md bg-muted p-0.5",
+        size === "md" && "h-control-h",
+        size === "lg" && "gap-density-2 bg-transparent p-0",
+        wrap && "flex-wrap",
+        className
+      ),
       children: options.map((option, index) => {
         const active = option.id === value;
         return /* @__PURE__ */ jsxs(
@@ -60,20 +68,47 @@ function SegmentedControl({
               }
             },
             className: cn(
-              "inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors",
+              "inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               "disabled:cursor-not-allowed disabled:opacity-50",
+              size === "lg" && "rounded-lg text-left",
+              option.description ? "whitespace-normal" : "whitespace-nowrap",
               SIZE_CLASSES[size],
-              active ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground"
             ),
             children: [
               option.icon && /* @__PURE__ */ jsx(
                 Icon,
                 {
-                  ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon }
+                  ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon },
+                  className: cn(
+                    size === "lg" ? "size-4 shrink-0" : "size-3.5 shrink-0",
+                    size === "lg" && (active ? "text-primary" : "text-muted-foreground")
+                  )
                 }
               ),
-              /* @__PURE__ */ jsx("span", { children: option.label })
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0",
+                    size === "lg" && "flex flex-col items-start text-left leading-tight"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label }),
+                    option.description && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug",
+                          active ? "text-muted-foreground" : "text-muted-foreground/80"
+                        ),
+                        children: option.description
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           },
           option.id

package/dist/components/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser. */\n  size?: SegmentedSize;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"text-sm px-density-3 py-1.5 gap-1.5\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\"inline-flex items-center rounded-md bg-muted p-0.5\", className)}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              SIZE_CLASSES[size],\n              active\n                ? \"bg-card text-foreground shadow-sm\"\n                : \"text-muted-foreground hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\" ? { name: option.icon } : { icon: option.icon })}\n              />\n            )}\n            <span>{option.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkCA,MAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AACN;AASO,SAAS,iBAA4C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAChB,GAA6B;AAC3B,QAAM,UAAU,OAAqC,EAAE;AAEvD,QAAM,OAAO,CAAC,MAAc,QAAgB;;AAC1C,UAAM,IAAI,QAAQ;AAClB,QAAI,IAAI;AACR,aAAS,OAAO,GAAG,OAAO,GAAG,QAAQ;AACnC,WAAK,IAAI,MAAM,KAAK;AACpB,YAAM,MAAM,QAAQ,CAAC;AACrB,UAAI,OAAO,CAAC,IAAI,UAAU;AACxB,iBAAS,IAAI,EAAE;AACf,sBAAQ,QAAQ,CAAC,MAAjB,mBAAoB;AACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,GAAG,sDAAsD,SAAS;AAAA,MAE5E,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,SAAS,OAAO,OAAO;AAC7B,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,OAAO;AACX,sBAAQ,QAAQ,KAAK,IAAI;AAAA,YAC3B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,UAAU,SAAS,IAAI;AAAA,YACvB,SAAS,MAAM,CAAC,OAAO,YAAY,SAAS,OAAO,EAAE;AAAA,YACrD,WAAW,CAAC,MAAM;AAChB,kBAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;AACnD,kBAAE,eAAA;AACF,qBAAK,OAAO,CAAC;AAAA,cACf,WAAW,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AACvD,kBAAE,eAAA;AACF,qBAAK,OAAO,EAAE;AAAA,cAChB;AAAA,YACF;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,aAAa,IAAI;AAAA,cACjB,SACI,sCACA;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAA,OAAO,QACN;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,OAAO,SAAS,WAAW,EAAE,MAAM,OAAO,KAAA,IAAS,EAAE,MAAM,OAAO,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAGvF,oBAAC,QAAA,EAAM,UAAA,OAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAnCf,OAAO;AAAA,QAAA;AAAA,MAsClB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : size === \"lg\"\n                  ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                  : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/filter-bar-context.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const FILTER_INPUT_DEBOUNCE_MS = 500;
+const FilterBarContext = react.createContext({
+  autoSubmit: true
+});
+exports.FILTER_INPUT_DEBOUNCE_MS = FILTER_INPUT_DEBOUNCE_MS;
+exports.FilterBarContext = FilterBarContext;
+//# sourceMappingURL=filter-bar-context.cjs.map

package/dist/components/filter-bar-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-context.cjs","sources":["../../src/components/filter-bar-context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const FILTER_INPUT_DEBOUNCE_MS = 500;\n\n// When `autoSubmit` is false, debounced fields forward their draft value\n// immediately (no timer) so the consumer can accumulate state locally and\n// fire one request when Apply is clicked. When true (default) fields debounce\n// upstream, matching the live-filter behaviour used in trace/log UIs.\nexport const FilterBarContext = createContext<{ autoSubmit: boolean }>({\n  autoSubmit: true,\n});\n"],"names":["createContext"],"mappings":";;;AAEO,MAAM,2BAA2B;AAMjC,MAAM,mBAAmBA,MAAAA,cAAuC;AAAA,EACrE,YAAY;AACd,CAAC;;;"}

package/dist/components/filter-bar-context.d.ts

@@ -0,0 +1,5 @@
+export declare const FILTER_INPUT_DEBOUNCE_MS = 500;
+export declare const FilterBarContext: import('react').Context<{
+    autoSubmit: boolean;
+}>;
+//# sourceMappingURL=filter-bar-context.d.ts.map

package/dist/components/filter-bar-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-context.d.ts","sourceRoot":"","sources":["../../src/components/filter-bar-context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAM5C,eAAO,MAAM,gBAAgB;gBAA+B,OAAO;EAEjE,CAAC"}

package/dist/components/filter-bar-context.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+const FILTER_INPUT_DEBOUNCE_MS = 500;
+const FilterBarContext = createContext({
+  autoSubmit: true
+});
+export {
+  FILTER_INPUT_DEBOUNCE_MS,
+  FilterBarContext
+};
+//# sourceMappingURL=filter-bar-context.js.map

package/dist/components/filter-bar-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-context.js","sources":["../../src/components/filter-bar-context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const FILTER_INPUT_DEBOUNCE_MS = 500;\n\n// When `autoSubmit` is false, debounced fields forward their draft value\n// immediately (no timer) so the consumer can accumulate state locally and\n// fire one request when Apply is clicked. When true (default) fields debounce\n// upstream, matching the live-filter behaviour used in trace/log UIs.\nexport const FilterBarContext = createContext<{ autoSubmit: boolean }>({\n  autoSubmit: true,\n});\n"],"names":[],"mappings":";AAEO,MAAM,2BAA2B;AAMjC,MAAM,mBAAmB,cAAuC;AAAA,EACrE,YAAY;AACd,CAAC;"}

package/dist/components/filter-bar-field-utils.cjs

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Icon = require("../data/Icon.cjs");
+const filterBarContext = require("./filter-bar-context.cjs");
+function mergeMultiSelectOptions(head, extra) {
+  if (extra.length === 0) return head;
+  const seen = new Set(head.map((o) => o.value));
+  const merged = [...head];
+  for (const option of extra) {
+    if (!seen.has(option.value)) {
+      seen.add(option.value);
+      merged.push(option);
+    }
+  }
+  return merged;
+}
+function multiSelectOptionText(option) {
+  const label = typeof option.label === "string" ? option.label : "";
+  return [option.value, label, option.title ?? ""].filter(Boolean).join(" ");
+}
+function summarizeMultiFilter(label, value) {
+  const includeCount = Object.values(value).filter((mode) => mode === "include").length;
+  const excludeCount = Object.values(value).filter((mode) => mode === "exclude").length;
+  if (includeCount === 0 && excludeCount === 0) {
+    return label;
+  }
+  const counts = [
+    includeCount > 0 ? `+${includeCount}` : null,
+    excludeCount > 0 ? `-${excludeCount}` : null
+  ].filter(Boolean);
+  return `${label} ${counts.join(" ")}`;
+}
+function useDebouncedMultiDraft(value, onChange) {
+  const { autoSubmit } = react.useContext(filterBarContext.FilterBarContext);
+  const [draft, setDraft] = react.useState(value);
+  const latestOnChange = react.useRef(onChange);
+  const latestValue = react.useRef(value);
+  const valueKey = multiFilterValueKey(value);
+  react.useEffect(() => {
+    latestOnChange.current = onChange;
+  }, [onChange]);
+  react.useEffect(() => {
+    if (!sameMultiFilterValue(latestValue.current, value)) {
+      latestValue.current = value;
+      setDraft(value);
+      return;
+    }
+    latestValue.current = value;
+  }, [valueKey, value]);
+  react.useEffect(() => {
+    if (sameMultiFilterValue(draft, value)) return;
+    if (!autoSubmit) {
+      latestOnChange.current(draft);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      latestOnChange.current(draft);
+    }, filterBarContext.FILTER_INPUT_DEBOUNCE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [autoSubmit, draft, valueKey]);
+  return [draft, setDraft];
+}
+function multiFilterValueKey(value) {
+  return Object.keys(value).sort().map((key) => `${key}:${value[key]}`).join("\0");
+}
+function sameMultiFilterValue(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function updateMultiFilterValue(current, optionValue, nextMode) {
+  const next = { ...current };
+  if (nextMode === "neutral") {
+    delete next[optionValue];
+    return next;
+  }
+  if (nextMode === "include" || nextMode === "exclude") {
+    next[optionValue] = nextMode;
+  }
+  return next;
+}
+function nextFilterMode(mode) {
+  if (mode === "include") return "exclude";
+  if (mode === "exclude") return "neutral";
+  return "include";
+}
+function sizedIcon(icon, px) {
+  if (!react.isValidElement(icon)) return icon;
+  const el = icon;
+  return react.cloneElement(el, {
+    style: { width: `${px}px`, height: `${px}px`, ...el.props.style }
+  });
+}
+function comboboxLabelProps(filter) {
+  if (filter.icon == null) return { label: filter.label };
+  return {
+    label: /* @__PURE__ */ jsxRuntime.jsx("span", { title: filter.label, className: "inline-flex items-center text-[10px]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: sizedIcon(filter.icon, 10), className: "normal-case" }) }),
+    ariaLabel: filter.label
+  };
+}
+function lookupFieldWidthClass(grow) {
+  return grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0";
+}
+exports.comboboxLabelProps = comboboxLabelProps;
+exports.lookupFieldWidthClass = lookupFieldWidthClass;
+exports.mergeMultiSelectOptions = mergeMultiSelectOptions;
+exports.multiSelectOptionText = multiSelectOptionText;
+exports.nextFilterMode = nextFilterMode;
+exports.sizedIcon = sizedIcon;
+exports.summarizeMultiFilter = summarizeMultiFilter;
+exports.updateMultiFilterValue = updateMultiFilterValue;
+exports.useDebouncedMultiDraft = useDebouncedMultiDraft;
+//# sourceMappingURL=filter-bar-field-utils.cjs.map

package/dist/components/filter-bar-field-utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-field-utils.cjs","sources":["../../src/components/filter-bar-field-utils.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport type { FilterMode } from \"../data/FilterPill\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { FILTER_INPUT_DEBOUNCE_MS, FilterBarContext } from \"./filter-bar-context\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type FilterBarMultiFilterMode = Extract<FilterMode, \"include\" | \"exclude\">;\n\n// mergeMultiSelectOptions concatenates two option lists, deduping by value with\n// the first list (the head) taking precedence on ordering and label.\nexport function mergeMultiSelectOptions(\n  head: MultiSelectOption[],\n  extra: MultiSelectOption[],\n): MultiSelectOption[] {\n  if (extra.length === 0) return head;\n  const seen = new Set(head.map((o) => o.value));\n  const merged = [...head];\n  for (const option of extra) {\n    if (!seen.has(option.value)) {\n      seen.add(option.value);\n      merged.push(option);\n    }\n  }\n  return merged;\n}\n\nexport function multiSelectOptionText(option: MultiSelectOption) {\n  const label = typeof option.label === \"string\" ? option.label : \"\";\n  return [option.value, label, option.title ?? \"\"].filter(Boolean).join(\" \");\n}\n\nexport function summarizeMultiFilter(\n  label: string,\n  value: Record<string, FilterBarMultiFilterMode>,\n): string {\n  const includeCount = Object.values(value).filter((mode) => mode === \"include\").length;\n  const excludeCount = Object.values(value).filter((mode) => mode === \"exclude\").length;\n\n  if (includeCount === 0 && excludeCount === 0) {\n    return label;\n  }\n\n  const counts = [\n    includeCount > 0 ? `+${includeCount}` : null,\n    excludeCount > 0 ? `-${excludeCount}` : null,\n  ].filter(Boolean);\n\n  return `${label} ${counts.join(\" \")}`;\n}\n\nexport function useDebouncedMultiDraft(\n  value: Record<string, FilterBarMultiFilterMode>,\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void,\n) {\n  const { autoSubmit } = useContext(FilterBarContext);\n  const [draft, setDraft] = useState(value);\n  const latestOnChange = useRef(onChange);\n  const latestValue = useRef(value);\n  const valueKey = multiFilterValueKey(value);\n\n  useEffect(() => {\n    latestOnChange.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    if (!sameMultiFilterValue(latestValue.current, value)) {\n      latestValue.current = value;\n      setDraft(value);\n      return;\n    }\n    latestValue.current = value;\n  }, [valueKey, value]);\n\n  useEffect(() => {\n    if (sameMultiFilterValue(draft, value)) return;\n\n    if (!autoSubmit) {\n      latestOnChange.current(draft);\n      return;\n    }\n\n    const timeoutId = window.setTimeout(() => {\n      latestOnChange.current(draft);\n    }, FILTER_INPUT_DEBOUNCE_MS);\n\n    return () => window.clearTimeout(timeoutId);\n  }, [autoSubmit, draft, valueKey]);\n\n  return [draft, setDraft] as const;\n}\n\nfunction multiFilterValueKey(value: Record<string, FilterBarMultiFilterMode>): string {\n  return Object.keys(value)\n    .sort()\n    .map((key) => `${key}:${value[key]}`)\n    .join(\"\\u0000\");\n}\n\nfunction sameMultiFilterValue(\n  a: Record<string, FilterBarMultiFilterMode>,\n  b: Record<string, FilterBarMultiFilterMode>,\n) {\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (a[key] !== b[key]) return false;\n  }\n  return true;\n}\n\nexport function updateMultiFilterValue(\n  current: Record<string, FilterBarMultiFilterMode>,\n  optionValue: string,\n  nextMode: FilterMode,\n): Record<string, FilterBarMultiFilterMode> {\n  const next = { ...current };\n\n  if (nextMode === \"neutral\") {\n    delete next[optionValue];\n    return next;\n  }\n\n  if (nextMode === \"include\" || nextMode === \"exclude\") {\n    next[optionValue] = nextMode;\n  }\n\n  return next;\n}\n\nexport function nextFilterMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\n// sizedIcon constrains a filter icon to `px`. A node icon (e.g. a lucide\n// component, which otherwise renders at its own default 24px) is cloned with an\n// explicit inline width/height — done in clicky-ui via a real style so it never\n// depends on a Tailwind arbitrary class being generated in the consumer's build.\n// A string (runtime/iconify) icon is returned as-is and sized by the wrapper's\n// font-size. An existing inline size on the node wins (consumer override).\nexport function sizedIcon(icon: LabelIconSpec | undefined, px: number): LabelIconSpec | undefined {\n  if (!isValidElement(icon)) return icon;\n  const el = icon as ReactElement<{ style?: CSSProperties }>;\n  return cloneElement(el, {\n    style: { width: `${px}px`, height: `${px}px`, ...el.props.style },\n  });\n}\n\n// comboboxLabelProps maps a filter to the Combobox `label`/`ariaLabel`: when the\n// filter carries an `icon`, the icon replaces the inline text label (with the\n// field name kept as tooltip + accessible name); otherwise the text label shows.\n// clicky-ui owns the size (10px default) — the consumer supplies only the icon\n// and its colour.\nexport function comboboxLabelProps(filter: { icon?: LabelIconSpec; label: string }): {\n  label: ReactNode;\n  ariaLabel?: string;\n} {\n  if (filter.icon == null) return { label: filter.label };\n  return {\n    label: (\n      <span title={filter.label} className=\"inline-flex items-center text-[10px]\">\n        <LabelIcon icon={sizedIcon(filter.icon, 10)} className=\"normal-case\" />\n      </span>\n    ),\n    ariaLabel: filter.label,\n  };\n}\n\nexport function lookupFieldWidthClass(grow: boolean) {\n  return grow ? \"min-w-[12rem] max-w-[18rem] flex-1\" : \"min-w-[11rem] max-w-[15rem] shrink-0\";\n}\n"],"names":["useContext","FilterBarContext","useState","useRef","useEffect","FILTER_INPUT_DEBOUNCE_MS","isValidElement","cloneElement","jsx","LabelIcon"],"mappings":"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"}

package/dist/components/filter-bar-field-utils.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { FilterMode } from '../data/FilterPill';
+import { LabelIconSpec } from '../data/Icon';
+import { MultiSelectOption } from './MultiSelect';
+export type FilterBarMultiFilterMode = Extract<FilterMode, "include" | "exclude">;
+export declare function mergeMultiSelectOptions(head: MultiSelectOption[], extra: MultiSelectOption[]): MultiSelectOption[];
+export declare function multiSelectOptionText(option: MultiSelectOption): string;
+export declare function summarizeMultiFilter(label: string, value: Record<string, FilterBarMultiFilterMode>): string;
+export declare function useDebouncedMultiDraft(value: Record<string, FilterBarMultiFilterMode>, onChange: (value: Record<string, FilterBarMultiFilterMode>) => void): readonly [Record<string, FilterBarMultiFilterMode>, import('react').Dispatch<import('react').SetStateAction<Record<string, FilterBarMultiFilterMode>>>];
+export declare function updateMultiFilterValue(current: Record<string, FilterBarMultiFilterMode>, optionValue: string, nextMode: FilterMode): Record<string, FilterBarMultiFilterMode>;
+export declare function nextFilterMode(mode: FilterMode): FilterMode;
+export declare function sizedIcon(icon: LabelIconSpec | undefined, px: number): LabelIconSpec | undefined;
+export declare function comboboxLabelProps(filter: {
+    icon?: LabelIconSpec;
+    label: string;
+}): {
+    label: ReactNode;
+    ariaLabel?: string;
+};
+export declare function lookupFieldWidthClass(grow: boolean): "min-w-[12rem] max-w-[18rem] flex-1" | "min-w-[11rem] max-w-[15rem] shrink-0";
+//# sourceMappingURL=filter-bar-field-utils.d.ts.map

package/dist/components/filter-bar-field-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-field-utils.d.ts","sourceRoot":"","sources":["../../src/components/filter-bar-field-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAIlF,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,iBAAiB,EAAE,EACzB,KAAK,EAAE,iBAAiB,EAAE,GACzB,iBAAiB,EAAE,CAWrB;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB,UAG9D;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,GAC9C,MAAM,CAcR;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,EAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAK,IAAI,2JAqCpE;AAsBD,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,EACjD,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,UAAU,GACnB,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAa1C;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,CAI3D;AAQD,wBAAgB,SAAS,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAMhG;AAOD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IAAE,IAAI,CAAC,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IACnF,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAUA;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,OAAO,iFAElD"}

package/dist/components/filter-bar-field-utils.js

@@ -0,0 +1,119 @@
+import { jsx } from "react/jsx-runtime";
+import { isValidElement, cloneElement, useContext, useState, useRef, useEffect } from "react";
+import { LabelIcon } from "../data/Icon.js";
+import { FilterBarContext, FILTER_INPUT_DEBOUNCE_MS } from "./filter-bar-context.js";
+function mergeMultiSelectOptions(head, extra) {
+  if (extra.length === 0) return head;
+  const seen = new Set(head.map((o) => o.value));
+  const merged = [...head];
+  for (const option of extra) {
+    if (!seen.has(option.value)) {
+      seen.add(option.value);
+      merged.push(option);
+    }
+  }
+  return merged;
+}
+function multiSelectOptionText(option) {
+  const label = typeof option.label === "string" ? option.label : "";
+  return [option.value, label, option.title ?? ""].filter(Boolean).join(" ");
+}
+function summarizeMultiFilter(label, value) {
+  const includeCount = Object.values(value).filter((mode) => mode === "include").length;
+  const excludeCount = Object.values(value).filter((mode) => mode === "exclude").length;
+  if (includeCount === 0 && excludeCount === 0) {
+    return label;
+  }
+  const counts = [
+    includeCount > 0 ? `+${includeCount}` : null,
+    excludeCount > 0 ? `-${excludeCount}` : null
+  ].filter(Boolean);
+  return `${label} ${counts.join(" ")}`;
+}
+function useDebouncedMultiDraft(value, onChange) {
+  const { autoSubmit } = useContext(FilterBarContext);
+  const [draft, setDraft] = useState(value);
+  const latestOnChange = useRef(onChange);
+  const latestValue = useRef(value);
+  const valueKey = multiFilterValueKey(value);
+  useEffect(() => {
+    latestOnChange.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    if (!sameMultiFilterValue(latestValue.current, value)) {
+      latestValue.current = value;
+      setDraft(value);
+      return;
+    }
+    latestValue.current = value;
+  }, [valueKey, value]);
+  useEffect(() => {
+    if (sameMultiFilterValue(draft, value)) return;
+    if (!autoSubmit) {
+      latestOnChange.current(draft);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      latestOnChange.current(draft);
+    }, FILTER_INPUT_DEBOUNCE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [autoSubmit, draft, valueKey]);
+  return [draft, setDraft];
+}
+function multiFilterValueKey(value) {
+  return Object.keys(value).sort().map((key) => `${key}:${value[key]}`).join("\0");
+}
+function sameMultiFilterValue(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function updateMultiFilterValue(current, optionValue, nextMode) {
+  const next = { ...current };
+  if (nextMode === "neutral") {
+    delete next[optionValue];
+    return next;
+  }
+  if (nextMode === "include" || nextMode === "exclude") {
+    next[optionValue] = nextMode;
+  }
+  return next;
+}
+function nextFilterMode(mode) {
+  if (mode === "include") return "exclude";
+  if (mode === "exclude") return "neutral";
+  return "include";
+}
+function sizedIcon(icon, px) {
+  if (!isValidElement(icon)) return icon;
+  const el = icon;
+  return cloneElement(el, {
+    style: { width: `${px}px`, height: `${px}px`, ...el.props.style }
+  });
+}
+function comboboxLabelProps(filter) {
+  if (filter.icon == null) return { label: filter.label };
+  return {
+    label: /* @__PURE__ */ jsx("span", { title: filter.label, className: "inline-flex items-center text-[10px]", children: /* @__PURE__ */ jsx(LabelIcon, { icon: sizedIcon(filter.icon, 10), className: "normal-case" }) }),
+    ariaLabel: filter.label
+  };
+}
+function lookupFieldWidthClass(grow) {
+  return grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0";
+}
+export {
+  comboboxLabelProps,
+  lookupFieldWidthClass,
+  mergeMultiSelectOptions,
+  multiSelectOptionText,
+  nextFilterMode,
+  sizedIcon,
+  summarizeMultiFilter,
+  updateMultiFilterValue,
+  useDebouncedMultiDraft
+};
+//# sourceMappingURL=filter-bar-field-utils.js.map