@vertesia/ui 0.81.1 → 0.82.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.81.1",
+  "version": "0.82.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -60,9 +60,9 @@
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
     "unist-util-visit": "^5.0.0",
-    "@vertesia/common": "0.81.1",
-    "@vertesia/json": "0.81.1",
-    "@vertesia/client": "0.81.1"
+    "@vertesia/client": "0.82.0",
+    "@vertesia/common": "0.82.0",
+    "@vertesia/json": "0.82.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",

package/src/core/components/InputList.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import { Badge } from './Badge';
+import { Badge } from './shadcn/badge';
 import { Input } from './shadcn/input';
 import { VTooltip } from '@vertesia/ui/core';
 

package/src/core/components/Overlay.tsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion"
 import { X } from "lucide-react"
 import { useState, ReactNode } from "react"
 
-import { Button } from "./Button"
+import { Button } from "./shadcn/button"
 
 interface OverlayProps {
     children: ReactNode

package/src/core/components/SidePanel.tsx

@@ -10,8 +10,11 @@ interface SidePanelProps {
     title?: string;
     panelWidth?: number;
     backdrop?: boolean;
+    side?: 'left' | 'right';
+    resizable?: boolean;
+    className?: string;
 }
-export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false }: SidePanelProps) {
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className }: SidePanelProps) {
     const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
@@ -39,6 +42,13 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
         document.addEventListener('mouseup', handleMouseUp);
     };
 
+    const isLeft = side === 'left';
+    const positionClass = isLeft ? 'left-0' : 'right-0';
+    const paddingClass = isLeft ? 'pr-10 sm:pr-16' : 'pl-10 sm:pl-16';
+    const borderClass = isLeft ? 'border-r' : 'border-l';
+    const dragHandleClass = isLeft ? '-right-1' : '-left-1';
+    const initialX = isLeft ? "-100%" : "100%";
+
     return (
         <AnimatePresence>
             {isOpen && (
@@ -54,26 +64,28 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                         />
                     )}
 
-                    <div className="fixed inset-y-0 right-0 overflow-hidden">
+                    <div className={`fixed inset-y-0 ${positionClass} 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">
+                            <div className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}>
                                 <motion.div
-                                    className="pointer-events-auto border-l"
+                                    className={`pointer-events-auto ${borderClass}`}
                                     style={{ width: `${_panelWidth}px` }}
-                                    initial={{ x: "100%" }}
+                                    initial={{ x: initialX }}
                                     animate={{ x: 0 }}
-                                    exit={{ x: "100%" }}
+                                    exit={{ x: initialX }}
                                     transition={{ type: "spring", stiffness: 300, damping: 30 }}
                                 >
                                     <div className="relative flex h-full">
                                         {/* Drag Handle */}
-                                        <div
-                                            className="absolute -left-1 top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center"
-                                            onMouseDown={handleDragStart}
-                                        >
-                                            <Minus className="rotate-90 font-semibold" strokeWidth={4} />
-                                        </div>
-                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl">
+                                        {resizable && (
+                                            <div
+                                                className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center`}
+                                                onMouseDown={handleDragStart}
+                                            >
+                                                <Minus className="rotate-90 font-semibold" strokeWidth={4} />
+                                            </div>
+                                        )}
+                                        <div className={`flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl ${className}`}>
                                             {title && (
                                                 <div className="px-2 sm:px-4">
                                                     <div className="flex items-start justify-between">

package/src/core/components/index.ts

@@ -1,10 +1,7 @@
 
 export * from "./Avatar.js";
-export * from "./Badge.js";
 export * from "./Center.js";
 export * from "./ComboBox.js";
-export * from "./ConfirmModal.js";
-export * from "./DeleteModal.js";
 export * from "./Divider.js";
 export * from "./Dropdown.js";
 export * from "./DropdownList.js";
@@ -14,15 +11,11 @@ export * from "./FormItem.js";
 export * from "./InputList.js";
 export * from "./Link.js";
 export * from "./MenuList.js";
-export * from "./MessageBox.js";
-export * from "./Modal.js";
 export * from "./NumberInput.js";
 export * from "./Overlay.js";
-export * from "./Panel.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
 export * from "./RadioGroup.js";
-export * from "./SelectBox.js";
 export * from "./SelectList.js";
 export * from "./SelectStack.js";
 export * from "./shadcn/index.js";
@@ -31,7 +24,6 @@ export * from "./Spinner.js";
 export * from "./styles.js";
 export * from "./Switch.js";
 export * from "./table/index.js";
-export * from "./tabs/index.js";
 export * from "./TagsInput.js";
 export * from "./toast/index.js";
 

package/src/core/components/{Panel.tsx → shadcn/Panel.tsx}

@@ -1,4 +1,4 @@
-import { VTooltip } from "./shadcn/tooltip"
+import { VTooltip } from "./tooltip"
 import { Info } from "lucide-react"
 
 interface PanelProps {

package/src/core/components/{Badge.tsx → shadcn/badge.tsx}

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./libs/utils"
+import { cn } from "../libs/utils"
 
 // Base badge variants
 const badgeVariants = cva(

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

@@ -4,7 +4,7 @@ import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
 import { cn } from "../libs/utils"
-import { Dialog, DialogContent } from "./dialog"
+import { Dialog, DialogContent } from "./modal/dialog"
 
 const Command: React.ForwardRefExoticComponent<
   React.RefAttributes<HTMLDivElement> &

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

@@ -1,9 +1,10 @@
 export * from './theme/ThemeSwitcher';
 export * from './theme/ThemeProvider';
 
+export * from "./badge"
 export * from './button';
 export * from './card';
-export * from './dialog';
+export * from './modal';
 export * from './input';
 export * from './separator';
 export * from './selectBox';
@@ -11,7 +12,6 @@ export * from './tabs';
 export * from './tooltip';
 export * from './label';
 export * from './breadcrumb';
-export * from './dialog';
 export * from './button';
 export * from './filters';
 export * from './popover';
@@ -20,4 +20,6 @@ export * from './checkbox';
 export * from './heading';
 export * from './text';
 export * from './resizeable';
-export * from './textarea';
+export * from './textarea';
+export * from "./MessageBox"
+export * from "./Panel"

package/src/core/components/{ConfirmModal.tsx → shadcn/modal/ConfirmModal.tsx}

@@ -1,7 +1,7 @@
 import { TriangleAlert } from "lucide-react"
 import React, { useRef } from "react"
-import { VModal, VModalTitle, VModalFooter } from "./shadcn"
-import { Button } from "./shadcn/button"
+import { Modal, ModalTitle, ModalFooter } from "./dialog"
+import { Button } from "../button"
 
 interface ConfirmModalProps {
     title: string
@@ -15,15 +15,15 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
     const cancelButtonRef = useRef(null)
 
     return (
-        <VModal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
+        <Modal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
             <div className="sm:flex sm:items-start p-2">
                 <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                     <TriangleAlert className="size-6 text-red-600" aria-hidden="true" />
                 </div>
                 <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <VModalTitle className="leading-6" show >
+                    <ModalTitle className="leading-6" show >
                         {title}
-                    </VModalTitle>
+                    </ModalTitle>
                     <div className="mt-2">
                         <div className="prose text-sm text-gray-500">
                             {content}
@@ -31,7 +31,7 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
                     </div>
                 </div>
             </div>
-            <VModalFooter align="right">
+            <ModalFooter align="right">
                 <Button
                     variant="destructive"
                     onClick={onConfirm}
@@ -45,7 +45,7 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
                 >
                     Cancel
                 </Button>
-            </VModalFooter>
-        </VModal>
+            </ModalFooter>
+        </Modal>
     )
 }

package/src/core/components/{DeleteModal.tsx → shadcn/modal/DeleteModal.tsx}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ConfirmModal } from "./ConfirmModal.js";
-import { useToast } from "./toast/index.js";
+import { useToast } from "../../toast/index.js";
 
 interface DeleteModalProps {
     idToDelete?: string;

package/src/core/components/shadcn/{dialog.tsx → modal/dialog.tsx}

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../libs/utils";
+import { cn } from "../../libs/utils";
 
 import { X } from "lucide-react";
-import { Button } from "./button";
-import { VisuallyHidden } from "../libs/visuallyHidden";
+import { Button } from "../button";
+import { VisuallyHidden } from "../../libs/visuallyHidden";
 import { createContext, useContext } from "react";
-import { usePortalContainer } from "../../hooks/PortalContainerProvider";
+import { usePortalContainer } from "../../../hooks/PortalContainerProvider";
 
 interface ModalProps {
     children: React.ReactNode | React.ReactNode[];
@@ -28,7 +28,7 @@ export function ModalContextProvider({ children }: { children: React.ReactNode }
     return <ModalContext.Provider value={true}>{children}</ModalContext.Provider>
 }
 
-export function VModal({
+export function Modal({
     className,
     children,
     isOpen,
@@ -50,13 +50,13 @@ export function VModal({
             case "sm":
                 return "max-w-[20vw]";
             case "md":
-                return "max-w-[40vw]";
+                return "max-w-[60vw] lg:max-w-[40vw]";
             case "lg":
-                return "max-w-[60vw]";
+                return "max-w-[80vw] md:max-w-[60vw]";
             case "xl":
-                return "max-w-[80vw]";
+                return "max-w-[95vw] lg:max-w-[80vw]";
             default:
-                return "max-w-[40vw]";
+                return "max-w-[60vw] lg:max-w-[40vw]";
         }
     }
 
@@ -110,13 +110,14 @@ export function VModal({
     );
 }
 
-export const VModalTitle = ({
+export const ModalTitle = ({
     children,
     show = true,
     className,
     description,
+    showDivider = false,
     ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean; description?: string }) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean; description?: string, showDivider?: boolean }) => {
     if (!show) {
         return (
             <VisuallyHidden>
@@ -128,7 +129,11 @@ export const VModalTitle = ({
     return (
         <>
             <DialogTitle
-                className={cn("text-lg font-semibold leading-6 tracking-tight", { 'py-2': !description }, className)}
+                className={cn(
+                    showDivider ? "border-b-solid border-b border-b-1 pb-2 mb-4" : "",
+                    "text-lg font-semibold leading-6 tracking-tight", 
+                    { 'py-2': !description }, 
+                    className)}
                 {...props}
             >
                 {children}
@@ -142,7 +147,7 @@ export const VModalTitle = ({
     );
 };
 
-export const VModalBody = ({
+export const ModalBody = ({
     children,
     className,
     ...props
@@ -158,7 +163,7 @@ interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "left" | "right" | "center";
 }
 
-export const VModalFooter = ({
+export const ModalFooter = ({
     align = "right",
     children,
     className,

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

@@ -0,0 +1,3 @@
+export * from "./ConfirmModal"
+export * from "./DeleteModal"
+export * from "./dialog"

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

@@ -3,7 +3,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { cn } from "../libs/utils"
 import { JSX } from "react";
-import { useIsInModal } from "./dialog";
+import { useIsInModal } from "./modal/dialog";
 import { usePortalContainer } from "../../hooks/PortalContainerProvider";
 
 export interface PopoverContextValue {

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

@@ -1,15 +1,15 @@
 import clsx from 'clsx';
 import { isEqual } from 'lodash-es';
 import { AlertTriangle, Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo, ReactNode } 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';
+import { Button } from './button';
 import { VTooltip } from './tooltip';
 
-export interface VSelectBoxBaseProps<T> {
+export interface SelectBoxBaseProps<T> {
     options: T[] | undefined;
     optionLabel?: (option: T) => React.ReactNode;
     onBlur?: () => void;
@@ -26,27 +26,29 @@ export interface VSelectBoxBaseProps<T> {
     isClearable?: boolean;
     border?: boolean;
     inline?: boolean;
+    clearIcon?: ReactNode;
+    clearTitle?: string;
     /** Show warning when value is not in options list (default: true) */
     warnOnMissingValue?: boolean;
     /** Custom warning message when value is not in options */
     missingValueWarning?: string;
 }
 
-interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
+interface SelectBoxSingleProps<T> extends SelectBoxBaseProps<T> {
     multiple?: false;
     value?: T;
     onChange: (option: T) => void;
 }
 
-interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
+interface SelectBoxMultipleProps<T> extends SelectBoxBaseProps<T> {
     multiple: true;
     value?: T[];
     onChange: (options: T[]) => void;
 }
 
-type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
+type SelectBoxProps<T> = SelectBoxSingleProps<T> | SelectBoxMultipleProps<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, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid" }: Readonly<VSelectBoxProps<T>>) {
+export function SelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid", clearIcon, clearTitle }: Readonly<SelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -301,8 +303,8 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
                             <Button variant={"link"} size={"icon"}
                                 disabled={disabled}
-                                alt="Clear selection"
-                                onClick={(e) => {
+                                alt={clearTitle || "Clear selection"}
+                                onClick={(e: { stopPropagation: () => void; }) => {
                                     e.stopPropagation();
                                     if (multiple) {
                                         (onChange as (options: T[]) => void)([] as T[]);
@@ -312,7 +314,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                                 }}
                                 className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
                             >
-                                <X className="size-4" />
+                                {clearIcon ? clearIcon : <X className="size-4" />}
                             </Button>
                         )}
                         {!disabled && (

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

@@ -1,9 +1,18 @@
 import * as React from "react";
+import { ReactNode } from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 import { cn } from "../libs/utils";
-import { Tab, TabsContext as _TabContext } from '../tabs/TabsContext.js';
-import { VSelectBox } from "./selectBox";
+import { SelectBox } from "./selectBox";
+
+export interface Tab {
+    name: string;
+    current?: boolean;
+    href?: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
 
 const TabsContext = React.createContext<{
   size?: number;
@@ -36,7 +45,7 @@ interface TabsProps {
   updateHash?: boolean;
 }
 
-const VTabs = ({
+const Tabs = ({
   tabs,
   defaultValue,
   current,
@@ -135,7 +144,7 @@ const VTabs = ({
   );
 };
 
-const VTabsBar = ({ className }: { className?: string }) => {
+const TabsBar = ({ className }: { className?: string }) => {
   const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
@@ -164,7 +173,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
     <>
       {responsive && (
         <div className="px-2 block lg:hidden">
-          <VSelectBox
+          <SelectBox
             label="Tab"
             className={(className)}
             options={tabs}
@@ -194,7 +203,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
   );
 };
 
-const VTabsPanel = ({ className }: { className?: string }) => {
+const TabsPanel = ({ className }: { className?: string }) => {
   const { tabs } = React.useContext(TabsContext);
 
   if (!tabs) return null;
@@ -293,4 +302,4 @@ const TabsContent = React.forwardRef<
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { VTabs, VTabsBar, VTabsPanel, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsBar, TabsPanel, TabsList, TabsTrigger, TabsContent };

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -3,7 +3,7 @@ import { Bot, Cpu, XIcon } from "lucide-react";
 import { useUserSession } from "@vertesia/ui/session";
 import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
 import { AgentMessage, AgentMessageType, Plan, UserInputSignal } from "@vertesia/common";
-import { Button, MessageBox, useToast, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
+import { Button, MessageBox, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
 
 import { AnimatedThinkingDots, PulsatingCircle } from "./AnimatedThinkingDots";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
@@ -685,25 +685,25 @@ function ModernAgentConversationInner({
                     />
                 </div>
             )}
-            <VModal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
-                <VModalTitle>Export conversation as PDF</VModalTitle>
-                <VModalBody>
+            <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
+                <ModalTitle>Export conversation as PDF</ModalTitle>
+                <ModalBody>
                     <p className="mb-2">
                         This will open your browser&apos;s print dialog with the current conversation.
                     </p>
                     <p className="text-sm text-muted">
                         To save a PDF, choose &quot;Save as PDF&quot; or a similar option in the print dialog.
                     </p>
-                </VModalBody>
-                <VModalFooter align="right">
+                </ModalBody>
+                <ModalFooter align="right">
                     <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
                         Cancel
                     </Button>
                     <Button size="sm" onClick={handleConfirmExportPdf}>
                         Open print dialog
                     </Button>
-                </VModalFooter>
-            </VModal>
+                </ModalFooter>
+            </Modal>
         </div>
     );
 }

package/src/features/agent/chat/ModernAgentOutput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Spinner, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core";
+import { Button, Input, Spinner, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core";
 import { Activity, PaperclipIcon, SendIcon } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { SelectDocument } from "../../../store";
@@ -115,16 +115,16 @@ export default function MessageInput({
             </div>
 
             {/* Object Selection Modal */}
-            <VModal
+            <Modal
                 isOpen={isObjectModalOpen}
                 onClose={() => setIsObjectModalOpen(false)}
                 className='min-w-[60vw]'
             >
-                <VModalTitle>Link Object</VModalTitle>
-                <VModalBody className="pb-6">
+                <ModalTitle>Link Object</ModalTitle>
+                <ModalBody className="pb-6">
                     <SelectDocument onChange={handleObjectSelect} />
-                </VModalBody>
-            </VModal>
+                </ModalBody>
+            </Modal>
         </div>
     );
 }

package/src/features/store/collections/CreateCollection.tsx

@@ -1,5 +1,5 @@
 import { CreateCollectionPayload } from "@vertesia/common";
-import { useToast, VModalBody, FormItem, VModalFooter, Input, Switch, Button, VModal, VModalTitle, Textarea } from "@vertesia/ui/core";
+import { useToast, ModalBody, FormItem, ModalFooter, Input, Switch, Button, Modal, ModalTitle, Textarea } from "@vertesia/ui/core";
 import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
@@ -75,7 +75,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
 
     return (
         <form onSubmit={(e) => e.preventDefault()}>
-            <VModalBody>
+            <ModalBody>
                 <FormItem label="Name" required>
                     <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
                 </FormItem>
@@ -116,12 +116,12 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                         isClearable
                     />
                 </FormItem>
-            </VModalBody>
-            <VModalFooter>
+            </ModalBody>
+            <ModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>
                     Create Collection
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         </form >
     );
 }
@@ -132,9 +132,9 @@ interface CreateCollectionModalProps {
 }
 export function CreateCollectionModal({ isOpen, onClose }: CreateCollectionModalProps) {
     return (
-        <VModal onClose={onClose} isOpen={isOpen}>
-            <VModalTitle>Create a Collection</VModalTitle>
+        <Modal onClose={onClose} isOpen={isOpen}>
+            <ModalTitle>Create a Collection</ModalTitle>
             <CreateCollectionForm onClose={onClose} />
-        </VModal>
+        </Modal>
     );
 }

package/src/features/store/collections/EditCollectionView.tsx

@@ -188,7 +188,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         </FormItem>
                     )
                 }
-                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
+                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables." className="h-[200px]">
                     <MonacoEditor
                         className="border-1 rounded-md border-border"
                         value={tableLayoutValue}