From ec73f1e1e7a09c3a5abac4f2c53b00b5d5577e72 Mon Sep 17 00:00:00 2001
From: Bryan Doss <bryan.w.doss@gmail.com>
Date: Thu, 9 Jul 2026 21:16:06 -0400
Subject: [PATCH] fix: smooth drag-and-drop reordering of relation chips

Migrate the relation-chip reorder component to the next-gen dnd-kit
(@dnd-kit/react + @dnd-kit/helpers). The classic sortable strategies
compute transforms assuming uniform item sizes, which stretched,
mis-spaced, or snapped variable-width chips in wrapped multi-row
lists. The new library measures the real DOM and FLIP-animates
optimistic reordering, so wrapped chip rows reflow smoothly and land
correctly. Positions are committed on drop, reusing the existing
position set.

- reorderable-relation-chips-dnd.tsx: rewritten on DragDropProvider/
  useSortable; adds afterChips slot so the add-entity button lives
  inside the flex-wrapped list
- chip.tsx: LinkableRelationChip accepts sortableDragHandleRef (the
  new API marks handles via callback ref); dots button unchanged
- editable-entity-page.tsx: renders the add button via afterChips;
  IMAGE/VIDEO branching normalized to renderableTypeStrict
- vite.config.js + vitest.setup.ts: stub ResizeObserver in the test
  environment; @dnd-kit/dom references it at module scope and jsdom
  does not implement it

Co-authored-by: Juan Mardikian <developermardikian@gmail.com>
---
 apps/web/design-system/chip.tsx               |  17 +-
 .../reorderable-relation-chips-dnd.tsx        | 236 ++++++------------
 apps/web/package.json                         |   2 +
 .../entity-page/editable-entity-page.tsx      | 225 +++++++++--------
 apps/web/vite.config.js                       |   1 +
 apps/web/vitest.setup.ts                      |  12 +
 bun.lock                                      |  18 ++
 7 files changed, 242 insertions(+), 269 deletions(-)
 create mode 100644 apps/web/vitest.setup.ts

diff --git a/apps/web/design-system/chip.tsx b/apps/web/design-system/chip.tsx
index 7e8675c693..1a5f376389 100644
--- a/apps/web/design-system/chip.tsx
+++ b/apps/web/design-system/chip.tsx
@@ -86,6 +86,8 @@ type LinkableRelationChipProps = {
   className?: string;
   disableLink?: boolean;
   sortableDragHandleListeners?: DraggableSyntheticListeners;
+  /** Callback ref marking the dots button as the drag handle (next-gen @dnd-kit/react). */
+  sortableDragHandleRef?: (element: HTMLButtonElement | null) => void;
 
   truncateLabel?: boolean;
   children: React.ReactNode;
@@ -198,6 +200,7 @@ export function LinkableRelationChip({
   className = '',
   disableLink = false,
   sortableDragHandleListeners,
+  sortableDragHandleRef,
   truncateLabel = false,
   children,
 }: LinkableRelationChipProps) {
@@ -216,6 +219,16 @@ export function LinkableRelationChip({
   const triggerRef = React.useRef<HTMLButtonElement>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
 
+  // Stable merged ref: an inline callback would re-run on every render (null then node),
+  // detaching/re-attaching the drag handle during hover/popover state updates.
+  const dotsButtonRef = React.useCallback(
+    (node: HTMLButtonElement | null) => {
+      triggerRef.current = node;
+      sortableDragHandleRef?.(node);
+    },
+    [sortableDragHandleRef]
+  );
+
   const shouldClamp = !truncateLabel && typeof children === 'string' && children.length >= 42;
 
   const labelInner = truncateLabel ? <span className="block truncate">{children}</span> : children;
@@ -305,7 +318,7 @@ export function LinkableRelationChip({
       <Popover.Root open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
         <Popover.Trigger asChild>
           <button
-            ref={triggerRef}
+            ref={dotsButtonRef}
             type="button"
             {...sortableDragHandleListeners}
             onMouseEnter={() => {
@@ -326,7 +339,7 @@ export function LinkableRelationChip({
                 isDeleteHovered,
                 isRelationHovered,
               }),
-              sortableDragHandleListeners && 'cursor-grab active:cursor-grabbing'
+              (sortableDragHandleListeners || sortableDragHandleRef) && 'cursor-grab active:cursor-grabbing'
             )}
           >
             <RelationDots color="current" />
diff --git a/apps/web/design-system/reorderable-relation-chips-dnd.tsx b/apps/web/design-system/reorderable-relation-chips-dnd.tsx
index b31d27022e..e7ed6b5981 100644
--- a/apps/web/design-system/reorderable-relation-chips-dnd.tsx
+++ b/apps/web/design-system/reorderable-relation-chips-dnd.tsx
@@ -1,22 +1,6 @@
-import {
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  KeyboardSensor,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  arrayMove,
-  horizontalListSortingStrategy,
-  sortableKeyboardCoordinates,
-  useSortable,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+import { move } from '@dnd-kit/helpers';
+import { DragDropProvider } from '@dnd-kit/react';
+import { useSortable } from '@dnd-kit/react/sortable';
 
 import React from 'react';
 
@@ -26,55 +10,39 @@ import { sortRelations } from '~/core/utils/utils';
 
 import { LinkableRelationChip } from './chip';
 
-export default function ReorderableRelationChipsDnd({
-  relations,
-  onUpdateRelation,
-  spaceId,
-}: {
+type Props = {
   relations: Relation[];
   onUpdateRelation: (relation: Relation, newPosition: string | null) => void;
   spaceId: string;
-}) {
-  const { storage } = useMutate();
-
+  afterChips?: React.ReactNode;
+};
+
+type DragDropProviderProps = React.ComponentProps<typeof DragDropProvider>;
+type DragEndEvent = Parameters<NonNullable<DragDropProviderProps['onDragEnd']>>[0];
+
+/**
+ * Reorderable, flex-wrapped list of relation chips.
+ *
+ * Built on the next-gen dnd-kit (@dnd-kit/react): unlike the classic sortable
+ * strategies — which compute transforms assuming uniform item sizes and therefore
+ * stretch or mis-space variable-width chips — it measures the real DOM and
+ * FLIP-animates reordering, so wrapped multi-row chip lists reflow correctly.
+ * Reordering is optimistic during the drag; we commit positions on drop.
+ */
+export default function ReorderableRelationChipsDnd({ relations, onUpdateRelation, spaceId, afterChips }: Props) {
   const sortedRelations = sortRelations(relations);
 
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8, // Prevent accidental drags
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const [activeId, setActiveId] = React.useState<string | null>(null);
-  const [isDragging, setIsDragging] = React.useState(false);
-
-  const activeRelation = activeId ? sortedRelations.find(r => r?.id === activeId) : null;
-
-  const handleDragStart = (event: DragStartEvent) => {
-    setActiveId(event.active?.id as string);
-    setIsDragging(true);
-  };
-
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active?.id === over?.id) return;
+    if (event.canceled) return;
 
-    const oldIndex = sortedRelations.findIndex(r => r?.id === active?.id);
-    const newIndex = sortedRelations.findIndex(r => r?.id === over?.id);
-
-    const newList = arrayMove(sortedRelations, oldIndex, newIndex);
+    const newList = move(sortedRelations, event);
+    const changed = newList.some((relation, index) => relation.id !== sortedRelations[index]?.id);
+    if (!changed) return;
 
+    // Reassign the existing set of positions across the new slot order.
     newList.forEach((relation, index) => {
-      onUpdateRelation(relation, sortedRelations[index].position ?? null);
+      onUpdateRelation(relation, sortedRelations[index]?.position ?? null);
     });
-
-    setIsDragging(false);
-    setActiveId(null);
   };
 
   if (sortedRelations.length <= 1) {
@@ -82,138 +50,98 @@ export default function ReorderableRelationChipsDnd({
       <>
         {sortedRelations.map(relation => (
           <div key={`relation-${relation.id}`} className="max-w-full min-w-0">
-            <LinkableRelationChip
-              isEditing
-              small
-              truncateLabel
-              onDelete={() => storage.relations.delete(relation)}
-              onDone={result => {
-                storage.relations.update(relation, draft => {
-                  draft.toSpaceId = result.space;
-                  draft.verified = result.verified;
-                });
-              }}
-              currentSpaceId={spaceId}
-              entityId={relation.toEntity.id}
-              relationId={relation.id}
-              relationEntityId={relation.entityId}
-              spaceId={relation.toSpaceId}
-              verified={relation.verified}
-            >
-              {relation.toEntity.name}
-            </LinkableRelationChip>
+            <RelationChip relation={relation} spaceId={spaceId} />
           </div>
         ))}
+        {afterChips}
       </>
     );
   }
 
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <SortableContext items={sortedRelations.map(r => r.id)} strategy={horizontalListSortingStrategy}>
-        {sortedRelations.map(relation => (
-          <SortableRelationChip key={relation?.id} relation={relation} spaceId={spaceId} />
-        ))}
-      </SortableContext>
-
-      <DragOverlay>
-        {activeId && activeRelation ? (
-          <div className="inline-block" style={{ cursor: 'grabbing' }}>
-            <LinkableRelationChip
-              isEditing
-              small
-              truncateLabel
-              onDelete={() => {}}
-              currentSpaceId={spaceId}
-              entityId={activeRelation.toEntity?.id}
-              relationId={activeRelation?.id}
-              relationEntityId={activeRelation.entityId}
-              spaceId={activeRelation.toSpaceId}
-              verified={activeRelation.verified}
-            >
-              {activeRelation.toEntity.name}
-            </LinkableRelationChip>
-          </div>
-        ) : null}
-      </DragOverlay>
-    </DndContext>
+    <DragDropProvider onDragEnd={handleDragEnd}>
+      {sortedRelations.map((relation, index) => (
+        <SortableRelationChip key={relation.id} relation={relation} index={index} spaceId={spaceId} />
+      ))}
+      {afterChips}
+    </DragDropProvider>
   );
 }
 
-interface SortableRelationChipProps {
+function RelationChip({
+  relation,
+  spaceId,
+  dragHandleRef,
+}: {
   relation: Relation;
   spaceId: string;
-}
+  dragHandleRef?: (element: HTMLButtonElement | null) => void;
+}) {
+  const { storage } = useMutate();
 
-function SortableRelationChip({ relation, spaceId }: SortableRelationChipProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: relation.id,
-  });
+  return (
+    <LinkableRelationChip
+      isEditing
+      small
+      truncateLabel
+      sortableDragHandleRef={dragHandleRef}
+      onDelete={() => storage.relations.delete(relation)}
+      onDone={result => {
+        storage.relations.update(relation, draft => {
+          draft.toSpaceId = result.space;
+          draft.verified = result.verified;
+        });
+      }}
+      currentSpaceId={spaceId}
+      entityId={relation.toEntity.id}
+      relationId={relation.id}
+      relationEntityId={relation.entityId}
+      spaceId={relation.toSpaceId}
+      verified={relation.verified}
+    >
+      {relation.toEntity.name}
+    </LinkableRelationChip>
+  );
+}
 
-  const style = {
-    transform: CSS.Translate.toString(transform),
-    transition,
-    opacity: isDragging ? 0 : 1,
-    zIndex: isDragging ? 1000 : 'auto',
-  };
+function SortableRelationChip({
+  relation,
+  index,
+  spaceId,
+}: {
+  relation: Relation;
+  index: number;
+  spaceId: string;
+}) {
+  const { ref, handleRef, isDragging } = useSortable({ id: relation.id, index });
 
-  const { storage } = useMutate();
   const [justDragged, setJustDragged] = React.useState(false);
 
-  // Track when dragging ends to prevent click events
+  // Keep a short window after a drag ends so the ensuing click doesn't navigate.
   React.useEffect(() => {
     if (isDragging) {
       setJustDragged(true);
     } else if (justDragged) {
-      // Keep justDragged true for a short time after drag ends
       const timeout = setTimeout(() => setJustDragged(false), 200);
       return () => clearTimeout(timeout);
     }
   }, [isDragging, justDragged]);
 
-  const handleClick = (e: React.MouseEvent) => {
-    // Prevent navigation if we just finished dragging
+  const handleClick = (event: React.MouseEvent) => {
     if (justDragged) {
-      e.preventDefault();
-      e.stopPropagation();
+      event.preventDefault();
+      event.stopPropagation();
     }
   };
 
   return (
     <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
+      ref={ref}
       className="relative inline-block max-w-full min-w-0"
       onClick={handleClick}
       onClickCapture={handleClick}
     >
-      <LinkableRelationChip
-        isEditing
-        small
-        truncateLabel
-        sortableDragHandleListeners={listeners}
-        onDelete={() => storage.relations.delete(relation)}
-        onDone={result => {
-          storage.relations.update(relation, draft => {
-            draft.toSpaceId = result.space;
-            draft.verified = result.verified;
-          });
-        }}
-        currentSpaceId={spaceId}
-        entityId={relation.toEntity.id}
-        relationId={relation.id}
-        relationEntityId={relation.entityId}
-        spaceId={relation.toSpaceId}
-        verified={relation.verified}
-      >
-        {relation.toEntity.name}
-      </LinkableRelationChip>
+      <RelationChip relation={relation} spaceId={spaceId} dragHandleRef={handleRef} />
     </div>
   );
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index e54448cee0..6764e1d75d 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -20,6 +20,8 @@
     "@ai-sdk/react": "^3.0.221",
     "@amplitude/unified": "^1.1.19",
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/helpers": "^0.5.0",
+    "@dnd-kit/react": "^0.5.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@effect/opentelemetry": "^0.63.0",
diff --git a/apps/web/partials/entity-page/editable-entity-page.tsx b/apps/web/partials/entity-page/editable-entity-page.tsx
index ee024052bc..00027e1416 100644
--- a/apps/web/partials/entity-page/editable-entity-page.tsx
+++ b/apps/web/partials/entity-page/editable-entity-page.tsx
@@ -797,7 +797,7 @@ export function RelationsGroup({ propertyId, id, spaceId }: RelationsGroupProps)
       : 'image/png,image/jpeg';
 
   return (
-    <div className="flex w-full max-w-full min-w-0 flex-wrap items-center gap-1 pr-1">
+    <motion.div className="flex w-full max-w-full min-w-0 flex-wrap items-start gap-1 pr-1">
       {/* Hidden file input for upload */}
       <input ref={fileInputRef} type="file" accept={fileAccept} onChange={handleFileInputChange} className="hidden" />
 
@@ -854,129 +854,128 @@ export function RelationsGroup({ propertyId, id, spaceId }: RelationsGroupProps)
               if (newPosition) draft.position = newPosition;
             });
           }}
-        />
-      )}
-
-      {property.renderableType !== SystemIds.IMAGE && property.renderableTypeStrict !== 'VIDEO' && (
-        <div>
-          <SelectEntityAsPopover
-            trigger={
-              isType ? (
-                <AddTypeButton icon={<Create className="h-3 w-3" color="grey-04" />} label="type" />
-              ) : (
-                <SquareButton icon={<Create />} />
-              )
-            }
-            placeholder={isType ? 'Find or create type...' : undefined}
-            relationValueTypes={relationValueTypes ? relationValueTypes : undefined}
-            onCreateEntity={result => {
-              // Check if we're creating a Property entity
-              const isCreatingProperty = valueType?.id === SystemIds.PROPERTY;
-
-              if (isCreatingProperty) {
-                // Use the proper property creation flow which sets dataType correctly
-                const renderableType = result.renderableType || 'TEXT';
-                const { baseDataType, renderableTypeId } = mapPropertyType(renderableType);
-                storage.properties.create({
-                  entityId: result.id,
-                  spaceId,
-                  name: result.name ?? '',
-                  dataType: baseDataType,
-                  renderableTypeId,
-                  verified: result.verified,
-                  toSpaceId: result.space,
-                });
-              } else {
-                // Standard entity creation
-                storage.values.set({
-                  id: ID.createValueId({
-                    entityId: result.id,
-                    propertyId: SystemIds.NAME_PROPERTY,
-                    spaceId,
-                  }),
-                  entity: {
-                    id: result.id,
-                    name: result.name,
-                  },
-                  property: {
-                    id: SystemIds.NAME_PROPERTY,
-                    name: 'Name',
-                    dataType: 'TEXT',
-                  },
-                  spaceId,
-                  value: result.name ?? '',
-                });
+          afterChips={
+            <div className="shrink-0 self-start">
+              <SelectEntityAsPopover
+                trigger={
+                  isType ? (
+                    <AddTypeButton icon={<Create className="h-3 w-3" color="grey-04" />} label="type" />
+                  ) : (
+                    <SquareButton icon={<Create />} />
+                  )
+                }
+                placeholder={isType ? 'Find or create type...' : undefined}
+                relationValueTypes={relationValueTypes ? relationValueTypes : undefined}
+                onCreateEntity={result => {
+                  // Check if we're creating a Property entity
+                  const isCreatingProperty = valueType?.id === SystemIds.PROPERTY;
+
+                  if (isCreatingProperty) {
+                    // Use the proper property creation flow which sets dataType correctly
+                    const renderableType = result.renderableType || 'TEXT';
+                    const { baseDataType, renderableTypeId } = mapPropertyType(renderableType);
+                    storage.properties.create({
+                      entityId: result.id,
+                      spaceId,
+                      name: result.name ?? '',
+                      dataType: baseDataType,
+                      renderableTypeId,
+                      verified: result.verified,
+                      toSpaceId: result.space,
+                    });
+                  } else {
+                    // Standard entity creation
+                    storage.values.set({
+                      id: ID.createValueId({
+                        entityId: result.id,
+                        propertyId: SystemIds.NAME_PROPERTY,
+                        spaceId,
+                      }),
+                      entity: {
+                        id: result.id,
+                        name: result.name,
+                      },
+                      property: {
+                        id: SystemIds.NAME_PROPERTY,
+                        name: 'Name',
+                        dataType: 'TEXT',
+                      },
+                      spaceId,
+                      value: result.name ?? '',
+                    });
 
-                if (valueType) {
-                  storage.relations.set({
-                    id: IdUtils.generate(),
-                    entityId: IdUtils.generate(),
-                    spaceId,
+                    if (valueType) {
+                      storage.relations.set({
+                        id: IdUtils.generate(),
+                        entityId: IdUtils.generate(),
+                        spaceId,
+                        renderableType: 'RELATION',
+                        toSpaceId: valueType.spaceId,
+                        type: {
+                          id: SystemIds.TYPES_PROPERTY,
+                          name: 'Types',
+                        },
+                        fromEntity: {
+                          id: result.id,
+                          name: result.name,
+                        },
+                        toEntity: {
+                          id: valueType.id,
+                          name: valueType.name,
+                          value: valueType.id,
+                        },
+                      });
+                    }
+                  }
+                }}
+                onDone={async result => {
+                  const newRelationId = ID.createEntityId();
+                  // @TODO(migration): lightweight relation pointing to entity id
+                  const newEntityId = ID.createEntityId();
+
+                  const newRelation: Relation = {
+                    id: newRelationId,
+                    spaceId: spaceId,
+                    position: Position.generate(),
                     renderableType: 'RELATION',
-                    toSpaceId: valueType.spaceId,
+                    verified: false,
+                    entityId: newEntityId,
                     type: {
-                      id: SystemIds.TYPES_PROPERTY,
-                      name: 'Types',
+                      id: typeOfId,
+                      name: typeOfName,
                     },
                     fromEntity: {
-                      id: result.id,
-                      name: result.name,
+                      id: id,
+                      name: name,
                     },
                     toEntity: {
-                      id: valueType.id,
-                      name: valueType.name,
-                      value: valueType.id,
+                      id: result.id,
+                      name: result.name,
+                      value: result.id,
                     },
-                  });
-                }
-              }
-            }}
-            onDone={async result => {
-              const newRelationId = ID.createEntityId();
-              // @TODO(migration): lightweight relation pointing to entity id
-              const newEntityId = ID.createEntityId();
-
-              const newRelation: Relation = {
-                id: newRelationId,
-                spaceId: spaceId,
-                position: Position.generate(),
-                renderableType: 'RELATION',
-                verified: false,
-                entityId: newEntityId,
-                type: {
-                  id: typeOfId,
-                  name: typeOfName,
-                },
-                fromEntity: {
-                  id: id,
-                  name: name,
-                },
-                toEntity: {
-                  id: result.id,
-                  name: result.name,
-                  value: result.id,
-                },
-              };
-
-              if (result.space) {
-                newRelation.toSpaceId = result.space;
-              }
+                  };
 
-              if (result.verified) {
-                newRelation.verified = true;
-              }
+                  if (result.space) {
+                    newRelation.toSpaceId = result.space;
+                  }
 
-              storage.relations.set(newRelation);
+                  if (result.verified) {
+                    newRelation.verified = true;
+                  }
 
-              for (const relationType of property.relationEntityTypes ?? []) {
-                createRelationEntityTypeRelation(storage, spaceId, newEntityId, relationType);
-              }
+                  storage.relations.set(newRelation);
 
-              await applyTemplate({ ...templateOptions, propertyId: typeOfId, typeId: result.id });
-            }}
-            spaceId={spaceId}
-          />
-        </div>
+                  for (const relationType of property.relationEntityTypes ?? []) {
+                    createRelationEntityTypeRelation(storage, spaceId, newEntityId, relationType);
+                  }
+
+                  await applyTemplate({ ...templateOptions, propertyId: typeOfId, typeId: result.id });
+                }}
+                spaceId={spaceId}
+              />
+            </div>
+          }
+        />
       )}
 
       {/* Show geo location map for the first Address or Venue relation */}
@@ -988,7 +987,7 @@ export function RelationsGroup({ propertyId, id, spaceId }: RelationsGroupProps)
           propertyType={propertyId}
         />
       )}
-    </div>
+    </motion.div>
   );
 }
 
diff --git a/apps/web/vite.config.js b/apps/web/vite.config.js
index 4c33272d67..a75b1412e9 100644
--- a/apps/web/vite.config.js
+++ b/apps/web/vite.config.js
@@ -6,6 +6,7 @@ export default defineConfig({
     alias: {
       '~': path.resolve(__dirname, './'),
     },
+    setupFiles: ['./vitest.setup.ts'],
     environment: 'jsdom',
     env: {
       NEXT_PUBLIC_APP_ENV: 'production',
diff --git a/apps/web/vitest.setup.ts b/apps/web/vitest.setup.ts
new file mode 100644
index 0000000000..2a0a0e4767
--- /dev/null
+++ b/apps/web/vitest.setup.ts
@@ -0,0 +1,12 @@
+// Browser APIs referenced at module scope by dependencies (e.g. @dnd-kit/dom's
+// ResizeNotifier extends ResizeObserver) that don't exist in the node/jsdom
+// test environment. Stubbed globally so importing UI components in tests works.
+class ResizeObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+}
diff --git a/bun.lock b/bun.lock
index d058c3038c..9b4fd0e14f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -26,6 +26,8 @@
         "@ai-sdk/react": "^3.0.221",
         "@amplitude/unified": "^1.1.19",
         "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/helpers": "^0.5.0",
+        "@dnd-kit/react": "^0.5.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@effect/opentelemetry": "^0.63.0",
@@ -340,12 +342,26 @@
 
     "@discoveryjs/json-ext": ["@discoveryjs/json-ext@0.5.7", "", {}, "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="],
 
+    "@dnd-kit/abstract": ["@dnd-kit/abstract@0.5.0", "", { "dependencies": { "@dnd-kit/geometry": "^0.5.0", "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-hi13iMJgjPX/KDYVKg5VeDIhmYiV6buc9bAX+tCLYf4QdyYjPbsXjn2sPo6m7fQ6SGJBEFgHJ2PemeKDUbwBaA=="],
+
     "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
 
+    "@dnd-kit/collision": ["@dnd-kit/collision@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "@dnd-kit/geometry": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-xUqRn3lS7oqLkT0AnnHS/STh/Czvwe1UapZFYiLbsUGxopMsQd4teaPCzPouOThoMdGEe+dHWjfqJl6t9iG4mQ=="],
+
     "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
 
+    "@dnd-kit/dom": ["@dnd-kit/dom@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "@dnd-kit/collision": "^0.5.0", "@dnd-kit/geometry": "^0.5.0", "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-f2xFJp5SYQ8EW/Fbtaa8iBb66hpkWc7qa8vU826KW11/tb44sH+AisZnGtwOOTWTQ0GraqBDr5ixTErww+eKXw=="],
+
+    "@dnd-kit/geometry": ["@dnd-kit/geometry@0.5.0", "", { "dependencies": { "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-ubHQS1CiSDH8ssYH2xG5BnpwPSFP1tStXXjug7/Ba6qnQdu/EUH47l6QXKIksQnnanfVfDf0aGeevRxgZlj28A=="],
+
+    "@dnd-kit/helpers": ["@dnd-kit/helpers@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "tslib": "^2.6.2" } }, "sha512-i4y+51/icSw+OHMr/su19qhnmNhAzh8PnBwXvapFYTd+64oodIyJRiRkB+hhfxAfnur7RYSW8qacDTrXjg2XOg=="],
+
+    "@dnd-kit/react": ["@dnd-kit/react@0.5.0", "", { "dependencies": { "@dnd-kit/abstract": "^0.5.0", "@dnd-kit/dom": "^0.5.0", "@dnd-kit/state": "^0.5.0", "tslib": "^2.6.2" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-abQPLI8lmfVE+v/n+pqy5WFxrw6T2Yg0UQZsL78dp5DKci7dKTVDjvLWqvass+XTFtzJmsZEjk1NdqE6xG8Jiw=="],
+
     "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
 
+    "@dnd-kit/state": ["@dnd-kit/state@0.5.0", "", { "dependencies": { "@preact/signals-core": "^1.10.0", "tslib": "^2.6.2" } }, "sha512-y7XbabQqjF58Lk8YmDQuR8l6QjN+Kh4qlGEjUvHuIeasLk1QP+9L5diXS98VMxQIivyMmUtX2//f+3N7qPJX4w=="],
+
     "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
 
     "@ecies/ciphers": ["@ecies/ciphers@0.2.6", "", { "peerDependencies": { "@noble/ciphers": "^1.0.0" } }, "sha512-patgsRPKGkhhoBjETV4XxD0En4ui5fbX0hzayqI3M8tvNMGUoUvmyYAIWwlxBc1KX5cturfqByYdj5bYGRpN9g=="],
@@ -762,6 +778,8 @@
 
     "@posthog/types": ["@posthog/types@1.392.0", "", {}, "sha512-nctNujXL3FC1v99FktaTMSugSD9ZOZekEpahUSafkU2TSvW+XGKNkQZbokuJtiWvPBK208dwMJva8UfBkChqpw=="],
 
+    "@preact/signals-core": ["@preact/signals-core@1.14.3", "", {}, "sha512-m0K3vnbSLC5rHs2ZVfeAMvBtT1zIyq4mxx5OlNncSgMj5Iz6W5Rn3kPrDxAC+iIKmiVe0lSl6U37t5ZkEWoVAw=="],
+
     "@privy-io/api-base": ["@privy-io/api-base@1.9.1", "", { "dependencies": { "zod": "^3.25.76" } }, "sha512-Dq7yyZyVQm71gm3d5o1VH9Ahak9gf/zXx6A6E4bx9VVZEYTevL8J3aJAvIIj1qFenc12UGUpWO3oWkn9Cpr+mw=="],
 
     "@privy-io/api-types": ["@privy-io/api-types@0.15.0", "", {}, "sha512-VT5/Wau37+ZRaVZ8CPa224z5qcJTeaQtamq6TfOcPJSdV6cNyX+Phlaeg13xFLjj3dIGkqibZvr0f45VT6PX3A=="],