@noya-app/noya-designsystem 0.1.57 → 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";
@@ -4510,11 +4525,14 @@ 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,
+  onMoveItem,
   sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext
@@ -4580,6 +4598,7 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source]
   );
+  const stableOnMoveItem = useStableCallback(onMoveItem);
   const handleDragEnd = React45.useCallback(
     (event) => {
       const { active, over } = event;
@@ -4605,15 +4624,20 @@ function SharedDragProvider({
       const sourceList = registeredLists.get(dropTarget.source.listId);
       const targetList = registeredLists.get(dropTarget.target.listId);
       if (!sourceList || !targetList) return;
-      sourceList.onMoveItem(
-        dropTarget.source.index,
-        dropTarget.target.index,
-        dropTarget.indicator,
-        dropTarget.source.listId,
-        dropTarget.target.listId
-      );
+      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);
     },
-    [registeredLists, dragState.source]
+    [registeredLists, dragState.source, stableOnMoveItem]
   );
   const contextValue = React45.useMemo(
     () => ({
@@ -4628,7 +4652,7 @@ function SharedDragProvider({
     [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(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React45.createElement(
     sharedDragProps.activeDragContext.Provider,
@@ -4668,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;
         }
@@ -4683,7 +4707,33 @@ 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,
@@ -4718,14 +4768,14 @@ function findDropTarget({
     return;
   }
   if (over.id === targetList.id) {
-    const canDrop = targetList.acceptsDrop(
-      source.index,
-      Math.max(0, targetList.keys.length - 1),
+    const canDrop = targetList.acceptsDrop({
+      sourceIndex: source.index,
+      targetIndex: Math.max(0, targetList.keys.length - 1),
       // Use last valid index or 0 for empty lists
-      "below",
-      sourceList.id,
-      targetList.id
-    );
+      position: "below",
+      sourceListId: sourceList.id,
+      targetListId: targetList.id
+    });
     if (canDrop) {
       return {
         source,
@@ -4768,7 +4818,11 @@ 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) {
@@ -4801,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";
   }
@@ -4816,16 +4870,13 @@ function validateDropIndicator({
     elementSize,
     offsetStart
   );
-  if (!isContained(elementStart, elementSize, offsetStart) && sourceListId === targetListId) {
-    return void 0;
-  }
-  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
@@ -4834,18 +4885,16 @@ function validateDropIndicator({
 function isContainedInMiddleThird(elementStart, elementSize, offsetStart) {
   return offsetStart >= elementStart + elementSize / 3 && offsetStart <= elementStart + elementSize * 2 / 3;
 }
-function isContained(elementStart, elementSize, offsetStart) {
-  return offsetStart >= elementStart && offsetStart <= elementStart + elementSize;
-}
 function getContainingHalf(elementStart, elementSize, offsetStart) {
   if (offsetStart < elementStart + elementSize / 2) return "above";
   return "below";
 }
+var dragItemKeySeparator = "-~-";
 function createDragItemKey(listId, itemId) {
-  return `${listId}-~-${itemId}`;
+  return `${listId}${dragItemKeySeparator}${itemId}`;
 }
 function parseDragItemKey(key) {
-  const [listId, itemId] = key.split("-~-");
+  const [listId, itemId] = key.split(dragItemKeySeparator);
   return { listId, itemId };
 }
 
@@ -4867,25 +4916,27 @@ function useSortableDropIndicator({
   const activeDrag = useActiveDrag(activeDragContext);
   const { source, target } = activeDrag;
   if (!source || !target) return;
-  const indicator = target.listId === listId && target.itemId === itemId ? activeDrag.indicator : void 0;
+  if (target.listId === listId && target.itemId === itemId) {
+    return activeDrag.indicator ?? void 0;
+  }
   const targetParentIndex = target.index === -1 ? void 0 : getDropTargetParentIndex?.(target.index);
-  const isValidParent = targetParentIndex === void 0 || targetParentIndex === -1 ? false : acceptsDrop2(
-    source.index,
-    targetParentIndex,
-    "inside",
-    source.listId,
-    target.listId
-  );
-  const overIdAcceptsDrop = target.index === -1 ? void 0 : acceptsDrop2(
-    source.index,
-    target.index,
-    "inside",
-    source.listId,
-    target.listId
-  );
+  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 showDragInsideIndicatorOnParent = !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
-  return indicator ?? (showDragInsideIndicatorOnParent ? "inside" : void 0);
+  const showIndicatorOnParent = !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
+  return showIndicatorOnParent ? "inside" : void 0;
 }
 function SortableItem({
   id,
@@ -4941,13 +4992,7 @@ function SortableRoot_({
     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 = {
@@ -5113,7 +5158,7 @@ function ListViewEditableRowTitle({
   onKeyDown
 }) {
   const inputRef = useRef19(null);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element || !autoFocus) return;
     element.focus();
@@ -5437,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,
@@ -6201,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,
@@ -6689,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);
       }
@@ -6910,7 +6955,7 @@ var Combobox = memoGeneric(
         comboboxState
       ]
     );
-    useEffect18(() => {
+    useEffect19(() => {
       if (!shouldBlur) return;
       if (document.activeElement !== ref.current) return;
       setShouldBlur(false);
@@ -7034,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,
@@ -7113,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(
@@ -7134,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;
@@ -7909,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;
@@ -12013,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 } : {
@@ -12021,7 +12066,7 @@ function useWindowSize() {
       height: window.innerHeight
     }
   );
-  useEffect20(() => {
+  useEffect21(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -12033,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";
@@ -12044,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}"]`
     );
@@ -12087,7 +12132,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (!layoutRef.current) return;
     const {
       windowWidth: oldWindowWidth,
@@ -12184,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({
@@ -12525,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 = () => {
@@ -12539,7 +12584,7 @@ function useTheme() {
         break;
     }
   };
-  useEffect21(() => {
+  useEffect22(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -12641,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;
 }
@@ -13117,6 +13162,7 @@ export {
   cssVars,
   cx,
   defaultAcceptsDrop,
+  dragItemKeySeparator,
   filterWithGroupedSections,
   fuzzyFilter,
   fuzzyScore,