@vertesia/ui 0.77.0 → 0.78.0-dev-9372725

package/package.json

@@ -1,171 +1,177 @@
 {
-  "name": "@vertesia/ui",
-  "version": "0.77.0",
-  "description": "Vertesia UI components and and hooks",
-  "type": "module",
-  "main": "./lib/index.js",
-  "files": [
-    "lib",
-    "src",
-    "tsconfig.dist.json"
-  ],
-  "license": "Apache-2.0",
-  "homepage": "https://docs.vertesiahq.com",
-  "keywords": [
-    "vertesia",
-    "UI",
-    "react",
-    "components",
-    "hooks"
-  ],
-  "dependencies": {
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.36.8",
-    "@floating-ui/dom": "^1.7.1",
-    "@floating-ui/react": "^0.27.11",
-    "@headlessui/react": "^2.2.2",
-    "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-checkbox": "^1.3.1",
-    "@radix-ui/react-dialog": "^1.1.13",
-    "@radix-ui/react-label": "^2.1.6",
-    "@radix-ui/react-popover": "^1.1.13",
-    "@radix-ui/react-separator": "^1.1.6",
-    "@radix-ui/react-slot": "^1.2.2",
-    "@radix-ui/react-tabs": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.6",
-    "ajv": "^8.16.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "codemirror": "^6.0.1",
-    "dayjs": "^1.11.13",
-    "debounce": "^2.2.0",
-    "fast-xml-parser": "^5.2.3",
-    "firebase": "^10.12.2",
-    "framer-motion": "^12.23.12",
-    "json-schema": "^0.4.0",
-    "jwt-decode": "^4.0.0",
-    "lodash-es": "^4.17.21",
-    "lucide-react": "^0.511.0",
-    "monaco-editor": "^0.52.2",
-    "motion": "^12.12.1",
-    "react": "^19.1.0",
-    "react-calendar": "^6.0.0",
-    "react-date-picker": "^11.0.0",
-    "react-dom": "^19.1.0",
-    "react-error-boundary": "^6.0.0",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.0",
-    "ts-md5": "^1.3.1",
-    "unist-util-visit": "^5.0.0",
-    "@vertesia/client": "0.77.0",
-    "@vertesia/common": "0.77.0",
-    "@vertesia/json": "0.77.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.27.0",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@types/json-schema": "^7.0.15",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.21",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
-    "eslint": "^9.27.0",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.40.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.38.0",
-    "vitest": "^3.0.9"
-  },
-  "exports": {
-    "./router": {
-      "types": "./lib/types/router/index.d.ts",
-      "default": "./lib/esm/router/index.js"
+    "name": "@vertesia/ui",
+    "version": "0.78.0-dev-9372725",
+    "description": "Vertesia UI components and and hooks",
+    "type": "module",
+    "main": "./lib/index.js",
+    "files": [
+        "lib",
+        "src",
+        "tsconfig.dist.json"
+    ],
+    "license": "Apache-2.0",
+    "homepage": "https://docs.vertesiahq.com",
+    "keywords": [
+        "vertesia",
+        "UI",
+        "react",
+        "components",
+        "hooks"
+    ],
+    "scripts": {
+        "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
+        "lint": "eslint \"src/**/*.{ts,tsx}\"",
+        "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix"
     },
-    "./env": {
-      "types": "./lib/types/env/index.d.ts",
-      "default": "./lib/esm/env/index.js"
+    "dependencies": {
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/state": "^6.5.2",
+        "@codemirror/view": "^6.36.8",
+        "@floating-ui/dom": "^1.7.1",
+        "@floating-ui/react": "^0.27.11",
+        "@headlessui/react": "^2.2.2",
+        "@monaco-editor/react": "^4.7.0",
+        "@radix-ui/react-checkbox": "^1.3.1",
+        "@radix-ui/react-dialog": "^1.1.13",
+        "@radix-ui/react-label": "^2.1.6",
+        "@radix-ui/react-popover": "^1.1.13",
+        "@radix-ui/react-separator": "^1.1.6",
+        "@radix-ui/react-slot": "^1.2.2",
+        "@radix-ui/react-tabs": "^1.1.11",
+        "@radix-ui/react-tooltip": "^1.2.6",
+        "@vertesia/client": "workspace:*",
+        "@vertesia/common": "workspace:*",
+        "@vertesia/json": "workspace:*",
+        "ajv": "^8.16.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "codemirror": "^6.0.1",
+        "dayjs": "^1.11.13",
+        "debounce": "^2.2.0",
+        "fast-xml-parser": "^5.2.3",
+        "firebase": "^10.12.2",
+        "framer-motion": "^12.23.12",
+        "json-schema": "^0.4.0",
+        "jwt-decode": "^4.0.0",
+        "lodash-es": "^4.17.21",
+        "lucide-react": "^0.511.0",
+        "monaco-editor": "^0.52.2",
+        "motion": "^12.12.1",
+        "react": "^19.1.0",
+        "react-calendar": "^6.0.0",
+        "react-date-picker": "^11.0.0",
+        "react-dom": "^19.1.0",
+        "react-error-boundary": "^6.0.0",
+        "react-markdown": "^10.1.0",
+        "react-resizable-panels": "^3.0.6",
+        "remark-gfm": "^4.0.1",
+        "tailwind-merge": "^3.3.0",
+        "ts-md5": "^1.3.1",
+        "unist-util-visit": "^5.0.0"
     },
-    "./session": {
-      "types": "./lib/types/session/index.d.ts",
-      "default": "./lib/esm/session/index.js"
+    "devDependencies": {
+        "@eslint/js": "^9.27.0",
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@types/json-schema": "^7.0.15",
+        "@types/lodash-es": "^4.17.12",
+        "@types/node": "^22.15.21",
+        "@types/react": "^19.1.0",
+        "@types/react-dom": "^19.1.1",
+        "eslint": "^9.27.0",
+        "eslint-import-resolver-typescript": "^4.4.4",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.40.2",
+        "rollup-plugin-terser": "^7.0.2",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.38.0",
+        "vitest": "^3.0.9"
     },
-    "./core": {
-      "types": "./lib/types/core/index.d.ts",
-      "default": "./lib/esm/core/index.js"
+    "exports": {
+        "./router": {
+            "types": "./lib/types/router/index.d.ts",
+            "default": "./lib/esm/router/index.js"
+        },
+        "./env": {
+            "types": "./lib/types/env/index.d.ts",
+            "default": "./lib/esm/env/index.js"
+        },
+        "./session": {
+            "types": "./lib/types/session/index.d.ts",
+            "default": "./lib/esm/session/index.js"
+        },
+        "./core": {
+            "types": "./lib/types/core/index.d.ts",
+            "default": "./lib/esm/core/index.js"
+        },
+        "./widgets": {
+            "types": "./lib/types/widgets/index.d.ts",
+            "default": "./lib/esm/widgets/index.js"
+        },
+        "./code": {
+            "types": "./lib/types/code/index.d.ts",
+            "default": "./lib/esm/code/index.js"
+        },
+        "./form": {
+            "types": "./lib/types/form/index.d.ts",
+            "default": "./lib/esm/form/index.js"
+        },
+        "./layout": {
+            "types": "./lib/types/layout/index.d.ts",
+            "default": "./lib/esm/layout/index.js"
+        },
+        "./features": {
+            "types": "./lib/types/features/index.d.ts",
+            "default": "./lib/esm/features/index.js"
+        },
+        "./shell": {
+            "types": "./lib/types/shell/index.d.ts",
+            "default": "./lib/esm/shell/index.js"
+        }
     },
-    "./widgets": {
-      "types": "./lib/types/widgets/index.d.ts",
-      "default": "./lib/esm/widgets/index.js"
+    "types": "./lib/index.d.ts",
+    "typesVersions": {
+        "*": {
+            "router": [
+                "./lib/types/router/index.d.ts"
+            ],
+            "env": [
+                "./lib/types/env/index.d.ts"
+            ],
+            "session": [
+                "./lib/types/session/index.d.ts"
+            ],
+            "core": [
+                "./lib/types/core/index.d.ts"
+            ],
+            "widgets": [
+                "./lib/types/widgets/index.d.ts"
+            ],
+            "code": [
+                "./lib/types/code/index.d.ts"
+            ],
+            "features": [
+                "./lib/types/features/index.d.ts"
+            ],
+            "layout": [
+                "./lib/types/layout/index.d.ts"
+            ],
+            "form": [
+                "./lib/types/form/index.d.ts"
+            ],
+            "shell": [
+                "./lib/types/shell/index.d.ts"
+            ]
+        }
     },
-    "./code": {
-      "types": "./lib/types/code/index.d.ts",
-      "default": "./lib/esm/code/index.js"
-    },
-    "./form": {
-      "types": "./lib/types/form/index.d.ts",
-      "default": "./lib/esm/form/index.js"
-    },
-    "./layout": {
-      "types": "./lib/types/layout/index.d.ts",
-      "default": "./lib/esm/layout/index.js"
-    },
-    "./features": {
-      "types": "./lib/types/features/index.d.ts",
-      "default": "./lib/esm/features/index.js"
-    },
-    "./shell": {
-      "types": "./lib/types/shell/index.d.ts",
-      "default": "./lib/esm/shell/index.js"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "router": [
-        "./lib/types/router/index.d.ts"
-      ],
-      "env": [
-        "./lib/types/env/index.d.ts"
-      ],
-      "session": [
-        "./lib/types/session/index.d.ts"
-      ],
-      "core": [
-        "./lib/types/core/index.d.ts"
-      ],
-      "widgets": [
-        "./lib/types/widgets/index.d.ts"
-      ],
-      "code": [
-        "./lib/types/code/index.d.ts"
-      ],
-      "features": [
-        "./lib/types/features/index.d.ts"
-      ],
-      "layout": [
-        "./lib/types/layout/index.d.ts"
-      ],
-      "form": [
-        "./lib/types/form/index.d.ts"
-      ],
-      "shell": [
-        "./lib/types/shell/index.d.ts"
-      ]
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vertesia/composableai.git",
+        "directory": "packages/ui"
     }
-  },
-  "scripts": {
-    "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix"
-  }
-}
+}

package/src/core/components/SelectList.tsx

@@ -1,6 +1,7 @@
 import { Check } from "lucide-react";
 import clsx from "clsx";
 import { ReactNode, useMemo, useState } from "react";
+import { Input } from "./shadcn";
 
 const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
 
@@ -28,9 +29,12 @@ export interface SelectListProps<T> {
     by?: (keyof T & string) | ((o1: T, o2: T) => boolean);
     optionLayout?: (opt: T, selected: boolean) => OptionLayout;
     noCheck?: boolean;
+    filterBy?: (filterValue: string) => (opt: T) => boolean;
 }
-export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck }: SelectListProps<T>) {
+export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }: SelectListProps<T>) {
     const [selected, setSelected] = useState(value);
+    const [filterValue, setFilterValue] = useState("");
+
     const onSelect = (option: T) => {
         setSelected(option);
         onChange(option);
@@ -46,7 +50,13 @@ export function SelectList<T>({ value, options, onChange, className, optionLayou
     }, [by]);
     return (
         <div className={clsx("", className)}>
+            {filterBy && (
+                <Input type="text" placeholder="Filter..." value={filterValue} onChange={(value) => setFilterValue(value)} />
+            )}
             {options.map((option, i) => {
+                if (filterBy && !filterBy(filterValue)(option)) {
+                    return null;
+                }
                 const isSelected = selected ? optionEquals(selected, option) : false;
                 let layout: OptionLayout;
                 if (optionLayout) {

package/src/core/components/SidePanel.tsx

@@ -53,7 +53,7 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                             onClick={onClose}
                         />
                     )}
-                    
+
                     <div className="fixed inset-y-0 right-0 overflow-hidden">
                         <div className="absolute inset-0 overflow-hidden">
                             <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
@@ -71,17 +71,20 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                             className="absolute left-0 top-0 bottom-0 w-1 cursor-ew-resize hover:bg-indigo-500 transition-colors"
                                             onMouseDown={handleDragStart}
                                         />
-                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-6 shadow-xl">
-                                            <div className="px-2 sm:px-4">
-                                                <div className="flex items-start justify-between">
-                                                    <h2 className="w-full text-base font-semibold leading-6">
-                                                        <div className="text-2xl">{title ?? ""}</div>
-                                                    </h2>
-                                                    <div className="ml-3 flex h-7 items-center">
-                                                        <CloseButton onClose={onClose} />
+                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl">
+                                            {title && (
+                                                <div className="px-2 sm:px-4">
+                                                    <div className="flex items-start justify-between">
+                                                        <h2 className="w-full text-base font-semibold leading-6">
+                                                            <div className="text-2xl">{title ?? ""}</div>
+                                                        </h2>
+                                                        <div className="ml-3 flex h-7 items-center">
+                                                            <CloseButton onClose={onClose} />
+                                                        </div>
                                                     </div>
                                                 </div>
-                                            </div>
+                                            )}
+
                                             <div className="px-2 sm:px-4">
                                                 {children}
                                             </div>

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 {
@@ -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} />
@@ -326,13 +352,13 @@ const FilterBar = ({ 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,4 @@ export * from './command';
 export * from './checkbox';
 export * from './heading';
 export * from './text';
+export * from './resizeable';

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

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } 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-border 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="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }