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

package/src/lib/components/data-table/data-table-faceted-filter.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { Column } from '@tanstack/react-table';
-import { Check, FilterIcon, PlusCircle } from 'lucide-react';
+import { Check, FilterIcon } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Command,
     CommandEmpty,
@@ -13,9 +12,10 @@ import {
     CommandItem,
     CommandList,
     CommandSeparator,
-} from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { Separator } from '@/components/ui/separator.js';
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 export interface DataTableFacetedFilterOption {
     label: string;

package/src/lib/components/data-table/data-table-filter-badge.tsx

@@ -1,4 +1,4 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { CircleX, Filter } from 'lucide-react';
 import { Badge } from '../ui/badge.js';
 import { HumanReadableOperator, Operator } from './human-readable-operator.js';

package/src/lib/components/data-table/data-table-filter-dialog.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DialogClose,
     DialogContent,
@@ -6,8 +6,8 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Column } from '@tanstack/react-table';
 import { useState } from 'react';
 import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';

package/src/lib/components/data-table/data-table-pagination.tsx

@@ -1,8 +1,8 @@
 import { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 
-import { Button } from '@/components/ui/button.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
 interface DataTablePaginationProps<TData> {
     table: Table<TData>;

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -1,38 +1,31 @@
 'use client';
 
 import { DndContext, closestCenter } from '@dnd-kit/core';
-import {
-    restrictToVerticalAxis,
-} from '@dnd-kit/modifiers';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Table } from '@tanstack/react-table';
 import { GripVertical, Settings2 } from 'lucide-react';
 
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
-    DropdownMenuSeparator, DropdownMenuTrigger,
     DropdownMenu,
     DropdownMenuCheckboxItem,
     DropdownMenuContent,
-    DropdownMenuItem
-} from '@/components/ui/dropdown-menu.js';
-import { usePage } from '@/hooks/use-page.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
 interface DataTableViewOptionsProps<TData> {
     table: Table<TData>;
 }
 
 function SortableItem({ id, children }: { id: string; children: React.ReactNode }) {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-    } = useSortable({ id });
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
     const style = {
         transform: CSS.Transform.toString(transform),
@@ -65,7 +58,11 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
             const newColumns = [...columns];
             newColumns.splice(overIndex, 0, newColumns.splice(activeIndex, 1)[0]);
             if (page?.pageId) {
-                setTableSettings(page.pageId, 'columnOrder', newColumns.map(col => col.id));
+                setTableSettings(
+                    page.pageId,
+                    'columnOrder',
+                    newColumns.map(col => col.id),
+                );
             }
         }
     };
@@ -87,15 +84,22 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-[150px]">
-                    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
-                        <SortableContext items={columns.map(col => col.id)} strategy={verticalListSortingStrategy}>
+                    <DndContext
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleDragEnd}
+                        modifiers={[restrictToVerticalAxis]}
+                    >
+                        <SortableContext
+                            items={columns.map(col => col.id)}
+                            strategy={verticalListSortingStrategy}
+                        >
                             {columns.map(column => (
                                 <SortableItem key={column.id} id={column.id}>
                                     <DropdownMenuCheckboxItem
                                         className="capitalize"
                                         checked={column.getIsVisible()}
                                         onCheckedChange={value => column.toggleVisibility(!!value)}
-                                        onSelect={(e) => e.preventDefault()}
+                                        onSelect={e => e.preventDefault()}
                                     >
                                         {column.id}
                                     </DropdownMenuCheckboxItem>

package/src/lib/components/data-table/data-table.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
-import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
-import { RefreshButton } from '@/components/data-table/refresh-button.js';
-import { Input } from '@/components/ui/input.js';
-import { Skeleton } from '@/components/ui/skeleton.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import { BulkAction } from '@/framework/data-table/data-table-types.js';
-import { useChannel } from '@/hooks/use-channel.js';
+import { DataTablePagination } from '@/vdb/components/data-table/data-table-pagination.js';
+import { DataTableViewOptions } from '@/vdb/components/data-table/data-table-view-options.js';
+import { RefreshButton } from '@/vdb/components/data-table/refresh-button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Skeleton } from '@/vdb/components/ui/skeleton.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
 import {
     ColumnDef,
     ColumnFilter,

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -1,10 +1,10 @@
-import { Trans } from "@/lib/trans.js";
+import { Trans } from '@/vdb/lib/trans.js';
 
-import { Select, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { SelectContent } from "@/components/ui/select.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableBooleanFilterProps {
     value: Record<string, any> | undefined;
@@ -14,10 +14,10 @@ export interface DataTableBooleanFilterProps {
 export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
 
 export function DataTableBooleanFilter({ value: incomingValue, onChange }: DataTableBooleanFilterProps) {
-    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] ?? 'eq' : 'eq';
+    const initialOperator = incomingValue ? (Object.keys(incomingValue)[0] ?? 'eq') : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
-    const [value, setValue] = useState<boolean>(initialValue as boolean ?? true);
+    const [value, setValue] = useState<boolean>((initialValue as boolean) ?? true);
 
     useEffect(() => {
         onChange({ [operator]: value });

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -1,9 +1,7 @@
-import { Trans } from "@/lib/trans.js";
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-import { SelectContent } from "@/components/ui/select.js";
-import { useEffect, useState } from "react";
-import { DateTimeInput } from "@/components/data-input/datetime-input.js";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableDateTimeFilterProps {
     value: Record<string, any> | undefined;
@@ -67,25 +65,15 @@ export function DataTableDateTimeFilter({ value: incomingValue, onChange }: Data
                         ))}
                     </SelectContent>
                 </Select>
-                {operator !== 'isNull' && (
-                    operator === 'between' ? (
+                {operator !== 'isNull' &&
+                    (operator === 'between' ? (
                         <div className="space-y-2">
-                            <DateTimeInput
-                                value={startDate}
-                                onChange={setStartDate}
-                            />
-                            <DateTimeInput
-                                value={endDate}
-                                onChange={setEndDate}
-                            />
+                            <DateTimeInput value={startDate} onChange={setStartDate} />
+                            <DateTimeInput value={endDate} onChange={setEndDate} />
                         </div>
                     ) : (
-                        <DateTimeInput
-                            value={value}
-                            onChange={setValue}
-                        />
-                    )
-                )}
+                        <DateTimeInput value={value} onChange={setValue} />
+                    ))}
             </div>
             {error && <p className="text-sm text-red-500">{error}</p>}
         </div>

package/src/lib/components/data-table/filters/data-table-id-filter.tsx

@@ -1,11 +1,9 @@
-import { Trans } from "@/lib/trans.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableIdFilterProps {
     value: Record<string, any> | undefined;
@@ -25,7 +23,10 @@ export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableI
             onChange({ [operator]: true });
         } else if (operator === 'in' || operator === 'notIn') {
             // Split by comma and trim whitespace
-            const values = value.split(',').map(v => v.trim()).filter(v => v);
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(v => v);
             onChange({ [operator]: values });
         } else {
             onChange({ [operator]: value });
@@ -48,7 +49,11 @@ export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableI
             </Select>
             {operator !== 'isNull' && (
                 <Input
-                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated IDs..." : "Enter ID..."}
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated IDs...'
+                            : 'Enter ID...'
+                    }
                     value={value}
                     onChange={e => setValue(e.target.value)}
                 />

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -1,11 +1,9 @@
-import { Trans } from "@/lib/trans.js";
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { MoneyInput } from "@/components/data-input/money-input.js";
-import { useEffect, useState } from "react";
-import { useChannel } from "@/hooks/use-channel.js";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableNumberFilterProps {
     mode: 'number' | 'money';
@@ -72,7 +70,7 @@ export function DataTableNumberFilter({ mode, value: incomingValue, onChange }:
             return (
                 <MoneyInput
                     value={parseFloat(value) || 0}
-                    onChange={(newValue) => onChange(newValue.toString())}
+                    onChange={newValue => onChange(newValue.toString())}
                     currency={activeChannel?.defaultCurrencyCode ?? 'USD'}
                 />
             );
@@ -102,16 +100,15 @@ export function DataTableNumberFilter({ mode, value: incomingValue, onChange }:
                         ))}
                     </SelectContent>
                 </Select>
-                {operator !== 'isNull' && (
-                    operator === 'between' ? (
+                {operator !== 'isNull' &&
+                    (operator === 'between' ? (
                         <div className="flex gap-2">
-                            {renderInput(minValue, setMinValue, "Min")}
-                            {renderInput(maxValue, setMaxValue, "Max")}
+                            {renderInput(minValue, setMinValue, 'Min')}
+                            {renderInput(maxValue, setMaxValue, 'Max')}
                         </div>
                     ) : (
-                        renderInput(value, setValue, "Enter value...")
-                    )
-                )}
+                        renderInput(value, setValue, 'Enter value...')
+                    ))}
             </div>
             {error && <p className="text-sm text-red-500">{error}</p>}
         </div>

package/src/lib/components/data-table/filters/data-table-string-filter.tsx

@@ -1,18 +1,25 @@
-import { Trans } from "@/lib/trans.js";
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
-import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
-
-import { SelectContent } from "@/components/ui/select.js";
-import { Input } from "@/components/ui/input.js";
-import { useEffect, useState } from "react";
-import { HumanReadableOperator } from "../human-readable-operator.js";
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
 
 export interface DataTableStringFilterProps {
     value: Record<string, any> | undefined;
     onChange: (filter: Record<string, any>) => void;
 }
 
-export const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'] as const;
+export const STRING_OPERATORS = [
+    'eq',
+    'notEq',
+    'contains',
+    'notContains',
+    'in',
+    'notIn',
+    'regex',
+    'isNull',
+] as const;
 
 export function DataTableStringFilter({ value: incomingValue, onChange }: DataTableStringFilterProps) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'contains';
@@ -26,7 +33,10 @@ export function DataTableStringFilter({ value: incomingValue, onChange }: DataTa
         } else if (operator === 'in' || operator === 'notIn') {
             // Split by comma and trim whitespace
             if (typeof value === 'string') {
-                const values = value.split(',').map(v => v.trim()).filter(v => v);
+                const values = value
+                    .split(',')
+                    .map(v => v.trim())
+                    .filter(v => v);
                 onChange({ [operator]: values });
             } else {
                 onChange({ [operator]: [] });
@@ -52,11 +62,15 @@ export function DataTableStringFilter({ value: incomingValue, onChange }: DataTa
             </Select>
             {operator !== 'isNull' && (
                 <Input
-                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated values..." : "Enter filter value..."}
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated values...'
+                            : 'Enter filter value...'
+                    }
                     value={value}
                     onChange={e => setValue(e.target.value)}
                 />
             )}
         </div>
-    )
+    );
 }

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/lib/trans.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
 import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
 import { ID_OPERATORS } from './filters/data-table-id-filter.js';

package/src/lib/components/data-table/refresh-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import { RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 

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

@@ -1,11 +1,11 @@
-import { AppSidebar } from '@/components/layout/app-sidebar.js';
-import { GeneratedBreadcrumbs } from '@/components/layout/generated-breadcrumbs.js';
-import { PrereleasePopup } from '@/components/layout/prerelease-popup.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Separator } from '@/components/ui/separator.js';
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
+import { AppSidebar } from '@/vdb/components/layout/app-sidebar.js';
+import { GeneratedBreadcrumbs } from '@/vdb/components/layout/generated-breadcrumbs.js';
+import { PrereleasePopup } from '@/vdb/components/layout/prerelease-popup.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/vdb/components/ui/sidebar.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Outlet } from '@tanstack/react-router';
 import { Alerts } from '../shared/alerts.js';
 

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';

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,