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

package/src/lib/components/shared/asset/asset-preview.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 { AssetFragment } from '@/graphql/fragments.js';
-import { cn } from '@/lib/utils.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 { AssetFragment } from '@/vdb/graphql/fragments.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -11,7 +11,6 @@ import { AssetProperties } from './asset-properties.js';
 
 export type PreviewPreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | '';
 
-
 export type AssetWithTags = AssetFragment & { tags?: { value: string }[] };
 
 interface AssetPreviewProps {
@@ -20,11 +19,7 @@ interface AssetPreviewProps {
     customFields?: any[];
 }
 
-export function AssetPreview({
-    asset,
-    assets,
-    customFields = [],
-}: AssetPreviewProps) {
+export function AssetPreview({ asset, assets, customFields = [] }: Readonly<AssetPreviewProps>) {
     const [size, setSize] = useState<PreviewPreset>('medium');
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
@@ -108,10 +103,7 @@ export function AssetPreview({
                 )}
                 <div
                     ref={containerRef}
-                    className={cn(
-                        'relative',
-                        centered && 'flex items-center justify-center',
-                    )}
+                    className={cn('relative', centered && 'flex items-center justify-center')}
                 >
                     <VendureImage
                         ref={imageRef}

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

@@ -1,14 +1,14 @@
-import { formatFileSize } from "@/lib/utils.js";
+import { formatFileSize } from '@/vdb/lib/utils.js';
 
-import { Label } from "@/components/ui/label.js";
-import { AssetFragment } from "@/graphql/fragments.js";
-import { ExternalLink } from "lucide-react";
+import { Label } from '@/vdb/components/ui/label.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
+import { ExternalLink } from 'lucide-react';
 
 export interface AssetPropertiesProps {
     asset: AssetFragment;
 }
 
-export function AssetProperties({ asset }: AssetPropertiesProps) {
+export function AssetProperties({ asset }: Readonly<AssetPropertiesProps>) {
     return (
         <div className="space-y-4">
             <div>
@@ -30,9 +30,7 @@ export function AssetProperties({ asset }: AssetPropertiesProps) {
 
             <div>
                 <Label>File Size</Label>
-                <p className="text-sm text-muted-foreground">
-                    {formatFileSize(asset.fileSize)}
-                </p>
+                <p className="text-sm text-muted-foreground">{formatFileSize(asset.fileSize)}</p>
             </div>
 
             <div>
@@ -43,4 +41,4 @@ export function AssetProperties({ asset }: AssetPropertiesProps) {
             </div>
         </div>
     );
-}
+}

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

@@ -1,5 +1,5 @@
+import { cn } from '@/vdb/lib/utils.js';
 import { useEffect, useState } from 'react';
-import { cn } from '@/lib/utils.js';
 
 export interface Point {
     x: number;
@@ -13,12 +13,7 @@ interface FocalPointControlProps {
     onChange: (point: Point) => void;
 }
 
-export function FocalPointControl({
-    width,
-    height,
-    point,
-    onChange,
-}: FocalPointControlProps) {
+export function FocalPointControl({ width, height, point, onChange }: Readonly<FocalPointControlProps>) {
     const [dragging, setDragging] = useState(false);
 
     useEffect(() => {
@@ -45,15 +40,12 @@ export function FocalPointControl({
     }, [dragging, onChange]);
 
     return (
-        <div
-            className="absolute inset-0 cursor-crosshair"
-            onMouseDown={() => setDragging(true)}
-        >
+        <div className="absolute inset-0 cursor-crosshair" onMouseDown={() => setDragging(true)}>
             <div
                 className={cn(
                     'absolute w-6 h-6 border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2',
                     'shadow-[0_0_0_1px_rgba(0,0,0,0.3)]',
-                    dragging && 'scale-75'
+                    dragging && 'scale-75',
                 )}
                 style={{
                     left: `${point.x * width}px`,
@@ -62,4 +54,4 @@ export function FocalPointControl({
             />
         </div>
     );
-}
+}

package/src/lib/components/shared/assign-to-channel-bulk-action.tsx

@@ -1,10 +1,10 @@
 import { LayersIcon } from 'lucide-react';
 import { useState } from 'react';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { AssignToChannelDialog } from '@/components/shared/assign-to-channel-dialog.js';
-import { useChannel, usePaginatedList } from '@/index.js';
-import { Trans } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelDialog } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { useChannel, usePaginatedList } from '@/vdb/index.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
 interface AssignToChannelBulkActionProps {
     selection: any[];

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -2,8 +2,8 @@ import { useMutation } from '@tanstack/react-query';
 import { ReactNode, useState } from 'react';
 import { toast } from 'sonner';
 
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { Button } from '@/components/ui/button.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -11,13 +11,13 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
-import { useChannel } from '@/hooks/use-channel.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
 
 interface AssignToChannelDialogProps {
     open: boolean;

package/src/lib/components/shared/channel-code-label.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_CHANNEL_CODE } from '@/constants.js';
-import { Trans } from '@/lib/trans.js';
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
-export function ChannelCodeLabel({ code }: { code: string } | { code: undefined }) {
+export function ChannelCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
     return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;
 }
-

package/src/lib/components/shared/channel-selector.tsx

@@ -1,9 +1,9 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useLingui } from '@/lib/trans.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { MultiSelect } from './multi-select.js';
 import { ChannelCodeLabel } from './channel-code-label.js';
+import { MultiSelect } from './multi-select.js';
 
 const channelsDocument = graphql(`
     query channels($options: ChannelListOptions) {
@@ -16,7 +16,7 @@ const channelsDocument = graphql(`
     }
 `);
 
-export interface ChannelSelectorProps<T extends boolean> {    
+export interface ChannelSelectorProps<T extends boolean> {
     value: T extends true ? string[] : string;
     onChange: (value: T extends true ? string[] : string) => void;
     multiple?: T;
@@ -35,7 +35,7 @@ export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T
     const items = (channelsData?.channels.items ?? []).map(channel => ({
         value: channel.id,
         label: channel.code,
-        display: <ChannelCodeLabel code={channel.code} />
+        display: <ChannelCodeLabel code={channel.code} />,
     }));
 
     return (

package/src/lib/components/shared/configurable-operation-arg-input.tsx

@@ -1,5 +1,5 @@
-import { InputComponent } from '@/framework/component-registry/dynamic-component.js';
-import { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { InputComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
 import { ConfigArgType } from '@vendure/core';
 import { FacetValueInput } from '../data-input/facet-value-input.js';
 

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -1,12 +1,10 @@
-import { ConfigurableOperationDefFragment, ConfigurableOperationFragment } from '@/graphql/fragments.js';
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { Trash } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import * as React from 'react';
+import { Button } from '../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormLabel } from '../ui/form.js';
-import { Input } from '../ui/input.js';
-import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { ConfigurableOperationArgInput } from './configurable-operation-arg-input.js';
-import { Button } from '../ui/button.js';
-import { Trash } from 'lucide-react';
 
 export interface ConfigurableOperationInputProps {
     operationDefinition: ConfigurableOperationDefFragment;
@@ -42,13 +40,14 @@ export function ConfigurableOperationInput({
         if (argIndex === -1) {
             updatedArgs = [...value.arguments, { name, value: stringValue }];
         } else {
-            updatedArgs = value.arguments.map(arg => (arg.name === name ? { ...arg, value: stringValue } : arg));
+            updatedArgs = value.arguments.map(arg =>
+                arg.name === name ? { ...arg, value: stringValue } : arg,
+            );
         }
         const newVal: ConfigurableOperationInputType = { ...value, arguments: updatedArgs };
         onChange(newVal);
     };
 
-
     return (
         <Form {...form}>
             <div className="space-y-4">
@@ -73,14 +72,14 @@ export function ConfigurableOperationInput({
                                 key={arg.name}
                                 name={`args.${arg.name}`}
                                 render={() => (
-                                <FormItem>
-                                    <FormLabel>{arg.label || arg.name}</FormLabel>
-                                    <FormControl>
-                                        <ConfigurableOperationArgInput
-                                            definition={arg}
-                                            value={argValue}
-                                            onChange={value => handleInputChange(arg.name, value)}
-                                        />
+                                    <FormItem>
+                                        <FormLabel>{arg.label || arg.name}</FormLabel>
+                                        <FormControl>
+                                            <ConfigurableOperationArgInput
+                                                definition={arg}
+                                                value={argValue}
+                                                onChange={value => handleInputChange(arg.name, value)}
+                                            />
                                         </FormControl>
                                     </FormItem>
                                 )}

package/src/lib/components/shared/confirmation-dialog.tsx

@@ -8,8 +8,8 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
     AlertDialogTrigger,
-} from '@/components/ui/alert-dialog.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/alert-dialog.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useState } from 'react';
 
 export function ConfirmationDialog({

package/src/lib/components/shared/copyable-text.tsx

@@ -1,9 +1,8 @@
 import { useCopyToClipboard } from '@uidotdev/usehooks';
-import { CopyIcon } from 'lucide-react';
+import { CheckIcon, CopyIcon } from 'lucide-react';
 import { useState } from 'react';
-import { CheckIcon } from 'lucide-react';
 
-export function CopyableText({ text }: { text: string }) {
+export function CopyableText({ text }: Readonly<{ text: string }>) {
     const [copiedId, setCopiedId] = useState<string | null>(null);
     const [, copy] = useCopyToClipboard();
 

package/src/lib/components/shared/country-selector.tsx

@@ -1,9 +1,15 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';
@@ -43,10 +49,12 @@ export function CountrySelector(props: CountrySelectorProps) {
             api.query(countryListDocument, {
                 options: {
                     sort: { name: 'ASC' },
-                    filter: searchTerm ? {
-                        name: { contains: searchTerm },
-                        code: { contains: searchTerm },
-                    } : undefined,
+                    filter: searchTerm
+                        ? {
+                              name: { contains: searchTerm },
+                              code: { contains: searchTerm },
+                          }
+                        : undefined,
                     filterOperator: searchTerm ? 'OR' : undefined,
                 },
             }),
@@ -69,19 +77,15 @@ export function CountrySelector(props: CountrySelectorProps) {
                 <Command shouldFilter={false}>
                     <div className="flex items-center border-b px-3">
                         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                        <CommandInput 
-                            placeholder="Search countries..." 
+                        <CommandInput
+                            placeholder="Search countries..."
                             onValueChange={handleSearch}
                             className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
                         />
                     </div>
                     <CommandList>
                         <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No countries found</Trans>
-                            )}
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No countries found</Trans>}
                         </CommandEmpty>
                         {data?.countries.items.map(country => (
                             <CommandItem
@@ -102,4 +106,3 @@ export function CountrySelector(props: CountrySelectorProps) {
         </Popover>
     );
 }
-

package/src/lib/components/shared/currency-selector.tsx

@@ -1,9 +1,9 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { CurrencyCode } from '@/constants.js';
+import { CurrencyCode } from '@/vdb/constants.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
 
-export interface CurrencySelectorProps<T extends boolean> {    
+export interface CurrencySelectorProps<T extends boolean> {
     value: T extends true ? string[] : string;
     onChange: (value: T extends true ? string[] : string) => void;
     multiple?: T;
@@ -17,7 +17,7 @@ export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps
 
     const items = (availableCurrencyCodes ?? Object.values(CurrencyCode)).map(currencyCode => ({
         value: currencyCode,
-        label: formatCurrencyName(currencyCode)
+        label: formatCurrencyName(currencyCode),
     }));
 
     return (

package/src/lib/components/shared/custom-fields-form.tsx

@@ -5,14 +5,14 @@ import {
     FormItem,
     FormLabel,
     FormMessage,
-} from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { CustomFormComponent } from '@/framework/form-engine/custom-form-component.js';
-import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { useLingui } from '@/lib/trans.js';
-import { customFieldConfigFragment } from '@/providers/server-config.js';
+} from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { CustomFormComponent } from '@/vdb/framework/form-engine/custom-form-component.js';
+import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { customFieldConfigFragment } from '@/vdb/providers/server-config.js';
 import { CustomFieldType } from '@vendure/common/lib/shared-types';
 import { ResultOf } from 'gql.tada';
 import React, { useMemo } from 'react';
@@ -28,7 +28,7 @@ interface CustomFieldsFormProps {
     formPathPrefix?: string;
 }
 
-export function CustomFieldsForm({ entityType, control, formPathPrefix }: CustomFieldsFormProps) {
+export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readonly<CustomFieldsFormProps>) {
     const {
         settings: { displayLanguage },
     } = useUserSettings();

package/src/lib/components/shared/customer-address-form.tsx

@@ -1,6 +1,6 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';

package/src/lib/components/shared/customer-group-selector.tsx

@@ -1,9 +1,9 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Command, CommandItem, CommandList } from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';

package/src/lib/components/shared/customer-selector.tsx

@@ -1,12 +1,18 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
-import { Plus, Search } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useState } from 'react';
 
 const customersDocument = graphql(`
@@ -47,11 +53,13 @@ export function CustomerSelector(props: CustomerSelectorProps) {
             api.query(customersDocument, {
                 options: {
                     sort: { lastName: 'ASC' },
-                    filter: debouncedSearchTerm ? {
-                        firstName: { contains: debouncedSearchTerm },
-                        lastName: { contains: debouncedSearchTerm },
-                        emailAddress: { contains: debouncedSearchTerm },
-                    } : undefined,
+                    filter: debouncedSearchTerm
+                        ? {
+                              firstName: { contains: debouncedSearchTerm },
+                              lastName: { contains: debouncedSearchTerm },
+                              emailAddress: { contains: debouncedSearchTerm },
+                          }
+                        : undefined,
                     filterOperator: debouncedSearchTerm ? 'OR' : undefined,
                 },
             }),
@@ -79,11 +87,7 @@ export function CustomerSelector(props: CustomerSelectorProps) {
                     />
                     <CommandList>
                         <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No customers found</Trans>
-                            )}
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No customers found</Trans>}
                         </CommandEmpty>
                         {data?.customers.items.map(customer => (
                             <CommandItem
@@ -94,7 +98,9 @@ export function CustomerSelector(props: CustomerSelectorProps) {
                                 }}
                                 className="flex flex-col items-start"
                             >
-                                <div className="font-medium">{customer.firstName} {customer.lastName}</div>
+                                <div className="font-medium">
+                                    {customer.firstName} {customer.lastName}
+                                </div>
                                 <div className="text-sm text-muted-foreground">{customer.emailAddress}</div>
                             </CommandItem>
                         ))}

package/src/lib/components/shared/entity-assets.tsx

@@ -1,11 +1,11 @@
-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 { AssetFragment } from '@/graphql/fragments.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
 import {
     closestCenter,
     DndContext,
@@ -56,11 +56,11 @@ interface FeaturedAssetProps {
 }
 
 function FeaturedAsset({
-                           featuredAsset,
-                           compact = false,
-                           onSelectAssets,
-                           onPreviewAsset,
-                       }: FeaturedAssetProps) {
+    featuredAsset,
+    compact = false,
+    onSelectAssets,
+    onPreviewAsset,
+}: FeaturedAssetProps) {
     return (
         <div
             className={`flex items-center justify-center ${compact ? 'h-40' : 'h-64'} border border-dashed rounded-md`}
@@ -90,14 +90,14 @@ function FeaturedAsset({
 
 // Sortable asset item component
 function SortableAsset({
-                           asset,
-                           compact,
-                           isFeatured,
-                           updatePermissions,
-                           onPreview,
-                           onSetAsFeatured,
-                           onRemove,
-                       }: {
+    asset,
+    compact,
+    isFeatured,
+    updatePermissions,
+    onPreview,
+    onSetAsFeatured,
+    onRemove,
+}: {
     asset: Asset;
     compact: boolean;
     isFeatured: boolean;
@@ -163,13 +163,13 @@ function SortableAsset({
 }
 
 export function EntityAssets({
-                                 assets: initialAssets = [],
-                                 featuredAsset: initialFeaturedAsset,
-                                 compact = false,
-                                 updatePermissions = true,
-                                 multiSelect = true,
-                                 onChange,
-                             }: EntityAssetsProps) {
+    assets: initialAssets = [],
+    featuredAsset: initialFeaturedAsset,
+    compact = false,
+    updatePermissions = true,
+    multiSelect = true,
+    onChange,
+}: EntityAssetsProps) {
     const [assets, setAssets] = useState<Asset[]>([...initialAssets]);
     const [featuredAsset, setFeaturedAsset] = useState<Asset | undefined | null>(initialFeaturedAsset);
     const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -372,18 +372,17 @@ interface AssetListProps {
     onDragEnd: (event: DragEndEvent) => void;
 }
 
-
 function AssetList({
-                       assets,
-                       compact,
-                       sensors,
-                       updatePermissions,
-                       isFeatured,
-                       onPreview,
-                       onSetAsFeatured,
-                       onRemove,
-                       onDragEnd,
-                   }: AssetListProps) {
+    assets,
+    compact,
+    sensors,
+    updatePermissions,
+    isFeatured,
+    onPreview,
+    onSetAsFeatured,
+    onRemove,
+    onDragEnd,
+}: AssetListProps) {
     return (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
             <div className={`${compact ? 'max-h-32' : ''} overflow-auto p-1`}>