@vendure/dashboard 3.3.6-master-202507020959 → 3.3.6-master-202507030234

package/src/lib/components/layout/app-sidebar.tsx

@@ -1,14 +1,14 @@
-import { NavMain } from '@/components/layout/nav-main.js';
-import { NavUser } from '@/components/layout/nav-user.js';
+import { NavMain } from '@/vdb/components/layout/nav-main.js';
+import { NavUser } from '@/vdb/components/layout/nav-user.js';
 import {
     Sidebar,
     SidebarContent,
     SidebarFooter,
     SidebarHeader,
     SidebarRail,
-} from '@/components/ui/sidebar.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import { getNavMenuConfig } from '@/framework/nav-menu/nav-menu-extensions.js';
+} from '@/vdb/components/ui/sidebar.js';
+import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
+import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import * as React from 'react';
 import { ChannelSwitcher } from './channel-switcher.js';
 

package/src/lib/components/layout/channel-switcher.tsx

@@ -1,20 +1,18 @@
-import * as React from 'react';
 import { ChevronsUpDown, Plus } from 'lucide-react';
 
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
-    DropdownMenuShortcut,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
-import { Trans } from '@/lib/trans.js';
-import { useChannel } from '@/hooks/use-channel.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/vdb/components/ui/sidebar.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Link } from '@tanstack/react-router';
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
 
 export function ChannelSwitcher() {
     const { isMobile } = useSidebar();
@@ -38,7 +36,9 @@ export function ChannelSwitcher() {
                                 </span>
                             </div>
                             <div className="grid flex-1 text-left text-sm leading-tight">
-                                <span className="truncate font-semibold"><ChannelCodeLabel code={displayChannel?.code} /></span>
+                                <span className="truncate font-semibold">
+                                    <ChannelCodeLabel code={displayChannel?.code} />
+                                </span>
                                 <span className="truncate text-xs">
                                     Default Language: {displayChannel?.defaultLanguageCode?.toUpperCase()}
                                 </span>

package/src/lib/components/layout/content-language-selector.tsx

@@ -1,8 +1,8 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { cn } from '@/lib/utils.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 interface ContentLanguageSelectorProps {
     value?: string;
@@ -13,7 +13,10 @@ interface ContentLanguageSelectorProps {
 export function ContentLanguageSelector({ value, onChange, className }: ContentLanguageSelectorProps) {
     const serverConfig = useServerConfig();
     const { formatLanguageName } = useLocalFormat();
-    const { settings: { contentLanguage, displayLanguage }, setContentLanguage} = useUserSettings();
+    const {
+        settings: { contentLanguage, displayLanguage },
+        setContentLanguage,
+    } = useUserSettings();
 
     // Fallback to empty array if serverConfig is null
     const languages = serverConfig?.availableLanguages || [];
@@ -22,10 +25,13 @@ export function ContentLanguageSelector({ value, onChange, className }: ContentL
     const currentValue = contentLanguage;
 
     return (
-        <Select value={currentValue} onValueChange={value => {
-            onChange?.(value);
-            setContentLanguage(value);
-            }}>
+        <Select
+            value={currentValue}
+            onValueChange={value => {
+                onChange?.(value);
+                setContentLanguage(value);
+            }}
+        >
             <SelectTrigger className={cn('w-[200px]', className)}>
                 <SelectValue placeholder="Select language" />
             </SelectTrigger>

package/src/lib/components/layout/generated-breadcrumbs.tsx

@@ -4,7 +4,7 @@ import {
     BreadcrumbLink,
     BreadcrumbList,
     BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb.js';
+} from '@/vdb/components/ui/breadcrumb.js';
 import { Link, useRouterState } from '@tanstack/react-router';
 import * as React from 'react';
 import { Fragment } from 'react';

package/src/lib/components/layout/language-dialog.tsx

@@ -1,17 +1,11 @@
-import { CurrencyCode } from '@/constants.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+import { CurrencyCode } from '@/vdb/constants.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useState } from 'react';
 import { uiConfig } from 'virtual:vendure-ui-config';
 import { Button } from '../ui/button.js';
-import {
-    DialogClose,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle
-} from '../ui/dialog.js';
+import { DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
 import { Label } from '../ui/label.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
 

package/src/lib/components/layout/nav-main.tsx

@@ -1,4 +1,4 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
 import {
     SidebarGroup,
     SidebarGroupLabel,
@@ -8,12 +8,12 @@ import {
     SidebarMenuSub,
     SidebarMenuSubButton,
     SidebarMenuSubItem,
-} from '@/components/ui/sidebar.js';
+} from '@/vdb/components/ui/sidebar.js';
 import {
     NavMenuItem,
     NavMenuSection,
     NavMenuSectionPlacement,
-} from '@/framework/nav-menu/nav-menu-extensions.js';
+} from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import { Link, useLocation } from '@tanstack/react-router';
 import { ChevronRight } from 'lucide-react';
 import * as React from 'react';
@@ -28,7 +28,7 @@ function sortByOrder<T extends { order?: number; title: string }>(a: T, b: T) {
     return orderA - orderB;
 }
 
-export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem> }) {
+export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavMenuItem> }>) {
     const location = useLocation();
     // State to track which bottom section is currently open
     const [openBottomSectionId, setOpenBottomSectionId] = React.useState<string | null>(null);

package/src/lib/components/layout/nav-projects.tsx

@@ -6,7 +6,7 @@ import {
     DropdownMenuItem,
     DropdownMenuSeparator,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
 import {
     SidebarGroup,
     SidebarGroupLabel,
@@ -15,7 +15,7 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
     useSidebar,
-} from '@/components/ui/sidebar.js';
+} from '@/vdb/components/ui/sidebar.js';
 
 export function NavProjects({
     projects,

package/src/lib/components/layout/nav-user.tsx

@@ -1,8 +1,8 @@
-import { useAuth } from '@/hooks/use-auth.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import { ChevronsUpDown, LogOut, Monitor, Moon, Sparkles, Sun } from 'lucide-react';
 
-// import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
+// import { Avatar, AvatarFallback, AvatarImage } from '@/vdb/components/ui/avatar.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -17,11 +17,11 @@ import {
     DropdownMenuSubContent,
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
-import { Theme } from '@/providers/theme-provider.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/vdb/components/ui/sidebar.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { Theme } from '@/vdb/providers/theme-provider.js';
 import { useMemo } from 'react';
 import { Dialog, DialogTrigger } from '../ui/dialog.js';
 import { LanguageDialog } from './language-dialog.js';

package/src/lib/components/layout/prerelease-popup.tsx

@@ -1,4 +1,4 @@
-import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useState } from 'react';
 import { toast } from 'sonner';
 

package/src/lib/components/login/login-form.tsx

@@ -1,8 +1,8 @@
-import { Button } from '@/components/ui/button.js';
-import { Card, CardContent } from '@/components/ui/card.js';
-import { Input } from '@/components/ui/input.js';
-import { Trans } from '@/lib/trans.js';
-import { cn } from '@/lib/utils.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card, CardContent } from '@/vdb/components/ui/card.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
 import * as React from 'react';

package/src/lib/components/shared/alerts.tsx

@@ -1,10 +1,10 @@
+import { useAlerts } from '@/vdb/framework/alert/alert-extensions.js';
+import { AlertItem } from '@/vdb/framework/alert/alert-item.js';
+import { AlertsIndicator } from '@/vdb/framework/alert/alerts-indicator.js';
 import { BellIcon } from 'lucide-react';
 import { Button } from '../ui/button.js';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog.js';
-import { useAlerts } from '../../framework/alert/alert-extensions.js';
-import { AlertItem } from '../../framework/alert/alert-item.js';
 import { ScrollArea } from '../ui/scroll-area.js';
-import { AlertsIndicator } from '../../framework/alert/alerts-indicator.js';
 
 export function Alerts() {
     const { alerts } = useAlerts();

package/src/lib/components/shared/animated-number.tsx

@@ -1,5 +1,5 @@
-import { useChannel } from '@/index.js';
-import { useLocalFormat } from '@/index.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { motion, useSpring, useTransform } from 'motion/react';
 import { useEffect } from 'react';
 

package/src/lib/components/shared/asset/asset-bulk-actions.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { getBulkActions } from '@/framework/data-table/data-table-extensions.js';
-import { usePageBlock } from '@/hooks/use-page-block.js';
-import { usePage } from '@/hooks/use-page.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
+import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { ChevronDown } from 'lucide-react';
 import { Asset } from './asset-gallery.js';
 
@@ -32,7 +32,7 @@ interface AssetBulkActionsProps {
     refetch: () => void;
 }
 
-export function AssetBulkActions({ selection, bulkActions, refetch }: AssetBulkActionsProps) {
+export function AssetBulkActions({ selection, bulkActions, refetch }: Readonly<AssetBulkActionsProps>) {
     const { pageId } = usePage();
     const { blockId } = usePageBlock();
 
@@ -76,7 +76,11 @@ export function AssetBulkActions({ selection, bulkActions, refetch }: AssetBulkA
                 <DropdownMenuContent align="start">
                     {allBulkActions.length > 0 ? (
                         allBulkActions.map((action, index) => (
-                            <action.component key={`asset-bulk-action-${index}`} selection={selection} refetch={refetch} />
+                            <action.component
+                                key={`asset-bulk-action-${index}`}
+                                selection={selection}
+                                refetch={refetch}
+                            />
                         ))
                     ) : (
                         <DropdownMenuItem className="text-muted-foreground" disabled>

package/src/lib/components/shared/asset/asset-focal-point-editor.tsx

@@ -1,11 +1,11 @@
-import { Button } from "@/components/ui/button.js";
-import { cn } from "@/lib/utils.js";
-import { Crosshair, X } from "lucide-react";
-import { useRef, useState } from "react";
-import { DndContext, useDraggable } from "@dnd-kit/core";
-import { restrictToParentElement } from "@dnd-kit/modifiers";
-import { CSS } from "@dnd-kit/utilities";
-import { Trans } from "@/lib/trans.js";
+import { Button } from '@/vdb/components/ui/button.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { DndContext, useDraggable } from '@dnd-kit/core';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import { CSS } from '@dnd-kit/utilities';
+import { Crosshair, X } from 'lucide-react';
+import { useState } from 'react';
 
 export interface AssetFocalPointEditorProps {
     settingFocalPoint: boolean;
@@ -24,12 +24,14 @@ interface Point {
 
 function DraggableFocalPoint({ point }: { point: Point }) {
     const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
-        id: "focal-point",
+        id: 'focal-point',
     });
     const style = {
         left: `${point.x * 100}%`,
         top: `${point.y * 100}%`,
-        transform: isDragging ? `translate(-50%, -50%) ${CSS.Translate.toString(transform)}` : `translate(-50%, -50%)`,
+        transform: isDragging
+            ? `translate(-50%, -50%) ${CSS.Translate.toString(transform)}`
+            : `translate(-50%, -50%)`,
     };
 
     return (
@@ -43,8 +45,15 @@ function DraggableFocalPoint({ point }: { point: Point }) {
     );
 }
 
-export function AssetFocalPointEditor({ settingFocalPoint, focalPoint, width, height, onFocalPointChange, onCancel, children }: AssetFocalPointEditorProps) {
-
+export function AssetFocalPointEditor({
+    settingFocalPoint,
+    focalPoint,
+    width,
+    height,
+    onFocalPointChange,
+    onCancel,
+    children,
+}: AssetFocalPointEditorProps) {
     const [focalPointCurrent, setFocalPointCurrent] = useState<Point>(focalPoint ?? { x: 0.5, y: 0.5 });
 
     const handleDragEnd = (event: any) => {
@@ -67,9 +76,7 @@ export function AssetFocalPointEditor({ settingFocalPoint, focalPoint, width, he
                 {children}
                 {settingFocalPoint && (
                     <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToParentElement]}>
-                        <DraggableFocalPoint
-                            point={focalPointCurrent}
-                        />
+                        <DraggableFocalPoint point={focalPointCurrent} />
                     </DndContext>
                 )}
             </div>
@@ -80,9 +87,12 @@ export function AssetFocalPointEditor({ settingFocalPoint, focalPoint, width, he
                         <X className="mr-2 h-4 w-4" />
                         <Trans>Cancel</Trans>
                     </Button>
-                    <Button type="button" onClick={() => {
-                        onFocalPointChange(focalPointCurrent);
-                    }}>
+                    <Button
+                        type="button"
+                        onClick={() => {
+                            onFocalPointChange(focalPointCurrent);
+                        }}
+                    >
                         <Crosshair className="mr-2 h-4 w-4" />
                         <Trans>Set Focal Point</Trans>
                     </Button>
@@ -90,4 +100,4 @@ export function AssetFocalPointEditor({ settingFocalPoint, focalPoint, width, he
             )}
         </div>
     );
-}
+}

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -1,8 +1,8 @@
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Button } from '@/components/ui/button.js';
-import { Card, CardContent } from '@/components/ui/card.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Input } from '@/components/ui/input.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card, CardContent } from '@/vdb/components/ui/card.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Input } from '@/vdb/components/ui/input.js';
 import {
     Pagination,
     PaginationContent,
@@ -11,13 +11,13 @@ import {
     PaginationLink,
     PaginationNext,
     PaginationPrevious,
-} from '@/components/ui/pagination.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { assetFragment, AssetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { formatFileSize } from '@/lib/utils.js';
+} from '@/vdb/components/ui/pagination.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { api } from '@/vdb/graphql/api.js';
+import { assetFragment, AssetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { formatFileSize } from '@/vdb/lib/utils.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Loader2, Search, Upload, X } from 'lucide-react';

package/src/lib/components/shared/asset/asset-picker-dialog.tsx

@@ -1,72 +1,69 @@
-import React, { useState } from 'react';
-import { AssetGallery, Asset } from './asset-gallery.js';
-import { 
-  Dialog, 
-  DialogContent, 
-  DialogHeader, 
-  DialogTitle, 
-  DialogFooter 
-} from '@/components/ui/dialog.js';
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { useState } from 'react';
+import { Asset, AssetGallery } from './asset-gallery.js';
 
 interface AssetPickerDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect: (assets: Asset[]) => void;
-  multiSelect?: boolean;
-  initialSelectedAssets?: Asset[];
-  title?: string;
+    open: boolean;
+    onClose: () => void;
+    onSelect: (assets: Asset[]) => void;
+    multiSelect?: boolean;
+    initialSelectedAssets?: Asset[];
+    title?: string;
 }
 
 export function AssetPickerDialog({
-  open,
-  onClose,
-  onSelect,
-  multiSelect = false,
-  initialSelectedAssets = [],
-  title = "Select Assets",
+    open,
+    onClose,
+    onSelect,
+    multiSelect = false,
+    initialSelectedAssets = [],
+    title = 'Select Assets',
 }: AssetPickerDialogProps) {
-  const [selectedAssets, setSelectedAssets] = useState<Asset[]>(initialSelectedAssets);
-  
-  const handleAssetSelect = (assets: Asset[]) => {
-    setSelectedAssets(assets);
-  };
-  
-  const handleConfirm = () => {
-    onSelect(selectedAssets);
-    onClose();
-  };
-  
-  return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[800px] lg:max-w-[1000px] max-h-[80vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{multiSelect ? title : title.replace('Assets', 'Asset')}</DialogTitle>
-        </DialogHeader>
-        
-        <div className="flex-grow py-4">
-          <AssetGallery 
-            onSelect={handleAssetSelect}
-            multiSelect='manual'
-            initialSelectedAssets={initialSelectedAssets}
-            fixedHeight={true}
-          />
-        </div>
-        
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button 
-            onClick={handleConfirm} 
-            disabled={selectedAssets.length === 0}
-          >
-            {selectedAssets.length > 0 && multiSelect 
-              ? `Select ${selectedAssets.length} Asset${selectedAssets.length > 1 ? 's' : ''}`
-              : 'Select Asset'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
+    const [selectedAssets, setSelectedAssets] = useState<Asset[]>(initialSelectedAssets);
+
+    const handleAssetSelect = (assets: Asset[]) => {
+        setSelectedAssets(assets);
+    };
+
+    const handleConfirm = () => {
+        onSelect(selectedAssets);
+        onClose();
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-[800px] lg:max-w-[1000px] max-h-[80vh] flex flex-col">
+                <DialogHeader>
+                    <DialogTitle>{multiSelect ? title : title.replace('Assets', 'Asset')}</DialogTitle>
+                </DialogHeader>
+
+                <div className="flex-grow py-4">
+                    <AssetGallery
+                        onSelect={handleAssetSelect}
+                        multiSelect="manual"
+                        initialSelectedAssets={initialSelectedAssets}
+                        fixedHeight={true}
+                    />
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleConfirm} disabled={selectedAssets.length === 0}>
+                        {selectedAssets.length > 0 && multiSelect
+                            ? `Select ${selectedAssets.length} Asset${selectedAssets.length > 1 ? 's' : ''}`
+                            : 'Select Asset'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/lib/components/shared/asset/asset-preview-dialog.tsx

@@ -4,8 +4,8 @@ import {
     DialogDescription,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { AssetWithTags, AssetPreview } from './asset-preview.js';
+} from '@/vdb/components/ui/dialog.js';
+import { AssetPreview, AssetWithTags } from './asset-preview.js';
 
 interface AssetPreviewDialogProps {
     open: boolean;
@@ -30,11 +30,7 @@ export function AssetPreviewDialog({
                     <DialogDescription>Preview of {asset.name}</DialogDescription>
                 </DialogHeader>
                 <div className="h-full p-6">
-                    <AssetPreview
-                        asset={asset}
-                        assets={assets}
-                        customFields={customFields}
-                    />
+                    <AssetPreview asset={asset} assets={assets} customFields={customFields} />
                 </div>
             </DialogContent>
         </Dialog>

package/src/lib/components/shared/asset/asset-preview-selector.tsx

@@ -1,7 +1,5 @@
-
-
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select.js";
-import { PreviewPreset } from "./asset-preview.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { PreviewPreset } from './asset-preview.js';
 
 export interface AssetPreviewSelectorProps {
     size: PreviewPreset;
@@ -10,7 +8,7 @@ export interface AssetPreviewSelectorProps {
     height: number;
 }
 
-export function AssetPreviewSelector({ size, setSize, width, height }: AssetPreviewSelectorProps) {
+export function AssetPreviewSelector({ size, setSize, width, height }: Readonly<AssetPreviewSelectorProps>) {
     return (
         <div className="flex items-center gap-2">
             <Select value={size} onValueChange={value => setSize(value as PreviewPreset)}>
@@ -31,4 +29,4 @@ export function AssetPreviewSelector({ size, setSize, width, height }: AssetPrev
             </p>
         </div>
     );
-}
+}