@noya-app/noya-designsystem 0.1.55 → 0.1.57

package/dist/index.mjs

@@ -3668,7 +3668,7 @@ var Chip = memo14(
 );
 
 // src/components/Collection.tsx
-import React48 from "react";
+import React51 from "react";
 
 // src/components/Grid.tsx
 import React43, { useImperativeHandle as useImperativeHandle3, useRef as useRef17, useState as useState21 } from "react";
@@ -4410,22 +4410,22 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-import React47, { memo as memo20, useImperativeHandle as useImperativeHandle5, useRef as useRef20, useState as useState23 } from "react";
+import React50, { memo as memo19, useImperativeHandle as useImperativeHandle5, useRef as useRef20, useState as useState23 } from "react";
 
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React45, {
+import React48, {
   Children as Children3,
-  createContext as createContext10,
+  createContext as createContext11,
   forwardRef as forwardRef19,
   isValidElement as isValidElement3,
-  memo as memo19,
-  useCallback as useCallback22,
-  useContext as useContext10,
+  memo as memo18,
+  useCallback as useCallback23,
+  useContext as useContext11,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo19,
+  useMemo as useMemo21,
   useRef as useRef19
 } from "react";
 import { WindowScroller } from "react-virtualized";
@@ -4454,25 +4454,317 @@ function mergeEventHandlers(...handlerMaps) {
   );
 }
 
-// src/components/Sortable.tsx
+// src/components/sorting/Sortable.tsx
+import { useDroppable } from "@dnd-kit/core";
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import * as React47 from "react";
+
+// src/components/sorting/DragRegistration.tsx
+import React44 from "react";
+var DragRegistrationContext = React44.createContext(null);
+function useDragRegistration(context) {
+  const value = React44.useContext(context);
+  if (!value) {
+    throw new Error(
+      "useDragRegistration must be used within a DragRegistrationProvider"
+    );
+  }
+  return value;
+}
+function useDragRegistrationManager() {
+  const [registeredLists, setRegisteredLists] = React44.useState(/* @__PURE__ */ new Map());
+  const registerList = React44.useCallback((list) => {
+    setRegisteredLists((prev) => new Map(prev).set(list.id, list));
+  }, []);
+  const unregisterList = React44.useCallback((listId) => {
+    setRegisteredLists((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(listId);
+      return newMap;
+    });
+  }, []);
+  return { registerList, unregisterList, registeredLists };
+}
+var ActiveDragContext = React44.createContext(null);
+function useActiveDrag(context) {
+  const value = React44.useContext(context);
+  if (!value) {
+    throw new Error("useActiveDrag must be used within a ActiveDragProvider");
+  }
+  return value;
+}
+var AnyDragContext = React44.createContext(false);
+
+// src/components/sorting/SharedDragProvider.tsx
 import {
   closestCenter,
   DndContext,
   DragOverlay,
   PointerSensor,
-  useDndContext,
+  pointerWithin,
   useSensor,
   useSensors
 } from "@dnd-kit/core";
-import {
-  horizontalListSortingStrategy,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
-import * as React44 from "react";
-import { memo as memo18 } from "react";
+import * as React45 from "react";
+import { useMemo as useMemo19 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
+function SharedDragProvider({
+  children,
+  sharedDragProps = {
+    dragRegistrationContext: DragRegistrationContext,
+    activeDragContext: ActiveDragContext
+  }
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 4
+      }
+    })
+  );
+  const mounted = useMounted();
+  const [dragState, setDragState] = React45.useState({
+    source: null,
+    target: null,
+    indicator: null
+  });
+  const { registerList, unregisterList, registeredLists } = useDragRegistrationManager();
+  const activatorEventRef = React45.useRef(null);
+  const handleDragStart = React45.useCallback(
+    (event) => {
+      activatorEventRef.current = event.activatorEvent;
+      for (const [listId, list] of registeredLists) {
+        const itemIndex = list.keys.findIndex((key) => key === event.active.id);
+        if (itemIndex >= 0) {
+          const dragItem = {
+            itemId: event.active.id,
+            listId,
+            index: itemIndex
+          };
+          setDragState({
+            source: dragItem,
+            target: null,
+            indicator: null
+          });
+          break;
+        }
+      }
+    },
+    [registeredLists]
+  );
+  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 handleDragEnd = 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: null,
+        target: null,
+        indicator: null
+      });
+      activatorEventRef.current = null;
+      if (!dropTarget) return;
+      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
+      );
+    },
+    [registeredLists, dragState.source]
+  );
+  const contextValue = React45.useMemo(
+    () => ({
+      registerList,
+      unregisterList
+    }),
+    [registerList, unregisterList]
+  );
+  const activeList = dragState.source ? registeredLists.get(dragState.source.listId) : null;
+  const activeDragContextValue = React45.useMemo(
+    () => dragState,
+    [dragState]
+  );
+  const collisionDetection = useMemo19(() => {
+    return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
+  }, [registeredLists]);
+  return /* @__PURE__ */ React45.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React45.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React45.createElement(
+    sharedDragProps.activeDragContext.Provider,
+    {
+      value: activeDragContextValue
+    },
+    /* @__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);
+  React45.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted;
+}
+function withDragProvider(Component) {
+  return function WithDragProvider(props) {
+    const anyDragContext = React45.useContext(AnyDragContext);
+    if (!anyDragContext) {
+      return /* @__PURE__ */ React45.createElement(SharedDragProvider, null, /* @__PURE__ */ React45.createElement(Component, { ...props }));
+    }
+    return /* @__PURE__ */ React45.createElement(Component, { ...props });
+  };
+}
+var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
+  const pointerCollisions = pointerWithin(parameters);
+  if (pointerCollisions.length > 0) {
+    const itemCollisions = pointerCollisions.filter((collision) => {
+      for (const listId of registeredListIds) {
+        if (collision.id === listId) {
+          return false;
+        }
+      }
+      return true;
+    });
+    if (itemCollisions.length > 0) {
+      return itemCollisions;
+    }
+  }
+  return pointerCollisions.length > 0 ? pointerCollisions : closestCenter(parameters);
+};
+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(
+      source.index,
+      Math.max(0, targetList.keys.length - 1),
+      // Use last valid index or 0 for empty lists
+      "below",
+      sourceList.id,
+      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;
 };
@@ -4484,14 +4776,15 @@ var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = React44.createContext({
+var SortableItemContext = React46.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
   position: { x: 0, y: 0 },
   setActivatorEvent: () => {
   },
-  getDropTargetParentIndex: void 0
+  getDropTargetParentIndex: void 0,
+  listId: ""
 });
 function validateDropIndicator({
   acceptsDrop: acceptsDrop2,
@@ -4500,12 +4793,21 @@ function validateDropIndicator({
   overId,
   offsetStart,
   elementStart,
-  elementSize
+  elementSize,
+  sourceListId,
+  targetListId
 }) {
   const activeIndex = keys.findIndex((id) => id === activeId);
   const overIndex = keys.findIndex((id) => id === overId);
-  if (activeIndex === -1 || overIndex === -1) return void 0;
-  const acceptsDropInside = acceptsDrop2(activeIndex, overIndex, "inside");
+  if (overIndex === -1) return void 0;
+  if (activeIndex === -1 && sourceListId === targetListId) return void 0;
+  const acceptsDropInside = acceptsDrop2(
+    activeIndex,
+    overIndex,
+    "inside",
+    sourceListId,
+    targetListId
+  );
   if (isContainedInMiddleThird(elementStart, elementSize, offsetStart) && acceptsDropInside) {
     return "inside";
   }
@@ -4514,7 +4816,16 @@ function validateDropIndicator({
     elementSize,
     offsetStart
   );
-  const acceptedHalf = acceptsDrop2(activeIndex, overIndex, containingHalf);
+  if (!isContained(elementStart, elementSize, offsetStart) && sourceListId === targetListId) {
+    return void 0;
+  }
+  const acceptedHalf = acceptsDrop2(
+    activeIndex,
+    overIndex,
+    containingHalf,
+    sourceListId,
+    targetListId
+  );
   return acceptedHalf ? containingHalf : (
     // Lastly, check if inside but not middle third
     acceptsDropInside ? "inside" : void 0
@@ -4523,193 +4834,204 @@ 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";
 }
+function createDragItemKey(listId, itemId) {
+  return `${listId}-~-${itemId}`;
+}
+function parseDragItemKey(key) {
+  const [listId, itemId] = key.split("-~-");
+  return { listId, itemId };
+}
+
+// src/components/sorting/Sortable.tsx
+var SortableItemContext2 = React47.createContext({
+  acceptsDrop: defaultAcceptsDrop,
+  listId: "",
+  getDropTargetParentIndex: void 0,
+  activeDragContext: ActiveDragContext
+});
+function useSortableDropIndicator({
+  index,
+  itemId,
+  listId,
+  acceptsDrop: acceptsDrop2,
+  getDropTargetParentIndex
+}) {
+  const { activeDragContext } = React47.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;
+  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 thisItemIsTargetParent = targetParentIndex === index;
+  const showDragInsideIndicatorOnParent = !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
+  return indicator ?? (showDragInsideIndicatorOnParent ? "inside" : void 0);
+}
 function SortableItem({
   id,
   disabled,
   children
 }) {
-  const {
-    keys,
-    position,
-    acceptsDrop: acceptsDrop2,
-    setActivatorEvent,
-    axis,
-    getDropTargetParentIndex
-  } = React44.useContext(SortableItemContext);
-  const sortable = useSortable({ id, disabled });
-  const { activatorEvent } = useDndContext();
-  const {
-    active,
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging,
+  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({
     index,
-    activeIndex,
-    overIndex,
-    over
-  } = sortable;
-  if (activatorEvent) {
-    setActivatorEvent(activatorEvent);
-  }
-  const eventX = activatorEvent?.clientX ?? 0;
-  const eventY = activatorEvent?.clientY ?? 0;
-  const offsetLeft = eventX + position.x;
-  const offsetTop = eventY + position.y;
-  const ref = React44.useCallback((node) => setNodeRef(node), [setNodeRef]);
-  const parentIndex = overIndex === -1 ? void 0 : getDropTargetParentIndex?.(overIndex);
-  const isValidParent = parentIndex === void 0 || parentIndex === -1 ? false : acceptsDrop2(activeIndex, parentIndex, "inside");
-  const overIdAcceptsDrop = overIndex === -1 ? void 0 : acceptsDrop2(activeIndex, overIndex, "inside");
-  const relativeDropPosition = index >= 0 && index === overIndex && !isDragging && active && over ? validateDropIndicator({
+    itemId: dragItemKey,
+    listId,
     acceptsDrop: acceptsDrop2,
-    keys,
-    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
-  }) : void 0;
-  const showDragInsideIndicatorOnParent = !overIdAcceptsDrop && isValidParent && parentIndex === index;
+    getDropTargetParentIndex
+  });
   return children({
     ref,
     ...attributes,
     ...listeners,
-    relativeDropPosition: relativeDropPosition ?? (showDragInsideIndicatorOnParent ? "inside" : void 0)
+    relativeDropPosition,
+    style: {
+      opacity: isDragging ? 0.5 : 1
+    }
   });
 }
-function SortableRoot({
-  keys,
-  children,
+function SortableRoot_({
+  id: idProp,
+  keys: keysProp,
   onMoveItem,
   renderOverlay,
+  acceptsFromList,
   acceptsDrop: acceptsDrop2 = defaultAcceptsDrop,
   axis = "y",
-  getDropTargetParentIndex
+  children,
+  getDropTargetParentIndex,
+  sharedDragProps,
+  containerRef
 }) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 4
-      }
-    })
-  );
-  const [activeIndex, setActiveIndex] = React44.useState();
-  const activatorEvent = React44.useRef(null);
-  const [position, setPosition] = React44.useState({
-    x: 0,
-    y: 0
+  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(
+    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
   });
-  const setActivatorEvent = React44.useCallback((event) => {
-    activatorEvent.current = event;
-  }, []);
-  const handleDragStart = React44.useCallback(
-    (event) => {
-      const index = keys.findIndex((id) => id === event.active.id);
-      setActiveIndex(index);
-    },
-    [keys]
-  );
-  const handleDragMove = React44.useCallback((event) => {
-    setPosition({ ...event.delta });
-  }, []);
-  const handleDragEnd = React44.useCallback(
-    (event) => {
-      const { active, over } = event;
-      setActiveIndex(void 0);
-      if (over && active.id !== over.id) {
-        const oldIndex = keys.findIndex((id) => id === active.id);
-        const newIndex = keys.findIndex((id) => id === over.id);
-        if (oldIndex === -1 || newIndex === -1) return;
-        const eventX = activatorEvent.current?.clientX ?? 0;
-        const eventY = activatorEvent.current?.clientY ?? 0;
-        const offsetLeft = eventX + position.x;
-        const offsetTop = eventY + position.y;
-        const indicator = validateDropIndicator({
+  React47.useEffect(() => {
+    const listConfig = {
+      id,
+      keys,
+      onMoveItem: onMoveItem ?? (() => {
+      }),
+      renderOverlay: (id2) => {
+        const index = keys.findIndex((key) => key === id2);
+        return renderOverlay?.(index) ?? null;
+      },
+      acceptsFromList: acceptsFromList ?? (() => true),
+      acceptsDrop: acceptsDrop2,
+      getDropIndicator: (parameters) => {
+        const { absolutePosition, active, over, sourceListId, targetListId } = parameters;
+        const offsetStart = axis === "x" ? absolutePosition.x : absolutePosition.y;
+        const elementStart = axis === "x" ? over.rect.left : over.rect.top;
+        const elementSize = axis === "x" ? over.rect.width : over.rect.height;
+        const relativeDropPosition = validateDropIndicator({
           acceptsDrop: acceptsDrop2,
           keys,
           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
+          offsetStart,
+          elementStart,
+          elementSize,
+          sourceListId,
+          targetListId
         });
-        if (!indicator) return;
-        onMoveItem?.(oldIndex, newIndex, indicator);
+        return relativeDropPosition;
       }
-    },
-    [acceptsDrop2, axis, keys, onMoveItem, position.x, position.y]
+    };
+    registerList(listConfig);
+    return () => {
+      unregisterList(id);
+    };
+  }, [
+    id,
+    onMoveItem,
+    renderOverlay,
+    acceptsFromList,
+    acceptsDrop2,
+    axis,
+    registerList,
+    unregisterList,
+    keys
+  ]);
+  const contextValue = React47.useMemo(
+    () => ({
+      keys,
+      acceptsDrop: acceptsDrop2,
+      listId: id,
+      getDropTargetParentIndex,
+      activeDragContext: sharedDragProps?.activeDragContext ?? ActiveDragContext
+    }),
+    [keys, acceptsDrop2, id, getDropTargetParentIndex, sharedDragProps]
   );
-  const [mounted, setMounted] = React44.useState(false);
-  React44.useEffect(() => {
-    setMounted(true);
-  }, []);
-  return /* @__PURE__ */ React44.createElement(
-    SortableItemContext.Provider,
+  React47.useEffect(() => {
+    if (containerRef) {
+      setDroppableRef(containerRef.current);
+    }
+  });
+  return /* @__PURE__ */ React47.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React47.createElement(
+    SortableContext,
     {
-      value: React44.useMemo(
-        () => ({
-          keys,
-          acceptsDrop: acceptsDrop2,
-          position,
-          setActivatorEvent,
-          axis,
-          getDropTargetParentIndex
-        }),
-        [
-          acceptsDrop2,
-          axis,
-          getDropTargetParentIndex,
-          keys,
-          position,
-          setActivatorEvent
-        ]
-      )
+      items: keys,
+      strategy: axis === "x" ? horizontalListSortingStrategy : verticalListSortingStrategy
     },
-    /* @__PURE__ */ React44.createElement(
-      DndContext,
-      {
-        sensors,
-        collisionDetection: closestCenter,
-        onDragStart: handleDragStart,
-        onDragMove: handleDragMove,
-        onDragEnd: handleDragEnd
-      },
-      /* @__PURE__ */ React44.createElement(
-        SortableContext,
-        {
-          items: keys,
-          strategy: axis === "x" ? horizontalListSortingStrategy : verticalListSortingStrategy
-        },
-        children
-      ),
-      mounted && renderOverlay && createPortal2(
-        /* @__PURE__ */ React44.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
-        document.body
-      )
-    )
-  );
+    children
+  ));
 }
-var SortableSubcomponents = {
-  Root: memo18(SortableRoot),
-  Item: memoGeneric(SortableItem)
-};
-var SortableComponent = memoGeneric(function Sortable(props) {
-  const {
-    renderItem,
-    items,
-    keyExtractor,
-    shouldRenderOverlay = true,
-    ...rest
-  } = props;
-  const keys = React44.useMemo(
+var SortableRoot = withDragProvider(SortableRoot_);
+var Sortable_ = function Sortable_2({
+  items,
+  keyExtractor,
+  shouldRenderOverlay = true,
+  renderItem,
+  ...rest
+}) {
+  const keys = React47.useMemo(
     () => items.map(keyExtractor),
     [items, keyExtractor]
   );
-  const renderOverlay = React44.useCallback(
+  const renderOverlay = React47.useCallback(
     (index) => {
       return renderItem(
         items[index],
@@ -4729,32 +5051,31 @@ var SortableComponent = memoGeneric(function Sortable(props) {
     },
     [renderItem, items]
   );
-  return /* @__PURE__ */ React44.createElement(
-    SortableSubcomponents.Root,
+  return /* @__PURE__ */ React47.createElement(
+    SortableRoot,
     {
       ...rest,
       keys,
       renderOverlay: shouldRenderOverlay ? renderOverlay : void 0
     },
-    keys.map((key, index) => /* @__PURE__ */ React44.createElement(SortableSubcomponents.Item, { key, id: key }, (props2) => {
-      return renderItem(
-        items[index],
-        props2,
-        { isOverlay: false }
-      );
+    keys.map((key, index) => /* @__PURE__ */ React47.createElement(SortableItem, { key, id: key }, (props) => {
+      return renderItem(items[index], props, { isOverlay: false });
     }))
   );
+};
+var Sortable = Object.assign(Sortable_, {
+  Root: SortableRoot,
+  Item: SortableItem
 });
-var Sortable2 = Object.assign(SortableComponent, SortableSubcomponents);
 
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
-var ListViewDraggingContext = createContext10({
+var ListViewDraggingContext = createContext11({
   indentation: 12
 });
 ListViewDraggingContext.displayName = "ListViewDraggingContext";
-var ListRowContext = createContext10({
+var ListRowContext = createContext11({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -4772,7 +5093,7 @@ var ListViewRowTitle = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ React45.createElement(
+}) => /* @__PURE__ */ React48.createElement(
   "span",
   {
     className: cx(
@@ -4800,7 +5121,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 1);
   }, [autoFocus]);
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React48.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -4839,7 +5160,7 @@ var RowContainer = forwardRef19(
     "aria-selected": ariaSelected,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React45.createElement(
+    return /* @__PURE__ */ React48.createElement(
       "div",
       {
         ref,
@@ -4917,7 +5238,7 @@ var ListViewDragIndicatorElement = forwardRef19(
     style: style2,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React45.createElement(
+    return /* @__PURE__ */ React48.createElement(
       "div",
       {
         ref,
@@ -4984,12 +5305,12 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = useContext10(ListRowContext);
+  } = useContext11(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragOverlay } = useContext10(ListViewDraggingContext);
-  const handlePress = useCallback22(
+  const { indentation, isDragOverlay } = useContext11(ListViewDraggingContext);
+  const handlePress = useCallback23(
     (event) => {
       event.preventDefault();
       if (event.button !== 0) return;
@@ -4997,14 +5318,14 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = useCallback22(
+  const handleDoubleClick = useCallback23(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const mergedStyle = useMemo19(() => {
+  const mergedStyle = useMemo21(() => {
     return isDragOverlay ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
@@ -5018,7 +5339,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
   }, ref) => {
     const Component = RowContainer;
     const relativeDropPosition = testRelativeDropPosition ?? relativeDropPositionProp;
-    const element = /* @__PURE__ */ React45.createElement(
+    const element = /* @__PURE__ */ React48.createElement(
       Component,
       {
         ref,
@@ -5052,7 +5373,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
         className,
         $clickable: !!onPress
       },
-      relativeDropPosition && /* @__PURE__ */ React45.createElement(
+      relativeDropPosition && /* @__PURE__ */ React48.createElement(
         ListViewDragIndicatorElement,
         {
           key: relativeDropPosition,
@@ -5067,11 +5388,11 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
           }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ React48.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ React45.createElement(
+      return /* @__PURE__ */ React48.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -5084,23 +5405,23 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ React45.createElement(Sortable2.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ React48.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
       sortableProps,
       composeRefs2(sortableRef, forwardedRef)
     ));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = createContext10(
+var RenderItemContext = createContext11(
   () => null
 );
 RenderItemContext.displayName = "RenderItemContext";
-var VirtualizedListRow = memo19(function VirtualizedListRow2({
+var VirtualizedListRow = memo18(function VirtualizedListRow2({
   index,
   style: style2
 }) {
-  const renderItem = useContext10(RenderItemContext);
-  return /* @__PURE__ */ React45.createElement("div", { key: index, style: style2 }, renderItem(index));
+  const renderItem = useContext11(RenderItemContext);
+  return /* @__PURE__ */ React48.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
   size: size2,
@@ -5123,7 +5444,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = useMemo19(
+  const listStyle = useMemo21(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -5131,18 +5452,18 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React45.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React48.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React48.createElement(
     WindowScroller,
     {
       scrollElement,
-      style: useMemo19(() => ({ flex: "1 1 auto" }), [])
+      style: useMemo21(() => ({ flex: "1 1 auto" }), [])
     },
-    useCallback22(
+    useCallback23(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React45.createElement("div", { ref: registerChild }, /* @__PURE__ */ React45.createElement(
+      }) => /* @__PURE__ */ React48.createElement("div", { ref: registerChild }, /* @__PURE__ */ React48.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -5172,7 +5493,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     )
   ));
 });
-var VirtualizedList = memo19(
+var VirtualizedList = memo18(
   VirtualizedListInner
 );
 var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
@@ -5206,9 +5527,11 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   onDragLeave,
   onDrop,
   renderEmptyState,
-  getDropTargetParentIndex
+  getDropTargetParentIndex,
+  sharedDragProps,
+  sortableId
 }, forwardedRef) {
-  const handleClick = useCallback22(
+  const handleClick = useCallback23(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -5218,11 +5541,11 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     [onPress]
   );
-  const renderChild = useCallback22(
+  const renderChild = useCallback23(
     (index) => renderItem(data[index], index, { isDragOverlay: false }),
     [data, renderItem]
   );
-  const defaultContextValue = useMemo19(
+  const defaultContextValue = useMemo21(
     () => ({
       colorScheme,
       marginType: "none",
@@ -5247,7 +5570,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
       sectionHeaderVariant
     ]
   );
-  const getItemContextValue = useCallback22(
+  const getItemContextValue = useCallback23(
     (i) => {
       if (variant === "bare" || variant === "normal")
         return defaultContextValue;
@@ -5309,37 +5632,39 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
       gap
     ]
   );
-  const draggingContextOverlayValue = useMemo19(
+  const draggingContextOverlayValue = useMemo21(
     () => ({ indentation, isDragOverlay: true }),
     [indentation]
   );
-  const renderOverlay = useCallback22(
-    (index) => /* @__PURE__ */ React45.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React45.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
+  const renderOverlay = useCallback23(
+    (index) => /* @__PURE__ */ React48.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React48.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = useCallback22(
+  const renderWrappedChild = useCallback23(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
       if (!contextValue || !isValidElement3(current)) return null;
-      return /* @__PURE__ */ React45.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ React48.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = useMemo19(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ React45.createElement(
-    Sortable2.Root,
+  const ids = useMemo21(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children) => sortable ? /* @__PURE__ */ React48.createElement(
+    Sortable.Root,
     {
+      id: sortableId,
       onMoveItem,
       keys: ids,
       renderOverlay,
       acceptsDrop: acceptsDrop2,
-      getDropTargetParentIndex
+      getDropTargetParentIndex,
+      sharedDragProps
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React45.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = useCallback22(
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React48.createElement(ScrollArea, null, children) : children(null);
+  const getItemHeight = useCallback23(
     (index) => {
       const child = getItemContextValue(index);
       const height = child?.isSectionHeader && child.sectionHeaderVariant === "label" ? SECTION_HEADER_LABEL_HEIGHT : ROW_HEIGHT;
@@ -5347,13 +5672,13 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     [getItemContextValue]
   );
-  const getKey = useCallback22(
+  const getKey = useCallback23(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = useMemo19(() => ({ indentation }), [indentation]);
-  const gapStyle = useMemo19(() => ({ gap: `${gap}px` }), [gap]);
-  return /* @__PURE__ */ React45.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React45.createElement(
+  const draggingContextValue = useMemo21(() => ({ indentation }), [indentation]);
+  const gapStyle = useMemo21(() => ({ gap: `${gap}px` }), [gap]);
+  return /* @__PURE__ */ React48.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React48.createElement(
     "div",
     {
       id,
@@ -5382,7 +5707,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     data.length === 0 && renderEmptyState ? renderEmptyState() : withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React45.createElement(
+        virtualized ? /* @__PURE__ */ React48.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -5400,39 +5725,39 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
 });
 var ListViewRoot = memoGeneric(ListViewRootInner);
 var ChildrenListViewInner = forwardRef19(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = useMemo19(
+  const items = useMemo21(
     () => Children3.toArray(children).flatMap(
       (child) => isValidElement3(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React48.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: useCallback22(
+      keyExtractor: useCallback23(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: useCallback22((item) => item, [])
+      renderItem: useCallback23((item) => item, [])
     }
   );
 });
-var ChildrenListView = memo19(ChildrenListViewInner);
+var ChildrenListView = memo18(ChildrenListViewInner);
 var SimpleListViewInner = forwardRefGeneric(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ React45.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React48.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ React45.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React48.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
 var SimpleListView = memoGeneric(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = memo19(ListViewRowTitle);
-  ListView2.EditableRowTitle = memo19(ListViewEditableRowTitle);
+  ListView2.RowTitle = memo18(ListViewRowTitle);
+  ListView2.EditableRowTitle = memo18(ListViewEditableRowTitle);
   ListView2.Row = memoGeneric(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
@@ -5449,7 +5774,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-import React46, { useCallback as useCallback23, useContext as useContext11 } from "react";
+import React49, { useCallback as useCallback24, useContext as useContext12 } from "react";
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
@@ -5458,15 +5783,15 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = useContext11(ListView.RowContext);
-  const handleClickChevron = useCallback23(
+  const { expandable } = useContext12(ListView.RowContext);
+  const handleClickChevron = useCallback24(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React46.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React46.createElement(React46.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React49.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React49.createElement(React49.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React49.createElement(
     IconButton,
     {
       className: chevronClassName,
@@ -5474,7 +5799,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React46.createElement(React46.Fragment, null, renderIcon(icon), /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React49.createElement(React49.Fragment, null, renderIcon(icon), /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -5527,7 +5852,9 @@ var List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
-      dragIndicatorStyle
+      dragIndicatorStyle,
+      sortableId,
+      sharedDragProps
     } = props;
     const [internalHoveredId, setHoveredId] = useState23();
     const [internalRenamingId, setRenamingId] = useState23();
@@ -5566,7 +5893,7 @@ var List = memoGeneric(
         setRenamingId(id);
       }
     }));
-    return /* @__PURE__ */ React47.createElement(
+    return /* @__PURE__ */ React50.createElement(
       ViewComponent.Root,
       {
         variant: "bare",
@@ -5588,6 +5915,8 @@ var List = memoGeneric(
         onMoveItem,
         renderEmptyState,
         getDropTargetParentIndex,
+        sharedDragProps,
+        sortableId,
         ...dropTargetProps,
         renderItem: (item, _, { isDragOverlay }) => {
           const id = getId(item);
@@ -5609,7 +5938,7 @@ var List = memoGeneric(
               handleSelect(id);
             }
           };
-          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React47.createElement(
+          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React50.createElement(
             ActionMenu,
             {
               menuItems,
@@ -5625,7 +5954,7 @@ var List = memoGeneric(
           ));
           const end = action || detailPosition === "end" && renderDetail?.(item, isSelected);
           const below = detailPosition === "below" && renderDetail?.(item, isSelected);
-          return /* @__PURE__ */ React47.createElement(
+          return /* @__PURE__ */ React50.createElement(
             ViewComponent.Row,
             {
               id,
@@ -5673,12 +6002,12 @@ var List = memoGeneric(
               },
               dragIndicatorStyle
             },
-            /* @__PURE__ */ React47.createElement(
+            /* @__PURE__ */ React50.createElement(
               "div",
               {
                 className: cx("flex flex-1 items-center px-2", rowGapMap[size2])
               },
-              thumbnail && /* @__PURE__ */ React47.createElement(
+              thumbnail && /* @__PURE__ */ React50.createElement(
                 "div",
                 {
                   className: cx(
@@ -5691,7 +6020,7 @@ var List = memoGeneric(
                 },
                 thumbnail
               ),
-              /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ React47.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ React47.createElement(
+              /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ React50.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ React50.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ React50.createElement(
                 ViewComponent.EditableRowTitle,
                 {
                   value: getName(item),
@@ -5706,7 +6035,7 @@ var List = memoGeneric(
                     e.stopPropagation();
                   }
                 }
-              ) : /* @__PURE__ */ React47.createElement(
+              ) : /* @__PURE__ */ React50.createElement(
                 ViewComponent.RowTitle,
                 {
                   className: cx(
@@ -5715,8 +6044,8 @@ var List = memoGeneric(
                   )
                 },
                 getName(item)
-              )), end && detailPosition === "end" && /* @__PURE__ */ React47.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React47.createElement(DetailContainer, { selected: isSelected }, below)),
-              end && detailPosition === "below" && /* @__PURE__ */ React47.createElement(DetailContainer, { selected: isSelected }, end)
+              )), end && detailPosition === "end" && /* @__PURE__ */ React50.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React50.createElement(DetailContainer, { selected: isSelected }, below)),
+              end && detailPosition === "below" && /* @__PURE__ */ React50.createElement(DetailContainer, { selected: isSelected }, end)
             )
           );
         }
@@ -5724,11 +6053,11 @@ var List = memoGeneric(
     );
   })
 );
-var DetailContainer = memo20(function DetailContainer2({
+var DetailContainer = memo19(function DetailContainer2({
   children,
   selected
 }) {
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React50.createElement(
     "div",
     {
       className: cx("flex items-center gap-2", selected && "text-primary"),
@@ -5773,11 +6102,11 @@ var fontStyleMap = {
 // src/components/Collection.tsx
 var Collection = forwardRefGeneric(function Collection2(props, ref) {
   const { viewType, ...rest } = props;
-  return viewType === "grid" ? /* @__PURE__ */ React48.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React48.createElement(List, { ref, ...rest });
+  return viewType === "grid" ? /* @__PURE__ */ React51.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React51.createElement(List, { ref, ...rest });
 });
 
 // src/components/ColorSwatch.tsx
-import React49, { forwardRef as forwardRef20 } from "react";
+import React52, { forwardRef as forwardRef20 } from "react";
 var colorSwatchSizeMap = {
   xsmall: 21,
   small: 27,
@@ -5786,7 +6115,7 @@ var colorSwatchSizeMap = {
 };
 var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "small", checked, style: style2, ...props }, ref) {
   const sizePx = colorSwatchSizeMap[size2];
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React52.createElement(
     "button",
     {
       ...props,
@@ -5807,7 +6136,7 @@ var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "sma
 
 // src/components/ColorSwatchControl.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React50, { useMemo as useMemo20 } from "react";
+import React53, { useMemo as useMemo22 } from "react";
 function ColorSwatchControl(props) {
   const {
     options,
@@ -5822,7 +6151,7 @@ function ColorSwatchControl(props) {
     id,
     style: style2
   } = props;
-  const styles3 = useMemo20(() => {
+  const styles3 = useMemo22(() => {
     return {
       display: "grid",
       gridTemplateColumns: `repeat(auto-fill, minmax(${colorSwatchSizeMap[size2]}px, 1fr))`,
@@ -5830,8 +6159,8 @@ function ColorSwatchControl(props) {
       ...style2
     };
   }, [size2, style2]);
-  const content = /* @__PURE__ */ React50.createElement("div", { className, id, style: styles3 }, options.map((option) => {
-    const item = /* @__PURE__ */ React50.createElement(
+  const content = /* @__PURE__ */ React53.createElement("div", { className, id, style: styles3 }, options.map((option) => {
+    const item = /* @__PURE__ */ React53.createElement(
       ColorSwatch,
       {
         key: option,
@@ -5844,7 +6173,7 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React53.createElement(
       ToggleGroupPrimitive.Item,
       {
         asChild: true,
@@ -5855,7 +6184,7 @@ function ColorSwatchControl(props) {
       item
     );
   }));
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React53.createElement(
     ToggleGroupPrimitive.Root,
     {
       type: "single",
@@ -5870,11 +6199,11 @@ function ColorSwatchControl(props) {
 
 // src/components/Combobox.tsx
 import { DropdownChevronIcon as DropdownChevronIcon2 } from "@noya-app/noya-icons";
-import React52, {
-  useCallback as useCallback24,
-  useEffect as useEffect17,
+import React55, {
+  useCallback as useCallback25,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo21,
+  useMemo as useMemo23,
   useRef as useRef21,
   useState as useState24
 } from "react";
@@ -6212,7 +6541,7 @@ function useComboboxState(state) {
 
 // src/components/ComboboxMenu.tsx
 import { CheckIcon } from "@noya-app/noya-icons";
-import React51 from "react";
+import React54 from "react";
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
     items,
@@ -6224,7 +6553,7 @@ var ComboboxMenu = memoGeneric(
     indented,
     iconPosition = "right"
   }, forwardedRef) {
-    return /* @__PURE__ */ React51.createElement(
+    return /* @__PURE__ */ React54.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -6240,7 +6569,7 @@ var ComboboxMenu = memoGeneric(
         style: style2,
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React51.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React51.createElement(
+            return /* @__PURE__ */ React54.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React54.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -6251,7 +6580,7 @@ var ComboboxMenu = memoGeneric(
             item: typeof item.title === "string" ? item.title : item.value,
             itemScore: item
           });
-          return /* @__PURE__ */ React51.createElement(
+          return /* @__PURE__ */ React54.createElement(
             ListView.Row,
             {
               key: item.value,
@@ -6264,12 +6593,12 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ React51.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React51.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React51.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React51.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React51.createElement(
+            /* @__PURE__ */ React54.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React54.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React54.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React54.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React54.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
               }
-            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React51.createElement(React51.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React51.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ React51.createElement(
+            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React54.createElement(React54.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React54.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ React54.createElement(
               "span",
               {
                 key: `${item.value}-token-${j}`,
@@ -6280,7 +6609,7 @@ var ComboboxMenu = memoGeneric(
               },
               token.text
             ))),
-            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React51.createElement(React51.Fragment, null, item.shortcut ? /* @__PURE__ */ React51.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
+            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React54.createElement(React54.Fragment, null, item.shortcut ? /* @__PURE__ */ React54.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
           );
         }
       }
@@ -6307,7 +6636,7 @@ var Combobox = memoGeneric(
     onDeleteWhenEmpty,
     ...rest
   }, forwardedRef) {
-    const props = useMemo21(() => {
+    const props = useMemo23(() => {
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
@@ -6360,20 +6689,20 @@ var Combobox = memoGeneric(
     const { fieldId: id } = useLabel({
       fieldId: rest.id
     });
-    useEffect17(() => {
+    useEffect18(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
-    useEffect17(() => {
+    useEffect18(() => {
       comboboxState.setFilter(initialValueString);
     }, [comboboxState, initialValueString]);
     const { filter, selectedIndex, filteredItems } = state;
     const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
-    useEffect17(() => {
+    useEffect18(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const handleBlur = useCallback24(() => {
+    const handleBlur = useCallback25(() => {
       ref.current?.blur();
       comboboxState.reset(initialValueString);
       if (props.mode === "string") {
@@ -6392,7 +6721,7 @@ var Combobox = memoGeneric(
       }
       setIsFocused(false);
     }, [filter, initialValueString, props, state, comboboxState]);
-    const handleFocus = useCallback24(
+    const handleFocus = useCallback25(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
@@ -6406,7 +6735,7 @@ var Combobox = memoGeneric(
       },
       [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
-    const handleUpdateSelection = useCallback24(
+    const handleUpdateSelection = useCallback25(
       (item) => {
         if (item.type !== void 0) return;
         const selectedItem = comboboxState.selectCurrentItem(item);
@@ -6422,7 +6751,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleIndexChange = useCallback24(
+    const handleIndexChange = useCallback25(
       (index) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
@@ -6438,7 +6767,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleChange = useCallback24(
+    const handleChange = useCallback25(
       (value) => {
         if (readOnly) return;
         comboboxState.setFilter(value);
@@ -6453,7 +6782,7 @@ var Combobox = memoGeneric(
       },
       [readOnly, props, comboboxState]
     );
-    const handleKeyDown = useCallback24(
+    const handleKeyDown = useCallback25(
       (event) => {
         let handled = false;
         const item = comboboxState.getSelectedItem();
@@ -6561,7 +6890,7 @@ var Combobox = memoGeneric(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    const handleChevronClick = useCallback24(
+    const handleChevronClick = useCallback25(
       (event) => {
         event.stopPropagation();
         if (shouldShowMenu) {
@@ -6581,14 +6910,14 @@ var Combobox = memoGeneric(
         comboboxState
       ]
     );
-    useEffect17(() => {
+    useEffect18(() => {
       if (!shouldBlur) return;
       if (document.activeElement !== ref.current) return;
       setShouldBlur(false);
       ref.current?.focus();
       handleBlur();
     }, [shouldBlur, handleBlur]);
-    const { sectionHeaderCount, menuItemsCount } = useMemo21(
+    const { sectionHeaderCount, menuItemsCount } = useMemo23(
       () => ({
         sectionHeaderCount: filteredItems.filter(
           (item) => isMenuItemSectionHeader(item)
@@ -6602,19 +6931,19 @@ var Combobox = memoGeneric(
     const hasCheckedItems = items.some(
       (item) => isSelectableMenuItem(item) && item.checked
     );
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React55.createElement(
       InputField2.Root,
       {
         id,
         size: size2,
         sideOffset: 6,
-        end: /* @__PURE__ */ React52.createElement(React52.Fragment, null, loading && /* @__PURE__ */ React52.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React52.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React52.createElement(
+        end: /* @__PURE__ */ React55.createElement(React55.Fragment, null, loading && /* @__PURE__ */ React55.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React55.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React55.createElement(
           InputField2.Button,
           {
             variant: "floating",
             onClick: handleChevronClick
           },
-          /* @__PURE__ */ React52.createElement(
+          /* @__PURE__ */ React55.createElement(
             DropdownChevronIcon2,
             {
               className: cx(
@@ -6633,7 +6962,7 @@ var Combobox = memoGeneric(
             ListView.rowHeight * 10.5
           );
           const listSize = { width, height };
-          return /* @__PURE__ */ React52.createElement(
+          return /* @__PURE__ */ React55.createElement(
             "div",
             {
               className: cx(
@@ -6641,7 +6970,7 @@ var Combobox = memoGeneric(
                 shouldShowMenu && !readOnly ? "flex" : "hidden"
               )
             },
-            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React52.createElement(
+            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React55.createElement(
               ComboboxMenu,
               {
                 ref: listRef,
@@ -6655,11 +6984,11 @@ var Combobox = memoGeneric(
                 },
                 indented: hasCheckedItems
               }
-            ) : /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ React52.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
+            ) : /* @__PURE__ */ React55.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ React55.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
           );
         }
       },
-      /* @__PURE__ */ React52.createElement(
+      /* @__PURE__ */ React55.createElement(
         InputField2.Input,
         {
           ref,
@@ -6684,7 +7013,7 @@ var Combobox = memoGeneric(
           ...readOnly ? { readOnly: true } : {}
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React52.createElement(
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React55.createElement(
         InputField2.Typeahead,
         {
           value: typeaheadValue,
@@ -6698,30 +7027,30 @@ var Combobox = memoGeneric(
 );
 
 // src/components/CommandPalette.tsx
-import React55, { memo as memo22 } from "react";
+import React58, { memo as memo21 } from "react";
 
 // src/components/SearchCompletionMenu.tsx
 import { getCurrentPlatform as getCurrentPlatform2, handleKeyboardEvent } from "@noya-app/noya-keymap";
-import React54, {
+import React57, {
   forwardRef as forwardRef21,
-  useCallback as useCallback25,
-  useEffect as useEffect18,
+  useCallback as useCallback26,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo22,
+  useMemo as useMemo24,
   useRef as useRef22,
   useState as useState25
 } from "react";
 
 // src/components/Divider.tsx
-import React53, { memo as memo21 } from "react";
-var Divider = memo21(function Divider2({
+import React56, { memo as memo20 } from "react";
+var Divider = memo20(function Divider2({
   variant = "normal",
   overflow = 0,
   className,
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "div",
     {
       className: cx(
@@ -6741,14 +7070,14 @@ var Divider = memo21(function Divider2({
     }
   );
 });
-var DividerVertical = memo21(function DividerVertical2({
+var DividerVertical = memo20(function DividerVertical2({
   variant = "normal",
   overflow = 0,
   className,
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "div",
     {
       className: cx(`
@@ -6782,12 +7111,12 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
     index: 0
   });
   const { index, search } = state;
-  const listRef = React54.useRef(null);
+  const listRef = React57.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
-  useEffect18(() => {
+  useEffect19(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
-  const results = useMemo22(
+  const results = useMemo24(
     () => fuzzyFilter({
       items: items.map(
         (item) => typeof item.title === "string" ? item.title : item.value
@@ -6799,13 +7128,13 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
     })),
     [items, search]
   );
-  const setSearch = useCallback25((search2) => {
+  const setSearch = useCallback26((search2) => {
     setState((state2) => ({ ...state2, search: search2, index: 0 }));
   }, []);
-  const setIndex = useCallback25((index2) => {
+  const setIndex = useCallback26((index2) => {
     setState((state2) => ({ ...state2, index: index2 }));
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     onHover?.(results[index]);
   }, [index, onHover, results]);
   const searchHeight = 31;
@@ -6820,14 +7149,14 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
     width: listSize.width,
     height: searchHeight + listSize.height
   };
-  const selectAndClose = useCallback25(
+  const selectAndClose = useCallback26(
     (item) => {
       onSelect(item);
       onClose();
     },
     [onSelect, onClose]
   );
-  const handleKeyDown = useCallback25(
+  const handleKeyDown = useCallback26(
     (event) => {
       handleKeyboardEvent(event.nativeEvent, getCurrentPlatform2(navigator), {
         ArrowUp: () => {
@@ -6861,7 +7190,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       inputRef.current?.focus();
     }
   }));
-  return /* @__PURE__ */ React54.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ React54.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React57.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ React57.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ React57.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -6881,7 +7210,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       onChange: setSearch,
       onKeyDown: handleKeyDown
     }
-  )), /* @__PURE__ */ React54.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React54.createElement(
+  )), /* @__PURE__ */ React57.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React57.createElement(
     ComboboxMenu,
     {
       ref: listRef,
@@ -6896,29 +7225,29 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       onHoverIndex: setIndex,
       indented: hasCheckedItems
     }
-  ) : /* @__PURE__ */ React54.createElement(
+  ) : /* @__PURE__ */ React57.createElement(
     "div",
     {
       ...listSize,
       className: "flex flex-col p-20 items-center justify-center"
     },
-    /* @__PURE__ */ React54.createElement(Small, { color: "textDisabled" }, "No results")
+    /* @__PURE__ */ React57.createElement(Small, { color: "textDisabled" }, "No results")
   ));
 });
 
 // src/components/CommandPalette.tsx
-var CommandPalette = memo22(function CommandPalette2({
+var CommandPalette = memo21(function CommandPalette2({
   showCommandPalette,
   setShowCommandPalette,
   items,
   onSelect,
   onHover
 }) {
-  const menuRef = React55.useRef(null);
-  const handleClose = React55.useCallback(() => {
+  const menuRef = React58.useRef(null);
+  const handleClose = React58.useCallback(() => {
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React58.createElement(
     Dialog,
     {
       style: {
@@ -6944,7 +7273,7 @@ var CommandPalette = memo22(function CommandPalette2({
         }, 0);
       }
     },
-    /* @__PURE__ */ React55.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React55.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React58.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React58.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ React58.createElement(
       SearchCompletionMenu,
       {
         ref: menuRef,
@@ -6959,21 +7288,21 @@ var CommandPalette = memo22(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-import React56 from "react";
-var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React56.createElement(
+import React59 from "react";
+var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React59.createElement(
   Tooltip,
   {
     key: userId,
-    content: /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React56.createElement(Small, null, name))
+    content: /* @__PURE__ */ React59.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React59.createElement(Small, null, name))
   },
-  /* @__PURE__ */ React56.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
+  /* @__PURE__ */ React59.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ React56.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ React56.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React56.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React59.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ React59.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React59.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React59.createElement(
     Button_default,
     {
       active: isAssistantOpen,
@@ -6986,7 +7315,7 @@ var ConnectedUsersMenuLayout = ({
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React57, { useCallback as useCallback26, useState as useState26 } from "react";
+import React60, { useCallback as useCallback27, useState as useState26 } from "react";
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   items,
   onSelect,
@@ -6997,7 +7326,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 }) {
   const [open, setOpen] = useState26(false);
   const [downPosition, setDownPosition] = useState26(null);
-  const handlePointerDownCapture = useCallback26(
+  const handlePointerDownCapture = useCallback27(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -7010,7 +7339,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [open]
   );
-  const handlePointerUp = useCallback26(
+  const handlePointerUp = useCallback27(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -7026,13 +7355,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [downPosition, open]
   );
-  const handleOpenChange = useCallback26(
+  const handleOpenChange = useCallback27(
     (isOpen) => {
       if (!isOpen) setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
       className: cx(
@@ -7048,7 +7377,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onClick?.();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React57.createElement(
+    items && onSelect ? /* @__PURE__ */ React60.createElement(
       DropdownMenu,
       {
         open,
@@ -7057,13 +7386,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React57.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ React57.createElement(
+      /* @__PURE__ */ React60.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ React60.createElement(
         DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React57.createElement(
+    ) : /* @__PURE__ */ React60.createElement(
       DragHandleDots2Icon,
       {
         color: isVisible || open ? cssVars.colors.icon : "transparent"
@@ -7074,10 +7403,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 import * as Dialog3 from "@radix-ui/react-dialog";
-import * as React58 from "react";
+import * as React61 from "react";
 import { useImperativeHandle as useImperativeHandle8 } from "react";
-var Drawer = React58.memo(
-  React58.forwardRef(function Drawer2({
+var Drawer = React61.memo(
+  React61.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -7107,7 +7436,7 @@ var Drawer = React58.memo(
         return internalOpen;
       }
     }));
-    const inner = /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+    const inner = /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(
       Dialog3.Overlay,
       {
         className: cx(
@@ -7115,7 +7444,7 @@ var Drawer = React58.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React58.createElement(
+    ), /* @__PURE__ */ React61.createElement(
       Dialog3.Content,
       {
         id,
@@ -7127,24 +7456,24 @@ var Drawer = React58.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React58.createElement(Dialog3.Title, null, title),
+      title && /* @__PURE__ */ React61.createElement(Dialog3.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React61.createElement(
       Dialog3.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React58.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React58.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React61.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React61.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
 
 // src/components/Fade.tsx
-import React59 from "react";
+import React62 from "react";
 var Fade = ({
   children,
   direction = "right",
@@ -7166,7 +7495,7 @@ var Fade = ({
     top: "left-0 right-0 top-0",
     bottom: "left-0 right-0 bottom-0"
   }[direction];
-  return /* @__PURE__ */ React59.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React62.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React62.createElement(
     "div",
     {
       className: cx(
@@ -7185,17 +7514,17 @@ var Fade = ({
 };
 
 // src/components/file-explorer/FileExplorerLayout.tsx
-import React60 from "react";
+import React63 from "react";
 var FileExplorerLayout = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ React60.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
+}) => /* @__PURE__ */ React63.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
   children
-}) => /* @__PURE__ */ React60.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ React60.createElement(
+}) => /* @__PURE__ */ React63.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ React63.createElement(
   IconButton,
   {
     iconName: "UploadIcon",
@@ -7206,14 +7535,14 @@ var FileExplorerUploadButton = ({
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
-    return /* @__PURE__ */ React60.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
+    return /* @__PURE__ */ React63.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
   }
 );
 var FileExplorerDetail = ({
   selected,
   size: size2,
   children
-}) => /* @__PURE__ */ React60.createElement(
+}) => /* @__PURE__ */ React63.createElement(
   "span",
   {
     className: cx(
@@ -7226,10 +7555,10 @@ var FileExplorerDetail = ({
 var FileExplorerEmptyState = ({
   label = "No files",
   ...props
-}) => /* @__PURE__ */ React60.createElement(Banner, { label, className: "mx-3", ...props });
+}) => /* @__PURE__ */ React63.createElement(Banner, { label, className: "mx-3", ...props });
 
 // src/components/FillInputField.tsx
-import React63, { forwardRef as forwardRef23, memo as memo26 } from "react";
+import React66, { forwardRef as forwardRef23, memo as memo25 } from "react";
 
 // ../noya-file-format/src/types.ts
 var types_exports = {};
@@ -7554,25 +7883,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-import * as React62 from "react";
+import * as React65 from "react";
 
 // src/contexts/ImageDataContext.tsx
-import * as React61 from "react";
-var ImageDataContext = React61.createContext(
+import * as React64 from "react";
+var ImageDataContext = React64.createContext(
   void 0
 );
-var ImageDataProvider = React61.memo(function ImageDataProvider2({
+var ImageDataProvider = React64.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React61.useMemo(
+  const contextValue = React64.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React61.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React64.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React61.useContext(ImageDataContext);
+  const value = React64.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -7580,9 +7909,9 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-import { useLayoutEffect as useLayoutEffect6, useMemo as useMemo24 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useMemo as useMemo26 } from "react";
 function useObjectURL(object) {
-  const objectURL = useMemo24(() => {
+  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]));
@@ -7642,10 +7971,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 = React62.memo(function Background2({
+var Background = React65.memo(function Background2({
   background: background2
 }) {
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React65.createElement(
     "span",
     {
       className: `${background2 ? `bg-[${background2}]` : "bg-input-background"} absolute inset-0`
@@ -7664,7 +7993,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React62.memo(
+var PatternPreviewBackground = React65.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -7673,7 +8002,7 @@ var PatternPreviewBackground = React62.memo(
     const image = useImageData(imageRef);
     const url = useObjectURL(image);
     const size2 = getPatternSizeAndPosition(fillType, tileScale);
-    const background2 = React62.useMemo(
+    const background2 = React65.useMemo(
       () => [
         size2,
         `url(${url})`,
@@ -7681,44 +8010,44 @@ var PatternPreviewBackground = React62.memo(
       ].join(" "),
       [fillType, size2, url]
     );
-    return /* @__PURE__ */ React62.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
   }
 );
-var ColorPreviewBackground = React62.memo(function ColorPreviewBackground2({
+var ColorPreviewBackground = React65.memo(function ColorPreviewBackground2({
   color
 }) {
-  const background2 = React62.useMemo(
+  const background2 = React65.useMemo(
     () => sketchColorToRgbaString(color),
     [color]
   );
-  return /* @__PURE__ */ React62.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
 });
-var GradientPreviewBackground = React62.memo(
+var GradientPreviewBackground = React65.memo(
   function GradientPreviewBackground2({
     gradient
   }) {
-    const background2 = React62.useMemo(
+    const background2 = React65.useMemo(
       () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
       [gradient.gradientType, gradient.stops]
     );
-    return /* @__PURE__ */ React62.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
   }
 );
 var background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
   cssVars.colors.placeholderDots
 )}") no-repeat`;
-var FillPreviewBackground = React62.memo(function FillPreviewBackground2({
+var FillPreviewBackground = React65.memo(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ React62.createElement(Background, { background });
+  if (!value) return /* @__PURE__ */ React65.createElement(Background, { background });
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React62.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React65.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React62.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React65.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image) return null;
-      return /* @__PURE__ */ React62.createElement(
+      return /* @__PURE__ */ React65.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -7730,7 +8059,7 @@ var FillPreviewBackground = React62.memo(function FillPreviewBackground2({
 });
 
 // src/components/FillInputField.tsx
-var FillButton = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React63.createElement(
+var FillButton = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
   "button",
   {
     ref,
@@ -7741,14 +8070,14 @@ var FillButton = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-var FillInputField = memo26(
+var FillInputField = memo25(
   forwardRef23(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ React63.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React63.createElement(FillPreviewBackground, { value }));
+    return /* @__PURE__ */ React66.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React66.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-import React64, { useCallback as useCallback27, useRef as useRef23, useState as useState27 } from "react";
+import React67, { useCallback as useCallback28, useRef as useRef23, useState as useState27 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -7841,7 +8170,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React67.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -7885,7 +8214,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = useCallback27((e) => {
+  const handleMouseDown = useCallback28((e) => {
     if (!wrapperRef.current) return;
     const rect = wrapperRef.current.getBoundingClientRect();
     setDragOffset({
@@ -7894,7 +8223,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = useCallback27(
+  const handleResizeStart = useCallback28(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -7903,7 +8232,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = useCallback27(
+  const handleMouseMove = useCallback28(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -7957,13 +8286,13 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = useCallback27((_e) => {
+  const handleMouseUp = useCallback28((_e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React64.useEffect(() => {
+  React67.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -7973,11 +8302,11 @@ var FloatingWindow = ({
   }, [handleMouseMove, handleMouseUp]);
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = useCallback27(() => {
+  const handleClose = useCallback28(() => {
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React67.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -7992,7 +8321,7 @@ var FloatingWindow = ({
         zIndex: cssVars.zIndex.menu
       }
     },
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React67.createElement(
       "div",
       {
         style: {
@@ -8003,9 +8332,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React64.createElement(Divider, null),
-    /* @__PURE__ */ React64.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React67.createElement(Divider, null),
+    /* @__PURE__ */ React67.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React67.createElement(
       "div",
       {
         key: direction,
@@ -8027,8 +8356,8 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import * as React65 from "react";
-var GradientPicker = React65.memo(function GradientPicker2({
+import * as React68 from "react";
+var GradientPicker = React68.memo(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -8037,7 +8366,7 @@ var GradientPicker = React65.memo(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = React65.useMemo(
+  const colorModel = React68.useMemo(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: rgbaToHsva2,
@@ -8046,30 +8375,30 @@ var GradientPicker = React65.memo(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = React65.useMemo(
+  const rgbaColor = React68.useMemo(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = React65.useCallback(
+  const handleChangeColor = React68.useCallback(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = React65.useCallback(
+  const handleAddGradientStop = React68.useCallback(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React68.createElement(
     NoyaColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React68.createElement(
       Gradient,
       {
         gradients: value,
@@ -8080,18 +8409,18 @@ var GradientPicker = React65.memo(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React65.createElement(Saturation, null),
-    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React65.createElement(Hue, null),
-    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React65.createElement(Alpha, null)
+    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React68.createElement(Saturation, null),
+    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React68.createElement(Hue, null),
+    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React68.createElement(Alpha, null)
   );
 });
 
 // src/components/InspectorContainer.tsx
-import React66, { forwardRef as forwardRef24, memo as memo28 } from "react";
-var InspectorContainer = memo28(
+import React69, { forwardRef as forwardRef24, memo as memo27 } from "react";
+var InspectorContainer = memo27(
   forwardRef24(function InspectorContainer2({
     header,
     children,
@@ -8101,7 +8430,7 @@ var InspectorContainer = memo28(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React69.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -8116,32 +8445,32 @@ var InspectorContainer = memo28(
         }
       },
       header,
-      children ? /* @__PURE__ */ React66.createElement(ScrollArea, null, /* @__PURE__ */ React66.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React66.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React66.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
+      children ? /* @__PURE__ */ React69.createElement(ScrollArea, null, /* @__PURE__ */ React69.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React69.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React69.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import * as React67 from "react";
-var LabeledElementView = React67.memo(function LabeledElementView2({
+import * as React70 from "react";
+var LabeledElementView = React70.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React67.Children.toArray(children).flatMap(
-    (child) => React67.isValidElement(child) && child.type === React67.Fragment ? child.props.children : [child]
+  const elementIds = React70.Children.toArray(children).flatMap(
+    (child) => React70.isValidElement(child) && child.type === React70.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React67.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React70.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React67.useRef(null);
-  const refs = React67.useMemo(() => {
+  const containerRef = React70.useRef(null);
+  const refs = React70.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React67.createRef()])
+      serializedIds.split(",").map((id) => [id, React70.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React67.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React67.createElement(
+  const labelElements = React70.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React70.createElement(
       "span",
       {
         key: id,
@@ -8154,7 +8483,7 @@ var LabeledElementView = React67.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React67.useLayoutEffect(() => {
+  React70.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -8216,19 +8545,19 @@ var LabeledElementView = React67.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React67.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React67.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React67.createElement("div", { className: "relative overflow-hidden select-none" }, 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));
 });
 
 // src/components/LabeledField.tsx
-import React69, { memo as memo30, useMemo as useMemo28 } from "react";
+import React72, { memo as memo29, useMemo as useMemo30 } from "react";
 
 // src/hooks/useIndent.ts
-import React68 from "react";
-var IndentContext = React68.createContext({
+import React71 from "react";
+var IndentContext = React71.createContext({
   indentLevel: 0
 });
 var useIndent = () => {
-  const { indentLevel } = React68.useContext(IndentContext);
+  const { indentLevel } = React71.useContext(IndentContext);
   return indentLevel;
 };
 
@@ -8241,7 +8570,7 @@ var labeledFieldStyles = (labelPosition) => cx(
 var labelPositionInset = {
   position: "inset"
 };
-var LabeledField = memo30(function LabeledField2({
+var LabeledField = memo29(function LabeledField2({
   children,
   label,
   labelPosition: labelPositionProp,
@@ -8257,15 +8586,15 @@ var LabeledField = memo30(function LabeledField2({
   const labelWidth = labelWidthFromContext ?? minWidth;
   const labelPositionFromContext = useLabelPosition();
   const labelPosition = labelPositionProp ?? labelPositionFromContext ?? "start";
-  const labeledFieldClasses = useMemo28(
+  const labeledFieldClasses = useMemo30(
     () => labeledFieldStyles(labelPosition),
     [labelPosition]
   );
-  const labelContextValue = useMemo28(
+  const labelContextValue = useMemo30(
     () => ({ fieldId, label }),
     [fieldId, label]
   );
-  const indentStyle = useMemo28(
+  const indentStyle = useMemo30(
     () => ({
       width: indentLevel * 8,
       flexBasis: indentLevel * 8,
@@ -8274,20 +8603,20 @@ var LabeledField = memo30(function LabeledField2({
     }),
     [indentLevel]
   );
-  const fieldStyle = useMemo28(
+  const fieldStyle = useMemo30(
     () => ({
       minWidth: `calc(100% - ${labelWidth + indentLevel * 8 + 6}px)`
     }),
     [labelWidth, indentLevel]
   );
-  const labelStyle = useMemo28(
+  const labelStyle = useMemo30(
     () => ({
       minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
       ...labelStyleProp
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ React69.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ React69.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ React69.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React69.createElement("div", { style: indentStyle }), /* @__PURE__ */ React69.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React72.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ React72.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ React72.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React72.createElement("div", { style: indentStyle }), /* @__PURE__ */ React72.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ React72.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -8296,7 +8625,7 @@ var LabeledField = memo30(function LabeledField2({
       ...props
     },
     label
-  ), labelPosition === "start" ? /* @__PURE__ */ React69.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
+  ), labelPosition === "start" ? /* @__PURE__ */ React72.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/MediaThumbnail.tsx
@@ -8306,7 +8635,7 @@ import {
   SpeakerLoudIcon,
   VideoIcon
 } from "@noya-app/noya-icons";
-import React70, { memo as memo31, useMemo as useMemo29 } from "react";
+import React73, { memo as memo30, useMemo as useMemo31 } from "react";
 
 // src/components/catppuccin/fileIcons.ts
 var fileIcons = {
@@ -10746,7 +11075,7 @@ var getThumbnailColors = (colorScheme, selected) => {
       };
   }
 };
-var MediaThumbnail = memo31(function MediaThumbnail2({
+var MediaThumbnail = memo30(function MediaThumbnail2({
   contentType: contentTypeProp,
   selected = false,
   className,
@@ -10761,18 +11090,18 @@ var MediaThumbnail = memo31(function MediaThumbnail2({
     selected
   );
   const contentType = getAssetType(contentTypeProp);
-  const iconStyles = useMemo29(
+  const iconStyles = useMemo31(
     () => ({
       width: iconSizeMap[size2],
       height: iconSizeMap[size2]
     }),
     [size2]
   );
-  const content = useMemo29(() => {
+  const content = useMemo31(() => {
     switch (contentType) {
       case "image":
-        if (!url) return /* @__PURE__ */ React70.createElement(ImageIcon, { color: iconColor, style: iconStyles });
-        return /* @__PURE__ */ React70.createElement(
+        if (!url) return /* @__PURE__ */ React73.createElement(ImageIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React73.createElement(
           "img",
           {
             src: url,
@@ -10782,18 +11111,18 @@ var MediaThumbnail = memo31(function MediaThumbnail2({
           }
         );
       case "video":
-        return /* @__PURE__ */ React70.createElement(VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React73.createElement(VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ React70.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React73.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon = Icons[iconName];
-          return /* @__PURE__ */ React70.createElement(Icon, { color: iconColor, style: iconStyles });
+          return /* @__PURE__ */ React73.createElement(Icon, { color: iconColor, style: iconStyles });
         }
         if (fileName) {
           const fileIcon = findFileIcon(fileName);
           if (fileIcon) {
-            return /* @__PURE__ */ React70.createElement(
+            return /* @__PURE__ */ React73.createElement(
               "img",
               {
                 src: `https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`,
@@ -10803,10 +11132,10 @@ var MediaThumbnail = memo31(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ React70.createElement(FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React73.createElement(FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "div",
     {
       className: cx(
@@ -10837,18 +11166,18 @@ function findFileIcon(fileName) {
 }
 
 // src/components/Message.tsx
-import React71, { forwardRef as forwardRef25, memo as memo32, useMemo as useMemo30 } from "react";
-var Message = memo32(
+import React74, { forwardRef as forwardRef25, memo as memo31, useMemo as useMemo32 } from "react";
+var Message = memo31(
   forwardRef25(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = crypto.randomUUID();
     const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
-    const styles3 = useMemo30(
+    const styles3 = useMemo32(
       () => role === "user" ? {
         backgroundColor: userMessageBackgroundColor
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React74.createElement(
       "div",
       {
         className: cx(
@@ -10856,15 +11185,15 @@ var Message = memo32(
           role === "user" ? "flex-row-reverse" : "flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ React71.createElement(
+      role === "assistant" ? /* @__PURE__ */ React74.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ React71.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ React71.createElement(
+        /* @__PURE__ */ React74.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ React74.createElement(
         Avatar,
         {
           userId: !user ? randomId : user?.id,
@@ -10873,7 +11202,7 @@ var Message = memo32(
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ React71.createElement(
+      /* @__PURE__ */ React74.createElement(
         "div",
         {
           className: cx(
@@ -10883,7 +11212,7 @@ var Message = memo32(
           style: styles3,
           ref
         },
-        /* @__PURE__ */ React71.createElement(
+        /* @__PURE__ */ React74.createElement(
           Text,
           {
             variant: "small",
@@ -10898,9 +11227,9 @@ var Message = memo32(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 import { Link1Icon } from "@noya-app/noya-icons";
-import React72 from "react";
+import React75 from "react";
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ React72.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React75.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React75.createElement(
     "a",
     {
       href: url,
@@ -10908,15 +11237,15 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "flex text-primary hover:opacity-80 border border-divider rounded-md"
     },
-    /* @__PURE__ */ React72.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ React72.createElement(Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
-    /* @__PURE__ */ React72.createElement(DividerVertical, null),
-    /* @__PURE__ */ React72.createElement(Small, { className: "truncate p-2 flex-1" }, url)
+    /* @__PURE__ */ React75.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ React75.createElement(Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
+    /* @__PURE__ */ React75.createElement(DividerVertical, null),
+    /* @__PURE__ */ React75.createElement(Small, { className: "truncate p-2 flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ React72.createElement("div", { className: "flex flex-col gap-2" }, children);
+  return /* @__PURE__ */ React75.createElement("div", { className: "flex flex-col gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -10932,27 +11261,27 @@ function getPipelineResultLink(value) {
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React73 from "react";
+import * as React76 from "react";
 function Progress({
   value,
   variant = "normal",
   className
 }) {
   const clampedValue = clamp(value, 0, 100);
-  const transformStyles = React73.useMemo(
+  const transformStyles = React76.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`
     }),
     [clampedValue]
   );
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React76.createElement(
     ProgressPrimitive.Root,
     {
       className: cx(`relative hidden bg-input-background h-[5px] `, className),
       style: { transform: "translateZ(0)" },
       value: clampedValue
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React76.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`,
@@ -10963,7 +11292,7 @@ function Progress({
 }
 
 // src/components/Section.tsx
-import React74, { memo as memo33, useMemo as useMemo32 } from "react";
+import React77, { memo as memo32, useMemo as useMemo34 } from "react";
 var titleIconStyle = {
   marginRight: "8px",
   alignSelf: "flex-start",
@@ -10987,7 +11316,7 @@ var SectionInternal = ({
     inlineBlockWrapper: true
   }
 }) => {
-  const style2 = useMemo32(
+  const style2 = useMemo34(
     () => ({
       display: "flex",
       flexDirection: "column",
@@ -10998,15 +11327,15 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = React74.Children.toArray(children).some((child) => !!child);
-  const headerStyle = useMemo32(
+  const hasChildren = React77.Children.toArray(children).some((child) => !!child);
+  const headerStyle = useMemo34(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
       minHeight: INPUT_HEIGHT
     }),
     [hasChildren]
   );
-  return /* @__PURE__ */ React74.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React74.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ React74.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ React74.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ React74.createElement(React74.Fragment, null, onClickTitle ? /* @__PURE__ */ React74.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ React74.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ React74.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ React74.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React74.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
+  return /* @__PURE__ */ React77.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React77.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ React77.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ React77.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ React77.createElement(React77.Fragment, null, onClickTitle ? /* @__PURE__ */ React77.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ React77.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ React77.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ React77.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React77.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -11019,12 +11348,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React77.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ React74.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ React74.createElement(
+      title: /* @__PURE__ */ React77.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ React77.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -11035,23 +11364,23 @@ var ExpandableSection = ({
     expanded && props.children
   );
 };
-var Section = memo33(function InspectorSection({
+var Section = memo32(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ React74.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React74.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ React77.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React77.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 import * as ToggleGroupPrimitive2 from "@radix-ui/react-toggle-group";
-import React75, {
-  createContext as createContext12,
+import React78, {
+  createContext as createContext13,
   forwardRef as forwardRef26,
-  useCallback as useCallback29,
-  useContext as useContext13,
-  useMemo as useMemo33
+  useCallback as useCallback30,
+  useContext as useContext14,
+  useMemo as useMemo35
 } from "react";
-var SegmentedControlContext = createContext12({
+var SegmentedControlContext = createContext13({
   colorScheme: "primary"
 });
 var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
@@ -11064,8 +11393,8 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme } = useContext13(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ React75.createElement(
+  const { colorScheme } = useContext14(SegmentedControlContext);
+  const itemElement = /* @__PURE__ */ React78.createElement(
     ToggleGroupPrimitive2.Item,
     {
       ref: forwardedRef,
@@ -11085,7 +11414,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       ),
       ...props
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React78.createElement(
       "span",
       {
         className: cx(
@@ -11097,7 +11426,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ React75.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React78.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -11110,16 +11439,16 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   className,
   style: style2
 }) {
-  const contextValue = useMemo33(() => ({ colorScheme }), [colorScheme]);
+  const contextValue = useMemo35(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
-  const handleValueChange = useCallback29(
+  const handleValueChange = useCallback30(
     (value2) => {
       if (!allowEmpty && !value2) return;
       onValueChange?.(value2);
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React75.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React78.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React78.createElement(
     ToggleGroupPrimitive2.Root,
     {
       id,
@@ -11137,13 +11466,13 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ React75.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ React78.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 import * as PopperPrimitive from "@radix-ui/react-popper";
-import React76, { memo as memo34, useMemo as useMemo34 } from "react";
+import React79, { memo as memo33, useMemo as useMemo36 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
@@ -11158,22 +11487,22 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbarContainer = memo34(
+var SelectionToolbarContainer = memo33(
   function SelectionToolbarContainer2({
     rect,
     children,
     portalContainer
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React76.useRef(null);
+    const containerRef = React79.useRef(null);
     const size2 = useSize(containerRef, "width");
-    const virtualRef = useMemo34(
+    const virtualRef = useMemo36(
       () => ({
         current: createVirtualElement(rect)
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ React76.createElement(
+    const popperContent = /* @__PURE__ */ React79.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -11190,7 +11519,7 @@ var SelectionToolbarContainer = memo34(
           ["--n-input-background"]: "transparent"
         }
       },
-      /* @__PURE__ */ React76.createElement(
+      /* @__PURE__ */ React79.createElement(
         "div",
         {
           ref: containerRef,
@@ -11203,7 +11532,7 @@ var SelectionToolbarContainer = memo34(
         children
       )
     );
-    return /* @__PURE__ */ React76.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React76.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ React79.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React79.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
   }
 );
 
@@ -11214,8 +11543,8 @@ import {
   DropdownChevronIcon as DropdownChevronIcon3
 } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React77, {
-  useMemo as useMemo35,
+import React80, {
+  useMemo as useMemo37,
   useState as useState28
 } from "react";
 var readOnlyStyle = {
@@ -11248,7 +11577,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelPosition = useLabelPosition();
-  return /* @__PURE__ */ React77.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React80.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React80.createElement(
     Button,
     {
       id,
@@ -11260,10 +11589,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ React77.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
-    label && labelPosition === "inset" && /* @__PURE__ */ React77.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React77.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ React77.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ React77.createElement(Select.Value, { placeholder })),
-    /* @__PURE__ */ React77.createElement(
+    icon && /* @__PURE__ */ React80.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
+    label && labelPosition === "inset" && /* @__PURE__ */ React80.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React80.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ React80.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ React80.createElement(Select.Value, { placeholder })),
+    /* @__PURE__ */ React80.createElement(
       DropdownChevronIcon3,
       {
         className: cx(
@@ -11311,8 +11640,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     }
     setInternalOpen(open2);
   };
-  const readOnlyButton = useMemo35(
-    () => /* @__PURE__ */ React77.createElement(
+  const readOnlyButton = useMemo37(
+    () => /* @__PURE__ */ React80.createElement(
       Button,
       {
         id,
@@ -11322,11 +11651,11 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ React77.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ React80.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
-  const contentStyle = useMemo35(() => {
+  const contentStyle = useMemo37(() => {
     return {
       width: "var(--radix-select-trigger-width)",
       minWidth: "max-content",
@@ -11334,7 +11663,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ React77.createElement(
+  const content = /* @__PURE__ */ React80.createElement(
     Select.Root,
     {
       value,
@@ -11342,7 +11671,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React80.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -11357,7 +11686,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ React77.createElement(Select.Portal, null, /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React80.createElement(Select.Portal, null, /* @__PURE__ */ React80.createElement(
       Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -11368,14 +11697,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ React77.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React77.createElement(
+      /* @__PURE__ */ React80.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React80.createElement(
         ChevronUpIcon,
         {
           className: cx("transition-transform duration-100")
         }
       )),
-      /* @__PURE__ */ React77.createElement(Select.Viewport, null, /* @__PURE__ */ React77.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ React77.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React77.createElement(ChevronDownIcon, null))
+      /* @__PURE__ */ React80.createElement(Select.Viewport, null, /* @__PURE__ */ React80.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ React80.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React80.createElement(ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -11383,13 +11712,13 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React78, { memo as memo35, useCallback as useCallback30, useMemo as useMemo36 } from "react";
+import React81, { memo as memo34, useCallback as useCallback31, useMemo as useMemo38 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
 var insetEndStyles2 = getInsetEndStyles();
-var Slider = memo35(function Slider2({
+var Slider = memo34(function Slider2({
   style: style2,
   className,
   value,
@@ -11403,7 +11732,7 @@ var Slider = memo35(function Slider2({
   readOnly = false,
   ...props
 }) {
-  const arrayValue = useMemo36(
+  const arrayValue = useMemo38(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
@@ -11412,13 +11741,13 @@ var Slider = memo35(function Slider2({
     fieldId: props.id
   });
   const labelPosition = useLabelPosition();
-  const handleValueChange = useCallback30(
+  const handleValueChange = useCallback31(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  const percentage = useMemo36(() => {
+  const percentage = useMemo38(() => {
     const rawPercent = (arrayValue[0] - min) / (max - min);
     const adjustedPercent = rawPercent * (100 - THUMB_WIDTH * 100 / 300) + THUMB_WIDTH * 50 / 300;
     return {
@@ -11426,19 +11755,19 @@ var Slider = memo35(function Slider2({
       adjusted: adjustedPercent
     };
   }, [arrayValue, min, max]);
-  const trackFillStyle = useMemo36(
+  const trackFillStyle = useMemo38(
     () => ({
       clipPath: `inset(0 ${100 - percentage.adjusted}% 0 0)`
     }),
     [percentage.adjusted]
   );
-  const labelStyle = useMemo36(
+  const labelStyle = useMemo38(
     () => ({
       clipPath: `inset(0 ${100 - percentage.raw}% 0 0)`
     }),
     [percentage.raw]
   );
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React81.createElement(
     RadixSlider.Root,
     {
       min,
@@ -11456,7 +11785,7 @@ var Slider = memo35(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React78.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React78.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React78.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React81.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React81.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React81.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React81.createElement(
       "div",
       {
         style: trackFillStyle,
@@ -11467,8 +11796,8 @@ var Slider = memo35(function Slider2({
         )
       }
     )),
-    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React78.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React78.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
-    /* @__PURE__ */ React78.createElement(
+    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React81.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React81.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
+    /* @__PURE__ */ React81.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
@@ -11483,9 +11812,28 @@ var Slider = memo35(function Slider2({
   );
 });
 
+// src/components/sorting/createSharedDrag.tsx
+import * as React82 from "react";
+function createSharedDrag() {
+  const dragRegistrationContext = React82.createContext(null);
+  const activeDragContext = React82.createContext(
+    null
+  );
+  const sharedDragProps = {
+    dragRegistrationContext,
+    activeDragContext
+  };
+  const Provider3 = ({ children }) => /* @__PURE__ */ React82.createElement(SharedDragProvider, { sharedDragProps }, children);
+  return {
+    Provider: Provider3,
+    Sortable: (props) => /* @__PURE__ */ React82.createElement(Sortable, { sharedDragProps, ...props }),
+    props: sharedDragProps
+  };
+}
+
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React79 from "react";
+import * as React83 from "react";
 var Switch = function Switch2({
   id,
   value,
@@ -11497,7 +11845,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React83.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11516,20 +11864,20 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React79.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__ */ 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]" })
   );
 };
 
 // src/components/UserPointer.tsx
-import React80, { memo as memo36, useMemo as useMemo37 } from "react";
-var UserPointerContainer = memo36(function UserPointerContainer2({
+import React84, { memo as memo35, useMemo as useMemo39 } from "react";
+var UserPointerContainer = memo35(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "div",
     {
       style: {
@@ -11546,13 +11894,13 @@ var UserPointerContainer = memo36(function UserPointerContainer2({
     children
   );
 });
-var UserNameTag = memo36(function UserNameTag2({
+var UserNameTag = memo35(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
   children
 }) {
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "span",
     {
       className: cx(
@@ -11568,14 +11916,14 @@ var UserNameTag = memo36(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = memo36(function PointerIcon({
+var UserPointerIcon = memo35(function PointerIcon({
   size: size2,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "svg",
     {
       width: size2,
@@ -11590,7 +11938,7 @@ var UserPointerIcon = memo36(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React84.createElement(
       "polygon",
       {
         points,
@@ -11603,7 +11951,7 @@ var UserPointerIcon = memo36(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = memo36(function UserPointer2({
+var UserPointer = memo35(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -11612,22 +11960,22 @@ var UserPointer = memo36(function UserPointer2({
   style: style2,
   className
 }) {
-  const userBackgroundColor = useMemo37(
+  const userBackgroundColor = useMemo39(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = useMemo37(
+  const pointerOverlapStyle = useMemo39(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = useMemo37(
+  const nameTagOverlapStyle = useMemo39(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React84.createElement(
     UserPointerContainer,
     {
       point,
@@ -11635,14 +11983,14 @@ var UserPointer = memo36(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React80.createElement("div", { className: "relative" }, /* @__PURE__ */ React80.createElement(
+    name && /* @__PURE__ */ React84.createElement("div", { className: "relative" }, /* @__PURE__ */ React84.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React80.createElement(
+    ), /* @__PURE__ */ React84.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -11655,17 +12003,17 @@ var UserPointer = memo36(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React84, {
+import React88, {
   forwardRef as forwardRef27,
-  memo as memo39,
-  useCallback as useCallback31,
+  memo as memo38,
+  useCallback as useCallback32,
   useImperativeHandle as useImperativeHandle9,
   useRef as useRef28,
   useState as useState31
 } from "react";
 
 // src/hooks/useWindowSize.tsx
-import { useEffect as useEffect19, useState as useState29 } from "react";
+import { useEffect as useEffect20, useState as useState29 } from "react";
 function useWindowSize() {
   const [size2, setSize] = useState29(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
@@ -11673,7 +12021,7 @@ function useWindowSize() {
       height: window.innerHeight
     }
   );
-  useEffect19(() => {
+  useEffect20(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -11685,7 +12033,7 @@ function useWindowSize() {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React82, { memo as memo37, useLayoutEffect as useLayoutEffect9, useRef as useRef26, useState as useState30 } from "react";
+import React86, { memo as memo36, useLayoutEffect as useLayoutEffect9, useRef as useRef26, useState as useState30 } from "react";
 
 // src/hooks/usePreservePanelSize.tsx
 import { useLayoutEffect as useLayoutEffect8, useRef as useRef25 } from "react";
@@ -11825,7 +12173,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var DrawerWorkspaceLayout = memo37(function DrawerWorkspaceLayout2({
+var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
   leftPanel,
   leftSidebarRef,
   rightPanel,
@@ -11846,14 +12194,14 @@ var DrawerWorkspaceLayout = memo37(function DrawerWorkspaceLayout2({
   }, [handleChangeLayoutState, mounted]);
   const leftSidebarCollapsed = internalLayoutState?.leftSidebarCollapsed ?? false;
   const rightSidebarCollapsed = internalLayoutState?.rightSidebarCollapsed ?? false;
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "flex flex-1 relative focus:outline-none"
     },
-    leftPanel && /* @__PURE__ */ React82.createElement(
+    leftPanel && /* @__PURE__ */ React86.createElement(
       Drawer,
       {
         id: LEFT_SIDEBAR_ID,
@@ -11874,7 +12222,7 @@ var DrawerWorkspaceLayout = memo37(function DrawerWorkspaceLayout2({
       leftPanel
     ),
     centerPanel,
-    rightPanel && /* @__PURE__ */ React82.createElement(
+    rightPanel && /* @__PURE__ */ React86.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -11898,13 +12246,13 @@ var DrawerWorkspaceLayout = memo37(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React83, { memo as memo38, useRef as useRef27 } from "react";
+import React87, { memo as memo37, useRef as useRef27 } from "react";
 import {
   Panel,
   PanelGroup,
   PanelResizeHandle
 } from "react-resizable-panels";
-var PanelWorkspaceLayout = memo38(function PanelWorkspaceLayout2({
+var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
   leftPanel,
   rightPanel,
   centerPanel,
@@ -11919,7 +12267,7 @@ var PanelWorkspaceLayout = memo38(function PanelWorkspaceLayout2({
 }) {
   const panelGroupRef = useRef27(null);
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React87.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -11928,7 +12276,7 @@ var PanelWorkspaceLayout = memo38(function PanelWorkspaceLayout2({
       direction: "horizontal",
       autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
     },
-    leftPanel && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(
+    leftPanel && /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -11941,8 +12289,8 @@ var PanelWorkspaceLayout = memo38(function PanelWorkspaceLayout2({
         collapsible: true
       },
       internalLayoutState?.leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React83.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
-    /* @__PURE__ */ React83.createElement(
+    ), /* @__PURE__ */ React87.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
+    /* @__PURE__ */ React87.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -11953,7 +12301,7 @@ var PanelWorkspaceLayout = memo38(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React83.createElement(
+    rightPanel && /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React87.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -12002,7 +12350,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
   } = {},
   theme
 }, forwardedRef) {
-  const containerRef = React84.useRef(null);
+  const containerRef = React88.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -12036,7 +12384,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
   const leftSidebarRef = useRef28(null);
   const rightSidebarRef = useRef28(null);
   const [internalLayoutState, setInternalLayoutState] = useState31(null);
-  const handleChangeLayoutState = useCallback31(
+  const handleChangeLayoutState = useCallback32(
     (state) => {
       setInternalLayoutState(state);
       onChangeLayoutState?.(state);
@@ -12100,7 +12448,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
-  const leftPanel = left ? /* @__PURE__ */ React84.createElement(
+  const leftPanel = left ? /* @__PURE__ */ React88.createElement(
     PanelInner,
     {
       style: leftStyle,
@@ -12108,7 +12456,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     },
     left
   ) : null;
-  const rightPanel = right ? /* @__PURE__ */ React84.createElement(
+  const rightPanel = right ? /* @__PURE__ */ React88.createElement(
     PanelInner,
     {
       style: rightStyle,
@@ -12116,7 +12464,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     },
     right
   ) : null;
-  const centerPanel = /* @__PURE__ */ React84.createElement(PanelInner, { className: "bg-canvas-background" }, children);
+  const centerPanel = /* @__PURE__ */ React88.createElement(PanelInner, { className: "bg-canvas-background" }, children);
   const leftSidebarOptions = {
     minSize: leftSidebarMinPercentage,
     maxSize: leftSidebarMaxPercentage,
@@ -12131,7 +12479,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
   };
   const LayoutComponent = sideType === "panel" ? PanelWorkspaceLayout : sideType === "drawer" ? DrawerWorkspaceLayout : parentSize.width > sideTypeBreakpoint ? PanelWorkspaceLayout : DrawerWorkspaceLayout;
   const readyToRender = detectSize === "window" || containerSize && containerSize.width > 0;
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React88.createElement(
     "div",
     {
       ref: containerRef,
@@ -12141,7 +12489,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ React84.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React88.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React88.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -12159,12 +12507,12 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     ))
   );
 });
-var PanelInner = memo39(function PanelInner2({
+var PanelInner = memo38(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React84.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
+  return /* @__PURE__ */ React88.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
 });
 
 // src/hooks/usePlatform.ts
@@ -12177,7 +12525,7 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-import { useState as useState32, useEffect as useEffect20 } from "react";
+import { useState as useState32, useEffect as useEffect21 } from "react";
 function useTheme() {
   const [theme, setTheme] = useState32("light");
   const checkTheme = () => {
@@ -12191,7 +12539,7 @@ function useTheme() {
         break;
     }
   };
-  useEffect20(() => {
+  useEffect21(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -12296,7 +12644,9 @@ function acceptsDrop({
     return defaultAcceptsDrop(
       sourceIndexPath.at(-1),
       targetIndexPath.at(-1),
-      position
+      position,
+      "",
+      ""
     );
   }
   return true;
@@ -12317,11 +12667,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import * as React85 from "react";
+import * as React89 from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React85.memo(function DimensionInput2({
+var DimensionInput = React89.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -12331,15 +12681,15 @@ var DimensionInput = React85.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React85.useCallback(
+  const handleNudgeValue = React89.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React85.useCallback(
+  const handleSetValue = React89.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React85.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React85.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React89.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React89.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React89.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -12366,11 +12716,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title4,
   VerticalSeparator: () => VerticalSeparator
 });
-import React86, {
+import React90, {
   forwardRef as forwardRef28,
-  memo as memo41
+  memo as memo40
 } from "react";
-var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React86.createElement(
+var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
   "div",
   {
     ref,
@@ -12378,8 +12728,8 @@ var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React86.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
-var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React86.createElement(
+var SectionHeader3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
+var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React90.createElement(
   "div",
   {
     ref,
@@ -12390,7 +12740,7 @@ var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PU
     ...props
   }
 ));
-var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React86.createElement(
+var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
   "div",
   {
     ref,
@@ -12398,7 +12748,7 @@ var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React86
     ...props
   }
 ));
-var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React86.createElement(
+var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
   "div",
   {
     ref,
@@ -12406,7 +12756,7 @@ var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React86.createElement(
+var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
   "input",
   {
     ref,
@@ -12415,7 +12765,7 @@ var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React86.createElement(
+var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
   "span",
   {
     ref,
@@ -12423,14 +12773,14 @@ var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React86.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var VerticalSeparator = () => /* @__PURE__ */ React90.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React90.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
 var RowLabel = forwardRef28(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React90.createElement(
     "label",
     {
       ref,
@@ -12442,7 +12792,7 @@ var RowLabel = forwardRef28(function RowLabel2({
     }
   );
 });
-var LabeledRow = memo41(function LabeledRow2({
+var LabeledRow = memo40(function LabeledRow2({
   id,
   children,
   label,
@@ -12450,11 +12800,11 @@ var LabeledRow = memo41(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React86.createElement(Row, { id, className }, /* @__PURE__ */ React86.createElement(Column, null, /* @__PURE__ */ React86.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React86.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React86.createElement(Row, null, children)));
+  return /* @__PURE__ */ React90.createElement(Row, { id, className }, /* @__PURE__ */ React90.createElement(Column, null, /* @__PURE__ */ React90.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React90.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React90.createElement(Row, null, children)));
 });
 
 // src/components/BaseToolbar.tsx
-import React87 from "react";
+import React91 from "react";
 var toolbarStyle = {
   [cssVarNames.colors.inputBackground]: "transparent"
 };
@@ -12465,7 +12815,7 @@ function BaseToolbar({
   logo,
   showDivider = true
 }) {
-  return /* @__PURE__ */ React87.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React91.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React91.createElement(
     "div",
     {
       className: "flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar",
@@ -12473,10 +12823,10 @@ function BaseToolbar({
         flex: `0 0 ${cssVars.spacing.toolbarHeight}`
       }
     },
-    logo && /* @__PURE__ */ React87.createElement(React87.Fragment, null, logo, /* @__PURE__ */ React87.createElement(DividerVertical, null)),
-    /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ React87.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React87.createElement(
+    logo && /* @__PURE__ */ React91.createElement(React91.Fragment, null, logo, /* @__PURE__ */ React91.createElement(DividerVertical, null)),
+    /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: 10 }),
+    left && /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: 10 })),
+    /* @__PURE__ */ React91.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React91.createElement(
       "div",
       {
         style: {
@@ -12488,15 +12838,15 @@ function BaseToolbar({
       },
       children
     )),
-    /* @__PURE__ */ React87.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ React87.createElement("div", { className: "flex gap-toolbar-separator" }, right)
-  ), showDivider && /* @__PURE__ */ React87.createElement(Divider, { variant: "strong" }));
+    /* @__PURE__ */ React91.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ React91.createElement("div", { className: "flex gap-toolbar-separator" }, right)
+  ), showDivider && /* @__PURE__ */ React91.createElement(Divider, { variant: "strong" }));
 }
 
 // src/components/Toolbar.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React88 from "react";
+import React92 from "react";
 var iconButtonStyle = {
   height: 27,
   width: 27,
@@ -12506,8 +12856,8 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = React88.useState(false);
-  return /* @__PURE__ */ React88.createElement(
+  const [open, setOpen] = React92.useState(false);
+  return /* @__PURE__ */ React92.createElement(
     DropdownMenu,
     {
       open,
@@ -12519,7 +12869,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React92.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -12533,15 +12883,18 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
 });
 var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   item,
-  onSelectMenuItem
+  onSelectMenuItem,
+  as
 }) {
-  const content = /* @__PURE__ */ React88.createElement(
+  const content = /* @__PURE__ */ React92.createElement(
     Button,
     {
+      as,
       disabled: item.disabled,
       active: item.checked,
       icon: item.icon,
       style: item.icon && !item.title ? iconButtonStyle : void 0,
+      ...as === "a" && { href: item.value },
       onClick: () => {
         if (onSelectMenuItem && item.value) {
           onSelectMenuItem(item.value);
@@ -12550,32 +12903,42 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     },
     item.title
   );
-  return item.tooltip ? /* @__PURE__ */ React88.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
+  return item.tooltip ? /* @__PURE__ */ React92.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
-  onSelectMenuItem
+  onSelectMenuItem,
+  buttonAs
 }) {
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ React88.createElement(DividerVertical, { overflow: 4 });
+    return /* @__PURE__ */ React92.createElement(DividerVertical, { overflow: 4 });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ React88.createElement(ToolbarMenuButton, { item, onSelectMenuItem });
+    return /* @__PURE__ */ React92.createElement(
+      ToolbarMenuButton,
+      {
+        item,
+        onSelectMenuItem,
+        as: buttonAs
+      }
+    );
   }
-  return /* @__PURE__ */ React88.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ React92.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
-  onSelectMenuItem
+  onSelectMenuItem,
+  buttonAs
 }) {
-  return /* @__PURE__ */ React88.createElement(React88.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React92.createElement(React92.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React92.createElement(
       ToolbarMenuItem,
       {
         key: i,
         item,
-        onSelectMenuItem
+        onSelectMenuItem,
+        buttonAs
       }
     );
   }));
@@ -12588,28 +12951,28 @@ function Toolbar({
   onSelectMenuItem,
   shouldBindKeyboardShortcuts = true
 }) {
-  const allMenuItems = React88.useMemo(
+  const allMenuItems = React92.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   useKeyboardShortcuts4(
-    React88.useMemo(
+    React92.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React92.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React88.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React88.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React92.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React92.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
           onSelectMenuItem
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React88.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React88.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React92.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React92.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -12721,9 +13084,11 @@ export {
   SegmentedControl,
   SelectMenu,
   SelectionToolbarContainer,
+  SharedDragProvider,
   Slider,
   Small,
-  Sortable2 as Sortable,
+  Sortable,
+  SortableItemContext,
   Spacer,
   Switch,
   Text,
@@ -12745,7 +13110,9 @@ export {
   colorForStringValues,
   colorFromString,
   colorSwatchSizeMap,
+  createDragItemKey,
   createSectionedMenu,
+  createSharedDrag,
   cssVarNames,
   cssVars,
   cx,
@@ -12758,6 +13125,7 @@ export {
   getFieldSpacing,
   getGradientBackground,
   getGridSize,
+  getItemFirstCollisionDetection,
   getKeyboardShortcutsForMenuItems,
   getMenuItemKey,
   getNewValue,
@@ -12773,6 +13141,7 @@ export {
   mergeConflictingClassNames,
   moveTreeItem,
   normalizeListTargetIndex,
+  parseDragItemKey,
   popoverStyle,
   portalScopeDataSetName,
   portalScopePropName,
@@ -12815,6 +13184,7 @@ export {
   usePreservePanelSize,
   useTheme,
   validateDropIndicator,
+  withDragProvider,
   withSeparatorElements
 };
 //# sourceMappingURL=index.mjs.map