@nurix/ui-component-library 1.1.3-stage.108 → 1.1.3-stage.109

package/dist/index.d.mts

@@ -9,7 +9,7 @@ import { LucideIcon } from 'lucide-react';
 import { Schema } from 'ajv';
 import { OnMount } from '@monaco-editor/react';
 
-type ButtonBorderRadius = "none" | "soft" | "rounded";
+type ButtonBorderRadius = "none" | "soft" | "rounded" | "nestedLeft" | "nestedMiddle" | "nestedRight";
 type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "link" | "iconPrimary" | "iconSecondary" | "iconOutline" | "iconLink";
 type ButtonSize = "lg" | "default" | "sm" | "xs" | "link" | "icon" | "iconMd" | "iconSm" | "iconXs";
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -33,6 +33,16 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface NestedButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+}
+/**
+ * NestedButtonGroup — renders any number of `<Button>` children as one pill.
+ * Assigns the correct `button_border_radius` (nestedLeft / nestedMiddle /
+ * nestedRight) per position and overlaps borders by -1px so the shared edge
+ * draws once. Figma: 5490:33596.
+ */
+declare const NestedButtonGroup: React$1.ForwardRefExoticComponent<NestedButtonGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type InputBorderRadius = "none" | "soft" | "rounded" | "pill";
 type InputVariant = "grey" | "white";
@@ -1606,11 +1616,8 @@ interface ShowToastOptions extends Omit<ToastProps, "onCancel"> {
 
 /**
  * Place `<Toaster />` once near the root of your app (inside `LegoLandWrapper`).
- * It is a thin wrapper around Sonner's Toaster with sensible defaults for this
- * design system.
  *
  * @example
- * // In your app root:
  * <LegoLandWrapper>
  *   <Toaster />
  *   <App />
@@ -1986,6 +1993,11 @@ interface DataTableProps<TRow> {
      * When true, the header row stays fixed at the top while the table body scrolls.
      */
     stickyHeader?: boolean;
+    /**
+     * Optional React node to render in the header's top-right corner.
+     * Useful for header-level actions like column filters or settings.
+     */
+    headerAction?: React$1.ReactNode;
     className?: string;
     /**
      * When true, shows skeleton loading state with 10 rows.
@@ -2019,7 +2031,7 @@ declare namespace Pagination {
  *
  * Figma reference node: 3338:6396
  */
-declare function DataTable<TRow>({ columns, data, pinnedColumns, showCheckbox, actions, getRowId, selectedRows, onSelectionChange, onSortChange, showPagination, currentPage, rowsPerPage, total, onPageChange, onRowsPerPageChange, entityName, showBorder, stickyHeader, className, loading, onRowClick, }: DataTableProps<TRow>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TRow>({ columns, data, pinnedColumns, showCheckbox, actions, getRowId, selectedRows, onSelectionChange, onSortChange, showPagination, currentPage, rowsPerPage, total, onPageChange, onRowsPerPageChange, entityName, showBorder, stickyHeader, headerAction, className, loading, onRowClick, }: DataTableProps<TRow>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -2030,6 +2042,19 @@ declare namespace DataTable {
 interface FilterItem<T = string> {
     value: T;
     label: string;
+    /** Optional icon for this item (per-item icon support - feature 5) */
+    icon?: LucideIcon | React$1.ReactNode;
+    /** Show loading state for this item (per-item loading - feature 6) */
+    loading?: boolean;
+    /** Optional custom display node to render instead of plain label (e.g. ratings with star + color pill) */
+    labelNode?: React$1.ReactNode;
+}
+/**
+ * Filter item with section grouping (feature 4)
+ */
+interface FilterItemWithSection<T = string> {
+    sectionLabel: string;
+    items: FilterItem<T>[];
 }
 /**
  * Props for FilterSelect component
@@ -2041,8 +2066,8 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     icon?: LucideIcon;
     /** Array of selected item values */
     selectedItems?: T[];
-    /** Available items for selection */
-    items: FilterItem<T>[];
+    /** Available items for selection (flat or sectioned) - feature 4: section grouping */
+    items: (FilterItem<T> | FilterItemWithSection<T>)[];
     /** Enable drag-and-drop reordering (default: false) */
     draggable?: boolean;
     /** To show clear button regardless of selected items or text / date content (default: true) */
@@ -2066,25 +2091,41 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     /** Show loading spinner in dropdown */
     loading?: boolean;
     onRemoveAll?: () => void;
-    /** Type of filter select: "list" (default), "text", "text_with_operands", or "date" */
-    type?: "list" | "text" | "text_with_operands" | "date";
-    /** Controlled text value for textarea/input (for "text" and "text_with_operands" types) */
+    /** Type of filter select: "list" (default), "text", "text_with_operands", "numeric", "numeric_with_operands", or "date" */
+    type?: "list" | "text" | "text_with_operands" | "numeric" | "numeric_with_operands" | "date";
+    /** Controlled text value for textarea/input (for "text", "text_with_operands", and "numeric" types) */
     text?: string;
-    /** Callback when text changes (for "text" and "text_with_operands" types) */
+    /** Callback when text changes (for "text", "text_with_operands", and "numeric" types) */
     onTextChange?: (text: string) => void;
-    /** Selected operand value (for "text_with_operands" type) */
+    /** Selected operand value (for "text_with_operands" type) - feature 2: operands as prop */
     operand?: string;
     /** Callback when operand changes (for "text_with_operands" type) */
     onOperandChange?: (operand: string) => void;
-    /** Available operands (for "text_with_operands" type) */
+    /** Available operands with label and value - feature 2: operands support for conversation logs */
     operands?: {
         value: string;
         label: string;
     }[];
-    /** Placeholder text for textarea/input (for "text" and "text_with_operands" types) */
+    /** Placeholder text for textarea/input (for "text", "text_with_operands", and "numeric" types) */
     textPlaceholder?: string;
-    /** Placeholder for operand select (for "text_with_operands" type, default: "") */
+    /** Placeholder for operand select (for "text_with_operands"/"numeric_with_operands" type, default: "") */
     operandPlaceholder?: string;
+    /** Unit label suffix shown inside numeric input (e.g. "sec", "min") */
+    unitLabel?: string;
+    /** Enable range mode for "numeric_with_operands" - shows min/max inputs */
+    isRangeMode?: boolean;
+    /** Range min value (for numeric_with_operands in range mode) */
+    rangeMin?: string;
+    /** Range max value (for numeric_with_operands in range mode) */
+    rangeMax?: string;
+    /** Callback when range min changes */
+    onRangeMinChange?: (value: string) => void;
+    /** Callback when range max changes */
+    onRangeMaxChange?: (value: string) => void;
+    /** Feature 1: Search functionality - show search input to filter list items */
+    showSearch?: boolean;
+    /** Feature 1: Search placeholder text (default: "Search...") */
+    searchPlaceholder?: string;
     /** Date range value (for "date" type): { start, end } */
     date?: {
         start?: Date;
@@ -2099,6 +2140,8 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     datePresets?: boolean | DatePreset[];
     /** Show time picker in date filter (default: true) */
     showTime?: boolean;
+    /** Feature 7: Empty state label when no items available */
+    emptyStateLabel?: string;
     /** Additional className for the trigger button */
     triggerClassName?: string;
     /** Additional className for the dropdown content */
@@ -2127,6 +2170,12 @@ interface FilterListItemProps<T = string> {
     draggable?: boolean;
     /** Selection handler */
     onSelect?: (value: T) => void;
+    /** Feature 5: Optional icon for this item */
+    icon?: React$1.ComponentType<any> | React$1.ReactNode;
+    /** Feature 6: Show loading spinner on this item */
+    loading?: boolean;
+    /** Optional custom display node replacing the plain label (e.g. rating pill) */
+    labelNode?: React$1.ReactNode;
     /** Hover state (for stories) */
     hover?: boolean;
     /** Additional className */
@@ -2145,6 +2194,49 @@ declare const FilterListItem: React$1.ForwardRefExoticComponent<FilterListItemPr
     isDragOver?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Option for the left-side toggle dropdown (e.g., Agent/Crew).
+ */
+interface CompoundFilterToggleOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Icon shown inside the dropdown menu next to the label */
+    icon?: LucideIcon | React$1.ReactNode;
+}
+interface CompoundFilterSelectProps<T extends string = string> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Options for the left-side toggle dropdown */
+    options: CompoundFilterToggleOption<T>[];
+    /** Current selected value for the left toggle */
+    value: T;
+    /** Callback when left toggle value changes */
+    onChange: (value: T) => void;
+    /**
+     * Leading icon shown on the left pill (e.g., an icon representing the current selection).
+     * If omitted, falls back to the icon on the currently-selected option.
+     */
+    leadingIcon?: LucideIcon | React$1.ReactNode;
+    /** Optional label shown on the left pill next to the icon. If omitted, only icon + chevron are shown (compact mode). */
+    leftLabel?: string;
+    /** Right-side content, typically a <FilterSelect /> */
+    children?: React$1.ReactNode;
+    /** Disable the left toggle */
+    disabled?: boolean;
+}
+/**
+ * CompoundFilterSelect
+ *
+ * A compound filter comprising:
+ *  - Left pill: a dropdown toggle (e.g., Agent / Crew) with its own rounded-left border
+ *  - Right pill: any content (typically a <FilterSelect />) with its own rounded-right border
+ *
+ * The two pills overlap by 1px so their borders merge visually into a single continuous pill.
+ * Per Figma spec (1XTtQGgJ2Tb0wycZ7O1Ez9 · 5427:32324).
+ */
+declare function CompoundFilterSelect<T extends string = string>({ options, value, onChange, leadingIcon, leftLabel, children, disabled, className, ...props }: CompoundFilterSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace CompoundFilterSelect {
+    var displayName: string;
+}
+
 interface ButtonListItem {
     value: string;
     label: string;
@@ -2340,8 +2432,105 @@ interface KeyValueEditorProps {
 /**
  * KeyValueEditor - Table-style key-value pair editor.
  * Renders header (Key, Value) and editable rows with delete on hover.
- * Figma reference: 258:10275
+ * Figma reference: 5905:39527
  */
 declare const KeyValueEditor: React$1.ForwardRefExoticComponent<KeyValueEditorProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };
+type PopoverSide = "top" | "right" | "bottom" | "left";
+type PopoverAlign = "start" | "center" | "end";
+type PopoverShadow = "none" | "xs" | "sm" | "md" | "lg";
+interface PopoverProps {
+    /** Controlled open state. If omitted, component is uncontrolled. */
+    open?: boolean;
+    /** Called when open state changes (both controlled and uncontrolled). */
+    onOpenChange?: (open: boolean) => void;
+    /** Uncontrolled default open. */
+    defaultOpen?: boolean;
+    /** The trigger element (e.g. button). Rendered in place. */
+    trigger: React$1.ReactNode;
+    /** Popover body content — can be anything. */
+    children: React$1.ReactNode;
+    /**
+     * Optional search input rendered at the top of the popover.
+     * When provided, renders a search bar above `children`.
+     */
+    search?: {
+        /** Controlled search value */
+        value?: string;
+        /** Called when the search input changes */
+        onValueChange?: (value: string) => void;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Auto-focus the search input when popover opens */
+        autoFocus?: boolean;
+    };
+    /**
+     * Position relative to trigger.
+     * @default "bottom"
+     */
+    side?: PopoverSide;
+    /**
+     * Alignment along the side.
+     * @default "start"
+     */
+    align?: PopoverAlign;
+    /**
+     * Offset (px) between trigger and popover.
+     * @default 4
+     */
+    sideOffset?: number;
+    /**
+     * Show border around the popover container.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Shadow variant.
+     * @default "md"
+     */
+    shadow?: PopoverShadow;
+    /** Width (px or CSS value). If omitted, popover sizes to content. */
+    width?: number | string;
+    /** Min width (defaults to trigger width if omitted) */
+    minWidth?: number | string;
+    /** Max height — content scrolls beyond this. */
+    maxHeight?: number | string;
+    /** Additional className for the popover container. */
+    className?: string;
+    /** Additional className for the outer wrapper (trigger + popover). */
+    wrapperClassName?: string;
+    /** Close popover on outside click. @default true */
+    closeOnOutsideClick?: boolean;
+    /** Close popover on Escape key. @default true */
+    closeOnEscape?: boolean;
+}
+
+/**
+ * Popover — generic floating container.
+ *
+ * Supports:
+ * - Any children as content
+ * - Optional search bar at the top
+ * - Border / shadow variants
+ * - Controlled or uncontrolled open state
+ * - Positioning (side + align)
+ * - Click-outside / Escape to close
+ *
+ * Figma reference: 43:10346 (Menu Dropdown)
+ *
+ * @example
+ * <Popover trigger={<Button>Open</Button>}>
+ *   <div>Any content here</div>
+ * </Popover>
+ *
+ * @example with search
+ * <Popover
+ *   trigger={<Button>Filter</Button>}
+ *   search={{ value: q, onValueChange: setQ, placeholder: "Search…" }}
+ * >
+ *   <ListItems />
+ * </Popover>
+ */
+declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, CompoundFilterSelect, type CompoundFilterSelectProps, type CompoundFilterToggleOption, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, type FilterItemWithSection, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NestedButtonGroup, type NestedButtonGroupProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, Popover, type PopoverAlign, type PopoverProps, type PopoverShadow, type PopoverSide, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { LucideIcon } from 'lucide-react';
 import { Schema } from 'ajv';
 import { OnMount } from '@monaco-editor/react';
 
-type ButtonBorderRadius = "none" | "soft" | "rounded";
+type ButtonBorderRadius = "none" | "soft" | "rounded" | "nestedLeft" | "nestedMiddle" | "nestedRight";
 type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "link" | "iconPrimary" | "iconSecondary" | "iconOutline" | "iconLink";
 type ButtonSize = "lg" | "default" | "sm" | "xs" | "link" | "icon" | "iconMd" | "iconSm" | "iconXs";
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -33,6 +33,16 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface NestedButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+}
+/**
+ * NestedButtonGroup — renders any number of `<Button>` children as one pill.
+ * Assigns the correct `button_border_radius` (nestedLeft / nestedMiddle /
+ * nestedRight) per position and overlaps borders by -1px so the shared edge
+ * draws once. Figma: 5490:33596.
+ */
+declare const NestedButtonGroup: React$1.ForwardRefExoticComponent<NestedButtonGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type InputBorderRadius = "none" | "soft" | "rounded" | "pill";
 type InputVariant = "grey" | "white";
@@ -1606,11 +1616,8 @@ interface ShowToastOptions extends Omit<ToastProps, "onCancel"> {
 
 /**
  * Place `<Toaster />` once near the root of your app (inside `LegoLandWrapper`).
- * It is a thin wrapper around Sonner's Toaster with sensible defaults for this
- * design system.
  *
  * @example
- * // In your app root:
  * <LegoLandWrapper>
  *   <Toaster />
  *   <App />
@@ -1986,6 +1993,11 @@ interface DataTableProps<TRow> {
      * When true, the header row stays fixed at the top while the table body scrolls.
      */
     stickyHeader?: boolean;
+    /**
+     * Optional React node to render in the header's top-right corner.
+     * Useful for header-level actions like column filters or settings.
+     */
+    headerAction?: React$1.ReactNode;
     className?: string;
     /**
      * When true, shows skeleton loading state with 10 rows.
@@ -2019,7 +2031,7 @@ declare namespace Pagination {
  *
  * Figma reference node: 3338:6396
  */
-declare function DataTable<TRow>({ columns, data, pinnedColumns, showCheckbox, actions, getRowId, selectedRows, onSelectionChange, onSortChange, showPagination, currentPage, rowsPerPage, total, onPageChange, onRowsPerPageChange, entityName, showBorder, stickyHeader, className, loading, onRowClick, }: DataTableProps<TRow>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TRow>({ columns, data, pinnedColumns, showCheckbox, actions, getRowId, selectedRows, onSelectionChange, onSortChange, showPagination, currentPage, rowsPerPage, total, onPageChange, onRowsPerPageChange, entityName, showBorder, stickyHeader, headerAction, className, loading, onRowClick, }: DataTableProps<TRow>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -2030,6 +2042,19 @@ declare namespace DataTable {
 interface FilterItem<T = string> {
     value: T;
     label: string;
+    /** Optional icon for this item (per-item icon support - feature 5) */
+    icon?: LucideIcon | React$1.ReactNode;
+    /** Show loading state for this item (per-item loading - feature 6) */
+    loading?: boolean;
+    /** Optional custom display node to render instead of plain label (e.g. ratings with star + color pill) */
+    labelNode?: React$1.ReactNode;
+}
+/**
+ * Filter item with section grouping (feature 4)
+ */
+interface FilterItemWithSection<T = string> {
+    sectionLabel: string;
+    items: FilterItem<T>[];
 }
 /**
  * Props for FilterSelect component
@@ -2041,8 +2066,8 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     icon?: LucideIcon;
     /** Array of selected item values */
     selectedItems?: T[];
-    /** Available items for selection */
-    items: FilterItem<T>[];
+    /** Available items for selection (flat or sectioned) - feature 4: section grouping */
+    items: (FilterItem<T> | FilterItemWithSection<T>)[];
     /** Enable drag-and-drop reordering (default: false) */
     draggable?: boolean;
     /** To show clear button regardless of selected items or text / date content (default: true) */
@@ -2066,25 +2091,41 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     /** Show loading spinner in dropdown */
     loading?: boolean;
     onRemoveAll?: () => void;
-    /** Type of filter select: "list" (default), "text", "text_with_operands", or "date" */
-    type?: "list" | "text" | "text_with_operands" | "date";
-    /** Controlled text value for textarea/input (for "text" and "text_with_operands" types) */
+    /** Type of filter select: "list" (default), "text", "text_with_operands", "numeric", "numeric_with_operands", or "date" */
+    type?: "list" | "text" | "text_with_operands" | "numeric" | "numeric_with_operands" | "date";
+    /** Controlled text value for textarea/input (for "text", "text_with_operands", and "numeric" types) */
     text?: string;
-    /** Callback when text changes (for "text" and "text_with_operands" types) */
+    /** Callback when text changes (for "text", "text_with_operands", and "numeric" types) */
     onTextChange?: (text: string) => void;
-    /** Selected operand value (for "text_with_operands" type) */
+    /** Selected operand value (for "text_with_operands" type) - feature 2: operands as prop */
     operand?: string;
     /** Callback when operand changes (for "text_with_operands" type) */
     onOperandChange?: (operand: string) => void;
-    /** Available operands (for "text_with_operands" type) */
+    /** Available operands with label and value - feature 2: operands support for conversation logs */
     operands?: {
         value: string;
         label: string;
     }[];
-    /** Placeholder text for textarea/input (for "text" and "text_with_operands" types) */
+    /** Placeholder text for textarea/input (for "text", "text_with_operands", and "numeric" types) */
     textPlaceholder?: string;
-    /** Placeholder for operand select (for "text_with_operands" type, default: "") */
+    /** Placeholder for operand select (for "text_with_operands"/"numeric_with_operands" type, default: "") */
     operandPlaceholder?: string;
+    /** Unit label suffix shown inside numeric input (e.g. "sec", "min") */
+    unitLabel?: string;
+    /** Enable range mode for "numeric_with_operands" - shows min/max inputs */
+    isRangeMode?: boolean;
+    /** Range min value (for numeric_with_operands in range mode) */
+    rangeMin?: string;
+    /** Range max value (for numeric_with_operands in range mode) */
+    rangeMax?: string;
+    /** Callback when range min changes */
+    onRangeMinChange?: (value: string) => void;
+    /** Callback when range max changes */
+    onRangeMaxChange?: (value: string) => void;
+    /** Feature 1: Search functionality - show search input to filter list items */
+    showSearch?: boolean;
+    /** Feature 1: Search placeholder text (default: "Search...") */
+    searchPlaceholder?: string;
     /** Date range value (for "date" type): { start, end } */
     date?: {
         start?: Date;
@@ -2099,6 +2140,8 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     datePresets?: boolean | DatePreset[];
     /** Show time picker in date filter (default: true) */
     showTime?: boolean;
+    /** Feature 7: Empty state label when no items available */
+    emptyStateLabel?: string;
     /** Additional className for the trigger button */
     triggerClassName?: string;
     /** Additional className for the dropdown content */
@@ -2127,6 +2170,12 @@ interface FilterListItemProps<T = string> {
     draggable?: boolean;
     /** Selection handler */
     onSelect?: (value: T) => void;
+    /** Feature 5: Optional icon for this item */
+    icon?: React$1.ComponentType<any> | React$1.ReactNode;
+    /** Feature 6: Show loading spinner on this item */
+    loading?: boolean;
+    /** Optional custom display node replacing the plain label (e.g. rating pill) */
+    labelNode?: React$1.ReactNode;
     /** Hover state (for stories) */
     hover?: boolean;
     /** Additional className */
@@ -2145,6 +2194,49 @@ declare const FilterListItem: React$1.ForwardRefExoticComponent<FilterListItemPr
     isDragOver?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Option for the left-side toggle dropdown (e.g., Agent/Crew).
+ */
+interface CompoundFilterToggleOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Icon shown inside the dropdown menu next to the label */
+    icon?: LucideIcon | React$1.ReactNode;
+}
+interface CompoundFilterSelectProps<T extends string = string> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Options for the left-side toggle dropdown */
+    options: CompoundFilterToggleOption<T>[];
+    /** Current selected value for the left toggle */
+    value: T;
+    /** Callback when left toggle value changes */
+    onChange: (value: T) => void;
+    /**
+     * Leading icon shown on the left pill (e.g., an icon representing the current selection).
+     * If omitted, falls back to the icon on the currently-selected option.
+     */
+    leadingIcon?: LucideIcon | React$1.ReactNode;
+    /** Optional label shown on the left pill next to the icon. If omitted, only icon + chevron are shown (compact mode). */
+    leftLabel?: string;
+    /** Right-side content, typically a <FilterSelect /> */
+    children?: React$1.ReactNode;
+    /** Disable the left toggle */
+    disabled?: boolean;
+}
+/**
+ * CompoundFilterSelect
+ *
+ * A compound filter comprising:
+ *  - Left pill: a dropdown toggle (e.g., Agent / Crew) with its own rounded-left border
+ *  - Right pill: any content (typically a <FilterSelect />) with its own rounded-right border
+ *
+ * The two pills overlap by 1px so their borders merge visually into a single continuous pill.
+ * Per Figma spec (1XTtQGgJ2Tb0wycZ7O1Ez9 · 5427:32324).
+ */
+declare function CompoundFilterSelect<T extends string = string>({ options, value, onChange, leadingIcon, leftLabel, children, disabled, className, ...props }: CompoundFilterSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace CompoundFilterSelect {
+    var displayName: string;
+}
+
 interface ButtonListItem {
     value: string;
     label: string;
@@ -2340,8 +2432,105 @@ interface KeyValueEditorProps {
 /**
  * KeyValueEditor - Table-style key-value pair editor.
  * Renders header (Key, Value) and editable rows with delete on hover.
- * Figma reference: 258:10275
+ * Figma reference: 5905:39527
  */
 declare const KeyValueEditor: React$1.ForwardRefExoticComponent<KeyValueEditorProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };
+type PopoverSide = "top" | "right" | "bottom" | "left";
+type PopoverAlign = "start" | "center" | "end";
+type PopoverShadow = "none" | "xs" | "sm" | "md" | "lg";
+interface PopoverProps {
+    /** Controlled open state. If omitted, component is uncontrolled. */
+    open?: boolean;
+    /** Called when open state changes (both controlled and uncontrolled). */
+    onOpenChange?: (open: boolean) => void;
+    /** Uncontrolled default open. */
+    defaultOpen?: boolean;
+    /** The trigger element (e.g. button). Rendered in place. */
+    trigger: React$1.ReactNode;
+    /** Popover body content — can be anything. */
+    children: React$1.ReactNode;
+    /**
+     * Optional search input rendered at the top of the popover.
+     * When provided, renders a search bar above `children`.
+     */
+    search?: {
+        /** Controlled search value */
+        value?: string;
+        /** Called when the search input changes */
+        onValueChange?: (value: string) => void;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Auto-focus the search input when popover opens */
+        autoFocus?: boolean;
+    };
+    /**
+     * Position relative to trigger.
+     * @default "bottom"
+     */
+    side?: PopoverSide;
+    /**
+     * Alignment along the side.
+     * @default "start"
+     */
+    align?: PopoverAlign;
+    /**
+     * Offset (px) between trigger and popover.
+     * @default 4
+     */
+    sideOffset?: number;
+    /**
+     * Show border around the popover container.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Shadow variant.
+     * @default "md"
+     */
+    shadow?: PopoverShadow;
+    /** Width (px or CSS value). If omitted, popover sizes to content. */
+    width?: number | string;
+    /** Min width (defaults to trigger width if omitted) */
+    minWidth?: number | string;
+    /** Max height — content scrolls beyond this. */
+    maxHeight?: number | string;
+    /** Additional className for the popover container. */
+    className?: string;
+    /** Additional className for the outer wrapper (trigger + popover). */
+    wrapperClassName?: string;
+    /** Close popover on outside click. @default true */
+    closeOnOutsideClick?: boolean;
+    /** Close popover on Escape key. @default true */
+    closeOnEscape?: boolean;
+}
+
+/**
+ * Popover — generic floating container.
+ *
+ * Supports:
+ * - Any children as content
+ * - Optional search bar at the top
+ * - Border / shadow variants
+ * - Controlled or uncontrolled open state
+ * - Positioning (side + align)
+ * - Click-outside / Escape to close
+ *
+ * Figma reference: 43:10346 (Menu Dropdown)
+ *
+ * @example
+ * <Popover trigger={<Button>Open</Button>}>
+ *   <div>Any content here</div>
+ * </Popover>
+ *
+ * @example with search
+ * <Popover
+ *   trigger={<Button>Filter</Button>}
+ *   search={{ value: q, onValueChange: setQ, placeholder: "Search…" }}
+ * >
+ *   <ListItems />
+ * </Popover>
+ */
+declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, CompoundFilterSelect, type CompoundFilterSelectProps, type CompoundFilterToggleOption, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, type FilterItemWithSection, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NestedButtonGroup, type NestedButtonGroupProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, Popover, type PopoverAlign, type PopoverProps, type PopoverShadow, type PopoverSide, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };