@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

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

@@ -1,11 +1,11 @@
-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';
+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";
 
 export interface AssetFocalPointEditorProps {
     settingFocalPoint: boolean;
@@ -24,14 +24,12 @@ 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 (
@@ -45,15 +43,8 @@ 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) => {
@@ -76,7 +67,9 @@ export function AssetFocalPointEditor({
                 {children}
                 {settingFocalPoint && (
                     <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToParentElement]}>
-                        <DraggableFocalPoint point={focalPointCurrent} />
+                        <DraggableFocalPoint
+                            point={focalPointCurrent}
+                        />
                     </DndContext>
                 )}
             </div>
@@ -87,12 +80,9 @@ export function AssetFocalPointEditor({
                         <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>
@@ -100,4 +90,4 @@ export function AssetFocalPointEditor({
             )}
         </div>
     );
-}
+}

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

@@ -1,8 +1,8 @@
-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 { 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 {
     Pagination,
     PaginationContent,
@@ -11,20 +11,19 @@ import {
     PaginationLink,
     PaginationNext,
     PaginationPrevious,
-} 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';
+} 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';
 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(
     `
@@ -77,7 +76,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.
      */
@@ -88,7 +87,6 @@ export interface AssetGalleryProps {
     showHeader?: boolean;
     className?: string;
     onFilesDropped?: (files: File[]) => void;
-    bulkActions?: AssetBulkAction[];
 }
 
 export function AssetGallery({
@@ -101,7 +99,6 @@ export function AssetGallery({
     showHeader = true,
     className = '',
     onFilesDropped,
-    bulkActions,
 }: AssetGalleryProps) {
     // State
     const [page, setPage] = useState(1);
@@ -114,7 +111,7 @@ export function AssetGallery({
     const queryKey = ['AssetGallery', page, pageSize, debouncedSearch, assetType];
 
     // Query for assets
-    const { data, isLoading, refetch } = useQuery({
+    const { data, isLoading } = useQuery({
         queryKey,
         queryFn: () => {
             const filter: Record<string, any> = {};
@@ -176,6 +173,7 @@ export function AssetGallery({
             return;
         }
 
+
         // Manual mode - check for modifier key
         const isModifierKeyPressed = event.metaKey || event.ctrlKey;
 
@@ -271,9 +269,6 @@ export function AssetGallery({
                 </div>
             )}
 
-            {/* Bulk actions bar */}
-            <AssetBulkActions selection={selected} bulkActions={bulkActions} refetch={refetch} />
-
             <div
                 {...getRootProps()}
                 className={`
@@ -305,7 +300,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"
@@ -329,7 +324,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,69 +1,72 @@
-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';
+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';
 
 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 '@/vdb/components/ui/dialog.js';
-import { AssetPreview, AssetWithTags } from './asset-preview.js';
+} from '@/components/ui/dialog.js';
+import { AssetWithTags, AssetPreview } from './asset-preview.js';
 
 interface AssetPreviewDialogProps {
     open: boolean;
@@ -30,7 +30,11 @@ 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,5 +1,7 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
-import { PreviewPreset } from './asset-preview.js';
+
+
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select.js";
+import { PreviewPreset } from "./asset-preview.js";
 
 export interface AssetPreviewSelectorProps {
     size: PreviewPreset;
@@ -8,7 +10,7 @@ export interface AssetPreviewSelectorProps {
     height: number;
 }
 
-export function AssetPreviewSelector({ size, setSize, width, height }: Readonly<AssetPreviewSelectorProps>) {
+export function AssetPreviewSelector({ size, setSize, width, height }: AssetPreviewSelectorProps) {
     return (
         <div className="flex items-center gap-2">
             <Select value={size} onValueChange={value => setSize(value as PreviewPreset)}>
@@ -29,4 +31,4 @@ export function AssetPreviewSelector({ size, setSize, width, height }: Readonly<
             </p>
         </div>
     );
-}
+}

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

@@ -1,8 +1,8 @@
-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 { 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 { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -11,6 +11,7 @@ import { AssetProperties } from './asset-properties.js';
 
 export type PreviewPreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | '';
 
+
 export type AssetWithTags = AssetFragment & { tags?: { value: string }[] };
 
 interface AssetPreviewProps {
@@ -19,7 +20,11 @@ interface AssetPreviewProps {
     customFields?: any[];
 }
 
-export function AssetPreview({ asset, assets, customFields = [] }: Readonly<AssetPreviewProps>) {
+export function AssetPreview({
+    asset,
+    assets,
+    customFields = [],
+}: AssetPreviewProps) {
     const [size, setSize] = useState<PreviewPreset>('medium');
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
@@ -103,7 +108,10 @@ export function AssetPreview({ asset, assets, customFields = [] }: Readonly<Asse
                 )}
                 <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 '@/vdb/lib/utils.js';
+import { formatFileSize } from "@/lib/utils.js";
 
-import { Label } from '@/vdb/components/ui/label.js';
-import { AssetFragment } from '@/vdb/graphql/fragments.js';
-import { ExternalLink } from 'lucide-react';
+import { Label } from "@/components/ui/label.js";
+import { AssetFragment } from "@/graphql/fragments.js";
+import { ExternalLink } from "lucide-react";
 
 export interface AssetPropertiesProps {
     asset: AssetFragment;
 }
 
-export function AssetProperties({ asset }: Readonly<AssetPropertiesProps>) {
+export function AssetProperties({ asset }: AssetPropertiesProps) {
     return (
         <div className="space-y-4">
             <div>
@@ -30,7 +30,9 @@ export function AssetProperties({ asset }: Readonly<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>
@@ -41,4 +43,4 @@ export function AssetProperties({ asset }: Readonly<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,7 +13,12 @@ interface FocalPointControlProps {
     onChange: (point: Point) => void;
 }
 
-export function FocalPointControl({ width, height, point, onChange }: Readonly<FocalPointControlProps>) {
+export function FocalPointControl({
+    width,
+    height,
+    point,
+    onChange,
+}: FocalPointControlProps) {
     const [dragging, setDragging] = useState(false);
 
     useEffect(() => {
@@ -40,12 +45,15 @@ export function FocalPointControl({ width, height, point, onChange }: Readonly<F
     }, [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`,
@@ -54,4 +62,4 @@ export function FocalPointControl({ width, height, point, onChange }: Readonly<F
             />
         </div>
     );
-}
+}

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -57,7 +57,11 @@ export function AssignedFacetValues({
                     );
                 })}
             </div>
-            {canUpdate && <FacetValueSelector onValueSelect={onSelectHandler} />}
+            {canUpdate && (
+                <FacetValueSelector
+                    onValueSelect={onSelectHandler}
+                />
+            )}
         </>
     );
 }

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

@@ -1,6 +1,7 @@
-import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { DEFAULT_CHANNEL_CODE } from '@/constants.js';
+import { Trans } from '@/lib/trans.js';
 
-export function ChannelCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
+export function ChannelCodeLabel({ code }: { code: string } | { 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 '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useLingui } from '@/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { ChannelCodeLabel } from './channel-code-label.js';
 import { MultiSelect } from './multi-select.js';
+import { ChannelCodeLabel } from './channel-code-label.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 '@/vdb/framework/component-registry/dynamic-component.js';
-import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { InputComponent } from '@/framework/component-registry/dynamic-component.js';
+import { ConfigurableOperationDefFragment } from '@/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,10 +1,12 @@
-import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Trash } from 'lucide-react';
+import { ConfigurableOperationDefFragment, ConfigurableOperationFragment } from '@/graphql/fragments.js';
 import { useForm } from 'react-hook-form';
-import { Button } from '../ui/button.js';
+import * as React from 'react';
 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;
@@ -40,14 +42,13 @@ 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">
@@ -72,14 +73,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 '@/vdb/components/ui/alert-dialog.js';
-import { Trans } from '@/vdb/lib/trans.js';
+} from '@/components/ui/alert-dialog.js';
+import { Trans } from '@/lib/trans.js';
 import { useState } from 'react';
 
 export function ConfirmationDialog({