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

package/dist/index.mjs

@@ -1,23 +1,23 @@
 import debounce from 'lodash/debounce.js';
 import { resolveThemeTokens, buildApplicationHandoffUrl } from '@inf-monkeys-tech/monkeys/runtime';
 import * as React4 from 'react';
-import React4__default, { forwardRef, useId, useState, useRef, useEffect, createElement, createContext, useCallback, useMemo, useContext, Children, isValidElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import React4__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, createElement, createContext, useCallback, useContext, Children, isValidElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { ChevronDown, Search, Circle, Check, ChevronRight, ChevronUp, X, Plus, Pin, SquarePen, Blocks, MessageSquare, Bot, Settings, Loader2, TerminalSquare, Clock3, FileOutput, Download, RefreshCw, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Image, Ellipsis, Pencil, Trash2 } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
+import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
 import * as Tooltip2 from '@radix-ui/react-tooltip';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Slot } from '@radix-ui/react-slot';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { cva } from 'class-variance-authority';
-import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, Search, X, Plus, Pin, SquarePen, Blocks, MessageSquare, Bot, Settings, Loader2, TerminalSquare, Clock3, FileOutput, Download, RefreshCw, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Image, Ellipsis, Pencil, Trash2 } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { toast as toast$1, Toaster } from 'sonner';
@@ -4047,6 +4047,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 = 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 = 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 = useId();
+    const triggerId = `${id}-trigger`;
+    const listId = `${id}-listbox`;
+    const searchId = `${id}-search`;
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue ?? (isMultiMode(mode) ? [] : "")
+    );
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const selectedValues = normalizeValues(value ?? uncontrolledValue);
+    const flattened = useMemo(() => flattenOptions(groupedOptions), [groupedOptions]);
+    const visibleOptions = useMemo(
+      () => searchable ? flattened.filter((option) => matchesSearch(option, query)) : flattened,
+      [flattened, query, searchable]
+    );
+    const selectedSet = 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";
+    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]);
+      }
+    };
+    useEffect(() => {
+      if (!open) return;
+      itemRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex, open]);
+    const clearSelection = () => {
+      commitValue(isMultiMode(mode) ? [] : "");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ 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__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx("span", { className: "min-w-0 shrink-0", children: trigger }) : null,
+                /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", isPlaceholder && "text-muted-foreground"), children: resolvedTriggerLabel }),
+                /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 opacity-60" })
+              ]
+            }
+          ) }),
+          (() => {
+            const content = /* @__PURE__ */ jsxs(
+              PopoverPrimitive.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__ */ jsxs("div", { className: "relative mb-1", children: [
+                    /* @__PURE__ */ jsx(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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { role: "alert", className: cn("px-2 py-6 text-center text-sm text-destructive-text", classNames?.empty), children: [
+                    error,
+                    onRetry ? /* @__PURE__ */ 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__ */ jsx("div", { role: "status", className: cn("px-2 py-6 text-center text-sm text-muted-foreground", classNames?.empty), children: emptyLabel }) : /* @__PURE__ */ 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__ */ jsx(Circle, { "aria-hidden": "true", className: cn("h-3.5 w-3.5", selected && "fill-current") }) : /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" });
+                    return /* @__PURE__ */ jsxs("div", { children: [
+                      option.group && (index === 0 || visibleOptions[index - 1]?.group !== option.group) ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+                              option.icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: option.icon }) : null,
+                              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", classNames?.itemLabel), children: option.label }),
+                              option.description ? /* @__PURE__ */ 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__ */ jsx("div", { role: "status", className: "px-2 py-1 text-xs text-destructive-text", children: error }) : null,
+                  loading && visibleOptions.length > 0 ? /* @__PURE__ */ 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__ */ jsx(PopoverPrimitive.Portal, { children: content }) : content;
+          })()
+        ]
+      }
+    ) });
+  }
+);
 
 // src/components/base/theme.ts
 var emptyStyles = {};
@@ -10337,7 +10683,7 @@ function validateMultiSelectProps({
     });
   }
 }
-function normalizeValues(values) {
+function normalizeValues2(values) {
   const nextValues = [];
   const seen = /* @__PURE__ */ new Set();
   values?.forEach((value) => {
@@ -10369,7 +10715,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;
@@ -10435,7 +10781,7 @@ var BaseMultiSelect = forwardRef(
     const forceOpen = openForPreview;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const open = forceOpen || uncontrolledOpen;
-    const initialDefaultValueRef = useRef(normalizeValues(defaultValue));
+    const initialDefaultValueRef = useRef(normalizeValues2(defaultValue));
     const [uncontrolledValue, setUncontrolledValue] = useState(() => [
       ...initialDefaultValueRef.current
     ]);
@@ -10444,7 +10790,7 @@ var BaseMultiSelect = forwardRef(
     );
     const isControlled = value !== void 0;
     const selectedValues = useMemo(
-      () => normalizeValues(isControlled ? value : uncontrolledValue),
+      () => normalizeValues2(isControlled ? value : uncontrolledValue),
       [isControlled, uncontrolledValue, value]
     );
     const selectedValueSet = useMemo(
@@ -10488,7 +10834,7 @@ var BaseMultiSelect = forwardRef(
       }
     };
     const commitValues = (nextValues) => {
-      const normalizedValues = normalizeValues(nextValues);
+      const normalizedValues = normalizeValues2(nextValues);
       if (!isControlled) setUncontrolledValue(normalizedValues);
       onValueChange?.(normalizedValues);
     };
@@ -10532,7 +10878,7 @@ var BaseMultiSelect = 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;
@@ -12352,7 +12698,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;
@@ -12531,7 +12877,7 @@ var BaseSelect = 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;
@@ -12837,7 +13183,7 @@ var BaseSelect = forwardRef(
                   {
                     value: option.value,
                     disabled: option.disabled,
-                    children: getOptionText2(option)
+                    children: getOptionText3(option)
                   },
                   option.value
                 ))
@@ -25361,6 +25707,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))"
@@ -25525,24 +25887,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__ */ jsxs(Fragment, { children: [
+    hasRenderableNode(icon) ? /* @__PURE__ */ 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__ */ jsx("span", { className: "min-w-0 truncate", children: label }),
+    hasRenderableNode(value) ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 tabular-nums text-muted-foreground", children: value }) : null
+  ] });
+  const disclosureIcon = disclosure ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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: [
@@ -25563,20 +26067,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();
@@ -25751,12 +26241,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__ */ jsxs(
                   "g",
@@ -25776,7 +26266,7 @@ function WorkbenchRadarMatrix({
                           r: radius + 10,
                           fill: "none",
                           strokeWidth: "2",
-                          style: { stroke: toneColorWithAlpha(tone, 0.48) }
+                          style: { stroke: workbenchVisualizationToneColorWithAlpha(tone, 0.48) }
                         }
                       ) : null,
                       /* @__PURE__ */ jsx("circle", { r: radius, strokeWidth: "1.25", style: pointStyle }),
@@ -25854,7 +26344,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
                 )),
@@ -25877,7 +26367,7 @@ function WorkbenchRadarMatrix({
         legend.length ? /* @__PURE__ */ 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__ */ jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: toneColor(tone) } }),
+            /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: workbenchVisualizationToneColor(tone) } }),
             item.label
           ] }, item.id);
         }) }) : null
@@ -31226,6 +31716,6 @@ function useDarkMode() {
   return { mode, setMode, resolvedMode };
 }
 
-export { AgentWorkbenchActivity, AgentWorkbenchExploreSidebar, AgentWorkbenchSidebar, AgentWorkbenchTaskDetails, AgentWorkbenchTool, AppHeader, AppLayout, AppShellSidebar, AppSidebar, ApplicationHandoffLink, BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListFooter, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseSystemState, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysProvider, MonkeysToastProvider, MonkeysToaster, NavButton, NavigationLayout, OverlayNodeHost, RenderNodeHost, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, UserAccountMenu, WorkbenchAssetGallery, WorkbenchCollection, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchEvidenceList, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchJourneyNavigation, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchMetricGrid, WorkbenchRadarFilterChip, WorkbenchRadarInspectorSection, WorkbenchRadarMatrix, WorkbenchRadarNavigation, WorkbenchRadarWorkspace, WorkbenchRankedList, WorkbenchRelationshipGraph, WorkbenchResizableSidebar, WorkbenchScatterPlot, WorkbenchSelectionTray, WorkbenchTableView, applyThemeTokens, browserOverlayHistoryAdapter, buildOverlayUrl, calculateHue, calculateLightness, calculateSaturation, cn2 as cn, compileThemeTokens, createAgentWorkbenchActivityModel, createAgentWorkbenchDetailsModel, createSolidColorScale, defaultMonkeysLocale, enUS, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getOverlayPresentationClassNames, getOverlayZIndex, getRenderNodeDataAttributes, getThemeTokenCssValue, isOverlayUrlActive, markDarkColor, mergeMonkeysLocaleMessages, resolveBaseAppearance, resolveDataExplorerAppearance, resolveMonkeysLocale, resolveRenderNodePolicyState, resolveToastVariantForMessage, sessionRenderNodeScrollRestoration, setTailwindTheme, toast, useDarkMode, useMonkeysBaseAppearance, useMonkeysComponentAttributes, useMonkeysDataExplorerAppearance, useMonkeysDirection, useMonkeysEnvironment, useMonkeysListFooter, useMonkeysLocale, useMonkeysLocaleMessages, useMonkeysPortalOptions, useMonkeysResolvedTheme, useMonkeysStatusStates, useToastFeed, useToastOnValue, zhCN };
+export { AgentWorkbenchActivity, AgentWorkbenchExploreSidebar, AgentWorkbenchSidebar, AgentWorkbenchTaskDetails, AgentWorkbenchTool, AppHeader, AppLayout, AppShellSidebar, AppSidebar, ApplicationHandoffLink, BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListFooter, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseSystemState, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysProvider, MonkeysToastProvider, MonkeysToaster, NavButton, NavigationLayout, OverlayNodeHost, RenderNodeHost, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, UnifiedDropdown, UserAccountMenu, WorkbenchAssetGallery, WorkbenchCollection, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchEvidenceList, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchJourneyNavigation, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchMetricGrid, WorkbenchRadarFilterChip, WorkbenchRadarFilterRow, WorkbenchRadarInspectorSection, WorkbenchRadarMatrix, WorkbenchRadarNavigation, WorkbenchRadarWorkspace, WorkbenchRankedList, WorkbenchRelationshipGraph, WorkbenchResizableSidebar, WorkbenchScatterPlot, WorkbenchSelectionTray, WorkbenchTableView, applyThemeTokens, browserOverlayHistoryAdapter, buildOverlayUrl, calculateHue, calculateLightness, calculateSaturation, cn2 as cn, compileThemeTokens, createAgentWorkbenchActivityModel, createAgentWorkbenchDetailsModel, createSolidColorScale, defaultMonkeysLocale, enUS, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getOverlayPresentationClassNames, getOverlayZIndex, getRenderNodeDataAttributes, getThemeTokenCssValue, isOverlayUrlActive, markDarkColor, mergeMonkeysLocaleMessages, resolveBaseAppearance, resolveDataExplorerAppearance, resolveMonkeysLocale, resolveRenderNodePolicyState, resolveToastVariantForMessage, sessionRenderNodeScrollRestoration, setTailwindTheme, toast, useDarkMode, useMonkeysBaseAppearance, useMonkeysComponentAttributes, useMonkeysDataExplorerAppearance, useMonkeysDirection, useMonkeysEnvironment, useMonkeysListFooter, useMonkeysLocale, useMonkeysLocaleMessages, useMonkeysPortalOptions, useMonkeysResolvedTheme, useMonkeysStatusStates, useToastFeed, useToastOnValue, zhCN };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map