@nubase/frontend 0.1.19 → 0.1.20

package/dist/index.mjs

@@ -18128,16 +18128,624 @@ var NubaseApp = ({ config }) => {
   ] }) });
 };
 
+// src/components/search-controls/SearchFilterBar.tsx
+import { cva as cva15 } from "class-variance-authority";
+import { debounce as debounce2 } from "lodash-es";
+import { Search as Search2, XIcon } from "lucide-react";
+import * as React8 from "react";
+import { jsx as jsx122, jsxs as jsxs62 } from "react/jsx-runtime";
+var searchFilterBarVariants = cva15(["flex items-center gap-2", "flex-wrap"]);
+var searchFilterBarInputVariants = cva15([
+  // Layout & Sizing
+  "flex h-9 min-w-0",
+  // Spacing & Borders (pl-10 for search icon)
+  "pl-10 pr-3 py-1 rounded-md border border-input",
+  // Background & Text
+  "bg-transparent text-base",
+  "dark:bg-input/30",
+  // Visual Effects
+  "shadow-xs outline-none",
+  "transition-[color,box-shadow]",
+  // Placeholder & Selection
+  "placeholder:text-muted-foreground",
+  "selection:bg-primary selection:text-primary-foreground",
+  // Focus State
+  "focus-visible:border-ring",
+  "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  // Disabled State
+  "disabled:pointer-events-none",
+  "disabled:cursor-not-allowed",
+  "disabled:opacity-50"
+]);
+var searchFilterBarClearButtonVariants = cva15([
+  "inline-flex items-center gap-1 h-9 px-3",
+  "text-sm font-medium text-muted-foreground",
+  "hover:text-foreground",
+  "transition-colors",
+  "cursor-pointer",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 rounded-md",
+  "disabled:pointer-events-none disabled:opacity-50"
+]);
+var SearchFilterBar = React8.forwardRef(
+  ({
+    searchValue,
+    onSearchChange,
+    searchPlaceholder = "Search...",
+    searchWidth = 200,
+    searchDebounceMs = 300,
+    children,
+    onClearFilters,
+    showClearFilters = true,
+    clearFiltersLabel = "Clear filters",
+    disabled = false,
+    className
+  }, ref) => {
+    const inputRef = React8.useRef(null);
+    const [internalValue, setInternalValue] = React8.useState(searchValue);
+    React8.useEffect(() => {
+      setInternalValue(searchValue);
+    }, [searchValue]);
+    const debouncedOnChange = React8.useMemo(
+      () => searchDebounceMs > 0 ? debounce2((value) => onSearchChange(value), searchDebounceMs) : null,
+      [onSearchChange, searchDebounceMs]
+    );
+    React8.useEffect(() => {
+      return () => {
+        debouncedOnChange?.cancel();
+      };
+    }, [debouncedOnChange]);
+    const handleSearchChange = (e) => {
+      const newValue = e.target.value;
+      setInternalValue(newValue);
+      if (debouncedOnChange) {
+        debouncedOnChange(newValue);
+      } else {
+        onSearchChange(newValue);
+      }
+    };
+    const handleClearFilters = () => {
+      debouncedOnChange?.cancel();
+      onClearFilters?.();
+    };
+    const searchWidthStyle = typeof searchWidth === "number" ? `${searchWidth}px` : searchWidth;
+    return /* @__PURE__ */ jsxs62(
+      "div",
+      {
+        ref,
+        className: cn(searchFilterBarVariants(), className),
+        "data-slot": "search-filter-bar",
+        children: [
+          /* @__PURE__ */ jsxs62("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx122(
+              "input",
+              {
+                ref: inputRef,
+                type: "search",
+                value: internalValue,
+                onChange: handleSearchChange,
+                placeholder: searchPlaceholder,
+                disabled,
+                className: cn(searchFilterBarInputVariants()),
+                style: { width: searchWidthStyle },
+                "data-slot": "search-filter-bar-input"
+              }
+            ),
+            /* @__PURE__ */ jsx122("div", { className: "absolute top-1/2 left-3 transform -translate-y-1/2 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsx122(Search2, { className: "h-4 w-4" }) })
+          ] }),
+          children,
+          showClearFilters && /* @__PURE__ */ jsxs62(
+            "button",
+            {
+              type: "button",
+              onClick: handleClearFilters,
+              disabled,
+              className: cn(searchFilterBarClearButtonVariants()),
+              "data-slot": "search-filter-bar-clear",
+              children: [
+                /* @__PURE__ */ jsx122(XIcon, { className: "h-4 w-4" }),
+                clearFiltersLabel
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchFilterBar.displayName = "SearchFilterBar";
+
+// src/components/search-controls/SearchFilterDropdown.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cva as cva16 } from "class-variance-authority";
+import { ChevronDownIcon, TypeIcon } from "lucide-react";
+import * as React9 from "react";
+import { jsx as jsx123, jsxs as jsxs63 } from "react/jsx-runtime";
+var searchFilterTriggerVariants = cva16(
+  [
+    // Base - matching TextInput height/roundness
+    "inline-flex items-center gap-1.5 h-9 px-3 rounded-md",
+    "text-sm font-medium",
+    "border transition-all",
+    "cursor-pointer",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      isActive: {
+        true: "bg-primary/10 text-primary border-primary/30 hover:bg-primary/15",
+        false: "bg-transparent text-foreground border-input hover:bg-muted dark:bg-input/30"
+      }
+    },
+    defaultVariants: {
+      isActive: false
+    }
+  }
+);
+var searchFilterContentVariants = cva16([
+  // Background & Border
+  "bg-popover text-popover-foreground",
+  "border rounded-md shadow-md",
+  // Positioning
+  "z-50",
+  // Animations
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2",
+  "data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2",
+  "data-[side=top]:slide-in-from-bottom-2"
+]);
+var SearchFilterBadge = ({ count }) => /* @__PURE__ */ jsx123("span", { className: "ml-0.5 px-1.5 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded-full min-w-5 h-5 inline-flex items-center justify-center", children: count });
+var SearchFilterCheckIndicator = () => /* @__PURE__ */ jsx123(
+  "span",
+  {
+    className: "ml-0.5 px-1.5 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded-full min-w-5 h-5 inline-flex items-center justify-center",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx123(TypeIcon, { className: "h-3 w-3" })
+  }
+);
+var SearchFilterChevron = ({ isOpen }) => /* @__PURE__ */ jsx123(
+  ChevronDownIcon,
+  {
+    className: cn(
+      "h-4 w-4 shrink-0 transition-transform duration-200",
+      isOpen && "rotate-180"
+    ),
+    "aria-hidden": "true"
+  }
+);
+var SearchFilterDropdown = React9.forwardRef(
+  ({
+    label,
+    isActive = false,
+    activeCount,
+    showDotIndicator = false,
+    children,
+    dropdownWidth = "auto",
+    onOpenChange,
+    open,
+    disabled = false,
+    className
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = React9.useState(false);
+    const triggerRef = React9.useRef(null);
+    React9.useImperativeHandle(
+      ref,
+      () => triggerRef.current
+    );
+    const isControlled = open !== void 0;
+    const isOpen = isControlled ? open : internalOpen;
+    const handleOpenChange = (newOpen) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    };
+    const getContentStyle = () => {
+      if (dropdownWidth === "auto") {
+        return { minWidth: "200px" };
+      }
+      if (dropdownWidth === "trigger") {
+        return { width: triggerRef.current?.offsetWidth ?? "auto" };
+      }
+      return { width: `${dropdownWidth}px` };
+    };
+    return /* @__PURE__ */ jsxs63(PopoverPrimitive.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx123(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs63(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          disabled,
+          className: cn(searchFilterTriggerVariants({ isActive }), className),
+          "data-slot": "search-filter-trigger",
+          children: [
+            /* @__PURE__ */ jsx123("span", { className: "truncate", children: label }),
+            isActive && showDotIndicator && /* @__PURE__ */ jsx123(SearchFilterCheckIndicator, {}),
+            isActive && !showDotIndicator && activeCount !== void 0 && activeCount > 0 && /* @__PURE__ */ jsx123(SearchFilterBadge, { count: activeCount }),
+            /* @__PURE__ */ jsx123(SearchFilterChevron, { isOpen })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx123(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx123(
+        PopoverPrimitive.Content,
+        {
+          sideOffset: 4,
+          align: "start",
+          className: cn(searchFilterContentVariants()),
+          style: getContentStyle(),
+          "data-slot": "search-filter-content",
+          children
+        }
+      ) })
+    ] });
+  }
+);
+SearchFilterDropdown.displayName = "SearchFilterDropdown";
+
+// src/components/search-controls/SelectFilter.tsx
+import { cva as cva17 } from "class-variance-authority";
+import * as React10 from "react";
+import { jsx as jsx124, jsxs as jsxs64 } from "react/jsx-runtime";
+var optionVariants3 = cva17(
+  [
+    // Layout
+    "flex items-center gap-2 px-3 py-2",
+    // Interaction
+    "cursor-pointer select-none",
+    // Visual Effects
+    "transition-colors"
+  ],
+  {
+    variants: {
+      isHighlighted: {
+        true: "bg-muted",
+        false: "hover:bg-muted/50"
+      }
+    },
+    defaultVariants: {
+      isHighlighted: false
+    }
+  }
+);
+function SelectFilterInner({
+  label,
+  options,
+  value,
+  onChange,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  filterOptions,
+  emptyMessage = "No options found",
+  showSelectAllClear = false,
+  maxHeight = 300,
+  dropdownWidth = 280,
+  disabled = false,
+  className
+}, ref) {
+  const [searchQuery, setSearchQuery] = React10.useState("");
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React10.useState(-1);
+  const searchInputRef = React10.useRef(null);
+  const optionsContainerRef = React10.useRef(null);
+  const defaultFilterOptions = (opts, query) => {
+    if (!query.trim()) return opts;
+    const lowerQuery = query.toLowerCase();
+    return opts.filter(
+      (opt) => opt.label.toLowerCase().includes(lowerQuery) || opt.description?.toLowerCase().includes(lowerQuery)
+    );
+  };
+  const actualFilterOptions = filterOptions || defaultFilterOptions;
+  const filteredOptions = actualFilterOptions(options, searchQuery);
+  React10.useEffect(() => {
+    if (isOpen && searchable) {
+      const timer = setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, searchable]);
+  React10.useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery("");
+      setHighlightedIndex(-1);
+    }
+  }, [isOpen]);
+  const isValueSelected = (optionValue) => {
+    return value.some((v) => v === optionValue);
+  };
+  const toggleOption = (optionValue) => {
+    if (isValueSelected(optionValue)) {
+      onChange(value.filter((v) => v !== optionValue));
+    } else {
+      onChange([...value, optionValue]);
+    }
+  };
+  const selectAll = () => {
+    const allValues = filteredOptions.filter((opt) => !opt.disabled).map((opt) => opt.value);
+    const newValue = [.../* @__PURE__ */ new Set([...value, ...allValues])];
+    onChange(newValue);
+  };
+  const clearAll = () => {
+    const filteredValues = new Set(filteredOptions.map((opt) => opt.value));
+    const newValue = value.filter((v) => !filteredValues.has(v));
+    onChange(newValue);
+  };
+  const handleKeyDown = (e) => {
+    const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setHighlightedIndex(
+          (prev) => prev < enabledOptions.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex(
+          (prev) => prev > 0 ? prev - 1 : enabledOptions.length - 1
+        );
+        break;
+      case "Enter":
+      case " ": {
+        const highlightedOption = enabledOptions[highlightedIndex];
+        if (highlightedIndex >= 0 && highlightedOption) {
+          e.preventDefault();
+          toggleOption(highlightedOption.value);
+        }
+        break;
+      }
+      case "Escape":
+        setIsOpen(false);
+        break;
+    }
+  };
+  React10.useEffect(() => {
+    if (highlightedIndex >= 0 && optionsContainerRef.current) {
+      const container = optionsContainerRef.current;
+      const highlightedElement = container.children[highlightedIndex];
+      if (highlightedElement) {
+        highlightedElement.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [highlightedIndex]);
+  const isActive = value.length > 0;
+  const activeCount = value.length;
+  return /* @__PURE__ */ jsx124(
+    SearchFilterDropdown,
+    {
+      ref,
+      label,
+      isActive,
+      activeCount,
+      dropdownWidth,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      disabled,
+      className,
+      children: /* @__PURE__ */ jsxs64("div", { role: "listbox", "aria-multiselectable": "true", onKeyDown: handleKeyDown, children: [
+        searchable && /* @__PURE__ */ jsx124("div", { className: "p-2 border-b border-border", children: /* @__PURE__ */ jsx124(
+          SearchTextInput,
+          {
+            ref: searchInputRef,
+            value: searchQuery,
+            onChange: (e) => {
+              setSearchQuery(e.target.value);
+              setHighlightedIndex(-1);
+            },
+            placeholder: searchPlaceholder,
+            className: "w-full"
+          }
+        ) }),
+        showSelectAllClear && /* @__PURE__ */ jsxs64("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border text-sm", children: [
+          /* @__PURE__ */ jsx124(
+            "button",
+            {
+              type: "button",
+              onClick: selectAll,
+              className: "text-primary hover:underline focus:outline-none",
+              children: "Select All"
+            }
+          ),
+          /* @__PURE__ */ jsx124(
+            "button",
+            {
+              type: "button",
+              onClick: clearAll,
+              className: "text-muted-foreground hover:text-foreground focus:outline-none",
+              children: "Clear All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx124(
+          "div",
+          {
+            ref: optionsContainerRef,
+            className: "overflow-y-auto",
+            style: { maxHeight: `${maxHeight}px` },
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx124("div", { className: "px-3 py-4 text-sm text-muted-foreground text-center", children: emptyMessage }) : filteredOptions.map((option, index) => {
+              const isSelected = isValueSelected(option.value);
+              const isHighlighted = highlightedIndex === index;
+              return /* @__PURE__ */ jsxs64(
+                "div",
+                {
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": option.disabled,
+                  tabIndex: 0,
+                  className: cn(
+                    optionVariants3({ isHighlighted }),
+                    option.disabled && "opacity-50 cursor-not-allowed"
+                  ),
+                  onClick: () => {
+                    if (!option.disabled) {
+                      toggleOption(option.value);
+                    }
+                  },
+                  onKeyDown: (e) => {
+                    if ((e.key === "Enter" || e.key === " ") && !option.disabled) {
+                      e.preventDefault();
+                      toggleOption(option.value);
+                    }
+                  },
+                  onMouseEnter: () => {
+                    if (!option.disabled) {
+                      setHighlightedIndex(index);
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx124(
+                      Checkbox,
+                      {
+                        checked: isSelected,
+                        disabled: option.disabled,
+                        onCheckedChange: () => {
+                          if (!option.disabled) {
+                            toggleOption(option.value);
+                          }
+                        },
+                        onClick: (e) => e.stopPropagation()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs64("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsx124("div", { className: "text-sm truncate", children: option.label }),
+                      option.description && /* @__PURE__ */ jsx124("div", { className: "text-xs text-muted-foreground truncate", children: option.description })
+                    ] })
+                  ]
+                },
+                String(option.value)
+              );
+            })
+          }
+        )
+      ] })
+    }
+  );
+}
+var SelectFilter = React10.forwardRef(SelectFilterInner);
+SelectFilter.displayName = "SelectFilter";
+
+// src/components/search-controls/TextFilter.tsx
+import { TypeIcon as TypeIcon2, XIcon as XIcon2 } from "lucide-react";
+import * as React11 from "react";
+import { jsx as jsx125, jsxs as jsxs65 } from "react/jsx-runtime";
+var TextFilter = React11.forwardRef(
+  ({
+    label,
+    value,
+    onChange,
+    placeholder = "Filter...",
+    debounceMs = 300,
+    dropdownWidth = 280,
+    disabled = false,
+    className
+  }, ref) => {
+    const [internalValue, setInternalValue] = React11.useState(value);
+    const [isOpen, setIsOpen] = React11.useState(false);
+    const inputRef = React11.useRef(null);
+    const debounceTimerRef = React11.useRef(
+      null
+    );
+    React11.useEffect(() => {
+      setInternalValue(value);
+    }, [value]);
+    React11.useEffect(() => {
+      if (isOpen) {
+        const timer = setTimeout(() => {
+          inputRef.current?.focus();
+        }, 0);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    React11.useEffect(() => {
+      return () => {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+      };
+    }, []);
+    const handleInputChange = (e) => {
+      const newValue = e.target.value;
+      setInternalValue(newValue);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        onChange(newValue);
+      }, debounceMs);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        onChange(internalValue);
+        setIsOpen(false);
+      }
+    };
+    const handleClear = () => {
+      setInternalValue("");
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      onChange("");
+      inputRef.current?.focus();
+    };
+    const isActive = value.trim().length > 0;
+    return /* @__PURE__ */ jsx125(
+      SearchFilterDropdown,
+      {
+        ref,
+        label,
+        isActive,
+        showDotIndicator: true,
+        dropdownWidth,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        disabled,
+        className,
+        children: /* @__PURE__ */ jsx125("div", { className: "p-2", children: /* @__PURE__ */ jsxs65("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx125(
+            TextInput,
+            {
+              ref: inputRef,
+              value: internalValue,
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              placeholder,
+              className: cn("w-full pl-9", internalValue && "pr-9")
+            }
+          ),
+          /* @__PURE__ */ jsx125("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsx125(TypeIcon2, { className: "h-4 w-4" }) }),
+          internalValue && /* @__PURE__ */ jsx125(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              className: "absolute top-1/2 right-2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors rounded-sm cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+              "aria-label": "Clear filter",
+              children: /* @__PURE__ */ jsx125(XIcon2, { className: "h-4 w-4" })
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+TextFilter.displayName = "TextFilter";
+
 // src/components/table/Pagination.tsx
 import {
   ChevronLeftIcon,
   ChevronRightIcon as ChevronRightIcon3,
   MoreHorizontalIcon as MoreHorizontalIcon3
 } from "lucide-react";
-import * as React8 from "react";
-import { jsx as jsx122, jsxs as jsxs62 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { jsx as jsx126, jsxs as jsxs66 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx126(
     "nav",
     {
       "aria-label": "pagination",
@@ -18151,7 +18759,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx126(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -18161,7 +18769,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ jsx122("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ jsx126("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -18169,7 +18777,7 @@ function PaginationLink({
   variant = "secondary",
   ...props
 }) {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx126(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -18190,15 +18798,15 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs66(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
       className: cn("gap-1 px-2.5 sm:pl-2.5 w-auto", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx122(ChevronLeftIcon, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx122("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ jsx126(ChevronLeftIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx126("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -18207,15 +18815,15 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs66(
     PaginationLink,
     {
       "aria-label": "Go to next page",
       className: cn("gap-1 px-2.5 sm:pr-2.5 w-auto", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx122("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ jsx122(ChevronRightIcon3, { className: "h-4 w-4" })
+        /* @__PURE__ */ jsx126("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx126(ChevronRightIcon3, { className: "h-4 w-4" })
       ]
     }
   );
@@ -18224,7 +18832,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs66(
     "span",
     {
       "aria-hidden": true,
@@ -18232,13 +18840,13 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx122(MoreHorizontalIcon3, { className: "size-4" }),
-        /* @__PURE__ */ jsx122("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx126(MoreHorizontalIcon3, { className: "size-4" }),
+        /* @__PURE__ */ jsx126("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
-var EnhancedPagination = React8.forwardRef(
+var EnhancedPagination = React12.forwardRef(
   ({
     className,
     currentPage,
@@ -18277,14 +18885,14 @@ var EnhancedPagination = React8.forwardRef(
     if (totalPages <= 1 && !showInfo && !showPageSizeSelector) {
       return null;
     }
-    return /* @__PURE__ */ jsxs62(
+    return /* @__PURE__ */ jsxs66(
       "div",
       {
         className: cn("flex items-center justify-between gap-4 p-4", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-4", children: [
-            showInfo && /* @__PURE__ */ jsxs62("span", { className: "text-muted-foreground text-sm", children: [
+          /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-4", children: [
+            showInfo && /* @__PURE__ */ jsxs66("span", { className: "text-muted-foreground text-sm", children: [
               "Showing ",
               startItem,
               "-",
@@ -18293,21 +18901,21 @@ var EnhancedPagination = React8.forwardRef(
               totalItems,
               " items"
             ] }),
-            showPageSizeSelector && onPageSizeChange && /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx122("span", { className: "text-muted-foreground text-sm", children: "Items per page:" }),
-              /* @__PURE__ */ jsx122(
+            showPageSizeSelector && onPageSizeChange && /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx126("span", { className: "text-muted-foreground text-sm", children: "Items per page:" }),
+              /* @__PURE__ */ jsx126(
                 "select",
                 {
                   value: pageSize,
                   onChange: (e) => onPageSizeChange(Number(e.target.value)),
                   className: "bg-background border border-border rounded px-2 py-1 text-foreground text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none h-9",
-                  children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx122("option", { value: option, children: option }, option))
+                  children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx126("option", { value: option, children: option }, option))
                 }
               )
             ] })
           ] }),
-          totalPages > 1 && /* @__PURE__ */ jsx122(Pagination, { ref, children: /* @__PURE__ */ jsxs62(PaginationContent, { children: [
-            /* @__PURE__ */ jsx122(PaginationItem, { children: /* @__PURE__ */ jsx122(
+          totalPages > 1 && /* @__PURE__ */ jsx126(Pagination, { ref, children: /* @__PURE__ */ jsxs66(PaginationContent, { children: [
+            /* @__PURE__ */ jsx126(PaginationItem, { children: /* @__PURE__ */ jsx126(
               PaginationPrevious,
               {
                 href: "#",
@@ -18318,7 +18926,7 @@ var EnhancedPagination = React8.forwardRef(
                 className: currentPage === 1 ? "pointer-events-none opacity-50" : ""
               }
             ) }),
-            getVisiblePages().map((page, index) => /* @__PURE__ */ jsx122(PaginationItem, { children: page === "..." ? /* @__PURE__ */ jsx122(PaginationEllipsis, {}) : /* @__PURE__ */ jsx122(
+            getVisiblePages().map((page, index) => /* @__PURE__ */ jsx126(PaginationItem, { children: page === "..." ? /* @__PURE__ */ jsx126(PaginationEllipsis, {}) : /* @__PURE__ */ jsx126(
               PaginationLink,
               {
                 href: "#",
@@ -18332,7 +18940,7 @@ var EnhancedPagination = React8.forwardRef(
                 children: page
               }
             ) }, index)),
-            /* @__PURE__ */ jsx122(PaginationItem, { children: /* @__PURE__ */ jsx122(
+            /* @__PURE__ */ jsx126(PaginationItem, { children: /* @__PURE__ */ jsx126(
               PaginationNext,
               {
                 href: "#",
@@ -18352,14 +18960,14 @@ var EnhancedPagination = React8.forwardRef(
 EnhancedPagination.displayName = "EnhancedPagination";
 
 // src/components/table/Table.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-hidden rounded-md border",
-      children: /* @__PURE__ */ jsx123(
+      children: /* @__PURE__ */ jsx127(
         "table",
         {
           "data-slot": "table",
@@ -18371,7 +18979,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "thead",
     {
       "data-slot": "table-header",
@@ -18381,7 +18989,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "tbody",
     {
       "data-slot": "table-body",
@@ -18391,7 +18999,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "tfoot",
     {
       "data-slot": "table-footer",
@@ -18404,7 +19012,7 @@ function TableFooter({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "tr",
     {
       "data-slot": "table-row",
@@ -18417,7 +19025,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "th",
     {
       "data-slot": "table-head",
@@ -18430,7 +19038,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "td",
     {
       "data-slot": "table-cell",
@@ -18446,7 +19054,7 @@ function TableCaption({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx127(
     "caption",
     {
       "data-slot": "table-caption",
@@ -18458,9 +19066,9 @@ function TableCaption({
 
 // src/components/tabs/Tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx128(
     TabsPrimitive.Root,
     {
       "data-slot": "tabs",
@@ -18470,7 +19078,7 @@ function Tabs({ className, ...props }) {
   );
 }
 function TabsList({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx128(
     TabsPrimitive.List,
     {
       "data-slot": "tabs-list",
@@ -18483,7 +19091,7 @@ function TabsList({ className, ...props }) {
   );
 }
 function TabsTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx128(
     TabsPrimitive.Trigger,
     {
       "data-slot": "tabs-trigger",
@@ -18496,7 +19104,7 @@ function TabsTrigger({ className, ...props }) {
   );
 }
 function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx128(
     TabsPrimitive.Content,
     {
       "data-slot": "tabs-content",
@@ -18507,15 +19115,15 @@ function TabsContent({ className, ...props }) {
 }
 
 // src/components/top-bar/SearchBar.tsx
-import { Search as Search2 } from "lucide-react";
-import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx125, jsxs as jsxs63 } from "react/jsx-runtime";
-var SearchBar = forwardRef22(
+import { Search as Search3 } from "lucide-react";
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx129, jsxs as jsxs67 } from "react/jsx-runtime";
+var SearchBar = forwardRef26(
   ({ className, context, placeholder = "Search commands...", ...props }, ref) => {
     const handleClick = () => {
       context.commands.execute("workbench.runCommand");
     };
-    return /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsxs67(
       "button",
       {
         ref,
@@ -18532,9 +19140,9 @@ var SearchBar = forwardRef22(
         "aria-label": "Open command palette",
         ...props,
         children: [
-          /* @__PURE__ */ jsx125(Search2, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-          /* @__PURE__ */ jsx125("span", { className: "text-sm text-muted-foreground truncate", children: placeholder }),
-          /* @__PURE__ */ jsx125("div", { className: "ml-auto text-xs text-muted-foreground font-mono", children: "\u2318K" })
+          /* @__PURE__ */ jsx129(Search3, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+          /* @__PURE__ */ jsx129("span", { className: "text-sm text-muted-foreground truncate", children: placeholder }),
+          /* @__PURE__ */ jsx129("div", { className: "ml-auto text-xs text-muted-foreground font-mono", children: "\u2318K" })
         ]
       }
     );
@@ -18543,10 +19151,10 @@ var SearchBar = forwardRef22(
 SearchBar.displayName = "SearchBar";
 
 // src/components/top-bar/TopBar.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 
 // src/components/user-avatar/UserAvatar.tsx
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
 function getInitials(name) {
   const trimmed = name.trim();
   if (!trimmed) {
@@ -18562,7 +19170,7 @@ function getInitials(name) {
 }
 function UserAvatar({ name, className }) {
   const initials = getInitials(name);
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx130(
     "div",
     {
       className: cn(
@@ -18578,11 +19186,11 @@ function UserAvatar({ name, className }) {
 
 // src/components/user-avatar/UserMenu.tsx
 import { LogOut } from "lucide-react";
-import { jsx as jsx127, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs68 } from "react/jsx-runtime";
 function UserMenu({ name, email, onSignOut, className }) {
   const initials = getInitials(name);
-  return /* @__PURE__ */ jsxs64(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx127(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsxs68(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx131(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx131(
       "button",
       {
         type: "button",
@@ -18598,21 +19206,21 @@ function UserMenu({ name, email, onSignOut, className }) {
         children: initials
       }
     ) }),
-    /* @__PURE__ */ jsxs64(DropdownMenuContent, { align: "end", className: "w-56", children: [
-      /* @__PURE__ */ jsx127(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs64("div", { className: "flex flex-col space-y-1", children: [
-        /* @__PURE__ */ jsx127("p", { className: "text-sm font-medium leading-none", children: name }),
-        email && /* @__PURE__ */ jsx127("p", { className: "text-xs leading-none text-muted-foreground", children: email })
+    /* @__PURE__ */ jsxs68(DropdownMenuContent, { align: "end", className: "w-56", children: [
+      /* @__PURE__ */ jsx131(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs68("div", { className: "flex flex-col space-y-1", children: [
+        /* @__PURE__ */ jsx131("p", { className: "text-sm font-medium leading-none", children: name }),
+        email && /* @__PURE__ */ jsx131("p", { className: "text-xs leading-none text-muted-foreground", children: email })
       ] }) }),
-      /* @__PURE__ */ jsx127(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxs64(
+      /* @__PURE__ */ jsx131(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs68(
         DropdownMenuItem,
         {
           onClick: onSignOut,
           className: "cursor-pointer",
           "data-testid": "sign-out-button",
           children: [
-            /* @__PURE__ */ jsx127(LogOut, { className: "mr-2 h-4 w-4" }),
-            /* @__PURE__ */ jsx127("span", { children: "Sign out" })
+            /* @__PURE__ */ jsx131(LogOut, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsx131("span", { children: "Sign out" })
           ]
         }
       )
@@ -18621,8 +19229,8 @@ function UserMenu({ name, email, onSignOut, className }) {
 }
 
 // src/components/top-bar/TopBar.tsx
-import { jsx as jsx128, jsxs as jsxs65 } from "react/jsx-runtime";
-var TopBar = forwardRef23(
+import { jsx as jsx132, jsxs as jsxs69 } from "react/jsx-runtime";
+var TopBar = forwardRef27(
   ({ className, context, ...props }, ref) => {
     const globalActions = context.config.globalActions || [];
     const hasGlobalActions = globalActions.length > 0;
@@ -18632,7 +19240,7 @@ var TopBar = forwardRef23(
     const handleSignOut = async () => {
       await authentication?.logout();
     };
-    return /* @__PURE__ */ jsxs65(
+    return /* @__PURE__ */ jsxs69(
       "div",
       {
         ref,
@@ -18642,7 +19250,7 @@ var TopBar = forwardRef23(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx128("div", { className: "flex items-center", children: /* @__PURE__ */ jsx128(
+          /* @__PURE__ */ jsx132("div", { className: "flex items-center", children: /* @__PURE__ */ jsx132(
             "button",
             {
               type: "button",
@@ -18656,10 +19264,10 @@ var TopBar = forwardRef23(
               children: context.config.appName
             }
           ) }),
-          /* @__PURE__ */ jsx128(SearchBar, { context }),
-          hasGlobalActions && /* @__PURE__ */ jsx128("div", { className: "flex items-center", children: /* @__PURE__ */ jsx128(ActionBar, { actions: globalActions }) }),
-          /* @__PURE__ */ jsx128("div", { className: "flex-1" }),
-          user && /* @__PURE__ */ jsx128(
+          /* @__PURE__ */ jsx132(SearchBar, { context }),
+          hasGlobalActions && /* @__PURE__ */ jsx132("div", { className: "flex items-center", children: /* @__PURE__ */ jsx132(ActionBar, { actions: globalActions }) }),
+          /* @__PURE__ */ jsx132("div", { className: "flex-1" }),
+          user && /* @__PURE__ */ jsx132(
             UserMenu,
             {
               name: user.displayName,
@@ -18675,20 +19283,20 @@ var TopBar = forwardRef23(
 TopBar.displayName = "TopBar";
 
 // src/components/widget/Widget.tsx
-import * as React9 from "react";
-import { jsx as jsx129, jsxs as jsxs66 } from "react/jsx-runtime";
-var Widget = React9.forwardRef(
+import * as React13 from "react";
+import { jsx as jsx133, jsxs as jsxs70 } from "react/jsx-runtime";
+var Widget = React13.forwardRef(
   ({ title, icon: Icon, action, footer, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs66(Card, { ref, className: cn("pt-0", className), ...props, children: [
-      /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-2 border-b px-3 py-2.5", children: [
-        /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-1.5 text-[13px] text-muted-foreground", children: [
-          Icon && /* @__PURE__ */ jsx129(Icon, { className: "h-[0.9rem] w-[0.9rem]" }),
+    return /* @__PURE__ */ jsxs70(Card, { ref, className: cn("pt-0", className), ...props, children: [
+      /* @__PURE__ */ jsxs70("div", { className: "flex items-center gap-2 border-b px-3 py-2.5", children: [
+        /* @__PURE__ */ jsxs70("div", { className: "flex items-center gap-1.5 text-[13px] text-muted-foreground", children: [
+          Icon && /* @__PURE__ */ jsx133(Icon, { className: "h-[0.9rem] w-[0.9rem]" }),
           title
         ] }),
-        action && /* @__PURE__ */ jsx129("div", { className: "ml-auto flex items-center gap-2", children: action })
+        action && /* @__PURE__ */ jsx133("div", { className: "ml-auto flex items-center gap-2", children: action })
       ] }),
-      /* @__PURE__ */ jsx129(CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6", children }),
-      footer && /* @__PURE__ */ jsx129(CardFooter, { children: footer })
+      /* @__PURE__ */ jsx133(CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6", children }),
+      footer && /* @__PURE__ */ jsx133(CardFooter, { children: footer })
     ] });
   }
 );
@@ -19107,11 +19715,17 @@ export {
   SchemaFormButtonBar,
   SchemaFormValidationErrors,
   SearchBar,
+  SearchFilterBadge,
+  SearchFilterBar,
+  SearchFilterCheckIndicator,
+  SearchFilterChevron,
+  SearchFilterDropdown,
   SearchTextInput,
   SearchableTreeNavigator,
   Select,
   SelectCellFormatter,
   SelectColumn,
+  SelectFilter,
   ServerNetworkError,
   Table,
   TableBody,
@@ -19125,6 +19739,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  TextFilter,
   TextInput,
   ThemeToggle,
   Toast,
@@ -19182,6 +19797,7 @@ export {
   lookupSelectVariants,
   matchesKeySequence,
   normalizeEventKey,
+  optionVariants3 as optionVariants,
   orderedListCommand,
   parseKeySequence,
   parseKeybinding,
@@ -19197,6 +19813,11 @@ export {
   resolveMenuItems,
   resolveResourceLink,
   resourceLink,
+  searchFilterBarClearButtonVariants,
+  searchFilterBarInputVariants,
+  searchFilterBarVariants,
+  searchFilterContentVariants,
+  searchFilterTriggerVariants,
   showPromiseToast,
   showToast,
   strikethroughCommand,