@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -0,0 +1,109 @@
+'use client';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
+import { useFloatingBulkActions } from '@/vdb/hooks/use-floating-bulk-actions.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';
+
+export type AssetBulkActionContext = {
+    selection: Asset[];
+    refetch: () => void;
+};
+
+export type AssetBulkActionComponent = React.FunctionComponent<AssetBulkActionContext>;
+
+export type AssetBulkAction = {
+    order?: number;
+    component: AssetBulkActionComponent;
+};
+
+interface AssetBulkActionsProps {
+    selection: Asset[];
+    bulkActions?: AssetBulkAction[];
+    refetch: () => void;
+}
+
+export function AssetBulkActions({ selection, bulkActions, refetch }: Readonly<AssetBulkActionsProps>) {
+    const { pageId } = usePage();
+    const pageBlock = usePageBlock();
+    const blockId = pageBlock?.blockId;
+    
+    const { position, shouldShow } = useFloatingBulkActions({
+        selectionCount: selection.length,
+        containerSelector: '[data-asset-gallery]'
+    });
+
+    if (!shouldShow) {
+        return null;
+    }
+
+    // Get extended bulk actions from the registry
+    const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
+
+    // Convert DataTable bulk actions to Asset bulk actions
+    const convertedBulkActions: AssetBulkAction[] = extendedBulkActions.map(action => ({
+        order: action.order,
+        component: ({ selection }) => {
+            // Create a mock table context for compatibility
+            const mockTable = {
+                getState: () => ({ rowSelection: {} }),
+                getRow: () => null,
+            } as any;
+
+            const ActionComponent = action.component;
+            return <ActionComponent selection={selection} table={mockTable} />;
+        },
+    }));
+
+    const allBulkActions = [...convertedBulkActions, ...(bulkActions ?? [])];
+    allBulkActions.sort((a, b) => (a.order ?? 10_000) - (b.order ?? 10_000));
+
+    return (
+        <div
+            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
+            style={{ 
+                height: 'auto', 
+                maxHeight: '60px',
+                bottom: position.bottom,
+                left: position.left
+            }}
+        >
+            <span className="text-sm text-muted-foreground">
+                <Trans>{selection.length} selected</Trans>
+            </span>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-8 shadow-none">
+                        <Trans>With selected...</Trans>
+                        <ChevronDown className="ml-2 h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                    {allBulkActions.length > 0 ? (
+                        allBulkActions.map((action, index) => (
+                            <action.component
+                                key={`asset-bulk-action-${index}`}
+                                selection={selection}
+                                refetch={refetch}
+                            />
+                        ))
+                    ) : (
+                        <DropdownMenuItem className="text-muted-foreground" disabled>
+                            <Trans>No actions available</Trans>
+                        </DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

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,19 +11,20 @@ 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 { formatFileSize } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.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';
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { useDebounce } from '@uidotdev/usehooks';
 import { DetailPageButton } from '../detail-page-button.js';
+import { AssetBulkAction, AssetBulkActions } from './asset-bulk-actions.js';
 
 const getAssetListDocument = graphql(
     `
@@ -76,7 +77,7 @@ export interface AssetGalleryProps {
     /**
      * @description
      * Defines whether multiple assets can be selected.
-     * 
+     *
      * If set to 'auto', the asset selection will be toggled when the user clicks on an asset.
      * If set to 'manual', multiple selection will occur only if the user holds down the control/cmd key.
      */
@@ -87,6 +88,7 @@ export interface AssetGalleryProps {
     showHeader?: boolean;
     className?: string;
     onFilesDropped?: (files: File[]) => void;
+    bulkActions?: AssetBulkAction[];
 }
 
 export function AssetGallery({
@@ -99,6 +101,7 @@ export function AssetGallery({
     showHeader = true,
     className = '',
     onFilesDropped,
+    bulkActions,
 }: AssetGalleryProps) {
     // State
     const [page, setPage] = useState(1);
@@ -111,7 +114,7 @@ export function AssetGallery({
     const queryKey = ['AssetGallery', page, pageSize, debouncedSearch, assetType];
 
     // Query for assets
-    const { data, isLoading } = useQuery({
+    const { data, isLoading, refetch } = useQuery({
         queryKey,
         queryFn: () => {
             const filter: Record<string, any> = {};
@@ -173,7 +176,6 @@ export function AssetGallery({
             return;
         }
 
-
         // Manual mode - check for modifier key
         const isModifierKeyPressed = event.metaKey || event.ctrlKey;
 
@@ -230,7 +232,7 @@ export function AssetGallery({
     };
 
     return (
-        <div className={`flex flex-col w-full ${fixedHeight ? 'h-[600px]' : ''} ${className}`}>
+        <div className={`relative flex flex-col w-full ${fixedHeight ? 'h-[600px]' : ''} ${className}`}>
             {showHeader && (
                 <div className="flex flex-col md:flex-row gap-2 mb-4 flex-shrink-0">
                     <div className="relative flex-grow flex items-center gap-2">
@@ -269,6 +271,9 @@ export function AssetGallery({
                 </div>
             )}
 
+            {/* Bulk actions bar */}
+            <AssetBulkActions selection={selected} bulkActions={bulkActions} refetch={refetch} />
+
             <div
                 {...getRootProps()}
                 className={`
@@ -286,7 +291,7 @@ export function AssetGallery({
                     </div>
                 )}
 
-                <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1">
+                <div data-asset-gallery className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1">
                     {isLoading ? (
                         <div className="col-span-full flex justify-center py-12">
                             <Loader2 className="h-8 w-8 animate-spin text-primary" />
@@ -300,7 +305,7 @@ export function AssetGallery({
                                     ${isSelected(asset as Asset) ? 'ring-2 ring-primary' : ''}
                                     flex flex-col min-w-[120px]
                                 `}
-                                onClick={(e) => handleSelect(asset as Asset, e)}
+                                onClick={e => handleSelect(asset as Asset, e)}
                             >
                                 <div
                                     className="relative w-full bg-muted/30"
@@ -324,7 +329,7 @@ export function AssetGallery({
                                     <p className="text-xs line-clamp-2 min-h-[2.5rem]" title={asset.name}>
                                         {asset.name}
                                     </p>
-                                    <div className='flex justify-between items-center'>
+                                    <div className="flex justify-between items-center">
                                         {asset.fileSize && (
                                             <p className="text-xs text-muted-foreground mt-1">
                                                 {formatFileSize(asset.fileSize)}

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>
     );
-}
+}

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);
@@ -34,12 +29,6 @@ export function AssetPreview({
     const imageRef = useRef<HTMLImageElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
-    const form = useForm({
-        defaultValues: {
-            name: asset.name,
-            tags: asset.tags?.map(t => t.value) || [],
-        },
-    });
     const activeAsset = assets?.[assetIndex] ?? asset;
 
     useEffect(() => {
@@ -108,10 +97,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>
     );
-}
+}