@vertesia/ui 0.78.0 → 0.79.1

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -29,7 +29,8 @@ interface FilterProviderProps {
 const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterProviderProps) => {
   const url = new URL(window.location.href);
   const searchParams = url.searchParams;
-  
+  const [hasInitialized, setHasInitialized] = React.useState(false);
+
   useEffect(() => {
     try {
       const params = new URLSearchParams(searchParams.toString());
@@ -42,16 +43,22 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
             // Handle stringList with direct string array - always array format
             values = `[${(filter.value as string[]).map(item => encodeURIComponent(item)).join(',')}]`;
           } else if (Array.isArray(filter.value)) {
-            if (filter.multiple || filter.value.length > 1) {
-              // Handle multiple values - use array format
-              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || '')).join(',')}]`;
+            if (filter.multiple) {
+              // Handle multiple filters - always use array format for multiple=true
+              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
+            } else if (filter.value.length > 1) {
+              // Handle multiple values for non-multiple filters
+              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
             } else {
-              // Single value in array - don't use array format
+              // Single value in array for non-multiple filter - don't use array format
               const firstValue = filter.value[0];
               if (typeof firstValue === 'string') {
                 values = encodeURIComponent(firstValue);
+              } else if (typeof firstValue === 'object' && firstValue?.value !== undefined) {
+                // Handle FilterOption object
+                values = encodeURIComponent(String(firstValue.value));
               } else {
-                values = encodeURIComponent(firstValue?.value || '');
+                values = encodeURIComponent(String(firstValue || ''));
               }
             }
           } else {
@@ -64,8 +71,8 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
         params.delete('filters');
       }
 
-      const newUrl = `${window.location.pathname}?${params.toString()}`;
-      window.history.replaceState({}, '', newUrl);
+      const newUrl = `${window.location.pathname}?${params.toString()}${window.location.hash}`;
+      window.history.replaceState(window.history.state || {}, '', newUrl);
     } catch (error) {
       console.error("Failed to update URL with filters:", error);
     }
@@ -73,14 +80,14 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
 
   useEffect(() => {
     const filtersParam = searchParams.get('filters');
-    if (filtersParam) {
+    if (filtersParam && filterGroups.length > 0 && !hasInitialized) {
       try {
         // Parse format with array indicators: filterName:value or filterName:[value1,value2]
         const filterPairs = filtersParam.split(';');
         const parsedFilters = filterPairs.map(pair => {
           const [encodedName, valuesString] = pair.split(':');
           const name = decodeURIComponent(encodedName);
-          
+
           let values: string[];
           // Check if it's an array format [value1,value2]
           if (valuesString.startsWith('[') && valuesString.endsWith(']')) {
@@ -100,8 +107,8 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
             filterValue = values;
           } else if (group?.type === 'text') {
             // For text, return FilterOption array (single value for text inputs)
-            filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] : 
-                         values.map(value => ({ value, label: value }));
+            filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] :
+              values.map(value => ({ value, label: value }));
           } else {
             // For other types, find options with labels
             filterValue = values.map(value => {
@@ -123,21 +130,40 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
             });
           }
 
-          return {
+          if (group?.multiple && !valuesString.startsWith('[') && !valuesString.endsWith(']')) {
+            if (group.type === 'stringList') {
+              filterValue = values;
+            } else {
+              if (!Array.isArray(filterValue)) {
+                filterValue = [filterValue];
+              }
+            }
+          }
+
+          // Fallback: if group not found but we detected array format, assume it should be multiple
+          const shouldBeMultiple = group?.multiple || (!group && valuesString.startsWith('[') && valuesString.endsWith(']'));
+
+          const filter = {
             name,
             type: group?.type || 'select',
             placeholder: group?.placeholder,
             value: filterValue,
-            multiple: group?.multiple || false
+            multiple: shouldBeMultiple
           };
+
+          return filter;
         });
 
         setFilters(parsedFilters);
+        setHasInitialized(true);
       } catch (error) {
-        console.error("Failed to parse filters from URL:", error);
+        setHasInitialized(true);
       }
+    } else if (filterGroups.length > 0 && !hasInitialized) {
+      // No URL params but we have groups - mark as initialized
+      setHasInitialized(true);
     }
-  }, []);
+  }, [filterGroups, hasInitialized]);
 
   return (
     <FilterContext.Provider value={{ filters, setFilters, filterGroups }}>
@@ -287,7 +313,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
           {"Filter"}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[300px] p-0" align="start">
+      <PopoverContent className="w-[300px] p-0" align="start" sideOffset={4}>
         <Command>
           {
             filterGroups.find(group => group.name === selectedView)?.type === "select" && (
@@ -303,7 +329,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
               />
             )
           }
-          <CommandList className="max-h-[300px] overflow-y-auto">
+          <CommandList>
             <CommandGroup>
               {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
             </CommandGroup>
@@ -316,7 +342,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
 
 const FilterBar = ({ className }: { className?: string }) => {
   const { filters, setFilters, filterGroups } = React.useContext(FilterContext);
-  
+
   return (
     <div className={cn(className)}>
       <Filters filters={filters} setFilters={setFilters} filterGroups={filterGroups} />
@@ -324,15 +350,15 @@ const FilterBar = ({ className }: { className?: string }) => {
   );
 };
 
-const FilterClear = ({ className }: { className?: string }) => {
+const FilterClear = ({ className }: { className?: string}) => {
   const { filters, setFilters } = React.useContext(FilterContext);
-  
+
   const hasActiveFilters = filters.filter((filter) => filter.value?.length > 0).length > 0;
-  
+
   if (!hasActiveFilters) {
     return null;
   }
-  
+
   return (
     <Button
       variant="outline"

package/src/core/components/shadcn/index.ts

@@ -20,3 +20,5 @@ export * from './command';
 export * from './checkbox';
 export * from './heading';
 export * from './text';
+export * from './resizeable';
+export * from './textarea';

package/src/core/components/shadcn/input.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../libs/utils"
 import { X } from "lucide-react";
 import { ChangeEvent } from "react";
+import { Button } from "@vertesia/ui/core";
 
 const variants = cva(
   "",
@@ -53,14 +54,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     };
 
     return (
-      <div className="w-full" style={{ position: 'relative', display: 'inline-block' }}>
+      <div className="w-full relative inline-block [&:hover_.clear-button]:opacity-100">
         <input
           type={type}
           className={
             cn(
               variants({ size, variant }),
               className,
-              clearable && value ? "pr-6" : "",
+              clearable && value ? "pr-8" : "",
             )}
           ref={ref}
           value={value == null ? '' : value}
@@ -68,14 +69,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {clearable && value && !props.readOnly && !props.disabled && (
-          <button
-            onClick={_onClear}
-            className={`absolute ${type !== 'number' ? 'right-0' : 'right-7'} top-1/2 -translate-y-1/2 size-7 text-muted-foreground hover:text-destructive cursor-pointer flex items-center justify-center`}
+          <Button variant={"link"} size={"icon"}
             type="button"
-            aria-label="Clear input"
+            onClick={_onClear}
+            className={`clear-button opacity-0 transition-opacity duration-200
+              absolute top-1/2 -translate-y-1/2 text-muted !hover:text-destructive cursor-pointer
+              flex items-center justify-center size-6 rounded right-2`}
+            alt="Clear input"
           >
             <X size={16} />
-          </button>
+          </Button>
         )}
       </div>
     )

package/src/core/components/shadcn/resizeable.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Minus } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../libs/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-muted focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex size-4 items-center justify-center rounded-xs font-semibold">
+          <Minus className="size-4 rotate-90" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/core/components/shadcn/selectBox.tsx

@@ -6,8 +6,9 @@ import { useState, useEffect, useRef } from 'react';
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
 import { Input } from './input';
+import { Button } from '@vertesia/ui/core';
 
-interface VSelectBoxBaseProps<T> {
+export interface VSelectBoxBaseProps<T> {
     options: T[] | undefined;
     optionLabel?: (option: T) => React.ReactNode;
     onBlur?: () => void;
@@ -23,6 +24,7 @@ interface VSelectBoxBaseProps<T> {
     popupClass?: string;
     isClearable?: boolean;
     border?: boolean;
+    inline?: boolean;
 }
 
 interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
@@ -39,7 +41,7 @@ interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
 
 type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
 
-export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by }: Readonly<VSelectBoxProps<T>>) {
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false }: Readonly<VSelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -169,6 +171,82 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
         );
     };
 
+    // Render the options list content
+    const renderOptionsContent = () => (
+        <>
+            {filterBy && (
+                <div className='flex justify-start items-center mb-1'>
+                    <div className='mx-2'>
+                        <SearchIcon className="size-4" />
+                    </div>
+                    <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
+                </div>
+            )}
+            <Command className="overflow-hidden">
+                <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
+                    <CommandEmpty>No result found.</CommandEmpty>
+                    <CommandGroup className="overflow-visible">
+                        {filteredOptions?.map((opt, index) => {
+                            const isSelected = multiple
+                                ? isOptionSelected(opt, Array.isArray(value) ? value : [])
+                                : value != null ? isOptionsEqual(value as T, opt) : false;
+
+                            return (
+                                <CommandItem
+                                    key={index}
+                                    onSelect={() => _onClick(opt)}
+                                    className="w-full"
+                                >
+                                    {multiple || inline ? (
+                                        <div className='w-full flex justify-between items-center cursor-pointer'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </div>
+                                    ) : (
+                                        <PopoverClose className='w-full flex justify-between items-center'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </PopoverClose>
+                                    )}
+                                </CommandItem>
+                            );
+                        })}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+            {addNew && (
+                <div className='p-1'>
+                    <a
+                        onClick={addNew}
+                        className={clsx(
+                            'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
+                        )}
+                    >
+                        <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
+                        {addNewLabel}
+                    </a>
+                </div>
+            )}
+        </>
+    );
+
+    if (inline) {
+        return (
+            <div className={clsx(
+                className,
+                border && 'border border-border rounded-md',
+                "bg-popover p-1",
+                popupClass
+            )}>
+                {renderOptionsContent()}
+            </div>
+        );
+    }
+
     return (
         <Popover>
             <PopoverTrigger asChild>
@@ -178,7 +256,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     className={clsx(
                         className,
                         border && 'border border-border',
-                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative',
+                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
                         !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
                     )}
                 >
@@ -194,9 +272,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                             {multiple ? renderMultipleValue() : renderSingleValue()}
                         </div>
                     </div>
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 group">
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
-                            <div
+                            <Button variant={"link"} size={"icon"}
+                                alt="Clear selection"
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     if (multiple) {
@@ -205,10 +284,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                                         (onChange as (option: T) => void)(undefined as any);
                                     }
                                 }}
-                                className="cursor-pointer hover:bg-muted/20 rounded p-1"
+                                className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
                             >
                                 <X className="size-4" />
-                            </div>
+                            </Button>
                         )}
                         {!disabled && (
                             <ChevronsUpDown className="size-4 opacity-50" />
@@ -225,66 +304,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     popupClass
                 )}
             >
-                {filterBy && (
-
-                    <div className='flex justify-start items-center mb-1'>
-                        <div className='mx-2'>
-                            <SearchIcon className="size-4" />
-                        </div>
-                        <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
-                    </div>
-                )}
-                <Command className="overflow-hidden">
-                    <CommandList className="max-h-[200px] overflow-y-auto">
-                        <CommandEmpty>No result found.</CommandEmpty>
-                        <CommandGroup className="overflow-visible">
-                            {filteredOptions?.map((opt, index) => {
-                                const isSelected = multiple
-                                    ? isOptionSelected(opt, Array.isArray(value) ? value : [])
-                                    : value != null ? isOptionsEqual(value as T, opt) : false;
-
-                                return (
-                                    <CommandItem
-                                        key={index}
-                                        onSelect={() => _onClick(opt)}
-                                        className="w-full"
-                                    >
-                                        {multiple ? (
-                                            <div className='w-full flex justify-between items-center cursor-pointer'>
-                                                <div className='w-full truncate text-left'>
-                                                    {optionLabel ? optionLabel(opt) : opt as String}
-                                                </div>
-                                                {isSelected && <Check className="size-4" />}
-                                            </div>
-                                        ) : (
-                                            <PopoverClose className='w-full flex justify-between items-center'>
-                                                <div className='w-full truncate text-left'>
-                                                    {optionLabel ? optionLabel(opt) : opt as String}
-                                                </div>
-                                                {isSelected && <Check className="size-4" />}
-                                            </PopoverClose>
-                                        )}
-                                    </CommandItem>
-                                );
-                            })}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-                {
-                    addNew && (
-                        <div className='p-1'>
-                            <a
-                                onClick={addNew}
-                                className={clsx(
-                                    'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
-                                )}
-                            >
-                                <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
-                                {addNewLabel}
-                            </a>
-                        </div>
-                    )
-                }
+                {renderOptionsContent()}
             </PopoverContent>
         </Popover>
     );

package/src/core/components/shadcn/tabs.tsx

@@ -12,13 +12,15 @@ const TabsContext = React.createContext<{
   setTab?: (name: string) => void;
   responsive?: boolean;
   variant?: "tabs" | "pills";
+  updateHash?: boolean;
 }>({
   size: undefined,
   tabs: undefined,
   current: undefined,
   setTab: undefined,
   responsive: false,
-  variant: "tabs"
+  variant: "tabs",
+  updateHash: true
 });
 
 interface TabsProps {
@@ -31,6 +33,7 @@ interface TabsProps {
   onTabChange?: (tabName: string) => void;
   responsive?: boolean;
   variant?: "tabs" | "pills";
+  updateHash?: boolean;
 }
 
 const VTabs = ({
@@ -42,7 +45,8 @@ const VTabs = ({
   children,
   onTabChange,
   responsive = false,
-  variant = "tabs"
+  variant = "tabs",
+  updateHash = true
 }: TabsProps) => {
   // Initialize value
   const [value, setValue] = React.useState(() => {
@@ -99,6 +103,15 @@ const VTabs = ({
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
+    
+    // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
+    if (updateHash && !current) {
+      // Preserve existing history state when changing hash
+      const currentState = window.history.state;
+      const newUrl = window.location.pathname + window.location.search + '#' + newValue;
+      window.history.pushState(currentState, '', newUrl);
+    }
+    
     if (onTabChange) {
       onTabChange(newValue);
     }
@@ -109,7 +122,7 @@ const VTabs = ({
   }, [handleValueChange]);
 
   return (
-    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant }}>
+    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant, updateHash }}>
       <TabsPrimitive.Root
         defaultValue={value || tabs[0]?.name}
         value={value}
@@ -123,7 +136,7 @@ const VTabs = ({
 };
 
 const VTabsBar = ({ className }: { className?: string }) => {
-  const { tabs, size, current, setTab, responsive, variant } = React.useContext(TabsContext);
+  const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
 
@@ -132,13 +145,15 @@ const VTabsBar = ({ className }: { className?: string }) => {
 
     const tab = tabs.find(t => t.name === tabName);
 
-    if (tab?.href) {
-      window.history.pushState(null, '', tab.href);
+    if (tab?.href && updateHash) {
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', tab.href);
     }
 
     setTab(tabName);
 
-  }, [tabs, setTab]);
+  }, [tabs, setTab, updateHash]);
 
   if (!tabs || !setTab) {
     console.warn("TabsBar: No tabs provided or setTab not available");
@@ -226,7 +241,9 @@ const TabsTrigger = React.forwardRef<
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     if (href) {
       event.preventDefault();
-      window.history.pushState(null, '', href);
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', href);
     }
     if (props.onClick) {
       (props.onClick as React.MouseEventHandler<HTMLButtonElement>)(event);

package/src/core/components/shadcn/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../libs/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "py-2 text-sm",
+        "flex w-full rounded-md border border-input bg-background ring-offset-background",
+        "placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/core/components/table/index.tsx

@@ -23,7 +23,7 @@ export function RowSkeleton({ columns }: { columns: number }) {
         <tr className="hover:bg-muted">
             {Array(columns).fill(0).map((_, index) =>
                 <td key={index}>
-                    <div className="animate-pulse rounded-xs h-5 bg-gray-200 dark:bg-gray-600"></div>
+                    <div className="animate-pulse rounded-xs h-5 bg-muted"></div>
                 </td>
             )}
         </tr>

package/src/core/hooks/index.ts

@@ -11,4 +11,5 @@ export * from "./useFlag.js"
 export * from "./useIntersectionObserver.js"
 export * from "./useIsFistRendering.js"
 export * from "./useSafeLayoutEffect.js"
+export * from "./useScrollableSearch.js"
 export * from "./useSharedValue.js"