@flanksource/clicky-ui 0.3.21 → 0.3.22

package/dist/components/WorkloadPicker.js

@@ -1,26 +1,56 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { cn } from "../lib/utils.js";
 import { Combobox } from "./Combobox.js";
-import { ALL_WORKLOAD_KINDS, buildWorkloadOptions, loadedWorkloads, kindForValue, WORKLOAD_META } from "./workload-picker-utils.js";
+import { NamespacePicker } from "./NamespacePicker.js";
+import { parseWorkloadKey, ALL_WORKLOAD_KINDS, buildWorkloadOptions, loadedWorkloads, kindForValue, WORKLOAD_META, namespaceKey } from "./workload-picker-utils.js";
 function WorkloadPicker({
   value,
   onChange,
   loadWorkloads,
   namespace,
+  allowNamespaceSelection = false,
+  loadNamespaces,
+  onNamespaceChange,
   kinds = ALL_WORKLOAD_KINDS,
   strict = false,
   allowCustomValue = true,
+  collapseSingleOption = false,
+  disabled = false,
   placeholder = "Select workload / service…",
   className
 }) {
+  const initialNamespace = value ? parseWorkloadKey(value).namespace : void 0;
+  const [selectedNamespace, setSelectedNamespace] = useState(
+    initialNamespace ?? namespace ?? ""
+  );
   const [byKind, setByKind] = useState({});
   const [loading, setLoading] = useState(false);
+  const defaultNamespaceRef = useRef(namespace);
+  const effectiveNamespace = allowNamespaceSelection ? selectedNamespace || void 0 : namespace;
+  useEffect(() => {
+    if (!allowNamespaceSelection || !value) return;
+    const valueNamespace = parseWorkloadKey(value).namespace;
+    if (valueNamespace) setSelectedNamespace(valueNamespace);
+  }, [allowNamespaceSelection, value]);
+  useEffect(() => {
+    if (!allowNamespaceSelection || defaultNamespaceRef.current === namespace) {
+      return;
+    }
+    defaultNamespaceRef.current = namespace;
+    if (!value) setSelectedNamespace(namespace ?? "");
+  }, [allowNamespaceSelection, namespace, value]);
   const kindsKey = kinds.join(",");
   useEffect(() => {
+    if (allowNamespaceSelection && !effectiveNamespace) {
+      setByKind({});
+      setLoading(false);
+      return;
+    }
     let cancelled = false;
     setLoading(true);
-    loadWorkloads(kinds).then((res) => {
+    const request = effectiveNamespace ? loadWorkloads(kinds, effectiveNamespace) : loadWorkloads(kinds);
+    request.then((res) => {
       if (!cancelled) setByKind(res);
     }).finally(() => {
       if (!cancelled) setLoading(false);
@@ -28,41 +58,97 @@ function WorkloadPicker({
     return () => {
       cancelled = true;
     };
-  }, [loadWorkloads, kindsKey]);
+  }, [allowNamespaceSelection, effectiveNamespace, loadWorkloads, kindsKey]);
+  const workloadValue = value && parseWorkloadKey(value).name ? value : "";
   const options = useMemo(
-    () => buildWorkloadOptions(namespace, byKind, kinds, value),
-    [namespace, byKind, kinds, value]
+    () => buildWorkloadOptions(effectiveNamespace, byKind, kinds, workloadValue),
+    [effectiveNamespace, byKind, kinds, workloadValue]
   );
   const invalid = useMemo(() => {
-    if (!strict || !value || loading) return false;
-    const { keys, names } = loadedWorkloads(namespace, byKind, kinds);
-    return !keys.has(value) && !names.has(value);
-  }, [strict, value, loading, namespace, byKind, kinds]);
-  const selectedKind = kindForValue(kinds, value);
+    if (!strict || !workloadValue || loading) return false;
+    const { keys, names } = loadedWorkloads(effectiveNamespace, byKind, kinds);
+    return !keys.has(workloadValue) && !names.has(workloadValue);
+  }, [strict, workloadValue, loading, effectiveNamespace, byKind, kinds]);
+  const selectedKind = kindForValue(kinds, workloadValue);
   const leadMeta = WORKLOAD_META[selectedKind];
   const LeadIcon = leadMeta.Icon;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx(
-      LeadIcon,
-      {
-        className: "h-4 w-4 shrink-0 text-muted-foreground",
-        title: leadMeta.label,
-        "aria-label": leadMeta.label
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
-      Combobox,
-      {
-        options,
-        value,
-        onChange,
-        allowCustomValue,
-        loading,
-        invalid,
-        placeholder
-      }
-    ) })
-  ] });
+  const soleOption = collapseSingleOption && !loading && options.length === 1 && (!workloadValue || workloadValue === options[0].value) ? options[0] : void 0;
+  const control = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2",
+        allowNamespaceSelection ? "min-w-0 flex-1" : className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          LeadIcon,
+          {
+            className: "h-4 w-4 shrink-0 text-muted-foreground",
+            title: leadMeta.label,
+            "aria-label": leadMeta.label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: soleOption ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "block truncate text-sm text-foreground",
+            title: soleOption.label,
+            "aria-label": "Workload",
+            children: soleOption.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            options,
+            value: workloadValue,
+            onChange: (next) => onChange(
+              next || (allowNamespaceSelection ? namespaceKey(effectiveNamespace) : "")
+            ),
+            ariaLabel: "Workload",
+            allowCustomValue,
+            loading,
+            invalid,
+            disabled,
+            placeholder
+          }
+        ) })
+      ]
+    }
+  );
+  if (!allowNamespaceSelection) return control;
+  if (!loadNamespaces) {
+    throw new Error(
+      "WorkloadPicker namespace selection requires loadNamespaces"
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full min-w-0 flex-nowrap items-center gap-density-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          NamespacePicker,
+          {
+            className: "min-w-0 shrink grow-0 basis-28",
+            value: selectedNamespace,
+            onChange: (nextNamespace) => {
+              setSelectedNamespace(nextNamespace);
+              setByKind({});
+              onNamespaceChange == null ? void 0 : onNamespaceChange(nextNamespace || void 0);
+              onChange(namespaceKey(nextNamespace));
+            },
+            loadNamespaces,
+            strict: true
+          }
+        ),
+        control
+      ]
+    }
+  );
 }
 export {
   WorkloadPicker

package/dist/components/WorkloadPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkloadPicker.js","sources":["../../src/components/WorkloadPicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox } from \"./Combobox\";\nimport {\n  ALL_WORKLOAD_KINDS,\n  WORKLOAD_META,\n  buildWorkloadOptions,\n  kindForValue,\n  loadedWorkloads,\n  type WorkloadKind,\n  type WorkloadResource,\n} from \"./workload-picker-utils\";\n\n// WorkloadPicker selects a backing Kubernetes workload (Service / Ingress /\n// Deployment / StatefulSet) for an endpoint. Options from every kind are merged\n// into one Combobox, grouped by kind via the Combobox group-header support and\n// labelled with the kind's icon.\n//\n// The emitted value is a `[namespace/]kind/name` key (see workloadKey /\n// parseWorkloadKey in workload-picker-utils) so two workloads of different\n// kinds that share a name don't collide. An ingress's name-part is its first\n// host (the routable address), labelled with the ingress name for context;\n// every other kind uses its name.\n//\n// The component is presentational: the kind→group/icon mapping and the key\n// encoding live in workload-picker-utils; it fetches nothing — the consumer\n// supplies an async `loadWorkloads` getter.\n\nexport type WorkloadPickerProps = {\n  /**\n   * Controlled selected value — a `[namespace/]kind/name` key (see\n   * {@link workloadKey} / {@link parseWorkloadKey}).\n   */\n  value: string;\n  /** Called with the chosen `[namespace/]kind/name` key (or \"\" when cleared). */\n  onChange: (value: string) => void;\n  /**\n   * Async getter the component calls to load the requested kinds' workloads.\n   * Returns a map keyed by kind. The consumer owns fetching/caching.\n   */\n  loadWorkloads: (kinds: WorkloadKind[]) => Promise<Record<WorkloadKind, WorkloadResource[]>>;\n  /**\n   * Namespace the workloads live in. When set it prefixes the emitted key\n   * (`namespace/kind/name`), so values stay distinct across namespaces.\n   */\n  namespace?: string;\n  /** Kinds to offer, in display order. Defaults to all four. */\n  kinds?: WorkloadKind[];\n  /**\n   * When true, a non-empty value that does not match any loaded workload (once\n   * loading settles) is flagged invalid — the picked workload doesn't exist in\n   * the namespace. The value is still shown (pinned) so the user can see and\n   * fix it; freeform entry is not rejected, only marked.\n   */\n  strict?: boolean;\n  /**\n   * Whether a typed name absent from the loaded resources may be committed.\n   * Defaults to true for the existing free-form workload picker behavior.\n   */\n  allowCustomValue?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function WorkloadPicker({\n  value,\n  onChange,\n  loadWorkloads,\n  namespace,\n  kinds = ALL_WORKLOAD_KINDS,\n  strict = false,\n  allowCustomValue = true,\n  placeholder = \"Select workload / service…\",\n  className,\n}: WorkloadPickerProps) {\n  const [byKind, setByKind] = useState<Partial<Record<WorkloadKind, WorkloadResource[]>>>({});\n  const [loading, setLoading] = useState(false);\n\n  const kindsKey = kinds.join(\",\");\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadWorkloads(kinds)\n      .then((res) => {\n        if (!cancelled) setByKind(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n    // loadWorkloads is expected to be stable (memoized by the consumer); kindsKey\n    // is the joined `kinds` so a changed selection reloads without depending on\n    // the array's identity.\n  }, [loadWorkloads, kindsKey]);\n\n  const options = useMemo(\n    () => buildWorkloadOptions(namespace, byKind, kinds, value),\n    [namespace, byKind, kinds, value],\n  );\n\n  // In strict mode a non-empty value is invalid once loading settles unless it\n  // matches a loaded workload — either by its full `[namespace/]kind/name` key\n  // (what the picker emits) or by its bare name-part (what consumers that\n  // persist only the resolved name, e.g. a Service name or ingress host, feed\n  // back in). buildWorkloadOptions pins an unmatched value first, so test\n  // membership against the loaded set, not `options`.\n  const invalid = useMemo(() => {\n    if (!strict || !value || loading) return false;\n    const { keys, names } = loadedWorkloads(namespace, byKind, kinds);\n    return !keys.has(value) && !names.has(value);\n  }, [strict, value, loading, namespace, byKind, kinds]);\n\n  // The lead icon reflects the selected workload's kind (read from the value's\n  // key), falling back to the first offered kind when nothing is selected or the\n  // value carries no recognised kind (e.g. freeform input).\n  const selectedKind = kindForValue(kinds, value);\n  const leadMeta = WORKLOAD_META[selectedKind];\n  const LeadIcon = leadMeta.Icon;\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <LeadIcon\n        className=\"h-4 w-4 shrink-0 text-muted-foreground\"\n        title={leadMeta.label}\n        aria-label={leadMeta.label}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <Combobox\n          options={options}\n          value={value}\n          onChange={onChange}\n          allowCustomValue={allowCustomValue}\n          loading={loading}\n          invalid={invalid}\n          placeholder={placeholder}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAgEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd;AACF,GAAwB;AACtB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA4D,CAAA,CAAE;AAC1F,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,WAAW,MAAM,KAAK,GAAG;AAC/B,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,kBAAc,KAAK,EAChB,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,WAAU,GAAG;AAAA,IAC/B,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EAIF,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,QAAM,UAAU;AAAA,IACd,MAAM,qBAAqB,WAAW,QAAQ,OAAO,KAAK;AAAA,IAC1D,CAAC,WAAW,QAAQ,OAAO,KAAK;AAAA,EAAA;AASlC,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,UAAU,CAAC,SAAS,QAAS,QAAO;AACzC,UAAM,EAAE,MAAM,MAAA,IAAU,gBAAgB,WAAW,QAAQ,KAAK;AAChE,WAAO,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC,MAAM,IAAI,KAAK;AAAA,EAC7C,GAAG,CAAC,QAAQ,OAAO,SAAS,WAAW,QAAQ,KAAK,CAAC;AAKrD,QAAM,eAAe,aAAa,OAAO,KAAK;AAC9C,QAAM,WAAW,cAAc,YAAY;AAC3C,QAAM,WAAW,SAAS;AAC1B,8BACG,OAAA,EAAI,WAAW,GAAG,2BAA2B,SAAS,GACrD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,SAAS;AAAA,QAChB,cAAY,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEvB,oBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"WorkloadPicker.js","sources":["../../src/components/WorkloadPicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox } from \"./Combobox\";\nimport { NamespacePicker, type NamespacePickerProps } from \"./NamespacePicker\";\nimport {\n  ALL_WORKLOAD_KINDS,\n  WORKLOAD_META,\n  buildWorkloadOptions,\n  kindForValue,\n  loadedWorkloads,\n  namespaceKey,\n  parseWorkloadKey,\n  type WorkloadKind,\n  type WorkloadResource,\n} from \"./workload-picker-utils\";\n\n// WorkloadPicker selects a backing Kubernetes workload for an endpoint or\n// query. Options from every requested kind are merged into one Combobox,\n// grouped by kind via the Combobox group-header support and labelled with the\n// kind's icon.\n//\n// The emitted value is a `[namespace/]kind/name` key (see workloadKey /\n// parseWorkloadKey in workload-picker-utils) so two workloads of different\n// kinds that share a name don't collide. An ingress's name-part is its first\n// host (the routable address), labelled with the ingress name for context;\n// every other kind uses its name.\n//\n// The component is presentational: the kind→group/icon mapping and the key\n// encoding live in workload-picker-utils; it fetches nothing — the consumer\n// supplies an async `loadWorkloads` getter.\n\nexport type WorkloadPickerProps = {\n  /**\n   * Controlled selected value — a `[namespace/]kind/name` key (see\n   * {@link workloadKey} / {@link parseWorkloadKey}), or a `namespace/` key when\n   * a namespace is in scope with no workload picked in it yet.\n   */\n  value: string;\n  /**\n   * Called with the chosen `[namespace/]kind/name` key. When namespace\n   * selection is on and no workload is picked it receives the `namespace/` key\n   * (see {@link namespaceKey}) rather than \"\", so a consumer persisting the\n   * value keeps the namespace; \"\" means nothing at all is selected.\n   */\n  onChange: (value: string) => void;\n  /**\n   * Async getter the component calls to load the requested kinds' workloads.\n   * Returns a map keyed by kind. The consumer owns fetching/caching.\n   */\n  loadWorkloads: (\n    kinds: WorkloadKind[],\n    namespace?: string,\n  ) => Promise<Partial<Record<WorkloadKind, WorkloadResource[]>>>;\n  /**\n   * Namespace the workloads live in. When set it prefixes the emitted key\n   * (`namespace/kind/name`), so values stay distinct across namespaces.\n   */\n  namespace?: string;\n  /** Lets the user choose the namespace used to load and key workloads. */\n  allowNamespaceSelection?: boolean;\n  /** Required when namespace selection is enabled. */\n  loadNamespaces?: NamespacePickerProps[\"loadNamespaces\"];\n  /** Reports the namespace independently of workload selection. */\n  onNamespaceChange?: (namespace: string | undefined) => void;\n  /** Kinds to offer, in display order. Defaults to every supported kind. */\n  kinds?: WorkloadKind[];\n  /**\n   * When true, a non-empty value that does not match any loaded workload (once\n   * loading settles) is flagged invalid — the picked workload doesn't exist in\n   * the namespace. The value is still shown (pinned) so the user can see and\n   * fix it; freeform entry is not rejected, only marked.\n   */\n  strict?: boolean;\n  /**\n   * Whether a typed name absent from the loaded resources may be committed.\n   * Defaults to true for the existing free-form workload picker behavior.\n   */\n  allowCustomValue?: boolean;\n  /**\n   * Render the sole loaded workload as plain text instead of a picker.\n   *\n   * A dropdown whose only entry is the one already in effect asks a question\n   * with one answer. This is for a scope that leaves nothing to choose — a\n   * Deployment with a single pod — where the workload is a fact to state rather\n   * than a selection to make. No value is emitted: the caller is already scoped\n   * to it, so writing it back would only add a filter that changes nothing.\n   */\n  collapseSingleOption?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function WorkloadPicker({\n  value,\n  onChange,\n  loadWorkloads,\n  namespace,\n  allowNamespaceSelection = false,\n  loadNamespaces,\n  onNamespaceChange,\n  kinds = ALL_WORKLOAD_KINDS,\n  strict = false,\n  allowCustomValue = true,\n  collapseSingleOption = false,\n  disabled = false,\n  placeholder = \"Select workload / service…\",\n  className,\n}: WorkloadPickerProps) {\n  const initialNamespace = value\n    ? parseWorkloadKey(value).namespace\n    : undefined;\n  const [selectedNamespace, setSelectedNamespace] = useState(\n    initialNamespace ?? namespace ?? \"\",\n  );\n  const [byKind, setByKind] = useState<Partial<Record<WorkloadKind, WorkloadResource[]>>>({});\n  const [loading, setLoading] = useState(false);\n  const defaultNamespaceRef = useRef(namespace);\n  const effectiveNamespace = allowNamespaceSelection\n    ? selectedNamespace || undefined\n    : namespace;\n\n  useEffect(() => {\n    if (!allowNamespaceSelection || !value) return;\n    const valueNamespace = parseWorkloadKey(value).namespace;\n    if (valueNamespace) setSelectedNamespace(valueNamespace);\n  }, [allowNamespaceSelection, value]);\n\n  useEffect(() => {\n    if (\n      !allowNamespaceSelection ||\n      defaultNamespaceRef.current === namespace\n    ) {\n      return;\n    }\n    defaultNamespaceRef.current = namespace;\n    if (!value) setSelectedNamespace(namespace ?? \"\");\n  }, [allowNamespaceSelection, namespace, value]);\n\n  const kindsKey = kinds.join(\",\");\n  useEffect(() => {\n    if (allowNamespaceSelection && !effectiveNamespace) {\n      setByKind({});\n      setLoading(false);\n      return;\n    }\n    let cancelled = false;\n    setLoading(true);\n    const request = effectiveNamespace\n      ? loadWorkloads(kinds, effectiveNamespace)\n      : loadWorkloads(kinds);\n    request\n      .then((res) => {\n        if (!cancelled) setByKind(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n    // loadWorkloads is expected to be stable (memoized by the consumer); kindsKey\n    // is the joined `kinds` so a changed selection reloads without depending on\n    // the array's identity.\n  }, [allowNamespaceSelection, effectiveNamespace, loadWorkloads, kindsKey]);\n\n  // The workload half of the value. A `namespace/` key names a namespace with\n  // nothing picked in it, so every question the workload combobox asks of the\n  // selection — which option is current, is it valid, which kind's icon leads —\n  // reads it as no workload rather than as a workload called \"namespace/\".\n  const workloadValue = value && parseWorkloadKey(value).name ? value : \"\";\n\n  const options = useMemo(\n    () => buildWorkloadOptions(effectiveNamespace, byKind, kinds, workloadValue),\n    [effectiveNamespace, byKind, kinds, workloadValue],\n  );\n\n  // In strict mode a non-empty value is invalid once loading settles unless it\n  // matches a loaded workload — either by its full `[namespace/]kind/name` key\n  // (what the picker emits) or by its bare name-part (what consumers that\n  // persist only the resolved name, e.g. a Service name or ingress host, feed\n  // back in). buildWorkloadOptions pins an unmatched value first, so test\n  // membership against the loaded set, not `options`.\n  const invalid = useMemo(() => {\n    if (!strict || !workloadValue || loading) return false;\n    const { keys, names } = loadedWorkloads(effectiveNamespace, byKind, kinds);\n    return !keys.has(workloadValue) && !names.has(workloadValue);\n  }, [strict, workloadValue, loading, effectiveNamespace, byKind, kinds]);\n\n  // The lead icon reflects the selected workload's kind (read from the value's\n  // key), falling back to the first offered kind when nothing is selected or the\n  // value carries no recognised kind (e.g. freeform input).\n  const selectedKind = kindForValue(kinds, workloadValue);\n  const leadMeta = WORKLOAD_META[selectedKind];\n  const LeadIcon = leadMeta.Icon;\n  // Only once loading settles, and only while the sole option is not contested\n  // by a selection that named something else — a value the load did not return\n  // is exactly the case `strict` exists to surface, and hiding the control\n  // would hide it too.\n  const soleOption =\n    collapseSingleOption && !loading && options.length === 1 && (!workloadValue || workloadValue === options[0]!.value)\n      ? options[0]!\n      : undefined;\n  const control = (\n    <div\n      className={cn(\n        \"flex items-center gap-2\",\n        allowNamespaceSelection ? \"min-w-0 flex-1\" : className,\n      )}\n    >\n      <LeadIcon\n        className=\"h-4 w-4 shrink-0 text-muted-foreground\"\n        title={leadMeta.label}\n        aria-label={leadMeta.label}\n      />\n      <div className=\"min-w-0 flex-1\">\n        {soleOption ? (\n          <span\n            className=\"block truncate text-sm text-foreground\"\n            title={soleOption.label}\n            aria-label=\"Workload\"\n          >\n            {soleOption.label}\n          </span>\n        ) : (\n          <Combobox\n            options={options}\n            value={workloadValue}\n            // Clearing the workload falls back to the namespace still in scope\n            // rather than to nothing, so the namespace survives the clear. Only\n            // when this picker owns the namespace — a consumer that fixed the\n            // namespace itself already knows it and expects a bare \"\".\n            onChange={(next) =>\n              onChange(\n                next ||\n                  (allowNamespaceSelection\n                    ? namespaceKey(effectiveNamespace)\n                    : \"\"),\n              )\n            }\n            ariaLabel=\"Workload\"\n            allowCustomValue={allowCustomValue}\n            loading={loading}\n            invalid={invalid}\n            disabled={disabled}\n            placeholder={placeholder}\n          />\n        )}\n      </div>\n    </div>\n  );\n  if (!allowNamespaceSelection) return control;\n  if (!loadNamespaces) {\n    throw new Error(\n      \"WorkloadPicker namespace selection requires loadNamespaces\",\n    );\n  }\n\n  // Namespace and workload read as one address, so they share a row. The\n  // namespace is the shorter half: it gets a compact basis that shrinks but\n  // never grows, leaving the rest to the workload, whose `[kind/]name` labels\n  // are what need the width — this lives in a ~28% split pane. Its placeholder\n  // and aria-label carry the naming the stacked <Field label> used to.\n  return (\n    <div\n      className={cn(\n        \"flex w-full min-w-0 flex-nowrap items-center gap-density-2\",\n        className,\n      )}\n    >\n      <NamespacePicker\n        className=\"min-w-0 shrink grow-0 basis-28\"\n        value={selectedNamespace}\n        onChange={(nextNamespace) => {\n          setSelectedNamespace(nextNamespace);\n          setByKind({});\n          onNamespaceChange?.(nextNamespace || undefined);\n          // The workload the old namespace named cannot survive the move, but\n          // the new namespace is itself a selection worth reporting — emitting\n          // \"\" here is what used to drop it before it could be persisted.\n          onChange(namespaceKey(nextNamespace));\n        }}\n        loadNamespaces={loadNamespaces}\n        strict\n      />\n      {control}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/button-variants.d.ts

@@ -1,5 +1,5 @@
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
     size?: "sm" | "lg" | "icon" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=button-variants.d.ts.map

package/dist/components/button.d.ts

@@ -10,7 +10,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps
     loadingLabel?: ReactNode;
 };
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
     size?: "sm" | "lg" | "icon" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     /** Render the button styles onto the child element via Radix Slot. */

package/dist/components/combobox-types.d.ts

@@ -116,6 +116,13 @@ export type ComboboxMultiProps = ComboboxBaseProps & {
     tristate?: false;
     /** Renders selected values as wrapping removable pills instead of a summary. */
     variant?: "default" | "tags";
+    /**
+     * Characters that commit the typed text as a value, alongside Enter — and
+     * that pasted text is split on (newlines always split too). For a list of
+     * short values that is usually typed or pasted comma-separated. Tags variant
+     * only; needs `allowCustomValue`.
+     */
+    separators?: string[];
     value: string[];
     onChange: (value: string[]) => void;
 };
@@ -123,6 +130,12 @@ export type ComboboxTriStateMode = "include" | "exclude";
 export type ComboboxTriStateProps = ComboboxBaseProps & {
     multiple: true;
     tristate: true;
+    /**
+     * Renders each value as a pill carrying its mode (included / excluded) instead
+     * of the `+n -n` summary. The pill cycles include ↔ exclude on click and its
+     * close button returns the value to neutral.
+     */
+    variant?: "default" | "tags";
     value: Record<string, ComboboxTriStateMode>;
     onChange: (value: Record<string, ComboboxTriStateMode>) => void;
 };

package/dist/components/combobox-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-types.d.ts","sourceRoot":"","sources":["../../src/components/combobox-types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox-types.d.ts","sourceRoot":"","sources":["../../src/components/combobox-types.ts"],"names":[],"mappings":"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"}

package/dist/components/combobox-utils.cjs

@@ -22,6 +22,21 @@ function multipleComboboxLabel(options, selectedValues) {
   if (labels.length <= 2) return labels.join(", ");
   return `${labels.length} selected`;
 }
+function splitOnComboboxSeparators(text, separators) {
+  const marks = /* @__PURE__ */ new Set([...separators, "\n", "\r"]);
+  const parts = [];
+  let current = "";
+  for (const char of text) {
+    if (marks.has(char)) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  parts.push(current);
+  return parts;
+}
 function createComboboxCustomEntry(options) {
   const {
     allowCustomValue,
@@ -43,5 +58,6 @@ exports.COMBOBOX_MENU_MAX_WIDTH_PX = COMBOBOX_MENU_MAX_WIDTH_PX;
 exports.comboboxLabelPadding = comboboxLabelPadding;
 exports.createComboboxCustomEntry = createComboboxCustomEntry;
 exports.multipleComboboxLabel = multipleComboboxLabel;
+exports.splitOnComboboxSeparators = splitOnComboboxSeparators;
 exports.withSelectedComboboxOptions = withSelectedComboboxOptions;
 //# sourceMappingURL=combobox-utils.cjs.map

package/dist/components/combobox-utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-utils.cjs","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n\nexport function multipleComboboxLabel(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): string {\n  const labels = selectedValues.map((value) => {\n    const option = options.find((entry) => entry.value === value);\n    return option?.selectedLabel ?? option?.label ?? value;\n  });\n  if (labels.length <= 2) return labels.join(\", \");\n  return `${labels.length} selected`;\n}\n\nexport function createComboboxCustomEntry(options: {\n  allowCustomValue: boolean;\n  query: string;\n  multiple: boolean;\n  tristate: boolean;\n  onNew: ((value: string) => ComboboxOption | null) | undefined;\n  choices: ComboboxOption[];\n  selectedValues: string[];\n}): ComboboxOption | null {\n  const {\n    allowCustomValue,\n    query,\n    multiple,\n    tristate,\n    onNew,\n    choices,\n    selectedValues,\n  } = options;\n  if (\n    !allowCustomValue ||\n    !query ||\n    selectedValues.includes(query) ||\n    (!tristate && !multiple && !onNew) ||\n    choices.some((option) => option.value === query)\n  ) {\n    return null;\n  }\n  if (onNew) return onNew(query);\n  return { value: query, label: `Add \"${query}\"` };\n}\n"],"names":[],"mappings":";;AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;AAEO,SAAS,sBACd,SACA,gBACQ;AACR,QAAM,SAAS,eAAe,IAAI,CAAC,UAAU;AAC3C,UAAM,SAAS,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,KAAK;AAC5D,YAAO,iCAAQ,mBAAiB,iCAAQ,UAAS;AAAA,EACnD,CAAC;AACD,MAAI,OAAO,UAAU,EAAG,QAAO,OAAO,KAAK,IAAI;AAC/C,SAAO,GAAG,OAAO,MAAM;AACzB;AAEO,SAAS,0BAA0B,SAQhB;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MACE,CAAC,oBACD,CAAC,SACD,eAAe,SAAS,KAAK,KAC5B,CAAC,YAAY,CAAC,YAAY,CAAC,SAC5B,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,GAC/C;AACA,WAAO;AAAA,EACT;AACA,MAAI,MAAO,QAAO,MAAM,KAAK;AAC7B,SAAO,EAAE,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAA;AAC7C;;;;;;;"}
+{"version":3,"file":"combobox-utils.cjs","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n\nexport function multipleComboboxLabel(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): string {\n  const labels = selectedValues.map((value) => {\n    const option = options.find((entry) => entry.value === value);\n    return option?.selectedLabel ?? option?.label ?? value;\n  });\n  if (labels.length <= 2) return labels.join(\", \");\n  return `${labels.length} selected`;\n}\n\n// Splits pasted text into one entry per value. Newlines always separate — a\n// list copied out of a file or a column of cells arrives that way — plus\n// whichever characters the consumer declared. Empty entries are the caller's to\n// drop, so \"a,,b\" and a trailing comma stay visible here.\nexport function splitOnComboboxSeparators(\n  text: string,\n  separators: string[],\n): string[] {\n  const marks = new Set([...separators, \"\\n\", \"\\r\"]);\n  const parts: string[] = [];\n  let current = \"\";\n  for (const char of text) {\n    if (marks.has(char)) {\n      parts.push(current);\n      current = \"\";\n      continue;\n    }\n    current += char;\n  }\n  parts.push(current);\n  return parts;\n}\n\nexport function createComboboxCustomEntry(options: {\n  allowCustomValue: boolean;\n  query: string;\n  multiple: boolean;\n  tristate: boolean;\n  onNew: ((value: string) => ComboboxOption | null) | undefined;\n  choices: ComboboxOption[];\n  selectedValues: string[];\n}): ComboboxOption | null {\n  const {\n    allowCustomValue,\n    query,\n    multiple,\n    tristate,\n    onNew,\n    choices,\n    selectedValues,\n  } = options;\n  if (\n    !allowCustomValue ||\n    !query ||\n    selectedValues.includes(query) ||\n    (!tristate && !multiple && !onNew) ||\n    choices.some((option) => option.value === query)\n  ) {\n    return null;\n  }\n  if (onNew) return onNew(query);\n  return { value: query, label: `Add \"${query}\"` };\n}\n"],"names":[],"mappings":";;AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;AAEO,SAAS,sBACd,SACA,gBACQ;AACR,QAAM,SAAS,eAAe,IAAI,CAAC,UAAU;AAC3C,UAAM,SAAS,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,KAAK;AAC5D,YAAO,iCAAQ,mBAAiB,iCAAQ,UAAS;AAAA,EACnD,CAAC;AACD,MAAI,OAAO,UAAU,EAAG,QAAO,OAAO,KAAK,IAAI;AAC/C,SAAO,GAAG,OAAO,MAAM;AACzB;AAMO,SAAS,0BACd,MACA,YACU;AACV,QAAM,4BAAY,IAAI,CAAC,GAAG,YAAY,MAAM,IAAI,CAAC;AACjD,QAAM,QAAkB,CAAA;AACxB,MAAI,UAAU;AACd,aAAW,QAAQ,MAAM;AACvB,QAAI,MAAM,IAAI,IAAI,GAAG;AACnB,YAAM,KAAK,OAAO;AAClB,gBAAU;AACV;AAAA,IACF;AACA,eAAW;AAAA,EACb;AACA,QAAM,KAAK,OAAO;AAClB,SAAO;AACT;AAEO,SAAS,0BAA0B,SAQhB;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MACE,CAAC,oBACD,CAAC,SACD,eAAe,SAAS,KAAK,KAC5B,CAAC,YAAY,CAAC,YAAY,CAAC,SAC5B,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,GAC/C;AACA,WAAO;AAAA,EACT;AACA,MAAI,MAAO,QAAO,MAAM,KAAK;AAC7B,SAAO,EAAE,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAA;AAC7C;;;;;;;;"}

package/dist/components/combobox-utils.d.ts

@@ -13,6 +13,7 @@ export type ComboboxMenuPosition = {
 export declare function comboboxLabelPadding(label: ReactNode, measuredWidth: number): CSSProperties;
 export declare function withSelectedComboboxOptions(options: ComboboxOption[], selectedValues: string[]): ComboboxOption[];
 export declare function multipleComboboxLabel(options: ComboboxOption[], selectedValues: string[]): string;
+export declare function splitOnComboboxSeparators(text: string, separators: string[]): string[];
 export declare function createComboboxCustomEntry(options: {
     allowCustomValue: boolean;
     query: string;

package/dist/components/combobox-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-utils.d.ts","sourceRoot":"","sources":["../../src/components/combobox-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,GACpB,aAAa,CAMf;AAED,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,cAAc,EAAE,EACzB,cAAc,EAAE,MAAM,EAAE,GACvB,cAAc,EAAE,CAMlB;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,cAAc,EAAE,EACzB,cAAc,EAAE,MAAM,EAAE,GACvB,MAAM,CAOR;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE;IACjD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B,GAAG,cAAc,GAAG,IAAI,CAqBxB"}
+{"version":3,"file":"combobox-utils.d.ts","sourceRoot":"","sources":["../../src/components/combobox-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,GACpB,aAAa,CAMf;AAED,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,cAAc,EAAE,EACzB,cAAc,EAAE,MAAM,EAAE,GACvB,cAAc,EAAE,CAMlB;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,cAAc,EAAE,EACzB,cAAc,EAAE,MAAM,EAAE,GACvB,MAAM,CAOR;AAMD,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAAE,GACnB,MAAM,EAAE,CAcV;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE;IACjD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B,GAAG,cAAc,GAAG,IAAI,CAqBxB"}

package/dist/components/combobox-utils.js

@@ -20,6 +20,21 @@ function multipleComboboxLabel(options, selectedValues) {
   if (labels.length <= 2) return labels.join(", ");
   return `${labels.length} selected`;
 }
+function splitOnComboboxSeparators(text, separators) {
+  const marks = /* @__PURE__ */ new Set([...separators, "\n", "\r"]);
+  const parts = [];
+  let current = "";
+  for (const char of text) {
+    if (marks.has(char)) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  parts.push(current);
+  return parts;
+}
 function createComboboxCustomEntry(options) {
   const {
     allowCustomValue,
@@ -42,6 +57,7 @@ export {
   comboboxLabelPadding,
   createComboboxCustomEntry,
   multipleComboboxLabel,
+  splitOnComboboxSeparators,
   withSelectedComboboxOptions
 };
 //# sourceMappingURL=combobox-utils.js.map

package/dist/components/combobox-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-utils.js","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n\nexport function multipleComboboxLabel(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): string {\n  const labels = selectedValues.map((value) => {\n    const option = options.find((entry) => entry.value === value);\n    return option?.selectedLabel ?? option?.label ?? value;\n  });\n  if (labels.length <= 2) return labels.join(\", \");\n  return `${labels.length} selected`;\n}\n\nexport function createComboboxCustomEntry(options: {\n  allowCustomValue: boolean;\n  query: string;\n  multiple: boolean;\n  tristate: boolean;\n  onNew: ((value: string) => ComboboxOption | null) | undefined;\n  choices: ComboboxOption[];\n  selectedValues: string[];\n}): ComboboxOption | null {\n  const {\n    allowCustomValue,\n    query,\n    multiple,\n    tristate,\n    onNew,\n    choices,\n    selectedValues,\n  } = options;\n  if (\n    !allowCustomValue ||\n    !query ||\n    selectedValues.includes(query) ||\n    (!tristate && !multiple && !onNew) ||\n    choices.some((option) => option.value === query)\n  ) {\n    return null;\n  }\n  if (onNew) return onNew(query);\n  return { value: query, label: `Add \"${query}\"` };\n}\n"],"names":[],"mappings":"AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;AAEO,SAAS,sBACd,SACA,gBACQ;AACR,QAAM,SAAS,eAAe,IAAI,CAAC,UAAU;AAC3C,UAAM,SAAS,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,KAAK;AAC5D,YAAO,iCAAQ,mBAAiB,iCAAQ,UAAS;AAAA,EACnD,CAAC;AACD,MAAI,OAAO,UAAU,EAAG,QAAO,OAAO,KAAK,IAAI;AAC/C,SAAO,GAAG,OAAO,MAAM;AACzB;AAEO,SAAS,0BAA0B,SAQhB;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MACE,CAAC,oBACD,CAAC,SACD,eAAe,SAAS,KAAK,KAC5B,CAAC,YAAY,CAAC,YAAY,CAAC,SAC5B,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,GAC/C;AACA,WAAO;AAAA,EACT;AACA,MAAI,MAAO,QAAO,MAAM,KAAK;AAC7B,SAAO,EAAE,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAA;AAC7C;"}
+{"version":3,"file":"combobox-utils.js","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n\nexport function multipleComboboxLabel(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): string {\n  const labels = selectedValues.map((value) => {\n    const option = options.find((entry) => entry.value === value);\n    return option?.selectedLabel ?? option?.label ?? value;\n  });\n  if (labels.length <= 2) return labels.join(\", \");\n  return `${labels.length} selected`;\n}\n\n// Splits pasted text into one entry per value. Newlines always separate — a\n// list copied out of a file or a column of cells arrives that way — plus\n// whichever characters the consumer declared. Empty entries are the caller's to\n// drop, so \"a,,b\" and a trailing comma stay visible here.\nexport function splitOnComboboxSeparators(\n  text: string,\n  separators: string[],\n): string[] {\n  const marks = new Set([...separators, \"\\n\", \"\\r\"]);\n  const parts: string[] = [];\n  let current = \"\";\n  for (const char of text) {\n    if (marks.has(char)) {\n      parts.push(current);\n      current = \"\";\n      continue;\n    }\n    current += char;\n  }\n  parts.push(current);\n  return parts;\n}\n\nexport function createComboboxCustomEntry(options: {\n  allowCustomValue: boolean;\n  query: string;\n  multiple: boolean;\n  tristate: boolean;\n  onNew: ((value: string) => ComboboxOption | null) | undefined;\n  choices: ComboboxOption[];\n  selectedValues: string[];\n}): ComboboxOption | null {\n  const {\n    allowCustomValue,\n    query,\n    multiple,\n    tristate,\n    onNew,\n    choices,\n    selectedValues,\n  } = options;\n  if (\n    !allowCustomValue ||\n    !query ||\n    selectedValues.includes(query) ||\n    (!tristate && !multiple && !onNew) ||\n    choices.some((option) => option.value === query)\n  ) {\n    return null;\n  }\n  if (onNew) return onNew(query);\n  return { value: query, label: `Add \"${query}\"` };\n}\n"],"names":[],"mappings":"AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;AAEO,SAAS,sBACd,SACA,gBACQ;AACR,QAAM,SAAS,eAAe,IAAI,CAAC,UAAU;AAC3C,UAAM,SAAS,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,KAAK;AAC5D,YAAO,iCAAQ,mBAAiB,iCAAQ,UAAS;AAAA,EACnD,CAAC;AACD,MAAI,OAAO,UAAU,EAAG,QAAO,OAAO,KAAK,IAAI;AAC/C,SAAO,GAAG,OAAO,MAAM;AACzB;AAMO,SAAS,0BACd,MACA,YACU;AACV,QAAM,4BAAY,IAAI,CAAC,GAAG,YAAY,MAAM,IAAI,CAAC;AACjD,QAAM,QAAkB,CAAA;AACxB,MAAI,UAAU;AACd,aAAW,QAAQ,MAAM;AACvB,QAAI,MAAM,IAAI,IAAI,GAAG;AACnB,YAAM,KAAK,OAAO;AAClB,gBAAU;AACV;AAAA,IACF;AACA,eAAW;AAAA,EACb;AACA,QAAM,KAAK,OAAO;AAClB,SAAO;AACT;AAEO,SAAS,0BAA0B,SAQhB;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MACE,CAAC,oBACD,CAAC,SACD,eAAe,SAAS,KAAK,KAC5B,CAAC,YAAY,CAAC,YAAY,CAAC,SAC5B,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,GAC/C;AACA,WAAO;AAAA,EACT;AACA,MAAI,MAAO,QAAO,MAAM,KAAK;AAC7B,SAAO,EAAE,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAA;AAC7C;"}

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

@@ -141,7 +141,7 @@ function MultiFilterPanel({
             {
               type: "search",
               "aria-label": `Filter ${filter.label} options`,
-              className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+              className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder",
               placeholder: `Filter ${filter.label.toLowerCase()}`,
               value: optionQuery,
               onChange: (event) => setOptionQuery(event.target.value)

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

@@ -1 +1 @@
-{"version":3,"file":"filter-bar-multi.cjs","sources":["../../src/components/filter-bar-multi.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, type LabelIconSpec } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\nimport { FilterBarContext } from \"./filter-bar-context\";\nimport {\n  comboboxLabelProps,\n  lookupFieldWidthClass,\n  mergeMultiSelectOptions,\n  multiSelectOptionText,\n  nextFilterMode,\n  updateMultiFilterValue,\n  useDebouncedMultiDraft,\n  type FilterBarMultiFilterMode,\n} from \"./filter-bar-field-utils\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type { FilterBarMultiFilterMode } from \"./filter-bar-field-utils\";\n\nexport type FilterBarMultiFilter = {\n  key: string;\n  /** Renders include/exclude chips for each option. */\n  kind: \"multi\";\n  label: string;\n  /** Leading glyph shown before the label: a runtime icon name or a node. */\n  icon?: LabelIconSpec;\n  description?: string;\n  /** Map of option value to include/exclude state. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  /** Available chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Ghost text shown in the field when no options are selected. */\n  placeholder?: string;\n  /**\n   * True when more options exist than are in `options` (the option set was\n   * capped server-side). Renders an \"… and N more\" hint and, with `onSearch`,\n   * lets the user search the full set.\n   */\n  truncated?: boolean;\n  /** True distinct count behind a truncated option set; drives the \"N more\" label. */\n  total?: number;\n  /**\n   * Optional async fetch invoked (debounced) as the user types in the option\n   * search box. Returns the options matching the query, which are merged into\n   * the displayed list so values beyond the head become selectable. When\n   * absent, the search box filters the static `options` client-side only.\n   */\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /**\n   * Lets the user commit a value absent from `options` (a free-typed name or a\n   * `*` wildcard). The option search box stays visible and an \"Add\" row appears\n   * when the query matches no listed option; committed customs pin to the top so\n   * they stay toggleable. Use for MatchItem-style filters (table/login patterns).\n   */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n};\n\n// MultiFilterField renders a \"multi\" filter as a tristate Combobox so the bar\n// stays one control family with the lookup fields: same shell, inline label,\n// typeahead input, and portaled listbox of FilterPill rows.\nexport function MultiFilterField({\n  filter,\n  grow,\n}: {\n  filter: FilterBarMultiFilter;\n  grow: boolean;\n}) {\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  // Server-search state: the matches for the active query (they replace the\n  // head while searching), plus the in-flight flag. Combobox owns the 250ms\n  // debounce; this adapter only resolves the Promise, latest query wins.\n  const [searchOptions, setSearchOptions] = useState<MultiSelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [activeQuery, setActiveQuery] = useState(\"\");\n  const latestQuery = useRef(\"\");\n\n  const onSearchProp = filter.onSearch;\n  const handleSearch = useCallback(\n    (query: string) => {\n      latestQuery.current = query;\n      setActiveQuery(query);\n      if (!query) {\n        setSearchOptions([]);\n        setLoading(false);\n        return;\n      }\n      setLoading(true);\n      Promise.resolve(onSearchProp?.(query))\n        .then((opts) => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions(Array.isArray(opts) ? opts : []);\n        })\n        .catch(() => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions([]);\n        });\n    },\n    [onSearchProp],\n  );\n\n  // allowCustomValue: any toggled value absent from `options` (a free-typed name\n  // or a `*` wildcard) is synthesised as a pinned option so it renders and stays\n  // toggleable across reopens.\n  const allowCustomValue = Boolean(filter.allowCustomValue);\n  const baseOptions = useMemo(() => {\n    if (!allowCustomValue) return filter.options;\n    const known = new Set(filter.options.map((o) => o.value));\n    const pinned = Object.keys(draft)\n      .filter((v) => !known.has(v))\n      .map((v) => ({ value: v, label: v }));\n    return mergeMultiSelectOptions(pinned, filter.options);\n  }, [allowCustomValue, filter.options, draft]);\n\n  // Server search active → the matches REPLACE the head, but any head option\n  // the user has already toggled (include/exclude) stays pinned so their\n  // selection remains visible and changeable. Selected first, then matches.\n  // Without a query (or without onSearch) the head set renders and Combobox\n  // client-filters it.\n  const visibleOptions = useMemo(() => {\n    if (!onSearchProp || !activeQuery) return baseOptions;\n    const selectedHead = baseOptions.filter((o) => draft[o.value] !== undefined);\n    return mergeMultiSelectOptions(selectedHead, searchOptions);\n  }, [onSearchProp, activeQuery, baseOptions, searchOptions, draft]);\n\n  const moreCount =\n    filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;\n  const footer =\n    moreCount > 0 && !activeQuery ? (\n      <>\n        … and {moreCount.toLocaleString()} more\n        {onSearchProp ? \" — type to search all\" : \"\"}\n      </>\n    ) : undefined;\n\n  return (\n    <Combobox\n      multiple\n      tristate\n      {...comboboxLabelProps(filter)}\n      options={toComboboxOptions(visibleOptions)}\n      value={draft}\n      onChange={setDraft}\n      allowCustomValue={allowCustomValue}\n      size=\"sm\"\n      className={cn(lookupFieldWidthClass(grow), filter.className)}\n      {...(filter.placeholder !== undefined ? { placeholder: filter.placeholder } : {})}\n      {...(onSearchProp !== undefined ? { onSearch: handleSearch, loading } : {})}\n      {...(filter.disabled !== undefined ? { disabled: filter.disabled } : {})}\n      {...(footer !== undefined ? { footer } : {})}\n    />\n  );\n}\n\nfunction toComboboxOptions(options: MultiSelectOption[]): ComboboxOption[] {\n  return options.map((option) => {\n    const title = option.title ?? multiSelectOptionText(option);\n    return {\n      value: option.value,\n      // A node label (e.g. an icon + text span) can't render as the combobox's\n      // option row or closed summary, so fall back to the option's title text —\n      // the human-readable label — instead of the raw value.\n      label: typeof option.label === \"string\" ? option.label : title,\n      title,\n      ...(option.disabled !== undefined ? { disabled: option.disabled } : {}),\n    };\n  });\n}\n\nexport type TriStateMultiSelectProps = {\n  /** Trigger label and popover heading. */\n  label: string;\n  /** Map of option value → include/exclude. Neutral options are absent. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  icon?: LabelIconSpec;\n  description?: string;\n  truncated?: boolean;\n  total?: number;\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /** Allow committing free-typed / `*`-wildcard values absent from `options`. */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /** Fill the available width (form field) vs. shrink to content. Default true. */\n  grow?: boolean;\n};\n\n// TriStateMultiSelect is the standalone include/exclude/neutral multi-select used\n// by FilterBar's \"multi\" kind, exposed for hand-written forms. It renders a\n// tristate combobox whose rows cycle neutral → include → exclude. It commits\n// changes immediately (autoSubmit:false) since a controlled form owns the value.\nexport function TriStateMultiSelect({ grow = true, ...rest }: TriStateMultiSelectProps) {\n  const filter: FilterBarMultiFilter = { key: rest.label, kind: \"multi\", ...rest };\n  return (\n    <FilterBarContext.Provider value={{ autoSubmit: false }}>\n      <MultiFilterField filter={filter} grow={grow} />\n    </FilterBarContext.Provider>\n  );\n}\n\n// MultiFilterPanel is the always-open embedded form of the multi filter (the\n// FilterBarFilterPanel / DataTable column-popover surface). Unlike the inline\n// field it is a panel, not an input, so it keeps the FilterPill row list.\nexport function MultiFilterPanel({\n  filter,\n  chrome = \"full\",\n}: {\n  filter: FilterBarMultiFilter;\n  chrome?: \"full\" | \"embedded\";\n}) {\n  const [optionQuery, setOptionQuery] = useState(\"\");\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  const showOptionFilter = filter.options.length > 7;\n  const embedded = chrome === \"embedded\";\n  const visibleOptions = useMemo(() => {\n    const query = optionQuery.trim().toLowerCase();\n    if (!query) return filter.options;\n    return filter.options.filter((option) =>\n      multiSelectOptionText(option).toLowerCase().includes(query),\n    );\n  }, [filter.options, optionQuery]);\n\n  return (\n    <div\n      data-filter-panel-chrome={chrome}\n      className={cn(\n        \"min-w-[18rem] max-w-[22rem] text-popover-foreground\",\n        embedded\n          ? \"p-0\"\n          : \"rounded-md border border-border bg-popover p-2 shadow-sm shadow-black/5\",\n      )}\n    >\n      {!embedded && (\n        <div className=\"mb-2 flex items-center justify-between gap-2\">\n          <div className=\"text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            {filter.label}\n          </div>\n          <button\n            type=\"button\"\n            className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n            onClick={() => setDraft({})}\n            disabled={Object.keys(draft).length === 0}\n          >\n            Clear all\n          </button>\n        </div>\n      )}\n\n      {showOptionFilter && (\n        <div className=\"mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            type=\"search\"\n            aria-label={`Filter ${filter.label} options`}\n            className=\"h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n            placeholder={`Filter ${filter.label.toLowerCase()}`}\n            value={optionQuery}\n            onChange={(event) => setOptionQuery(event.target.value)}\n          />\n        </div>\n      )}\n\n      <div className=\"max-h-72 space-y-0.5 overflow-auto\">\n        {visibleOptions.map((option) => {\n          const mode = draft[option.value] ?? \"neutral\";\n          const title = option.title ?? multiSelectOptionText(option);\n\n          return (\n            <div\n              key={option.value}\n              role=\"button\"\n              tabIndex={0}\n              data-filter-option={option.value}\n              className=\"rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none\"\n              onClick={() =>\n                setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)))\n              }\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\" || event.key === \" \") {\n                  event.preventDefault();\n                  setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));\n                }\n              }}\n            >\n              <FilterPill\n                className=\"w-full justify-between\"\n                label={option.label}\n                mode={mode}\n                title={title}\n                togglePosition=\"right\"\n                onModeChange={(next) => setDraft(updateMultiFilterValue(draft, option.value, next))}\n              />\n            </div>\n          );\n        })}\n        {visibleOptions.length === 0 && (\n          <div className=\"px-2 py-3 text-sm text-muted-foreground\">No options found</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useDebouncedMultiDraft","useState","useRef","useCallback","useMemo","mergeMultiSelectOptions","jsxs","Fragment","jsx","Combobox","comboboxLabelProps","cn","lookupFieldWidthClass","multiSelectOptionText","FilterBarContext","Icon","UiSearch","updateMultiFilterValue","nextFilterMode","FilterPill"],"mappings":"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"}
+{"version":3,"file":"filter-bar-multi.cjs","sources":["../../src/components/filter-bar-multi.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, type LabelIconSpec } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\nimport { FilterBarContext } from \"./filter-bar-context\";\nimport {\n  comboboxLabelProps,\n  lookupFieldWidthClass,\n  mergeMultiSelectOptions,\n  multiSelectOptionText,\n  nextFilterMode,\n  updateMultiFilterValue,\n  useDebouncedMultiDraft,\n  type FilterBarMultiFilterMode,\n} from \"./filter-bar-field-utils\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type { FilterBarMultiFilterMode } from \"./filter-bar-field-utils\";\n\nexport type FilterBarMultiFilter = {\n  key: string;\n  /** Renders include/exclude chips for each option. */\n  kind: \"multi\";\n  label: string;\n  /** Leading glyph shown before the label: a runtime icon name or a node. */\n  icon?: LabelIconSpec;\n  description?: string;\n  /** Map of option value to include/exclude state. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  /** Available chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Ghost text shown in the field when no options are selected. */\n  placeholder?: string;\n  /**\n   * True when more options exist than are in `options` (the option set was\n   * capped server-side). Renders an \"… and N more\" hint and, with `onSearch`,\n   * lets the user search the full set.\n   */\n  truncated?: boolean;\n  /** True distinct count behind a truncated option set; drives the \"N more\" label. */\n  total?: number;\n  /**\n   * Optional async fetch invoked (debounced) as the user types in the option\n   * search box. Returns the options matching the query, which are merged into\n   * the displayed list so values beyond the head become selectable. When\n   * absent, the search box filters the static `options` client-side only.\n   */\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /**\n   * Lets the user commit a value absent from `options` (a free-typed name or a\n   * `*` wildcard). The option search box stays visible and an \"Add\" row appears\n   * when the query matches no listed option; committed customs pin to the top so\n   * they stay toggleable. Use for MatchItem-style filters (table/login patterns).\n   */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n};\n\n// MultiFilterField renders a \"multi\" filter as a tristate Combobox so the bar\n// stays one control family with the lookup fields: same shell, inline label,\n// typeahead input, and portaled listbox of FilterPill rows.\nexport function MultiFilterField({\n  filter,\n  grow,\n}: {\n  filter: FilterBarMultiFilter;\n  grow: boolean;\n}) {\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  // Server-search state: the matches for the active query (they replace the\n  // head while searching), plus the in-flight flag. Combobox owns the 250ms\n  // debounce; this adapter only resolves the Promise, latest query wins.\n  const [searchOptions, setSearchOptions] = useState<MultiSelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [activeQuery, setActiveQuery] = useState(\"\");\n  const latestQuery = useRef(\"\");\n\n  const onSearchProp = filter.onSearch;\n  const handleSearch = useCallback(\n    (query: string) => {\n      latestQuery.current = query;\n      setActiveQuery(query);\n      if (!query) {\n        setSearchOptions([]);\n        setLoading(false);\n        return;\n      }\n      setLoading(true);\n      Promise.resolve(onSearchProp?.(query))\n        .then((opts) => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions(Array.isArray(opts) ? opts : []);\n        })\n        .catch(() => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions([]);\n        });\n    },\n    [onSearchProp],\n  );\n\n  // allowCustomValue: any toggled value absent from `options` (a free-typed name\n  // or a `*` wildcard) is synthesised as a pinned option so it renders and stays\n  // toggleable across reopens.\n  const allowCustomValue = Boolean(filter.allowCustomValue);\n  const baseOptions = useMemo(() => {\n    if (!allowCustomValue) return filter.options;\n    const known = new Set(filter.options.map((o) => o.value));\n    const pinned = Object.keys(draft)\n      .filter((v) => !known.has(v))\n      .map((v) => ({ value: v, label: v }));\n    return mergeMultiSelectOptions(pinned, filter.options);\n  }, [allowCustomValue, filter.options, draft]);\n\n  // Server search active → the matches REPLACE the head, but any head option\n  // the user has already toggled (include/exclude) stays pinned so their\n  // selection remains visible and changeable. Selected first, then matches.\n  // Without a query (or without onSearch) the head set renders and Combobox\n  // client-filters it.\n  const visibleOptions = useMemo(() => {\n    if (!onSearchProp || !activeQuery) return baseOptions;\n    const selectedHead = baseOptions.filter((o) => draft[o.value] !== undefined);\n    return mergeMultiSelectOptions(selectedHead, searchOptions);\n  }, [onSearchProp, activeQuery, baseOptions, searchOptions, draft]);\n\n  const moreCount =\n    filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;\n  const footer =\n    moreCount > 0 && !activeQuery ? (\n      <>\n        … and {moreCount.toLocaleString()} more\n        {onSearchProp ? \" — type to search all\" : \"\"}\n      </>\n    ) : undefined;\n\n  return (\n    <Combobox\n      multiple\n      tristate\n      {...comboboxLabelProps(filter)}\n      options={toComboboxOptions(visibleOptions)}\n      value={draft}\n      onChange={setDraft}\n      allowCustomValue={allowCustomValue}\n      size=\"sm\"\n      className={cn(lookupFieldWidthClass(grow), filter.className)}\n      {...(filter.placeholder !== undefined ? { placeholder: filter.placeholder } : {})}\n      {...(onSearchProp !== undefined ? { onSearch: handleSearch, loading } : {})}\n      {...(filter.disabled !== undefined ? { disabled: filter.disabled } : {})}\n      {...(footer !== undefined ? { footer } : {})}\n    />\n  );\n}\n\nfunction toComboboxOptions(options: MultiSelectOption[]): ComboboxOption[] {\n  return options.map((option) => {\n    const title = option.title ?? multiSelectOptionText(option);\n    return {\n      value: option.value,\n      // A node label (e.g. an icon + text span) can't render as the combobox's\n      // option row or closed summary, so fall back to the option's title text —\n      // the human-readable label — instead of the raw value.\n      label: typeof option.label === \"string\" ? option.label : title,\n      title,\n      ...(option.disabled !== undefined ? { disabled: option.disabled } : {}),\n    };\n  });\n}\n\nexport type TriStateMultiSelectProps = {\n  /** Trigger label and popover heading. */\n  label: string;\n  /** Map of option value → include/exclude. Neutral options are absent. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  icon?: LabelIconSpec;\n  description?: string;\n  truncated?: boolean;\n  total?: number;\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /** Allow committing free-typed / `*`-wildcard values absent from `options`. */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /** Fill the available width (form field) vs. shrink to content. Default true. */\n  grow?: boolean;\n};\n\n// TriStateMultiSelect is the standalone include/exclude/neutral multi-select used\n// by FilterBar's \"multi\" kind, exposed for hand-written forms. It renders a\n// tristate combobox whose rows cycle neutral → include → exclude. It commits\n// changes immediately (autoSubmit:false) since a controlled form owns the value.\nexport function TriStateMultiSelect({ grow = true, ...rest }: TriStateMultiSelectProps) {\n  const filter: FilterBarMultiFilter = { key: rest.label, kind: \"multi\", ...rest };\n  return (\n    <FilterBarContext.Provider value={{ autoSubmit: false }}>\n      <MultiFilterField filter={filter} grow={grow} />\n    </FilterBarContext.Provider>\n  );\n}\n\n// MultiFilterPanel is the always-open embedded form of the multi filter (the\n// FilterBarFilterPanel / DataTable column-popover surface). Unlike the inline\n// field it is a panel, not an input, so it keeps the FilterPill row list.\nexport function MultiFilterPanel({\n  filter,\n  chrome = \"full\",\n}: {\n  filter: FilterBarMultiFilter;\n  chrome?: \"full\" | \"embedded\";\n}) {\n  const [optionQuery, setOptionQuery] = useState(\"\");\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  const showOptionFilter = filter.options.length > 7;\n  const embedded = chrome === \"embedded\";\n  const visibleOptions = useMemo(() => {\n    const query = optionQuery.trim().toLowerCase();\n    if (!query) return filter.options;\n    return filter.options.filter((option) =>\n      multiSelectOptionText(option).toLowerCase().includes(query),\n    );\n  }, [filter.options, optionQuery]);\n\n  return (\n    <div\n      data-filter-panel-chrome={chrome}\n      className={cn(\n        \"min-w-[18rem] max-w-[22rem] text-popover-foreground\",\n        embedded\n          ? \"p-0\"\n          : \"rounded-md border border-border bg-popover p-2 shadow-sm shadow-black/5\",\n      )}\n    >\n      {!embedded && (\n        <div className=\"mb-2 flex items-center justify-between gap-2\">\n          <div className=\"text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            {filter.label}\n          </div>\n          <button\n            type=\"button\"\n            className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n            onClick={() => setDraft({})}\n            disabled={Object.keys(draft).length === 0}\n          >\n            Clear all\n          </button>\n        </div>\n      )}\n\n      {showOptionFilter && (\n        <div className=\"mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            type=\"search\"\n            aria-label={`Filter ${filter.label} options`}\n            className=\"h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder\"\n            placeholder={`Filter ${filter.label.toLowerCase()}`}\n            value={optionQuery}\n            onChange={(event) => setOptionQuery(event.target.value)}\n          />\n        </div>\n      )}\n\n      <div className=\"max-h-72 space-y-0.5 overflow-auto\">\n        {visibleOptions.map((option) => {\n          const mode = draft[option.value] ?? \"neutral\";\n          const title = option.title ?? multiSelectOptionText(option);\n\n          return (\n            <div\n              key={option.value}\n              role=\"button\"\n              tabIndex={0}\n              data-filter-option={option.value}\n              className=\"rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none\"\n              onClick={() =>\n                setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)))\n              }\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\" || event.key === \" \") {\n                  event.preventDefault();\n                  setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));\n                }\n              }}\n            >\n              <FilterPill\n                className=\"w-full justify-between\"\n                label={option.label}\n                mode={mode}\n                title={title}\n                togglePosition=\"right\"\n                onModeChange={(next) => setDraft(updateMultiFilterValue(draft, option.value, next))}\n              />\n            </div>\n          );\n        })}\n        {visibleOptions.length === 0 && (\n          <div className=\"px-2 py-3 text-sm text-muted-foreground\">No options found</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useDebouncedMultiDraft","useState","useRef","useCallback","useMemo","mergeMultiSelectOptions","jsxs","Fragment","jsx","Combobox","comboboxLabelProps","cn","lookupFieldWidthClass","multiSelectOptionText","FilterBarContext","Icon","UiSearch","updateMultiFilterValue","nextFilterMode","FilterPill"],"mappings":"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"}

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

@@ -139,7 +139,7 @@ function MultiFilterPanel({
             {
               type: "search",
               "aria-label": `Filter ${filter.label} options`,
-              className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+              className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-placeholder",
               placeholder: `Filter ${filter.label.toLowerCase()}`,
               value: optionQuery,
               onChange: (event) => setOptionQuery(event.target.value)