@noya-app/noya-designsystem 0.1.57 → 0.1.59

package/dist/index.js

@@ -163,6 +163,7 @@ __export(src_exports, {
   cssVars: () => cssVars,
   cx: () => cx,
   defaultAcceptsDrop: () => defaultAcceptsDrop,
+  dragItemKeySeparator: () => dragItemKeySeparator,
   filterWithGroupedSections: () => filterWithGroupedSections,
   fuzzyFilter: () => fuzzyFilter,
   fuzzyScore: () => fuzzyScore,
@@ -449,6 +450,9 @@ var import_react7 = require("react");
 // ../noya-react-utils/src/hooks/useIsMounted.ts
 var import_react8 = require("react");
 
+// ../noya-react-utils/src/hooks/useIsomorphicLayoutEffect.ts
+var React5 = __toESM(require("react"));
+
 // ../noya-react-utils/src/hooks/useLateReference.ts
 var import_react9 = require("react");
 
@@ -520,6 +524,18 @@ var import_react15 = require("react");
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
 var import_react16 = require("react");
+var noop2 = () => {
+};
+function useStableCallback(callback) {
+  const callbackRef = (0, import_react16.useRef)(callback || noop2);
+  (0, import_react16.useLayoutEffect)(() => {
+    callbackRef.current = callback || noop2;
+  }, [callback]);
+  return (0, import_react16.useCallback)(
+    (...args) => callbackRef.current(...args),
+    [callbackRef]
+  );
+}
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
 var import_react17 = require("react");
@@ -651,16 +667,16 @@ var RadixDropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_react35 = __toESM(require("react"));
 
 // src/contexts/PortalScopeContext.tsx
-var React5 = __toESM(require("react"));
-var PortalScopeContext = React5.createContext(void 0);
-var PortalScopeProvider = React5.memo(function PortalScopeProvider2({
+var React6 = __toESM(require("react"));
+var PortalScopeContext = React6.createContext(void 0);
+var PortalScopeProvider = React6.memo(function PortalScopeProvider2({
   children,
   portalScopeId
 }) {
-  return /* @__PURE__ */ React5.createElement(PortalScopeContext.Provider, { value: portalScopeId }, children);
+  return /* @__PURE__ */ React6.createElement(PortalScopeContext.Provider, { value: portalScopeId }, children);
 });
 function usePortalScopeId() {
-  return React5.useContext(PortalScopeContext) ?? "";
+  return React6.useContext(PortalScopeContext) ?? "";
 }
 var portalScopeDataSetName = "noyaPortalScope";
 var portalScopePropName = `data-noya-portal-scope`;
@@ -686,14 +702,14 @@ var import_react32 = __toESM(require("react"));
 
 // src/contexts/DesignSystemConfiguration.tsx
 var import_noya_keymap = require("@noya-app/noya-keymap");
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 
 // src/components/Toast.tsx
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
 var import_react21 = __toESM(require("react"));
 
 // src/components/IconButton.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 
 // src/components/Button.tsx
 var import_react20 = __toESM(require("react"));
@@ -763,20 +779,20 @@ function mergeConflictingClassNames(classNames, options) {
 
 // src/components/Icons.tsx
 var Icons = __toESM(require("@noya-app/noya-icons"));
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 function renderIcon(iconName) {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName];
-    return /* @__PURE__ */ React6.createElement(Icon, null);
+    return /* @__PURE__ */ React7.createElement(Icon, null);
   }
   return iconName;
 }
 
 // src/components/Spacer.tsx
-var React7 = __toESM(require("react"));
-var SpacerVertical = React7.forwardRef(
+var React8 = __toESM(require("react"));
+var SpacerVertical = React8.forwardRef(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "span",
       {
         className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
@@ -789,9 +805,9 @@ var SpacerVertical = React7.forwardRef(
     );
   }
 );
-var SpacerHorizontal = React7.forwardRef(
+var SpacerHorizontal = React8.forwardRef(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "span",
       {
         className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
@@ -812,7 +828,7 @@ var Spacer;
 
 // src/components/Tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 
 // src/components/Text.tsx
 var import_react19 = __toESM(require("react"));
@@ -908,13 +924,13 @@ var Italic = ({ children }) => /* @__PURE__ */ import_react19.default.createElem
 );
 
 // src/components/Tooltip.tsx
-var Tooltip = React9.memo(function Tooltip2({
+var Tooltip = React10.memo(function Tooltip2({
   children,
   content,
   sideOffset = 2
 }) {
   const portalScopeId = usePortalScopeId();
-  return /* @__PURE__ */ React9.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React9.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React9.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React9.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React10.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React10.createElement(
     TooltipPrimitive.Content,
     {
       ...portalScopeProps(portalScopeId),
@@ -1009,17 +1025,17 @@ var Button = (0, import_react20.forwardRef)(function Button2({
 var Button_default = Button;
 
 // src/components/IconButton.tsx
-var IconButton = React11.memo(
-  React11.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
+var IconButton = React12.memo(
+  React12.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const Icon = Icons[iconName];
-    const style2 = React11.useMemo(() => {
+    const style2 = React12.useMemo(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ React11.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React12.createElement(
       Icon,
       {
         color: color ?? (selected ? cssVars.colors.iconSelected : cssVars.colors.icon),
@@ -1517,25 +1533,25 @@ var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
 var import_react27 = __toESM(require("react"));
 
 // src/contexts/OpenPortalsContext.tsx
-var React17 = __toESM(require("react"));
-var OpenPortalsContext = React17.createContext({
+var React18 = __toESM(require("react"));
+var OpenPortalsContext = React18.createContext({
   hasOpenPortals: false
 });
-var OpenPortalControlsContext = React17.createContext({
+var OpenPortalControlsContext = React18.createContext({
   addOpenPortal: () => {
   },
   removeOpenPortal: () => {
   }
 });
-var OpenPortalsProvider = React17.memo(function OpenPortalsProvider2({
+var OpenPortalsProvider = React18.memo(function OpenPortalsProvider2({
   children
 }) {
-  const [openPortals, setOpenPortals] = React17.useState([]);
-  const value = React17.useMemo(
+  const [openPortals, setOpenPortals] = React18.useState([]);
+  const value = React18.useMemo(
     () => ({ hasOpenPortals: openPortals.length > 0 }),
     [openPortals]
   );
-  const controlsValue = React17.useMemo(
+  const controlsValue = React18.useMemo(
     () => ({
       addOpenPortal: (portal) => {
         setOpenPortals((prev) => [...prev, portal]);
@@ -1546,13 +1562,13 @@ var OpenPortalsProvider = React17.memo(function OpenPortalsProvider2({
     }),
     []
   );
-  return /* @__PURE__ */ React17.createElement(OpenPortalsContext.Provider, { value }, /* @__PURE__ */ React17.createElement(OpenPortalControlsContext.Provider, { value: controlsValue }, children));
+  return /* @__PURE__ */ React18.createElement(OpenPortalsContext.Provider, { value }, /* @__PURE__ */ React18.createElement(OpenPortalControlsContext.Provider, { value: controlsValue }, children));
 });
 function useHasOpenPortals() {
-  return React17.useContext(OpenPortalsContext).hasOpenPortals;
+  return React18.useContext(OpenPortalsContext).hasOpenPortals;
 }
 function useOpenPortalsControls() {
-  return React17.useContext(OpenPortalControlsContext);
+  return React18.useContext(OpenPortalControlsContext);
 }
 
 // src/components/Popover.tsx
@@ -1668,7 +1684,7 @@ var InputFieldContext = (0, import_react28.createContext)({
   endRef: null
 });
 var useInputFieldContext = () => (0, import_react28.useContext)(InputFieldContext);
-var noop2 = () => {
+var noop3 = () => {
 };
 var getFieldSpacing = ({
   endWidth = 0,
@@ -1918,7 +1934,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 }
     }
   );
 }
@@ -2380,30 +2396,30 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = React22.createContext({
+var DesignSystemConfigurationContext = React23.createContext({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = React22.memo(
+var DesignSystemConfigurationProvider = React23.memo(
   function DesignSystemConfigurationProvider2({
     children,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = React22.useState(platform ?? "key");
-    React22.useEffect(() => {
+    const [internalPlatform, setInternalPlatform] = React23.useState(platform ?? "key");
+    React23.useEffect(() => {
       if (platform !== void 0) return;
       if (typeof navigator !== "undefined") {
         setInternalPlatform((0, import_noya_keymap.getCurrentPlatform)(navigator));
       }
     }, [platform]);
-    const contextValue = React22.useMemo(
+    const contextValue = React23.useMemo(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ React22.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React22.createElement(OpenPortalsProvider, null, /* @__PURE__ */ React22.createElement(DialogProvider, null, /* @__PURE__ */ React22.createElement(ToastProvider, null, /* @__PURE__ */ React22.createElement(FloatingWindowProvider, null, children)))));
+    return /* @__PURE__ */ React23.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React23.createElement(OpenPortalsProvider, null, /* @__PURE__ */ React23.createElement(DialogProvider, null, /* @__PURE__ */ React23.createElement(ToastProvider, null, /* @__PURE__ */ React23.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  return React22.useContext(DesignSystemConfigurationContext);
+  return React23.useContext(DesignSystemConfigurationContext);
 }
 
 // src/utils/withSeparatorElements.ts
@@ -2864,16 +2880,16 @@ var ActionMenu = memoGeneric(function ActionMenu2({
 });
 
 // src/components/ActivityIndicator.tsx
-var React28 = __toESM(require("react"));
-var ActivityIndicator = React28.memo(function ActivityIndicator2({
+var React29 = __toESM(require("react"));
+var ActivityIndicator = React29.memo(function ActivityIndicator2({
   size: size2 = 16,
   opacity = 1,
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
   className
 }) {
-  const opacityStyle = React28.useMemo(() => ({ opacity }), [opacity]);
-  const dynamicStyles = React28.useMemo(
+  const opacityStyle = React29.useMemo(() => ({ opacity }), [opacity]);
+  const dynamicStyles = React29.useMemo(
     () => ({
       border: `2px solid ${trackColor}`,
       borderTopColor: color,
@@ -2882,13 +2898,13 @@ var ActivityIndicator = React28.memo(function ActivityIndicator2({
     }),
     [size2, color, trackColor]
   );
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       className: cx("flex justify-center items-center", className),
       style: opacityStyle
     },
-    /* @__PURE__ */ React28.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
+    /* @__PURE__ */ React29.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
   );
 });
 
@@ -3534,16 +3550,16 @@ var BreadcrumbSlash = () => {
 };
 
 // src/components/Checkbox.tsx
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var colorSchemeStyles = {
   normal: "text-text-subtle",
   primary: "text-primary",
   secondary: "text-secondary"
 };
-var Checkbox = React36.memo(
-  React36.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
+var Checkbox = React37.memo(
+  React37.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       "div",
       {
         className: cx(
@@ -3553,7 +3569,7 @@ var Checkbox = React36.memo(
         ),
         style: style2
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React37.createElement(
         "input",
         {
           ref,
@@ -3582,7 +3598,7 @@ var Checkbox = React36.memo(
           id
         }
       ),
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React37.createElement(
         "svg",
         {
           className: `
@@ -3602,7 +3618,7 @@ var Checkbox = React36.memo(
           xmlns: "http://www.w3.org/2000/svg",
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React37.createElement(
           "path",
           {
             d: "M3 6L4.5 7.5L8 4",
@@ -3621,7 +3637,7 @@ var import_noya_icons3 = require("@noya-app/noya-icons");
 var import_react45 = __toESM(require("react"));
 
 // src/hooks/useHover.ts
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -3651,13 +3667,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React37.useState(false);
-  const state = React37.useRef({
+  const [isHovered, setHovered] = React38.useState(false);
+  const state = React38.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React37.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React37.useMemo(
+  React38.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React38.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -4056,26 +4072,26 @@ var ContextMenu = memoGeneric(ContextMenuRoot);
 
 // src/components/ScrollArea.tsx
 var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
-var React41 = __toESM(require("react"));
-var ScrollArea = React41.memo(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = React41.useState(null);
-  return /* @__PURE__ */ React41.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React41.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React41.createElement(
+var React42 = __toESM(require("react"));
+var ScrollArea = React42.memo(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = React42.useState(null);
+  return /* @__PURE__ */ React42.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React42.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React42.createElement(
     RadixScrollArea.Viewport,
     {
       className: "w-full h-full [&>div]:block",
-      ref: React41.useCallback(
+      ref: React42.useCallback(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React41.createElement(
+  ), /* @__PURE__ */ React42.createElement(
     RadixScrollArea.Scrollbar,
     {
       orientation: "vertical",
       className: "scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
     },
-    /* @__PURE__ */ React41.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
+    /* @__PURE__ */ React42.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
   )));
 });
 
@@ -4572,7 +4588,7 @@ var Grid = memoGeneric(
 var import_react54 = __toESM(require("react"));
 
 // src/components/ListView.tsx
-var import_noya_utils8 = require("@noya-app/noya-utils");
+var import_noya_utils9 = require("@noya-app/noya-utils");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
 var import_react52 = __toESM(require("react"));
 var import_react_virtualized = require("react-virtualized");
@@ -4604,7 +4620,7 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/sorting/Sortable.tsx
 var import_core2 = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var React47 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
 
 // src/components/sorting/DragRegistration.tsx
 var import_react50 = __toESM(require("react"));
@@ -4644,11 +4660,14 @@ var AnyDragContext = import_react50.default.createContext(false);
 
 // src/components/sorting/SharedDragProvider.tsx
 var import_core = require("@dnd-kit/core");
-var React45 = __toESM(require("react"));
+var import_noya_geometry = require("@noya-app/noya-geometry");
+var import_noya_utils8 = require("@noya-app/noya-utils");
+var React46 = __toESM(require("react"));
 var import_react51 = require("react");
 var import_react_dom2 = require("react-dom");
 function SharedDragProvider({
   children,
+  onMoveItem,
   sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext
@@ -4662,14 +4681,14 @@ function SharedDragProvider({
     })
   );
   const mounted = useMounted();
-  const [dragState, setDragState] = React45.useState({
+  const [dragState, setDragState] = React46.useState({
     source: null,
     target: null,
     indicator: null
   });
   const { registerList, unregisterList, registeredLists } = useDragRegistrationManager();
-  const activatorEventRef = React45.useRef(null);
-  const handleDragStart = React45.useCallback(
+  const activatorEventRef = React46.useRef(null);
+  const handleDragStart = React46.useCallback(
     (event) => {
       activatorEventRef.current = event.activatorEvent;
       for (const [listId, list] of registeredLists) {
@@ -4691,7 +4710,7 @@ function SharedDragProvider({
     },
     [registeredLists]
   );
-  const handleDragMove = React45.useCallback(
+  const handleDragMove = React46.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -4714,7 +4733,8 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source]
   );
-  const handleDragEnd = React45.useCallback(
+  const stableOnMoveItem = useStableCallback(onMoveItem);
+  const handleDragEnd = React46.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -4739,17 +4759,22 @@ 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(
+  const contextValue = React46.useMemo(
     () => ({
       registerList,
       unregisterList
@@ -4757,19 +4782,19 @@ function SharedDragProvider({
     [registerList, unregisterList]
   );
   const activeList = dragState.source ? registeredLists.get(dragState.source.listId) : null;
-  const activeDragContextValue = React45.useMemo(
+  const activeDragContextValue = React46.useMemo(
     () => dragState,
     [dragState]
   );
   const collisionDetection = (0, import_react51.useMemo)(() => {
-    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(
+  return /* @__PURE__ */ React46.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React46.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React46.createElement(
     sharedDragProps.activeDragContext.Provider,
     {
       value: activeDragContextValue
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -4780,33 +4805,33 @@ function SharedDragProvider({
       },
       children,
       mounted && activeList?.renderOverlay && dragState.source && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ React45.createElement(import_core.DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
+        /* @__PURE__ */ React46.createElement(import_core.DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
         document.body
       )
     )
   )));
 }
 function useMounted() {
-  const [mounted, setMounted] = React45.useState(false);
-  React45.useEffect(() => {
+  const [mounted, setMounted] = React46.useState(false);
+  React46.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function withDragProvider(Component) {
   return function WithDragProvider(props) {
-    const anyDragContext = React45.useContext(AnyDragContext);
+    const anyDragContext = React46.useContext(AnyDragContext);
     if (!anyDragContext) {
-      return /* @__PURE__ */ React45.createElement(SharedDragProvider, null, /* @__PURE__ */ React45.createElement(Component, { ...props }));
+      return /* @__PURE__ */ React46.createElement(SharedDragProvider, null, /* @__PURE__ */ React46.createElement(Component, { ...props }));
     }
-    return /* @__PURE__ */ React45.createElement(Component, { ...props });
+    return /* @__PURE__ */ React46.createElement(Component, { ...props });
   };
 }
-var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
+var getItemFirstCollisionDetection = (registeredLists) => (parameters) => {
   const pointerCollisions = (0, import_core.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;
         }
@@ -4817,7 +4842,33 @@ var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
       return itemCollisions;
     }
   }
-  return pointerCollisions.length > 0 ? pointerCollisions : (0, import_core.closestCenter)(parameters);
+  const listCollision = pointerCollisions.at(0);
+  const nearestCenters = (0, import_core.closestCenter)(parameters);
+  if (parameters.pointerCoordinates && listCollision) {
+    const list = registeredLists.get(listCollision.id);
+    if (list) {
+      const pairs = (0, import_noya_utils8.windowsOf)(list.keys, 2);
+      for (const pair of pairs) {
+        const clientRects = pair.map(
+          (key) => parameters.droppableRects.get(key)
+        );
+        const merged = (0, import_noya_geometry.unionRects)(
+          ...clientRects.map((rect) => ({
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height
+          }))
+        );
+        if ((0, import_noya_geometry.rectContainsPoint)(merged, parameters.pointerCoordinates)) {
+          return nearestCenters.filter(
+            (center) => pair.some((id) => id === center.id)
+          );
+        }
+      }
+    }
+  }
+  return pointerCollisions;
 };
 function findDropTarget({
   activationPoint,
@@ -4852,14 +4903,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,
@@ -4898,11 +4949,15 @@ function findDropTarget({
 }
 
 // src/components/sorting/sorting.ts
-var React46 = __toESM(require("react"));
+var React47 = __toESM(require("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) {
@@ -4910,7 +4965,7 @@ var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = React46.createContext({
+var SortableItemContext = React47.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -4935,13 +4990,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";
   }
@@ -4950,16 +5005,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
@@ -4968,23 +5020,21 @@ 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 };
 }
 
 // src/components/sorting/Sortable.tsx
-var SortableItemContext2 = React47.createContext({
+var SortableItemContext2 = React48.createContext({
   acceptsDrop: defaultAcceptsDrop,
   listId: "",
   getDropTargetParentIndex: void 0,
@@ -4997,42 +5047,44 @@ function useSortableDropIndicator({
   acceptsDrop: acceptsDrop2,
   getDropTargetParentIndex
 }) {
-  const { activeDragContext } = React47.useContext(SortableItemContext2);
+  const { activeDragContext } = React48.useContext(SortableItemContext2);
   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,
   disabled,
   children
 }) {
-  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React47.useContext(SortableItemContext2);
+  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React48.useContext(SortableItemContext2);
   const dragItemKey = createDragItemKey(listId, id);
   const { attributes, listeners, setNodeRef, isDragging, index } = (0, import_sortable.useSortable)({
     id: dragItemKey,
     disabled
   });
-  const ref = React47.useCallback(
+  const ref = React48.useCallback(
     (node) => setNodeRef(node),
     [setNodeRef]
   );
@@ -5066,24 +5118,18 @@ function SortableRoot_({
   sharedDragProps,
   containerRef
 }) {
-  const defaultId = React47.useId();
+  const defaultId = React48.useId();
   const id = idProp ?? defaultId;
-  const keys = React47.useMemo(() => {
+  const keys = React48.useMemo(() => {
     return keysProp.map((key) => createDragItemKey(id, key));
   }, [keysProp, id]);
   const { registerList, unregisterList } = useDragRegistration(
     sharedDragProps?.dragRegistrationContext ?? DragRegistrationContext
   );
   const { setNodeRef: setDroppableRef } = (0, import_core2.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(() => {
+  React48.useEffect(() => {
     const listConfig = {
       id,
       keys,
@@ -5129,7 +5175,7 @@ function SortableRoot_({
     unregisterList,
     keys
   ]);
-  const contextValue = React47.useMemo(
+  const contextValue = React48.useMemo(
     () => ({
       keys,
       acceptsDrop: acceptsDrop2,
@@ -5139,12 +5185,12 @@ function SortableRoot_({
     }),
     [keys, acceptsDrop2, id, getDropTargetParentIndex, sharedDragProps]
   );
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     if (containerRef) {
       setDroppableRef(containerRef.current);
     }
   });
-  return /* @__PURE__ */ React47.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React48.createElement(
     import_sortable.SortableContext,
     {
       items: keys,
@@ -5161,11 +5207,11 @@ var Sortable_ = function Sortable_2({
   renderItem,
   ...rest
 }) {
-  const keys = React47.useMemo(
+  const keys = React48.useMemo(
     () => items.map(keyExtractor),
     [items, keyExtractor]
   );
-  const renderOverlay = React47.useCallback(
+  const renderOverlay = React48.useCallback(
     (index) => {
       return renderItem(
         items[index],
@@ -5185,14 +5231,14 @@ var Sortable_ = function Sortable_2({
     },
     [renderItem, items]
   );
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     SortableRoot,
     {
       ...rest,
       keys,
       renderOverlay: shouldRenderOverlay ? renderOverlay : void 0
     },
-    keys.map((key, index) => /* @__PURE__ */ React47.createElement(SortableItem, { key, id: key }, (props) => {
+    keys.map((key, index) => /* @__PURE__ */ React48.createElement(SortableItem, { key, id: key }, (props) => {
       return renderItem(items[index], props, { isOverlay: false });
     }))
   );
@@ -5852,7 +5898,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
             keyExtractor: getKey,
             renderItem: renderWrappedChild
           }
-        ) : (0, import_noya_utils8.range)(0, data.length).map(renderWrappedChild)
+        ) : (0, import_noya_utils9.range)(0, data.length).map(renderWrappedChild)
       )
     )
   ));
@@ -6336,7 +6382,7 @@ var import_noya_icons5 = require("@noya-app/noya-icons");
 var import_react60 = __toESM(require("react"));
 
 // src/utils/combobox.ts
-var import_noya_utils9 = require("@noya-app/noya-utils");
+var import_noya_utils10 = require("@noya-app/noya-utils");
 var import_react58 = require("react");
 
 // src/utils/fuzzyScorer.ts
@@ -6589,7 +6635,7 @@ var ComboboxState = class {
   }
 };
 function filterWithGroupedSections(items, query) {
-  const sections = (0, import_noya_utils9.chunkBy)(items, (_a, b) => isSelectableMenuItem(b));
+  const sections = (0, import_noya_utils10.chunkBy)(items, (_a, b) => isSelectableMenuItem(b));
   let result = [];
   let currentIndex = 0;
   const createExtraItem = (item, index) => ({
@@ -6606,7 +6652,7 @@ function filterWithGroupedSections(items, query) {
     };
   };
   for (const section of sections) {
-    const [sectionHeaders, selectableItems] = (0, import_noya_utils9.partition)(
+    const [sectionHeaders, selectableItems] = (0, import_noya_utils10.partition)(
       section.filter(
         (item) => item.type !== "submenu" && item.type !== "separator"
       ),
@@ -7522,10 +7568,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 var import_react66 = require("react");
-var Drawer = React61.memo(
-  React61.forwardRef(function Drawer2({
+var Drawer = React62.memo(
+  React62.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -7555,7 +7601,7 @@ var Drawer = React61.memo(
         return internalOpen;
       }
     }));
-    const inner = /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(
+    const inner = /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
       Dialog3.Overlay,
       {
         className: cx(
@@ -7563,7 +7609,7 @@ var Drawer = React61.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React61.createElement(
+    ), /* @__PURE__ */ React62.createElement(
       Dialog3.Content,
       {
         id,
@@ -7575,18 +7621,18 @@ var Drawer = React61.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React61.createElement(Dialog3.Title, null, title),
+      title && /* @__PURE__ */ React62.createElement(Dialog3.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React61.createElement(
+    return /* @__PURE__ */ React62.createElement(
       Dialog3.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React61.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React61.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React62.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React62.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
@@ -8002,25 +8048,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var React65 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 
 // src/contexts/ImageDataContext.tsx
-var React64 = __toESM(require("react"));
-var ImageDataContext = React64.createContext(
+var React65 = __toESM(require("react"));
+var ImageDataContext = React65.createContext(
   void 0
 );
-var ImageDataProvider = React64.memo(function ImageDataProvider2({
+var ImageDataProvider = React65.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React64.useMemo(
+  const contextValue = React65.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React64.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React65.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React64.useContext(ImageDataContext);
+  const value = React65.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -8086,10 +8132,10 @@ var dotsHorizontalSvg = (fillColor) => `
     <path d='M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z'></path>
   </svg>
 `;
-var Background = React65.memo(function Background2({
+var Background = React66.memo(function Background2({
   background: background2
 }) {
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     "span",
     {
       className: `${background2 ? `bg-[${background2}]` : "bg-input-background"} absolute inset-0`
@@ -8108,7 +8154,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React65.memo(
+var PatternPreviewBackground = React66.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -8117,7 +8163,7 @@ var PatternPreviewBackground = React65.memo(
     const image = useImageData(imageRef);
     const url = useObjectURL(image);
     const size2 = getPatternSizeAndPosition(fillType, tileScale);
-    const background2 = React65.useMemo(
+    const background2 = React66.useMemo(
       () => [
         size2,
         `url(${url})`,
@@ -8125,44 +8171,44 @@ var PatternPreviewBackground = React65.memo(
       ].join(" "),
       [fillType, size2, url]
     );
-    return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React66.createElement(Background, { background: background2 });
   }
 );
-var ColorPreviewBackground = React65.memo(function ColorPreviewBackground2({
+var ColorPreviewBackground = React66.memo(function ColorPreviewBackground2({
   color
 }) {
-  const background2 = React65.useMemo(
+  const background2 = React66.useMemo(
     () => sketchColorToRgbaString(color),
     [color]
   );
-  return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React66.createElement(Background, { background: background2 });
 });
-var GradientPreviewBackground = React65.memo(
+var GradientPreviewBackground = React66.memo(
   function GradientPreviewBackground2({
     gradient
   }) {
-    const background2 = React65.useMemo(
+    const background2 = React66.useMemo(
       () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
       [gradient.gradientType, gradient.stops]
     );
-    return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React66.createElement(Background, { background: background2 });
   }
 );
 var background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
   cssVars.colors.placeholderDots
 )}") no-repeat`;
-var FillPreviewBackground = React65.memo(function FillPreviewBackground2({
+var FillPreviewBackground = React66.memo(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ React65.createElement(Background, { background });
+  if (!value) return /* @__PURE__ */ React66.createElement(Background, { background });
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React65.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React66.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React65.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React66.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image) return null;
-      return /* @__PURE__ */ React65.createElement(
+      return /* @__PURE__ */ React66.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -8462,8 +8508,8 @@ var FloatingWindow = ({
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var React68 = __toESM(require("react"));
-var GradientPicker = React68.memo(function GradientPicker2({
+var React69 = __toESM(require("react"));
+var GradientPicker = React69.memo(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -8472,7 +8518,7 @@ var GradientPicker = React68.memo(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = React68.useMemo(
+  const colorModel = React69.useMemo(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: import_noya_colorpicker2.rgbaToHsva,
@@ -8481,30 +8527,30 @@ var GradientPicker = React68.memo(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = React68.useMemo(
+  const rgbaColor = React69.useMemo(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = React68.useCallback(
+  const handleChangeColor = React69.useCallback(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = React68.useCallback(
+  const handleAddGradientStop = React69.useCallback(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -8515,12 +8561,12 @@ var GradientPicker = React68.memo(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React68.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React68.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React68.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ React69.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React69.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ React69.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React69.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ React69.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React69.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
@@ -8558,25 +8604,25 @@ var InspectorContainer = (0, import_react72.memo)(
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var React70 = __toESM(require("react"));
-var LabeledElementView = React70.memo(function LabeledElementView2({
+var React71 = __toESM(require("react"));
+var LabeledElementView = React71.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React70.Children.toArray(children).flatMap(
-    (child) => React70.isValidElement(child) && child.type === React70.Fragment ? child.props.children : [child]
+  const elementIds = React71.Children.toArray(children).flatMap(
+    (child) => React71.isValidElement(child) && child.type === React71.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React70.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React71.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React70.useRef(null);
-  const refs = React70.useMemo(() => {
+  const containerRef = React71.useRef(null);
+  const refs = React71.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React70.createRef()])
+      serializedIds.split(",").map((id) => [id, React71.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React70.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React70.createElement(
+  const labelElements = React71.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React71.createElement(
       "span",
       {
         key: id,
@@ -8589,7 +8635,7 @@ var LabeledElementView = React70.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React70.useLayoutEffect(() => {
+  React71.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -8651,7 +8697,7 @@ var LabeledElementView = React70.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React70.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React70.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React70.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
+  return /* @__PURE__ */ React71.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React71.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React71.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
 });
 
 // src/components/LabeledField.tsx
@@ -11360,29 +11406,29 @@ function getPipelineResultLink(value) {
 }
 
 // src/components/Progress.tsx
-var import_noya_utils10 = require("@noya-app/noya-utils");
+var import_noya_utils11 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var React76 = __toESM(require("react"));
+var React77 = __toESM(require("react"));
 function Progress({
   value,
   variant = "normal",
   className
 }) {
-  const clampedValue = (0, import_noya_utils10.clamp)(value, 0, 100);
-  const transformStyles = React76.useMemo(
+  const clampedValue = (0, import_noya_utils11.clamp)(value, 0, 100);
+  const transformStyles = React77.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`
     }),
     [clampedValue]
   );
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     ProgressPrimitive.Root,
     {
       className: cx(`relative hidden bg-input-background h-[5px] `, className),
       style: { transform: "translateZ(0)" },
       value: clampedValue
     },
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(
       ProgressPrimitive.Indicator,
       {
         className: `${variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text"} transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full`,
@@ -11901,27 +11947,27 @@ var Slider = (0, import_react82.memo)(function Slider2({
 });
 
 // src/components/sorting/createSharedDrag.tsx
-var React82 = __toESM(require("react"));
+var React83 = __toESM(require("react"));
 function createSharedDrag() {
-  const dragRegistrationContext = React82.createContext(null);
-  const activeDragContext = React82.createContext(
+  const dragRegistrationContext = React83.createContext(null);
+  const activeDragContext = React83.createContext(
     null
   );
   const sharedDragProps = {
     dragRegistrationContext,
     activeDragContext
   };
-  const Provider3 = ({ children }) => /* @__PURE__ */ React82.createElement(SharedDragProvider, { sharedDragProps }, children);
+  const Provider3 = ({ children }) => /* @__PURE__ */ React83.createElement(SharedDragProvider, { sharedDragProps }, children);
   return {
     Provider: Provider3,
-    Sortable: (props) => /* @__PURE__ */ React82.createElement(Sortable, { sharedDragProps, ...props }),
+    Sortable: (props) => /* @__PURE__ */ React83.createElement(Sortable, { sharedDragProps, ...props }),
     props: sharedDragProps
   };
 }
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var React83 = __toESM(require("react"));
+var React84 = __toESM(require("react"));
 var Switch = function Switch2({
   id,
   value,
@@ -11933,7 +11979,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11952,7 +11998,7 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React83.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
+    /* @__PURE__ */ React84.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
   );
 };
 
@@ -12667,7 +12713,7 @@ function createSectionedMenu(...sections) {
 }
 
 // src/utils/moveTreeItem.ts
-var import_noya_utils11 = require("@noya-app/noya-utils");
+var import_noya_utils12 = require("@noya-app/noya-utils");
 function moveTreeItem({
   root,
   move,
@@ -12704,13 +12750,13 @@ function acceptsDrop({
   allowRecursion
 }) {
   if (!allowRecursion) {
-    const targetIsDescendantOfSource = (0, import_noya_utils11.isDeepEqual)(
+    const targetIsDescendantOfSource = (0, import_noya_utils12.isDeepEqual)(
       sourceIndexPath,
       targetIndexPath.slice(0, sourceIndexPath.length)
     );
     if (targetIsDescendantOfSource) return false;
   }
-  const areSiblings = (0, import_noya_utils11.isDeepEqual)(
+  const areSiblings = (0, import_noya_utils12.isDeepEqual)(
     sourceIndexPath.slice(0, -1),
     targetIndexPath.slice(0, -1)
   );
@@ -12718,13 +12764,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;
 }
@@ -12743,12 +12789,12 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 ];
 
 // src/components/DimensionInput.tsx
-var import_noya_utils12 = require("@noya-app/noya-utils");
-var React89 = __toESM(require("react"));
+var import_noya_utils13 = require("@noya-app/noya-utils");
+var React90 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React89.memo(function DimensionInput2({
+var DimensionInput = React90.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -12758,18 +12804,18 @@ var DimensionInput = React89.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React89.useCallback(
+  const handleNudgeValue = React90.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React89.useCallback(
+  const handleSetValue = React90.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React89.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React89.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React90.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React90.createElement(
     InputField2.NumberInput,
     {
-      value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
+      value: value === void 0 ? value : (0, import_noya_utils13.round)(value, 2),
       placeholder: value === void 0 ? placeholder : void 0,
       onNudge: handleNudgeValue,
       disabled,
@@ -13192,6 +13238,7 @@ function Toolbar({
   cssVars,
   cx,
   defaultAcceptsDrop,
+  dragItemKeySeparator,
   filterWithGroupedSections,
   fuzzyFilter,
   fuzzyScore,