@noya-app/noya-designsystem 0.1.70 → 0.1.72

package/dist/index.js

@@ -397,14 +397,14 @@ var require_grammarDiagnostics = __commonJS({
           rootNonTerminating.add(name);
         }
       }
-      const memo41 = /* @__PURE__ */ new Map();
+      const memo40 = /* @__PURE__ */ new Map();
       const collectCauses = (name, path) => {
-        if (memo41.has(name)) {
-          return memo41.get(name);
+        if (memo40.has(name)) {
+          return memo40.get(name);
         }
         if (rootNonTerminating.has(name)) {
           const direct = /* @__PURE__ */ new Set([name]);
-          memo41.set(name, direct);
+          memo40.set(name, direct);
           return direct;
         }
         if (path.has(name)) {
@@ -423,7 +423,7 @@ var require_grammarDiagnostics = __commonJS({
           }
         }
         path.delete(name);
-        memo41.set(name, result);
+        memo40.set(name, result);
         return result;
       };
       const dependencyIssues = [];
@@ -3257,7 +3257,9 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   TreeView: () => TreeView,
   UserAvatar: () => UserAvatar,
+  UserPicker: () => UserPicker,
   UserPointer: () => UserPointer,
+  Virtualized: () => Virtualized2,
   WorkspaceLayout: () => WorkspaceLayout,
   WorkspaceSideProvider: () => WorkspaceSideProvider,
   acceptsDrop: () => acceptsDrop,
@@ -3290,6 +3292,7 @@ __export(src_exports, {
   getNextIndex: () => getNextIndex,
   getPipelineResultLink: () => getPipelineResultLink,
   getThumbnailColors: () => getThumbnailColors,
+  getUserDisplayName: () => getUserDisplayName,
   isMenuItemSectionHeader: () => isMenuItemSectionHeader,
   isNonSelectableMenuItem: () => isNonSelectableMenuItem,
   isPopoverMenuItem: () => isPopoverMenuItem,
@@ -5139,7 +5142,15 @@ function parseNumber(value) {
   return value ? Number(value) : NaN;
 }
 function InputFieldNumberInput(props) {
-  const { value, placeholder, onNudge, onBlur, readOnly, ...rest } = props;
+  const {
+    value,
+    placeholder,
+    onNudge,
+    onBlur,
+    readOnly,
+    triggersOnEmpty,
+    ...rest
+  } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
   const [internalValue, setInternalValue] = (0, import_react29.useState)();
@@ -5167,6 +5178,9 @@ function InputFieldNumberInput(props) {
     (value2) => {
       if (value2 === "" || value2 === "-" || value2 === ".") {
         setInternalValue(value2);
+        if (triggersOnEmpty) {
+          onChange?.(0, { isEmpty: true });
+        }
         return;
       }
       if (value2.endsWith(".")) {
@@ -5176,10 +5190,10 @@ function InputFieldNumberInput(props) {
       setInternalValue(void 0);
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
-        onChange?.(newValue);
+        onChange?.(newValue, { isEmpty: false });
       }
     },
-    [onChange]
+    [onChange, triggersOnEmpty]
   );
   const handleBlur = (0, import_react29.useCallback)(
     (event) => {
@@ -7205,7 +7219,8 @@ var BreadcrumbSlash = () => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       opacity: 0.5,
-      style: slashStyle
+      style: slashStyle,
+      className: "n-flex-none"
     },
     /* @__PURE__ */ import_react51.default.createElement(
       "path",
@@ -7523,7 +7538,7 @@ var Chip = (0, import_react52.memo)(
 );
 
 // src/components/Collection.tsx
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 
 // src/components/Grid.tsx
 var import_react56 = __toESM(require("react"));
@@ -8331,7 +8346,7 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-var import_react66 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 
 // src/components/listView/ListViewContexts.tsx
 var import_react57 = require("react");
@@ -8355,10 +8370,6 @@ var ListRowContext = (0, import_react57.createContext)({
   isSectionHeader: false
 });
 ListRowContext.displayName = "ListRowContext";
-var RenderItemContext = (0, import_react57.createContext)(
-  () => null
-);
-RenderItemContext.displayName = "RenderItemContext";
 
 // src/components/listView/ListViewEditableRowTitle.tsx
 var import_react58 = __toESM(require("react"));
@@ -8411,21 +8422,348 @@ var ListViewEditableRowTitle = (0, import_react58.memo)(function ListViewEditabl
 
 // src/components/listView/ListViewRoot.tsx
 var import_noya_utils8 = require("@noya-app/noya-utils");
-var import_react62 = __toESM(require("react"));
-var import_react_virtualized = require("react-virtualized");
-var import_react_window = require("react-window");
+var import_react63 = __toESM(require("react"));
+
+// src/components/Virtualized.tsx
+var import_react59 = __toESM(require("react"));
+var import_react_dom2 = require("react-dom");
+
+// src/components/ScrollArea2.tsx
+var import_scroll_area = require("@base-ui-components/react/scroll-area");
+var React52 = __toESM(require("react"));
+var SCROLLBAR_STATE_CLASSES = "scroll-component n-opacity-0 n-transition-opacity n-delay-300 n-pointer-events-none data-[hovering]:n-opacity-100 data-[hovering]:n-delay-0 data-[hovering]:n-duration-75 data-[hovering]:n-pointer-events-auto data-[scrolling]:n-opacity-100 data-[scrolling]:n-delay-0 data-[scrolling]:n-duration-75 data-[scrolling]:n-pointer-events-auto";
+var SCROLLBAR_TRACK_VERTICAL = "n-m-1 n-w-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
+var SCROLLBAR_TRACK_HORIZONTAL = "n-m-1 n-h-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
+var SCROLLBAR_THUMB_VERTICAL = "scroll-component n-w-full n-rounded n-bg-scrollbar";
+var SCROLLBAR_THUMB_HORIZONTAL = "scroll-component n-h-full n-rounded n-bg-scrollbar";
+function ScrollArea22({
+  children,
+  className,
+  viewportClassName,
+  orientation = "vertical",
+  style: style2,
+  viewportProps
+}) {
+  const {
+    className: viewportPropsClassName,
+    ref: viewportRef,
+    ...viewportRest
+  } = viewportProps ?? {};
+  return /* @__PURE__ */ React52.createElement(import_scroll_area.ScrollArea.Root, { className: cx("n-relative", className), style: style2 }, /* @__PURE__ */ React52.createElement(
+    import_scroll_area.ScrollArea.Viewport,
+    {
+      ref: viewportRef,
+      className: cx(
+        "n-h-full n-overscroll-contain",
+        viewportClassName,
+        viewportPropsClassName
+      ),
+      ...viewportRest
+    },
+    children
+  ), (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ React52.createElement(
+    import_scroll_area.ScrollArea.Scrollbar,
+    {
+      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)
+    },
+    /* @__PURE__ */ React52.createElement(import_scroll_area.ScrollArea.Thumb, { className: SCROLLBAR_THUMB_VERTICAL })
+  ), (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ React52.createElement(
+    import_scroll_area.ScrollArea.Scrollbar,
+    {
+      orientation: "horizontal",
+      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)
+    },
+    /* @__PURE__ */ React52.createElement(import_scroll_area.ScrollArea.Thumb, { className: SCROLLBAR_THUMB_HORIZONTAL })
+  ), orientation === "both" && /* @__PURE__ */ React52.createElement(import_scroll_area.ScrollArea.Corner, null));
+}
+
+// src/components/Virtualized.tsx
+function calculateScrollOffsetForIndex({
+  measurements,
+  height,
+  totalHeight,
+  targetIndex,
+  currentScrollTop
+}) {
+  if (!measurements.length) return;
+  const index = Math.min(Math.max(targetIndex, 0), measurements.length - 1);
+  const measurement = measurements[index];
+  if (!measurement) return;
+  const viewportTop = currentScrollTop;
+  const viewportBottom = viewportTop + height;
+  const itemTop = measurement.start;
+  const itemBottom = measurement.end;
+  let nextScrollTop = viewportTop;
+  if (itemTop < viewportTop) {
+    nextScrollTop = itemTop;
+  } else if (itemBottom > viewportBottom) {
+    const canAlignTop = height >= measurement.size;
+    nextScrollTop = canAlignTop ? itemTop : itemBottom - height;
+  } else {
+    return;
+  }
+  const maxScrollTop = Math.max(0, totalHeight - height);
+  nextScrollTop = Math.max(0, Math.min(nextScrollTop, maxScrollTop));
+  if (nextScrollTop === viewportTop) return;
+  return nextScrollTop;
+}
+function resolvePaddingValues(padding) {
+  if (typeof padding === "number") {
+    return { top: padding, bottom: padding };
+  }
+  return {
+    top: padding?.top ?? 0,
+    bottom: padding?.bottom ?? 0
+  };
+}
+function clampGapValue(gap) {
+  return Math.max(0, gap ?? 0);
+}
+function buildMeasurements({
+  itemCount,
+  getItemHeight,
+  paddingTop,
+  paddingBottom,
+  gap
+}) {
+  const measurements = [];
+  let offset = paddingTop;
+  for (let index = 0; index < itemCount; index += 1) {
+    const size = Math.max(0, getItemHeight(index));
+    const start = offset;
+    const end = start + size;
+    measurements.push({ index, size, start, end });
+    offset = end + gap;
+  }
+  const totalHeight = measurements.length ? measurements[measurements.length - 1].end + paddingBottom : paddingTop + paddingBottom;
+  return { measurements, totalHeight };
+}
+function findFirstVisibleIndex(measurements, offset) {
+  if (!measurements.length) return 0;
+  let low = 0;
+  let high = measurements.length - 1;
+  let match = measurements.length - 1;
+  while (low <= high) {
+    const middle = Math.floor((low + high) / 2);
+    const measurement = measurements[middle];
+    if (measurement.end > offset) {
+      match = middle;
+      high = middle - 1;
+    } else {
+      low = middle + 1;
+    }
+  }
+  return match;
+}
+function calculateVisibleRange({
+  measurements,
+  scrollTop,
+  height,
+  overscan
+}) {
+  if (!measurements.length) {
+    return { start: 0, end: -1 };
+  }
+  const viewBottom = scrollTop + height;
+  const firstVisible = findFirstVisibleIndex(measurements, scrollTop);
+  let lastVisibleExclusive = firstVisible;
+  while (lastVisibleExclusive < measurements.length && measurements[lastVisibleExclusive].start < viewBottom) {
+    lastVisibleExclusive += 1;
+  }
+  const lastVisible = Math.max(
+    firstVisible,
+    Math.min(measurements.length - 1, lastVisibleExclusive - 1)
+  );
+  const overscanCount = Math.max(0, Math.floor(overscan));
+  return {
+    start: Math.max(0, firstVisible - overscanCount),
+    end: Math.min(measurements.length - 1, lastVisible + overscanCount)
+  };
+}
+var DEFAULT_OVERSCAN = 2;
+var VirtualizedInner = import_react59.default.forwardRef(function Virtualized({
+  height,
+  itemCount,
+  getItemHeight,
+  renderItem,
+  overscan = DEFAULT_OVERSCAN,
+  className,
+  style: style2,
+  innerClassName,
+  innerStyle,
+  onScroll,
+  itemKey,
+  initialScrollOffset = 0,
+  syncScrollUpdates = true,
+  padding,
+  gap = 0,
+  useScrollArea = false,
+  scrollAreaViewportClassName
+}, forwardedRef) {
+  const containerRef = (0, import_react59.useRef)(null);
+  const setScrollElement = (0, import_react59.useCallback)((element) => {
+    containerRef.current = element;
+  }, []);
+  const [scrollTop, setScrollTop] = (0, import_react59.useState)(initialScrollOffset);
+  const pendingInitialOffset = (0, import_react59.useRef)(initialScrollOffset);
+  (0, import_react59.useLayoutEffect)(() => {
+    if (pendingInitialOffset.current == null) return;
+    if (containerRef.current) {
+      containerRef.current.scrollTop = pendingInitialOffset.current;
+      setScrollTop(pendingInitialOffset.current);
+    }
+    pendingInitialOffset.current = null;
+  }, []);
+  const paddingValues = (0, import_react59.useMemo)(() => resolvePaddingValues(padding), [padding]);
+  const gapValue = (0, import_react59.useMemo)(() => clampGapValue(gap), [gap]);
+  const { measurements, totalHeight } = (0, import_react59.useMemo)(
+    () => buildMeasurements({
+      itemCount,
+      getItemHeight,
+      paddingTop: paddingValues.top,
+      paddingBottom: paddingValues.bottom,
+      gap: gapValue
+    }),
+    [
+      gapValue,
+      getItemHeight,
+      itemCount,
+      paddingValues.bottom,
+      paddingValues.top
+    ]
+  );
+  const visibleRange = (0, import_react59.useMemo)(
+    () => calculateVisibleRange({
+      measurements,
+      scrollTop,
+      height,
+      overscan
+    }),
+    [height, measurements, overscan, scrollTop]
+  );
+  const handleScroll = (0, import_react59.useCallback)(
+    (event) => {
+      const nextOffset = event.currentTarget.scrollTop;
+      if (nextOffset === scrollTop) return;
+      if (syncScrollUpdates) {
+        (0, import_react_dom2.flushSync)(() => {
+          setScrollTop(nextOffset);
+        });
+      } else {
+        setScrollTop(nextOffset);
+      }
+      onScroll?.(nextOffset);
+    },
+    [onScroll, scrollTop, syncScrollUpdates]
+  );
+  (0, import_react59.useImperativeHandle)(
+    forwardedRef,
+    () => ({
+      scrollToIndex(index) {
+        const container = containerRef.current;
+        if (!container) return;
+        const nextScrollTop = calculateScrollOffsetForIndex({
+          measurements,
+          height,
+          totalHeight,
+          targetIndex: index,
+          currentScrollTop: container.scrollTop
+        });
+        if (nextScrollTop == null) return;
+        container.scrollTop = nextScrollTop;
+        setScrollTop(nextScrollTop);
+      }
+    }),
+    [height, measurements, totalHeight]
+  );
+  const containerStyle = (0, import_react59.useMemo)(
+    () => ({
+      height,
+      overflowY: "auto",
+      overflowX: "hidden",
+      ...style2
+    }),
+    [height, style2]
+  );
+  const scrollAreaStyle = (0, import_react59.useMemo)(
+    () => ({
+      height,
+      ...style2
+    }),
+    [height, style2]
+  );
+  const totalContent = /* @__PURE__ */ import_react59.default.createElement(
+    "div",
+    {
+      className: innerClassName,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: totalHeight,
+        ...innerStyle
+      }
+    },
+    visibleRange.end >= visibleRange.start && Array.from(
+      { length: visibleRange.end - visibleRange.start + 1 },
+      (_, offset) => {
+        const index = visibleRange.start + offset;
+        const measurement = measurements[index];
+        const key = itemKey ? itemKey(index) : index;
+        return /* @__PURE__ */ import_react59.default.createElement(
+          "div",
+          {
+            key,
+            style: {
+              position: "absolute",
+              top: measurement.start,
+              height: measurement.size,
+              width: "100%"
+            }
+          },
+          renderItem(index)
+        );
+      }
+    )
+  );
+  if (useScrollArea) {
+    return /* @__PURE__ */ import_react59.default.createElement(
+      ScrollArea22,
+      {
+        className,
+        style: scrollAreaStyle,
+        viewportClassName: scrollAreaViewportClassName,
+        viewportProps: {
+          ref: setScrollElement,
+          onScroll: handleScroll
+        }
+      },
+      totalContent
+    );
+  }
+  return /* @__PURE__ */ import_react59.default.createElement(
+    "div",
+    {
+      ref: setScrollElement,
+      className,
+      style: containerStyle,
+      onScroll: handleScroll
+    },
+    totalContent
+  );
+});
+var Virtualized2 = import_react59.default.memo(VirtualizedInner);
 
 // src/components/sorting/Sortable.tsx
 var import_core2 = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var React55 = __toESM(require("react"));
-var import_react61 = require("react");
+var React57 = __toESM(require("react"));
+var import_react62 = require("react");
 
 // src/components/sorting/DragRegistration.tsx
-var import_react59 = __toESM(require("react"));
-var DragRegistrationContext = import_react59.default.createContext(null);
+var import_react60 = __toESM(require("react"));
+var DragRegistrationContext = import_react60.default.createContext(null);
 function useDragRegistration(context) {
-  const value = import_react59.default.useContext(context);
+  const value = import_react60.default.useContext(context);
   if (!value) {
     throw new Error(
       "useDragRegistration must be used within a DragRegistrationProvider"
@@ -8434,11 +8772,11 @@ function useDragRegistration(context) {
   return value;
 }
 function useDragRegistrationManager() {
-  const [registeredLists, setRegisteredLists] = import_react59.default.useState(/* @__PURE__ */ new Map());
-  const registerList = import_react59.default.useCallback((list) => {
+  const [registeredLists, setRegisteredLists] = import_react60.default.useState(/* @__PURE__ */ new Map());
+  const registerList = import_react60.default.useCallback((list) => {
     setRegisteredLists((prev) => new Map(prev).set(list.id, list));
   }, []);
-  const unregisterList = import_react59.default.useCallback((listId) => {
+  const unregisterList = import_react60.default.useCallback((listId) => {
     setRegisteredLists((prev) => {
       const newMap = new Map(prev);
       newMap.delete(listId);
@@ -8447,23 +8785,23 @@ function useDragRegistrationManager() {
   }, []);
   return { registerList, unregisterList, registeredLists };
 }
-var ActiveDragContext = import_react59.default.createContext(null);
+var ActiveDragContext = import_react60.default.createContext(null);
 function useActiveDrag(context) {
-  const value = import_react59.default.useContext(context);
+  const value = import_react60.default.useContext(context);
   if (!value) {
     throw new Error("useActiveDrag must be used within a ActiveDragProvider");
   }
   return value;
 }
-var AnyDragContext = import_react59.default.createContext(false);
+var AnyDragContext = import_react60.default.createContext(false);
 
 // src/components/sorting/SharedDragProvider.tsx
 var import_core = require("@dnd-kit/core");
 var import_noya_geometry = require("@noya-app/noya-geometry");
 var import_noya_utils7 = require("@noya-app/noya-utils");
-var React53 = __toESM(require("react"));
-var import_react60 = require("react");
-var import_react_dom2 = require("react-dom");
+var React55 = __toESM(require("react"));
+var import_react61 = require("react");
+var import_react_dom3 = require("react-dom");
 function SharedDragProvider({
   children,
   acceptsDrop: acceptsDrop2,
@@ -8482,22 +8820,22 @@ function SharedDragProvider({
     })
   );
   const mounted = useMounted();
-  const [dragState, setDragState] = React53.useState({
+  const [dragState, setDragState] = React55.useState({
     source: null,
     target: null,
     indicator: null
   });
-  const stableOnMoveItem = React53.useRef(onMoveItem);
+  const stableOnMoveItem = React55.useRef(onMoveItem);
   useIsomorphicLayoutEffect(() => {
     stableOnMoveItem.current = onMoveItem;
   }, [onMoveItem]);
-  const stableAcceptsDrop = React53.useRef(acceptsDrop2);
+  const stableAcceptsDrop = React55.useRef(acceptsDrop2);
   useIsomorphicLayoutEffect(() => {
     stableAcceptsDrop.current = acceptsDrop2;
   }, [acceptsDrop2]);
   const { registerList, unregisterList, registeredLists } = useDragRegistrationManager();
-  const activatorEventRef = React53.useRef(null);
-  const handleDragStart = React53.useCallback(
+  const activatorEventRef = React55.useRef(null);
+  const handleDragStart = React55.useCallback(
     (event) => {
       activatorEventRef.current = event.activatorEvent;
       for (const [listId, list] of registeredLists) {
@@ -8519,7 +8857,7 @@ function SharedDragProvider({
     },
     [registeredLists]
   );
-  const handleDragMove = React53.useCallback(
+  const handleDragMove = React55.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -8543,7 +8881,7 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source]
   );
-  const handleDragEnd = React53.useCallback(
+  const handleDragEnd = React55.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -8587,7 +8925,7 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source, stableOnMoveItem]
   );
-  const contextValue = React53.useMemo(
+  const contextValue = React55.useMemo(
     () => ({
       registerList,
       unregisterList
@@ -8595,19 +8933,19 @@ function SharedDragProvider({
     [registerList, unregisterList]
   );
   const activeList = dragState.source ? registeredLists.get(dragState.source.listId) : null;
-  const activeDragContextValue = React53.useMemo(
+  const activeDragContextValue = React55.useMemo(
     () => dragState,
     [dragState]
   );
-  const collisionDetection = (0, import_react60.useMemo)(() => {
+  const collisionDetection = (0, import_react61.useMemo)(() => {
     return getItemFirstCollisionDetection(registeredLists, itemHitSlop);
   }, [registeredLists, itemHitSlop]);
-  return /* @__PURE__ */ React53.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React53.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React55.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React55.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React55.createElement(
     sharedDragProps.activeDragContext.Provider,
     {
       value: activeDragContextValue
     },
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React55.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -8617,27 +8955,27 @@ function SharedDragProvider({
         onDragEnd: handleDragEnd
       },
       children,
-      mounted && activeList?.renderOverlay && dragState.source && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ React53.createElement(import_core.DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
+      mounted && activeList?.renderOverlay && dragState.source && (0, import_react_dom3.createPortal)(
+        /* @__PURE__ */ React55.createElement(import_core.DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
         document.body
       )
     )
   )));
 }
 function useMounted() {
-  const [mounted, setMounted] = React53.useState(false);
-  React53.useEffect(() => {
+  const [mounted, setMounted] = React55.useState(false);
+  React55.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function withDragProvider(Component) {
   return function WithDragProvider(props) {
-    const anyDragContext = React53.useContext(AnyDragContext);
+    const anyDragContext = React55.useContext(AnyDragContext);
     if (!anyDragContext) {
-      return /* @__PURE__ */ React53.createElement(SharedDragProvider, null, /* @__PURE__ */ React53.createElement(Component, { ...props }));
+      return /* @__PURE__ */ React55.createElement(SharedDragProvider, null, /* @__PURE__ */ React55.createElement(Component, { ...props }));
     }
-    return /* @__PURE__ */ React53.createElement(Component, { ...props });
+    return /* @__PURE__ */ React55.createElement(Component, { ...props });
   };
 }
 var getItemFirstCollisionDetection = (registeredLists, itemHitSlop) => (parameters) => {
@@ -8814,7 +9152,7 @@ function findDropTarget({
 }
 
 // src/components/sorting/sorting.ts
-var React54 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 var normalizeListTargetIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
@@ -8830,7 +9168,7 @@ var defaultAcceptsDrop = ({
   }
   return true;
 };
-var SortableItemContext = React54.createContext({
+var SortableItemContext = React56.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -8896,7 +9234,7 @@ function parseDragItemKey(key) {
 }
 
 // src/components/sorting/Sortable.tsx
-var SortableItemContext2 = React55.createContext({
+var SortableItemContext2 = React57.createContext({
   acceptsDrop: defaultAcceptsDrop,
   listId: "",
   getDropTargetParentIndex: void 0,
@@ -8909,7 +9247,7 @@ function useSortableDropIndicator({
   acceptsDrop: acceptsDrop2,
   getDropTargetParentIndex
 }) {
-  const { activeDragContext } = React55.useContext(SortableItemContext2);
+  const { activeDragContext } = React57.useContext(SortableItemContext2);
   const activeDrag = useActiveDrag(activeDragContext);
   const { source, target } = activeDrag;
   if (!source || !target) return;
@@ -8940,7 +9278,7 @@ function SortableItem({
   disabled,
   children
 }) {
-  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React55.useContext(SortableItemContext2);
+  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React57.useContext(SortableItemContext2);
   const dragItemKey = createDragItemKey(listId, id);
   const {
     attributes,
@@ -8955,7 +9293,7 @@ function SortableItem({
     id: dragItemKey,
     disabled
   });
-  const ref = React55.useCallback(
+  const ref = React57.useCallback(
     (node) => setNodeRef(node),
     [setNodeRef]
   );
@@ -8966,7 +9304,7 @@ function SortableItem({
     acceptsDrop: acceptsDrop2,
     getDropTargetParentIndex
   });
-  const props = (0, import_react61.useMemo)(
+  const props = (0, import_react62.useMemo)(
     () => ({
       ref,
       ...attributes,
@@ -8975,7 +9313,7 @@ function SortableItem({
     }),
     [ref, attributes, listeners, isDragging]
   );
-  const extraProps = (0, import_react61.useMemo)(
+  const extraProps = (0, import_react62.useMemo)(
     () => ({
       isDragging,
       isOverlay: false,
@@ -9009,9 +9347,9 @@ function SortableRoot_({
   containerRef,
   itemHitSlop
 }) {
-  const defaultId = React55.useId();
+  const defaultId = React57.useId();
   const id = idProp ?? defaultId;
-  const keys = React55.useMemo(() => {
+  const keys = React57.useMemo(() => {
     return keysProp.map((key) => createDragItemKey(id, key));
   }, [keysProp, id]);
   const { registerList, unregisterList } = useDragRegistration(
@@ -9020,7 +9358,7 @@ function SortableRoot_({
   const { setNodeRef: setDroppableRef } = (0, import_core2.useDroppable)({
     id
   });
-  React55.useEffect(() => {
+  React57.useEffect(() => {
     const listConfig = {
       id,
       keys,
@@ -9074,7 +9412,7 @@ function SortableRoot_({
     keys,
     itemHitSlop
   ]);
-  const contextValue = React55.useMemo(
+  const contextValue = React57.useMemo(
     () => ({
       keys,
       acceptsDrop: acceptsDrop2,
@@ -9085,17 +9423,17 @@ function SortableRoot_({
     [keys, acceptsDrop2, id, getDropTargetParentIndex, sharedDragProps]
   );
   const activeDragContext = sharedDragProps?.activeDragContext ?? ActiveDragContext;
-  const dragState = React55.useContext(activeDragContext);
+  const dragState = React57.useContext(activeDragContext);
   const isDragging = !!dragState?.source;
-  React55.useEffect(() => {
+  React57.useEffect(() => {
     onIsDraggingChange?.(isDragging);
   }, [isDragging, onIsDraggingChange]);
-  React55.useEffect(() => {
+  React57.useEffect(() => {
     if (containerRef) {
       setDroppableRef(containerRef.current);
     }
   });
-  return /* @__PURE__ */ React55.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React57.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React57.createElement(
     import_sortable.SortableContext,
     {
       items: keys,
@@ -9112,11 +9450,11 @@ var Sortable_ = function Sortable_2({
   renderItem,
   ...rest
 }) {
-  const keys = React55.useMemo(
+  const keys = React57.useMemo(
     () => items.map(keyExtractor),
     [items, keyExtractor]
   );
-  const renderOverlay = React55.useCallback(
+  const renderOverlay = React57.useCallback(
     (index) => {
       return renderItem(
         items[index],
@@ -9146,14 +9484,14 @@ var Sortable_ = function Sortable_2({
     },
     [renderItem, items]
   );
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React57.createElement(
     SortableRoot,
     {
       ...rest,
       keys,
       renderOverlay: shouldRenderOverlay ? renderOverlay : void 0
     },
-    keys.map((key, index) => /* @__PURE__ */ React55.createElement(SortableItem, { key, id: key }, (props, extraProps) => {
+    keys.map((key, index) => /* @__PURE__ */ React57.createElement(SortableItem, { key, id: key }, (props, extraProps) => {
       return renderItem(items[index], props, extraProps);
     }))
   );
@@ -9167,87 +9505,6 @@ var Sortable = Object.assign(Sortable_, {
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 24;
 var TALL_ROW_HEIGHT = 50;
-var VirtualizedListRow = (0, import_react62.memo)(function VirtualizedListRow2({
-  index,
-  style: style2
-}) {
-  const renderItem = (0, import_react62.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react62.default.createElement("div", { key: index, style: style2 }, renderItem(index));
-});
-var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
-  size,
-  scrollElement,
-  items,
-  getItemHeight,
-  keyExtractor,
-  renderItem
-}, ref) {
-  const listRef = (0, import_react62.useRef)(null);
-  (0, import_react62.useImperativeHandle)(ref, () => ({
-    scrollToIndex(index) {
-      listRef.current?.scrollToItem(index);
-    }
-  }));
-  (0, import_react62.useLayoutEffect)(() => {
-    listRef.current?.resetAfterIndex(0);
-  }, [
-    // When items or the height resolver change, re-render the virtualized list
-    // since VariableSizeList caches sizes per index.
-    items,
-    getItemHeight
-  ]);
-  const listStyle = (0, import_react62.useMemo)(
-    () => ({
-      overflowX: "initial",
-      overflowY: "initial",
-      overflow: "initial"
-    }),
-    []
-  );
-  return /* @__PURE__ */ import_react62.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react62.default.createElement(
-    import_react_virtualized.WindowScroller,
-    {
-      scrollElement,
-      style: (0, import_react62.useMemo)(() => ({ flex: "1 1 auto" }), [])
-    },
-    (0, import_react62.useCallback)(
-      ({
-        registerChild,
-        onChildScroll,
-        scrollTop
-      }) => /* @__PURE__ */ import_react62.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react62.default.createElement(
-        import_react_window.VariableSizeList,
-        {
-          ref: listRef,
-          key: scrollTop,
-          style: listStyle,
-          itemKey: keyExtractor,
-          onScroll: ({ scrollOffset }) => {
-            onChildScroll({ scrollTop: scrollOffset });
-          },
-          initialScrollOffset: scrollTop,
-          width: size.width,
-          height: size.height,
-          itemCount: items.length,
-          itemSize: getItemHeight,
-          estimatedItemSize: ROW_HEIGHT
-        },
-        VirtualizedListRow
-      )),
-      [
-        listStyle,
-        keyExtractor,
-        size.width,
-        size.height,
-        items.length,
-        getItemHeight
-      ]
-    )
-  ));
-});
-var VirtualizedList = (0, import_react62.memo)(
-  VirtualizedListInner
-);
 var ListViewRoot = memoGeneric(
   forwardRefGeneric(function ListViewRootInner({
     id,
@@ -9286,7 +9543,7 @@ var ListViewRoot = memoGeneric(
     itemHeight,
     getItemHeightForItem
   }, forwardedRef) {
-    const handleClick = (0, import_react62.useCallback)(
+    const handleClick = (0, import_react63.useCallback)(
       (event) => {
         if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
           return;
@@ -9296,11 +9553,11 @@ var ListViewRoot = memoGeneric(
       },
       [onPress]
     );
-    const renderChild = (0, import_react62.useCallback)(
+    const renderChild = (0, import_react63.useCallback)(
       (index) => renderItem(data[index], index, { isDragOverlay: false }),
       [data, renderItem]
     );
-    const defaultContextValue = (0, import_react62.useMemo)(
+    const defaultContextValue = (0, import_react63.useMemo)(
       () => ({
         marginType: "none",
         selectedPosition: "only",
@@ -9308,22 +9565,22 @@ var ListViewRoot = memoGeneric(
       }),
       []
     );
-    const getItemContextValue = (0, import_react62.useCallback)(
+    const getItemContextValue = (0, import_react63.useCallback)(
       (i) => {
         if (variant === "bare" || variant === "normal") {
           const current2 = renderChild(i);
-          if (!(0, import_react62.isValidElement)(current2)) return defaultContextValue;
+          if (!(0, import_react63.isValidElement)(current2)) return defaultContextValue;
           return {
             ...defaultContextValue,
             isSectionHeader: !!current2.props.isSectionHeader
           };
         }
         const current = renderChild(i);
-        if (!(0, import_react62.isValidElement)(current)) return;
+        if (!(0, import_react63.isValidElement)(current)) return;
         const prevChild = i - 1 >= 0 && renderChild(i - 1);
         const nextChild = i + 1 < data.length && renderChild(i + 1);
-        const next = (0, import_react62.isValidElement)(nextChild) ? nextChild : void 0;
-        const prev = (0, import_react62.isValidElement)(prevChild) ? prevChild : void 0;
+        const next = (0, import_react63.isValidElement)(nextChild) ? nextChild : void 0;
+        const prev = (0, import_react63.isValidElement)(prevChild) ? prevChild : void 0;
         const hasMarginTop = !prev;
         const hasMarginBottom = !next || current.props.isSectionHeader || next && next.props.isSectionHeader;
         let marginType;
@@ -9356,27 +9613,27 @@ var ListViewRoot = memoGeneric(
       },
       [variant, defaultContextValue, renderChild, data.length]
     );
-    const draggingContextOverlayValue = (0, import_react62.useMemo)(
+    const draggingContextOverlayValue = (0, import_react63.useMemo)(
       () => ({
         isDragOverlay: true
       }),
       []
     );
-    const renderOverlay = (0, import_react62.useCallback)(
-      (index) => /* @__PURE__ */ import_react62.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react62.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
+    const renderOverlay = (0, import_react63.useCallback)(
+      (index) => /* @__PURE__ */ import_react63.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react63.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
       [draggingContextOverlayValue, renderItem, data]
     );
-    const renderWrappedChild = (0, import_react62.useCallback)(
+    const renderWrappedChild = (0, import_react63.useCallback)(
       (index) => {
         const contextValue2 = getItemContextValue(index);
         const current = renderChild(index);
-        if (!contextValue2 || !(0, import_react62.isValidElement)(current)) return null;
-        return /* @__PURE__ */ import_react62.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue2 }, current);
+        if (!contextValue2 || !(0, import_react63.isValidElement)(current)) return null;
+        return /* @__PURE__ */ import_react63.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue2 }, current);
       },
       [getItemContextValue, renderChild]
     );
-    const ids = (0, import_react62.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
-    const withSortable = (children) => sortable ? /* @__PURE__ */ import_react62.default.createElement(
+    const ids = (0, import_react63.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
+    const withSortable = (children) => sortable ? /* @__PURE__ */ import_react63.default.createElement(
       Sortable.Root,
       {
         id: sortableId,
@@ -9389,8 +9646,8 @@ var ListViewRoot = memoGeneric(
       },
       children
     ) : children;
-    const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react62.default.createElement(ScrollArea, null, children) : children(null);
-    const getItemHeight = (0, import_react62.useCallback)(
+    const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react63.default.createElement(ScrollArea, null, children) : children;
+    const getItemHeight = (0, import_react63.useCallback)(
       (index) => {
         const child = getItemContextValue(index);
         if (child?.isSectionHeader && sectionHeaderVariant === "label") {
@@ -9410,13 +9667,13 @@ var ListViewRoot = memoGeneric(
         data
       ]
     );
-    const getKey = (0, import_react62.useCallback)(
+    const getKey = (0, import_react63.useCallback)(
       (index) => keyExtractor(data[index], index),
       [data, keyExtractor]
     );
-    const draggingContextValue = (0, import_react62.useMemo)(() => ({}), []);
-    const gapStyle = (0, import_react62.useMemo)(() => ({ gap: `${gap}px` }), [gap]);
-    const contextValue = (0, import_react62.useMemo)(
+    const draggingContextValue = (0, import_react63.useMemo)(() => ({}), []);
+    const gapStyle = (0, import_react63.useMemo)(() => ({ gap: `${gap}px` }), [gap]);
+    const contextValue = (0, import_react63.useMemo)(
       () => ({
         pressEventName,
         colorScheme,
@@ -9440,7 +9697,7 @@ var ListViewRoot = memoGeneric(
         indentation
       ]
     );
-    return /* @__PURE__ */ import_react62.default.createElement(ListViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react62.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react62.default.createElement(
+    return /* @__PURE__ */ import_react63.default.createElement(ListViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react63.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react63.default.createElement(
       "div",
       {
         id,
@@ -9467,21 +9724,21 @@ var ListViewRoot = memoGeneric(
         onDragLeave,
         onDrop
       },
-      data.length === 0 && renderEmptyState ? renderEmptyState() : withScrollable(
-        (scrollElementRef) => withSortable(
-          virtualized ? /* @__PURE__ */ import_react62.default.createElement(
-            VirtualizedList,
-            {
-              ref: forwardedRef,
-              scrollElement: scrollElementRef,
-              items: data,
-              size: virtualized,
-              getItemHeight,
-              keyExtractor: getKey,
-              renderItem: renderWrappedChild
-            }
-          ) : (0, import_noya_utils8.range)(0, data.length).map(renderWrappedChild)
+      data.length === 0 && renderEmptyState ? renderEmptyState() : virtualized != null ? withSortable(
+        /* @__PURE__ */ import_react63.default.createElement(
+          Virtualized2,
+          {
+            ref: forwardedRef,
+            height: virtualized,
+            itemCount: data.length,
+            getItemHeight,
+            renderItem: renderWrappedChild,
+            itemKey: getKey,
+            useScrollArea: scrollable
+          }
         )
+      ) : withScrollable(
+        withSortable((0, import_noya_utils8.range)(0, data.length).map(renderWrappedChild))
       )
     )));
   })
@@ -9489,7 +9746,7 @@ var ListViewRoot = memoGeneric(
 
 // src/components/listView/ListViewRow.tsx
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react63 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 
 // src/hooks/mergeEventHandlers.ts
 var import_noya_utils9 = require("@noya-app/noya-utils");
@@ -9515,7 +9772,7 @@ function mergeEventHandlers(...handlerMaps) {
 }
 
 // src/components/listView/ListViewRow.tsx
-var RowContainer = (0, import_react63.forwardRef)(
+var RowContainer = (0, import_react64.forwardRef)(
   ({
     as: Component = "div",
     href,
@@ -9542,7 +9799,7 @@ var RowContainer = (0, import_react63.forwardRef)(
     "aria-selected": ariaSelected,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react63.default.createElement(
+    return /* @__PURE__ */ import_react64.default.createElement(
       Component,
       {
         ref,
@@ -9614,7 +9871,7 @@ var RowContainer = (0, import_react63.forwardRef)(
     );
   }
 );
-var ListViewDragIndicatorElement = (0, import_react63.forwardRef)(
+var ListViewDragIndicatorElement = (0, import_react64.forwardRef)(
   ({
     className,
     $relativeDropPosition,
@@ -9624,7 +9881,7 @@ var ListViewDragIndicatorElement = (0, import_react63.forwardRef)(
     style: style2,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react63.default.createElement(
+    return /* @__PURE__ */ import_react64.default.createElement(
       "div",
       {
         ref,
@@ -9692,27 +9949,27 @@ var ListViewRow = memoGeneric(
       divider,
       sortable,
       indentation
-    } = (0, import_react63.useContext)(ListViewContext);
-    const { marginType, selectedPosition } = (0, import_react63.useContext)(ListRowContext);
+    } = (0, import_react64.useContext)(ListViewContext);
+    const { marginType, selectedPosition } = (0, import_react64.useContext)(ListRowContext);
     const { hoverProps } = useHover({
       onHoverChange
     });
-    const { isDragOverlay } = (0, import_react63.useContext)(ListViewDraggingContext);
-    const handlePress = (0, import_react63.useCallback)(
+    const { isDragOverlay } = (0, import_react64.useContext)(ListViewDraggingContext);
+    const handlePress = (0, import_react64.useCallback)(
       (event) => {
         if (event.button !== 0) return;
         onPress?.(event);
       },
       [onPress]
     );
-    const handleDoubleClick = (0, import_react63.useCallback)(
+    const handleDoubleClick = (0, import_react64.useCallback)(
       (event) => {
         event.stopPropagation();
         onDoubleClick?.();
       },
       [onDoubleClick]
     );
-    const mergedStyle = (0, import_react63.useMemo)(() => {
+    const mergedStyle = (0, import_react64.useMemo)(() => {
       return isDragOverlay ? {
         // TODO: Where do these offsets actually come from?
         transform: `translate3d(-36px, -6px, 0)`,
@@ -9723,7 +9980,7 @@ var ListViewRow = memoGeneric(
     const renderContent = (renderProps, ref, relativeDropPositionProp) => {
       const Component = RowContainer;
       const relativeDropPosition = testRelativeDropPosition ?? relativeDropPositionProp;
-      const element = /* @__PURE__ */ import_react63.default.createElement(
+      const element = /* @__PURE__ */ import_react64.default.createElement(
         Component,
         {
           as,
@@ -9758,7 +10015,7 @@ var ListViewRow = memoGeneric(
           className,
           $clickable: !!onPress
         },
-        relativeDropPosition && /* @__PURE__ */ import_react63.default.createElement(
+        relativeDropPosition && /* @__PURE__ */ import_react64.default.createElement(
           ListViewDragIndicatorElement,
           {
             key: relativeDropPosition,
@@ -9773,11 +10030,11 @@ var ListViewRow = memoGeneric(
             }) : dragIndicatorStyle
           }
         ),
-        depth > 0 && /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
+        depth > 0 && /* @__PURE__ */ import_react64.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
         children
       );
       if (menuItems && onSelectMenuItem) {
-        return /* @__PURE__ */ import_react63.default.createElement(
+        return /* @__PURE__ */ import_react64.default.createElement(
           ContextMenu,
           {
             items: menuItems,
@@ -9790,7 +10047,7 @@ var ListViewRow = memoGeneric(
       return element;
     };
     if (sortable && id) {
-      return /* @__PURE__ */ import_react63.default.createElement(
+      return /* @__PURE__ */ import_react64.default.createElement(
         Sortable.Item,
         {
           id,
@@ -9808,12 +10065,12 @@ var ListViewRow = memoGeneric(
 );
 
 // src/components/listView/ListViewRowTitle.tsx
-var import_react64 = __toESM(require("react"));
-var ListViewRowTitle = (0, import_react64.memo)(function ListViewRowTitle2({
+var import_react65 = __toESM(require("react"));
+var ListViewRowTitle = (0, import_react65.memo)(function ListViewRowTitle2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(
     "span",
     {
       className: cx(
@@ -9870,7 +10127,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-var import_react65 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
@@ -9881,9 +10138,9 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react65.useContext)(ListViewContext);
+  const { expandable } = (0, import_react66.useContext)(ListViewContext);
   const stableOnClickChevron = useStableCallback(onClickChevron);
-  const handleClickChevron = (0, import_react65.useCallback)(
+  const handleClickChevron = (0, import_react66.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -9891,7 +10148,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
     },
     [stableOnClickChevron]
   );
-  return /* @__PURE__ */ import_react65.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && chevronPosition !== "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react65.default.createElement(
+  return /* @__PURE__ */ import_react66.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && chevronPosition !== "end" && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react66.default.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -9900,7 +10157,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null) : /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+  ), /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null) : /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -9909,7 +10166,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 }))));
+  ), /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: 8 }))));
 });
 var TreeView;
 ((TreeView2) => {
@@ -9977,9 +10234,9 @@ var List = memoGeneric(
       getItemStyle,
       getItemClassName
     } = props;
-    const [internalHoveredId, setHoveredId] = (0, import_react66.useState)();
-    const [internalRenamingId, setRenamingId] = (0, import_react66.useState)();
-    const [dropdownOpenId, setDropdownOpenId] = (0, import_react66.useState)();
+    const [internalHoveredId, setHoveredId] = (0, import_react67.useState)();
+    const [internalRenamingId, setRenamingId] = (0, import_react67.useState)();
+    const [dropdownOpenId, setDropdownOpenId] = (0, import_react67.useState)();
     const hoveredId = internalHoveredId ?? testHoveredId;
     const renamingId = testRenamingId ?? internalRenamingId;
     const itemClassName = cx(
@@ -9987,7 +10244,7 @@ var List = memoGeneric(
       pyMap[size],
       itemClassNameProp
     );
-    const itemStyle = (0, import_react66.useMemo)(
+    const itemStyle = (0, import_react67.useMemo)(
       () => ({ ...cssVarOverrides, ...itemStyleProp }),
       [itemStyleProp]
     );
@@ -10015,17 +10272,17 @@ var List = memoGeneric(
     };
     const ViewComponent = expandable ? TreeView : ListView;
     const LinkComponent2 = useLinkComponent();
-    const fileDropTargetRef = (0, import_react66.useRef)(null);
+    const fileDropTargetRef = (0, import_react67.useRef)(null);
     const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
       fileDropTargetRef,
       onFilesDrop
     );
-    (0, import_react66.useImperativeHandle)(ref, () => ({
+    (0, import_react67.useImperativeHandle)(ref, () => ({
       editName: (id) => {
         setRenamingId(id);
       }
     }));
-    return /* @__PURE__ */ import_react66.default.createElement(
+    return /* @__PURE__ */ import_react67.default.createElement(
       ViewComponent.Root,
       {
         variant: "bare",
@@ -10074,7 +10331,7 @@ var List = memoGeneric(
               handleSelect(id);
             }
           };
-          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ import_react66.default.createElement(
+          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ import_react67.default.createElement(
             ActionMenu,
             {
               menuItems,
@@ -10094,7 +10351,7 @@ var List = memoGeneric(
           let below = detailPosition === "below" ? detailContent : void 0;
           if (below && normalizedDetailLineClamp) {
             const clampClassName = DETAIL_LINE_CLAMP_CLASSES[normalizedDetailLineClamp];
-            below = /* @__PURE__ */ import_react66.default.createElement(
+            below = /* @__PURE__ */ import_react67.default.createElement(
               "div",
               {
                 className: cx(
@@ -10107,7 +10364,7 @@ var List = memoGeneric(
           }
           const perItemStyle = getItemStyle?.(item, isSelected);
           const perItemClassName = getItemClassName?.(item, isSelected);
-          return /* @__PURE__ */ import_react66.default.createElement(
+          return /* @__PURE__ */ import_react67.default.createElement(
             ViewComponent.Row,
             {
               as: typeof href === "string" ? LinkComponent2 : void 0,
@@ -10162,7 +10419,7 @@ var List = memoGeneric(
               },
               dragIndicatorStyle
             },
-            /* @__PURE__ */ import_react66.default.createElement(
+            /* @__PURE__ */ import_react67.default.createElement(
               "div",
               {
                 className: cx(
@@ -10170,7 +10427,7 @@ var List = memoGeneric(
                   rowGapMap[size]
                 )
               },
-              thumbnail && /* @__PURE__ */ import_react66.default.createElement(
+              thumbnail && /* @__PURE__ */ import_react67.default.createElement(
                 "div",
                 {
                   className: cx(
@@ -10183,13 +10440,13 @@ var List = memoGeneric(
                 },
                 thumbnail
               ),
-              /* @__PURE__ */ import_react66.default.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-w-0" }, /* @__PURE__ */ import_react66.default.createElement("div", { className: "n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2" }, /* @__PURE__ */ import_react66.default.createElement(
+              /* @__PURE__ */ import_react67.default.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-w-0" }, /* @__PURE__ */ import_react67.default.createElement("div", { className: "n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2" }, /* @__PURE__ */ import_react67.default.createElement(
                 "div",
                 {
                   className: "n-flex-1 n-w-0 n-flex n-items-center",
                   tabIndex: -1
                 },
-                isRenaming ? /* @__PURE__ */ import_react66.default.createElement(
+                isRenaming ? /* @__PURE__ */ import_react67.default.createElement(
                   ViewComponent.EditableRowTitle,
                   {
                     value: getName(item),
@@ -10205,7 +10462,7 @@ var List = memoGeneric(
                       e.stopPropagation();
                     }
                   }
-                ) : /* @__PURE__ */ import_react66.default.createElement(
+                ) : /* @__PURE__ */ import_react67.default.createElement(
                   ViewComponent.RowTitle,
                   {
                     className: cx(
@@ -10215,7 +10472,7 @@ var List = memoGeneric(
                   },
                   getName(item)
                 )
-              ), right && detailPosition === "end" && /* @__PURE__ */ import_react66.default.createElement(DetailContainer, { selected: isSelected }, right), end && detailPosition === "end" && /* @__PURE__ */ import_react66.default.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ import_react66.default.createElement(
+              ), right && detailPosition === "end" && /* @__PURE__ */ import_react67.default.createElement(DetailContainer, { selected: isSelected }, right), end && detailPosition === "end" && /* @__PURE__ */ import_react67.default.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ import_react67.default.createElement(
                 DetailContainer,
                 {
                   selected: isSelected,
@@ -10223,8 +10480,8 @@ var List = memoGeneric(
                 },
                 below
               )),
-              right && detailPosition === "below" && /* @__PURE__ */ import_react66.default.createElement(DetailContainer, { selected: isSelected }, right),
-              end && detailPosition === "below" && /* @__PURE__ */ import_react66.default.createElement(DetailContainer, { selected: isSelected }, end)
+              right && detailPosition === "below" && /* @__PURE__ */ import_react67.default.createElement(DetailContainer, { selected: isSelected }, right),
+              end && detailPosition === "below" && /* @__PURE__ */ import_react67.default.createElement(DetailContainer, { selected: isSelected }, end)
             )
           );
         }
@@ -10232,12 +10489,12 @@ var List = memoGeneric(
     );
   })
 );
-var DetailContainer = (0, import_react66.memo)(function DetailContainer2({
+var DetailContainer = (0, import_react67.memo)(function DetailContainer2({
   children,
   selected,
   align = "center"
 }) {
-  return /* @__PURE__ */ import_react66.default.createElement(
+  return /* @__PURE__ */ import_react67.default.createElement(
     "div",
     {
       className: cx(
@@ -10308,7 +10565,7 @@ var itemHeightMap = {
 // src/components/Collection.tsx
 var Collection = forwardRefGeneric(function Collection2(props, ref) {
   const { viewType, ...rest } = props;
-  return viewType === "grid" ? /* @__PURE__ */ import_react67.default.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ import_react67.default.createElement(List, { ref, ...rest });
+  return viewType === "grid" ? /* @__PURE__ */ import_react68.default.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ import_react68.default.createElement(List, { ref, ...rest });
 });
 
 // ../noya-color/src/convert.ts
@@ -10465,7 +10722,7 @@ var import_css_background = __toESM(require_css_background());
 
 // src/components/ColorSwatch.tsx
 var import_noya_icons6 = require("@noya-app/noya-icons");
-var import_react68 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 var colorSwatchSizeMap = {
   xxsmall: 15,
   xsmall: 21,
@@ -10473,7 +10730,7 @@ var colorSwatchSizeMap = {
   medium: 36,
   large: 48
 };
-var ColorSwatch = (0, import_react68.forwardRef)(function ColorSwatch2({
+var ColorSwatch = (0, import_react69.forwardRef)(function ColorSwatch2({
   color,
   size = "small",
   checked,
@@ -10483,7 +10740,7 @@ var ColorSwatch = (0, import_react68.forwardRef)(function ColorSwatch2({
 }, ref) {
   const sizePx = colorSwatchSizeMap[size];
   const checkedColor = getContrastColorForBackground(color);
-  return /* @__PURE__ */ import_react68.default.createElement("div", { className: "n-relative", style: { width: sizePx, height: sizePx } }, /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react69.default.createElement("div", { className: "n-relative", style: { width: sizePx, height: sizePx } }, /* @__PURE__ */ import_react69.default.createElement(
     Component,
     {
       ...props,
@@ -10499,7 +10756,7 @@ var ColorSwatch = (0, import_react68.forwardRef)(function ColorSwatch2({
         ...style2
       }
     }
-  ), checked && /* @__PURE__ */ import_react68.default.createElement(
+  ), checked && /* @__PURE__ */ import_react69.default.createElement(
     import_noya_icons6.CheckIcon,
     {
       color: checkedColor,
@@ -10510,7 +10767,7 @@ var ColorSwatch = (0, import_react68.forwardRef)(function ColorSwatch2({
 
 // src/components/ColorSwatchControl.tsx
 var import_radix_ui9 = require("radix-ui");
-var import_react69 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 function ColorSwatchControl(props) {
   const {
     options,
@@ -10525,7 +10782,7 @@ function ColorSwatchControl(props) {
     id,
     style: style2
   } = props;
-  const styles3 = (0, import_react69.useMemo)(() => {
+  const styles3 = (0, import_react70.useMemo)(() => {
     return {
       display: "grid",
       gridTemplateColumns: `repeat(auto-fill, minmax(${colorSwatchSizeMap[size]}px, 1fr))`,
@@ -10533,8 +10790,8 @@ function ColorSwatchControl(props) {
       ...style2
     };
   }, [size, style2]);
-  const content = /* @__PURE__ */ import_react69.default.createElement("div", { className, id, style: styles3 }, options.map((option) => {
-    const item = /* @__PURE__ */ import_react69.default.createElement(
+  const content = /* @__PURE__ */ import_react70.default.createElement("div", { className, id, style: styles3 }, options.map((option) => {
+    const item = /* @__PURE__ */ import_react70.default.createElement(
       ColorSwatch,
       {
         key: `${option}-color-swatch`,
@@ -10547,7 +10804,7 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return /* @__PURE__ */ import_react69.default.createElement(
+    return /* @__PURE__ */ import_react70.default.createElement(
       import_radix_ui9.ToggleGroup.Item,
       {
         asChild: true,
@@ -10558,7 +10815,7 @@ function ColorSwatchControl(props) {
       item
     );
   }));
-  return /* @__PURE__ */ import_react69.default.createElement(
+  return /* @__PURE__ */ import_react70.default.createElement(
     import_radix_ui9.ToggleGroup.Root,
     {
       type: "single",
@@ -10573,11 +10830,11 @@ function ColorSwatchControl(props) {
 
 // src/components/Combobox.tsx
 var import_noya_icons8 = require("@noya-app/noya-icons");
-var import_react72 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 
 // src/utils/combobox.ts
 var import_noya_utils13 = require("@noya-app/noya-utils");
-var import_react70 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 
 // src/utils/fuzzyScorer.ts
 var import_vscode_fuzzy_scorer = require("vscode-fuzzy-scorer");
@@ -10903,7 +11160,7 @@ function getNextIndex({
   return nextIndex;
 }
 function useComboboxState(state) {
-  return (0, import_react70.useSyncExternalStore)(
+  return (0, import_react71.useSyncExternalStore)(
     state.subscribe,
     state.getSnapshot,
     state.getSnapshot
@@ -10914,7 +11171,7 @@ function getNodeText(node) {
     return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(getNodeText).join("");
-  if (import_react70.default.isValidElement(node)) {
+  if (import_react71.default.isValidElement(node)) {
     return getNodeText(node.props?.children);
   }
   return "";
@@ -10922,7 +11179,7 @@ function getNodeText(node) {
 
 // src/components/ComboboxMenu.tsx
 var import_noya_icons7 = require("@noya-app/noya-icons");
-var import_react71 = __toESM(require("react"));
+var import_react72 = __toESM(require("react"));
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
     items,
@@ -10936,7 +11193,7 @@ var ComboboxMenu = memoGeneric(
     itemHeight,
     getRowHeightForItem
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react71.default.createElement(
+    return /* @__PURE__ */ import_react72.default.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -10946,7 +11203,7 @@ var ComboboxMenu = memoGeneric(
           return item.value;
         },
         data: items,
-        virtualized: listSize,
+        virtualized: listSize.height,
         ...itemHeight ? { itemHeight } : {},
         ...getRowHeightForItem ? { getItemHeightForItem: getRowHeightForItem } : {},
         pressEventName: "onPointerDown",
@@ -10954,7 +11211,7 @@ var ComboboxMenu = memoGeneric(
         style: style2,
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ import_react71.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ import_react71.default.createElement(
+            return /* @__PURE__ */ import_react72.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ import_react72.default.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -10969,7 +11226,7 @@ var ComboboxMenu = memoGeneric(
             // Only selectable items can have tooltips in this menu
             isSelectableMenuItem(item) ? item.tooltip : void 0
           );
-          return /* @__PURE__ */ import_react71.default.createElement(
+          return /* @__PURE__ */ import_react72.default.createElement(
             ListView.Row,
             {
               key: item.value,
@@ -10982,12 +11239,12 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ import_react71.default.createElement("div", { className: "n-flex n-flex-1 n-min-w-0 n-items-start" }, indented && /* @__PURE__ */ import_react71.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react71.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react71.default.createElement(import_noya_icons7.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react71.default.createElement(
+            /* @__PURE__ */ import_react72.default.createElement("div", { className: "n-flex n-flex-1 n-min-w-0 n-items-start" }, indented && /* @__PURE__ */ import_react72.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react72.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react72.default.createElement(import_noya_icons7.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react72.default.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
               }
-            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, /* @__PURE__ */ import_react71.default.createElement(MenuIcon, { icon: item.icon }), /* @__PURE__ */ import_react71.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react71.default.createElement("div", { className: "n-flex n-flex-col n-min-w-0 n-flex-1" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "n-min-w-0 n-truncate" }, tokens.map((token, j) => /* @__PURE__ */ import_react71.default.createElement(
+            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ import_react72.default.createElement(import_react72.default.Fragment, null, /* @__PURE__ */ import_react72.default.createElement(MenuIcon, { icon: item.icon }), /* @__PURE__ */ import_react72.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react72.default.createElement("div", { className: "n-flex n-flex-col n-min-w-0 n-flex-1" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "n-min-w-0 n-truncate" }, tokens.map((token, j) => /* @__PURE__ */ import_react72.default.createElement(
               "span",
               {
                 key: `${item.value}-token-${j}`,
@@ -10997,16 +11254,16 @@ var ComboboxMenu = memoGeneric(
                 )
               },
               token.text
-            ))), tooltip && /* @__PURE__ */ import_react71.default.createElement(Small, { color: "textSubtle", className: "n-truncate" }, tooltip))),
-            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ import_react71.default.createElement("div", { className: "n-flex n-items-center n-min-w-0 n-ml-2" }, item.shortcut ? /* @__PURE__ */ import_react71.default.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && /* @__PURE__ */ import_react71.default.createElement(MenuIcon, { icon: item.icon }))
+            ))), tooltip && /* @__PURE__ */ import_react72.default.createElement(Small, { color: "textSubtle", className: "n-truncate" }, tooltip))),
+            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ import_react72.default.createElement("div", { className: "n-flex n-items-center n-min-w-0 n-ml-2" }, item.shortcut ? /* @__PURE__ */ import_react72.default.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && /* @__PURE__ */ import_react72.default.createElement(MenuIcon, { icon: item.icon }))
           );
         }
       }
     );
   })
 );
-var MenuIcon = (0, import_react71.memo)(function MenuIcon2({ icon }) {
-  return /* @__PURE__ */ import_react71.default.createElement("div", { className: "n-relative n-top-[2px]" }, renderIcon(icon));
+var MenuIcon = (0, import_react72.memo)(function MenuIcon2({ icon }) {
+  return /* @__PURE__ */ import_react72.default.createElement("div", { className: "n-relative n-top-[2px]" }, renderIcon(icon));
 });
 
 // src/components/Combobox.tsx
@@ -11027,9 +11284,10 @@ var Combobox = memoGeneric(
     openMenuBehavior = "showFilteredItems",
     onFocus,
     onDeleteWhenEmpty,
+    iconPosition = "right",
     ...rest
   }, forwardedRef) {
-    const props = (0, import_react72.useMemo)(() => {
+    const props = (0, import_react73.useMemo)(() => {
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
@@ -11059,7 +11317,7 @@ var Combobox = memoGeneric(
       rest.onBlur,
       rest.allowArbitraryValues
     ]);
-    const ref = (0, import_react72.useRef)(null);
+    const ref = (0, import_react73.useRef)(null);
     function getInitialValueString() {
       if (props.mode === "string") {
         return props.value ?? "";
@@ -11068,7 +11326,7 @@ var Combobox = memoGeneric(
       }
     }
     const initialValueString = getInitialValueString();
-    const [comboboxState] = (0, import_react72.useState)(
+    const [comboboxState] = (0, import_react73.useState)(
       () => new ComboboxState(
         items,
         initialValueString,
@@ -11076,26 +11334,26 @@ var Combobox = memoGeneric(
       )
     );
     const state = useComboboxState(comboboxState);
-    const [isFocused, setIsFocused] = (0, import_react72.useState)(false);
-    const listRef = (0, import_react72.useRef)(null);
-    const [shouldBlur, setShouldBlur] = (0, import_react72.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react73.useState)(false);
+    const listRef = (0, import_react73.useRef)(null);
+    const [shouldBlur, setShouldBlur] = (0, import_react73.useState)(false);
     const { fieldId: id } = useLabel({
       fieldId: rest.id
     });
-    (0, import_react72.useEffect)(() => {
+    (0, import_react73.useEffect)(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
-    (0, import_react72.useEffect)(() => {
+    (0, import_react73.useEffect)(() => {
       comboboxState.setFilter(initialValueString);
     }, [comboboxState, initialValueString]);
     const { filter, selectedIndex, filteredItems } = state;
     const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
-    (0, import_react72.useEffect)(() => {
+    (0, import_react73.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const handleBlur = (0, import_react72.useCallback)(() => {
+    const handleBlur = (0, import_react73.useCallback)(() => {
       ref.current?.blur();
       comboboxState.reset(initialValueString);
       if (props.mode === "string") {
@@ -11114,7 +11372,7 @@ var Combobox = memoGeneric(
       }
       setIsFocused(false);
     }, [filter, initialValueString, props, state, comboboxState]);
-    const handleFocus = (0, import_react72.useCallback)(
+    const handleFocus = (0, import_react73.useCallback)(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
@@ -11128,7 +11386,7 @@ var Combobox = memoGeneric(
       },
       [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
-    const handleUpdateSelection = (0, import_react72.useCallback)(
+    const handleUpdateSelection = (0, import_react73.useCallback)(
       (item) => {
         if (item.type !== void 0) return;
         const selectedItem = comboboxState.selectCurrentItem(item);
@@ -11144,7 +11402,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleIndexChange = (0, import_react72.useCallback)(
+    const handleIndexChange = (0, import_react73.useCallback)(
       (index) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
@@ -11160,7 +11418,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleChange = (0, import_react72.useCallback)(
+    const handleChange = (0, import_react73.useCallback)(
       (value) => {
         if (readOnly) return;
         comboboxState.setFilter(value);
@@ -11175,7 +11433,7 @@ var Combobox = memoGeneric(
       },
       [readOnly, props, comboboxState]
     );
-    const handleKeyDown = (0, import_react72.useCallback)(
+    const handleKeyDown = (0, import_react73.useCallback)(
       (event) => {
         let handled = false;
         const item = comboboxState.getSelectedItem();
@@ -11264,7 +11522,7 @@ var Combobox = memoGeneric(
       ]
     );
     const typeaheadValue = comboboxState.getTypeaheadValue();
-    (0, import_react72.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react73.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
         if (ref.current) {
@@ -11283,7 +11541,7 @@ var Combobox = memoGeneric(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    const handleChevronClick = (0, import_react72.useCallback)(
+    const handleChevronClick = (0, import_react73.useCallback)(
       (event) => {
         event.stopPropagation();
         if (shouldShowMenu) {
@@ -11303,34 +11561,34 @@ var Combobox = memoGeneric(
         comboboxState
       ]
     );
-    (0, import_react72.useEffect)(() => {
+    (0, import_react73.useEffect)(() => {
       if (!shouldBlur) return;
       if (document.activeElement !== ref.current) return;
       setShouldBlur(false);
       ref.current?.focus();
       handleBlur();
     }, [shouldBlur, handleBlur]);
-    const { sectionHeaderCount, menuItemsCount, tallMenuItemsCount } = (0, import_react72.useMemo)(
+    const { sectionHeaderCount, menuItemsCount, tallMenuItemsCount } = (0, import_react73.useMemo)(
       () => ListView.getMenuMetrics(filteredItems),
       [filteredItems]
     );
     const hasCheckedItems = items.some(
       (item) => isSelectableMenuItem(item) && item.checked
     );
-    return /* @__PURE__ */ import_react72.default.createElement(
+    return /* @__PURE__ */ import_react73.default.createElement(
       InputField2.Root,
       {
         id,
         size,
         sideOffset: 6,
         start: icon ? renderIcon(icon) : void 0,
-        end: /* @__PURE__ */ import_react72.default.createElement(import_react72.default.Fragment, null, loading && /* @__PURE__ */ import_react72.default.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ import_react72.default.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ import_react72.default.createElement(
+        end: /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, loading && /* @__PURE__ */ import_react73.default.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ import_react73.default.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ import_react73.default.createElement(
           InputField2.Button,
           {
             variant: "floating",
             onClick: handleChevronClick
           },
-          /* @__PURE__ */ import_react72.default.createElement(
+          /* @__PURE__ */ import_react73.default.createElement(
             import_noya_icons8.DropdownChevronIcon,
             {
               className: cx(
@@ -11350,7 +11608,7 @@ var Combobox = memoGeneric(
             maxBaseRows: 10.5
           });
           const adjustedListSize = { width, height: computedHeight };
-          return /* @__PURE__ */ import_react72.default.createElement(
+          return /* @__PURE__ */ import_react73.default.createElement(
             "div",
             {
               className: cx(
@@ -11358,7 +11616,7 @@ var Combobox = memoGeneric(
                 shouldShowMenu && !readOnly ? "n-flex" : "n-hidden"
               )
             },
-            filteredItems.length > 0 && !loading ? /* @__PURE__ */ import_react72.default.createElement(
+            filteredItems.length > 0 && !loading ? /* @__PURE__ */ import_react73.default.createElement(
               ComboboxMenu,
               {
                 ref: listRef,
@@ -11367,6 +11625,7 @@ var Combobox = memoGeneric(
                 onSelectItem: handleUpdateSelection,
                 onHoverIndex: handleIndexChange,
                 listSize: adjustedListSize,
+                iconPosition,
                 style: {
                   flex: `0 0 ${computedHeight}px`
                 },
@@ -11375,11 +11634,11 @@ var Combobox = memoGeneric(
                   getRowHeightForItem: (item) => isSelectableMenuItem(item) && item.tooltip ? ListView.tallRowHeight : baseRowHeight
                 } : { itemHeight: baseRowHeight }
               }
-            ) : /* @__PURE__ */ import_react72.default.createElement("div", { className: "n-flex n-flex-col n-h-[50px] n-p-5 n-items-center n-justify-center" }, /* @__PURE__ */ import_react72.default.createElement(Small, { className: "n-text-text-disabled" }, loading ? "Loading..." : "No results"))
+            ) : /* @__PURE__ */ import_react73.default.createElement("div", { className: "n-flex n-flex-col n-h-[50px] n-p-5 n-items-center n-justify-center" }, /* @__PURE__ */ import_react73.default.createElement(Small, { className: "n-text-text-disabled" }, loading ? "Loading..." : "No results"))
           );
         }
       },
-      /* @__PURE__ */ import_react72.default.createElement(
+      /* @__PURE__ */ import_react73.default.createElement(
         InputField2.Input,
         {
           ref,
@@ -11404,7 +11663,7 @@ var Combobox = memoGeneric(
           ...readOnly ? { readOnly: true } : {}
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react72.default.createElement(
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react73.default.createElement(
         InputField2.Typeahead,
         {
           value: typeaheadValue,
@@ -11418,12 +11677,12 @@ var Combobox = memoGeneric(
 );
 
 // src/components/CommandPalette.tsx
-var import_react74 = __toESM(require("react"));
+var import_react75 = __toESM(require("react"));
 
 // src/components/SearchCompletionMenu.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react73 = __toESM(require("react"));
-var SearchCompletionMenu = (0, import_react73.forwardRef)(function SearchCompletionMenu2({
+var import_react74 = __toESM(require("react"));
+var SearchCompletionMenu = (0, import_react74.forwardRef)(function SearchCompletionMenu2({
   onSelect,
   onHover,
   onClose,
@@ -11432,17 +11691,17 @@ var SearchCompletionMenu = (0, import_react73.forwardRef)(function SearchComplet
   testSelectedIndex,
   testSearch
 }, forwardedRef) {
-  const [state, setState] = (0, import_react73.useState)({
+  const [state, setState] = (0, import_react74.useState)({
     search: testSearch ?? "",
     index: 0
   });
   const { index, search } = state;
-  const listRef = import_react73.default.useRef(null);
+  const listRef = import_react74.default.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
-  const results = (0, import_react73.useMemo)(
+  const results = (0, import_react74.useMemo)(
     () => fuzzyFilter({
       items: items.map(
         (item) => typeof item.title === "string" ? item.title : item.value
@@ -11454,13 +11713,13 @@ var SearchCompletionMenu = (0, import_react73.forwardRef)(function SearchComplet
     })),
     [items, search]
   );
-  const setSearch = (0, import_react73.useCallback)((search2) => {
+  const setSearch = (0, import_react74.useCallback)((search2) => {
     setState((state2) => ({ ...state2, search: search2, index: 0 }));
   }, []);
-  const setIndex = (0, import_react73.useCallback)((index2) => {
+  const setIndex = (0, import_react74.useCallback)((index2) => {
     setState((state2) => ({ ...state2, index: index2 }));
   }, []);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     onHover?.(results[index]);
   }, [index, onHover, results]);
   const baseRowHeight = ListView.rowHeight;
@@ -11479,14 +11738,14 @@ var SearchCompletionMenu = (0, import_react73.forwardRef)(function SearchComplet
     width: listSize.width,
     height: searchHeight + listSize.height
   };
-  const selectAndClose = (0, import_react73.useCallback)(
+  const selectAndClose = (0, import_react74.useCallback)(
     (item) => {
       onSelect(item);
       onClose();
     },
     [onSelect, onClose]
   );
-  const handleKeyDown = (0, import_react73.useCallback)(
+  const handleKeyDown = (0, import_react74.useCallback)(
     (event) => {
       (0, import_noya_keymap5.handleKeyboardEvent)(event.nativeEvent, (0, import_noya_keymap5.getCurrentPlatform)(navigator), {
         ArrowUp: () => {
@@ -11514,13 +11773,13 @@ var SearchCompletionMenu = (0, import_react73.forwardRef)(function SearchComplet
     },
     [index, onClose, selectAndClose, results, setIndex]
   );
-  const inputRef = (0, import_react73.useRef)(null);
-  (0, import_react73.useImperativeHandle)(forwardedRef, () => ({
+  const inputRef = (0, import_react74.useRef)(null);
+  (0, import_react74.useImperativeHandle)(forwardedRef, () => ({
     focus: () => {
       inputRef.current?.focus();
     }
   }));
-  return /* @__PURE__ */ import_react73.default.createElement("div", { ...elementSize, className: "n-flex n-flex-col n-overflow-hidden" }, /* @__PURE__ */ import_react73.default.createElement(InputField2.Root, { className: "n-flex n-flex-0" }, /* @__PURE__ */ import_react73.default.createElement(
+  return /* @__PURE__ */ import_react74.default.createElement("div", { ...elementSize, className: "n-flex n-flex-col n-overflow-hidden" }, /* @__PURE__ */ import_react74.default.createElement(InputField2.Root, { className: "n-flex n-flex-0" }, /* @__PURE__ */ import_react74.default.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -11540,7 +11799,7 @@ var SearchCompletionMenu = (0, import_react73.forwardRef)(function SearchComplet
       onChange: setSearch,
       onKeyDown: handleKeyDown
     }
-  )), /* @__PURE__ */ import_react73.default.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ import_react73.default.createElement(
+  )), /* @__PURE__ */ import_react74.default.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ import_react74.default.createElement(
     ComboboxMenu,
     {
       ref: listRef,
@@ -11555,29 +11814,29 @@ var SearchCompletionMenu = (0, import_react73.forwardRef)(function SearchComplet
       onHoverIndex: setIndex,
       indented: hasCheckedItems
     }
-  ) : /* @__PURE__ */ import_react73.default.createElement(
+  ) : /* @__PURE__ */ import_react74.default.createElement(
     "div",
     {
       ...listSize,
       className: "n-flex n-flex-col n-p-20 n-items-center n-justify-center"
     },
-    /* @__PURE__ */ import_react73.default.createElement(Small, { color: "textDisabled" }, "No results")
+    /* @__PURE__ */ import_react74.default.createElement(Small, { color: "textDisabled" }, "No results")
   ));
 });
 
 // src/components/CommandPalette.tsx
-var CommandPalette = (0, import_react74.memo)(function CommandPalette2({
+var CommandPalette = (0, import_react75.memo)(function CommandPalette2({
   showCommandPalette,
   setShowCommandPalette,
   items,
   onSelect,
   onHover
 }) {
-  const menuRef = import_react74.default.useRef(null);
-  const handleClose = import_react74.default.useCallback(() => {
+  const menuRef = import_react75.default.useRef(null);
+  const handleClose = import_react75.default.useCallback(() => {
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
-  return /* @__PURE__ */ import_react74.default.createElement(
+  return /* @__PURE__ */ import_react75.default.createElement(
     Dialog,
     {
       style: {
@@ -11603,7 +11862,7 @@ var CommandPalette = (0, import_react74.memo)(function CommandPalette2({
         }, 0);
       }
     },
-    /* @__PURE__ */ import_react74.default.createElement("div", { className: "n-flex n-flex-col n-flex-1" }, /* @__PURE__ */ import_react74.default.createElement(AutoSizer, null, (size) => /* @__PURE__ */ import_react74.default.createElement(
+    /* @__PURE__ */ import_react75.default.createElement("div", { className: "n-flex n-flex-col n-flex-1" }, /* @__PURE__ */ import_react75.default.createElement(AutoSizer, null, (size) => /* @__PURE__ */ import_react75.default.createElement(
       SearchCompletionMenu,
       {
         ref: menuRef,
@@ -11618,21 +11877,21 @@ var CommandPalette = (0, import_react74.memo)(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-var import_react75 = __toESM(require("react"));
-var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ import_react75.default.createElement(
+var import_react76 = __toESM(require("react"));
+var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ import_react76.default.createElement(
   Tooltip,
   {
     key: userId,
-    content: /* @__PURE__ */ import_react75.default.createElement("div", { className: "n-flex n-flex-col" }, /* @__PURE__ */ import_react75.default.createElement(Small, null, name))
+    content: /* @__PURE__ */ import_react76.default.createElement("div", { className: "n-flex n-flex-col" }, /* @__PURE__ */ import_react76.default.createElement(Small, null, name))
   },
-  /* @__PURE__ */ import_react75.default.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
+  /* @__PURE__ */ import_react76.default.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ import_react75.default.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ import_react75.default.createElement(AvatarStack, { size: INPUT_HEIGHT }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react75.default.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ import_react75.default.createElement(
+  return /* @__PURE__ */ import_react76.default.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ import_react76.default.createElement(AvatarStack, { size: INPUT_HEIGHT }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react76.default.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ import_react76.default.createElement(
     Button,
     {
       active: isAssistantOpen,
@@ -11644,7 +11903,7 @@ var ConnectedUsersMenuLayout = ({
 };
 
 // src/components/DraggableMenuButton.tsx
-var import_react76 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -11662,8 +11921,8 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     onChange: onOpenChangeProp,
     defaultValue: false
   });
-  const [downPosition, setDownPosition] = (0, import_react76.useState)(null);
-  const handlePointerDownCapture = (0, import_react76.useCallback)(
+  const [downPosition, setDownPosition] = (0, import_react77.useState)(null);
+  const handlePointerDownCapture = (0, import_react77.useCallback)(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -11676,7 +11935,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [open]
   );
-  const handlePointerUp = (0, import_react76.useCallback)(
+  const handlePointerUp = (0, import_react77.useCallback)(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -11695,13 +11954,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [downPosition, open, setOpen]
   );
-  const handleOpenChange = (0, import_react76.useCallback)(
+  const handleOpenChange = (0, import_react77.useCallback)(
     (isOpen) => {
       if (!isOpen) setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ import_react76.default.createElement(
+  return /* @__PURE__ */ import_react77.default.createElement(
     "div",
     {
       ...rest,
@@ -11718,7 +11977,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onClick?.();
       }
     },
-    items && onSelect ? /* @__PURE__ */ import_react76.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react77.default.createElement(
       DropdownMenu,
       {
         open,
@@ -11727,14 +11986,14 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react76.default.createElement("div", { className: "n-pointer-events-none n-h-[15px]" }, /* @__PURE__ */ import_react76.default.createElement(
+      /* @__PURE__ */ import_react77.default.createElement("div", { className: "n-pointer-events-none n-h-[15px]" }, /* @__PURE__ */ import_react77.default.createElement(
         Icon,
         {
           name: iconName,
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ import_react76.default.createElement(
+    ) : /* @__PURE__ */ import_react77.default.createElement(
       Icon,
       {
         name: iconName,
@@ -11746,10 +12005,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 var import_radix_ui10 = require("radix-ui");
-var React71 = __toESM(require("react"));
-var import_react77 = require("react");
-var Drawer = React71.memo(
-  React71.forwardRef(function Drawer2({
+var React73 = __toESM(require("react"));
+var import_react78 = require("react");
+var Drawer = React73.memo(
+  React73.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -11770,7 +12029,7 @@ var Drawer = React71.memo(
       value: open,
       onChange: onOpenChange
     });
-    (0, import_react77.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react78.useImperativeHandle)(forwardedRef, () => ({
       expand: () => {
         setInternalOpen(true);
       },
@@ -11781,7 +12040,7 @@ var Drawer = React71.memo(
         return internalOpen;
       }
     }));
-    const inner = /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
+    const inner = /* @__PURE__ */ React73.createElement(React73.Fragment, null, /* @__PURE__ */ React73.createElement(
       import_radix_ui10.Dialog.Overlay,
       {
         className: cx(
@@ -11791,7 +12050,7 @@ var Drawer = React71.memo(
         ),
         style: overlayStyle
       }
-    ), /* @__PURE__ */ React71.createElement(
+    ), /* @__PURE__ */ React73.createElement(
       import_radix_ui10.Dialog.Content,
       {
         id,
@@ -11803,24 +12062,24 @@ var Drawer = React71.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React71.createElement(import_radix_ui10.Dialog.Title, null, title),
+      title && /* @__PURE__ */ React73.createElement(import_radix_ui10.Dialog.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React73.createElement(
       import_radix_ui10.Dialog.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React71.createElement(import_radix_ui10.Dialog.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React71.createElement(import_radix_ui10.Dialog.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React73.createElement(import_radix_ui10.Dialog.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React73.createElement(import_radix_ui10.Dialog.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
 
 // src/components/Fade.tsx
-var import_react78 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 var Fade = ({
   children,
   direction = "right",
@@ -11842,7 +12101,7 @@ var Fade = ({
     top: "n-left-0 n-right-0 n-top-0",
     bottom: "n-left-0 n-right-0 n-bottom-0"
   }[direction];
-  return /* @__PURE__ */ import_react78.default.createElement("div", { className: cx("n-relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ import_react78.default.createElement(
+  return /* @__PURE__ */ import_react79.default.createElement("div", { className: cx("n-relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ import_react79.default.createElement(
     "div",
     {
       className: cx(
@@ -11861,21 +12120,21 @@ var Fade = ({
 };
 
 // src/components/file-explorer/FileExplorerLayout.tsx
-var import_react79 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var FileExplorerLayout = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ import_react79.default.createElement(Section, { className: cx(className, "n-px-3 n-flex-1"), ...props }, children);
+}) => /* @__PURE__ */ import_react80.default.createElement(Section, { className: cx(className, "n-px-3 n-flex-1"), ...props }, children);
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
   isUploading,
   children
-}) => /* @__PURE__ */ import_react79.default.createElement("div", { className: "n-flex n-items-center n-gap-2" }, showUploadButton && /* @__PURE__ */ import_react79.default.createElement(
+}) => /* @__PURE__ */ import_react80.default.createElement("div", { className: "n-flex n-items-center n-gap-2" }, showUploadButton && /* @__PURE__ */ import_react80.default.createElement(
   Button,
   {
-    icon: isUploading ? /* @__PURE__ */ import_react79.default.createElement(ActivityIndicator, { size: 15 }) : "UploadIcon",
+    icon: isUploading ? /* @__PURE__ */ import_react80.default.createElement(ActivityIndicator, { size: 15 }) : "UploadIcon",
     onClick: onUpload,
     "aria-label": "Upload file",
     tooltip: "Upload file",
@@ -11885,7 +12144,7 @@ var FileExplorerUploadButton = ({
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
-    return /* @__PURE__ */ import_react79.default.createElement(Collection, { ref, className: "-n-mx-3 n-flex-1", ...props });
+    return /* @__PURE__ */ import_react80.default.createElement(Collection, { ref, className: "-n-mx-3 n-flex-1", ...props });
   }
 );
 var FileExplorerDetail = ({
@@ -11894,7 +12153,7 @@ var FileExplorerDetail = ({
   children,
   className,
   style: style2
-}) => /* @__PURE__ */ import_react79.default.createElement(
+}) => /* @__PURE__ */ import_react80.default.createElement(
   "span",
   {
     className: cx(
@@ -11909,10 +12168,10 @@ var FileExplorerDetail = ({
 var FileExplorerEmptyState = ({
   children: label = "No files",
   ...props
-}) => /* @__PURE__ */ import_react79.default.createElement(Banner, { className: "n-mx-3", ...props }, label);
+}) => /* @__PURE__ */ import_react80.default.createElement(Banner, { className: "n-mx-3", ...props }, label);
 
 // src/components/FileUploadIndicator.tsx
-var import_react81 = __toESM(require("react"));
+var import_react82 = __toESM(require("react"));
 
 // src/utils/formatByteSize.ts
 var byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -11926,7 +12185,7 @@ function formatByteSize(size) {
 
 // src/components/MediaThumbnail.tsx
 var import_noya_icons9 = require("@noya-app/noya-icons");
-var import_react80 = __toESM(require("react"));
+var import_react81 = __toESM(require("react"));
 
 // src/components/catppuccin/fileIcons.ts
 var fileIcons = {
@@ -14366,7 +14625,7 @@ var getThumbnailColors = (colorScheme, selected) => {
       };
   }
 };
-var MediaThumbnail = (0, import_react80.memo)(function MediaThumbnail2({
+var MediaThumbnail = (0, import_react81.memo)(function MediaThumbnail2({
   contentType: contentTypeProp,
   selected = false,
   className,
@@ -14384,14 +14643,14 @@ var MediaThumbnail = (0, import_react80.memo)(function MediaThumbnail2({
     selected
   );
   const contentType = getAssetType(contentTypeProp);
-  const iconStyles = (0, import_react80.useMemo)(
+  const iconStyles = (0, import_react81.useMemo)(
     () => ({
       width: iconSizeMap[size],
       height: iconSizeMap[size]
     }),
     [size]
   );
-  const content = (0, import_react80.useMemo)(() => {
+  const content = (0, import_react81.useMemo)(() => {
     if (renderThumbnailIcon) {
       const rendered = renderThumbnailIcon({ fileName, contentType });
       if (rendered) return rendered;
@@ -14411,7 +14670,7 @@ var MediaThumbnail = (0, import_react80.memo)(function MediaThumbnail2({
       renderUrl.searchParams.set("url", url);
       renderUrl.searchParams.set("fit", aspect);
       renderUrl.searchParams.set("theme", "light");
-      return /* @__PURE__ */ import_react80.default.createElement(
+      return /* @__PURE__ */ import_react81.default.createElement(
         "img",
         {
           src: renderUrl.toString(),
@@ -14425,23 +14684,23 @@ var MediaThumbnail = (0, import_react80.memo)(function MediaThumbnail2({
     }
     switch (contentType) {
       case "image":
-        return /* @__PURE__ */ import_react80.default.createElement(import_noya_icons9.ImageIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react81.default.createElement(import_noya_icons9.ImageIcon, { color: iconColor, style: iconStyles });
       case "video":
-        return /* @__PURE__ */ import_react80.default.createElement(import_noya_icons9.VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react81.default.createElement(import_noya_icons9.VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ import_react80.default.createElement(import_noya_icons9.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react81.default.createElement(import_noya_icons9.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon2 = Icons[iconName];
-          return /* @__PURE__ */ import_react80.default.createElement(Icon2, { color: iconColor, style: iconStyles });
+          return /* @__PURE__ */ import_react81.default.createElement(Icon2, { color: iconColor, style: iconStyles });
         }
         if (fileName) {
           if (fileName.endsWith(".noya")) {
-            return /* @__PURE__ */ import_react80.default.createElement(import_noya_icons9.NoyaIcon, { color: iconColor, style: iconStyles });
+            return /* @__PURE__ */ import_react81.default.createElement(import_noya_icons9.NoyaIcon, { color: iconColor, style: iconStyles });
           }
           const fileIcon = findFileIcon(fileName);
           if (fileIcon) {
-            return /* @__PURE__ */ import_react80.default.createElement(
+            return /* @__PURE__ */ import_react81.default.createElement(
               "img",
               {
                 src: `https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`,
@@ -14451,7 +14710,7 @@ var MediaThumbnail = (0, import_react80.memo)(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ import_react80.default.createElement(import_noya_icons9.FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react81.default.createElement(import_noya_icons9.FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [
     renderThumbnailIcon,
@@ -14465,7 +14724,7 @@ var MediaThumbnail = (0, import_react80.memo)(function MediaThumbnail2({
     iconStyles,
     iconName
   ]);
-  return /* @__PURE__ */ import_react80.default.createElement(
+  return /* @__PURE__ */ import_react81.default.createElement(
     "div",
     {
       className: cx(
@@ -14508,7 +14767,7 @@ function findFileIcon(fileName) {
 // src/components/Progress.tsx
 var import_noya_utils14 = require("@noya-app/noya-utils");
 var import_radix_ui11 = require("radix-ui");
-var React75 = __toESM(require("react"));
+var React77 = __toESM(require("react"));
 function Progress({
   value,
   colorScheme = "normal",
@@ -14517,18 +14776,18 @@ function Progress({
   style: styleProp
 }) {
   const clampedValue = (0, import_noya_utils14.clamp)(value, 0, 100);
-  const transformStyles = React75.useMemo(
+  const transformStyles = React77.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`,
       backgroundColor: color
     }),
     [color, clampedValue]
   );
-  const style2 = React75.useMemo(
+  const style2 = React77.useMemo(
     () => ({ transform: "translateZ(0)", ...styleProp }),
     [styleProp]
   );
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React77.createElement(
     import_radix_ui11.Progress.Root,
     {
       className: cx(
@@ -14538,7 +14797,7 @@ function Progress({
       style: style2,
       value: clampedValue
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React77.createElement(
       import_radix_ui11.Progress.Indicator,
       {
         className: cx(
@@ -14563,14 +14822,14 @@ function FileUploadIndicator({
 }) {
   const done = percent === 1;
   const value = typeof percent === "number" ? Math.round(percent) : 0;
-  return /* @__PURE__ */ import_react81.default.createElement("div", { className: "n-flex n-items-center n-gap-2" }, /* @__PURE__ */ import_react81.default.createElement("div", { className: "n-w-12 n-h-12 n-bg-background n-rounded-md n-overflow-hidden" }, /* @__PURE__ */ import_react81.default.createElement(
+  return /* @__PURE__ */ import_react82.default.createElement("div", { className: "n-flex n-items-center n-gap-2" }, /* @__PURE__ */ import_react82.default.createElement("div", { className: "n-w-12 n-h-12 n-bg-background n-rounded-md n-overflow-hidden" }, /* @__PURE__ */ import_react82.default.createElement(
     MediaThumbnail,
     {
       size: "medium",
       fileName: name,
       contentType
     }
-  )), /* @__PURE__ */ import_react81.default.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-justify-center n-gap-1 n-min-w-0" }, name && /* @__PURE__ */ import_react81.default.createElement(Small, { color: "text", className: "n-truncate n-leading-none" }, name), typeof total === "number" && typeof percent === "number" && /* @__PURE__ */ import_react81.default.createElement(
+  )), /* @__PURE__ */ import_react82.default.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-justify-center n-gap-1 n-min-w-0" }, name && /* @__PURE__ */ import_react82.default.createElement(Small, { color: "text", className: "n-truncate n-leading-none" }, name), typeof total === "number" && typeof percent === "number" && /* @__PURE__ */ import_react82.default.createElement(
     Small,
     {
       color: "textSubtle",
@@ -14581,7 +14840,7 @@ function FileUploadIndicator({
     " /",
     " ",
     formatByteSize(total)
-  ), typeof value === "number" && /* @__PURE__ */ import_react81.default.createElement(
+  ), typeof value === "number" && /* @__PURE__ */ import_react82.default.createElement(
     Progress,
     {
       value,
@@ -14589,7 +14848,7 @@ function FileUploadIndicator({
       className: "n-rounded-sm",
       colorScheme: "secondary"
     }
-  )), /* @__PURE__ */ import_react81.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-gap-2" }, typeof value === "number" && /* @__PURE__ */ import_react81.default.createElement(
+  )), /* @__PURE__ */ import_react82.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-gap-2" }, typeof value === "number" && /* @__PURE__ */ import_react82.default.createElement(
     Small,
     {
       color: "textSubtle",
@@ -14598,12 +14857,12 @@ function FileUploadIndicator({
     },
     value,
     "%"
-  ), done ? /* @__PURE__ */ import_react81.default.createElement("div", { className: "n-w-[15px] n-h-[15px] n-bg-secondary n-rounded-full n-flex n-items-center n-justify-center n-text-white" }, /* @__PURE__ */ import_react81.default.createElement(Checkmark, null)) : /* @__PURE__ */ import_react81.default.createElement(ActivityIndicator, { size: 15 })));
+  ), done ? /* @__PURE__ */ import_react82.default.createElement("div", { className: "n-w-[15px] n-h-[15px] n-bg-secondary n-rounded-full n-flex n-items-center n-justify-center n-text-white" }, /* @__PURE__ */ import_react82.default.createElement(Checkmark, null)) : /* @__PURE__ */ import_react82.default.createElement(ActivityIndicator, { size: 15 })));
 }
 function FileUploadList({
   uploads
 }) {
-  return /* @__PURE__ */ import_react81.default.createElement(import_react81.default.Fragment, null, /* @__PURE__ */ import_react81.default.createElement("div", { className: "n-flex n-items-center n-gap-2 n-py-2 n-px-4" }, /* @__PURE__ */ import_react81.default.createElement(Heading5, null, "Uploading ", uploads.length, " ", uploads.length === 1 ? "asset" : "assets")), /* @__PURE__ */ import_react81.default.createElement(Divider, null), /* @__PURE__ */ import_react81.default.createElement("div", { className: "n-flex n-flex-col n-gap-3 n-max-h-[500px] n-overflow-y-auto n-overflow-x-hidden n-py-4 n-px-4" }, uploads.map((upload) => /* @__PURE__ */ import_react81.default.createElement(
+  return /* @__PURE__ */ import_react82.default.createElement(import_react82.default.Fragment, null, /* @__PURE__ */ import_react82.default.createElement("div", { className: "n-flex n-items-center n-gap-2 n-py-2 n-px-4" }, /* @__PURE__ */ import_react82.default.createElement(Heading5, null, "Uploading ", uploads.length, " ", uploads.length === 1 ? "asset" : "assets")), /* @__PURE__ */ import_react82.default.createElement(Divider, null), /* @__PURE__ */ import_react82.default.createElement("div", { className: "n-flex n-flex-col n-gap-3 n-max-h-[500px] n-overflow-y-auto n-overflow-x-hidden n-py-4 n-px-4" }, uploads.map((upload) => /* @__PURE__ */ import_react82.default.createElement(
     FileUploadIndicator,
     {
       key: upload.id,
@@ -14616,7 +14875,7 @@ function FileUploadList({
 }
 
 // src/components/FloatingWindow.tsx
-var import_react82 = __toESM(require("react"));
+var import_react83 = __toESM(require("react"));
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -14709,7 +14968,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ import_react82.default.createElement(import_react82.default.Fragment, null, /* @__PURE__ */ import_react82.default.createElement(Small, { className: "n-flex-1 n-font-medium n-text-text" }, title), toolbarContent, /* @__PURE__ */ import_react82.default.createElement(
+  return /* @__PURE__ */ import_react83.default.createElement(import_react83.default.Fragment, null, /* @__PURE__ */ import_react83.default.createElement(Small, { className: "n-flex-1 n-font-medium n-text-text" }, title), toolbarContent, /* @__PURE__ */ import_react83.default.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -14736,16 +14995,16 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = (0, import_react82.useState)({ x: initialX, y: initialY });
-  const [size, setSize] = (0, import_react82.useState)({
+  const [position, setPosition] = (0, import_react83.useState)({ x: initialX, y: initialY });
+  const [size, setSize] = (0, import_react83.useState)({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = (0, import_react82.useState)(false);
-  const [isResizing, setIsResizing] = (0, import_react82.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react82.useState)({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = (0, import_react82.useState)(null);
-  const wrapperRef = (0, import_react82.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react83.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react83.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react83.useState)({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = (0, import_react83.useState)(null);
+  const wrapperRef = (0, import_react83.useRef)(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
       document.body.style.userSelect = "none";
@@ -14753,7 +15012,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = (0, import_react82.useCallback)((e) => {
+  const handleMouseDown = (0, import_react83.useCallback)((e) => {
     if (!wrapperRef.current) return;
     const rect = wrapperRef.current.getBoundingClientRect();
     setDragOffset({
@@ -14762,7 +15021,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = (0, import_react82.useCallback)(
+  const handleResizeStart = (0, import_react83.useCallback)(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -14771,7 +15030,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = (0, import_react82.useCallback)(
+  const handleMouseMove = (0, import_react83.useCallback)(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -14825,13 +15084,13 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = (0, import_react82.useCallback)((_e) => {
+  const handleMouseUp = (0, import_react83.useCallback)((_e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  import_react82.default.useEffect(() => {
+  import_react83.default.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -14841,11 +15100,11 @@ var FloatingWindow = ({
   }, [handleMouseMove, handleMouseUp]);
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = (0, import_react82.useCallback)(() => {
+  const handleClose = (0, import_react83.useCallback)(() => {
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ import_react82.default.createElement(
+  return /* @__PURE__ */ import_react83.default.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -14860,7 +15119,7 @@ var FloatingWindow = ({
         zIndex: cssVars.zIndex.menu
       }
     },
-    /* @__PURE__ */ import_react82.default.createElement(
+    /* @__PURE__ */ import_react83.default.createElement(
       "div",
       {
         style: {
@@ -14871,9 +15130,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ import_react82.default.createElement(Divider, null),
-    /* @__PURE__ */ import_react82.default.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ import_react82.default.createElement(
+    /* @__PURE__ */ import_react83.default.createElement(Divider, null),
+    /* @__PURE__ */ import_react83.default.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ import_react83.default.createElement(
       "div",
       {
         key: direction,
@@ -14885,9 +15144,9 @@ var FloatingWindow = ({
 };
 
 // src/components/InspectorContainer.tsx
-var import_react83 = __toESM(require("react"));
-var InspectorContainer = (0, import_react83.memo)(
-  (0, import_react83.forwardRef)(function InspectorContainer2({
+var import_react84 = __toESM(require("react"));
+var InspectorContainer = (0, import_react84.memo)(
+  (0, import_react84.forwardRef)(function InspectorContainer2({
     header,
     children,
     fallback,
@@ -14896,7 +15155,7 @@ var InspectorContainer = (0, import_react83.memo)(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react83.default.createElement(
+    return /* @__PURE__ */ import_react84.default.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -14911,32 +15170,32 @@ var InspectorContainer = (0, import_react83.memo)(
         }
       },
       header,
-      children ? /* @__PURE__ */ import_react83.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react83.default.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react83.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react83.default.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
+      children ? /* @__PURE__ */ import_react84.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react84.default.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react84.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react84.default.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var React79 = __toESM(require("react"));
-var LabeledElementView = React79.memo(function LabeledElementView2({
+var React81 = __toESM(require("react"));
+var LabeledElementView = React81.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React79.Children.toArray(children).flatMap(
-    (child) => React79.isValidElement(child) && child.type === React79.Fragment ? child.props.children : [child]
+  const elementIds = React81.Children.toArray(children).flatMap(
+    (child) => React81.isValidElement(child) && child.type === React81.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React79.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React81.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React79.useRef(null);
-  const refs = React79.useMemo(() => {
+  const containerRef = React81.useRef(null);
+  const refs = React81.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React79.createRef()])
+      serializedIds.split(",").map((id) => [id, React81.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React79.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React79.createElement(
+  const labelElements = React81.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React81.createElement(
       "span",
       {
         key: id,
@@ -14949,7 +15208,7 @@ var LabeledElementView = React79.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React79.useLayoutEffect(() => {
+  React81.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -15011,17 +15270,17 @@ var LabeledElementView = React79.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React79.createElement("div", { className: "n-flex n-flex-1 n-flex-col n-relative", ref: containerRef }, /* @__PURE__ */ React79.createElement("div", { className: "n-flex n-flex-1 n-items-center" }, children), /* @__PURE__ */ React79.createElement("div", { className: "n-relative n-overflow-hidden n-select-none" }, labelElements));
+  return /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-flex-1 n-flex-col n-relative", ref: containerRef }, /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-flex-1 n-items-center" }, children), /* @__PURE__ */ React81.createElement("div", { className: "n-relative n-overflow-hidden n-select-none" }, labelElements));
 });
 
 // src/components/LabeledField.tsx
-var import_react85 = __toESM(require("react"));
+var import_react86 = __toESM(require("react"));
 
 // src/hooks/useIndent.ts
-var import_react84 = __toESM(require("react"));
-var IndentContext = import_react84.default.createContext(0);
+var import_react85 = __toESM(require("react"));
+var IndentContext = import_react85.default.createContext(0);
 var useIndent = () => {
-  return import_react84.default.useContext(IndentContext);
+  return import_react85.default.useContext(IndentContext);
 };
 
 // src/components/LabeledField.tsx
@@ -15033,7 +15292,7 @@ var labeledFieldStyles = (labelType) => cx(
 var labelTypeInset = {
   type: "inset"
 };
-var LabeledField = (0, import_react85.memo)(function LabeledField2({
+var LabeledField = (0, import_react86.memo)(function LabeledField2({
   children,
   label,
   labelType: labelTypeProp,
@@ -15049,15 +15308,15 @@ var LabeledField = (0, import_react85.memo)(function LabeledField2({
   const labelWidth = labelWidthFromContext ?? minWidth;
   const labelTypeFromContext = useLabelType();
   const labelType = labelTypeProp ?? labelTypeFromContext;
-  const labeledFieldClasses = (0, import_react85.useMemo)(
+  const labeledFieldClasses = (0, import_react86.useMemo)(
     () => labeledFieldStyles(labelType),
     [labelType]
   );
-  const labelContextValue = (0, import_react85.useMemo)(
+  const labelContextValue = (0, import_react86.useMemo)(
     () => ({ fieldId, label }),
     [fieldId, label]
   );
-  const indentStyle = (0, import_react85.useMemo)(
+  const indentStyle = (0, import_react86.useMemo)(
     () => ({
       width: indentLevel * 8,
       flexBasis: indentLevel * 8,
@@ -15066,20 +15325,20 @@ var LabeledField = (0, import_react85.memo)(function LabeledField2({
     }),
     [indentLevel]
   );
-  const fieldStyle = (0, import_react85.useMemo)(
+  const fieldStyle = (0, import_react86.useMemo)(
     () => ({
       minWidth: `calc(100% - ${labelWidth + indentLevel * 8 + 6}px)`
     }),
     [labelWidth, indentLevel]
   );
-  const labelStyle = (0, import_react85.useMemo)(
+  const labelStyle = (0, import_react86.useMemo)(
     () => ({
       minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
       ...labelStyleProp
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ import_react85.default.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ import_react85.default.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ import_react85.default.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ import_react85.default.createElement("div", { style: indentStyle }), /* @__PURE__ */ import_react85.default.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ import_react85.default.createElement(
+  return /* @__PURE__ */ import_react86.default.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ import_react86.default.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ import_react86.default.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ import_react86.default.createElement("div", { style: indentStyle }), /* @__PURE__ */ import_react86.default.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ import_react86.default.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -15088,13 +15347,13 @@ var LabeledField = (0, import_react85.memo)(function LabeledField2({
       ...props
     },
     label
-  ), labelType === "start" ? /* @__PURE__ */ import_react85.default.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
+  ), labelType === "start" ? /* @__PURE__ */ import_react86.default.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/ListMenu.tsx
 var import_noya_icons10 = require("@noya-app/noya-icons");
 var import_noya_utils15 = require("@noya-app/noya-utils");
-var import_react86 = __toESM(require("react"));
+var import_react87 = __toESM(require("react"));
 function getItemId(item) {
   if (item.type === "submenu") {
     return item.id;
@@ -15110,7 +15369,7 @@ function ListMenu({
 }) {
   const selectedIds = items.flatMap(
     (item) => isSelectableMenuItem(item) && item.checked ? [item.value] : []
-  ).concat(selectedIdsProp);
+  ).concat(selectedIdsProp ?? []);
   let chunks = (0, import_noya_utils15.chunkBy)(
     items,
     (a, b) => a.type !== "separator" && b.type !== "separator"
@@ -15123,7 +15382,7 @@ function ListMenu({
     const regularItems = chunk.filter(
       (item) => isSubMenuItem(item) || isSelectableMenuItem(item)
     );
-    return /* @__PURE__ */ import_react86.default.createElement(
+    return /* @__PURE__ */ import_react87.default.createElement(
       List,
       {
         key: regularItems.map(getItemId).join("-"),
@@ -15135,30 +15394,30 @@ function ListMenu({
         getName: (item) => item.title.toString(),
         selectedIds,
         renderRight,
-        renderThumbnail: ({ item }) => /* @__PURE__ */ import_react86.default.createElement("div", { className: "n-flex n-flex-1 n-items-center n-justify-center n-bg-divider-subtle n-w-full n-h-full n-rounded-sm" }, renderIcon(item.icon)),
-        renderDetail: (item) => isSubMenuItem(item) && /* @__PURE__ */ import_react86.default.createElement(import_noya_icons10.ArrowRightIcon, null),
+        renderThumbnail: ({ item }) => /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-flex-1 n-items-center n-justify-center n-bg-divider-subtle n-w-full n-h-full n-rounded-sm" }, renderIcon(item.icon)),
+        renderDetail: (item) => isSubMenuItem(item) && /* @__PURE__ */ import_react87.default.createElement(import_noya_icons10.ArrowRightIcon, null),
         onClickItem: (itemId) => onSelect(itemId)
       }
     );
   });
   return withSeparatorElements(
     lists,
-    /* @__PURE__ */ import_react86.default.createElement(Divider, { overflow: 12, className: "n-my-1" })
+    /* @__PURE__ */ import_react87.default.createElement(Divider, { overflow: 12, className: "n-my-1" })
   );
 }
 
 // src/components/ListNavigator.tsx
-var import_react90 = __toESM(require("react"));
+var import_react91 = __toESM(require("react"));
 
 // src/components/Navigator.tsx
-var import_react89 = __toESM(require("react"));
+var import_react90 = __toESM(require("react"));
 
 // src/components/StackNavigator.tsx
 var import_noya_utils16 = require("@noya-app/noya-utils");
-var import_react88 = __toESM(require("react"));
+var import_react89 = __toESM(require("react"));
 
 // src/components/BaseToolbar.tsx
-var import_react87 = __toESM(require("react"));
+var import_react88 = __toESM(require("react"));
 var toolbarStyle = {
   [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent"
@@ -15170,7 +15429,7 @@ function BaseToolbarContainer({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ import_react87.default.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ import_react87.default.createElement(
+  return /* @__PURE__ */ import_react88.default.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ import_react88.default.createElement(
     "div",
     {
       className: cx(
@@ -15183,7 +15442,7 @@ function BaseToolbarContainer({
       }
     },
     children
-  ), showDivider && /* @__PURE__ */ import_react87.default.createElement(Divider, { variant: "strong" }));
+  ), showDivider && /* @__PURE__ */ import_react88.default.createElement(Divider, { variant: "strong" }));
 }
 function BaseToolbar({
   children,
@@ -15195,7 +15454,7 @@ function BaseToolbar({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ import_react87.default.createElement(
+  return /* @__PURE__ */ import_react88.default.createElement(
     BaseToolbarContainer,
     {
       showDivider,
@@ -15203,25 +15462,25 @@ function BaseToolbar({
       innerClassName,
       enableAbsoluteBreakpoint
     },
-    logo && /* @__PURE__ */ import_react87.default.createElement(import_react87.default.Fragment, null, logo, /* @__PURE__ */ import_react87.default.createElement(DividerVertical, null)),
-    /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ import_react87.default.createElement(import_react87.default.Fragment, null, /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 })),
-    children && /* @__PURE__ */ import_react87.default.createElement(
+    logo && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, logo, /* @__PURE__ */ import_react88.default.createElement(DividerVertical, null)),
+    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 }),
+    left && /* @__PURE__ */ import_react88.default.createElement(import_react88.default.Fragment, null, /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 })),
+    children && /* @__PURE__ */ import_react88.default.createElement(
       "div",
       {
-        className: "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @2xl/toolbar:n-absolute n-inset-0"
+        className: "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @xl/toolbar:!n-absolute n-inset-0"
       },
-      /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
+      /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
     ),
-    /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
-    /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 })
+    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ import_react88.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
+    /* @__PURE__ */ import_react88.default.createElement(Spacer.Horizontal, { size: 10 })
   );
 }
 
 // src/components/StackNavigator.tsx
-var StackRenderContext = import_react88.default.createContext({});
+var StackRenderContext = import_react89.default.createContext({});
 function StackNavigator({
   items,
   onBack,
@@ -15235,15 +15494,15 @@ function StackNavigator({
   renderHeader
 }) {
   const top = items.at(-1);
-  const previousLengthRef = (0, import_react88.useRef)(items.length);
-  const direction = (0, import_react88.useMemo)(() => {
+  const previousLengthRef = (0, import_react89.useRef)(items.length);
+  const direction = (0, import_react89.useMemo)(() => {
     const previous = previousLengthRef.current;
     previousLengthRef.current = items.length;
     return items.length >= previous ? "forward" : "back";
   }, [items.length]);
-  const [cardSizes, setCardSizes] = (0, import_react88.useState)({});
-  const [containerSize, setContainerSize] = (0, import_react88.useState)();
-  const handleSizeChange = (0, import_react88.useCallback)((key, size) => {
+  const [cardSizes, setCardSizes] = (0, import_react89.useState)({});
+  const [containerSize, setContainerSize] = (0, import_react89.useState)();
+  const handleSizeChange = (0, import_react89.useCallback)((key, size) => {
     setCardSizes((prev) => {
       if ((0, import_noya_utils16.isDeepEqual)(prev[key], size)) {
         return prev;
@@ -15251,7 +15510,7 @@ function StackNavigator({
       return { ...prev, [key]: size };
     });
   }, []);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     if (!top) {
       setContainerSize(void 0);
       return;
@@ -15265,7 +15524,7 @@ function StackNavigator({
       return measuredSize;
     });
   }, [cardSizes, top]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     setCardSizes((prev) => {
       const next = {};
       let changed = false;
@@ -15283,7 +15542,7 @@ function StackNavigator({
       return changed ? next : prev;
     });
   }, [items]);
-  const animationStyles = (0, import_react88.useMemo)(() => {
+  const animationStyles = (0, import_react89.useMemo)(() => {
     return {
       entering: {
         opacity: 0,
@@ -15303,7 +15562,7 @@ function StackNavigator({
     };
   }, [direction]);
   const shouldAnimateSize = containerSize !== void 0;
-  const contentStyle = (0, import_react88.useMemo)(() => {
+  const contentStyle = (0, import_react89.useMemo)(() => {
     if (!containerSize) return void 0;
     const style3 = {
       // width: containerSize.width,
@@ -15316,11 +15575,11 @@ function StackNavigator({
     }
     return style3;
   }, [containerSize, shouldAnimateSize]);
-  const [animationStates, setAnimationStates] = (0, import_react88.useState)({});
-  const [renderContentCache, setRenderContentCache] = (0, import_react88.useState)(
+  const [animationStates, setAnimationStates] = (0, import_react89.useState)({});
+  const [renderContentCache, setRenderContentCache] = (0, import_react89.useState)(
     () => Object.fromEntries(items.map((item) => [item.key, item.renderContent]))
   );
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     setRenderContentCache((prev) => {
       let changed = false;
       const next = { ...prev };
@@ -15338,7 +15597,7 @@ function StackNavigator({
       return changed ? next : prev;
     });
   }, [animationStates, items]);
-  const handleChildStateChange = (0, import_react88.useCallback)(
+  const handleChildStateChange = (0, import_react89.useCallback)(
     (key, state) => {
       if (!key) return;
       setAnimationStates((prev) => {
@@ -15381,7 +15640,7 @@ function StackNavigator({
     }
     return defaultRenderHeader(headerProps);
   };
-  return /* @__PURE__ */ import_react88.default.createElement(
+  return /* @__PURE__ */ import_react89.default.createElement(
     "div",
     {
       className: cx("n-flex n-flex-col", className),
@@ -15397,13 +15656,13 @@ function StackNavigator({
       }
     },
     showHeader && renderHeaderContent(),
-    /* @__PURE__ */ import_react88.default.createElement(
+    /* @__PURE__ */ import_react89.default.createElement(
       "div",
       {
         className: cx("n-relative n-overflow-hidden", contentClassName),
         style: contentStyle
       },
-      /* @__PURE__ */ import_react88.default.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ import_react88.default.createElement(
+      /* @__PURE__ */ import_react89.default.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ import_react89.default.createElement(
         AnimatePresence,
         {
           duration: 200,
@@ -15412,7 +15671,7 @@ function StackNavigator({
           mode: "wait",
           onChildStateChange: handleChildStateChange
         },
-        /* @__PURE__ */ import_react88.default.createElement(
+        /* @__PURE__ */ import_react89.default.createElement(
           StackNavigatorCard,
           {
             key: top.key,
@@ -15432,15 +15691,15 @@ var StackNavigatorCard = ({
   style: style2,
   className
 }) => {
-  const ref = import_react88.default.useRef(null);
+  const ref = import_react89.default.useRef(null);
   const size = useSize(ref);
-  const renderContext = import_react88.default.useContext(StackRenderContext);
+  const renderContext = import_react89.default.useContext(StackRenderContext);
   const renderContent = renderContext?.[item.key] ?? item.renderContent;
-  import_react88.default.useEffect(() => {
+  import_react89.default.useEffect(() => {
     if (!size || size.width === 0 || size.height === 0) return;
     onSizeChange(item.key, size);
   }, [item.key, onSizeChange, size]);
-  return /* @__PURE__ */ import_react88.default.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
+  return /* @__PURE__ */ import_react89.default.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
 };
 function defaultRenderHeader({
   showDivider,
@@ -15449,13 +15708,13 @@ function defaultRenderHeader({
   right,
   title
 }) {
-  return /* @__PURE__ */ import_react88.default.createElement(
+  return /* @__PURE__ */ import_react89.default.createElement(
     BaseToolbar,
     {
       innerClassName: "n-px-1",
       showDivider,
       enableAbsoluteBreakpoint: false,
-      left: showBackButton && /* @__PURE__ */ import_react88.default.createElement(
+      left: showBackButton && /* @__PURE__ */ import_react89.default.createElement(
         Button,
         {
           className: "-n-mx-2",
@@ -15466,7 +15725,7 @@ function defaultRenderHeader({
       ),
       right
     },
-    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ import_react88.default.createElement(Body, null, title) : title
+    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ import_react89.default.createElement(Body, null, title) : title
   );
 }
 
@@ -15478,23 +15737,23 @@ var NavigatorScreen = Object.assign(
     [navigatorScreenIdentifier]: true
   }
 );
-var NavigatorScreenContext = import_react89.default.createContext(null);
+var NavigatorScreenContext = import_react90.default.createContext(null);
 function useNavigator() {
-  const context = import_react89.default.useContext(NavigatorScreenContext);
+  const context = import_react90.default.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigator must be used within a Navigator screen");
   }
   return context.navigation;
 }
 function useNavigatorRoute() {
-  const context = import_react89.default.useContext(NavigatorScreenContext);
+  const context = import_react90.default.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigatorRoute must be used within a Navigator screen");
   }
   return context.route;
 }
 function isNavigatorScreenElement(child) {
-  return (0, import_react89.isValidElement)(child) && Boolean(
+  return (0, import_react90.isValidElement)(child) && Boolean(
     child.type?.[navigatorScreenIdentifier]
   );
 }
@@ -15515,15 +15774,15 @@ function NavigatorImpl({
   showHeader,
   renderHeader
 }) {
-  const screens = (0, import_react89.useMemo)(() => {
+  const screens = (0, import_react90.useMemo)(() => {
     const configs = [];
-    import_react89.Children.forEach(children, (child) => {
+    import_react90.Children.forEach(children, (child) => {
       if (!isNavigatorScreenElement(child)) return;
       configs.push(child.props);
     });
     return configs;
   }, [children]);
-  const screenMap = (0, import_react89.useMemo)(() => {
+  const screenMap = (0, import_react90.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const screen of screens) {
       if (map.has(screen.name)) {
@@ -15535,8 +15794,8 @@ function NavigatorImpl({
     }
     return map;
   }, [screens]);
-  const keyRef = (0, import_react89.useRef)(0);
-  const createEntry = (0, import_react89.useCallback)(
+  const keyRef = (0, import_react90.useRef)(0);
+  const createEntry = (0, import_react90.useCallback)(
     (name, params) => ({
       key: `${String(name)}-${keyRef.current++}`,
       name,
@@ -15550,13 +15809,13 @@ function NavigatorImpl({
       `Navigator: initial route "${String(initialScreenName)}" is not registered as a screen.`
     );
   }
-  const [stack, setStack] = (0, import_react89.useState)(() => [
+  const [stack, setStack] = (0, import_react90.useState)(() => [
     createEntry(
       initialScreenName,
       initialRoute.params
     )
   ]);
-  const push = (0, import_react89.useCallback)(
+  const push = (0, import_react90.useCallback)(
     (...args) => {
       const [name, params] = args;
       const screen = screenMap.get(name);
@@ -15570,7 +15829,7 @@ function NavigatorImpl({
     },
     [createEntry, screenMap]
   );
-  const pop = (0, import_react89.useCallback)(() => {
+  const pop = (0, import_react90.useCallback)(() => {
     setStack((prev) => {
       if (prev.length <= 1) return prev;
       const nextStack = prev.slice(0, -1);
@@ -15586,7 +15845,7 @@ function NavigatorImpl({
       return updatedStack;
     });
   }, [createEntry]);
-  const replace = (0, import_react89.useCallback)(
+  const replace = (0, import_react90.useCallback)(
     (targetKey, name, params) => {
       const screen = screenMap.get(name);
       if (!screen) {
@@ -15612,7 +15871,7 @@ function NavigatorImpl({
     },
     [createEntry, screenMap]
   );
-  const items = (0, import_react89.useMemo)(() => {
+  const items = (0, import_react90.useMemo)(() => {
     return stack.flatMap((entry) => {
       const screen = screenMap.get(entry.name);
       if (!screen) return [];
@@ -15650,7 +15909,7 @@ function NavigatorImpl({
           onBack: headerProps.onBack
         }),
         renderContent: () => {
-          return /* @__PURE__ */ import_react89.default.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
+          return /* @__PURE__ */ import_react90.default.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
         }
       };
     });
@@ -15658,7 +15917,7 @@ function NavigatorImpl({
   const shouldShowHeader = evaluateOption(showHeader, {
     stack
   });
-  return /* @__PURE__ */ import_react89.default.createElement(
+  return /* @__PURE__ */ import_react90.default.createElement(
     StackNavigator,
     {
       items,
@@ -15698,7 +15957,7 @@ function ListNavigator({
   renderHeader,
   selectedIds
 }) {
-  return /* @__PURE__ */ import_react90.default.createElement(
+  return /* @__PURE__ */ import_react91.default.createElement(
     ListNavigatorInternal,
     {
       initialRoute: { name: "screen", params: { id: void 0 } },
@@ -15716,7 +15975,7 @@ function ListNavigator({
       className,
       style: style2
     },
-    /* @__PURE__ */ import_react90.default.createElement(
+    /* @__PURE__ */ import_react91.default.createElement(
       ListNavigatorInternal.Screen,
       {
         name: "screen",
@@ -15731,7 +15990,7 @@ function ListNavigator({
         const nestedItem = items.find(
           (item) => isSubMenuItem(item) && item.id === route.params.id
         );
-        return /* @__PURE__ */ import_react90.default.createElement(
+        return /* @__PURE__ */ import_react91.default.createElement(
           ListMenu,
           {
             items: nestedItem?.items ?? items,
@@ -15756,18 +16015,19 @@ function ListNavigator({
 
 // src/components/Message.tsx
 var import_noya_utils17 = require("@noya-app/noya-utils");
-var import_react91 = __toESM(require("react"));
-var Message = (0, import_react91.memo)(
-  (0, import_react91.forwardRef)(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
+var import_react92 = __toESM(require("react"));
+var Message = (0, import_react92.memo)(
+  (0, import_react92.forwardRef)(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = (0, import_noya_utils17.uuid)();
-    const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
-    const styles3 = (0, import_react91.useMemo)(
+    const resolvedUserId = user?.userId ?? user?.connectionId ?? randomId;
+    const userMessageBackgroundColor = colorFromString(resolvedUserId);
+    const styles3 = (0, import_react92.useMemo)(
       () => role === "user" ? {
         backgroundColor: userMessageBackgroundColor
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ import_react91.default.createElement(
+    return /* @__PURE__ */ import_react92.default.createElement(
       "div",
       {
         className: cx(
@@ -15775,24 +16035,24 @@ var Message = (0, import_react91.memo)(
           role === "user" ? "n-flex-row-reverse" : "n-flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ import_react91.default.createElement(
+      role === "assistant" ? /* @__PURE__ */ import_react92.default.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ import_react91.default.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ import_react91.default.createElement(
+        /* @__PURE__ */ import_react92.default.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ import_react92.default.createElement(
         Avatar,
         {
-          userId: !user ? randomId : user?.id,
+          userId: resolvedUserId,
           name: user?.name ?? "Anonymous",
           image: user?.image,
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ import_react91.default.createElement(
+      /* @__PURE__ */ import_react92.default.createElement(
         "div",
         {
           className: cx(
@@ -15812,9 +16072,9 @@ var Message = (0, import_react91.memo)(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 var import_noya_icons11 = require("@noya-app/noya-icons");
-var import_react92 = __toESM(require("react"));
+var import_react93 = __toESM(require("react"));
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ import_react92.default.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ import_react92.default.createElement(
+  return /* @__PURE__ */ import_react93.default.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ import_react93.default.createElement(
     "a",
     {
       href: url,
@@ -15822,15 +16082,15 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "n-flex n-text-primary hover:n-opacity-80 n-border n-border-divider n-rounded-md"
     },
-    /* @__PURE__ */ import_react92.default.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ import_react92.default.createElement(import_noya_icons11.Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
-    /* @__PURE__ */ import_react92.default.createElement(DividerVertical, null),
-    /* @__PURE__ */ import_react92.default.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
+    /* @__PURE__ */ import_react93.default.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ import_react93.default.createElement(import_noya_icons11.Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
+    /* @__PURE__ */ import_react93.default.createElement(DividerVertical, null),
+    /* @__PURE__ */ import_react93.default.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ import_react92.default.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
+  return /* @__PURE__ */ import_react93.default.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -15844,7 +16104,7 @@ function getPipelineResultLink(value) {
 }
 
 // src/components/ResizableContainer.tsx
-var import_react93 = __toESM(require("react"));
+var import_react94 = __toESM(require("react"));
 var ResizableContainer = ({
   children,
   minWidth,
@@ -15857,13 +16117,13 @@ var ResizableContainer = ({
   onChangeWidth,
   shouldResetWidthOnGestureEnd: shouldResetWidth
 }) => {
-  const containerRef = (0, import_react93.useRef)(null);
-  const resizeableRef = (0, import_react93.useRef)(null);
-  const handleRef = (0, import_react93.useRef)(null);
-  const clickCounter = (0, import_react93.useRef)(createClickCounter({ delay: 250 }));
-  const [width, setWidth] = (0, import_react93.useState)();
-  const [drag, setDrag] = (0, import_react93.useState)();
-  const handlePointerDown = (0, import_react93.useCallback)(
+  const containerRef = (0, import_react94.useRef)(null);
+  const resizeableRef = (0, import_react94.useRef)(null);
+  const handleRef = (0, import_react94.useRef)(null);
+  const clickCounter = (0, import_react94.useRef)(createClickCounter({ delay: 250 }));
+  const [width, setWidth] = (0, import_react94.useState)();
+  const [drag, setDrag] = (0, import_react94.useState)();
+  const handlePointerDown = (0, import_react94.useCallback)(
     (event) => {
       const containerWidth = containerRef.current?.getBoundingClientRect().width;
       const resizeableWidth = resizeableRef.current?.getBoundingClientRect().width;
@@ -15881,7 +16141,7 @@ var ResizableContainer = ({
     },
     [maxWidth, minWidth]
   );
-  const handlePointerMove = (0, import_react93.useCallback)(
+  const handlePointerMove = (0, import_react94.useCallback)(
     (event) => {
       if (!drag) return;
       const delta = event.clientX - drag.startX;
@@ -15897,7 +16157,7 @@ var ResizableContainer = ({
     },
     [drag, onChangeWidth]
   );
-  const handlePointerUp = (0, import_react93.useCallback)(
+  const handlePointerUp = (0, import_react94.useCallback)(
     (event) => {
       setDrag(void 0);
       handleRef.current?.releasePointerCapture(event.pointerId);
@@ -15913,7 +16173,7 @@ var ResizableContainer = ({
     },
     [shouldResetWidth]
   );
-  return /* @__PURE__ */ import_react93.default.createElement(
+  return /* @__PURE__ */ import_react94.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -15921,7 +16181,7 @@ var ResizableContainer = ({
       style: { position: "relative", ...style2 },
       className
     },
-    /* @__PURE__ */ import_react93.default.createElement(
+    /* @__PURE__ */ import_react94.default.createElement(
       "div",
       {
         ref: resizeableRef,
@@ -15932,7 +16192,7 @@ var ResizableContainer = ({
         }
       },
       typeof children === "function" ? children({ width }) : children,
-      /* @__PURE__ */ import_react93.default.createElement(
+      /* @__PURE__ */ import_react94.default.createElement(
         "div",
         {
           ref: handleRef,
@@ -15957,7 +16217,7 @@ var ResizableContainer = ({
           onPointerUp: handlePointerUp,
           onPointerCancel: handlePointerUp
         },
-        /* @__PURE__ */ import_react93.default.createElement(
+        /* @__PURE__ */ import_react94.default.createElement(
           "div",
           {
             style: {
@@ -15975,7 +16235,7 @@ var ResizableContainer = ({
           }
         )
       ),
-      drag && /* @__PURE__ */ import_react93.default.createElement(
+      drag && /* @__PURE__ */ import_react94.default.createElement(
         "div",
         {
           style: {
@@ -15998,7 +16258,7 @@ function clamp5(value, min, max) {
 
 // src/components/RingProgress.tsx
 var import_noya_utils18 = require("@noya-app/noya-utils");
-var React90 = __toESM(require("react"));
+var React92 = __toESM(require("react"));
 function RingProgress({
   value,
   dividedBy = 100,
@@ -16014,14 +16274,14 @@ function RingProgress({
   const safeDivisor = dividedBy > 0 ? dividedBy : 1;
   const clampedRaw = (0, import_noya_utils18.clamp)(value, 0, safeDivisor);
   const clampedPercent = clampedRaw / safeDivisor * 100;
-  const radius = React90.useMemo(() => (size - thickness) / 2, [size, thickness]);
-  const circumference = React90.useMemo(() => 2 * Math.PI * radius, [radius]);
-  const dashOffset = React90.useMemo(
+  const radius = React92.useMemo(() => (size - thickness) / 2, [size, thickness]);
+  const circumference = React92.useMemo(() => 2 * Math.PI * radius, [radius]);
+  const dashOffset = React92.useMemo(
     () => (100 - clampedPercent) / 100 * circumference,
     [circumference, clampedPercent]
   );
   const trackStroke = trackColor ?? "var(--n-input-background, rgba(0,0,0,0.08))";
-  const colorClass = React90.useMemo(() => {
+  const colorClass = React92.useMemo(() => {
     switch (colorScheme) {
       case "primary":
         return "n-stroke-primary";
@@ -16034,7 +16294,7 @@ function RingProgress({
         return "n-stroke-text";
     }
   }, [colorScheme]);
-  const computedStroke = React90.useMemo(() => {
+  const computedStroke = React92.useMemo(() => {
     if (color) return color;
     switch (colorScheme) {
       case "primary":
@@ -16048,7 +16308,7 @@ function RingProgress({
         return "var(--n-text, currentColor)";
     }
   }, [color, colorScheme]);
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React92.createElement(
     "span",
     {
       className: cx("n-inline-flex n-items-center n-justify-center", className),
@@ -16059,7 +16319,7 @@ function RingProgress({
       "aria-valuemax": safeDivisor,
       "aria-label": ariaLabel
     },
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React92.createElement(
       "svg",
       {
         width: size,
@@ -16067,7 +16327,7 @@ function RingProgress({
         viewBox: `0 0 ${size} ${size}`,
         style: { display: "block" }
       },
-      /* @__PURE__ */ React90.createElement(
+      /* @__PURE__ */ React92.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16078,7 +16338,7 @@ function RingProgress({
           strokeWidth: thickness
         }
       ),
-      /* @__PURE__ */ React90.createElement(
+      /* @__PURE__ */ React92.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16102,49 +16362,13 @@ function RingProgress({
 }
 
 // src/components/ScrollableSidebar.tsx
-var import_react94 = __toESM(require("react"));
+var import_react95 = __toESM(require("react"));
 function ScrollableSidebar({ children }) {
-  return /* @__PURE__ */ import_react94.default.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ import_react94.default.createElement(ScrollArea, null, children));
-}
-
-// src/components/ScrollArea2.tsx
-var import_scroll_area = require("@base-ui-components/react/scroll-area");
-var React92 = __toESM(require("react"));
-var SCROLLBAR_STATE_CLASSES = "scroll-component n-opacity-0 n-transition-opacity n-delay-300 n-pointer-events-none data-[hovering]:n-opacity-100 data-[hovering]:n-delay-0 data-[hovering]:n-duration-75 data-[hovering]:n-pointer-events-auto data-[scrolling]:n-opacity-100 data-[scrolling]:n-delay-0 data-[scrolling]:n-duration-75 data-[scrolling]:n-pointer-events-auto";
-var SCROLLBAR_TRACK_VERTICAL = "n-m-1 n-w-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
-var SCROLLBAR_TRACK_HORIZONTAL = "n-m-1 n-h-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
-var SCROLLBAR_THUMB_VERTICAL = "scroll-component n-w-full n-rounded n-bg-scrollbar";
-var SCROLLBAR_THUMB_HORIZONTAL = "scroll-component n-h-full n-rounded n-bg-scrollbar";
-function ScrollArea22({
-  children,
-  className,
-  viewportClassName,
-  orientation = "vertical"
-}) {
-  return /* @__PURE__ */ React92.createElement(import_scroll_area.ScrollArea.Root, { className: cx("n-relative", className) }, /* @__PURE__ */ React92.createElement(
-    import_scroll_area.ScrollArea.Viewport,
-    {
-      className: cx("n-h-full n-overscroll-contain", viewportClassName)
-    },
-    children
-  ), (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ React92.createElement(
-    import_scroll_area.ScrollArea.Scrollbar,
-    {
-      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)
-    },
-    /* @__PURE__ */ React92.createElement(import_scroll_area.ScrollArea.Thumb, { className: SCROLLBAR_THUMB_VERTICAL })
-  ), (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ React92.createElement(
-    import_scroll_area.ScrollArea.Scrollbar,
-    {
-      orientation: "horizontal",
-      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)
-    },
-    /* @__PURE__ */ React92.createElement(import_scroll_area.ScrollArea.Thumb, { className: SCROLLBAR_THUMB_HORIZONTAL })
-  ), orientation === "both" && /* @__PURE__ */ React92.createElement(import_scroll_area.ScrollArea.Corner, null));
+  return /* @__PURE__ */ import_react95.default.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ import_react95.default.createElement(ScrollArea, null, children));
 }
 
 // src/components/Section.tsx
-var import_react95 = __toESM(require("react"));
+var import_react96 = __toESM(require("react"));
 var titleIconStyle = {
   marginRight: "6px",
   alignSelf: "flex-start",
@@ -16165,14 +16389,14 @@ function SectionHeader({
   titleClassName,
   onClickTitle
 }) {
-  const headerStyle = (0, import_react95.useMemo)(
+  const headerStyle = (0, import_react96.useMemo)(
     () => ({
       minHeight: INPUT_HEIGHT,
       ...style2
     }),
     [style2]
   );
-  const titleElement = title ? /* @__PURE__ */ import_react95.default.createElement(
+  const titleElement = title ? /* @__PURE__ */ import_react96.default.createElement(
     InspectorPrimitives_exports.Title,
     {
       $textStyle: titleTextStyle,
@@ -16180,16 +16404,16 @@ function SectionHeader({
     },
     title
   ) : null;
-  return /* @__PURE__ */ import_react95.default.createElement(
+  return /* @__PURE__ */ import_react96.default.createElement(
     InspectorPrimitives_exports.SectionHeader,
     {
       style: headerStyle,
       className
     },
-    titleIcon && /* @__PURE__ */ import_react95.default.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
-    titleElement && /* @__PURE__ */ import_react95.default.createElement(import_react95.default.Fragment, null, onClickTitle ? /* @__PURE__ */ import_react95.default.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
-    headerSeparator === "space" && /* @__PURE__ */ import_react95.default.createElement(Spacer.Horizontal, null),
-    headerSeparator === "dot" && /* @__PURE__ */ import_react95.default.createElement(
+    titleIcon && /* @__PURE__ */ import_react96.default.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
+    titleElement && /* @__PURE__ */ import_react96.default.createElement(import_react96.default.Fragment, null, onClickTitle ? /* @__PURE__ */ import_react96.default.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
+    headerSeparator === "space" && /* @__PURE__ */ import_react96.default.createElement(Spacer.Horizontal, null),
+    headerSeparator === "dot" && /* @__PURE__ */ import_react96.default.createElement(
       Text,
       {
         variant: titleTextStyle,
@@ -16215,7 +16439,7 @@ var SectionInternal = ({
   titleClassName,
   headerStyle: headerStyleProp
 }) => {
-  const style2 = (0, import_react95.useMemo)(
+  const style2 = (0, import_react96.useMemo)(
     () => ({
       display: "flex",
       flexDirection: "column",
@@ -16226,15 +16450,15 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = import_react95.default.Children.toArray(children).some((child) => !!child);
-  const headerStyle = (0, import_react95.useMemo)(
+  const hasChildren = import_react96.default.Children.toArray(children).some((child) => !!child);
+  const headerStyle = (0, import_react96.useMemo)(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
       ...headerStyleProp
     }),
     [hasChildren, headerStyleProp]
   );
-  return /* @__PURE__ */ import_react95.default.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ import_react95.default.createElement(
+  return /* @__PURE__ */ import_react96.default.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ import_react96.default.createElement(
     SectionHeader,
     {
       style: headerStyle,
@@ -16246,7 +16470,7 @@ var SectionInternal = ({
       right,
       headerSeparator
     }
-  ), /* @__PURE__ */ import_react95.default.createElement(IndentContext.Provider, { value: 0 }, children));
+  ), /* @__PURE__ */ import_react96.default.createElement(IndentContext.Provider, { value: 0 }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -16259,12 +16483,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ import_react95.default.createElement(
+  return /* @__PURE__ */ import_react96.default.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ import_react95.default.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ import_react95.default.createElement(
+      title: /* @__PURE__ */ import_react96.default.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ import_react96.default.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -16275,20 +16499,20 @@ var ExpandableSection = ({
     expanded && props.children
   );
 };
-var Section = (0, import_react95.memo)(function InspectorSection({
+var Section = (0, import_react96.memo)(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ import_react95.default.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ import_react95.default.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ import_react96.default.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ import_react96.default.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 var import_radix_ui12 = require("radix-ui");
-var import_react96 = __toESM(require("react"));
-var SegmentedControlContext = (0, import_react96.createContext)({
+var import_react97 = __toESM(require("react"));
+var SegmentedControlContext = (0, import_react97.createContext)({
   colorScheme: "primary"
 });
-var SegmentedControlItem = (0, import_react96.forwardRef)(function SegmentedControlItem2({
+var SegmentedControlItem = (0, import_react97.forwardRef)(function SegmentedControlItem2({
   value,
   tooltip,
   title,
@@ -16298,8 +16522,8 @@ var SegmentedControlItem = (0, import_react96.forwardRef)(function SegmentedCont
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme } = (0, import_react96.useContext)(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ import_react96.default.createElement(
+  const { colorScheme } = (0, import_react97.useContext)(SegmentedControlContext);
+  const itemElement = /* @__PURE__ */ import_react97.default.createElement(
     import_radix_ui12.ToggleGroup.Item,
     {
       ref: forwardedRef,
@@ -16330,7 +16554,7 @@ var SegmentedControlItem = (0, import_react96.forwardRef)(function SegmentedCont
       ),
       ...props
     },
-    /* @__PURE__ */ import_react96.default.createElement(
+    /* @__PURE__ */ import_react97.default.createElement(
       "span",
       {
         className: cx(
@@ -16342,7 +16566,7 @@ var SegmentedControlItem = (0, import_react96.forwardRef)(function SegmentedCont
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ import_react96.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react97.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -16355,16 +16579,16 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   className,
   style: style2
 }) {
-  const contextValue = (0, import_react96.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const contextValue = (0, import_react97.useMemo)(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
-  const handleValueChange = (0, import_react96.useCallback)(
+  const handleValueChange = (0, import_react97.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2) return;
       onValueChange?.(value2);
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react96.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react96.default.createElement(
+  return /* @__PURE__ */ import_react97.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react97.default.createElement(
     import_radix_ui12.ToggleGroup.Root,
     {
       id,
@@ -16383,14 +16607,14 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ import_react96.default.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ import_react97.default.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
-var import_react97 = __toESM(require("react"));
-var import_react_dom3 = require("react-dom");
+var import_react98 = __toESM(require("react"));
+var import_react_dom4 = require("react-dom");
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
     width: rect.width,
@@ -16404,7 +16628,7 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbarContainer = (0, import_react97.memo)(
+var SelectionToolbarContainer = (0, import_react98.memo)(
   function SelectionToolbarContainer2({
     rect,
     children,
@@ -16418,15 +16642,15 @@ var SelectionToolbarContainer = (0, import_react97.memo)(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = import_react97.default.useRef(null);
+    const containerRef = import_react98.default.useRef(null);
     const size = useSize(containerRef, "width");
-    const virtualRef = (0, import_react97.useMemo)(
+    const virtualRef = (0, import_react98.useMemo)(
       () => ({
         current: createVirtualElement(rect)
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ import_react97.default.createElement(
+    const popperContent = /* @__PURE__ */ import_react98.default.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16444,7 +16668,7 @@ var SelectionToolbarContainer = (0, import_react97.memo)(
           [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
-      /* @__PURE__ */ import_react97.default.createElement(
+      /* @__PURE__ */ import_react98.default.createElement(
         "div",
         {
           ref: containerRef,
@@ -16461,14 +16685,14 @@ var SelectionToolbarContainer = (0, import_react97.memo)(
         children
       )
     );
-    return /* @__PURE__ */ import_react97.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react97.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom3.createPortal)(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ import_react98.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react98.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom4.createPortal)(popperContent, portalContainer) : popperContent);
   }
 );
 
 // src/components/SelectMenu.tsx
 var import_noya_icons12 = require("@noya-app/noya-icons");
 var import_radix_ui13 = require("radix-ui");
-var import_react98 = __toESM(require("react"));
+var import_react99 = __toESM(require("react"));
 var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
@@ -16491,7 +16715,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelType = useLabelType();
-  return /* @__PURE__ */ import_react98.default.createElement(import_radix_ui13.Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ import_react98.default.createElement(
+  return /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ import_react99.default.createElement(
     Button,
     {
       id,
@@ -16503,10 +16727,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ import_react98.default.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
-    label && labelType === "inset" && /* @__PURE__ */ import_react98.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react98.default.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ import_react98.default.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ import_react98.default.createElement(import_radix_ui13.Select.Value, { placeholder })),
-    /* @__PURE__ */ import_react98.default.createElement(
+    icon && /* @__PURE__ */ import_react99.default.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
+    label && labelType === "inset" && /* @__PURE__ */ import_react99.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react99.default.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ import_react99.default.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.Value, { placeholder })),
+    /* @__PURE__ */ import_react99.default.createElement(
       import_noya_icons12.DropdownChevronIcon,
       {
         className: cx(
@@ -16543,7 +16767,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = (0, import_react98.useState)(open);
+  const [internalOpen, setInternalOpen] = (0, import_react99.useState)(open);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
@@ -16554,8 +16778,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     }
     setInternalOpen(open2);
   };
-  const readOnlyButton = (0, import_react98.useMemo)(
-    () => /* @__PURE__ */ import_react98.default.createElement(
+  const readOnlyButton = (0, import_react99.useMemo)(
+    () => /* @__PURE__ */ import_react99.default.createElement(
       Button,
       {
         id,
@@ -16565,11 +16789,11 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ import_react98.default.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ import_react99.default.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
-  const contentStyle = (0, import_react98.useMemo)(() => {
+  const contentStyle = (0, import_react99.useMemo)(() => {
     return {
       width: "var(--radix-select-trigger-width)",
       minWidth: "max-content",
@@ -16577,7 +16801,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ import_react98.default.createElement(
+  const content = /* @__PURE__ */ import_react99.default.createElement(
     import_radix_ui13.Select.Root,
     {
       value,
@@ -16585,7 +16809,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ import_react98.default.createElement(
+    /* @__PURE__ */ import_react99.default.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -16600,7 +16824,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ import_react98.default.createElement(import_radix_ui13.Select.Portal, null, /* @__PURE__ */ import_react98.default.createElement(
+    /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.Portal, null, /* @__PURE__ */ import_react99.default.createElement(
       import_radix_ui13.Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16611,14 +16835,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ import_react98.default.createElement(import_radix_ui13.Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react98.default.createElement(
+      /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react99.default.createElement(
         import_noya_icons12.ChevronUpIcon,
         {
           className: cx("n-transition-transform n-duration-100")
         }
       )),
-      /* @__PURE__ */ import_react98.default.createElement(import_radix_ui13.Select.Viewport, null, /* @__PURE__ */ import_react98.default.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ import_react98.default.createElement(import_radix_ui13.Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react98.default.createElement(import_noya_icons12.ChevronDownIcon, null))
+      /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.Viewport, null, /* @__PURE__ */ import_react99.default.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ import_react99.default.createElement(import_radix_ui13.Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react99.default.createElement(import_noya_icons12.ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -16626,12 +16850,12 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 var import_radix_ui14 = require("radix-ui");
-var import_react99 = __toESM(require("react"));
+var import_react100 = __toESM(require("react"));
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
-var Slider = (0, import_react99.memo)(function Slider2({
+var Slider = (0, import_react100.memo)(function Slider2({
   style: style2,
   className,
   value,
@@ -16645,21 +16869,21 @@ var Slider = (0, import_react99.memo)(function Slider2({
   readOnly = false,
   ...props
 }) {
-  const arrayValue = (0, import_react99.useMemo)(
+  const arrayValue = (0, import_react100.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const handleValueChange = (0, import_react99.useCallback)(
+  const handleValueChange = (0, import_react100.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
   const ratio = (arrayValue[0] - min) / (max - min);
-  return /* @__PURE__ */ import_react99.default.createElement(
+  return /* @__PURE__ */ import_react100.default.createElement(
     import_radix_ui14.Slider.Root,
     {
       min,
@@ -16677,7 +16901,7 @@ var Slider = (0, import_react99.memo)(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ import_react99.default.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ import_react99.default.createElement(
+    /* @__PURE__ */ import_react100.default.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ import_react100.default.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-l n-bg-slider-active-background",
@@ -16686,7 +16910,7 @@ var Slider = (0, import_react99.memo)(function Slider2({
           width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
         }
       }
-    ), /* @__PURE__ */ import_react99.default.createElement(
+    ), /* @__PURE__ */ import_react100.default.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-r n-bg-input-background",
@@ -16696,7 +16920,7 @@ var Slider = (0, import_react99.memo)(function Slider2({
         }
       }
     )),
-    /* @__PURE__ */ import_react99.default.createElement(
+    /* @__PURE__ */ import_react100.default.createElement(
       import_radix_ui14.Slider.Thumb,
       {
         style: thumbStyle,
@@ -16714,28 +16938,28 @@ var Slider = (0, import_react99.memo)(function Slider2({
 });
 
 // src/components/sorting/createSharedDrag.tsx
-var React98 = __toESM(require("react"));
+var React99 = __toESM(require("react"));
 function createSharedDrag() {
-  const dragRegistrationContext = React98.createContext(null);
-  const activeDragContext = React98.createContext(
+  const dragRegistrationContext = React99.createContext(null);
+  const activeDragContext = React99.createContext(
     null
   );
   const sharedDragProps = {
     dragRegistrationContext,
     activeDragContext
   };
-  const Provider = (props) => /* @__PURE__ */ React98.createElement(SharedDragProvider, { sharedDragProps, ...props });
+  const Provider = (props) => /* @__PURE__ */ React99.createElement(SharedDragProvider, { sharedDragProps, ...props });
   return {
     Provider,
-    Sortable: (props) => /* @__PURE__ */ React98.createElement(Sortable, { sharedDragProps, ...props }),
+    Sortable: (props) => /* @__PURE__ */ React99.createElement(Sortable, { sharedDragProps, ...props }),
     props: sharedDragProps
   };
 }
 
 // src/components/Stepper.tsx
 var import_noya_utils19 = require("@noya-app/noya-utils");
-var import_react100 = __toESM(require("react"));
-var Stepper = (0, import_react100.memo)(function Stepper2({
+var import_react101 = __toESM(require("react"));
+var Stepper = (0, import_react101.memo)(function Stepper2({
   style: style2,
   className,
   value: valueProp,
@@ -16752,17 +16976,17 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const value = (0, import_react100.useMemo)(() => {
+  const value = (0, import_react101.useMemo)(() => {
     return (0, import_noya_utils19.clamp)(valueProp, min, max);
   }, [valueProp, min, max]);
-  const handleValueChange = (0, import_react100.useCallback)(
+  const handleValueChange = (0, import_react101.useCallback)(
     (value2) => {
       const newValue = (0, import_noya_utils19.clamp)(value2, min, max);
       onValueChange(newValue);
     },
     [onValueChange, min, max]
   );
-  return /* @__PURE__ */ import_react100.default.createElement(
+  return /* @__PURE__ */ import_react101.default.createElement(
     "div",
     {
       id,
@@ -16774,7 +16998,7 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ import_react100.default.createElement(
+    /* @__PURE__ */ import_react101.default.createElement(
       InputField2.Root,
       {
         className: "n-flex-1",
@@ -16782,7 +17006,7 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
         startClassName: "-n-ml-[3px]",
         endWidth: 17,
         endClassName: "-n-mr-[3px]",
-        start: /* @__PURE__ */ import_react100.default.createElement(
+        start: /* @__PURE__ */ import_react101.default.createElement(
           IconButton,
           {
             iconName: "MinusIcon",
@@ -16796,7 +17020,7 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
             }
           }
         ),
-        end: /* @__PURE__ */ import_react100.default.createElement(
+        end: /* @__PURE__ */ import_react101.default.createElement(
           IconButton,
           {
             iconName: "PlusIcon",
@@ -16811,7 +17035,7 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
           }
         )
       },
-      /* @__PURE__ */ import_react100.default.createElement(
+      /* @__PURE__ */ import_react101.default.createElement(
         InputField2.NumberInput,
         {
           value,
@@ -16826,7 +17050,7 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
 
 // src/components/Switch.tsx
 var import_radix_ui15 = require("radix-ui");
-var React100 = __toESM(require("react"));
+var React101 = __toESM(require("react"));
 var Switch = function Switch2({
   id,
   value,
@@ -16838,7 +17062,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(
     import_radix_ui15.Switch.Root,
     {
       id,
@@ -16857,12 +17081,12 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React100.createElement(import_radix_ui15.Switch.Thumb, { className: "n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] data-[state=checked]:n-translate-x-[15px]" })
+    /* @__PURE__ */ React101.createElement(import_radix_ui15.Switch.Thumb, { className: "n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] data-[state=checked]:n-translate-x-[15px]" })
   );
 };
 
 // src/components/Tabs.tsx
-var React101 = __toESM(require("react"));
+var React102 = __toESM(require("react"));
 function Tabs({
   value,
   onValueChange,
@@ -16877,7 +17101,7 @@ function Tabs({
     value,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ React101.createElement("div", { ...props, className: cx("n-flex n-flex-col", props.className) }, /* @__PURE__ */ React101.createElement("div", { className: "n-flex n-flex-row n-px-3" }, /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React102.createElement("div", { ...props, className: cx("n-flex n-flex-col", props.className) }, /* @__PURE__ */ React102.createElement("div", { className: "n-flex n-flex-row n-px-3" }, /* @__PURE__ */ React102.createElement(
     SegmentedControl,
     {
       className: "n-flex-1",
@@ -16886,19 +17110,108 @@ function Tabs({
       variant,
       items: selectableItems
     }
-  )), /* @__PURE__ */ React101.createElement(Divider, null), renderContent({ value: activeTab }));
+  )), /* @__PURE__ */ React102.createElement(Divider, null), renderContent({ value: activeTab }));
+}
+
+// src/components/UserPicker.tsx
+var import_react102 = __toESM(require("react"));
+function UserPicker({
+  users,
+  value,
+  defaultValue: defaultValue2,
+  onChangeUserId,
+  onSelectUser,
+  placeholder = "Search users...",
+  ...rest
+}) {
+  const sortedUsers = (0, import_react102.useMemo)(() => {
+    return [...users].sort(
+      (a, b) => getUserDisplayName(a).localeCompare(getUserDisplayName(b), void 0, {
+        sensitivity: "base"
+      })
+    );
+  }, [users]);
+  const usersById = (0, import_react102.useMemo)(() => {
+    return new Map(sortedUsers.map((user) => [user.id, user]));
+  }, [sortedUsers]);
+  const items = (0, import_react102.useMemo)(() => {
+    return sortedUsers.map(createUserMenuItem);
+  }, [sortedUsers]);
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react102.useState)(defaultValue2);
+  const selectedUserId = isControlled ? value : uncontrolledValue;
+  const selectedItem = (0, import_react102.useMemo)(() => {
+    if (!selectedUserId) return void 0;
+    return items.find((item) => item.value === selectedUserId);
+  }, [items, selectedUserId]);
+  const updateSelectedUserId = (0, import_react102.useCallback)(
+    (userId) => {
+      if (!isControlled) {
+        setUncontrolledValue(userId);
+      }
+      onChangeUserId?.(userId);
+    },
+    [isControlled, onChangeUserId]
+  );
+  const handleSelectItem = (0, import_react102.useCallback)(
+    (item) => {
+      updateSelectedUserId(item.value);
+      onSelectUser?.(usersById.get(item.value));
+    },
+    [updateSelectedUserId, onSelectUser, usersById]
+  );
+  return /* @__PURE__ */ import_react102.default.createElement(
+    Combobox,
+    {
+      ...rest,
+      placeholder,
+      mode: "option",
+      items,
+      value: selectedItem,
+      onSelectItem: handleSelectItem,
+      iconPosition: "left"
+    }
+  );
+}
+function getUserDisplayName(user) {
+  const name = user.name?.trim();
+  const email = user.email?.trim();
+  return name || email || "Anonymous user";
+}
+function createUserMenuItem(user) {
+  const title = getUserDisplayName(user);
+  const overflow = 3;
+  return {
+    value: user.id,
+    title,
+    icon: /* @__PURE__ */ import_react102.default.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ import_react102.default.createElement(
+      Avatar,
+      {
+        size: 15 + overflow * 2,
+        name: title,
+        userId: user.id,
+        image: user.image ?? void 0,
+        className: "n-pointer-events-none",
+        variant: "bare",
+        style: {
+          position: "absolute",
+          inset: -overflow
+        }
+      }
+    ))
+  };
 }
 
 // src/components/UserPointer.tsx
-var import_react101 = __toESM(require("react"));
-var UserPointerContainer = (0, import_react101.memo)(function UserPointerContainer2({
+var import_react103 = __toESM(require("react"));
+var UserPointerContainer = (0, import_react103.memo)(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react103.default.createElement(
     "div",
     {
       style: {
@@ -16915,7 +17228,7 @@ var UserPointerContainer = (0, import_react101.memo)(function UserPointerContain
     children
   );
 });
-var UserNameTag = (0, import_react101.memo)(function UserNameTag2({
+var UserNameTag = (0, import_react103.memo)(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
@@ -16924,7 +17237,7 @@ var UserNameTag = (0, import_react101.memo)(function UserNameTag2({
   size = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react103.default.createElement(
     "span",
     {
       className: cx(
@@ -16943,14 +17256,14 @@ var UserNameTag = (0, import_react101.memo)(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = (0, import_react101.memo)(function PointerIcon({
+var UserPointerIcon = (0, import_react103.memo)(function PointerIcon({
   size,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react103.default.createElement(
     "svg",
     {
       width: size,
@@ -16965,7 +17278,7 @@ var UserPointerIcon = (0, import_react101.memo)(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ import_react101.default.createElement(
+    /* @__PURE__ */ import_react103.default.createElement(
       "polygon",
       {
         points,
@@ -16978,7 +17291,7 @@ var UserPointerIcon = (0, import_react101.memo)(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = (0, import_react101.memo)(function UserPointer2({
+var UserPointer = (0, import_react103.memo)(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -16991,22 +17304,22 @@ var UserPointer = (0, import_react101.memo)(function UserPointer2({
   labelSize = "medium",
   bordered = true
 }) {
-  const userBackgroundColor = (0, import_react101.useMemo)(
+  const userBackgroundColor = (0, import_react103.useMemo)(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = (0, import_react101.useMemo)(
+  const pointerOverlapStyle = (0, import_react103.useMemo)(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = (0, import_react101.useMemo)(
+  const nameTagOverlapStyle = (0, import_react103.useMemo)(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ import_react101.default.createElement(
+  return /* @__PURE__ */ import_react103.default.createElement(
     UserPointerContainer,
     {
       point,
@@ -17014,14 +17327,14 @@ var UserPointer = (0, import_react101.memo)(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ import_react101.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react101.default.createElement(
+    name && /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react103.default.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ import_react101.default.createElement(
+    ), /* @__PURE__ */ import_react103.default.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -17037,10 +17350,10 @@ var UserPointer = (0, import_react101.memo)(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
-var import_react108 = __toESM(require("react"));
+var import_react110 = __toESM(require("react"));
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var import_react105 = __toESM(require("react"));
+var import_react107 = __toESM(require("react"));
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -17049,17 +17362,17 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/VerticalTabMenu.tsx
-var import_react104 = __toESM(require("react"));
+var import_react106 = __toESM(require("react"));
 
 // src/components/Toolbar.tsx
 var import_noya_keymap6 = require("@noya-app/noya-keymap");
-var import_react103 = __toESM(require("react"));
+var import_react105 = __toESM(require("react"));
 
 // src/components/ToolbarDrawer.tsx
-var import_react102 = __toESM(require("react"));
-var ToolbarDrawer = (0, import_react102.memo)(
-  (0, import_react102.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ import_react102.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react102.default.createElement(
+var import_react104 = __toESM(require("react"));
+var ToolbarDrawer = (0, import_react104.memo)(
+  (0, import_react104.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
+    return /* @__PURE__ */ import_react104.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react104.default.createElement(
       "div",
       {
         className: "n-absolute n-bottom-full n-left-1/2 -n-translate-x-1/2 n-rounded-t-lg n-border n-border-toolbar-drawer-border n-border-b-transparent n-bg-toolbar-drawer-background -n-z-10",
@@ -17075,13 +17388,13 @@ var ToolbarDrawer = (0, import_react102.memo)(
 
 // src/components/Toolbar.tsx
 var SIDE_OFFSET = 6;
-var ToolbarMenuContext = (0, import_react103.createContext)({});
+var ToolbarMenuContext = (0, import_react105.createContext)({});
 var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = import_react103.default.useState(false);
-  return /* @__PURE__ */ import_react103.default.createElement(
+  const [open, setOpen] = import_react105.default.useState(false);
+  return /* @__PURE__ */ import_react105.default.createElement(
     DropdownMenu,
     {
       open,
@@ -17093,7 +17406,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ import_react103.default.createElement(
+    /* @__PURE__ */ import_react105.default.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -17109,7 +17422,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react103.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react103.default.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react105.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react105.default.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -17123,8 +17436,8 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     content: itemContent,
     checked
   } = item;
-  const [open, setOpen] = import_react103.default.useState(false);
-  const content = /* @__PURE__ */ import_react103.default.createElement("span", null, /* @__PURE__ */ import_react103.default.createElement(
+  const [open, setOpen] = import_react105.default.useState(false);
+  const content = /* @__PURE__ */ import_react105.default.createElement("span", null, /* @__PURE__ */ import_react105.default.createElement(
     Popover,
     {
       open,
@@ -17133,7 +17446,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ import_react103.default.createElement(
+      trigger: /* @__PURE__ */ import_react105.default.createElement(
         Button,
         {
           disabled,
@@ -17146,7 +17459,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
   ));
-  return tooltip && !open ? /* @__PURE__ */ import_react103.default.createElement(
+  return tooltip && !open ? /* @__PURE__ */ import_react105.default.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -17166,7 +17479,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ import_react103.default.createElement(
+  const content = /* @__PURE__ */ import_react105.default.createElement(
     Button,
     {
       as,
@@ -17183,7 +17496,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     displayFilter === "iconOnly" ? void 0 : item.title
   );
   const tooltip = item.tooltip ?? (displayFilter === "iconOnly" && item.title ? item.title : void 0);
-  return item.drawer && isActive ? /* @__PURE__ */ import_react103.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react103.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ import_react105.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react105.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -17195,17 +17508,17 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   displayFilter,
   dividerOverflow: dividerOverflowProp
 }) {
-  const { dividerOverflow: contextDividerOverflow } = (0, import_react103.useContext)(ToolbarMenuContext);
+  const { dividerOverflow: contextDividerOverflow } = (0, import_react105.useContext)(ToolbarMenuContext);
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ import_react103.default.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ import_react105.default.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ import_react103.default.createElement(ToolbarMenuPopover, { item, portalContainer });
+    return /* @__PURE__ */ import_react105.default.createElement(ToolbarMenuPopover, { item, portalContainer });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ import_react103.default.createElement(
+    return /* @__PURE__ */ import_react105.default.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -17217,7 +17530,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ import_react103.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ import_react105.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
@@ -17229,8 +17542,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   displayFilter = "iconAndText",
   dividerOverflow
 }) {
-  return /* @__PURE__ */ import_react103.default.createElement(import_react103.default.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ import_react105.default.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -17255,21 +17568,21 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = import_react103.default.useMemo(
+  const allMenuItems = import_react105.default.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   (0, import_noya_keymap6.useKeyboardShortcuts)(
-    import_react103.default.useMemo(
+    import_react105.default.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ import_react103.default.createElement(
+  return /* @__PURE__ */ import_react105.default.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react103.default.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react105.default.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -17277,7 +17590,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react103.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react103.default.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react105.default.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -17298,19 +17611,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = (0, import_react104.useMemo)(() => {
+  const style2 = (0, import_react106.useMemo)(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ import_react104.default.createElement(
+  return /* @__PURE__ */ import_react106.default.createElement(
     "div",
     {
       className: "n-w-[calc(var(--n-toolbar-height)+1px)] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
       style: style2
     },
-    /* @__PURE__ */ import_react104.default.createElement(
+    /* @__PURE__ */ import_react106.default.createElement(
       ToolbarMenu,
       {
         items,
@@ -17338,12 +17651,12 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   onChangeLeftTab,
   compactDrawerMenu
 }) {
-  const portalContainer = (0, import_react105.useRef)(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react105.useState)({
+  const portalContainer = (0, import_react107.useRef)(null);
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react107.useState)({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = (0, import_react105.useMemo)(
+  const allTabItems = (0, import_react107.useMemo)(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -17351,16 +17664,16 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = (0, import_react105.useMemo)(
+  const allSelectableTabItems = (0, import_react107.useMemo)(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
   const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = (0, import_react105.useMemo)(
+  const leftSelectableTabItems = (0, import_react107.useMemo)(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = (0, import_react105.useMemo)(
+  const rightSelectableTabItems = (0, import_react107.useMemo)(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
@@ -17397,14 +17710,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
   } : { activeValue: void 0, isSidebarCollapsed: true };
-  return /* @__PURE__ */ import_react105.default.createElement(
+  return /* @__PURE__ */ import_react107.default.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, /* @__PURE__ */ import_react105.default.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react107.default.createElement(import_react107.default.Fragment, null, /* @__PURE__ */ import_react107.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17413,8 +17726,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         isSidebarCollapsed,
         onChange: (value) => handleSelectTab(value)
       }
-    ), /* @__PURE__ */ import_react105.default.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, allSelectableTabItems[0] && /* @__PURE__ */ import_react105.default.createElement(
+    ), /* @__PURE__ */ import_react107.default.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ import_react107.default.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, allSelectableTabItems[0] && /* @__PURE__ */ import_react107.default.createElement(
       Button,
       {
         variant: "none",
@@ -17437,8 +17750,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       }
     )),
-    /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ import_react105.default.createElement(
+    /* @__PURE__ */ import_react107.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ import_react107.default.createElement(
       Drawer,
       {
         ref: leftSidebarRef,
@@ -17459,7 +17772,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react105.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react107.default.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17485,7 +17798,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-var import_react106 = __toESM(require("react"));
+var import_react108 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/components/workspace/panelStorage.ts
@@ -17651,11 +17964,11 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   onChangeRightTab,
   compactDrawerMenu
 }) {
-  const panelGroupRef = (0, import_react106.useRef)(null);
+  const panelGroupRef = (0, import_react108.useRef)(null);
   const hasLeftPanel = !!leftPanel;
   const hasRightPanel = !!rightPanel;
   const hasCenterPanel = !!centerPanel;
-  const autoSaveId = (0, import_react106.useMemo)(() => {
+  const autoSaveId = (0, import_react108.useMemo)(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
   const layoutIds = getLayoutIds({
@@ -17682,7 +17995,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   });
   const [data, setData] = usePersistentStateObject(clientStorage, storageKey, {});
   const layoutGroup = data?.[propertyKey];
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = (0, import_react106.useMemo)(() => {
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = (0, import_react108.useMemo)(() => {
     return getLayoutCollapsedState({
       layoutGroup,
       propertyKey,
@@ -17691,7 +18004,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       hasRightPanel
     });
   }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
-  const handleLeftTabChange = (0, import_react106.useCallback)(
+  const handleLeftTabChange = (0, import_react108.useCallback)(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -17708,7 +18021,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = (0, import_react106.useCallback)(
+  const handleRightTabChange = (0, import_react108.useCallback)(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -17725,7 +18038,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  const handleLayoutChange = (0, import_react106.useCallback)(
+  const handleLayoutChange = (0, import_react108.useCallback)(
     (layout) => {
       setData((prev) => {
         const newData = {
@@ -17743,7 +18056,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems && // When compact drawer UI is enabled, only show the rail when the
   // sidebar is collapsed (for large screens/panel layout).
   (!compactDrawerMenu || leftSidebarCollapsed);
-  return /* @__PURE__ */ import_react106.default.createElement(
+  return /* @__PURE__ */ import_react108.default.createElement(
     import_react_resizable_panels.PanelGroup,
     {
       ref: panelGroupRef,
@@ -17754,7 +18067,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react106.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react108.default.createElement(import_react108.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react108.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17763,7 +18076,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react106.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react106.default.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react108.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react108.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -17776,8 +18089,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ import_react106.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ import_react106.default.createElement(
+    ), /* @__PURE__ */ import_react108.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ import_react108.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: CONTENT_AREA_ID,
@@ -17788,7 +18101,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, /* @__PURE__ */ import_react106.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react106.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react108.default.createElement(import_react108.default.Fragment, null, /* @__PURE__ */ import_react108.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react108.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17801,7 +18114,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react106.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react106.default.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react108.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react108.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -17823,11 +18136,11 @@ function renderPanelChildren(fn, props) {
 }
 
 // src/components/workspace/WorkspaceSideContext.tsx
-var import_react107 = require("react");
-var WorkspaceSideContext = (0, import_react107.createContext)({});
+var import_react109 = require("react");
+var WorkspaceSideContext = (0, import_react109.createContext)({});
 var WorkspaceSideProvider = WorkspaceSideContext.Provider;
 function useWorkspaceSide() {
-  return (0, import_react107.useContext)(WorkspaceSideContext);
+  return (0, import_react109.useContext)(WorkspaceSideContext);
 }
 
 // src/components/workspace/WorkspaceLayout.tsx
@@ -17890,7 +18203,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   theme,
   compactDrawerMenu
 }, forwardedRef) {
-  const containerRef = import_react108.default.useRef(null);
+  const containerRef = import_react110.default.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -17921,8 +18234,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     rightSidebarMinPercentage,
     rightSidebarMaxPercentage
   );
-  const leftSidebarRef = (0, import_react108.useRef)(null);
-  const rightSidebarRef = (0, import_react108.useRef)(null);
+  const leftSidebarRef = (0, import_react110.useRef)(null);
+  const rightSidebarRef = (0, import_react110.useRef)(null);
   const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled({
     value: leftTabValueProp,
     onChange: onChangeLeftTab,
@@ -17933,7 +18246,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     onChange: onChangeRightTab,
     defaultValue: getFirstTabValue(rightTabItems, "")
   });
-  (0, import_react108.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react110.useImperativeHandle)(forwardedRef, () => ({
     setLeftExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -17991,56 +18304,56 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
   const isDrawerActive = sideType === "drawer" || sideType === "auto" && parentSize.width <= sideTypeBreakpoint;
-  const closeLeftSidebar = (0, import_react108.useCallback)(() => {
+  const closeLeftSidebar = (0, import_react110.useCallback)(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = (0, import_react108.useCallback)(() => {
+  const closeRightSidebar = (0, import_react110.useCallback)(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = (0, import_react108.useMemo)(() => {
+  const leftChildrenProps = (0, import_react110.useMemo)(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = (0, import_react108.useMemo)(() => {
+  const rightChildrenProps = (0, import_react110.useMemo)(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = (0, import_react108.useMemo)(() => {
+  const leftSidebarProviderValue = (0, import_react110.useMemo)(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = (0, import_react108.useMemo)(() => {
+  const rightSidebarProviderValue = (0, import_react110.useMemo)(() => {
     return {
       closeSidebar: closeRightSidebar
     };
   }, [closeRightSidebar]);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react108.default.createElement(
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react110.default.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    /* @__PURE__ */ import_react108.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
+    /* @__PURE__ */ import_react110.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react108.default.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react110.default.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    /* @__PURE__ */ import_react108.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
+    /* @__PURE__ */ import_react110.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ import_react108.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = (0, import_react108.useMemo)(
+  const centerPanel = /* @__PURE__ */ import_react110.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = (0, import_react110.useMemo)(
     () => ({
       minSize: leftSidebarMinPercentage,
       maxSize: leftSidebarMaxPercentage,
@@ -18058,7 +18371,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = (0, import_react108.useMemo)(
+  const rightSidebarOptions = (0, import_react110.useMemo)(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -18078,7 +18391,7 @@ var WorkspaceLayout = forwardRefGeneric(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_react108.default.createElement(
+  return /* @__PURE__ */ import_react110.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -18091,7 +18404,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ import_react108.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react108.default.createElement(
+    /* @__PURE__ */ import_react110.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react110.default.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -18114,12 +18427,12 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     ))
   );
 });
-var PanelInner = (0, import_react108.memo)(function PanelInner2({
+var PanelInner = (0, import_react110.memo)(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react110.default.createElement(
     "div",
     {
       style: style2,
@@ -18134,22 +18447,22 @@ function getFirstTabValue(items, defaultValue2) {
 }
 
 // src/contexts/ImageDataContext.tsx
-var React109 = __toESM(require("react"));
-var ImageDataContext = React109.createContext(
+var React111 = __toESM(require("react"));
+var ImageDataContext = React111.createContext(
   void 0
 );
-var ImageDataProvider = React109.memo(function ImageDataProvider2({
+var ImageDataProvider = React111.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React109.useMemo(
+  const contextValue = React111.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React109.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React111.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React109.useContext(ImageDataContext);
+  const value = React111.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -18166,9 +18479,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-var import_react109 = require("react");
+var import_react111 = require("react");
 function useTheme() {
-  const [theme, setTheme] = (0, import_react109.useState)("light");
+  const [theme, setTheme] = (0, import_react111.useState)("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -18180,7 +18493,7 @@ function useTheme() {
         break;
     }
   };
-  (0, import_react109.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -18303,11 +18616,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 var import_noya_utils21 = require("@noya-app/noya-utils");
-var React110 = __toESM(require("react"));
+var React112 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React110.memo(function DimensionInput2({
+var DimensionInput = React112.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -18317,15 +18630,15 @@ var DimensionInput = React110.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React110.useCallback(
+  const handleNudgeValue = React112.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React110.useCallback(
+  const handleSetValue = React112.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React110.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React110.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React112.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React112.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React112.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils21.round)(value, 2),
@@ -18352,8 +18665,8 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react110 = __toESM(require("react"));
-var Section2 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var import_react112 = __toESM(require("react"));
+var Section2 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
   "div",
   {
     ref,
@@ -18361,8 +18674,8 @@ var Section2 = (0, import_react110.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var SectionHeader2 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = (0, import_react110.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var SectionHeader2 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = (0, import_react112.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
   "div",
   {
     ref,
@@ -18373,7 +18686,7 @@ var Title = (0, import_react110.forwardRef)(({ className, $textStyle, ...props }
     ...props
   }
 ));
-var Row = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Row = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
   "div",
   {
     ref,
@@ -18381,7 +18694,7 @@ var Row = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @
     ...props
   }
 ));
-var Column = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Column = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
   "div",
   {
     ref,
@@ -18389,7 +18702,7 @@ var Column = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /
     ...props
   }
 ));
-var Checkbox3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Checkbox3 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
   "input",
   {
     ref,
@@ -18398,7 +18711,7 @@ var Checkbox3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) =
     ...props
   }
 ));
-var Text3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react110.default.createElement(
+var Text3 = (0, import_react112.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react112.default.createElement(
   "span",
   {
     ref,
@@ -18406,14 +18719,14 @@ var Text3 = (0, import_react110.forwardRef)(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ import_react110.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react110.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = (0, import_react110.forwardRef)(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ import_react112.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react112.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = (0, import_react112.forwardRef)(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ import_react110.default.createElement(
+  return /* @__PURE__ */ import_react112.default.createElement(
     "label",
     {
       ref,
@@ -18425,7 +18738,7 @@ var RowLabel = (0, import_react110.forwardRef)(function RowLabel2({
     }
   );
 });
-var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react112.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -18433,7 +18746,7 @@ var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ import_react110.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react110.default.createElement(Column, null, /* @__PURE__ */ import_react110.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react110.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react110.default.createElement(Row, null, children)));
+  return /* @__PURE__ */ import_react112.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react112.default.createElement(Column, null, /* @__PURE__ */ import_react112.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react112.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react112.default.createElement(Row, null, children)));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -18573,7 +18886,9 @@ var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
   Tooltip,
   TreeView,
   UserAvatar,
+  UserPicker,
   UserPointer,
+  Virtualized,
   WorkspaceLayout,
   WorkspaceSideProvider,
   acceptsDrop,
@@ -18606,6 +18921,7 @@ var LabeledRow = (0, import_react110.memo)(function LabeledRow2({
   getNextIndex,
   getPipelineResultLink,
   getThumbnailColors,
+  getUserDisplayName,
   isMenuItemSectionHeader,
   isNonSelectableMenuItem,
   isPopoverMenuItem,