feat: new search filtering schemas

server/src/dtos/search.dto.ts

@@ -3,7 +3,14 @@ import { Place } from 'src/database';
 import { HistoryBuilder } from 'src/decorators';
 import { AlbumResponseSchema } from 'src/dtos/album.dto';
 import { AssetResponseSchema } from 'src/dtos/asset-response.dto';
-import { AssetOrder, AssetOrderSchema, AssetTypeSchema, AssetVisibilitySchema } from 'src/enum';
+import {
+  AssetOrder,
+  AssetOrderSchema,
+  AssetTypeSchema,
+  AssetVisibilitySchema,
+  SearchOrderField,
+  SearchOrderFieldSchema,
+} from 'src/enum';
 import { emptyStringToNull, isoDatetimeToDate, stringToBool } from 'src/validation';
 import z from 'zod';
 
@@ -141,6 +148,229 @@ const SearchSuggestionRequestSchema = z
   })
   .meta({ id: 'SearchSuggestionRequestDto' });
 
+// v3 SearchFilter DTOs — new shape introduced alongside the legacy flat DTOs above.
+
+const atLeastOneKey = <T extends z.ZodObject>(schema: T, allowed: (keyof T['shape'] & string)[]) =>
+  schema.refine((value) => Object.values(value).some((v) => v !== undefined), {
+    message: `At least one of the following keys is required: ${allowed.join(', ')}`,
+  });
+
+const IdFilterSchema = atLeastOneKey(
+  z.strictObject({
+    eq: z.uuidv4().optional(),
+    ne: z.uuidv4().optional(),
+  }),
+  ['eq', 'ne'],
+).meta({ id: 'IdFilter' });
+
+const IdFilterNullableSchema = atLeastOneKey(
+  z.strictObject({
+    eq: z.uuidv4().nullable().optional(),
+    ne: z.uuidv4().nullable().optional(),
+  }),
+  ['eq', 'ne'],
+).meta({ id: 'IdFilterNullable' });
+
+const IdsFilterSchema = atLeastOneKey(
+  z.strictObject({
+    any: z.array(z.uuidv4()).min(1).optional(),
+    all: z.array(z.uuidv4()).min(1).optional(),
+    none: z.array(z.uuidv4()).min(1).optional(),
+  }),
+  ['any', 'all', 'none'],
+).meta({ id: 'IdsFilter' });
+
+const StringFilterSchema = atLeastOneKey(
+  z.strictObject({
+    eq: z.string().optional(),
+    ne: z.string().optional(),
+    in: z.array(z.string()).min(1).optional(),
+    notIn: z.array(z.string()).min(1).optional(),
+  }),
+  ['eq', 'ne', 'in', 'notIn'],
+).meta({ id: 'StringFilter' });
+
+const StringFilterNullableSchema = atLeastOneKey(
+  z.strictObject({
+    eq: z.string().nullable().optional(),
+    ne: z.string().nullable().optional(),
+    in: z.array(z.string()).min(1).optional(),
+    notIn: z.array(z.string()).min(1).optional(),
+  }),
+  ['eq', 'ne', 'in', 'notIn'],
+).meta({ id: 'StringFilterNullable' });
+
+const StringPatternFilterSchema = atLeastOneKey(
+  z.strictObject({
+    eq: z.string().nullable().optional(),
+    ne: z.string().nullable().optional(),
+    in: z.array(z.string()).min(1).optional(),
+    notIn: z.array(z.string()).min(1).optional(),
+    like: z.string().min(1).optional(),
+    notLike: z.string().min(1).optional(),
+    startsWith: z.string().min(1).optional(),
+    endsWith: z.string().min(1).optional(),
+  }),
+  ['eq', 'ne', 'in', 'notIn', 'like', 'notLike', 'startsWith', 'endsWith'],
+).meta({ id: 'StringPatternFilter' });
+
+const NumberFilterSchema = atLeastOneKey(
+  z.strictObject({
+    eq: z.number().optional(),
+    lt: z.number().optional(),
+    lte: z.number().optional(),
+    gt: z.number().optional(),
+    gte: z.number().optional(),
+    in: z.array(z.number()).min(1).optional(),
+    notIn: z.array(z.number()).min(1).optional(),
+  }),
+  ['eq', 'lt', 'lte', 'gt', 'gte', 'in', 'notIn'],
+).meta({ id: 'NumberFilter' });
+
+const NumberFilterNullableSchema = atLeastOneKey(
+  z.strictObject({
+    eq: z.number().nullable().optional(),
+    ne: z.number().nullable().optional(),
+    lt: z.number().optional(),
+    lte: z.number().optional(),
+    gt: z.number().optional(),
+    gte: z.number().optional(),
+    in: z.array(z.number()).min(1).optional(),
+    notIn: z.array(z.number()).min(1).optional(),
+  }),
+  ['eq', 'ne', 'lt', 'lte', 'gt', 'gte', 'in', 'notIn'],
+).meta({ id: 'NumberFilterNullable' });
+
+const DateFilterSchema = atLeastOneKey(
+  z.strictObject({
+    eq: isoDatetimeToDate.optional(),
+    ne: isoDatetimeToDate.optional(),
+    gt: isoDatetimeToDate.optional(),
+    gte: isoDatetimeToDate.optional(),
+    lt: isoDatetimeToDate.optional(),
+    lte: isoDatetimeToDate.optional(),
+  }),
+  ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],
+).meta({ id: 'DateFilter' });
+
+const DateFilterNullableSchema = atLeastOneKey(
+  z.strictObject({
+    eq: isoDatetimeToDate.nullable().optional(),
+    ne: isoDatetimeToDate.nullable().optional(),
+    gt: isoDatetimeToDate.optional(),
+    gte: isoDatetimeToDate.optional(),
+    lt: isoDatetimeToDate.optional(),
+    lte: isoDatetimeToDate.optional(),
+  }),
+  ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],
+).meta({ id: 'DateFilterNullable' });
+
+const BoolFilterSchema = z.strictObject({ eq: z.boolean() }).meta({ id: 'BoolFilter' });
+
+const enumFilterSchema = <T extends z.core.util.EnumLike>(values: z.ZodEnum<T>, id: string) =>
+  atLeastOneKey(
+    z.strictObject({
+      eq: values.optional(),
+      ne: values.optional(),
+      in: z.array(values).min(1).optional(),
+      notIn: z.array(values).min(1).optional(),
+    }),
+    ['eq', 'ne', 'in', 'notIn'],
+  ).meta({ id });
+
+const EnumFilterAssetTypeSchema = enumFilterSchema(AssetTypeSchema, 'EnumFilterAssetType');
+const EnumFilterAssetVisibilitySchema = enumFilterSchema(AssetVisibilitySchema, 'EnumFilterAssetVisibility');
+
+const StringSimilarityFilterSchema = z
+  .strictObject({
+    matches: z.string().min(1),
+  })
+  .meta({ id: 'StringSimilarityFilter' });
+
+const SearchOrderSchema = z
+  .strictObject({
+    field: SearchOrderFieldSchema.default(SearchOrderField.FileCreatedAt),
+    direction: AssetOrderSchema.default(AssetOrder.Desc),
+  })
+  .meta({ id: 'SearchOrder' });
+
+const SearchFilterBranchSchema = z
+  .strictObject({
+    id: IdFilterSchema.optional(),
+    libraryId: IdFilterNullableSchema.optional(),
+    type: EnumFilterAssetTypeSchema.optional(),
+    visibility: EnumFilterAssetVisibilitySchema.optional(),
+    isFavorite: BoolFilterSchema.optional(),
+    isMotion: BoolFilterSchema.optional(),
+    isOffline: BoolFilterSchema.optional(),
+    isEncoded: BoolFilterSchema.optional(),
+    hasAlbums: BoolFilterSchema.optional(),
+    hasPeople: BoolFilterSchema.optional(),
+    hasTags: BoolFilterSchema.optional(),
+    city: StringFilterNullableSchema.optional(),
+    state: StringFilterNullableSchema.optional(),
+    country: StringFilterNullableSchema.optional(),
+    make: StringFilterNullableSchema.optional(),
+    model: StringFilterNullableSchema.optional(),
+    lensModel: StringFilterNullableSchema.optional(),
+    description: StringPatternFilterSchema.optional(),
+    originalFileName: StringPatternFilterSchema.optional(),
+    originalPath: StringPatternFilterSchema.optional(),
+    ocr: StringSimilarityFilterSchema.optional(),
+    rating: NumberFilterNullableSchema.optional(),
+    fileSizeInBytes: NumberFilterSchema.optional(),
+    takenAt: DateFilterSchema.optional(),
+    createdAt: DateFilterSchema.optional(),
+    updatedAt: DateFilterSchema.optional(),
+    trashedAt: DateFilterNullableSchema.optional(),
+    personIds: IdsFilterSchema.optional(),
+    tagIds: IdsFilterSchema.optional(),
+    albumIds: IdsFilterSchema.optional(),
+    checksum: StringFilterSchema.optional(),
+    encodedVideoPath: StringFilterSchema.optional(),
+  })
+  .meta({ id: 'SearchFilterBranch' });
+
+const SearchFilterSchema = SearchFilterBranchSchema.extend({
+  or: z.array(SearchFilterBranchSchema).min(1).optional(),
+}).meta({ id: 'SearchFilter' });
+
+export {
+  BoolFilterSchema,
+  DateFilterNullableSchema,
+  DateFilterSchema,
+  EnumFilterAssetTypeSchema,
+  EnumFilterAssetVisibilitySchema,
+  IdFilterNullableSchema,
+  IdFilterSchema,
+  IdsFilterSchema,
+  NumberFilterNullableSchema,
+  NumberFilterSchema,
+  SearchFilterBranchSchema,
+  SearchFilterSchema,
+  SearchOrderSchema,
+  StringFilterNullableSchema,
+  StringFilterSchema,
+  StringPatternFilterSchema,
+  StringSimilarityFilterSchema,
+};
+
+export type IdFilter = z.infer<typeof IdFilterSchema>;
+export type IdFilterNullable = z.infer<typeof IdFilterNullableSchema>;
+export type IdsFilter = z.infer<typeof IdsFilterSchema>;
+export type StringFilter = z.infer<typeof StringFilterSchema>;
+export type StringFilterNullable = z.infer<typeof StringFilterNullableSchema>;
+export type StringPatternFilter = z.infer<typeof StringPatternFilterSchema>;
+export type NumberFilter = z.infer<typeof NumberFilterSchema>;
+export type NumberFilterNullable = z.infer<typeof NumberFilterNullableSchema>;
+export type DateFilter = z.infer<typeof DateFilterSchema>;
+export type DateFilterNullable = z.infer<typeof DateFilterNullableSchema>;
+export type BoolFilter = z.infer<typeof BoolFilterSchema>;
+export type StringSimilarityFilter = z.infer<typeof StringSimilarityFilterSchema>;
+export type SearchOrder = z.infer<typeof SearchOrderSchema>;
+export type SearchFilter = z.infer<typeof SearchFilterSchema>;
+export type SearchFilterBranch = z.infer<typeof SearchFilterBranchSchema>;
+
 export class RandomSearchDto extends createZodDto(RandomSearchSchema) {}
 export class LargeAssetSearchDto extends createZodDto(LargeAssetSearchSchema) {}
 export class MetadataSearchDto extends createZodDto(MetadataSearchSchema) {}

server/src/enum.ts

@@ -1180,3 +1180,12 @@ export enum WorkflowType {
 }
 
 export const WorkflowTypeSchema = z.enum(WorkflowType).describe('Workflow type').meta({ id: 'WorkflowType' });
+
+export enum SearchOrderField {
+  FileCreatedAt = 'fileCreatedAt',
+  LocalDateTime = 'localDateTime',
+  FileSizeInBytes = 'fileSizeInBytes',
+  Rating = 'rating',
+}
+
+export const SearchOrderFieldSchema = z.enum(SearchOrderField).meta({ id: 'SearchOrderField' });

web/src/lib/attachments/drag-auto-scroll.svelte.ts

@@ -1,65 +0,0 @@
-import type { Attachment } from 'svelte/attachments';
-
-const EDGE_ZONE = 72;
-const MAX_SCROLL_SPEED = 22;
-
-const findScrollContainer = (element: HTMLElement): HTMLElement | null => {
-  let node = element.parentElement;
-  while (node) {
-    const overflowY = getComputedStyle(node).overflowY;
-    if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) {
-      return node;
-    }
-    node = node.parentElement;
-  }
-  return null;
-};
-
-export function dragAutoScroll(isActive: () => boolean): Attachment {
-  return (node) => {
-    const element = node as HTMLElement;
-    let scrollContainer: HTMLElement | null = null;
-    let pointerY = -1;
-    let frame: number | null = null;
-
-    const trackPointer = (event: DragEvent) => {
-      pointerY = event.clientY;
-    };
-
-    const tick = () => {
-      if (scrollContainer && pointerY >= 0) {
-        const { top, bottom } = scrollContainer.getBoundingClientRect();
-        let delta = 0;
-        if (pointerY < top + EDGE_ZONE) {
-          delta = -MAX_SCROLL_SPEED * Math.min(1, (top + EDGE_ZONE - pointerY) / EDGE_ZONE);
-        } else if (pointerY > bottom - EDGE_ZONE) {
-          delta = MAX_SCROLL_SPEED * Math.min(1, (pointerY - (bottom - EDGE_ZONE)) / EDGE_ZONE);
-        }
-        if (delta !== 0) {
-          scrollContainer.scrollBy(0, delta);
-        }
-      }
-      frame = requestAnimationFrame(tick);
-    };
-
-    $effect(() => {
-      if (!isActive()) {
-        return;
-      }
-
-      scrollContainer = findScrollContainer(element);
-      pointerY = -1;
-      globalThis.addEventListener('dragover', trackPointer);
-      frame = requestAnimationFrame(tick);
-
-      return () => {
-        globalThis.removeEventListener('dragover', trackPointer);
-        if (frame !== null) {
-          cancelAnimationFrame(frame);
-          frame = null;
-        }
-        scrollContainer = null;
-      };
-    });
-  };
-}

web/src/routes/(user)/workflows/[workflowId]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { beforeNavigate, goto, invalidate } from '$app/navigation';
-  import { dragAutoScroll } from '$lib/attachments/drag-auto-scroll.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import WorkflowAddStepModal from '$lib/modals/WorkflowAddStepModal.svelte';
   import WorkflowEditStepModal from '$lib/modals/WorkflowEditStepModal.svelte';
@@ -8,7 +7,7 @@
   import { Route } from '$lib/route';
   import { getWorkflowActions, handleUpdateWorkflow } from '$lib/services/workflow.service';
   import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
-  import type { WorkflowResponseDto, WorkflowStepDto, WorkflowUpdateDto } from '@immich/sdk';
+  import type { WorkflowResponseDto, WorkflowUpdateDto } from '@immich/sdk';
   import {
     ActionBar,
     AppShell,
@@ -44,10 +43,7 @@
     mdiPlus,
   } from '@mdi/js';
   import { cloneDeep, isEqual } from 'lodash-es';
-  import { flip } from 'svelte/animate';
-  import { fade } from 'svelte/transition';
   import { t } from 'svelte-i18n';
-  import { createListReorder, GHOST_KEY, type ReorderEntry } from './list-reorder.svelte';
   import type { PageData } from './$types';
   import WorkflowJsonEditor from './WorkflowJsonEditor.svelte';
   import WorkflowStepCard from './WorkflowStepCard.svelte';
@@ -73,11 +69,6 @@
   let isSaving = $state(false);
   let editMode = $state<EditMode>('visual');
 
-  const reorder = createListReorder(
-    () => steps,
-    (next) => (steps = next),
-  );
-
   const workflowSummary = $derived({ name, description, trigger, steps });
   const workflowJsonContent = $derived<WorkflowJsonContent>({ name, description, enabled, trigger, steps });
 
@@ -115,6 +106,19 @@
     }
   };
 
+  const handleDrop = (index: number, event: DragEvent) => {
+    if (!event.dataTransfer) {
+      return;
+    }
+
+    const from = Number(event.dataTransfer.getData('text/plain'));
+
+    const next = [...steps];
+    const [moved] = next.splice(from, 1);
+    next.splice(index, 0, moved);
+    steps = next;
+  };
+
   const handleDeleteStep = async (index: number) => {
     const confirmed = await modalManager.showDialog({ title: $t('step_delete'), prompt: $t('step_delete_confirm') });
     if (confirmed) {
@@ -340,51 +344,17 @@
           </CardHeader>
         </Card>
 
-        <div class="hidden" aria-hidden="true" {@attach dragAutoScroll(() => reorder.isDragging)}></div>
-
-        {#snippet stepCard(entry: ReorderEntry<WorkflowStepDto>)}
+        {#each steps as step, index (step.method + index)}
           <WorkflowStepCard
-            step={entry.item}
-            index={entry.index}
-            position={entry.index + 1}
-            isGhost={entry.isGhost}
-            isSource={entry.isSource}
-            isDragging={reorder.isDragging}
+            {step}
+            {index}
             onEdit={handleEditStep}
             onDelete={handleDeleteStep}
             onInsertBefore={handleInsertStep}
-            onDragStart={reorder.start}
-            onDragOver={reorder.over}
-            onDragEnd={reorder.end}
-            onDrop={reorder.drop}
+            onDrop={handleDrop}
           />
-        {/snippet}
-
-        {#each reorder.entries as entry (entry.isGhost ? GHOST_KEY : entry.item)}
-          <div class="w-full" animate:flip={{ duration: 200 }}>
-            {#if entry.isGhost}
-              <div transition:fade={{ duration: 120 }}>{@render stepCard(entry)}</div>
-            {:else}
-              {@render stepCard(entry)}
-            {/if}
-          </div>
         {/each}
 
-        {#if reorder.isDragging}
-          <div
-            class="-mt-4 min-h-12 w-full"
-            role="listitem"
-            ondragover={(event) => {
-              event.preventDefault();
-              reorder.toEnd();
-            }}
-            ondrop={(event) => {
-              event.preventDefault();
-              reorder.drop();
-            }}
-          ></div>
-        {/if}
-
         <Button
           size="small"
           fullWidth

web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte

@@ -17,34 +17,13 @@
   type Props = {
     step: WorkflowStepDto;
     index: number;
-    position: number;
-    isGhost: boolean;
-    isSource: boolean;
-    isDragging: boolean;
     onEdit: (index: number) => void;
     onDelete: (index: number) => void;
     onInsertBefore: (index: number) => void;
-    onDragStart: (index: number) => void;
-    onDragOver: (index: number, after: boolean) => void;
-    onDragEnd: () => void;
-    onDrop: () => void;
+    onDrop: (index: number, event: DragEvent) => void;
   };
 
-  let {
-    step,
-    index,
-    position,
-    isGhost,
-    isSource,
-    isDragging,
-    onEdit,
-    onDelete,
-    onInsertBefore,
-    onDragStart,
-    onDragOver,
-    onDragEnd,
-    onDrop,
-  }: Props = $props();
+  let { step, index, onEdit, onDelete, onInsertBefore, onDrop }: Props = $props();
 
   const method = $derived(pluginManager.getMethod(step.method));
   const isFilter = $derived(method?.uiHints?.includes('Filter') ?? false);
@@ -52,24 +31,9 @@
     Object.entries(step.config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== ''),
   );
   let dragImage = $state<Element>();
+  let isDropTarget = $state(false);
   let hoverDrag = $state(false);
 
-  const cardStateClass = $derived.by(() => {
-    if (isGhost) {
-      return 'pointer-events-none border-2 border-dashed border-primary bg-primary-50/40 shadow-lg';
-    }
-
-    if (isSource) {
-      return 'border-dashed border-primary-300 bg-primary-50/20';
-    }
-
-    if (hoverDrag) {
-      return 'border-dashed border-primary';
-    }
-
-    return '';
-  });
-
   const truncate = (input: string, max = 24) => (input.length > max ? input.slice(0, max - 1) + '…' : input);
 
   const formatConfigValue = (value: unknown): string => {
@@ -119,31 +83,31 @@
 
     dragImage = document.body.querySelector('#workflow-step-drag-image')!;
     event.dataTransfer.setDragImage(dragImage, 16, 22);
-
-    onDragStart(index);
   };
 
-  const handleDrop = (event: DragEvent) => {
+  const handleDrop = (index: number, event: DragEvent) => {
+    if (!event.dataTransfer) {
+      return;
+    }
     event.preventDefault();
-    onDrop();
-  };
 
-  const handleDragOver = (event: DragEvent & { currentTarget: HTMLElement }) => {
-    event.preventDefault();
-    if (isGhost) {
+    const from = Number(event.dataTransfer.getData('text/plain'));
+    if (from === index) {
       return;
     }
 
-    const rect = event.currentTarget.getBoundingClientRect();
-    const after = event.clientY > rect.top + rect.height / 2;
-    onDragOver(index, after);
+    onDrop(index, event);
+  };
+
+  const handleDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    isDropTarget = true;
   };
 
   const handleDragEnd = () => {
     dragImage?.remove();
     dragImage = undefined;
-    hoverDrag = false;
-    onDragEnd();
+    isDropTarget = false;
   };
 </script>
 
@@ -154,7 +118,6 @@
       <button
         type="button"
         class="absolute top-1/2 left-1/2 z-10 -translate-1/2 cursor-pointer rounded-full border border-dashed border-primary-200 bg-light p-0.5 text-primary opacity-0 transition-opacity group-hover/step-row:opacity-100 hover:bg-primary-50"
-        class:hidden={isDragging}
         aria-label={$t('add_step')}
         title={$t('add_step')}
         onclick={() => onInsertBefore(index)}
@@ -166,12 +129,20 @@
 
   <div
     class="w-full transition-all"
-    class:opacity-50={isSource}
+    class:opacity-40={!!dragImage}
+    class:scale-[0.99]={!!dragImage}
     ondragover={handleDragOver}
-    ondrop={handleDrop}
+    ondragleave={() => (isDropTarget = false)}
+    ondrop={(event) => handleDrop(index, event)}
     role="listitem"
   >
-    <Card class="shadow-none transition-colors {cardStateClass}">
+    <Card
+      class="shadow-none transition-colors {isDropTarget
+        ? 'border-primary ring-2 ring-primary-200'
+        : hoverDrag
+          ? 'border-dashed border-primary'
+          : ''}"
+    >
       <CardHeader>
         <div class="flex items-center gap-2">
           <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -200,9 +171,7 @@
           </div>
           <div class="flex min-w-0 flex-1 flex-col">
             <CardTitle class="truncate">
-              {#if !isGhost}
-                <span class="mr-1 font-bold text-light-500">{position}</span>
-              {/if}
+              <span class="mr-1 font-bold text-light-500">{index + 1}</span>
               {pluginManager.getMethodLabel(step.method)}
             </CardTitle>
             {#if method?.description}

web/src/routes/(user)/workflows/[workflowId]/list-reorder.svelte.ts

@@ -1,78 +0,0 @@
-export const GHOST_KEY = 'reorder-ghost';
-
-export type ReorderEntry<T> = {
-  item: T;
-  index: number;
-  isGhost: boolean;
-  isSource: boolean;
-};
-
-export function createListReorder<T>(getItems: () => T[], setItems: (items: T[]) => void) {
-  let draggingIndex = $state<number | null>(null);
-  let dropIndex = $state<number | null>(null);
-
-  const entries = $derived.by<ReorderEntry<T>[]>(() => {
-    const items = getItems();
-    const list: ReorderEntry<T>[] = items.map((item, index) => ({
-      item,
-      index,
-      isGhost: false,
-      isSource: index === draggingIndex,
-    }));
-
-    if (
-      draggingIndex !== null &&
-      dropIndex !== null &&
-      dropIndex !== draggingIndex &&
-      dropIndex !== draggingIndex + 1
-    ) {
-      list.splice(dropIndex, 0, { item: items[draggingIndex], index: draggingIndex, isGhost: true, isSource: false });
-    }
-
-    return list;
-  });
-
-  return {
-    get isDragging() {
-      return draggingIndex !== null;
-    },
-    get entries() {
-      return entries;
-    },
-    start(index: number) {
-      draggingIndex = index;
-      dropIndex = index;
-    },
-    over(index: number, after: boolean) {
-      if (draggingIndex === null) {
-        return;
-      }
-      dropIndex = Math.max(0, Math.min(index + (after ? 1 : 0), getItems().length));
-    },
-    toEnd() {
-      if (draggingIndex !== null) {
-        dropIndex = getItems().length;
-      }
-    },
-    end() {
-      draggingIndex = null;
-      dropIndex = null;
-    },
-    drop() {
-      if (draggingIndex === null || dropIndex === null) {
-        return;
-      }
-
-      const target = dropIndex > draggingIndex ? dropIndex - 1 : dropIndex;
-      if (target !== draggingIndex) {
-        const next = [...getItems()];
-        const [moved] = next.splice(draggingIndex, 1);
-        next.splice(target, 0, moved);
-        setItems(next);
-      }
-
-      draggingIndex = null;
-      dropIndex = null;
-    },
-  };
-}