@inf-monkeys-tech/monkeys-design 1.0.56 → 1.0.60

package/dist/index.js

@@ -4,21 +4,21 @@ var debounce = require('lodash/debounce.js');
 var runtime = require('@inf-monkeys-tech/monkeys/runtime');
 var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var lucideReact = require('lucide-react');
 var tailwindMerge = require('tailwind-merge');
+var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
 var ContextMenu = require('@radix-ui/react-context-menu');
 var reactDom = require('react-dom');
 var Dialog = require('@radix-ui/react-dialog');
 var Tooltip2 = require('@radix-ui/react-tooltip');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactSlot = require('@radix-ui/react-slot');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var classVarianceAuthority = require('class-variance-authority');
-var lucideReact = require('lucide-react');
 var SelectPrimitive = require('@radix-ui/react-select');
 var core = require('@dnd-kit/core');
 var sonner = require('sonner');
@@ -45,13 +45,13 @@ function _interopNamespace(e) {
 
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var DropdownMenu2__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu2);
 var ContextMenu__namespace = /*#__PURE__*/_interopNamespace(ContextMenu);
 var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
 var Tooltip2__namespace = /*#__PURE__*/_interopNamespace(Tooltip2);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
@@ -4082,6 +4082,352 @@ function hasNonEmptyRenderableNode(node) {
   if (typeof node === "string") return node.trim().length > 0;
   return hasRenderableNode(node);
 }
+var placementMap = {
+  "bottom-start": { side: "bottom", align: "start" },
+  "bottom-end": { side: "bottom", align: "end" },
+  "top-start": { side: "top", align: "start" },
+  "top-end": { side: "top", align: "end" }
+};
+function flattenOptions(options, depth = 0) {
+  return options.flatMap((option) => [
+    { ...option, depth },
+    ...option.children ? flattenOptions(option.children, depth + 1) : []
+  ]);
+}
+function validateOptions(options) {
+  const values = /* @__PURE__ */ new Set();
+  flattenOptions(options).forEach((option) => {
+    if (!option || typeof option !== "object") {
+      throw new TypeError("UnifiedDropdown options must contain objects.");
+    }
+    if (typeof option.value !== "string" || !option.value.trim()) {
+      throw new TypeError("UnifiedDropdown option value must be a non-empty string.");
+    }
+    if (values.has(option.value)) {
+      throw new TypeError(`UnifiedDropdown option value "${option.value}" must be unique.`);
+    }
+    values.add(option.value);
+  });
+}
+function normalizeValues(value) {
+  const values = Array.isArray(value) ? value : value === void 0 ? [] : [value];
+  return [...new Set(values.filter((item) => typeof item === "string"))];
+}
+function getOptionText(option) {
+  if (option.textValue) return option.textValue;
+  return typeof option.label === "string" ? option.label : option.value;
+}
+function isMultiMode(mode) {
+  return mode === "multi" || mode === "checkbox";
+}
+function matchesSearch(option, query) {
+  return getOptionText(option).toLocaleLowerCase().includes(query.toLocaleLowerCase());
+}
+function validateValueShape(mode, value, name) {
+  if (value === void 0) return;
+  if (isMultiMode(mode) ? !Array.isArray(value) : typeof value !== "string") {
+    throw new TypeError(
+      `UnifiedDropdown ${name} must be ${isMultiMode(mode) ? "a string array" : "a string"} in ${mode} mode.`
+    );
+  }
+}
+var UnifiedDropdown = React4.forwardRef(
+  function UnifiedDropdown2({
+    mode,
+    options = [],
+    groups = [],
+    value,
+    defaultValue,
+    placeholder = "Select\u2026",
+    trigger,
+    triggerLabel,
+    searchPlaceholder = "Search\u2026",
+    emptyLabel = "No options",
+    loadingLabel = "Loading\u2026",
+    clearLabel = "Clear selection",
+    retryLabel = "Retry",
+    loading = false,
+    error,
+    searchable = mode === "searchable",
+    clearable = false,
+    maxSelections,
+    disabled = false,
+    invalid = false,
+    open: controlledOpen,
+    defaultOpen = false,
+    placement = "bottom-start",
+    closeOnSelect = mode !== "multi" && mode !== "checkbox",
+    portal = true,
+    size = "default",
+    width = "trigger",
+    appearance,
+    className,
+    classNames,
+    slots,
+    style,
+    onOpenChange,
+    onValueChange,
+    onSelect,
+    onAction,
+    onClear,
+    onRetry,
+    ...rootProps
+  }, ref) {
+    if (!["single", "multi", "searchable", "radio", "checkbox", "tree", "action"].includes(mode)) {
+      throw new TypeError(`UnifiedDropdown mode "${String(mode)}" is not supported.`);
+    }
+    const groupedOptions = React4.useMemo(
+      () => groups.reduce((result, group) => {
+        const groupName = typeof group.label === "string" ? group.label : group.value;
+        result.push(...group.options.map((option) => ({ ...option, group: option.group ?? groupName })));
+        return result;
+      }, [...options]),
+      [groups, options]
+    );
+    validateOptions(groupedOptions);
+    if (maxSelections !== void 0 && (!Number.isFinite(maxSelections) || maxSelections < 0)) {
+      throw new TypeError("UnifiedDropdown maxSelections must be a non-negative finite number.");
+    }
+    if (mode === "action" && (value !== void 0 || defaultValue !== void 0)) {
+      throw new TypeError("UnifiedDropdown action mode does not accept a value.");
+    }
+    if (mode !== "action") {
+      validateValueShape(mode, value, "value");
+      validateValueShape(mode, defaultValue, "defaultValue");
+    }
+    const id = React4.useId();
+    const triggerId = `${id}-trigger`;
+    const listId = `${id}-listbox`;
+    const searchId = `${id}-search`;
+    const triggerRef = React4.useRef(null);
+    const itemRefs = React4.useRef([]);
+    const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(defaultOpen);
+    const [uncontrolledValue, setUncontrolledValue] = React4.useState(
+      defaultValue ?? (isMultiMode(mode) ? [] : "")
+    );
+    const [query, setQuery] = React4.useState("");
+    const [activeIndex, setActiveIndex] = React4.useState(0);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const selectedValues = normalizeValues(value ?? uncontrolledValue);
+    const flattened = React4.useMemo(() => flattenOptions(groupedOptions), [groupedOptions]);
+    const visibleOptions = React4.useMemo(
+      () => searchable ? flattened.filter((option) => matchesSearch(option, query)) : flattened,
+      [flattened, query, searchable]
+    );
+    const selectedSet = React4.useMemo(() => new Set(selectedValues), [selectedValues]);
+    const selectedOptions = flattened.filter((option) => selectedSet.has(option.value));
+    const selectedLabel = selectedOptions.map(getOptionText).join(", ");
+    const resolvedTriggerLabel = triggerLabel ?? (selectedLabel || placeholder);
+    const isPlaceholder = selectedOptions.length === 0 && !triggerLabel;
+    const { side, align } = placementMap[placement];
+    const isMenu = mode === "action";
+    const usesCheckedMenu = mode === "radio" || mode === "checkbox";
+    const contentRole = isMenu || usesCheckedMenu ? "menu" : "listbox";
+    React4.useEffect(() => {
+      if (open) setActiveIndex(0);
+    }, [open, query]);
+    const setOpen = (nextOpen) => {
+      if (disabled) return;
+      if (!isControlled) setUncontrolledOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    };
+    const commitValue = (nextValue) => {
+      if (value === void 0) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+    const selectOption = (option) => {
+      if (disabled || option.disabled) return;
+      onSelect?.(option);
+      if (mode === "action") {
+        if (closeOnSelect) setOpen(false);
+        if (onAction) queueMicrotask(() => onAction(option));
+        return;
+      }
+      if (isMultiMode(mode)) {
+        const nextValues = selectedSet.has(option.value) ? selectedValues.filter((item) => item !== option.value) : maxSelections !== void 0 && selectedValues.length >= maxSelections ? selectedValues : [...selectedValues, option.value];
+        commitValue(nextValues);
+      } else {
+        commitValue(option.value);
+      }
+      if (closeOnSelect && !isMultiMode(mode)) setOpen(false);
+    };
+    const handleTriggerKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) setOpen(true);
+        const direction = event.key === "ArrowDown" ? 1 : -1;
+        setActiveIndex((index) => Math.max(0, Math.min(visibleOptions.length - 1, index + direction)));
+      }
+    };
+    const handleContentKeyDown = (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const direction = event.key === "ArrowDown" ? 1 : -1;
+        setActiveIndex((index) => {
+          const next = index + direction;
+          return Math.max(0, Math.min(visibleOptions.length - 1, next));
+        });
+      }
+      if (event.key === "Enter" && visibleOptions[activeIndex]) {
+        event.preventDefault();
+        selectOption(visibleOptions[activeIndex]);
+      }
+    };
+    React4.useEffect(() => {
+      if (!open) return;
+      itemRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex, open]);
+    const clearSelection = () => {
+      commitValue(isMultiMode(mode) ? [] : "");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...rootProps,
+        ref,
+        className: cn("relative inline-flex min-w-0", className),
+        style,
+        "data-monkeys-component": "unified-dropdown",
+        "data-mode": mode,
+        "data-state": open ? "open" : "closed",
+        "data-invalid": invalid || void 0,
+        "data-disabled": disabled || void 0,
+        "data-appearance-preset": appearance?.preset,
+        "data-appearance-variant": appearance?.variant,
+        "data-appearance-density": appearance?.density,
+        "data-appearance-radius": appearance?.radius,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              id: triggerId,
+              type: "button",
+              disabled,
+              "aria-expanded": open,
+              "aria-haspopup": isMenu || usesCheckedMenu ? "menu" : "listbox",
+              "aria-controls": open ? listId : void 0,
+              "aria-invalid": invalid || void 0,
+              onKeyDown: handleTriggerKeyDown,
+              className: cn(
+                "flex min-w-0 items-center justify-between gap-2 rounded-md border border-input bg-control-surface px-3 text-left text-sm text-foreground shadow-sm outline-none transition-colors",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-control-surface",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                size === "sm" ? "h-8 py-1 text-xs" : "h-10 py-2",
+                invalid && "border-destructive focus-visible:ring-destructive",
+                width === "responsive" && "w-full sm:w-auto",
+                classNames?.trigger
+              ),
+              children: [
+                trigger ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 shrink-0", children: trigger }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 flex-1 truncate", isPlaceholder && "text-muted-foreground"), children: resolvedTriggerLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 opacity-60" })
+              ]
+            }
+          ) }),
+          (() => {
+            const content = /* @__PURE__ */ jsxRuntime.jsxs(
+              PopoverPrimitive__namespace.Content,
+              {
+                id: listId,
+                side,
+                align,
+                sideOffset: 6,
+                collisionPadding: 8,
+                avoidCollisions: true,
+                onKeyDown: handleContentKeyDown,
+                onOpenAutoFocus: (event) => {
+                  event.preventDefault();
+                  const target = searchable ? document.getElementById(searchId) : itemRefs.current[0];
+                  target?.focus();
+                },
+                tabIndex: -1,
+                className: cn(
+                  "z-50 max-h-[min(24rem,calc(100vh-1rem))] max-w-[calc(100vw-1rem)] overflow-y-auto rounded-md border bg-menu-surface p-1 text-popover-foreground shadow-md outline-none",
+                  width === "trigger" && "w-[var(--radix-popover-trigger-width)] min-w-[12rem]",
+                  width === "content" && "min-w-[12rem] max-w-[min(32rem,calc(100vw-1rem))]",
+                  width === "responsive" && "w-[min(var(--radix-popover-trigger-width),calc(100vw-1rem))] min-w-[12rem]",
+                  classNames?.content
+                ),
+                children: [
+                  searchable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": "true", className: "pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        id: searchId,
+                        value: query,
+                        onChange: (event) => setQuery(event.target.value),
+                        placeholder: searchPlaceholder,
+                        "aria-label": searchPlaceholder,
+                        className: cn("h-9 w-full rounded-sm border-0 bg-transparent pl-8 pr-2 text-sm outline-none ring-0 placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring", classNames?.search)
+                      }
+                    )
+                  ] }) : null,
+                  clearable && selectedOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "mb-1 w-full rounded-sm px-2 py-1 text-left text-xs text-muted-foreground hover:bg-accent", onClick: clearSelection, children: clearLabel }) : null,
+                  loading && visibleOptions.length === 0 ? slots?.loading ? slots.loading() : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: cn("px-2 py-6 text-center text-sm text-muted-foreground", classNames?.empty), children: loadingLabel }) : error && visibleOptions.length === 0 ? slots?.error ? slots.error() : /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cn("px-2 py-6 text-center text-sm text-destructive-text", classNames?.empty), children: [
+                    error,
+                    onRetry ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "mt-2 block w-full text-center text-foreground underline", onClick: onRetry, children: retryLabel }) : null
+                  ] }) : visibleOptions.length === 0 ? slots?.empty ? slots.empty() : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: cn("px-2 py-6 text-center text-sm text-muted-foreground", classNames?.empty), children: emptyLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: mode === "tree" ? "tree" : contentRole, "aria-multiselectable": mode === "multi" || void 0, children: visibleOptions.map((option, index) => {
+                    const selected = selectedSet.has(option.value);
+                    const indicator = mode === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { "aria-hidden": "true", className: cn("h-3.5 w-3.5", selected && "fill-current") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4" });
+                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      option.group && (index === 0 || visibleOptions[index - 1]?.group !== option.group) ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: cn("px-2 pb-1 pt-2 text-xs font-medium text-muted-foreground", classNames?.groupLabel), children: option.group }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          ref: (node) => {
+                            itemRefs.current[index] = node;
+                          },
+                          type: "button",
+                          role: mode === "tree" ? "treeitem" : mode === "radio" ? "menuitemradio" : mode === "checkbox" ? "menuitemcheckbox" : isMenu ? "menuitem" : "option",
+                          "aria-level": mode === "tree" ? option.depth + 1 : void 0,
+                          "aria-selected": !isMenu && !usesCheckedMenu ? selected : void 0,
+                          "aria-checked": usesCheckedMenu ? selected : void 0,
+                          disabled: option.disabled,
+                          "data-highlighted": index === activeIndex || void 0,
+                          "data-state": selected ? "checked" : "unchecked",
+                          onMouseEnter: () => setActiveIndex(index),
+                          onClick: () => selectOption(option),
+                          className: cn(
+                            "relative flex min-h-9 w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors",
+                            "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
+                            "disabled:pointer-events-none disabled:opacity-50",
+                            index === activeIndex && "bg-accent text-accent-foreground",
+                            selected && "font-medium",
+                            option.danger && "text-destructive-text",
+                            mode !== "action" && "pl-8",
+                            classNames?.item
+                          ),
+                          style: mode === "tree" ? { paddingInlineStart: `${8 + option.depth * 16}px` } : void 0,
+                          children: [
+                            mode !== "action" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: selected ? indicator : null }) : null,
+                            slots?.option ? slots.option({ option, selected, highlighted: index === activeIndex }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                              option.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: option.icon }) : null,
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 flex-1 truncate", classNames?.itemLabel), children: option.label }),
+                              option.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("max-w-[45%] truncate text-xs text-muted-foreground", classNames?.itemDescription), children: option.description }) : null
+                            ] })
+                          ]
+                        }
+                      )
+                    ] }, option.value);
+                  }) }),
+                  error && visibleOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: "px-2 py-1 text-xs text-destructive-text", children: error }) : null,
+                  loading && visibleOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: "px-2 py-1 text-xs text-muted-foreground", children: loadingLabel }) : null,
+                  slots?.footer ? slots.footer() : null
+                ]
+              }
+            );
+            return portal ? /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: content }) : content;
+          })()
+        ]
+      }
+    ) });
+  }
+);
 
 // src/components/base/theme.ts
 var emptyStyles = {};
@@ -10372,7 +10718,7 @@ function validateMultiSelectProps({
     });
   }
 }
-function normalizeValues(values) {
+function normalizeValues2(values) {
   const nextValues = [];
   const seen = /* @__PURE__ */ new Set();
   values?.forEach((value) => {
@@ -10404,7 +10750,7 @@ function getSafeTagCount(maxTagCount, total) {
   if (maxTagCount === void 0 || !Number.isFinite(maxTagCount)) return total;
   return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
 }
-function getOptionText(option) {
+function getOptionText2(option) {
   if (option.textValue !== void 0) return option.textValue;
   if (typeof option.label === "string") return option.label;
   return option.value;
@@ -10470,7 +10816,7 @@ var BaseMultiSelect = React4.forwardRef(
     const forceOpen = openForPreview;
     const [uncontrolledOpen, setUncontrolledOpen] = React4.useState(false);
     const open = forceOpen || uncontrolledOpen;
-    const initialDefaultValueRef = React4.useRef(normalizeValues(defaultValue));
+    const initialDefaultValueRef = React4.useRef(normalizeValues2(defaultValue));
     const [uncontrolledValue, setUncontrolledValue] = React4.useState(() => [
       ...initialDefaultValueRef.current
     ]);
@@ -10479,7 +10825,7 @@ var BaseMultiSelect = React4.forwardRef(
     );
     const isControlled = value !== void 0;
     const selectedValues = React4.useMemo(
-      () => normalizeValues(isControlled ? value : uncontrolledValue),
+      () => normalizeValues2(isControlled ? value : uncontrolledValue),
       [isControlled, uncontrolledValue, value]
     );
     const selectedValueSet = React4.useMemo(
@@ -10523,7 +10869,7 @@ var BaseMultiSelect = React4.forwardRef(
       }
     };
     const commitValues = (nextValues) => {
-      const normalizedValues = normalizeValues(nextValues);
+      const normalizedValues = normalizeValues2(nextValues);
       if (!isControlled) setUncontrolledValue(normalizedValues);
       onValueChange?.(normalizedValues);
     };
@@ -10567,7 +10913,7 @@ var BaseMultiSelect = React4.forwardRef(
       for (let offset = 1; offset <= optionList.length; offset += 1) {
         const index = (resolvedActiveIndex + offset + optionList.length) % optionList.length;
         const option = optionList[index];
-        if (!option?.disabled && getOptionText(option).trim().toLocaleLowerCase().startsWith(query)) {
+        if (!option?.disabled && getOptionText2(option).trim().toLocaleLowerCase().startsWith(query)) {
           event.preventDefault();
           moveActive(index);
           return;
@@ -12387,7 +12733,7 @@ function getBoundaryEnabledIndex2(options, boundary) {
   }
   return -1;
 }
-function getOptionText2(option) {
+function getOptionText3(option) {
   if (option.textValue !== void 0) return option.textValue;
   if (typeof option.label === "string") return option.label;
   return option.value;
@@ -12566,7 +12912,7 @@ var BaseSelect = React4.forwardRef(
       for (let offset = 1; offset <= optionList.length; offset += 1) {
         const index = (startIndex + offset + optionList.length) % optionList.length;
         const option = optionList[index];
-        if (!option?.disabled && getOptionText2(option).trim().toLocaleLowerCase().startsWith(query)) {
+        if (!option?.disabled && getOptionText3(option).trim().toLocaleLowerCase().startsWith(query)) {
           event.preventDefault();
           moveActive(index);
           return;
@@ -12872,7 +13218,7 @@ var BaseSelect = React4.forwardRef(
                   {
                     value: option.value,
                     disabled: option.disabled,
-                    children: getOptionText2(option)
+                    children: getOptionText3(option)
                   },
                   option.value
                 ))
@@ -25396,6 +25742,22 @@ function WorkbenchAssetGallery({
     }
   ) });
 }
+
+// src/components/workbench/workbenchVisualizationTone.ts
+var toneVariable = {
+  primary: "--radar-series-one",
+  secondary: "--radar-series-two",
+  accent: "--radar-series-three",
+  muted: "--radar-series-four"
+};
+var toneFallback = {
+  primary: "var(--primary)",
+  secondary: "var(--secondary-foreground)",
+  accent: "var(--accent-foreground)",
+  muted: "var(--muted-foreground)"
+};
+var workbenchVisualizationToneColor = (tone) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}))`;
+var workbenchVisualizationToneColorWithAlpha = (tone, alpha) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}) / ${alpha})`;
 var radarWorkspaceStyle = {
   backgroundColor: "hsl(var(--radar-canvas, var(--background)))",
   color: "hsl(var(--foreground))"
@@ -25560,24 +25922,166 @@ function WorkbenchRadarInspectorSection({
     }
   );
 }
+function assertValidRadarFilterRowProps(props) {
+  const { disclosure, onSelect } = props;
+  const invalid = !disclosure && !onSelect || disclosure?.mode === "integrated" && (Boolean(onSelect) || props.selected !== void 0) || disclosure?.mode === "separate" && !onSelect;
+  if (invalid) {
+    throw new Error("Invalid WorkbenchRadarFilterRow props.");
+  }
+}
+function WorkbenchRadarFilterRow(props) {
+  assertValidRadarFilterRowProps(props);
+  const {
+    label,
+    value,
+    icon,
+    selected,
+    disabled = false,
+    tone,
+    onSelect,
+    disclosure,
+    className
+  } = props;
+  const isSelected = selected ?? false;
+  const selectedClasses = isSelected ? void 0 : "monkeys-workbench-radar-filter-row--idle";
+  const disabledClasses = disabled ? "monkeys-workbench-radar-filter-disabled" : void 0;
+  const resolvedTone = tone ?? "primary";
+  const toneColor = workbenchVisualizationToneColor(resolvedTone);
+  const style = {
+    "--workbench-radar-filter-tone": toneColor,
+    "--tw-ring-color": tone ? toneColor : "hsl(var(--ring))",
+    ...isSelected || tone ? {
+      backgroundColor: workbenchVisualizationToneColorWithAlpha(
+        resolvedTone,
+        isSelected ? 0.14 : 0.08
+      ),
+      borderColor: toneColor
+    } : {}
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          "flex size-4 shrink-0 items-center justify-center",
+          tone ? "text-[var(--workbench-radar-filter-tone)]" : "text-muted-foreground"
+        ),
+        "aria-hidden": "true",
+        children: icon
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: label }),
+    hasRenderableNode(value) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 tabular-nums text-muted-foreground", children: value }) : null
+  ] });
+  const disclosureIcon = disclosure ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "text-lg leading-none transition-transform motion-reduce:transition-none",
+        disclosure.expanded && "rotate-90"
+      ),
+      children: "\u203A"
+    }
+  ) : null;
+  if (disclosure?.mode === "separate") {
+    const disclosureLabel2 = disclosure.expanded ? disclosure.collapseLabel : disclosure.expandLabel;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-monkeys-component": "workbench-radar-filter-row",
+        className: cn(
+          "monkeys-workbench-radar-filter-row monkeys-workbench-radar-filter-row--separate",
+          selectedClasses,
+          disabledClasses,
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": selected,
+              disabled,
+              onClick: onSelect,
+              className: cn(
+                "monkeys-workbench-radar-filter-control monkeys-workbench-radar-filter-row__action",
+                disabledClasses
+              ),
+              children: content
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": disclosure.expanded,
+              "aria-controls": disclosure.controls,
+              "aria-label": disclosureLabel2,
+              disabled,
+              onClick: disclosure.onToggle,
+              className: cn(
+                "monkeys-workbench-radar-filter-row__disclosure",
+                disabledClasses
+              ),
+              children: disclosureIcon
+            }
+          )
+        ]
+      }
+    );
+  }
+  const integratedDisclosure = disclosure?.mode === "integrated" ? disclosure : void 0;
+  const disclosureLabel = integratedDisclosure ? integratedDisclosure.expanded ? integratedDisclosure.collapseLabel : integratedDisclosure.expandLabel : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-monkeys-component": "workbench-radar-filter-row",
+      "aria-label": disclosureLabel,
+      "aria-pressed": integratedDisclosure ? void 0 : selected,
+      "aria-expanded": integratedDisclosure?.expanded,
+      "aria-controls": integratedDisclosure?.controls,
+      disabled,
+      onClick: integratedDisclosure?.onToggle ?? onSelect,
+      className: cn(
+        "monkeys-workbench-radar-filter-control monkeys-workbench-radar-filter-row",
+        selectedClasses,
+        disabledClasses,
+        className
+      ),
+      style,
+      children: [
+        content,
+        integratedDisclosure ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 text-muted-foreground", children: disclosureIcon }) : null
+      ]
+    }
+  );
+}
 function WorkbenchRadarFilterChip({
   label,
   value,
   icon,
   selected = false,
+  disabled = false,
   onSelect,
   className
 }) {
-  const Comp = onSelect ? "button" : "div";
+  const interactive = Boolean(onSelect) || disabled;
+  const Comp = interactive ? "button" : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Comp,
     {
-      type: onSelect ? "button" : void 0,
-      "aria-pressed": onSelect ? selected : void 0,
+      type: interactive ? "button" : void 0,
+      "aria-pressed": onSelect && !disabled ? selected : void 0,
+      disabled: interactive ? disabled : void 0,
       onClick: onSelect,
       className: cn(
-        "flex min-h-9 min-w-0 items-center gap-2 rounded-full border px-3 text-xs font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        "flex min-w-0 items-center border text-xs font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        "monkeys-workbench-radar-filter-control rounded-full",
         selected ? "border-primary bg-primary/20 text-primary" : "border-border bg-background/40 text-foreground hover:border-primary/60 hover:bg-primary/10",
+        disabled && "cursor-not-allowed opacity-50",
         className
       ),
       children: [
@@ -25598,20 +26102,6 @@ var getDomain2 = (values, min5, max5) => {
 };
 var scale2 = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
 var clamp7 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
-var toneVariable = {
-  primary: "--radar-series-one",
-  secondary: "--radar-series-two",
-  accent: "--radar-series-three",
-  muted: "--radar-series-four"
-};
-var toneFallback = {
-  primary: "var(--primary)",
-  secondary: "var(--secondary-foreground)",
-  accent: "var(--accent-foreground)",
-  muted: "var(--muted-foreground)"
-};
-var toneColor = (tone) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}))`;
-var toneColorWithAlpha = (tone, alpha) => `hsl(var(${toneVariable[tone]}, ${toneFallback[tone]}) / ${alpha})`;
 var activatePoint2 = (event, point, onPointSelect) => {
   if (!onPointSelect || event.key !== "Enter" && event.key !== " ") return;
   event.preventDefault();
@@ -25786,12 +26276,12 @@ function WorkbenchRadarMatrix({
                 const radius = labelled ? clamp7(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
                 const fontSize = labelled ? clamp7(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
                 const pointStyle = {
-                  fill: toneColor(tone),
+                  fill: workbenchVisualizationToneColor(tone),
                   stroke: "hsl(var(--foreground) / 0.74)"
                 };
                 const labelStyle = {
-                  fill: toneColor(tone),
-                  filter: `drop-shadow(0 0 0.65rem ${toneColorWithAlpha(tone, 0.72)})`
+                  fill: workbenchVisualizationToneColor(tone),
+                  filter: `drop-shadow(0 0 0.65rem ${workbenchVisualizationToneColorWithAlpha(tone, 0.72)})`
                 };
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "g",
@@ -25811,7 +26301,7 @@ function WorkbenchRadarMatrix({
                           r: radius + 10,
                           fill: "none",
                           strokeWidth: "2",
-                          style: { stroke: toneColorWithAlpha(tone, 0.48) }
+                          style: { stroke: workbenchVisualizationToneColorWithAlpha(tone, 0.48) }
                         }
                       ) : null,
                       /* @__PURE__ */ jsxRuntime.jsx("circle", { r: radius, strokeWidth: "1.25", style: pointStyle }),
@@ -25889,7 +26379,7 @@ function WorkbenchRadarMatrix({
                     cx: clamp7(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
                     cy: clamp7(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
                     r: "8",
-                    style: { fill: toneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
+                    style: { fill: workbenchVisualizationToneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
                   },
                   point.id
                 )),
@@ -25912,7 +26402,7 @@ function WorkbenchRadarMatrix({
         legend.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 hidden -translate-x-1/2 items-center gap-4 rounded-full border border-border bg-card/95 px-4 py-2 text-xs font-semibold shadow-xl md:flex", children: legend.map((item) => {
           const tone = item.tone || "muted";
           return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: toneColor(tone) } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: workbenchVisualizationToneColor(tone) } }),
             item.label
           ] }, item.id);
         }) }) : null
@@ -31394,6 +31884,7 @@ exports.OverlayNodeHost = OverlayNodeHost;
 exports.RenderNodeHost = RenderNodeHost;
 exports.ToastProvider = MonkeysToastProvider;
 exports.Toaster = MonkeysToaster;
+exports.UnifiedDropdown = UnifiedDropdown;
 exports.UserAccountMenu = UserAccountMenu;
 exports.WorkbenchAssetGallery = WorkbenchAssetGallery;
 exports.WorkbenchCollection = WorkbenchCollection;
@@ -31410,6 +31901,7 @@ exports.WorkbenchLaneView = WorkbenchLaneView;
 exports.WorkbenchMasonryLayout = WorkbenchMasonryLayout;
 exports.WorkbenchMetricGrid = WorkbenchMetricGrid;
 exports.WorkbenchRadarFilterChip = WorkbenchRadarFilterChip;
+exports.WorkbenchRadarFilterRow = WorkbenchRadarFilterRow;
 exports.WorkbenchRadarInspectorSection = WorkbenchRadarInspectorSection;
 exports.WorkbenchRadarMatrix = WorkbenchRadarMatrix;
 exports.WorkbenchRadarNavigation = WorkbenchRadarNavigation;