@noya-app/noya-designsystem 0.1.56 → 0.1.58

package/dist/index.mjs

@@ -218,8 +218,11 @@ import { useEffect as useEffect2, useState as useState5 } from "react";
 // ../noya-react-utils/src/hooks/useIsMounted.ts
 import { useEffect as useEffect3, useRef as useRef4 } from "react";
 
+// ../noya-react-utils/src/hooks/useIsomorphicLayoutEffect.ts
+import { useEffect as useEffect4, useLayoutEffect } from "react";
+
 // ../noya-react-utils/src/hooks/useLateReference.ts
-import { useCallback as useCallback5, useLayoutEffect, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
 
 // ../noya-react-utils/src/hooks/useLazyValue.ts
 import { useRef as useRef6 } from "react";
@@ -253,7 +256,7 @@ import { useCallback as useCallback7, useMemo as useMemo2, useState as useState6
 // ../noya-react-utils/src/hooks/usePersistentState.ts
 import {
   useCallback as useCallback8,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo3,
   useState as useState7
 } from "react";
@@ -264,7 +267,7 @@ function usePersistentStateString(storage, storageKey, defaultValue2) {
   const [state, setState] = useState7(
     () => getCurrentValue(storage, storageKey, defaultValue2)
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const newValue = getCurrentValue(storage, storageKey, defaultValue2);
     setState(newValue);
   }, [defaultValue2, storage, storageKey]);
@@ -276,7 +279,7 @@ function usePersistentStateString(storage, storageKey, defaultValue2) {
     },
     [defaultValue2, storage, storageKey]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const dispose = storage.addListener(storageKey, (newValue) => {
       setState(newValue);
     });
@@ -286,21 +289,33 @@ function usePersistentStateString(storage, storageKey, defaultValue2) {
 }
 
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 import { isShallowEqual } from "@noya-app/noya-utils";
 import { useRef as useRef7 } from "react";
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-import { useCallback as useCallback9, useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useLayoutEffect as useLayoutEffect3, useRef as useRef8 } from "react";
+var noop2 = () => {
+};
+function useStableCallback(callback) {
+  const callbackRef = useRef8(callback || noop2);
+  useLayoutEffect3(() => {
+    callbackRef.current = callback || noop2;
+  }, [callback]);
+  return useCallback9(
+    (...args) => callbackRef.current(...args),
+    [callbackRef]
+  );
+}
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-import { useEffect as useEffect6, useState as useState9 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 import { decodeQueryParameters } from "@noya-app/noya-utils";
-import { useEffect as useEffect7, useState as useState10 } from "react";
+import { useEffect as useEffect8, useState as useState10 } from "react";
 
 // ../emitter/src/index.ts
 var Emitter = class {
@@ -1049,14 +1064,14 @@ import { composeRefs } from "@radix-ui/react-compose-refs";
 import React15, {
   forwardRef as forwardRef7,
   useCallback as useCallback11,
-  useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect3,
+  useEffect as useEffect10,
+  useLayoutEffect as useLayoutEffect4,
   useRef as useRef10,
   useState as useState11
 } from "react";
 
 // src/contexts/GlobalInputBlurContext.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect9 } from "react";
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1083,7 +1098,7 @@ var useGlobalInputBlur = () => {
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  useEffect8(() => {
+  useEffect9(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1174,7 +1189,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   const userDidEdit = useRef10(false);
   const isSubmitTriggeredByEscapeKey = useRef10(false);
   const [internalValue, setInternalValue] = useState11("");
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     setInternalValue(value);
   }, [value]);
   const handleSubmit = useCallback11(() => {
@@ -1235,7 +1250,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   );
   const latestHandleSubmit = useRef10(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  useEffect9(() => {
+  useEffect10(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1321,7 +1336,7 @@ var Label = memo6(
 
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React18, { useEffect as useEffect10, useId, useRef as useRef11 } from "react";
+import React18, { useEffect as useEffect11, useId, useRef as useRef11 } from "react";
 
 // src/contexts/OpenPortalsContext.tsx
 import * as React17 from "react";
@@ -1400,7 +1415,7 @@ function Popover({
     defaultValue: false
   });
   const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isOpen) return;
     addOpenPortal(portalScopeId || defaultId);
     return () => {
@@ -1475,7 +1490,7 @@ var InputFieldContext = createContext4({
   endRef: null
 });
 var useInputFieldContext = () => useContext4(InputFieldContext);
-var noop2 = () => {
+var noop3 = () => {
 };
 var getFieldSpacing = ({
   endWidth = 0,
@@ -1725,7 +1740,7 @@ function InputFieldNumberInput(props) {
       onKeyDown: !readOnly ? handleKeyDown : void 0,
       onBlur: handleBlur,
       ...readOnly ? { readOnly: true } : {},
-      ..."onChange" in props ? { onChange: readOnly ? noop2 : handleChange } : { onSubmit: readOnly ? noop2 : handleSubmit }
+      ..."onChange" in props ? { onChange: readOnly ? noop3 : handleChange } : { onSubmit: readOnly ? noop3 : handleSubmit }
     }
   );
 }
@@ -2987,12 +3002,12 @@ import React31, {
   forwardRef as forwardRef12,
   memo as memo12,
   useCallback as useCallback15,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef13
 } from "react";
 var useAutoResize = (value) => {
   const textareaRef = useRef13(null);
-  useEffect12(() => {
+  useEffect13(() => {
     if (value === void 0) return;
     if (!textareaRef.current) return;
     textareaRef.current.style.height = "auto";
@@ -3125,8 +3140,8 @@ import React33, {
   Children as Children2,
   isValidElement as isValidElement2,
   useCallback as useCallback16,
-  useEffect as useEffect13,
-  useLayoutEffect as useLayoutEffect4,
+  useEffect as useEffect14,
+  useLayoutEffect as useLayoutEffect5,
   useRef as useRef14,
   useState as useState17
 } from "react";
@@ -3166,7 +3181,7 @@ var PresenceChild = ({
     willChange: "opacity",
     backfaceVisibility: "hidden"
   };
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     let rafId;
     if (isPresent && animationState !== "entered") {
       if (isInitialMount.current && skipInitialAnimation) {
@@ -3215,7 +3230,7 @@ var AnimatePresence = ({
   const previousChildrenRef = useRef14([]);
   const removingChildrenRef = useRef14(/* @__PURE__ */ new Set());
   const waitingToEnterRef = useRef14([]);
-  useEffect13(() => {
+  useEffect14(() => {
     const newChildren = Children2.toArray(children).filter(
       isValidElement2
     );
@@ -3703,7 +3718,7 @@ import React39, {
   forwardRef as forwardRef17,
   memo as memo15,
   useCallback as useCallback17,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef16,
   useState as useState19
@@ -3729,7 +3744,7 @@ var EditableText = memo15(
     ...props
   }, ref) {
     const [inputValue, setInputValue] = useState19(value);
-    useEffect15(() => {
+    useEffect16(() => {
       setInputValue(value);
     }, [value]);
     const [focusedInternal, setFocused] = useState19(false);
@@ -3765,7 +3780,7 @@ var EditableText = memo15(
       inputRef.current?.focus();
       inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
     }
-    useEffect15(() => {
+    useEffect16(() => {
       if (testFocused) return;
       if (focused) {
         setTimeout(focusInput, 1);
@@ -4424,7 +4439,7 @@ import React48, {
   useCallback as useCallback23,
   useContext as useContext11,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo21,
   useRef as useRef19
 } from "react";
@@ -4455,7 +4470,7 @@ function mergeEventHandlers(...handlerMaps) {
 }
 
 // src/components/sorting/Sortable.tsx
-import { useDndContext, useDroppable } from "@dnd-kit/core";
+import { useDroppable } from "@dnd-kit/core";
 import {
   horizontalListSortingStrategy,
   SortableContext,
@@ -4510,12 +4525,15 @@ import {
   useSensor,
   useSensors
 } from "@dnd-kit/core";
+import { rectContainsPoint, unionRects } from "@noya-app/noya-geometry";
+import { windowsOf } from "@noya-app/noya-utils";
 import * as React45 from "react";
 import { useMemo as useMemo19 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 function SharedDragProvider({
   children,
-  contexts = {
+  onMoveItem,
+  sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext
   }
@@ -4528,22 +4546,13 @@ function SharedDragProvider({
     })
   );
   const mounted = useMounted();
-  const [activeItem, setActiveItem] = React45.useState(null);
-  const [delta, setDelta] = React45.useState({ x: 0, y: 0 });
+  const [dragState, setDragState] = React45.useState({
+    source: null,
+    target: null,
+    indicator: null
+  });
   const { registerList, unregisterList, registeredLists } = useDragRegistrationManager();
   const activatorEventRef = React45.useRef(null);
-  const acceptsListDrop = React45.useCallback(
-    (sourceListId, targetListId) => {
-      const sourceList = registeredLists.get(sourceListId);
-      const targetList = registeredLists.get(targetListId);
-      if (!sourceList || !targetList) return false;
-      return targetList.acceptsFromList({
-        sourceListId,
-        targetListId
-      });
-    },
-    [registeredLists]
-  );
   const handleDragStart = React45.useCallback(
     (event) => {
       activatorEventRef.current = event.activatorEvent;
@@ -4551,132 +4560,121 @@ function SharedDragProvider({
         const itemIndex = list.keys.findIndex((key) => key === event.active.id);
         if (itemIndex >= 0) {
           const dragItem = {
-            id: event.active.id,
+            itemId: event.active.id,
             listId,
             index: itemIndex
           };
-          setActiveItem(dragItem);
+          setDragState({
+            source: dragItem,
+            target: null,
+            indicator: null
+          });
           break;
         }
       }
     },
     [registeredLists]
   );
-  const handleDragMove = React45.useCallback((event) => {
-    setDelta({ x: event.delta.x, y: event.delta.y });
-  }, []);
+  const handleDragMove = React45.useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!activatorEventRef.current || !dragState.source) return;
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists
+      });
+      setDragState({
+        source: dragState.source,
+        target: dropTarget?.target ?? null,
+        indicator: dropTarget?.indicator ?? null
+      });
+    },
+    [registeredLists, dragState.source]
+  );
+  const stableOnMoveItem = useStableCallback(onMoveItem);
   const handleDragEnd = React45.useCallback(
     (event) => {
       const { active, over } = event;
-      const activatorEventPoint = activatorEventRef.current ? {
-        x: activatorEventRef.current.clientX,
-        y: activatorEventRef.current.clientY
-      } : null;
-      setActiveItem(null);
+      if (!activatorEventRef.current || !dragState.source) return;
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists
+      });
+      setDragState({
+        source: null,
+        target: null,
+        indicator: null
+      });
       activatorEventRef.current = null;
-      if (!activeItem || !over || active.id === over.id) {
-        return;
-      }
-      let targetListId = null;
-      let targetIndex = -1;
-      for (const [listId, list] of registeredLists) {
-        const itemIndex = list.keys.findIndex((key) => key === over.id);
-        if (itemIndex >= 0) {
-          targetListId = listId;
-          targetIndex = itemIndex;
-          break;
-        }
-        if (over.id === listId) {
-          targetListId = listId;
-          targetIndex = list.keys.length;
-          break;
-        }
-      }
-      if (!targetListId || !acceptsListDrop(activeItem.listId, targetListId)) {
-        setActiveItem(null);
-        activatorEventRef.current = null;
-        return;
-      }
-      const targetList = registeredLists.get(targetListId);
-      const sourceList = registeredLists.get(activeItem.listId);
-      if (!targetList || !sourceList) {
-        return;
-      }
-      if (targetIndex < targetList.keys.length && activatorEventPoint) {
-        const eventX = activatorEventPoint.x;
-        const eventY = activatorEventPoint.y;
-        const currentX = eventX + delta.x;
-        const currentY = eventY + delta.y;
-        const absolutePosition = { x: currentX, y: currentY };
-        const indicator = targetList.getDropIndicator({
-          absolutePosition,
-          active,
-          over,
-          sourceListId: activeItem.listId,
-          targetListId
-        });
-        if (!indicator) return;
-        sourceList.onMoveItem(
-          activeItem.index,
-          targetIndex,
-          indicator,
-          activeItem.listId,
-          targetListId
-        );
-      } else if (targetIndex >= targetList.keys.length) {
-        const canDrop = targetList.acceptsDrop(
-          activeItem.index,
-          Math.max(0, targetList.keys.length - 1),
-          // Use last valid index or 0 for empty lists
-          "below",
-          activeItem.listId,
-          targetListId
-        );
-        if (canDrop) {
-          sourceList.onMoveItem(
-            activeItem.index,
-            targetIndex,
-            "below",
-            activeItem.listId,
-            targetListId
-          );
-        }
+      if (!dropTarget) return;
+      const sourceList = registeredLists.get(dropTarget.source.listId);
+      const targetList = registeredLists.get(dropTarget.target.listId);
+      if (!sourceList || !targetList) return;
+      const parameters = {
+        sourceIndex: dropTarget.source.index,
+        targetIndex: dropTarget.target.index,
+        position: dropTarget.indicator,
+        sourceListId: dropTarget.source.listId,
+        targetListId: dropTarget.target.listId
+      };
+      sourceList.onMoveItem(parameters);
+      if (dropTarget.target.listId !== dropTarget.source.listId) {
+        targetList.onMoveItem(parameters);
       }
+      stableOnMoveItem?.(parameters);
     },
-    [activeItem, registeredLists, acceptsListDrop, delta]
+    [registeredLists, dragState.source, stableOnMoveItem]
   );
   const contextValue = React45.useMemo(
     () => ({
-      activeItem,
-      delta,
       registerList,
       unregisterList
     }),
-    [activeItem, delta, registerList, unregisterList]
+    [registerList, unregisterList]
   );
-  const activeList = activeItem ? registeredLists.get(activeItem.listId) : null;
+  const activeList = dragState.source ? registeredLists.get(dragState.source.listId) : null;
   const activeDragContextValue = React45.useMemo(
-    () => ({ activeItem, delta }),
-    [activeItem, delta]
+    () => dragState,
+    [dragState]
   );
   const collisionDetection = useMemo19(() => {
-    return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
+    return getItemFirstCollisionDetection(registeredLists);
   }, [registeredLists]);
-  return /* @__PURE__ */ React45.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React45.createElement(contexts.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React45.createElement(contexts.activeDragContext.Provider, { value: activeDragContextValue }, /* @__PURE__ */ React45.createElement(
-    DndContext,
+  return /* @__PURE__ */ React45.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React45.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React45.createElement(
+    sharedDragProps.activeDragContext.Provider,
     {
-      sensors,
-      collisionDetection,
-      onDragStart: handleDragStart,
-      onDragMove: handleDragMove,
-      onDragEnd: handleDragEnd
+      value: activeDragContextValue
     },
-    children,
-    mounted && activeList?.renderOverlay && activeItem && createPortal2(
-      /* @__PURE__ */ React45.createElement(DragOverlay, { dropAnimation: null }, activeList.renderOverlay(activeItem.id)),
-      document.body
+    /* @__PURE__ */ React45.createElement(
+      DndContext,
+      {
+        sensors,
+        collisionDetection,
+        onDragStart: handleDragStart,
+        onDragMove: handleDragMove,
+        onDragEnd: handleDragEnd
+      },
+      children,
+      mounted && activeList?.renderOverlay && dragState.source && createPortal2(
+        /* @__PURE__ */ React45.createElement(DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
+        document.body
+      )
     )
-  ))));
+  )));
 }
 function useMounted() {
   const [mounted, setMounted] = React45.useState(false);
@@ -4694,11 +4692,11 @@ function withDragProvider(Component) {
     return /* @__PURE__ */ React45.createElement(Component, { ...props });
   };
 }
-var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
+var getItemFirstCollisionDetection = (registeredLists) => (parameters) => {
   const pointerCollisions = pointerWithin(parameters);
   if (pointerCollisions.length > 0) {
     const itemCollisions = pointerCollisions.filter((collision) => {
-      for (const listId of registeredListIds) {
+      for (const listId of registeredLists.keys()) {
         if (collision.id === listId) {
           return false;
         }
@@ -4709,15 +4707,122 @@ var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
       return itemCollisions;
     }
   }
-  return pointerCollisions.length > 0 ? pointerCollisions : closestCenter(parameters);
+  const listCollision = pointerCollisions.at(0);
+  const nearestCenters = closestCenter(parameters);
+  if (parameters.pointerCoordinates && listCollision) {
+    const list = registeredLists.get(listCollision.id);
+    if (list) {
+      const pairs = windowsOf(list.keys, 2);
+      for (const pair of pairs) {
+        const clientRects = pair.map(
+          (key) => parameters.droppableRects.get(key)
+        );
+        const merged = unionRects(
+          ...clientRects.map((rect) => ({
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height
+          }))
+        );
+        if (rectContainsPoint(merged, parameters.pointerCoordinates)) {
+          return nearestCenters.filter(
+            (center) => pair.some((id) => id === center.id)
+          );
+        }
+      }
+    }
+  }
+  return pointerCollisions;
 };
+function findDropTarget({
+  activationPoint,
+  delta,
+  over,
+  active,
+  source,
+  registeredLists
+}) {
+  if (!over || active.id === over.id) return;
+  let targetListId = null;
+  let targetIndex = -1;
+  for (const [listId, list] of registeredLists) {
+    const itemIndex = list.keys.findIndex((key) => key === over.id);
+    if (itemIndex >= 0) {
+      targetListId = listId;
+      targetIndex = itemIndex;
+      break;
+    }
+    if (over.id === listId) {
+      targetListId = listId;
+      targetIndex = list.keys.length;
+      break;
+    }
+  }
+  const targetList = targetListId !== null ? registeredLists.get(targetListId) : null;
+  const sourceList = registeredLists.get(source.listId);
+  if (!targetList || !sourceList || !targetList.acceptsFromList({
+    sourceListId: sourceList.id,
+    targetListId: targetList.id
+  })) {
+    return;
+  }
+  if (over.id === targetList.id) {
+    const canDrop = targetList.acceptsDrop({
+      sourceIndex: source.index,
+      targetIndex: Math.max(0, targetList.keys.length - 1),
+      // Use last valid index or 0 for empty lists
+      position: "below",
+      sourceListId: sourceList.id,
+      targetListId: targetList.id
+    });
+    if (canDrop) {
+      return {
+        source,
+        target: {
+          itemId: over.id,
+          listId: targetList.id,
+          index: targetIndex
+        },
+        indicator: "below"
+      };
+    }
+  }
+  const eventX = activationPoint.x;
+  const eventY = activationPoint.y;
+  const currentX = eventX + delta.x;
+  const currentY = eventY + delta.y;
+  const absolutePosition = { x: currentX, y: currentY };
+  const indicator = targetList.getDropIndicator({
+    absolutePosition,
+    active,
+    over,
+    sourceListId: sourceList.id,
+    targetListId: targetList.id
+  });
+  if (indicator) {
+    return {
+      source,
+      target: {
+        itemId: over.id,
+        listId: targetList.id,
+        index: targetIndex
+      },
+      indicator
+    };
+  }
+}
 
 // src/components/sorting/sorting.ts
 import * as React46 from "react";
 var normalizeListTargetIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
-var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
+var defaultAcceptsDrop = ({
+  sourceIndex,
+  targetIndex,
+  position
+}) => {
   if (position === "inside") return false;
   const normalized = normalizeListTargetIndex(targetIndex, position);
   if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
@@ -4750,13 +4855,13 @@ function validateDropIndicator({
   const overIndex = keys.findIndex((id) => id === overId);
   if (overIndex === -1) return void 0;
   if (activeIndex === -1 && sourceListId === targetListId) return void 0;
-  const acceptsDropInside = acceptsDrop2(
-    activeIndex,
-    overIndex,
-    "inside",
+  const acceptsDropInside = acceptsDrop2({
+    sourceIndex: activeIndex,
+    targetIndex: overIndex,
+    position: "inside",
     sourceListId,
     targetListId
-  );
+  });
   if (isContainedInMiddleThird(elementStart, elementSize, offsetStart) && acceptsDropInside) {
     return "inside";
   }
@@ -4765,13 +4870,13 @@ function validateDropIndicator({
     elementSize,
     offsetStart
   );
-  const acceptedHalf = acceptsDrop2(
-    activeIndex,
-    overIndex,
-    containingHalf,
+  const acceptedHalf = acceptsDrop2({
+    sourceIndex: activeIndex,
+    targetIndex: overIndex,
+    position: containingHalf,
     sourceListId,
     targetListId
-  );
+  });
   return acceptedHalf ? containingHalf : (
     // Lastly, check if inside but not middle third
     acceptsDropInside ? "inside" : void 0
@@ -4784,80 +4889,75 @@ function getContainingHalf(elementStart, elementSize, offsetStart) {
   if (offsetStart < elementStart + elementSize / 2) return "above";
   return "below";
 }
+var dragItemKeySeparator = "-~-";
+function createDragItemKey(listId, itemId) {
+  return `${listId}${dragItemKeySeparator}${itemId}`;
+}
+function parseDragItemKey(key) {
+  const [listId, itemId] = key.split(dragItemKeySeparator);
+  return { listId, itemId };
+}
 
 // src/components/sorting/Sortable.tsx
 var SortableItemContext2 = React47.createContext({
-  keys: [],
   acceptsDrop: defaultAcceptsDrop,
-  axis: "y",
   listId: "",
   getDropTargetParentIndex: void 0,
   activeDragContext: ActiveDragContext
 });
 function useSortableDropIndicator({
-  id,
   index,
-  isDragging,
-  overIndex,
-  activeIndex,
-  keys,
-  acceptsDrop: acceptsDrop2,
-  axis,
+  itemId,
   listId,
+  acceptsDrop: acceptsDrop2,
   getDropTargetParentIndex
 }) {
-  const { active, over, activatorEvent } = useDndContext();
   const { activeDragContext } = React47.useContext(SortableItemContext2);
-  const { activeItem, delta: position } = useActiveDrag(activeDragContext);
-  if (index < 0 || isDragging || !active || !over || !activeItem || !// Same-list drop: check normal overIndex matching
-  (activeItem.listId === listId && index === overIndex || // Cross-list drop: check if we're hovering over this specific item
-  activeItem.listId !== listId && over.id === id)) {
-    return void 0;
+  const activeDrag = useActiveDrag(activeDragContext);
+  const { source, target } = activeDrag;
+  if (!source || !target) return;
+  if (target.listId === listId && target.itemId === itemId) {
+    return activeDrag.indicator ?? void 0;
   }
-  const isCrossContainer = activeItem.listId !== listId;
-  const validationKeys = isCrossContainer ? [active.id, ...keys] : keys;
-  const eventX = activatorEvent?.clientX ?? 0;
-  const eventY = activatorEvent?.clientY ?? 0;
-  const offsetLeft = eventX + position.x;
-  const offsetTop = eventY + position.y;
-  const parentIndex = overIndex === -1 ? void 0 : getDropTargetParentIndex?.(overIndex);
-  const isValidParent = parentIndex === void 0 || parentIndex === -1 ? false : acceptsDrop2(activeIndex, parentIndex, "inside", listId, listId);
-  const overIdAcceptsDrop = overIndex === -1 ? void 0 : acceptsDrop2(activeIndex, overIndex, "inside", listId, listId);
-  const relativeDropPosition = index >= 0 && index === overIndex && !isDragging && active && over ? validateDropIndicator({
-    acceptsDrop: acceptsDrop2,
-    keys: validationKeys,
-    activeId: active.id,
-    overId: over.id,
-    offsetStart: axis === "x" ? offsetLeft : offsetTop,
-    elementStart: axis === "x" ? over.rect.left : over.rect.top,
-    elementSize: axis === "x" ? over.rect.width : over.rect.height,
-    sourceListId: listId,
-    targetListId: listId
-  }) : void 0;
-  const showDragInsideIndicatorOnParent = !overIdAcceptsDrop && isValidParent && parentIndex === index;
-  return relativeDropPosition ?? (showDragInsideIndicatorOnParent ? "inside" : void 0);
+  const targetParentIndex = target.index === -1 ? void 0 : getDropTargetParentIndex?.(target.index);
+  const isValidParent = targetParentIndex === void 0 || targetParentIndex === -1 ? false : acceptsDrop2({
+    sourceIndex: source.index,
+    targetIndex: targetParentIndex,
+    position: "inside",
+    sourceListId: source.listId,
+    targetListId: target.listId
+  });
+  const overIdAcceptsDrop = target.index === -1 ? void 0 : acceptsDrop2({
+    sourceIndex: source.index,
+    targetIndex: target.index,
+    position: "inside",
+    sourceListId: source.listId,
+    targetListId: target.listId
+  });
+  const thisItemIsTargetParent = targetParentIndex === index;
+  const showIndicatorOnParent = !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
+  return showIndicatorOnParent ? "inside" : void 0;
 }
 function SortableItem({
   id,
   disabled,
   children
 }) {
-  const { keys, acceptsDrop: acceptsDrop2, axis, listId, getDropTargetParentIndex } = React47.useContext(SortableItemContext2);
-  const { attributes, listeners, setNodeRef, isDragging, index, overIndex } = useSortable({ id, disabled });
+  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React47.useContext(SortableItemContext2);
+  const dragItemKey = createDragItemKey(listId, id);
+  const { attributes, listeners, setNodeRef, isDragging, index } = useSortable({
+    id: dragItemKey,
+    disabled
+  });
   const ref = React47.useCallback(
     (node) => setNodeRef(node),
     [setNodeRef]
   );
   const relativeDropPosition = useSortableDropIndicator({
-    id,
     index,
-    isDragging,
-    overIndex,
-    keys,
-    acceptsDrop: acceptsDrop2,
-    axis,
+    itemId: dragItemKey,
     listId,
-    activeIndex: index,
+    acceptsDrop: acceptsDrop2,
     getDropTargetParentIndex
   });
   return children({
@@ -4872,7 +4972,7 @@ function SortableItem({
 }
 function SortableRoot_({
   id: idProp,
-  keys,
+  keys: keysProp,
   onMoveItem,
   renderOverlay,
   acceptsFromList,
@@ -4880,22 +4980,19 @@ function SortableRoot_({
   axis = "y",
   children,
   getDropTargetParentIndex,
-  sharedDragProviderContexts,
+  sharedDragProps,
   containerRef
 }) {
   const defaultId = React47.useId();
   const id = idProp ?? defaultId;
+  const keys = React47.useMemo(() => {
+    return keysProp.map((key) => createDragItemKey(id, key));
+  }, [keysProp, id]);
   const { registerList, unregisterList } = useDragRegistration(
-    sharedDragProviderContexts?.dragRegistrationContext ?? DragRegistrationContext
+    sharedDragProps?.dragRegistrationContext ?? DragRegistrationContext
   );
   const { setNodeRef: setDroppableRef } = useDroppable({
-    id,
-    // Make the container droppable only when the list is empty
-    // This avoids conflicts with individual sortable items.
-    // This isn't strictly necessary since we also use a custom collision detection
-    // that prioritizes items over containers, but it helps with dropping into
-    // the best position (either above or below, rather than always below).
-    disabled: keys.length > 0
+    id
   });
   React47.useEffect(() => {
     const listConfig = {
@@ -4907,7 +5004,7 @@ function SortableRoot_({
         const index = keys.findIndex((key) => key === id2);
         return renderOverlay?.(index) ?? null;
       },
-      acceptsFromList: acceptsFromList ?? (({ sourceListId, targetListId }) => sourceListId === targetListId),
+      acceptsFromList: acceptsFromList ?? (() => true),
       acceptsDrop: acceptsDrop2,
       getDropIndicator: (parameters) => {
         const { absolutePosition, active, over, sourceListId, targetListId } = parameters;
@@ -4947,19 +5044,11 @@ function SortableRoot_({
     () => ({
       keys,
       acceptsDrop: acceptsDrop2,
-      axis,
       listId: id,
       getDropTargetParentIndex,
-      activeDragContext: sharedDragProviderContexts?.activeDragContext ?? ActiveDragContext
+      activeDragContext: sharedDragProps?.activeDragContext ?? ActiveDragContext
     }),
-    [
-      keys,
-      acceptsDrop2,
-      axis,
-      id,
-      getDropTargetParentIndex,
-      sharedDragProviderContexts
-    ]
+    [keys, acceptsDrop2, id, getDropTargetParentIndex, sharedDragProps]
   );
   React47.useEffect(() => {
     if (containerRef) {
@@ -5069,7 +5158,7 @@ function ListViewEditableRowTitle({
   onKeyDown
 }) {
   const inputRef = useRef19(null);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element || !autoFocus) return;
     element.focus();
@@ -5393,7 +5482,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
       listRef.current?.scrollToItem(index);
     }
   }));
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
@@ -5483,7 +5572,9 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   onDragLeave,
   onDrop,
   renderEmptyState,
-  getDropTargetParentIndex
+  getDropTargetParentIndex,
+  sharedDragProps,
+  sortableId
 }, forwardedRef) {
   const handleClick = useCallback23(
     (event) => {
@@ -5607,11 +5698,13 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   const withSortable = (children) => sortable ? /* @__PURE__ */ React48.createElement(
     Sortable.Root,
     {
+      id: sortableId,
       onMoveItem,
       keys: ids,
       renderOverlay,
       acceptsDrop: acceptsDrop2,
-      getDropTargetParentIndex
+      getDropTargetParentIndex,
+      sharedDragProps
     },
     children
   ) : children;
@@ -5804,7 +5897,9 @@ var List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
-      dragIndicatorStyle
+      dragIndicatorStyle,
+      sortableId,
+      sharedDragProps
     } = props;
     const [internalHoveredId, setHoveredId] = useState23();
     const [internalRenamingId, setRenamingId] = useState23();
@@ -5865,6 +5960,8 @@ var List = memoGeneric(
         onMoveItem,
         renderEmptyState,
         getDropTargetParentIndex,
+        sharedDragProps,
+        sortableId,
         ...dropTargetProps,
         renderItem: (item, _, { isDragOverlay }) => {
           const id = getId(item);
@@ -6149,7 +6246,7 @@ function ColorSwatchControl(props) {
 import { DropdownChevronIcon as DropdownChevronIcon2 } from "@noya-app/noya-icons";
 import React55, {
   useCallback as useCallback25,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo23,
   useRef as useRef21,
@@ -6637,15 +6734,15 @@ var Combobox = memoGeneric(
     const { fieldId: id } = useLabel({
       fieldId: rest.id
     });
-    useEffect18(() => {
+    useEffect19(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
-    useEffect18(() => {
+    useEffect19(() => {
       comboboxState.setFilter(initialValueString);
     }, [comboboxState, initialValueString]);
     const { filter, selectedIndex, filteredItems } = state;
     const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
-    useEffect18(() => {
+    useEffect19(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
@@ -6858,7 +6955,7 @@ var Combobox = memoGeneric(
         comboboxState
       ]
     );
-    useEffect18(() => {
+    useEffect19(() => {
       if (!shouldBlur) return;
       if (document.activeElement !== ref.current) return;
       setShouldBlur(false);
@@ -6982,7 +7079,7 @@ import { getCurrentPlatform as getCurrentPlatform2, handleKeyboardEvent } from "
 import React57, {
   forwardRef as forwardRef21,
   useCallback as useCallback26,
-  useEffect as useEffect19,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo24,
   useRef as useRef22,
@@ -7061,7 +7158,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
   const { index, search } = state;
   const listRef = React57.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
-  useEffect19(() => {
+  useEffect20(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
   const results = useMemo24(
@@ -7082,7 +7179,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
   const setIndex = useCallback26((index2) => {
     setState((state2) => ({ ...state2, index: index2 }));
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     onHover?.(results[index]);
   }, [index, onHover, results]);
   const searchHeight = 31;
@@ -7857,14 +7954,14 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-import { useLayoutEffect as useLayoutEffect6, useMemo as useMemo26 } from "react";
+import { useLayoutEffect as useLayoutEffect7, useMemo as useMemo26 } from "react";
 function useObjectURL(object) {
   const objectURL = useMemo26(() => {
     if (object instanceof Blob) return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -11767,24 +11864,15 @@ function createSharedDrag() {
   const activeDragContext = React82.createContext(
     null
   );
-  const Provider3 = ({ children }) => /* @__PURE__ */ React82.createElement(
-    SharedDragProvider,
-    {
-      contexts: {
-        dragRegistrationContext,
-        activeDragContext
-      }
-    },
-    children
-  );
-  const dragProps = {
+  const sharedDragProps = {
     dragRegistrationContext,
     activeDragContext
   };
+  const Provider3 = ({ children }) => /* @__PURE__ */ React82.createElement(SharedDragProvider, { sharedDragProps }, children);
   return {
     Provider: Provider3,
-    Sortable: (props) => /* @__PURE__ */ React82.createElement(Sortable, { sharedDragProviderContexts: dragProps, ...props }),
-    props: dragProps
+    Sortable: (props) => /* @__PURE__ */ React82.createElement(Sortable, { sharedDragProps, ...props }),
+    props: sharedDragProps
   };
 }
 
@@ -11970,7 +12058,7 @@ import React88, {
 } from "react";
 
 // src/hooks/useWindowSize.tsx
-import { useEffect as useEffect20, useState as useState29 } from "react";
+import { useEffect as useEffect21, useState as useState29 } from "react";
 function useWindowSize() {
   const [size2, setSize] = useState29(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
@@ -11978,7 +12066,7 @@ function useWindowSize() {
       height: window.innerHeight
     }
   );
-  useEffect20(() => {
+  useEffect21(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -11990,10 +12078,10 @@ function useWindowSize() {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React86, { memo as memo36, useLayoutEffect as useLayoutEffect9, useRef as useRef26, useState as useState30 } from "react";
+import React86, { memo as memo36, useLayoutEffect as useLayoutEffect10, useRef as useRef26, useState as useState30 } from "react";
 
 // src/hooks/usePreservePanelSize.tsx
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef25 } from "react";
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef25 } from "react";
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
 var LEFT_SIDEBAR_ID = "editor-left-sidebar";
 var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
@@ -12001,7 +12089,7 @@ var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
   const layoutRef = useRef25();
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -12044,7 +12132,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (!layoutRef.current) return;
     const {
       windowWidth: oldWindowWidth,
@@ -12141,7 +12229,7 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
 }) {
   const portalContainer = useRef26(null);
   const [mounted, setMounted] = useState30(false);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (mounted) return;
     setMounted(true);
     handleChangeLayoutState({
@@ -12482,7 +12570,7 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-import { useState as useState32, useEffect as useEffect21 } from "react";
+import { useState as useState32, useEffect as useEffect22 } from "react";
 function useTheme() {
   const [theme, setTheme] = useState32("light");
   const checkTheme = () => {
@@ -12496,7 +12584,7 @@ function useTheme() {
         break;
     }
   };
-  useEffect21(() => {
+  useEffect22(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -12598,13 +12686,13 @@ function acceptsDrop({
     if (!allowSiblings) {
       return false;
     }
-    return defaultAcceptsDrop(
-      sourceIndexPath.at(-1),
-      targetIndexPath.at(-1),
+    return defaultAcceptsDrop({
+      sourceIndex: sourceIndexPath.at(-1),
+      targetIndex: targetIndexPath.at(-1),
       position,
-      "",
-      ""
-    );
+      sourceListId: "",
+      targetListId: ""
+    });
   }
   return true;
 }
@@ -13067,12 +13155,14 @@ export {
   colorForStringValues,
   colorFromString,
   colorSwatchSizeMap,
+  createDragItemKey,
   createSectionedMenu,
   createSharedDrag,
   cssVarNames,
   cssVars,
   cx,
   defaultAcceptsDrop,
+  dragItemKeySeparator,
   filterWithGroupedSections,
   fuzzyFilter,
   fuzzyScore,
@@ -13097,6 +13187,7 @@ export {
   mergeConflictingClassNames,
   moveTreeItem,
   normalizeListTargetIndex,
+  parseDragItemKey,
   popoverStyle,
   portalScopeDataSetName,
   portalScopePropName,