@flanksource/clicky-ui 0.3.46 → 0.3.47

package/dist/data/test-runner/TestFilterBar.cjs

@@ -1,36 +1,62 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const Icon = require("../Icon.cjs");
 const utils = require("../../lib/utils.cjs");
-const frameworkIcon = require("./frameworkIcon.cjs");
+const Icon = require("../Icon.cjs");
+const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
+const filterBarContext = require("../../components/filter-bar-context.cjs");
+const filterBarMulti = require("../../components/filter-bar-multi.cjs");
+const filterBarFieldUtils = require("../../components/filter-bar-field-utils.cjs");
+const MarkIcons = require("./MarkIcons.cjs");
+const marks = require("./marks.cjs");
 const status = require("./status.cjs");
-const filterState = require("./filterState.cjs");
-const UiAdd = require("../../icons/components/UiAdd.cjs");
-const UiRemove = require("../../icons/components/UiRemove.cjs");
-const STATUS_BADGES = {
-  failed: "bg-red-500",
-  warned: "bg-amber-400",
-  timedout: "bg-amber-500",
-  passed: "bg-green-500",
-  skipped: "bg-yellow-400",
-  running: "bg-blue-500",
-  pending: "bg-muted-foreground",
-  total: "bg-muted-foreground"
-};
-const STATUS_DEFS = status.STATUS_LABELS.map((d) => ({
-  ...d,
-  badge: STATUS_BADGES[d.key]
-}));
-function pillClass(mode) {
-  if (mode === "include") return "bg-accent border-border font-medium text-foreground";
-  if (mode === "exclude") return "bg-foreground text-background border-foreground font-medium";
-  return "border-border text-muted-foreground hover:bg-accent";
-}
-function StateMarker({ mode }) {
-  if (mode === "include") return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-xs" });
-  if (mode === "exclude") return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiRemove.UiRemove, className: "text-xs" });
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-current opacity-30", "aria-hidden": true });
+const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
+const COMMIT_IMMEDIATELY = { autoSubmit: false, compact: false };
+function Facet({
+  label,
+  options,
+  state,
+  onChange
+}) {
+  const value = Object.fromEntries(state);
+  const active = state.size > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "right",
+      menuLabel: label,
+      menuClassName: "p-2",
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: utils.cn(
+            "inline-flex h-6 items-center gap-0.5 rounded px-1.5 text-xs transition-colors",
+            active ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+          ),
+          children: [
+            filterBarFieldUtils.summarizeMultiFilter(label, value),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown, className: "text-[10px] opacity-60" })
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: COMMIT_IMMEDIATELY, children: /* @__PURE__ */ jsxRuntime.jsx(
+        filterBarMulti.MultiFilterPanel,
+        {
+          chrome: "embedded",
+          filter: {
+            key: label,
+            kind: "multi",
+            label,
+            options,
+            value,
+            onChange: (v) => onChange(new Map(Object.entries(v)))
+          }
+        }
+      ) })
+    }
+  );
 }
 function TestFilterBar({
   filters,
@@ -39,72 +65,40 @@ function TestFilterBar({
   frameworks,
   className
 }) {
-  const hasActive = filters.status.size > 0 || filters.framework.size > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-wrap items-center gap-1.5", className), children: [
-    STATUS_DEFS.map((sf) => {
-      const count = counts[sf.key];
-      if (count === 0) return null;
-      const mode = filters.status.get(sf.key);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          className: utils.cn(
-            "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs transition-colors",
-            pillClass(mode)
-          ),
-          onClick: () => onChange({ ...filters, status: filterState.cycleFilterState(filters.status, sf.key) }),
-          title: `${sf.label}: ${mode ?? "neutral"}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: utils.cn(
-                  "inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white",
-                  sf.badge
-                ),
-                children: status.formatCount(count)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(StateMarker, { mode }),
-            sf.label
-          ]
-        },
-        sf.key
-      );
-    }),
-    frameworks.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-0.5 text-border", children: "|" }),
-      frameworks.map((fw) => {
-        const icon = frameworkIcon.frameworkIcon(fw);
-        const mode = filters.framework.get(fw);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: utils.cn(
-              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors",
-              pillClass(mode)
-            ),
-            onClick: () => onChange({ ...filters, framework: filterState.cycleFilterState(filters.framework, fw) }),
-            title: `${fw}: ${mode ?? "neutral"}`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(StateMarker, { mode }),
-              icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, className: "text-sm" }),
-              fw
-            ]
-          },
-          fw
-        );
-      })
-    ] }),
-    hasActive && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+  const statusOptions = status.STATUS_LABELS.filter((d) => counts[d.key] > 0).map(
+    (d) => ({
+      value: d.key,
+      label: d.label,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(MarkIcons.OutcomeIcon, { outcome: d.key }),
+      count: counts[d.key]
+    })
+  );
+  const toolOptions = frameworks.map((fw) => {
+    var _a;
+    return {
+      value: fw,
+      label: ((_a = marks.toolMark(fw)) == null ? void 0 : _a.label) ?? fw,
+      title: fw,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(MarkIcons.ToolIcon, { tool: fw })
+    };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-0.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Facet,
+      {
+        label: "Status",
+        options: statusOptions,
+        state: filters.status,
+        onChange: (status2) => onChange({ ...filters, status: status2 })
+      }
+    ),
+    frameworks.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      Facet,
       {
-        type: "button",
-        className: "ml-1 text-xs text-muted-foreground hover:text-foreground",
-        onClick: () => onChange({ status: /* @__PURE__ */ new Map(), framework: /* @__PURE__ */ new Map() }),
-        children: "Clear"
+        label: "Tool",
+        options: toolOptions,
+        state: filters.framework,
+        onChange: (framework) => onChange({ ...filters, framework })
       }
     )
   ] });

package/dist/data/test-runner/TestFilterBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TestFilterBar.cjs","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"sourcesContent":["import { Icon } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\nimport { UiAdd, UiRemove } from \"../../icons\";\nimport { frameworkIcon } from \"./frameworkIcon\";\nimport { formatCount, STATUS_LABELS, type StatusCounts } from \"./status\";\nimport { cycleFilterState, type FilterMode, type TestFilters } from \"./filterState\";\n\nexport type TestFilterBarProps = {\n  filters: TestFilters;\n  onChange: (next: TestFilters) => void;\n  counts: StatusCounts;\n  frameworks: string[];\n  className?: string;\n};\n\ntype StatusDef = { key: keyof StatusCounts; label: string; badge: string };\n\nconst STATUS_BADGES: Record<keyof StatusCounts, string> = {\n  failed: \"bg-red-500\",\n  warned: \"bg-amber-400\",\n  timedout: \"bg-amber-500\",\n  passed: \"bg-green-500\",\n  skipped: \"bg-yellow-400\",\n  running: \"bg-blue-500\",\n  pending: \"bg-muted-foreground\",\n  total: \"bg-muted-foreground\",\n};\n\nconst STATUS_DEFS: StatusDef[] = STATUS_LABELS.map((d) => ({\n  ...d,\n  badge: STATUS_BADGES[d.key],\n}));\n\nfunction pillClass(mode: FilterMode | undefined): string {\n  if (mode === \"include\") return \"bg-accent border-border font-medium text-foreground\";\n  if (mode === \"exclude\") return \"bg-foreground text-background border-foreground font-medium\";\n  return \"border-border text-muted-foreground hover:bg-accent\";\n}\n\nfunction StateMarker({ mode }: { mode: FilterMode | undefined }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  return <span className=\"h-2 w-2 rounded-full bg-current opacity-30\" aria-hidden />;\n}\n\n/**\n * Tri-state status + framework filter pills. Named TestFilterBar to avoid the\n * pre-existing generic `FilterBar` export in clicky-ui/components.\n */\nexport function TestFilterBar({\n  filters,\n  onChange,\n  counts,\n  frameworks,\n  className,\n}: TestFilterBarProps) {\n  const hasActive = filters.status.size > 0 || filters.framework.size > 0;\n\n  return (\n    <div className={cn(\"flex flex-wrap items-center gap-1.5\", className)}>\n      {STATUS_DEFS.map((sf) => {\n        const count = counts[sf.key];\n        if (count === 0) return null;\n        const mode = filters.status.get(sf.key);\n        return (\n          <button\n            key={sf.key}\n            type=\"button\"\n            className={cn(\n              \"inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs transition-colors\",\n              pillClass(mode),\n            )}\n            onClick={() => onChange({ ...filters, status: cycleFilterState(filters.status, sf.key) })}\n            title={`${sf.label}: ${mode ?? \"neutral\"}`}\n          >\n            <span\n              className={cn(\n                \"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white\",\n                sf.badge,\n              )}\n            >\n              {formatCount(count)}\n            </span>\n            <StateMarker mode={mode} />\n            {sf.label}\n          </button>\n        );\n      })}\n\n      {frameworks.length > 1 && (\n        <>\n          <span className=\"mx-0.5 text-border\">|</span>\n          {frameworks.map((fw) => {\n            const icon = frameworkIcon(fw);\n            const mode = filters.framework.get(fw);\n            return (\n              <button\n                key={fw}\n                type=\"button\"\n                className={cn(\n                  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors\",\n                  pillClass(mode),\n                )}\n                onClick={() =>\n                  onChange({ ...filters, framework: cycleFilterState(filters.framework, fw) })\n                }\n                title={`${fw}: ${mode ?? \"neutral\"}`}\n              >\n                <StateMarker mode={mode} />\n                {icon && <Icon icon={icon} className=\"text-sm\" />}\n                {fw}\n              </button>\n            );\n          })}\n        </>\n      )}\n\n      {hasActive && (\n        <button\n          type=\"button\"\n          className=\"ml-1 text-xs text-muted-foreground hover:text-foreground\"\n          onClick={() => onChange({ status: new Map(), framework: new Map() })}\n        >\n          Clear\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["STATUS_LABELS","jsx","Icon","UiAdd","UiRemove","cn","jsxs","cycleFilterState","Fragment","frameworkIcon"],"mappings":"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"}
+{"version":3,"file":"TestFilterBar.cjs","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiChevronDown } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { FilterBarContext } from \"../../components/filter-bar-context\";\nimport { MultiFilterPanel } from \"../../components/filter-bar-multi\";\nimport { summarizeMultiFilter } from \"../../components/filter-bar-field-utils\";\nimport type { MultiSelectOption } from \"../../components/MultiSelect\";\nimport { OutcomeIcon, ToolIcon } from \"./MarkIcons\";\nimport { toolMark } from \"./marks\";\nimport { STATUS_LABELS, type StatusCounts, type TestOutcome } from \"./status\";\nimport type { FilterMode, FilterState, TestFilters } from \"./filterState\";\n\nexport type TestFilterBarProps = {\n  filters: TestFilters;\n  onChange: (next: TestFilters) => void;\n  counts: StatusCounts;\n  frameworks: string[];\n  className?: string;\n};\n\n// Picks commit straight away: the runner, not a form, owns the filter state.\nconst COMMIT_IMMEDIATELY = { autoSubmit: false, compact: false };\n\nfunction Facet({\n  label,\n  options,\n  state,\n  onChange,\n}: {\n  label: string;\n  options: MultiSelectOption[];\n  state: FilterState<string>;\n  onChange: (next: FilterState<string>) => void;\n}) {\n  const value: Record<string, FilterMode> = Object.fromEntries(state);\n  const active = state.size > 0;\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel={label}\n      menuClassName=\"p-2\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex h-6 items-center gap-0.5 rounded px-1.5 text-xs transition-colors\",\n            active\n              ? \"bg-muted font-medium text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60 hover:text-foreground\",\n          )}\n        >\n          {summarizeMultiFilter(label, value)}\n          <Icon icon={UiChevronDown} className=\"text-[10px] opacity-60\" />\n        </span>\n      }\n    >\n      {() => (\n        <FilterBarContext.Provider value={COMMIT_IMMEDIATELY}>\n          <MultiFilterPanel\n            chrome=\"embedded\"\n            filter={{\n              key: label,\n              kind: \"multi\",\n              label,\n              options,\n              value,\n              onChange: (v) => onChange(new Map(Object.entries(v))),\n            }}\n          />\n        </FilterBarContext.Provider>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * Status and tool facets as compact, muted menu triggers sized for the tree\n * toolbar; each opens a tri-state (include / exclude) option list. Named\n * TestFilterBar to avoid the generic `FilterBar` export in clicky-ui/components.\n */\nexport function TestFilterBar({\n  filters,\n  onChange,\n  counts,\n  frameworks,\n  className,\n}: TestFilterBarProps) {\n  const statusOptions: MultiSelectOption[] = STATUS_LABELS.filter((d) => counts[d.key] > 0).map(\n    (d) => ({\n      value: d.key,\n      label: d.label,\n      icon: <OutcomeIcon outcome={d.key as TestOutcome} />,\n      count: counts[d.key],\n    }),\n  );\n  const toolOptions: MultiSelectOption[] = frameworks.map((fw) => ({\n    value: fw,\n    label: toolMark(fw)?.label ?? fw,\n    title: fw,\n    icon: <ToolIcon tool={fw} />,\n  }));\n\n  return (\n    <div className={cn(\"flex items-center gap-0.5\", className)}>\n      <Facet\n        label=\"Status\"\n        options={statusOptions}\n        state={filters.status}\n        onChange={(status) => onChange({ ...filters, status })}\n      />\n      {frameworks.length > 1 && (\n        <Facet\n          label=\"Tool\"\n          options={toolOptions}\n          state={filters.framework}\n          onChange={(framework) => onChange({ ...filters, framework })}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn","summarizeMultiFilter","Icon","UiChevronDown","FilterBarContext","MultiFilterPanel","STATUS_LABELS","OutcomeIcon","toolMark","ToolIcon","status"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,qBAAqB,EAAE,YAAY,OAAO,SAAS,MAAA;AAEzD,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAoC,OAAO,YAAY,KAAK;AAClE,QAAM,SAAS,MAAM,OAAO;AAC5B,SACEA,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAc;AAAA,MACd,SACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAWC,MAAAA;AAAAA,YACT;AAAA,YACA,SACI,yCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAC,oBAAAA,qBAAqB,OAAO,KAAK;AAAA,YAClCJ,2BAAAA,IAACK,KAAAA,MAAA,EAAK,MAAMC,cAAAA,eAAe,WAAU,yBAAA,CAAyB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAIjE,gBACCN,2BAAAA,IAACO,kCAAiB,UAAjB,EAA0B,OAAO,oBAChC,UAAAP,2BAAAA;AAAAA,QAACQ,eAAAA;AAAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,KAAK;AAAA,YACL,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,IAAI,IAAI,OAAO,QAAQ,CAAC,CAAC,CAAC;AAAA,UAAA;AAAA,QACtD;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAOO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,gBAAqCC,OAAAA,cAAc,OAAO,CAAC,MAAM,OAAO,EAAE,GAAG,IAAI,CAAC,EAAE;AAAA,IACxF,CAAC,OAAO;AAAA,MACN,OAAO,EAAE;AAAA,MACT,OAAO,EAAE;AAAA,MACT,MAAMT,2BAAAA,IAACU,UAAAA,aAAA,EAAY,SAAS,EAAE,KAAoB;AAAA,MAClD,OAAO,OAAO,EAAE,GAAG;AAAA,IAAA;AAAA,EACrB;AAEF,QAAM,cAAmC,WAAW,IAAI,CAAC,OAAA;;AAAQ;AAAA,MAC/D,OAAO;AAAA,MACP,SAAOC,WAAAA,SAAS,EAAE,MAAXA,mBAAc,UAAS;AAAA,MAC9B,OAAO;AAAA,MACP,MAAMX,2BAAAA,IAACY,UAAAA,UAAA,EAAS,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,GAC1B;AAEF,yCACG,OAAA,EAAI,WAAWT,MAAAA,GAAG,6BAA6B,SAAS,GACvD,UAAA;AAAA,IAAAH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,QAAQ;AAAA,QACf,UAAU,CAACa,YAAW,SAAS,EAAE,GAAG,SAAS,QAAAA,SAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtD,WAAW,SAAS,KACnBb,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,QAAQ;AAAA,QACf,UAAU,CAAC,cAAc,SAAS,EAAE,GAAG,SAAS,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAC7D,GAEJ;AAEJ;;"}

package/dist/data/test-runner/TestFilterBar.d.ts

@@ -8,8 +8,9 @@ export type TestFilterBarProps = {
     className?: string;
 };
 /**
- * Tri-state status + framework filter pills. Named TestFilterBar to avoid the
- * pre-existing generic `FilterBar` export in clicky-ui/components.
+ * Status and tool facets as compact, muted menu triggers sized for the tree
+ * toolbar; each opens a tri-state (include / exclude) option list. Named
+ * TestFilterBar to avoid the generic `FilterBar` export in clicky-ui/components.
  */
 export declare function TestFilterBar({ filters, onChange, counts, frameworks, className, }: TestFilterBarProps): import("react").JSX.Element;
 //# sourceMappingURL=TestFilterBar.d.ts.map

package/dist/data/test-runner/TestFilterBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TestFilterBar.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACzE,OAAO,EAAqC,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgCF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,+BAyEpB"}
+{"version":3,"file":"TestFilterBar.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAiB,KAAK,YAAY,EAAoB,MAAM,UAAU,CAAC;AAC9E,OAAO,KAAK,EAA2B,WAAW,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0DF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,+BAkCpB"}

package/dist/data/test-runner/TestFilterBar.js

@@ -1,34 +1,60 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Icon } from "../Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
-import { frameworkIcon } from "./frameworkIcon.js";
-import { formatCount, STATUS_LABELS } from "./status.js";
-import { cycleFilterState } from "./filterState.js";
-import { UiAdd } from "../../icons/components/UiAdd.js";
-import { UiRemove } from "../../icons/components/UiRemove.js";
-const STATUS_BADGES = {
-  failed: "bg-red-500",
-  warned: "bg-amber-400",
-  timedout: "bg-amber-500",
-  passed: "bg-green-500",
-  skipped: "bg-yellow-400",
-  running: "bg-blue-500",
-  pending: "bg-muted-foreground",
-  total: "bg-muted-foreground"
-};
-const STATUS_DEFS = STATUS_LABELS.map((d) => ({
-  ...d,
-  badge: STATUS_BADGES[d.key]
-}));
-function pillClass(mode) {
-  if (mode === "include") return "bg-accent border-border font-medium text-foreground";
-  if (mode === "exclude") return "bg-foreground text-background border-foreground font-medium";
-  return "border-border text-muted-foreground hover:bg-accent";
-}
-function StateMarker({ mode }) {
-  if (mode === "include") return /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "text-xs" });
-  if (mode === "exclude") return /* @__PURE__ */ jsx(Icon, { icon: UiRemove, className: "text-xs" });
-  return /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-current opacity-30", "aria-hidden": true });
+import { Icon } from "../Icon.js";
+import { DropdownMenu } from "../../overlay/DropdownMenu.js";
+import { FilterBarContext } from "../../components/filter-bar-context.js";
+import { MultiFilterPanel } from "../../components/filter-bar-multi.js";
+import { summarizeMultiFilter } from "../../components/filter-bar-field-utils.js";
+import { OutcomeIcon, ToolIcon } from "./MarkIcons.js";
+import { toolMark } from "./marks.js";
+import { STATUS_LABELS } from "./status.js";
+import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
+const COMMIT_IMMEDIATELY = { autoSubmit: false, compact: false };
+function Facet({
+  label,
+  options,
+  state,
+  onChange
+}) {
+  const value = Object.fromEntries(state);
+  const active = state.size > 0;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "right",
+      menuLabel: label,
+      menuClassName: "p-2",
+      trigger: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: cn(
+            "inline-flex h-6 items-center gap-0.5 rounded px-1.5 text-xs transition-colors",
+            active ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+          ),
+          children: [
+            summarizeMultiFilter(label, value),
+            /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "text-[10px] opacity-60" })
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: COMMIT_IMMEDIATELY, children: /* @__PURE__ */ jsx(
+        MultiFilterPanel,
+        {
+          chrome: "embedded",
+          filter: {
+            key: label,
+            kind: "multi",
+            label,
+            options,
+            value,
+            onChange: (v) => onChange(new Map(Object.entries(v)))
+          }
+        }
+      ) })
+    }
+  );
 }
 function TestFilterBar({
   filters,
@@ -37,72 +63,40 @@ function TestFilterBar({
   frameworks,
   className
 }) {
-  const hasActive = filters.status.size > 0 || filters.framework.size > 0;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-1.5", className), children: [
-    STATUS_DEFS.map((sf) => {
-      const count = counts[sf.key];
-      if (count === 0) return null;
-      const mode = filters.status.get(sf.key);
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs transition-colors",
-            pillClass(mode)
-          ),
-          onClick: () => onChange({ ...filters, status: cycleFilterState(filters.status, sf.key) }),
-          title: `${sf.label}: ${mode ?? "neutral"}`,
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white",
-                  sf.badge
-                ),
-                children: formatCount(count)
-              }
-            ),
-            /* @__PURE__ */ jsx(StateMarker, { mode }),
-            sf.label
-          ]
-        },
-        sf.key
-      );
-    }),
-    frameworks.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: "mx-0.5 text-border", children: "|" }),
-      frameworks.map((fw) => {
-        const icon = frameworkIcon(fw);
-        const mode = filters.framework.get(fw);
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors",
-              pillClass(mode)
-            ),
-            onClick: () => onChange({ ...filters, framework: cycleFilterState(filters.framework, fw) }),
-            title: `${fw}: ${mode ?? "neutral"}`,
-            children: [
-              /* @__PURE__ */ jsx(StateMarker, { mode }),
-              icon && /* @__PURE__ */ jsx(Icon, { icon, className: "text-sm" }),
-              fw
-            ]
-          },
-          fw
-        );
-      })
-    ] }),
-    hasActive && /* @__PURE__ */ jsx(
-      "button",
+  const statusOptions = STATUS_LABELS.filter((d) => counts[d.key] > 0).map(
+    (d) => ({
+      value: d.key,
+      label: d.label,
+      icon: /* @__PURE__ */ jsx(OutcomeIcon, { outcome: d.key }),
+      count: counts[d.key]
+    })
+  );
+  const toolOptions = frameworks.map((fw) => {
+    var _a;
+    return {
+      value: fw,
+      label: ((_a = toolMark(fw)) == null ? void 0 : _a.label) ?? fw,
+      title: fw,
+      icon: /* @__PURE__ */ jsx(ToolIcon, { tool: fw })
+    };
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-0.5", className), children: [
+    /* @__PURE__ */ jsx(
+      Facet,
+      {
+        label: "Status",
+        options: statusOptions,
+        state: filters.status,
+        onChange: (status) => onChange({ ...filters, status })
+      }
+    ),
+    frameworks.length > 1 && /* @__PURE__ */ jsx(
+      Facet,
       {
-        type: "button",
-        className: "ml-1 text-xs text-muted-foreground hover:text-foreground",
-        onClick: () => onChange({ status: /* @__PURE__ */ new Map(), framework: /* @__PURE__ */ new Map() }),
-        children: "Clear"
+        label: "Tool",
+        options: toolOptions,
+        state: filters.framework,
+        onChange: (framework) => onChange({ ...filters, framework })
       }
     )
   ] });

package/dist/data/test-runner/TestFilterBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestFilterBar.js","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"sourcesContent":["import { Icon } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\nimport { UiAdd, UiRemove } from \"../../icons\";\nimport { frameworkIcon } from \"./frameworkIcon\";\nimport { formatCount, STATUS_LABELS, type StatusCounts } from \"./status\";\nimport { cycleFilterState, type FilterMode, type TestFilters } from \"./filterState\";\n\nexport type TestFilterBarProps = {\n  filters: TestFilters;\n  onChange: (next: TestFilters) => void;\n  counts: StatusCounts;\n  frameworks: string[];\n  className?: string;\n};\n\ntype StatusDef = { key: keyof StatusCounts; label: string; badge: string };\n\nconst STATUS_BADGES: Record<keyof StatusCounts, string> = {\n  failed: \"bg-red-500\",\n  warned: \"bg-amber-400\",\n  timedout: \"bg-amber-500\",\n  passed: \"bg-green-500\",\n  skipped: \"bg-yellow-400\",\n  running: \"bg-blue-500\",\n  pending: \"bg-muted-foreground\",\n  total: \"bg-muted-foreground\",\n};\n\nconst STATUS_DEFS: StatusDef[] = STATUS_LABELS.map((d) => ({\n  ...d,\n  badge: STATUS_BADGES[d.key],\n}));\n\nfunction pillClass(mode: FilterMode | undefined): string {\n  if (mode === \"include\") return \"bg-accent border-border font-medium text-foreground\";\n  if (mode === \"exclude\") return \"bg-foreground text-background border-foreground font-medium\";\n  return \"border-border text-muted-foreground hover:bg-accent\";\n}\n\nfunction StateMarker({ mode }: { mode: FilterMode | undefined }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  return <span className=\"h-2 w-2 rounded-full bg-current opacity-30\" aria-hidden />;\n}\n\n/**\n * Tri-state status + framework filter pills. Named TestFilterBar to avoid the\n * pre-existing generic `FilterBar` export in clicky-ui/components.\n */\nexport function TestFilterBar({\n  filters,\n  onChange,\n  counts,\n  frameworks,\n  className,\n}: TestFilterBarProps) {\n  const hasActive = filters.status.size > 0 || filters.framework.size > 0;\n\n  return (\n    <div className={cn(\"flex flex-wrap items-center gap-1.5\", className)}>\n      {STATUS_DEFS.map((sf) => {\n        const count = counts[sf.key];\n        if (count === 0) return null;\n        const mode = filters.status.get(sf.key);\n        return (\n          <button\n            key={sf.key}\n            type=\"button\"\n            className={cn(\n              \"inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs transition-colors\",\n              pillClass(mode),\n            )}\n            onClick={() => onChange({ ...filters, status: cycleFilterState(filters.status, sf.key) })}\n            title={`${sf.label}: ${mode ?? \"neutral\"}`}\n          >\n            <span\n              className={cn(\n                \"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white\",\n                sf.badge,\n              )}\n            >\n              {formatCount(count)}\n            </span>\n            <StateMarker mode={mode} />\n            {sf.label}\n          </button>\n        );\n      })}\n\n      {frameworks.length > 1 && (\n        <>\n          <span className=\"mx-0.5 text-border\">|</span>\n          {frameworks.map((fw) => {\n            const icon = frameworkIcon(fw);\n            const mode = filters.framework.get(fw);\n            return (\n              <button\n                key={fw}\n                type=\"button\"\n                className={cn(\n                  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors\",\n                  pillClass(mode),\n                )}\n                onClick={() =>\n                  onChange({ ...filters, framework: cycleFilterState(filters.framework, fw) })\n                }\n                title={`${fw}: ${mode ?? \"neutral\"}`}\n              >\n                <StateMarker mode={mode} />\n                {icon && <Icon icon={icon} className=\"text-sm\" />}\n                {fw}\n              </button>\n            );\n          })}\n        </>\n      )}\n\n      {hasActive && (\n        <button\n          type=\"button\"\n          className=\"ml-1 text-xs text-muted-foreground hover:text-foreground\"\n          onClick={() => onChange({ status: new Map(), framework: new Map() })}\n        >\n          Clear\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TestFilterBar.js","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiChevronDown } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { FilterBarContext } from \"../../components/filter-bar-context\";\nimport { MultiFilterPanel } from \"../../components/filter-bar-multi\";\nimport { summarizeMultiFilter } from \"../../components/filter-bar-field-utils\";\nimport type { MultiSelectOption } from \"../../components/MultiSelect\";\nimport { OutcomeIcon, ToolIcon } from \"./MarkIcons\";\nimport { toolMark } from \"./marks\";\nimport { STATUS_LABELS, type StatusCounts, type TestOutcome } from \"./status\";\nimport type { FilterMode, FilterState, TestFilters } from \"./filterState\";\n\nexport type TestFilterBarProps = {\n  filters: TestFilters;\n  onChange: (next: TestFilters) => void;\n  counts: StatusCounts;\n  frameworks: string[];\n  className?: string;\n};\n\n// Picks commit straight away: the runner, not a form, owns the filter state.\nconst COMMIT_IMMEDIATELY = { autoSubmit: false, compact: false };\n\nfunction Facet({\n  label,\n  options,\n  state,\n  onChange,\n}: {\n  label: string;\n  options: MultiSelectOption[];\n  state: FilterState<string>;\n  onChange: (next: FilterState<string>) => void;\n}) {\n  const value: Record<string, FilterMode> = Object.fromEntries(state);\n  const active = state.size > 0;\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel={label}\n      menuClassName=\"p-2\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex h-6 items-center gap-0.5 rounded px-1.5 text-xs transition-colors\",\n            active\n              ? \"bg-muted font-medium text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60 hover:text-foreground\",\n          )}\n        >\n          {summarizeMultiFilter(label, value)}\n          <Icon icon={UiChevronDown} className=\"text-[10px] opacity-60\" />\n        </span>\n      }\n    >\n      {() => (\n        <FilterBarContext.Provider value={COMMIT_IMMEDIATELY}>\n          <MultiFilterPanel\n            chrome=\"embedded\"\n            filter={{\n              key: label,\n              kind: \"multi\",\n              label,\n              options,\n              value,\n              onChange: (v) => onChange(new Map(Object.entries(v))),\n            }}\n          />\n        </FilterBarContext.Provider>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * Status and tool facets as compact, muted menu triggers sized for the tree\n * toolbar; each opens a tri-state (include / exclude) option list. Named\n * TestFilterBar to avoid the generic `FilterBar` export in clicky-ui/components.\n */\nexport function TestFilterBar({\n  filters,\n  onChange,\n  counts,\n  frameworks,\n  className,\n}: TestFilterBarProps) {\n  const statusOptions: MultiSelectOption[] = STATUS_LABELS.filter((d) => counts[d.key] > 0).map(\n    (d) => ({\n      value: d.key,\n      label: d.label,\n      icon: <OutcomeIcon outcome={d.key as TestOutcome} />,\n      count: counts[d.key],\n    }),\n  );\n  const toolOptions: MultiSelectOption[] = frameworks.map((fw) => ({\n    value: fw,\n    label: toolMark(fw)?.label ?? fw,\n    title: fw,\n    icon: <ToolIcon tool={fw} />,\n  }));\n\n  return (\n    <div className={cn(\"flex items-center gap-0.5\", className)}>\n      <Facet\n        label=\"Status\"\n        options={statusOptions}\n        state={filters.status}\n        onChange={(status) => onChange({ ...filters, status })}\n      />\n      {frameworks.length > 1 && (\n        <Facet\n          label=\"Tool\"\n          options={toolOptions}\n          state={filters.framework}\n          onChange={(framework) => onChange({ ...filters, framework })}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAsBA,MAAM,qBAAqB,EAAE,YAAY,OAAO,SAAS,MAAA;AAEzD,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAoC,OAAO,YAAY,KAAK;AAClE,QAAM,SAAS,MAAM,OAAO;AAC5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAc;AAAA,MACd,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,SACI,yCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAA,qBAAqB,OAAO,KAAK;AAAA,YAClC,oBAAC,MAAA,EAAK,MAAM,eAAe,WAAU,yBAAA,CAAyB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAIjE,gBACC,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,oBAChC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,KAAK;AAAA,YACL,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,IAAI,IAAI,OAAO,QAAQ,CAAC,CAAC,CAAC;AAAA,UAAA;AAAA,QACtD;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAOO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,gBAAqC,cAAc,OAAO,CAAC,MAAM,OAAO,EAAE,GAAG,IAAI,CAAC,EAAE;AAAA,IACxF,CAAC,OAAO;AAAA,MACN,OAAO,EAAE;AAAA,MACT,OAAO,EAAE;AAAA,MACT,MAAM,oBAAC,aAAA,EAAY,SAAS,EAAE,KAAoB;AAAA,MAClD,OAAO,OAAO,EAAE,GAAG;AAAA,IAAA;AAAA,EACrB;AAEF,QAAM,cAAmC,WAAW,IAAI,CAAC,OAAA;;AAAQ;AAAA,MAC/D,OAAO;AAAA,MACP,SAAO,cAAS,EAAE,MAAX,mBAAc,UAAS;AAAA,MAC9B,OAAO;AAAA,MACP,MAAM,oBAAC,UAAA,EAAS,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,GAC1B;AAEF,8BACG,OAAA,EAAI,WAAW,GAAG,6BAA6B,SAAS,GACvD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,QAAQ;AAAA,QACf,UAAU,CAAC,WAAW,SAAS,EAAE,GAAG,SAAS,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtD,WAAW,SAAS,KACnB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,QAAQ;AAAA,QACf,UAAU,CAAC,cAAc,SAAS,EAAE,GAAG,SAAS,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAC7D,GAEJ;AAEJ;"}