@noya-app/noya-designsystem 0.1.55 → 0.1.57

package/dist/index.js

@@ -130,9 +130,11 @@ __export(src_exports, {
   SegmentedControl: () => SegmentedControl,
   SelectMenu: () => SelectMenu,
   SelectionToolbarContainer: () => SelectionToolbarContainer,
+  SharedDragProvider: () => SharedDragProvider,
   Slider: () => Slider,
   Small: () => Small,
-  Sortable: () => Sortable2,
+  Sortable: () => Sortable,
+  SortableItemContext: () => SortableItemContext,
   Spacer: () => Spacer,
   Switch: () => Switch,
   Text: () => Text,
@@ -154,7 +156,9 @@ __export(src_exports, {
   colorForStringValues: () => colorForStringValues,
   colorFromString: () => colorFromString,
   colorSwatchSizeMap: () => colorSwatchSizeMap,
+  createDragItemKey: () => createDragItemKey,
   createSectionedMenu: () => createSectionedMenu,
+  createSharedDrag: () => createSharedDrag,
   cssVarNames: () => cssVarNames,
   cssVars: () => cssVars,
   cx: () => cx,
@@ -167,6 +171,7 @@ __export(src_exports, {
   getFieldSpacing: () => getFieldSpacing,
   getGradientBackground: () => getGradientBackground,
   getGridSize: () => getGridSize,
+  getItemFirstCollisionDetection: () => getItemFirstCollisionDetection,
   getKeyboardShortcutsForMenuItems: () => getKeyboardShortcutsForMenuItems,
   getMenuItemKey: () => getMenuItemKey,
   getNewValue: () => getNewValue,
@@ -182,6 +187,7 @@ __export(src_exports, {
   mergeConflictingClassNames: () => mergeConflictingClassNames,
   moveTreeItem: () => moveTreeItem,
   normalizeListTargetIndex: () => normalizeListTargetIndex,
+  parseDragItemKey: () => parseDragItemKey,
   popoverStyle: () => popoverStyle,
   portalScopeDataSetName: () => portalScopeDataSetName,
   portalScopePropName: () => portalScopePropName,
@@ -224,6 +230,7 @@ __export(src_exports, {
   usePreservePanelSize: () => usePreservePanelSize,
   useTheme: () => useTheme,
   validateDropIndicator: () => validateDropIndicator,
+  withDragProvider: () => withDragProvider,
   withSeparatorElements: () => withSeparatorElements
 });
 module.exports = __toCommonJS(src_exports);
@@ -3835,7 +3842,7 @@ var Chip = (0, import_react45.memo)(
 );
 
 // src/components/Collection.tsx
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 
 // src/components/Grid.tsx
 var import_react49 = __toESM(require("react"));
@@ -4562,12 +4569,12 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 
 // src/components/ListView.tsx
 var import_noya_utils8 = require("@noya-app/noya-utils");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_react_virtualized = require("react-virtualized");
 var import_react_window = require("react-window");
 
@@ -4594,12 +4601,304 @@ function mergeEventHandlers(...handlerMaps) {
   );
 }
 
-// src/components/Sortable.tsx
-var import_core = require("@dnd-kit/core");
+// src/components/sorting/Sortable.tsx
+var import_core2 = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var React44 = __toESM(require("react"));
-var import_react50 = require("react");
+var React47 = __toESM(require("react"));
+
+// src/components/sorting/DragRegistration.tsx
+var import_react50 = __toESM(require("react"));
+var DragRegistrationContext = import_react50.default.createContext(null);
+function useDragRegistration(context) {
+  const value = import_react50.default.useContext(context);
+  if (!value) {
+    throw new Error(
+      "useDragRegistration must be used within a DragRegistrationProvider"
+    );
+  }
+  return value;
+}
+function useDragRegistrationManager() {
+  const [registeredLists, setRegisteredLists] = import_react50.default.useState(/* @__PURE__ */ new Map());
+  const registerList = import_react50.default.useCallback((list) => {
+    setRegisteredLists((prev) => new Map(prev).set(list.id, list));
+  }, []);
+  const unregisterList = import_react50.default.useCallback((listId) => {
+    setRegisteredLists((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(listId);
+      return newMap;
+    });
+  }, []);
+  return { registerList, unregisterList, registeredLists };
+}
+var ActiveDragContext = import_react50.default.createContext(null);
+function useActiveDrag(context) {
+  const value = import_react50.default.useContext(context);
+  if (!value) {
+    throw new Error("useActiveDrag must be used within a ActiveDragProvider");
+  }
+  return value;
+}
+var AnyDragContext = import_react50.default.createContext(false);
+
+// src/components/sorting/SharedDragProvider.tsx
+var import_core = require("@dnd-kit/core");
+var React45 = __toESM(require("react"));
+var import_react51 = require("react");
 var import_react_dom2 = require("react-dom");
+function SharedDragProvider({
+  children,
+  sharedDragProps = {
+    dragRegistrationContext: DragRegistrationContext,
+    activeDragContext: ActiveDragContext
+  }
+}) {
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.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 = (0, import_react51.useMemo)(() => {
+    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(
+      import_core.DndContext,
+      {
+        sensors,
+        collisionDetection,
+        onDragStart: handleDragStart,
+        onDragMove: handleDragMove,
+        onDragEnd: handleDragEnd
+      },
+      children,
+      mounted && activeList?.renderOverlay && dragState.source && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ React45.createElement(import_core.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 = (0, import_core.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 : (0, import_core.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
+var React46 = __toESM(require("react"));
 var normalizeListTargetIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
@@ -4611,14 +4910,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,
@@ -4627,12 +4927,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";
   }
@@ -4641,7 +4950,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
@@ -4650,193 +4968,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 = (0, import_sortable.useSortable)({ id, disabled });
-  const { activatorEvent } = (0, import_core.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 } = (0, import_sortable.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 = (0, import_core.useSensors)(
-    (0, import_core.useSensor)(import_core.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 } = (0, import_core2.useDroppable)({
+    id,
+    // Make the container droppable only when the list is empty
+    // This avoids conflicts with individual sortable items.
+    // This isn't strictly necessary since we also use a custom collision detection
+    // that prioritizes items over containers, but it helps with dropping into
+    // the best position (either above or below, rather than always below).
+    disabled: keys.length > 0
   });
-  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(
+    import_sortable.SortableContext,
     {
-      value: React44.useMemo(
-        () => ({
-          keys,
-          acceptsDrop: acceptsDrop2,
-          position,
-          setActivatorEvent,
-          axis,
-          getDropTargetParentIndex
-        }),
-        [
-          acceptsDrop2,
-          axis,
-          getDropTargetParentIndex,
-          keys,
-          position,
-          setActivatorEvent
-        ]
-      )
+      items: keys,
+      strategy: axis === "x" ? import_sortable.horizontalListSortingStrategy : import_sortable.verticalListSortingStrategy
     },
-    /* @__PURE__ */ React44.createElement(
-      import_core.DndContext,
-      {
-        sensors,
-        collisionDetection: import_core.closestCenter,
-        onDragStart: handleDragStart,
-        onDragMove: handleDragMove,
-        onDragEnd: handleDragEnd
-      },
-      /* @__PURE__ */ React44.createElement(
-        import_sortable.SortableContext,
-        {
-          items: keys,
-          strategy: axis === "x" ? import_sortable.horizontalListSortingStrategy : import_sortable.verticalListSortingStrategy
-        },
-        children
-      ),
-      mounted && renderOverlay && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ React44.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
-        document.body
-      )
-    )
-  );
+    children
+  ));
 }
-var SortableSubcomponents = {
-  Root: (0, import_react50.memo)(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],
@@ -4856,32 +5185,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 = (0, import_react51.createContext)({
+var ListViewDraggingContext = (0, import_react52.createContext)({
   indentation: 12
 });
 ListViewDraggingContext.displayName = "ListViewDraggingContext";
-var ListRowContext = (0, import_react51.createContext)({
+var ListRowContext = (0, import_react52.createContext)({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -4899,7 +5227,7 @@ var ListViewRowTitle = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ import_react51.default.createElement(
+}) => /* @__PURE__ */ import_react52.default.createElement(
   "span",
   {
     className: cx(
@@ -4918,8 +5246,8 @@ function ListViewEditableRowTitle({
   className,
   onKeyDown
 }) {
-  const inputRef = (0, import_react51.useRef)(null);
-  (0, import_react51.useLayoutEffect)(() => {
+  const inputRef = (0, import_react52.useRef)(null);
+  (0, import_react52.useLayoutEffect)(() => {
     const element = inputRef.current;
     if (!element || !autoFocus) return;
     element.focus();
@@ -4927,7 +5255,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 1);
   }, [autoFocus]);
-  return /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -4940,7 +5268,7 @@ function ListViewEditableRowTitle({
     }
   );
 }
-var RowContainer = (0, import_react51.forwardRef)(
+var RowContainer = (0, import_react52.forwardRef)(
   ({
     className,
     $marginType,
@@ -4966,7 +5294,7 @@ var RowContainer = (0, import_react51.forwardRef)(
     "aria-selected": ariaSelected,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       "div",
       {
         ref,
@@ -5034,7 +5362,7 @@ var RowContainer = (0, import_react51.forwardRef)(
     );
   }
 );
-var ListViewDragIndicatorElement = (0, import_react51.forwardRef)(
+var ListViewDragIndicatorElement = (0, import_react52.forwardRef)(
   ({
     className,
     $relativeDropPosition,
@@ -5044,7 +5372,7 @@ var ListViewDragIndicatorElement = (0, import_react51.forwardRef)(
     style: style2,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       "div",
       {
         ref,
@@ -5111,12 +5439,12 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = (0, import_react51.useContext)(ListRowContext);
+  } = (0, import_react52.useContext)(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragOverlay } = (0, import_react51.useContext)(ListViewDraggingContext);
-  const handlePress = (0, import_react51.useCallback)(
+  const { indentation, isDragOverlay } = (0, import_react52.useContext)(ListViewDraggingContext);
+  const handlePress = (0, import_react52.useCallback)(
     (event) => {
       event.preventDefault();
       if (event.button !== 0) return;
@@ -5124,14 +5452,14 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = (0, import_react51.useCallback)(
+  const handleDoubleClick = (0, import_react52.useCallback)(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const mergedStyle = (0, import_react51.useMemo)(() => {
+  const mergedStyle = (0, import_react52.useMemo)(() => {
     return isDragOverlay ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
@@ -5145,7 +5473,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
   }, ref) => {
     const Component = RowContainer;
     const relativeDropPosition = testRelativeDropPosition ?? relativeDropPositionProp;
-    const element = /* @__PURE__ */ import_react51.default.createElement(
+    const element = /* @__PURE__ */ import_react52.default.createElement(
       Component,
       {
         ref,
@@ -5179,7 +5507,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
         className,
         $clickable: !!onPress
       },
-      relativeDropPosition && /* @__PURE__ */ import_react51.default.createElement(
+      relativeDropPosition && /* @__PURE__ */ import_react52.default.createElement(
         ListViewDragIndicatorElement,
         {
           key: relativeDropPosition,
@@ -5194,11 +5522,11 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
           }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ import_react51.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ import_react52.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ import_react51.default.createElement(
+      return /* @__PURE__ */ import_react52.default.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -5211,23 +5539,23 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ import_react51.default.createElement(Sortable2.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ import_react52.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
       sortableProps,
       (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)
     ));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = (0, import_react51.createContext)(
+var RenderItemContext = (0, import_react52.createContext)(
   () => null
 );
 RenderItemContext.displayName = "RenderItemContext";
-var VirtualizedListRow = (0, import_react51.memo)(function VirtualizedListRow2({
+var VirtualizedListRow = (0, import_react52.memo)(function VirtualizedListRow2({
   index,
   style: style2
 }) {
-  const renderItem = (0, import_react51.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react51.default.createElement("div", { key: index, style: style2 }, renderItem(index));
+  const renderItem = (0, import_react52.useContext)(RenderItemContext);
+  return /* @__PURE__ */ import_react52.default.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
   size: size2,
@@ -5237,20 +5565,20 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = (0, import_react51.useRef)(null);
-  (0, import_react51.useImperativeHandle)(ref, () => ({
+  const listRef = (0, import_react52.useRef)(null);
+  (0, import_react52.useImperativeHandle)(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
     }
   }));
-  (0, import_react51.useLayoutEffect)(() => {
+  (0, import_react52.useLayoutEffect)(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = (0, import_react51.useMemo)(
+  const listStyle = (0, import_react52.useMemo)(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -5258,18 +5586,18 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ import_react51.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react52.default.createElement(
     import_react_virtualized.WindowScroller,
     {
       scrollElement,
-      style: (0, import_react51.useMemo)(() => ({ flex: "1 1 auto" }), [])
+      style: (0, import_react52.useMemo)(() => ({ flex: "1 1 auto" }), [])
     },
-    (0, import_react51.useCallback)(
+    (0, import_react52.useCallback)(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ import_react51.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react51.default.createElement(
+      }) => /* @__PURE__ */ import_react52.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react52.default.createElement(
         import_react_window.VariableSizeList,
         {
           ref: listRef,
@@ -5299,7 +5627,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     )
   ));
 });
-var VirtualizedList = (0, import_react51.memo)(
+var VirtualizedList = (0, import_react52.memo)(
   VirtualizedListInner
 );
 var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
@@ -5333,9 +5661,11 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   onDragLeave,
   onDrop,
   renderEmptyState,
-  getDropTargetParentIndex
+  getDropTargetParentIndex,
+  sharedDragProps,
+  sortableId
 }, forwardedRef) {
-  const handleClick = (0, import_react51.useCallback)(
+  const handleClick = (0, import_react52.useCallback)(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -5345,11 +5675,11 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     [onPress]
   );
-  const renderChild = (0, import_react51.useCallback)(
+  const renderChild = (0, import_react52.useCallback)(
     (index) => renderItem(data[index], index, { isDragOverlay: false }),
     [data, renderItem]
   );
-  const defaultContextValue = (0, import_react51.useMemo)(
+  const defaultContextValue = (0, import_react52.useMemo)(
     () => ({
       colorScheme,
       marginType: "none",
@@ -5374,16 +5704,16 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
       sectionHeaderVariant
     ]
   );
-  const getItemContextValue = (0, import_react51.useCallback)(
+  const getItemContextValue = (0, import_react52.useCallback)(
     (i) => {
       if (variant === "bare" || variant === "normal")
         return defaultContextValue;
       const current = renderChild(i);
-      if (!(0, import_react51.isValidElement)(current)) return;
+      if (!(0, import_react52.isValidElement)(current)) return;
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
-      const next = (0, import_react51.isValidElement)(nextChild) ? nextChild : void 0;
-      const prev = (0, import_react51.isValidElement)(prevChild) ? prevChild : void 0;
+      const next = (0, import_react52.isValidElement)(nextChild) ? nextChild : void 0;
+      const prev = (0, import_react52.isValidElement)(prevChild) ? prevChild : void 0;
       const hasMarginTop = !prev;
       const hasMarginBottom = !next || current.props.isSectionHeader || next && next.props.isSectionHeader;
       let marginType;
@@ -5436,37 +5766,39 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
       gap
     ]
   );
-  const draggingContextOverlayValue = (0, import_react51.useMemo)(
+  const draggingContextOverlayValue = (0, import_react52.useMemo)(
     () => ({ indentation, isDragOverlay: true }),
     [indentation]
   );
-  const renderOverlay = (0, import_react51.useCallback)(
-    (index) => /* @__PURE__ */ import_react51.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react51.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
+  const renderOverlay = (0, import_react52.useCallback)(
+    (index) => /* @__PURE__ */ import_react52.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react52.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = (0, import_react51.useCallback)(
+  const renderWrappedChild = (0, import_react52.useCallback)(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
-      if (!contextValue || !(0, import_react51.isValidElement)(current)) return null;
-      return /* @__PURE__ */ import_react51.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      if (!contextValue || !(0, import_react52.isValidElement)(current)) return null;
+      return /* @__PURE__ */ import_react52.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = (0, import_react51.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react51.default.createElement(
-    Sortable2.Root,
+  const ids = (0, import_react52.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react52.default.createElement(
+    Sortable.Root,
     {
+      id: sortableId,
       onMoveItem,
       keys: ids,
       renderOverlay,
       acceptsDrop: acceptsDrop2,
-      getDropTargetParentIndex
+      getDropTargetParentIndex,
+      sharedDragProps
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react51.default.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = (0, import_react51.useCallback)(
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react52.default.createElement(ScrollArea, null, children) : children(null);
+  const getItemHeight = (0, import_react52.useCallback)(
     (index) => {
       const child = getItemContextValue(index);
       const height = child?.isSectionHeader && child.sectionHeaderVariant === "label" ? SECTION_HEADER_LABEL_HEIGHT : ROW_HEIGHT;
@@ -5474,13 +5806,13 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     [getItemContextValue]
   );
-  const getKey = (0, import_react51.useCallback)(
+  const getKey = (0, import_react52.useCallback)(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = (0, import_react51.useMemo)(() => ({ indentation }), [indentation]);
-  const gapStyle = (0, import_react51.useMemo)(() => ({ gap: `${gap}px` }), [gap]);
-  return /* @__PURE__ */ import_react51.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react51.default.createElement(
+  const draggingContextValue = (0, import_react52.useMemo)(() => ({ indentation }), [indentation]);
+  const gapStyle = (0, import_react52.useMemo)(() => ({ gap: `${gap}px` }), [gap]);
+  return /* @__PURE__ */ import_react52.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       id,
@@ -5509,7 +5841,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     data.length === 0 && renderEmptyState ? renderEmptyState() : withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ import_react51.default.createElement(
+        virtualized ? /* @__PURE__ */ import_react52.default.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -5526,40 +5858,40 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   ));
 });
 var ListViewRoot = memoGeneric(ListViewRootInner);
-var ChildrenListViewInner = (0, import_react51.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = (0, import_react51.useMemo)(
-    () => import_react51.Children.toArray(children).flatMap(
-      (child) => (0, import_react51.isValidElement)(child) ? [child] : []
+var ChildrenListViewInner = (0, import_react52.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+  const items = (0, import_react52.useMemo)(
+    () => import_react52.Children.toArray(children).flatMap(
+      (child) => (0, import_react52.isValidElement)(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: (0, import_react51.useCallback)(
+      keyExtractor: (0, import_react52.useCallback)(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: (0, import_react51.useCallback)((item) => item, [])
+      renderItem: (0, import_react52.useCallback)((item) => item, [])
     }
   );
 });
-var ChildrenListView = (0, import_react51.memo)(ChildrenListViewInner);
+var ChildrenListView = (0, import_react52.memo)(ChildrenListViewInner);
 var SimpleListViewInner = forwardRefGeneric(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ import_react51.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react52.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ import_react51.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react52.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
 var SimpleListView = memoGeneric(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = (0, import_react51.memo)(ListViewRowTitle);
-  ListView2.EditableRowTitle = (0, import_react51.memo)(ListViewEditableRowTitle);
+  ListView2.RowTitle = (0, import_react52.memo)(ListViewRowTitle);
+  ListView2.EditableRowTitle = (0, import_react52.memo)(ListViewEditableRowTitle);
   ListView2.Row = memoGeneric(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
@@ -5576,7 +5908,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
@@ -5585,15 +5917,15 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react52.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react52.useCallback)(
+  const { expandable } = (0, import_react53.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react53.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react52.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react52.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react53.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react53.default.createElement(
     IconButton,
     {
       className: chevronClassName,
@@ -5601,7 +5933,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react52.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react52.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react53.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react53.default.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -5654,11 +5986,13 @@ var List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
-      dragIndicatorStyle
+      dragIndicatorStyle,
+      sortableId,
+      sharedDragProps
     } = props;
-    const [internalHoveredId, setHoveredId] = (0, import_react53.useState)();
-    const [internalRenamingId, setRenamingId] = (0, import_react53.useState)();
-    const [dropdownOpenId, setDropdownOpenId] = (0, import_react53.useState)();
+    const [internalHoveredId, setHoveredId] = (0, import_react54.useState)();
+    const [internalRenamingId, setRenamingId] = (0, import_react54.useState)();
+    const [dropdownOpenId, setDropdownOpenId] = (0, import_react54.useState)();
     const hoveredId = internalHoveredId ?? testHoveredId;
     const renamingId = testRenamingId ?? internalRenamingId;
     const handleSelect = (itemId, event) => {
@@ -5683,17 +6017,17 @@ var List = memoGeneric(
       );
     };
     const ViewComponent = expandable ? TreeView : ListView;
-    const fileDropTargetRef = (0, import_react53.useRef)(null);
+    const fileDropTargetRef = (0, import_react54.useRef)(null);
     const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
       fileDropTargetRef,
       onFilesDrop
     );
-    (0, import_react53.useImperativeHandle)(ref, () => ({
+    (0, import_react54.useImperativeHandle)(ref, () => ({
       editName: (id) => {
         setRenamingId(id);
       }
     }));
-    return /* @__PURE__ */ import_react53.default.createElement(
+    return /* @__PURE__ */ import_react54.default.createElement(
       ViewComponent.Root,
       {
         variant: "bare",
@@ -5715,6 +6049,8 @@ var List = memoGeneric(
         onMoveItem,
         renderEmptyState,
         getDropTargetParentIndex,
+        sharedDragProps,
+        sortableId,
         ...dropTargetProps,
         renderItem: (item, _, { isDragOverlay }) => {
           const id = getId(item);
@@ -5736,7 +6072,7 @@ var List = memoGeneric(
               handleSelect(id);
             }
           };
-          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ import_react53.default.createElement(
+          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ import_react54.default.createElement(
             ActionMenu,
             {
               menuItems,
@@ -5752,7 +6088,7 @@ var List = memoGeneric(
           ));
           const end = action || detailPosition === "end" && renderDetail?.(item, isSelected);
           const below = detailPosition === "below" && renderDetail?.(item, isSelected);
-          return /* @__PURE__ */ import_react53.default.createElement(
+          return /* @__PURE__ */ import_react54.default.createElement(
             ViewComponent.Row,
             {
               id,
@@ -5800,12 +6136,12 @@ var List = memoGeneric(
               },
               dragIndicatorStyle
             },
-            /* @__PURE__ */ import_react53.default.createElement(
+            /* @__PURE__ */ import_react54.default.createElement(
               "div",
               {
                 className: cx("flex flex-1 items-center px-2", rowGapMap[size2])
               },
-              thumbnail && /* @__PURE__ */ import_react53.default.createElement(
+              thumbnail && /* @__PURE__ */ import_react54.default.createElement(
                 "div",
                 {
                   className: cx(
@@ -5818,7 +6154,7 @@ var List = memoGeneric(
                 },
                 thumbnail
               ),
-              /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ import_react53.default.createElement(
+              /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ import_react54.default.createElement(
                 ViewComponent.EditableRowTitle,
                 {
                   value: getName(item),
@@ -5833,7 +6169,7 @@ var List = memoGeneric(
                     e.stopPropagation();
                   }
                 }
-              ) : /* @__PURE__ */ import_react53.default.createElement(
+              ) : /* @__PURE__ */ import_react54.default.createElement(
                 ViewComponent.RowTitle,
                 {
                   className: cx(
@@ -5842,8 +6178,8 @@ var List = memoGeneric(
                   )
                 },
                 getName(item)
-              )), end && detailPosition === "end" && /* @__PURE__ */ import_react53.default.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ import_react53.default.createElement(DetailContainer, { selected: isSelected }, below)),
-              end && detailPosition === "below" && /* @__PURE__ */ import_react53.default.createElement(DetailContainer, { selected: isSelected }, end)
+              )), end && detailPosition === "end" && /* @__PURE__ */ import_react54.default.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ import_react54.default.createElement(DetailContainer, { selected: isSelected }, below)),
+              end && detailPosition === "below" && /* @__PURE__ */ import_react54.default.createElement(DetailContainer, { selected: isSelected }, end)
             )
           );
         }
@@ -5851,11 +6187,11 @@ var List = memoGeneric(
     );
   })
 );
-var DetailContainer = (0, import_react53.memo)(function DetailContainer2({
+var DetailContainer = (0, import_react54.memo)(function DetailContainer2({
   children,
   selected
 }) {
-  return /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(
     "div",
     {
       className: cx("flex items-center gap-2", selected && "text-primary"),
@@ -5900,20 +6236,20 @@ var fontStyleMap = {
 // src/components/Collection.tsx
 var Collection = forwardRefGeneric(function Collection2(props, ref) {
   const { viewType, ...rest } = props;
-  return viewType === "grid" ? /* @__PURE__ */ import_react54.default.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ import_react54.default.createElement(List, { ref, ...rest });
+  return viewType === "grid" ? /* @__PURE__ */ import_react55.default.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ import_react55.default.createElement(List, { ref, ...rest });
 });
 
 // src/components/ColorSwatch.tsx
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var colorSwatchSizeMap = {
   xsmall: 21,
   small: 27,
   medium: 36,
   large: 48
 };
-var ColorSwatch = (0, import_react55.forwardRef)(function ColorSwatch2({ color, size: size2 = "small", checked, style: style2, ...props }, ref) {
+var ColorSwatch = (0, import_react56.forwardRef)(function ColorSwatch2({ color, size: size2 = "small", checked, style: style2, ...props }, ref) {
   const sizePx = colorSwatchSizeMap[size2];
-  return /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     "button",
     {
       ...props,
@@ -5934,7 +6270,7 @@ var ColorSwatch = (0, import_react55.forwardRef)(function ColorSwatch2({ color,
 
 // src/components/ColorSwatchControl.tsx
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 function ColorSwatchControl(props) {
   const {
     options,
@@ -5949,7 +6285,7 @@ function ColorSwatchControl(props) {
     id,
     style: style2
   } = props;
-  const styles3 = (0, import_react56.useMemo)(() => {
+  const styles3 = (0, import_react57.useMemo)(() => {
     return {
       display: "grid",
       gridTemplateColumns: `repeat(auto-fill, minmax(${colorSwatchSizeMap[size2]}px, 1fr))`,
@@ -5957,8 +6293,8 @@ function ColorSwatchControl(props) {
       ...style2
     };
   }, [size2, style2]);
-  const content = /* @__PURE__ */ import_react56.default.createElement("div", { className, id, style: styles3 }, options.map((option) => {
-    const item = /* @__PURE__ */ import_react56.default.createElement(
+  const content = /* @__PURE__ */ import_react57.default.createElement("div", { className, id, style: styles3 }, options.map((option) => {
+    const item = /* @__PURE__ */ import_react57.default.createElement(
       ColorSwatch,
       {
         key: option,
@@ -5971,7 +6307,7 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return /* @__PURE__ */ import_react56.default.createElement(
+    return /* @__PURE__ */ import_react57.default.createElement(
       ToggleGroupPrimitive.Item,
       {
         asChild: true,
@@ -5982,7 +6318,7 @@ function ColorSwatchControl(props) {
       item
     );
   }));
-  return /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(
     ToggleGroupPrimitive.Root,
     {
       type: "single",
@@ -5997,11 +6333,11 @@ function ColorSwatchControl(props) {
 
 // src/components/Combobox.tsx
 var import_noya_icons5 = require("@noya-app/noya-icons");
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 
 // src/utils/combobox.ts
 var import_noya_utils9 = require("@noya-app/noya-utils");
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/utils/fuzzyScorer.ts
 var import_vscode_fuzzy_scorer = require("vscode-fuzzy-scorer");
@@ -6323,7 +6659,7 @@ function getNextIndex({
   return nextIndex;
 }
 function useComboboxState(state) {
-  return (0, import_react57.useSyncExternalStore)(
+  return (0, import_react58.useSyncExternalStore)(
     state.subscribe,
     state.getSnapshot,
     state.getSnapshot
@@ -6332,7 +6668,7 @@ function useComboboxState(state) {
 
 // src/components/ComboboxMenu.tsx
 var import_noya_icons4 = require("@noya-app/noya-icons");
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
     items,
@@ -6344,7 +6680,7 @@ var ComboboxMenu = memoGeneric(
     indented,
     iconPosition = "right"
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react58.default.createElement(
+    return /* @__PURE__ */ import_react59.default.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -6360,7 +6696,7 @@ var ComboboxMenu = memoGeneric(
         style: style2,
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ import_react58.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ import_react58.default.createElement(
+            return /* @__PURE__ */ import_react59.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ import_react59.default.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -6371,7 +6707,7 @@ var ComboboxMenu = memoGeneric(
             item: typeof item.title === "string" ? item.title : item.value,
             itemScore: item
           });
-          return /* @__PURE__ */ import_react58.default.createElement(
+          return /* @__PURE__ */ import_react59.default.createElement(
             ListView.Row,
             {
               key: item.value,
@@ -6384,12 +6720,12 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react58.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react58.default.createElement(import_noya_icons4.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react58.default.createElement(
+            /* @__PURE__ */ import_react59.default.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react59.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react59.default.createElement(import_noya_icons4.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react59.default.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
               }
-            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ import_react58.default.createElement(
+            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ import_react59.default.createElement(
               "span",
               {
                 key: `${item.value}-token-${j}`,
@@ -6400,7 +6736,7 @@ var ComboboxMenu = memoGeneric(
               },
               token.text
             ))),
-            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, item.shortcut ? /* @__PURE__ */ import_react58.default.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
+            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, item.shortcut ? /* @__PURE__ */ import_react59.default.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
           );
         }
       }
@@ -6427,7 +6763,7 @@ var Combobox = memoGeneric(
     onDeleteWhenEmpty,
     ...rest
   }, forwardedRef) {
-    const props = (0, import_react59.useMemo)(() => {
+    const props = (0, import_react60.useMemo)(() => {
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
@@ -6457,7 +6793,7 @@ var Combobox = memoGeneric(
       rest.onBlur,
       rest.allowArbitraryValues
     ]);
-    const ref = (0, import_react59.useRef)(null);
+    const ref = (0, import_react60.useRef)(null);
     function getInitialValueString() {
       if (props.mode === "string") {
         return props.value ?? "";
@@ -6466,7 +6802,7 @@ var Combobox = memoGeneric(
       }
     }
     const initialValueString = getInitialValueString();
-    const [comboboxState] = (0, import_react59.useState)(
+    const [comboboxState] = (0, import_react60.useState)(
       () => new ComboboxState(
         items,
         initialValueString,
@@ -6474,26 +6810,26 @@ var Combobox = memoGeneric(
       )
     );
     const state = useComboboxState(comboboxState);
-    const [isFocused, setIsFocused] = (0, import_react59.useState)(false);
-    const listRef = (0, import_react59.useRef)(null);
-    const [shouldBlur, setShouldBlur] = (0, import_react59.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react60.useState)(false);
+    const listRef = (0, import_react60.useRef)(null);
+    const [shouldBlur, setShouldBlur] = (0, import_react60.useState)(false);
     const { fieldId: id } = useLabel({
       fieldId: rest.id
     });
-    (0, import_react59.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
-    (0, import_react59.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       comboboxState.setFilter(initialValueString);
     }, [comboboxState, initialValueString]);
     const { filter, selectedIndex, filteredItems } = state;
     const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
-    (0, import_react59.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const handleBlur = (0, import_react59.useCallback)(() => {
+    const handleBlur = (0, import_react60.useCallback)(() => {
       ref.current?.blur();
       comboboxState.reset(initialValueString);
       if (props.mode === "string") {
@@ -6512,7 +6848,7 @@ var Combobox = memoGeneric(
       }
       setIsFocused(false);
     }, [filter, initialValueString, props, state, comboboxState]);
-    const handleFocus = (0, import_react59.useCallback)(
+    const handleFocus = (0, import_react60.useCallback)(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
@@ -6526,7 +6862,7 @@ var Combobox = memoGeneric(
       },
       [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
-    const handleUpdateSelection = (0, import_react59.useCallback)(
+    const handleUpdateSelection = (0, import_react60.useCallback)(
       (item) => {
         if (item.type !== void 0) return;
         const selectedItem = comboboxState.selectCurrentItem(item);
@@ -6542,7 +6878,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleIndexChange = (0, import_react59.useCallback)(
+    const handleIndexChange = (0, import_react60.useCallback)(
       (index) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
@@ -6558,7 +6894,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleChange = (0, import_react59.useCallback)(
+    const handleChange = (0, import_react60.useCallback)(
       (value) => {
         if (readOnly) return;
         comboboxState.setFilter(value);
@@ -6573,7 +6909,7 @@ var Combobox = memoGeneric(
       },
       [readOnly, props, comboboxState]
     );
-    const handleKeyDown = (0, import_react59.useCallback)(
+    const handleKeyDown = (0, import_react60.useCallback)(
       (event) => {
         let handled = false;
         const item = comboboxState.getSelectedItem();
@@ -6662,7 +6998,7 @@ var Combobox = memoGeneric(
       ]
     );
     const typeaheadValue = comboboxState.getTypeaheadValue();
-    (0, import_react59.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react60.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
         if (ref.current) {
@@ -6681,7 +7017,7 @@ var Combobox = memoGeneric(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    const handleChevronClick = (0, import_react59.useCallback)(
+    const handleChevronClick = (0, import_react60.useCallback)(
       (event) => {
         event.stopPropagation();
         if (shouldShowMenu) {
@@ -6701,14 +7037,14 @@ var Combobox = memoGeneric(
         comboboxState
       ]
     );
-    (0, import_react59.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       if (!shouldBlur) return;
       if (document.activeElement !== ref.current) return;
       setShouldBlur(false);
       ref.current?.focus();
       handleBlur();
     }, [shouldBlur, handleBlur]);
-    const { sectionHeaderCount, menuItemsCount } = (0, import_react59.useMemo)(
+    const { sectionHeaderCount, menuItemsCount } = (0, import_react60.useMemo)(
       () => ({
         sectionHeaderCount: filteredItems.filter(
           (item) => isMenuItemSectionHeader(item)
@@ -6722,19 +7058,19 @@ var Combobox = memoGeneric(
     const hasCheckedItems = items.some(
       (item) => isSelectableMenuItem(item) && item.checked
     );
-    return /* @__PURE__ */ import_react59.default.createElement(
+    return /* @__PURE__ */ import_react60.default.createElement(
       InputField2.Root,
       {
         id,
         size: size2,
         sideOffset: 6,
-        end: /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, loading && /* @__PURE__ */ import_react59.default.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ import_react59.default.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ import_react59.default.createElement(
+        end: /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, loading && /* @__PURE__ */ import_react60.default.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ import_react60.default.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ import_react60.default.createElement(
           InputField2.Button,
           {
             variant: "floating",
             onClick: handleChevronClick
           },
-          /* @__PURE__ */ import_react59.default.createElement(
+          /* @__PURE__ */ import_react60.default.createElement(
             import_noya_icons5.DropdownChevronIcon,
             {
               className: cx(
@@ -6753,7 +7089,7 @@ var Combobox = memoGeneric(
             ListView.rowHeight * 10.5
           );
           const listSize = { width, height };
-          return /* @__PURE__ */ import_react59.default.createElement(
+          return /* @__PURE__ */ import_react60.default.createElement(
             "div",
             {
               className: cx(
@@ -6761,7 +7097,7 @@ var Combobox = memoGeneric(
                 shouldShowMenu && !readOnly ? "flex" : "hidden"
               )
             },
-            filteredItems.length > 0 && !loading ? /* @__PURE__ */ import_react59.default.createElement(
+            filteredItems.length > 0 && !loading ? /* @__PURE__ */ import_react60.default.createElement(
               ComboboxMenu,
               {
                 ref: listRef,
@@ -6775,11 +7111,11 @@ var Combobox = memoGeneric(
                 },
                 indented: hasCheckedItems
               }
-            ) : /* @__PURE__ */ import_react59.default.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ import_react59.default.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
+            ) : /* @__PURE__ */ import_react60.default.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ import_react60.default.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
           );
         }
       },
-      /* @__PURE__ */ import_react59.default.createElement(
+      /* @__PURE__ */ import_react60.default.createElement(
         InputField2.Input,
         {
           ref,
@@ -6804,7 +7140,7 @@ var Combobox = memoGeneric(
           ...readOnly ? { readOnly: true } : {}
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react59.default.createElement(
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react60.default.createElement(
         InputField2.Typeahead,
         {
           value: typeaheadValue,
@@ -6818,22 +7154,22 @@ var Combobox = memoGeneric(
 );
 
 // src/components/CommandPalette.tsx
-var import_react62 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 
 // src/components/SearchCompletionMenu.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react61 = __toESM(require("react"));
+var import_react62 = __toESM(require("react"));
 
 // src/components/Divider.tsx
-var import_react60 = __toESM(require("react"));
-var Divider = (0, import_react60.memo)(function Divider2({
+var import_react61 = __toESM(require("react"));
+var Divider = (0, import_react61.memo)(function Divider2({
   variant = "normal",
   overflow = 0,
   className,
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement(
     "div",
     {
       className: cx(
@@ -6853,14 +7189,14 @@ var Divider = (0, import_react60.memo)(function Divider2({
     }
   );
 });
-var DividerVertical = (0, import_react60.memo)(function DividerVertical2({
+var DividerVertical = (0, import_react61.memo)(function DividerVertical2({
   variant = "normal",
   overflow = 0,
   className,
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement(
     "div",
     {
       className: cx(`
@@ -6880,7 +7216,7 @@ var DividerVertical = (0, import_react60.memo)(function DividerVertical2({
 });
 
 // src/components/SearchCompletionMenu.tsx
-var SearchCompletionMenu = (0, import_react61.forwardRef)(function SearchCompletionMenu2({
+var SearchCompletionMenu = (0, import_react62.forwardRef)(function SearchCompletionMenu2({
   onSelect,
   onHover,
   onClose,
@@ -6889,17 +7225,17 @@ var SearchCompletionMenu = (0, import_react61.forwardRef)(function SearchComplet
   testSelectedIndex,
   testSearch
 }, forwardedRef) {
-  const [state, setState] = (0, import_react61.useState)({
+  const [state, setState] = (0, import_react62.useState)({
     search: testSearch ?? "",
     index: 0
   });
   const { index, search } = state;
-  const listRef = import_react61.default.useRef(null);
+  const listRef = import_react62.default.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
-  const results = (0, import_react61.useMemo)(
+  const results = (0, import_react62.useMemo)(
     () => fuzzyFilter({
       items: items.map(
         (item) => typeof item.title === "string" ? item.title : item.value
@@ -6911,13 +7247,13 @@ var SearchCompletionMenu = (0, import_react61.forwardRef)(function SearchComplet
     })),
     [items, search]
   );
-  const setSearch = (0, import_react61.useCallback)((search2) => {
+  const setSearch = (0, import_react62.useCallback)((search2) => {
     setState((state2) => ({ ...state2, search: search2, index: 0 }));
   }, []);
-  const setIndex = (0, import_react61.useCallback)((index2) => {
+  const setIndex = (0, import_react62.useCallback)((index2) => {
     setState((state2) => ({ ...state2, index: index2 }));
   }, []);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     onHover?.(results[index]);
   }, [index, onHover, results]);
   const searchHeight = 31;
@@ -6932,14 +7268,14 @@ var SearchCompletionMenu = (0, import_react61.forwardRef)(function SearchComplet
     width: listSize.width,
     height: searchHeight + listSize.height
   };
-  const selectAndClose = (0, import_react61.useCallback)(
+  const selectAndClose = (0, import_react62.useCallback)(
     (item) => {
       onSelect(item);
       onClose();
     },
     [onSelect, onClose]
   );
-  const handleKeyDown = (0, import_react61.useCallback)(
+  const handleKeyDown = (0, import_react62.useCallback)(
     (event) => {
       (0, import_noya_keymap5.handleKeyboardEvent)(event.nativeEvent, (0, import_noya_keymap5.getCurrentPlatform)(navigator), {
         ArrowUp: () => {
@@ -6967,13 +7303,13 @@ var SearchCompletionMenu = (0, import_react61.forwardRef)(function SearchComplet
     },
     [index, onClose, selectAndClose, results, setIndex]
   );
-  const inputRef = (0, import_react61.useRef)(null);
-  (0, import_react61.useImperativeHandle)(forwardedRef, () => ({
+  const inputRef = (0, import_react62.useRef)(null);
+  (0, import_react62.useImperativeHandle)(forwardedRef, () => ({
     focus: () => {
       inputRef.current?.focus();
     }
   }));
-  return /* @__PURE__ */ import_react61.default.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ import_react61.default.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ import_react61.default.createElement(
+  return /* @__PURE__ */ import_react62.default.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ import_react62.default.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ import_react62.default.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -6993,7 +7329,7 @@ var SearchCompletionMenu = (0, import_react61.forwardRef)(function SearchComplet
       onChange: setSearch,
       onKeyDown: handleKeyDown
     }
-  )), /* @__PURE__ */ import_react61.default.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ import_react61.default.createElement(
+  )), /* @__PURE__ */ import_react62.default.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ import_react62.default.createElement(
     ComboboxMenu,
     {
       ref: listRef,
@@ -7008,29 +7344,29 @@ var SearchCompletionMenu = (0, import_react61.forwardRef)(function SearchComplet
       onHoverIndex: setIndex,
       indented: hasCheckedItems
     }
-  ) : /* @__PURE__ */ import_react61.default.createElement(
+  ) : /* @__PURE__ */ import_react62.default.createElement(
     "div",
     {
       ...listSize,
       className: "flex flex-col p-20 items-center justify-center"
     },
-    /* @__PURE__ */ import_react61.default.createElement(Small, { color: "textDisabled" }, "No results")
+    /* @__PURE__ */ import_react62.default.createElement(Small, { color: "textDisabled" }, "No results")
   ));
 });
 
 // src/components/CommandPalette.tsx
-var CommandPalette = (0, import_react62.memo)(function CommandPalette2({
+var CommandPalette = (0, import_react63.memo)(function CommandPalette2({
   showCommandPalette,
   setShowCommandPalette,
   items,
   onSelect,
   onHover
 }) {
-  const menuRef = import_react62.default.useRef(null);
-  const handleClose = import_react62.default.useCallback(() => {
+  const menuRef = import_react63.default.useRef(null);
+  const handleClose = import_react63.default.useCallback(() => {
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
-  return /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(
     Dialog,
     {
       style: {
@@ -7056,7 +7392,7 @@ var CommandPalette = (0, import_react62.memo)(function CommandPalette2({
         }, 0);
       }
     },
-    /* @__PURE__ */ import_react62.default.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ import_react62.default.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ import_react62.default.createElement(
+    /* @__PURE__ */ import_react63.default.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ import_react63.default.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ import_react63.default.createElement(
       SearchCompletionMenu,
       {
         ref: menuRef,
@@ -7071,21 +7407,21 @@ var CommandPalette = (0, import_react62.memo)(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-var import_react63 = __toESM(require("react"));
-var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ import_react63.default.createElement(
+var import_react64 = __toESM(require("react"));
+var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ import_react64.default.createElement(
   Tooltip,
   {
     key: userId,
-    content: /* @__PURE__ */ import_react63.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react63.default.createElement(Small, null, name))
+    content: /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react64.default.createElement(Small, null, name))
   },
-  /* @__PURE__ */ import_react63.default.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
+  /* @__PURE__ */ import_react64.default.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ import_react63.default.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ import_react63.default.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react63.default.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ import_react63.default.createElement(
+  return /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ import_react64.default.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react64.default.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ import_react64.default.createElement(
     Button_default,
     {
       active: isAssistantOpen,
@@ -7098,7 +7434,7 @@ var ConnectedUsersMenuLayout = ({
 
 // src/components/DraggableMenuButton.tsx
 var import_noya_icons6 = require("@noya-app/noya-icons");
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   items,
   onSelect,
@@ -7107,9 +7443,9 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   className,
   style: style2
 }) {
-  const [open, setOpen] = (0, import_react64.useState)(false);
-  const [downPosition, setDownPosition] = (0, import_react64.useState)(null);
-  const handlePointerDownCapture = (0, import_react64.useCallback)(
+  const [open, setOpen] = (0, import_react65.useState)(false);
+  const [downPosition, setDownPosition] = (0, import_react65.useState)(null);
+  const handlePointerDownCapture = (0, import_react65.useCallback)(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -7122,7 +7458,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [open]
   );
-  const handlePointerUp = (0, import_react64.useCallback)(
+  const handlePointerUp = (0, import_react65.useCallback)(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -7138,13 +7474,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [downPosition, open]
   );
-  const handleOpenChange = (0, import_react64.useCallback)(
+  const handleOpenChange = (0, import_react65.useCallback)(
     (isOpen) => {
       if (!isOpen) setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(
     "div",
     {
       className: cx(
@@ -7160,7 +7496,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onClick?.();
       }
     },
-    items && onSelect ? /* @__PURE__ */ import_react64.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react65.default.createElement(
       DropdownMenu,
       {
         open,
@@ -7169,13 +7505,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react64.default.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ import_react64.default.createElement(
+      /* @__PURE__ */ import_react65.default.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ import_react65.default.createElement(
         import_noya_icons6.DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ import_react64.default.createElement(
+    ) : /* @__PURE__ */ import_react65.default.createElement(
       import_noya_icons6.DragHandleDots2Icon,
       {
         color: isVisible || open ? cssVars.colors.icon : "transparent"
@@ -7186,10 +7522,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
-var React58 = __toESM(require("react"));
-var import_react65 = require("react");
-var Drawer = React58.memo(
-  React58.forwardRef(function Drawer2({
+var React61 = __toESM(require("react"));
+var import_react66 = require("react");
+var Drawer = React61.memo(
+  React61.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -7208,7 +7544,7 @@ var Drawer = React58.memo(
       value: open,
       onChange: onOpenChange
     });
-    (0, import_react65.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react66.useImperativeHandle)(forwardedRef, () => ({
       expand: () => {
         setInternalOpen(true);
       },
@@ -7219,7 +7555,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(
@@ -7227,7 +7563,7 @@ var Drawer = React58.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React58.createElement(
+    ), /* @__PURE__ */ React61.createElement(
       Dialog3.Content,
       {
         id,
@@ -7239,24 +7575,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
-var import_react66 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 var Fade = ({
   children,
   direction = "right",
@@ -7278,7 +7614,7 @@ var Fade = ({
     top: "left-0 right-0 top-0",
     bottom: "left-0 right-0 bottom-0"
   }[direction];
-  return /* @__PURE__ */ import_react66.default.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ import_react66.default.createElement(
+  return /* @__PURE__ */ import_react67.default.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ import_react67.default.createElement(
     "div",
     {
       className: cx(
@@ -7297,17 +7633,17 @@ var Fade = ({
 };
 
 // src/components/file-explorer/FileExplorerLayout.tsx
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var FileExplorerLayout = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ import_react67.default.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
+}) => /* @__PURE__ */ import_react68.default.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
   children
-}) => /* @__PURE__ */ import_react67.default.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ import_react67.default.createElement(
+}) => /* @__PURE__ */ import_react68.default.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ import_react68.default.createElement(
   IconButton,
   {
     iconName: "UploadIcon",
@@ -7318,14 +7654,14 @@ var FileExplorerUploadButton = ({
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
-    return /* @__PURE__ */ import_react67.default.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
+    return /* @__PURE__ */ import_react68.default.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
   }
 );
 var FileExplorerDetail = ({
   selected,
   size: size2,
   children
-}) => /* @__PURE__ */ import_react67.default.createElement(
+}) => /* @__PURE__ */ import_react68.default.createElement(
   "span",
   {
     className: cx(
@@ -7338,10 +7674,10 @@ var FileExplorerDetail = ({
 var FileExplorerEmptyState = ({
   label = "No files",
   ...props
-}) => /* @__PURE__ */ import_react67.default.createElement(Banner, { label, className: "mx-3", ...props });
+}) => /* @__PURE__ */ import_react68.default.createElement(Banner, { label, className: "mx-3", ...props });
 
 // src/components/FillInputField.tsx
-var import_react69 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 
 // ../noya-file-format/src/types.ts
 var types_exports = {};
@@ -7666,25 +8002,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var React62 = __toESM(require("react"));
+var React65 = __toESM(require("react"));
 
 // src/contexts/ImageDataContext.tsx
-var React61 = __toESM(require("react"));
-var ImageDataContext = React61.createContext(
+var React64 = __toESM(require("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");
   }
@@ -7692,14 +8028,14 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-var import_react68 = require("react");
+var import_react69 = require("react");
 function useObjectURL(object) {
-  const objectURL = (0, import_react68.useMemo)(() => {
+  const objectURL = (0, import_react69.useMemo)(() => {
     if (object instanceof Blob) return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  (0, import_react68.useLayoutEffect)(() => {
+  (0, import_react69.useLayoutEffect)(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -7750,10 +8086,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`
@@ -7772,7 +8108,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React62.memo(
+var PatternPreviewBackground = React65.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -7781,7 +8117,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})`,
@@ -7789,44 +8125,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,
@@ -7838,7 +8174,7 @@ var FillPreviewBackground = React62.memo(function FillPreviewBackground2({
 });
 
 // src/components/FillInputField.tsx
-var FillButton = (0, import_react69.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react69.default.createElement(
+var FillButton = (0, import_react70.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react70.default.createElement(
   "button",
   {
     ref,
@@ -7849,14 +8185,14 @@ var FillButton = (0, import_react69.forwardRef)(({ className, ...props }, ref) =
     ...props
   }
 ));
-var FillInputField = (0, import_react69.memo)(
-  (0, import_react69.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ import_react69.default.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ import_react69.default.createElement(FillPreviewBackground, { value }));
+var FillInputField = (0, import_react70.memo)(
+  (0, import_react70.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
+    return /* @__PURE__ */ import_react70.default.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ import_react70.default.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-var import_react70 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -7949,7 +8285,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, /* @__PURE__ */ import_react70.default.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ import_react70.default.createElement(
+  return /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, /* @__PURE__ */ import_react71.default.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ import_react71.default.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -7976,16 +8312,16 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = (0, import_react70.useState)({ x: initialX, y: initialY });
-  const [size2, setSize] = (0, import_react70.useState)({
+  const [position, setPosition] = (0, import_react71.useState)({ x: initialX, y: initialY });
+  const [size2, setSize] = (0, import_react71.useState)({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = (0, import_react70.useState)(false);
-  const [isResizing, setIsResizing] = (0, import_react70.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react70.useState)({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = (0, import_react70.useState)(null);
-  const wrapperRef = (0, import_react70.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react71.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react71.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react71.useState)({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = (0, import_react71.useState)(null);
+  const wrapperRef = (0, import_react71.useRef)(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
       document.body.style.userSelect = "none";
@@ -7993,7 +8329,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = (0, import_react70.useCallback)((e) => {
+  const handleMouseDown = (0, import_react71.useCallback)((e) => {
     if (!wrapperRef.current) return;
     const rect = wrapperRef.current.getBoundingClientRect();
     setDragOffset({
@@ -8002,7 +8338,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = (0, import_react70.useCallback)(
+  const handleResizeStart = (0, import_react71.useCallback)(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -8011,7 +8347,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = (0, import_react70.useCallback)(
+  const handleMouseMove = (0, import_react71.useCallback)(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -8065,13 +8401,13 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = (0, import_react70.useCallback)((_e) => {
+  const handleMouseUp = (0, import_react71.useCallback)((_e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  import_react70.default.useEffect(() => {
+  import_react71.default.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -8081,11 +8417,11 @@ var FloatingWindow = ({
   }, [handleMouseMove, handleMouseUp]);
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = (0, import_react70.useCallback)(() => {
+  const handleClose = (0, import_react71.useCallback)(() => {
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ import_react70.default.createElement(
+  return /* @__PURE__ */ import_react71.default.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -8100,7 +8436,7 @@ var FloatingWindow = ({
         zIndex: cssVars.zIndex.menu
       }
     },
-    /* @__PURE__ */ import_react70.default.createElement(
+    /* @__PURE__ */ import_react71.default.createElement(
       "div",
       {
         style: {
@@ -8111,9 +8447,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ import_react70.default.createElement(Divider, null),
-    /* @__PURE__ */ import_react70.default.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ import_react70.default.createElement(
+    /* @__PURE__ */ import_react71.default.createElement(Divider, null),
+    /* @__PURE__ */ import_react71.default.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ import_react71.default.createElement(
       "div",
       {
         key: direction,
@@ -8126,8 +8462,8 @@ var FloatingWindow = ({
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var React65 = __toESM(require("react"));
-var GradientPicker = React65.memo(function GradientPicker2({
+var React68 = __toESM(require("react"));
+var GradientPicker = React68.memo(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -8136,7 +8472,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: import_noya_colorpicker2.rgbaToHsva,
@@ -8145,30 +8481,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(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React68.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -8179,19 +8515,19 @@ var GradientPicker = React65.memo(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React65.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React65.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React65.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React68.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React68.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React68.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
 // src/components/InspectorContainer.tsx
-var import_react71 = __toESM(require("react"));
-var InspectorContainer = (0, import_react71.memo)(
-  (0, import_react71.forwardRef)(function InspectorContainer2({
+var import_react72 = __toESM(require("react"));
+var InspectorContainer = (0, import_react72.memo)(
+  (0, import_react72.forwardRef)(function InspectorContainer2({
     header,
     children,
     fallback,
@@ -8200,7 +8536,7 @@ var InspectorContainer = (0, import_react71.memo)(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react71.default.createElement(
+    return /* @__PURE__ */ import_react72.default.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -8215,32 +8551,32 @@ var InspectorContainer = (0, import_react71.memo)(
         }
       },
       header,
-      children ? /* @__PURE__ */ import_react71.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react71.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
+      children ? /* @__PURE__ */ import_react72.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react72.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var React67 = __toESM(require("react"));
-var LabeledElementView = React67.memo(function LabeledElementView2({
+var React70 = __toESM(require("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,
@@ -8253,7 +8589,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();
@@ -8315,19 +8651,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
-var import_react73 = __toESM(require("react"));
+var import_react74 = __toESM(require("react"));
 
 // src/hooks/useIndent.ts
-var import_react72 = __toESM(require("react"));
-var IndentContext = import_react72.default.createContext({
+var import_react73 = __toESM(require("react"));
+var IndentContext = import_react73.default.createContext({
   indentLevel: 0
 });
 var useIndent = () => {
-  const { indentLevel } = import_react72.default.useContext(IndentContext);
+  const { indentLevel } = import_react73.default.useContext(IndentContext);
   return indentLevel;
 };
 
@@ -8340,7 +8676,7 @@ var labeledFieldStyles = (labelPosition) => cx(
 var labelPositionInset = {
   position: "inset"
 };
-var LabeledField = (0, import_react73.memo)(function LabeledField2({
+var LabeledField = (0, import_react74.memo)(function LabeledField2({
   children,
   label,
   labelPosition: labelPositionProp,
@@ -8356,15 +8692,15 @@ var LabeledField = (0, import_react73.memo)(function LabeledField2({
   const labelWidth = labelWidthFromContext ?? minWidth;
   const labelPositionFromContext = useLabelPosition();
   const labelPosition = labelPositionProp ?? labelPositionFromContext ?? "start";
-  const labeledFieldClasses = (0, import_react73.useMemo)(
+  const labeledFieldClasses = (0, import_react74.useMemo)(
     () => labeledFieldStyles(labelPosition),
     [labelPosition]
   );
-  const labelContextValue = (0, import_react73.useMemo)(
+  const labelContextValue = (0, import_react74.useMemo)(
     () => ({ fieldId, label }),
     [fieldId, label]
   );
-  const indentStyle = (0, import_react73.useMemo)(
+  const indentStyle = (0, import_react74.useMemo)(
     () => ({
       width: indentLevel * 8,
       flexBasis: indentLevel * 8,
@@ -8373,20 +8709,20 @@ var LabeledField = (0, import_react73.memo)(function LabeledField2({
     }),
     [indentLevel]
   );
-  const fieldStyle = (0, import_react73.useMemo)(
+  const fieldStyle = (0, import_react74.useMemo)(
     () => ({
       minWidth: `calc(100% - ${labelWidth + indentLevel * 8 + 6}px)`
     }),
     [labelWidth, indentLevel]
   );
-  const labelStyle = (0, import_react73.useMemo)(
+  const labelStyle = (0, import_react74.useMemo)(
     () => ({
       minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
       ...labelStyleProp
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ import_react73.default.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ import_react73.default.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ import_react73.default.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ import_react73.default.createElement("div", { style: indentStyle }), /* @__PURE__ */ import_react73.default.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ import_react73.default.createElement(
+  return /* @__PURE__ */ import_react74.default.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ import_react74.default.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ import_react74.default.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ import_react74.default.createElement("div", { style: indentStyle }), /* @__PURE__ */ import_react74.default.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ import_react74.default.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -8395,12 +8731,12 @@ var LabeledField = (0, import_react73.memo)(function LabeledField2({
       ...props
     },
     label
-  ), labelPosition === "start" ? /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
+  ), labelPosition === "start" ? /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/MediaThumbnail.tsx
 var import_noya_icons7 = require("@noya-app/noya-icons");
-var import_react74 = __toESM(require("react"));
+var import_react75 = __toESM(require("react"));
 
 // src/components/catppuccin/fileIcons.ts
 var fileIcons = {
@@ -10840,7 +11176,7 @@ var getThumbnailColors = (colorScheme, selected) => {
       };
   }
 };
-var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
+var MediaThumbnail = (0, import_react75.memo)(function MediaThumbnail2({
   contentType: contentTypeProp,
   selected = false,
   className,
@@ -10855,18 +11191,18 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
     selected
   );
   const contentType = getAssetType(contentTypeProp);
-  const iconStyles = (0, import_react74.useMemo)(
+  const iconStyles = (0, import_react75.useMemo)(
     () => ({
       width: iconSizeMap[size2],
       height: iconSizeMap[size2]
     }),
     [size2]
   );
-  const content = (0, import_react74.useMemo)(() => {
+  const content = (0, import_react75.useMemo)(() => {
     switch (contentType) {
       case "image":
-        if (!url) return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.ImageIcon, { color: iconColor, style: iconStyles });
-        return /* @__PURE__ */ import_react74.default.createElement(
+        if (!url) return /* @__PURE__ */ import_react75.default.createElement(import_noya_icons7.ImageIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react75.default.createElement(
           "img",
           {
             src: url,
@@ -10876,18 +11212,18 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
           }
         );
       case "video":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react75.default.createElement(import_noya_icons7.VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react75.default.createElement(import_noya_icons7.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon = Icons[iconName];
-          return /* @__PURE__ */ import_react74.default.createElement(Icon, { color: iconColor, style: iconStyles });
+          return /* @__PURE__ */ import_react75.default.createElement(Icon, { color: iconColor, style: iconStyles });
         }
         if (fileName) {
           const fileIcon = findFileIcon(fileName);
           if (fileIcon) {
-            return /* @__PURE__ */ import_react74.default.createElement(
+            return /* @__PURE__ */ import_react75.default.createElement(
               "img",
               {
                 src: `https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`,
@@ -10897,10 +11233,10 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react75.default.createElement(import_noya_icons7.FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
-  return /* @__PURE__ */ import_react74.default.createElement(
+  return /* @__PURE__ */ import_react75.default.createElement(
     "div",
     {
       className: cx(
@@ -10931,18 +11267,18 @@ function findFileIcon(fileName) {
 }
 
 // src/components/Message.tsx
-var import_react75 = __toESM(require("react"));
-var Message = (0, import_react75.memo)(
-  (0, import_react75.forwardRef)(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
+var import_react76 = __toESM(require("react"));
+var Message = (0, import_react76.memo)(
+  (0, import_react76.forwardRef)(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = crypto.randomUUID();
     const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
-    const styles3 = (0, import_react75.useMemo)(
+    const styles3 = (0, import_react76.useMemo)(
       () => role === "user" ? {
         backgroundColor: userMessageBackgroundColor
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ import_react75.default.createElement(
+    return /* @__PURE__ */ import_react76.default.createElement(
       "div",
       {
         className: cx(
@@ -10950,15 +11286,15 @@ var Message = (0, import_react75.memo)(
           role === "user" ? "flex-row-reverse" : "flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ import_react75.default.createElement(
+      role === "assistant" ? /* @__PURE__ */ import_react76.default.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ import_react75.default.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ import_react75.default.createElement(
+        /* @__PURE__ */ import_react76.default.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ import_react76.default.createElement(
         Avatar,
         {
           userId: !user ? randomId : user?.id,
@@ -10967,7 +11303,7 @@ var Message = (0, import_react75.memo)(
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ import_react75.default.createElement(
+      /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           className: cx(
@@ -10977,7 +11313,7 @@ var Message = (0, import_react75.memo)(
           style: styles3,
           ref
         },
-        /* @__PURE__ */ import_react75.default.createElement(
+        /* @__PURE__ */ import_react76.default.createElement(
           Text,
           {
             variant: "small",
@@ -10992,9 +11328,9 @@ var Message = (0, import_react75.memo)(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 var import_noya_icons8 = require("@noya-app/noya-icons");
-var import_react76 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react76.default.createElement(
+  return /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react77.default.createElement(
     "a",
     {
       href: url,
@@ -11002,15 +11338,15 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "flex text-primary hover:opacity-80 border border-divider rounded-md"
     },
-    /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ import_react76.default.createElement(import_noya_icons8.Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
-    /* @__PURE__ */ import_react76.default.createElement(DividerVertical, null),
-    /* @__PURE__ */ import_react76.default.createElement(Small, { className: "truncate p-2 flex-1" }, url)
+    /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ import_react77.default.createElement(import_noya_icons8.Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
+    /* @__PURE__ */ import_react77.default.createElement(DividerVertical, null),
+    /* @__PURE__ */ import_react77.default.createElement(Small, { className: "truncate p-2 flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex flex-col gap-2" }, children);
+  return /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex flex-col gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -11026,27 +11362,27 @@ function getPipelineResultLink(value) {
 // src/components/Progress.tsx
 var import_noya_utils10 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var React73 = __toESM(require("react"));
+var React76 = __toESM(require("react"));
 function Progress({
   value,
   variant = "normal",
   className
 }) {
   const clampedValue = (0, import_noya_utils10.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`,
@@ -11057,7 +11393,7 @@ function Progress({
 }
 
 // src/components/Section.tsx
-var import_react77 = __toESM(require("react"));
+var import_react78 = __toESM(require("react"));
 var titleIconStyle = {
   marginRight: "8px",
   alignSelf: "flex-start",
@@ -11081,7 +11417,7 @@ var SectionInternal = ({
     inlineBlockWrapper: true
   }
 }) => {
-  const style2 = (0, import_react77.useMemo)(
+  const style2 = (0, import_react78.useMemo)(
     () => ({
       display: "flex",
       flexDirection: "column",
@@ -11092,15 +11428,15 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = import_react77.default.Children.toArray(children).some((child) => !!child);
-  const headerStyle = (0, import_react77.useMemo)(
+  const hasChildren = import_react78.default.Children.toArray(children).some((child) => !!child);
+  const headerStyle = (0, import_react78.useMemo)(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
       minHeight: INPUT_HEIGHT
     }),
     [hasChildren]
   );
-  return /* @__PURE__ */ import_react77.default.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ import_react77.default.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ import_react77.default.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ import_react77.default.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, onClickTitle ? /* @__PURE__ */ import_react77.default.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ import_react77.default.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ import_react77.default.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ import_react77.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react77.default.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
+  return /* @__PURE__ */ import_react78.default.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ import_react78.default.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ import_react78.default.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ import_react78.default.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, onClickTitle ? /* @__PURE__ */ import_react78.default.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ import_react78.default.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ import_react78.default.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ import_react78.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react78.default.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -11113,12 +11449,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ import_react77.default.createElement(
+  return /* @__PURE__ */ import_react78.default.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ import_react77.default.createElement(
+      title: /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ import_react78.default.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -11129,20 +11465,20 @@ var ExpandableSection = ({
     expanded && props.children
   );
 };
-var Section = (0, import_react77.memo)(function InspectorSection({
+var Section = (0, import_react78.memo)(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ import_react77.default.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ import_react77.default.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ import_react78.default.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ import_react78.default.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 var ToggleGroupPrimitive2 = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react78 = __toESM(require("react"));
-var SegmentedControlContext = (0, import_react78.createContext)({
+var import_react79 = __toESM(require("react"));
+var SegmentedControlContext = (0, import_react79.createContext)({
   colorScheme: "primary"
 });
-var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedControlItem2({
+var SegmentedControlItem = (0, import_react79.forwardRef)(function SegmentedControlItem2({
   value,
   tooltip,
   title,
@@ -11152,8 +11488,8 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme } = (0, import_react78.useContext)(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ import_react78.default.createElement(
+  const { colorScheme } = (0, import_react79.useContext)(SegmentedControlContext);
+  const itemElement = /* @__PURE__ */ import_react79.default.createElement(
     ToggleGroupPrimitive2.Item,
     {
       ref: forwardedRef,
@@ -11173,7 +11509,7 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
       ),
       ...props
     },
-    /* @__PURE__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react79.default.createElement(
       "span",
       {
         className: cx(
@@ -11185,7 +11521,7 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ import_react78.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react79.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -11198,16 +11534,16 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   className,
   style: style2
 }) {
-  const contextValue = (0, import_react78.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const contextValue = (0, import_react79.useMemo)(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
-  const handleValueChange = (0, import_react78.useCallback)(
+  const handleValueChange = (0, import_react79.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2) return;
       onValueChange?.(value2);
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react78.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react78.default.createElement(
+  return /* @__PURE__ */ import_react79.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react79.default.createElement(
     ToggleGroupPrimitive2.Root,
     {
       id,
@@ -11225,13 +11561,13 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ import_react78.default.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ import_react79.default.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
-var import_react79 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var import_react_dom3 = require("react-dom");
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
@@ -11246,22 +11582,22 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbarContainer = (0, import_react79.memo)(
+var SelectionToolbarContainer = (0, import_react80.memo)(
   function SelectionToolbarContainer2({
     rect,
     children,
     portalContainer
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = import_react79.default.useRef(null);
+    const containerRef = import_react80.default.useRef(null);
     const size2 = useSize(containerRef, "width");
-    const virtualRef = (0, import_react79.useMemo)(
+    const virtualRef = (0, import_react80.useMemo)(
       () => ({
         current: createVirtualElement(rect)
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ import_react79.default.createElement(
+    const popperContent = /* @__PURE__ */ import_react80.default.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -11278,7 +11614,7 @@ var SelectionToolbarContainer = (0, import_react79.memo)(
           ["--n-input-background"]: "transparent"
         }
       },
-      /* @__PURE__ */ import_react79.default.createElement(
+      /* @__PURE__ */ import_react80.default.createElement(
         "div",
         {
           ref: containerRef,
@@ -11291,14 +11627,14 @@ var SelectionToolbarContainer = (0, import_react79.memo)(
         children
       )
     );
-    return /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom3.createPortal)(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ import_react80.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react80.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom3.createPortal)(popperContent, portalContainer) : popperContent);
   }
 );
 
 // src/components/SelectMenu.tsx
 var import_noya_icons9 = require("@noya-app/noya-icons");
 var Select = __toESM(require("@radix-ui/react-select"));
-var import_react80 = __toESM(require("react"));
+var import_react81 = __toESM(require("react"));
 var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
@@ -11329,7 +11665,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelPosition = useLabelPosition();
-  return /* @__PURE__ */ import_react80.default.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ import_react80.default.createElement(
+  return /* @__PURE__ */ import_react81.default.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ import_react81.default.createElement(
     Button,
     {
       id,
@@ -11341,10 +11677,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ import_react80.default.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
-    label && labelPosition === "inset" && /* @__PURE__ */ import_react80.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react80.default.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ import_react80.default.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ import_react80.default.createElement(Select.Value, { placeholder })),
-    /* @__PURE__ */ import_react80.default.createElement(
+    icon && /* @__PURE__ */ import_react81.default.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
+    label && labelPosition === "inset" && /* @__PURE__ */ import_react81.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react81.default.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ import_react81.default.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ import_react81.default.createElement(Select.Value, { placeholder })),
+    /* @__PURE__ */ import_react81.default.createElement(
       import_noya_icons9.DropdownChevronIcon,
       {
         className: cx(
@@ -11381,7 +11717,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = (0, import_react80.useState)(open);
+  const [internalOpen, setInternalOpen] = (0, import_react81.useState)(open);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
@@ -11392,8 +11728,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     }
     setInternalOpen(open2);
   };
-  const readOnlyButton = (0, import_react80.useMemo)(
-    () => /* @__PURE__ */ import_react80.default.createElement(
+  const readOnlyButton = (0, import_react81.useMemo)(
+    () => /* @__PURE__ */ import_react81.default.createElement(
       Button,
       {
         id,
@@ -11403,11 +11739,11 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ import_react80.default.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ import_react81.default.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
-  const contentStyle = (0, import_react80.useMemo)(() => {
+  const contentStyle = (0, import_react81.useMemo)(() => {
     return {
       width: "var(--radix-select-trigger-width)",
       minWidth: "max-content",
@@ -11415,7 +11751,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ import_react80.default.createElement(
+  const content = /* @__PURE__ */ import_react81.default.createElement(
     Select.Root,
     {
       value,
@@ -11423,7 +11759,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ import_react80.default.createElement(
+    /* @__PURE__ */ import_react81.default.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -11438,7 +11774,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ import_react80.default.createElement(Select.Portal, null, /* @__PURE__ */ import_react80.default.createElement(
+    /* @__PURE__ */ import_react81.default.createElement(Select.Portal, null, /* @__PURE__ */ import_react81.default.createElement(
       Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -11449,14 +11785,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ import_react80.default.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(
+      /* @__PURE__ */ import_react81.default.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react81.default.createElement(
         import_noya_icons9.ChevronUpIcon,
         {
           className: cx("transition-transform duration-100")
         }
       )),
-      /* @__PURE__ */ import_react80.default.createElement(Select.Viewport, null, /* @__PURE__ */ import_react80.default.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ import_react80.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(import_noya_icons9.ChevronDownIcon, null))
+      /* @__PURE__ */ import_react81.default.createElement(Select.Viewport, null, /* @__PURE__ */ import_react81.default.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ import_react81.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react81.default.createElement(import_noya_icons9.ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -11464,13 +11800,13 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react81 = __toESM(require("react"));
+var import_react82 = __toESM(require("react"));
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
 var insetEndStyles2 = getInsetEndStyles();
-var Slider = (0, import_react81.memo)(function Slider2({
+var Slider = (0, import_react82.memo)(function Slider2({
   style: style2,
   className,
   value,
@@ -11484,7 +11820,7 @@ var Slider = (0, import_react81.memo)(function Slider2({
   readOnly = false,
   ...props
 }) {
-  const arrayValue = (0, import_react81.useMemo)(
+  const arrayValue = (0, import_react82.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
@@ -11493,13 +11829,13 @@ var Slider = (0, import_react81.memo)(function Slider2({
     fieldId: props.id
   });
   const labelPosition = useLabelPosition();
-  const handleValueChange = (0, import_react81.useCallback)(
+  const handleValueChange = (0, import_react82.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  const percentage = (0, import_react81.useMemo)(() => {
+  const percentage = (0, import_react82.useMemo)(() => {
     const rawPercent = (arrayValue[0] - min) / (max - min);
     const adjustedPercent = rawPercent * (100 - THUMB_WIDTH * 100 / 300) + THUMB_WIDTH * 50 / 300;
     return {
@@ -11507,19 +11843,19 @@ var Slider = (0, import_react81.memo)(function Slider2({
       adjusted: adjustedPercent
     };
   }, [arrayValue, min, max]);
-  const trackFillStyle = (0, import_react81.useMemo)(
+  const trackFillStyle = (0, import_react82.useMemo)(
     () => ({
       clipPath: `inset(0 ${100 - percentage.adjusted}% 0 0)`
     }),
     [percentage.adjusted]
   );
-  const labelStyle = (0, import_react81.useMemo)(
+  const labelStyle = (0, import_react82.useMemo)(
     () => ({
       clipPath: `inset(0 ${100 - percentage.raw}% 0 0)`
     }),
     [percentage.raw]
   );
-  return /* @__PURE__ */ import_react81.default.createElement(
+  return /* @__PURE__ */ import_react82.default.createElement(
     RadixSlider.Root,
     {
       min,
@@ -11537,7 +11873,7 @@ var Slider = (0, import_react81.memo)(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ import_react81.default.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ import_react81.default.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ import_react81.default.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ import_react81.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ import_react82.default.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ import_react82.default.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ import_react82.default.createElement(
       "div",
       {
         style: trackFillStyle,
@@ -11548,8 +11884,8 @@ var Slider = (0, import_react81.memo)(function Slider2({
         )
       }
     )),
-    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ import_react81.default.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ import_react81.default.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
-    /* @__PURE__ */ import_react81.default.createElement(
+    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ import_react82.default.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ import_react82.default.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
+    /* @__PURE__ */ import_react82.default.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
@@ -11564,9 +11900,28 @@ var Slider = (0, import_react81.memo)(function Slider2({
   );
 });
 
+// src/components/sorting/createSharedDrag.tsx
+var React82 = __toESM(require("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
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var React79 = __toESM(require("react"));
+var React83 = __toESM(require("react"));
 var Switch = function Switch2({
   id,
   value,
@@ -11578,7 +11933,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React83.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11597,20 +11952,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
-var import_react82 = __toESM(require("react"));
-var UserPointerContainer = (0, import_react82.memo)(function UserPointerContainer2({
+var import_react83 = __toESM(require("react"));
+var UserPointerContainer = (0, import_react83.memo)(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ import_react82.default.createElement(
+  return /* @__PURE__ */ import_react83.default.createElement(
     "div",
     {
       style: {
@@ -11627,13 +11982,13 @@ var UserPointerContainer = (0, import_react82.memo)(function UserPointerContaine
     children
   );
 });
-var UserNameTag = (0, import_react82.memo)(function UserNameTag2({
+var UserNameTag = (0, import_react83.memo)(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
   children
 }) {
-  return /* @__PURE__ */ import_react82.default.createElement(
+  return /* @__PURE__ */ import_react83.default.createElement(
     "span",
     {
       className: cx(
@@ -11649,14 +12004,14 @@ var UserNameTag = (0, import_react82.memo)(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = (0, import_react82.memo)(function PointerIcon({
+var UserPointerIcon = (0, import_react83.memo)(function PointerIcon({
   size: size2,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ import_react82.default.createElement(
+  return /* @__PURE__ */ import_react83.default.createElement(
     "svg",
     {
       width: size2,
@@ -11671,7 +12026,7 @@ var UserPointerIcon = (0, import_react82.memo)(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ import_react82.default.createElement(
+    /* @__PURE__ */ import_react83.default.createElement(
       "polygon",
       {
         points,
@@ -11684,7 +12039,7 @@ var UserPointerIcon = (0, import_react82.memo)(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = (0, import_react82.memo)(function UserPointer2({
+var UserPointer = (0, import_react83.memo)(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -11693,22 +12048,22 @@ var UserPointer = (0, import_react82.memo)(function UserPointer2({
   style: style2,
   className
 }) {
-  const userBackgroundColor = (0, import_react82.useMemo)(
+  const userBackgroundColor = (0, import_react83.useMemo)(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = (0, import_react82.useMemo)(
+  const pointerOverlapStyle = (0, import_react83.useMemo)(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = (0, import_react82.useMemo)(
+  const nameTagOverlapStyle = (0, import_react83.useMemo)(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ import_react82.default.createElement(
+  return /* @__PURE__ */ import_react83.default.createElement(
     UserPointerContainer,
     {
       point,
@@ -11716,14 +12071,14 @@ var UserPointer = (0, import_react82.memo)(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ import_react82.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react82.default.createElement(
+    name && /* @__PURE__ */ import_react83.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react83.default.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ import_react82.default.createElement(
+    ), /* @__PURE__ */ import_react83.default.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -11736,18 +12091,18 @@ var UserPointer = (0, import_react82.memo)(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 var import_noya_keymap6 = require("@noya-app/noya-keymap");
-var import_react87 = __toESM(require("react"));
+var import_react88 = __toESM(require("react"));
 
 // src/hooks/useWindowSize.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 function useWindowSize() {
-  const [size2, setSize] = (0, import_react83.useState)(
+  const [size2, setSize] = (0, import_react84.useState)(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
     }
   );
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -11759,18 +12114,18 @@ function useWindowSize() {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var import_react85 = __toESM(require("react"));
+var import_react86 = __toESM(require("react"));
 
 // src/hooks/usePreservePanelSize.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
 var LEFT_SIDEBAR_ID = "editor-left-sidebar";
 var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
-  const layoutRef = (0, import_react84.useRef)();
-  (0, import_react84.useLayoutEffect)(() => {
+  const layoutRef = (0, import_react85.useRef)();
+  (0, import_react85.useLayoutEffect)(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -11813,7 +12168,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  (0, import_react84.useLayoutEffect)(() => {
+  (0, import_react85.useLayoutEffect)(() => {
     if (!layoutRef.current) return;
     const {
       windowWidth: oldWindowWidth,
@@ -11899,7 +12254,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var DrawerWorkspaceLayout = (0, import_react85.memo)(function DrawerWorkspaceLayout2({
+var DrawerWorkspaceLayout = (0, import_react86.memo)(function DrawerWorkspaceLayout2({
   leftPanel,
   leftSidebarRef,
   rightPanel,
@@ -11908,9 +12263,9 @@ var DrawerWorkspaceLayout = (0, import_react85.memo)(function DrawerWorkspaceLay
   internalLayoutState,
   handleChangeLayoutState
 }) {
-  const portalContainer = (0, import_react85.useRef)(null);
-  const [mounted, setMounted] = (0, import_react85.useState)(false);
-  (0, import_react85.useLayoutEffect)(() => {
+  const portalContainer = (0, import_react86.useRef)(null);
+  const [mounted, setMounted] = (0, import_react86.useState)(false);
+  (0, import_react86.useLayoutEffect)(() => {
     if (mounted) return;
     setMounted(true);
     handleChangeLayoutState({
@@ -11920,14 +12275,14 @@ var DrawerWorkspaceLayout = (0, import_react85.memo)(function DrawerWorkspaceLay
   }, [handleChangeLayoutState, mounted]);
   const leftSidebarCollapsed = internalLayoutState?.leftSidebarCollapsed ?? false;
   const rightSidebarCollapsed = internalLayoutState?.rightSidebarCollapsed ?? false;
-  return /* @__PURE__ */ import_react85.default.createElement(
+  return /* @__PURE__ */ import_react86.default.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "flex flex-1 relative focus:outline-none"
     },
-    leftPanel && /* @__PURE__ */ import_react85.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react86.default.createElement(
       Drawer,
       {
         id: LEFT_SIDEBAR_ID,
@@ -11948,7 +12303,7 @@ var DrawerWorkspaceLayout = (0, import_react85.memo)(function DrawerWorkspaceLay
       leftPanel
     ),
     centerPanel,
-    rightPanel && /* @__PURE__ */ import_react85.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react86.default.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -11972,9 +12327,9 @@ var DrawerWorkspaceLayout = (0, import_react85.memo)(function DrawerWorkspaceLay
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-var import_react86 = __toESM(require("react"));
+var import_react87 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
-var PanelWorkspaceLayout = (0, import_react86.memo)(function PanelWorkspaceLayout2({
+var PanelWorkspaceLayout = (0, import_react87.memo)(function PanelWorkspaceLayout2({
   leftPanel,
   rightPanel,
   centerPanel,
@@ -11987,9 +12342,9 @@ var PanelWorkspaceLayout = (0, import_react86.memo)(function PanelWorkspaceLayou
   rightSidebarRef,
   handleChangeLayoutState
 }) {
-  const panelGroupRef = (0, import_react86.useRef)(null);
+  const panelGroupRef = (0, import_react87.useRef)(null);
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-  return /* @__PURE__ */ import_react86.default.createElement(
+  return /* @__PURE__ */ import_react87.default.createElement(
     import_react_resizable_panels.PanelGroup,
     {
       ref: panelGroupRef,
@@ -11998,7 +12353,7 @@ var PanelWorkspaceLayout = (0, import_react86.memo)(function PanelWorkspaceLayou
       direction: "horizontal",
       autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
     },
-    leftPanel && /* @__PURE__ */ import_react86.default.createElement(import_react86.default.Fragment, null, /* @__PURE__ */ import_react86.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react87.default.createElement(import_react87.default.Fragment, null, /* @__PURE__ */ import_react87.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -12011,8 +12366,8 @@ var PanelWorkspaceLayout = (0, import_react86.memo)(function PanelWorkspaceLayou
         collapsible: true
       },
       internalLayoutState?.leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ import_react86.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
-    /* @__PURE__ */ import_react86.default.createElement(
+    ), /* @__PURE__ */ import_react87.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
+    /* @__PURE__ */ import_react87.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: CONTENT_AREA_ID,
@@ -12023,7 +12378,7 @@ var PanelWorkspaceLayout = (0, import_react86.memo)(function PanelWorkspaceLayou
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react86.default.createElement(import_react86.default.Fragment, null, /* @__PURE__ */ import_react86.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ import_react86.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react87.default.createElement(import_react87.default.Fragment, null, /* @__PURE__ */ import_react87.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ import_react87.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -12041,7 +12396,7 @@ var PanelWorkspaceLayout = (0, import_react86.memo)(function PanelWorkspaceLayou
 });
 
 // src/components/workspace/WorkspaceLayout.tsx
-var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
+var WorkspaceLayout = (0, import_react88.forwardRef)(function WorkspaceLayout2({
   autoSavePrefix,
   left,
   right,
@@ -12072,7 +12427,7 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
   } = {},
   theme
 }, forwardedRef) {
-  const containerRef = import_react87.default.useRef(null);
+  const containerRef = import_react88.default.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -12103,17 +12458,17 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
     rightSidebarMinPercentage,
     rightSidebarMaxPercentage
   );
-  const leftSidebarRef = (0, import_react87.useRef)(null);
-  const rightSidebarRef = (0, import_react87.useRef)(null);
-  const [internalLayoutState, setInternalLayoutState] = (0, import_react87.useState)(null);
-  const handleChangeLayoutState = (0, import_react87.useCallback)(
+  const leftSidebarRef = (0, import_react88.useRef)(null);
+  const rightSidebarRef = (0, import_react88.useRef)(null);
+  const [internalLayoutState, setInternalLayoutState] = (0, import_react88.useState)(null);
+  const handleChangeLayoutState = (0, import_react88.useCallback)(
     (state) => {
       setInternalLayoutState(state);
       onChangeLayoutState?.(state);
     },
     [onChangeLayoutState]
   );
-  (0, import_react87.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react88.useImperativeHandle)(forwardedRef, () => ({
     setLeftExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -12170,7 +12525,7 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
-  const leftPanel = left ? /* @__PURE__ */ import_react87.default.createElement(
+  const leftPanel = left ? /* @__PURE__ */ import_react88.default.createElement(
     PanelInner,
     {
       style: leftStyle,
@@ -12178,7 +12533,7 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
     },
     left
   ) : null;
-  const rightPanel = right ? /* @__PURE__ */ import_react87.default.createElement(
+  const rightPanel = right ? /* @__PURE__ */ import_react88.default.createElement(
     PanelInner,
     {
       style: rightStyle,
@@ -12186,7 +12541,7 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
     },
     right
   ) : null;
-  const centerPanel = /* @__PURE__ */ import_react87.default.createElement(PanelInner, { className: "bg-canvas-background" }, children);
+  const centerPanel = /* @__PURE__ */ import_react88.default.createElement(PanelInner, { className: "bg-canvas-background" }, children);
   const leftSidebarOptions = {
     minSize: leftSidebarMinPercentage,
     maxSize: leftSidebarMaxPercentage,
@@ -12201,7 +12556,7 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(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__ */ import_react87.default.createElement(
+  return /* @__PURE__ */ import_react88.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -12211,7 +12566,7 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ import_react87.default.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ import_react87.default.createElement(
+    /* @__PURE__ */ import_react88.default.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ import_react88.default.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -12229,12 +12584,12 @@ var WorkspaceLayout = (0, import_react87.forwardRef)(function WorkspaceLayout2({
     ))
   );
 });
-var PanelInner = (0, import_react87.memo)(function PanelInner2({
+var PanelInner = (0, import_react88.memo)(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ import_react87.default.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
+  return /* @__PURE__ */ import_react88.default.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
 });
 
 // src/hooks/usePlatform.ts
@@ -12247,9 +12602,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-var import_react88 = require("react");
+var import_react89 = require("react");
 function useTheme() {
-  const [theme, setTheme] = (0, import_react88.useState)("light");
+  const [theme, setTheme] = (0, import_react89.useState)("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -12261,7 +12616,7 @@ function useTheme() {
         break;
     }
   };
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -12366,7 +12721,9 @@ function acceptsDrop({
     return defaultAcceptsDrop(
       sourceIndexPath.at(-1),
       targetIndexPath.at(-1),
-      position
+      position,
+      "",
+      ""
     );
   }
   return true;
@@ -12387,11 +12744,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var React85 = __toESM(require("react"));
+var React89 = __toESM(require("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,
@@ -12401,15 +12758,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 : (0, import_noya_utils12.round)(value, 2),
@@ -12436,8 +12793,8 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title4,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react89 = __toESM(require("react"));
-var Section2 = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react89.default.createElement(
+var import_react90 = __toESM(require("react"));
+var Section2 = (0, import_react90.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react90.default.createElement(
   "div",
   {
     ref,
@@ -12445,8 +12802,8 @@ var Section2 = (0, import_react89.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var SectionHeader3 = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react89.default.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
-var Title4 = (0, import_react89.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react89.default.createElement(
+var SectionHeader3 = (0, import_react90.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react90.default.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
+var Title4 = (0, import_react90.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react90.default.createElement(
   "div",
   {
     ref,
@@ -12457,7 +12814,7 @@ var Title4 = (0, import_react89.forwardRef)(({ className, $textStyle, ...props }
     ...props
   }
 ));
-var Row = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react89.default.createElement(
+var Row = (0, import_react90.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react90.default.createElement(
   "div",
   {
     ref,
@@ -12465,7 +12822,7 @@ var Row = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /* @_
     ...props
   }
 ));
-var Column = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react89.default.createElement(
+var Column = (0, import_react90.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react90.default.createElement(
   "div",
   {
     ref,
@@ -12473,7 +12830,7 @@ var Column = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-var Checkbox3 = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react89.default.createElement(
+var Checkbox3 = (0, import_react90.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react90.default.createElement(
   "input",
   {
     ref,
@@ -12482,7 +12839,7 @@ var Checkbox3 = (0, import_react89.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var Text3 = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react89.default.createElement(
+var Text3 = (0, import_react90.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react90.default.createElement(
   "span",
   {
     ref,
@@ -12490,14 +12847,14 @@ var Text3 = (0, import_react89.forwardRef)(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ import_react89.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = (0, import_react89.forwardRef)(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ import_react90.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react90.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = (0, import_react90.forwardRef)(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ import_react89.default.createElement(
+  return /* @__PURE__ */ import_react90.default.createElement(
     "label",
     {
       ref,
@@ -12509,7 +12866,7 @@ var RowLabel = (0, import_react89.forwardRef)(function RowLabel2({
     }
   );
 });
-var LabeledRow = (0, import_react89.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react90.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -12517,11 +12874,11 @@ var LabeledRow = (0, import_react89.memo)(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ import_react89.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react89.default.createElement(Column, null, /* @__PURE__ */ import_react89.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react89.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react89.default.createElement(Row, null, children)));
+  return /* @__PURE__ */ import_react90.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react90.default.createElement(Column, null, /* @__PURE__ */ import_react90.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react90.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react90.default.createElement(Row, null, children)));
 });
 
 // src/components/BaseToolbar.tsx
-var import_react90 = __toESM(require("react"));
+var import_react91 = __toESM(require("react"));
 var toolbarStyle = {
   [cssVarNames.colors.inputBackground]: "transparent"
 };
@@ -12532,7 +12889,7 @@ function BaseToolbar({
   logo,
   showDivider = true
 }) {
-  return /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ import_react90.default.createElement(
+  return /* @__PURE__ */ import_react91.default.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ import_react91.default.createElement(
     "div",
     {
       className: "flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar",
@@ -12540,10 +12897,10 @@ function BaseToolbar({
         flex: `0 0 ${cssVars.spacing.toolbarHeight}`
       }
     },
-    logo && /* @__PURE__ */ import_react90.default.createElement(import_react90.default.Fragment, null, logo, /* @__PURE__ */ import_react90.default.createElement(DividerVertical, null)),
-    /* @__PURE__ */ import_react90.default.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ import_react90.default.createElement(import_react90.default.Fragment, null, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ import_react90.default.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ import_react90.default.createElement(
+    logo && /* @__PURE__ */ import_react91.default.createElement(import_react91.default.Fragment, null, logo, /* @__PURE__ */ import_react91.default.createElement(DividerVertical, null)),
+    /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { size: 10 }),
+    left && /* @__PURE__ */ import_react91.default.createElement(import_react91.default.Fragment, null, /* @__PURE__ */ import_react91.default.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { size: 10 })),
+    /* @__PURE__ */ import_react91.default.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ import_react91.default.createElement(
       "div",
       {
         style: {
@@ -12555,15 +12912,15 @@ function BaseToolbar({
       },
       children
     )),
-    /* @__PURE__ */ import_react90.default.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ import_react90.default.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex gap-toolbar-separator" }, right)
-  ), showDivider && /* @__PURE__ */ import_react90.default.createElement(Divider, { variant: "strong" }));
+    /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ import_react91.default.createElement("div", { className: "flex gap-toolbar-separator" }, right)
+  ), showDivider && /* @__PURE__ */ import_react91.default.createElement(Divider, { variant: "strong" }));
 }
 
 // src/components/Toolbar.tsx
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
-var import_react91 = __toESM(require("react"));
+var import_react92 = __toESM(require("react"));
 var iconButtonStyle = {
   height: 27,
   width: 27,
@@ -12573,8 +12930,8 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = import_react91.default.useState(false);
-  return /* @__PURE__ */ import_react91.default.createElement(
+  const [open, setOpen] = import_react92.default.useState(false);
+  return /* @__PURE__ */ import_react92.default.createElement(
     DropdownMenu,
     {
       open,
@@ -12586,7 +12943,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ import_react91.default.createElement(
+    /* @__PURE__ */ import_react92.default.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -12600,15 +12957,18 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
 });
 var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   item,
-  onSelectMenuItem
+  onSelectMenuItem,
+  as
 }) {
-  const content = /* @__PURE__ */ import_react91.default.createElement(
+  const content = /* @__PURE__ */ import_react92.default.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);
@@ -12617,32 +12977,42 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     },
     item.title
   );
-  return item.tooltip ? /* @__PURE__ */ import_react91.default.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
+  return item.tooltip ? /* @__PURE__ */ import_react92.default.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__ */ import_react91.default.createElement(DividerVertical, { overflow: 4 });
+    return /* @__PURE__ */ import_react92.default.createElement(DividerVertical, { overflow: 4 });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ import_react91.default.createElement(ToolbarMenuButton, { item, onSelectMenuItem });
+    return /* @__PURE__ */ import_react92.default.createElement(
+      ToolbarMenuButton,
+      {
+        item,
+        onSelectMenuItem,
+        as: buttonAs
+      }
+    );
   }
-  return /* @__PURE__ */ import_react91.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ import_react92.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
-  onSelectMenuItem
+  onSelectMenuItem,
+  buttonAs
 }) {
-  return /* @__PURE__ */ import_react91.default.createElement(import_react91.default.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ import_react91.default.createElement(
+  return /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ import_react92.default.createElement(
       ToolbarMenuItem,
       {
         key: i,
         item,
-        onSelectMenuItem
+        onSelectMenuItem,
+        buttonAs
       }
     );
   }));
@@ -12655,28 +13025,28 @@ function Toolbar({
   onSelectMenuItem,
   shouldBindKeyboardShortcuts = true
 }) {
-  const allMenuItems = import_react91.default.useMemo(
+  const allMenuItems = import_react92.default.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   (0, import_noya_keymap7.useKeyboardShortcuts)(
-    import_react91.default.useMemo(
+    import_react92.default.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ import_react91.default.createElement(
+  return /* @__PURE__ */ import_react92.default.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react91.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react91.default.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react92.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react92.default.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
           onSelectMenuItem
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react91.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react91.default.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react92.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react92.default.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -12789,9 +13159,11 @@ function Toolbar({
   SegmentedControl,
   SelectMenu,
   SelectionToolbarContainer,
+  SharedDragProvider,
   Slider,
   Small,
   Sortable,
+  SortableItemContext,
   Spacer,
   Switch,
   Text,
@@ -12813,7 +13185,9 @@ function Toolbar({
   colorForStringValues,
   colorFromString,
   colorSwatchSizeMap,
+  createDragItemKey,
   createSectionedMenu,
+  createSharedDrag,
   cssVarNames,
   cssVars,
   cx,
@@ -12826,6 +13200,7 @@ function Toolbar({
   getFieldSpacing,
   getGradientBackground,
   getGridSize,
+  getItemFirstCollisionDetection,
   getKeyboardShortcutsForMenuItems,
   getMenuItemKey,
   getNewValue,
@@ -12841,6 +13216,7 @@ function Toolbar({
   mergeConflictingClassNames,
   moveTreeItem,
   normalizeListTargetIndex,
+  parseDragItemKey,
   popoverStyle,
   portalScopeDataSetName,
   portalScopePropName,
@@ -12883,6 +13259,7 @@ function Toolbar({
   usePreservePanelSize,
   useTheme,
   validateDropIndicator,
+  withDragProvider,
   withSeparatorElements
 });
 //# sourceMappingURL=index.js.map