@noya-app/noya-designsystem 0.1.71 → 0.1.72

package/dist/index.mjs

@@ -395,14 +395,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)) {
@@ -421,7 +421,7 @@ var require_grammarDiagnostics = __commonJS({
           }
         }
         path.delete(name);
-        memo41.set(name, result);
+        memo40.set(name, result);
         return result;
       };
       const dependencyIssues = [];
@@ -7047,7 +7047,8 @@ var BreadcrumbSlash = () => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       opacity: 0.5,
-      style: slashStyle
+      style: slashStyle,
+      className: "n-flex-none"
     },
     /* @__PURE__ */ React42.createElement(
       "path",
@@ -7365,7 +7366,7 @@ var Chip = memo15(
 );
 
 // src/components/Collection.tsx
-import React61 from "react";
+import React63 from "react";
 
 // src/components/Grid.tsx
 import React50, { useImperativeHandle as useImperativeHandle3, useRef as useRef16, useState as useState23 } from "react";
@@ -8188,12 +8189,12 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-import React60, {
-  memo as memo22,
+import React62, {
+  memo as memo21,
   useImperativeHandle as useImperativeHandle5,
-  useMemo as useMemo25,
+  useMemo as useMemo26,
   useRef as useRef20,
-  useState as useState25
+  useState as useState26
 } from "react";
 
 // src/components/listView/ListViewContexts.tsx
@@ -8218,10 +8219,6 @@ var ListRowContext = createContext10({
   isSectionHeader: false
 });
 ListRowContext.displayName = "ListRowContext";
-var RenderItemContext = createContext10(
-  () => null
-);
-RenderItemContext.displayName = "RenderItemContext";
 
 // src/components/listView/ListViewEditableRowTitle.tsx
 import React51, { memo as memo19, useLayoutEffect as useLayoutEffect5, useRef as useRef17 } from "react";
@@ -8274,18 +8271,347 @@ var ListViewEditableRowTitle = memo19(function ListViewEditableRowTitle2({
 
 // src/components/listView/ListViewRoot.tsx
 import { range } from "@noya-app/noya-utils";
-import React56, {
+import React58, {
   isValidElement as isValidElement3,
-  memo as memo20,
-  useCallback as useCallback24,
-  useContext as useContext12,
+  useCallback as useCallback25,
+  useMemo as useMemo24
+} from "react";
+
+// src/components/Virtualized.tsx
+import React53, {
+  useCallback as useCallback22,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo23,
-  useRef as useRef19
+  useMemo as useMemo19,
+  useRef as useRef18,
+  useState as useState24
 } from "react";
-import { WindowScroller } from "react-virtualized";
-import { VariableSizeList } from "react-window";
+import { flushSync } from "react-dom";
+
+// src/components/ScrollArea2.tsx
+import { ScrollArea as ScrollArea3 } from "@base-ui-components/react/scroll-area";
+import * as React52 from "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(ScrollArea3.Root, { className: cx("n-relative", className), style: style2 }, /* @__PURE__ */ React52.createElement(
+    ScrollArea3.Viewport,
+    {
+      ref: viewportRef,
+      className: cx(
+        "n-h-full n-overscroll-contain",
+        viewportClassName,
+        viewportPropsClassName
+      ),
+      ...viewportRest
+    },
+    children
+  ), (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ React52.createElement(
+    ScrollArea3.Scrollbar,
+    {
+      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)
+    },
+    /* @__PURE__ */ React52.createElement(ScrollArea3.Thumb, { className: SCROLLBAR_THUMB_VERTICAL })
+  ), (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ React52.createElement(
+    ScrollArea3.Scrollbar,
+    {
+      orientation: "horizontal",
+      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)
+    },
+    /* @__PURE__ */ React52.createElement(ScrollArea3.Thumb, { className: SCROLLBAR_THUMB_HORIZONTAL })
+  ), orientation === "both" && /* @__PURE__ */ React52.createElement(ScrollArea3.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 = React53.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 = useRef18(null);
+  const setScrollElement = useCallback22((element) => {
+    containerRef.current = element;
+  }, []);
+  const [scrollTop, setScrollTop] = useState24(initialScrollOffset);
+  const pendingInitialOffset = useRef18(initialScrollOffset);
+  useLayoutEffect6(() => {
+    if (pendingInitialOffset.current == null) return;
+    if (containerRef.current) {
+      containerRef.current.scrollTop = pendingInitialOffset.current;
+      setScrollTop(pendingInitialOffset.current);
+    }
+    pendingInitialOffset.current = null;
+  }, []);
+  const paddingValues = useMemo19(() => resolvePaddingValues(padding), [padding]);
+  const gapValue = useMemo19(() => clampGapValue(gap), [gap]);
+  const { measurements, totalHeight } = useMemo19(
+    () => buildMeasurements({
+      itemCount,
+      getItemHeight,
+      paddingTop: paddingValues.top,
+      paddingBottom: paddingValues.bottom,
+      gap: gapValue
+    }),
+    [
+      gapValue,
+      getItemHeight,
+      itemCount,
+      paddingValues.bottom,
+      paddingValues.top
+    ]
+  );
+  const visibleRange = useMemo19(
+    () => calculateVisibleRange({
+      measurements,
+      scrollTop,
+      height,
+      overscan
+    }),
+    [height, measurements, overscan, scrollTop]
+  );
+  const handleScroll = useCallback22(
+    (event) => {
+      const nextOffset = event.currentTarget.scrollTop;
+      if (nextOffset === scrollTop) return;
+      if (syncScrollUpdates) {
+        flushSync(() => {
+          setScrollTop(nextOffset);
+        });
+      } else {
+        setScrollTop(nextOffset);
+      }
+      onScroll?.(nextOffset);
+    },
+    [onScroll, scrollTop, syncScrollUpdates]
+  );
+  useImperativeHandle4(
+    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 = useMemo19(
+    () => ({
+      height,
+      overflowY: "auto",
+      overflowX: "hidden",
+      ...style2
+    }),
+    [height, style2]
+  );
+  const scrollAreaStyle = useMemo19(
+    () => ({
+      height,
+      ...style2
+    }),
+    [height, style2]
+  );
+  const totalContent = /* @__PURE__ */ React53.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__ */ React53.createElement(
+          "div",
+          {
+            key,
+            style: {
+              position: "absolute",
+              top: measurement.start,
+              height: measurement.size,
+              width: "100%"
+            }
+          },
+          renderItem(index)
+        );
+      }
+    )
+  );
+  if (useScrollArea) {
+    return /* @__PURE__ */ React53.createElement(
+      ScrollArea22,
+      {
+        className,
+        style: scrollAreaStyle,
+        viewportClassName: scrollAreaViewportClassName,
+        viewportProps: {
+          ref: setScrollElement,
+          onScroll: handleScroll
+        }
+      },
+      totalContent
+    );
+  }
+  return /* @__PURE__ */ React53.createElement(
+    "div",
+    {
+      ref: setScrollElement,
+      className,
+      style: containerStyle,
+      onScroll: handleScroll
+    },
+    totalContent
+  );
+});
+var Virtualized2 = React53.memo(VirtualizedInner);
 
 // src/components/sorting/Sortable.tsx
 import { useDroppable } from "@dnd-kit/core";
@@ -8295,14 +8621,14 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import * as React55 from "react";
-import { useMemo as useMemo22 } from "react";
+import * as React57 from "react";
+import { useMemo as useMemo23 } from "react";
 
 // src/components/sorting/DragRegistration.tsx
-import React52 from "react";
-var DragRegistrationContext = React52.createContext(null);
+import React54 from "react";
+var DragRegistrationContext = React54.createContext(null);
 function useDragRegistration(context) {
-  const value = React52.useContext(context);
+  const value = React54.useContext(context);
   if (!value) {
     throw new Error(
       "useDragRegistration must be used within a DragRegistrationProvider"
@@ -8311,11 +8637,11 @@ function useDragRegistration(context) {
   return value;
 }
 function useDragRegistrationManager() {
-  const [registeredLists, setRegisteredLists] = React52.useState(/* @__PURE__ */ new Map());
-  const registerList = React52.useCallback((list) => {
+  const [registeredLists, setRegisteredLists] = React54.useState(/* @__PURE__ */ new Map());
+  const registerList = React54.useCallback((list) => {
     setRegisteredLists((prev) => new Map(prev).set(list.id, list));
   }, []);
-  const unregisterList = React52.useCallback((listId) => {
+  const unregisterList = React54.useCallback((listId) => {
     setRegisteredLists((prev) => {
       const newMap = new Map(prev);
       newMap.delete(listId);
@@ -8324,15 +8650,15 @@ function useDragRegistrationManager() {
   }, []);
   return { registerList, unregisterList, registeredLists };
 }
-var ActiveDragContext = React52.createContext(null);
+var ActiveDragContext = React54.createContext(null);
 function useActiveDrag(context) {
-  const value = React52.useContext(context);
+  const value = React54.useContext(context);
   if (!value) {
     throw new Error("useActiveDrag must be used within a ActiveDragProvider");
   }
   return value;
 }
-var AnyDragContext = React52.createContext(false);
+var AnyDragContext = React54.createContext(false);
 
 // src/components/sorting/SharedDragProvider.tsx
 import {
@@ -8349,8 +8675,8 @@ import {
   unionRects
 } from "@noya-app/noya-geometry";
 import { windowsOf } from "@noya-app/noya-utils";
-import * as React53 from "react";
-import { useMemo as useMemo20 } from "react";
+import * as React55 from "react";
+import { useMemo as useMemo21 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 function SharedDragProvider({
   children,
@@ -8370,22 +8696,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) {
@@ -8407,7 +8733,7 @@ function SharedDragProvider({
     },
     [registeredLists]
   );
-  const handleDragMove = React53.useCallback(
+  const handleDragMove = React55.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -8431,7 +8757,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;
@@ -8475,7 +8801,7 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source, stableOnMoveItem]
   );
-  const contextValue = React53.useMemo(
+  const contextValue = React55.useMemo(
     () => ({
       registerList,
       unregisterList
@@ -8483,19 +8809,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 = useMemo20(() => {
+  const collisionDetection = useMemo21(() => {
     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(
       DndContext,
       {
         sensors,
@@ -8506,26 +8832,26 @@ function SharedDragProvider({
       },
       children,
       mounted && activeList?.renderOverlay && dragState.source && createPortal2(
-        /* @__PURE__ */ React53.createElement(DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
+        /* @__PURE__ */ React55.createElement(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) => {
@@ -8702,7 +9028,7 @@ function findDropTarget({
 }
 
 // src/components/sorting/sorting.ts
-import * as React54 from "react";
+import * as React56 from "react";
 var normalizeListTargetIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
@@ -8718,7 +9044,7 @@ var defaultAcceptsDrop = ({
   }
   return true;
 };
-var SortableItemContext = React54.createContext({
+var SortableItemContext = React56.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -8784,7 +9110,7 @@ function parseDragItemKey(key) {
 }
 
 // src/components/sorting/Sortable.tsx
-var SortableItemContext2 = React55.createContext({
+var SortableItemContext2 = React57.createContext({
   acceptsDrop: defaultAcceptsDrop,
   listId: "",
   getDropTargetParentIndex: void 0,
@@ -8797,7 +9123,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;
@@ -8828,7 +9154,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,
@@ -8843,7 +9169,7 @@ function SortableItem({
     id: dragItemKey,
     disabled
   });
-  const ref = React55.useCallback(
+  const ref = React57.useCallback(
     (node) => setNodeRef(node),
     [setNodeRef]
   );
@@ -8854,7 +9180,7 @@ function SortableItem({
     acceptsDrop: acceptsDrop2,
     getDropTargetParentIndex
   });
-  const props = useMemo22(
+  const props = useMemo23(
     () => ({
       ref,
       ...attributes,
@@ -8863,7 +9189,7 @@ function SortableItem({
     }),
     [ref, attributes, listeners, isDragging]
   );
-  const extraProps = useMemo22(
+  const extraProps = useMemo23(
     () => ({
       isDragging,
       isOverlay: false,
@@ -8897,9 +9223,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(
@@ -8908,7 +9234,7 @@ function SortableRoot_({
   const { setNodeRef: setDroppableRef } = useDroppable({
     id
   });
-  React55.useEffect(() => {
+  React57.useEffect(() => {
     const listConfig = {
       id,
       keys,
@@ -8962,7 +9288,7 @@ function SortableRoot_({
     keys,
     itemHitSlop
   ]);
-  const contextValue = React55.useMemo(
+  const contextValue = React57.useMemo(
     () => ({
       keys,
       acceptsDrop: acceptsDrop2,
@@ -8973,17 +9299,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(
     SortableContext,
     {
       items: keys,
@@ -9000,11 +9326,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],
@@ -9034,14 +9360,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);
     }))
   );
@@ -9055,87 +9381,6 @@ var Sortable = Object.assign(Sortable_, {
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 24;
 var TALL_ROW_HEIGHT = 50;
-var VirtualizedListRow = memo20(function VirtualizedListRow2({
-  index,
-  style: style2
-}) {
-  const renderItem = useContext12(RenderItemContext);
-  return /* @__PURE__ */ React56.createElement("div", { key: index, style: style2 }, renderItem(index));
-});
-var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
-  size,
-  scrollElement,
-  items,
-  getItemHeight,
-  keyExtractor,
-  renderItem
-}, ref) {
-  const listRef = useRef19(null);
-  useImperativeHandle4(ref, () => ({
-    scrollToIndex(index) {
-      listRef.current?.scrollToItem(index);
-    }
-  }));
-  useLayoutEffect6(() => {
-    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 = useMemo23(
-    () => ({
-      overflowX: "initial",
-      overflowY: "initial",
-      overflow: "initial"
-    }),
-    []
-  );
-  return /* @__PURE__ */ React56.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React56.createElement(
-    WindowScroller,
-    {
-      scrollElement,
-      style: useMemo23(() => ({ flex: "1 1 auto" }), [])
-    },
-    useCallback24(
-      ({
-        registerChild,
-        onChildScroll,
-        scrollTop
-      }) => /* @__PURE__ */ React56.createElement("div", { ref: registerChild }, /* @__PURE__ */ React56.createElement(
-        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 = memo20(
-  VirtualizedListInner
-);
 var ListViewRoot = memoGeneric(
   forwardRefGeneric(function ListViewRootInner({
     id,
@@ -9174,7 +9419,7 @@ var ListViewRoot = memoGeneric(
     itemHeight,
     getItemHeightForItem
   }, forwardedRef) {
-    const handleClick = useCallback24(
+    const handleClick = useCallback25(
       (event) => {
         if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
           return;
@@ -9184,11 +9429,11 @@ var ListViewRoot = memoGeneric(
       },
       [onPress]
     );
-    const renderChild = useCallback24(
+    const renderChild = useCallback25(
       (index) => renderItem(data[index], index, { isDragOverlay: false }),
       [data, renderItem]
     );
-    const defaultContextValue = useMemo23(
+    const defaultContextValue = useMemo24(
       () => ({
         marginType: "none",
         selectedPosition: "only",
@@ -9196,7 +9441,7 @@ var ListViewRoot = memoGeneric(
       }),
       []
     );
-    const getItemContextValue = useCallback24(
+    const getItemContextValue = useCallback25(
       (i) => {
         if (variant === "bare" || variant === "normal") {
           const current2 = renderChild(i);
@@ -9244,27 +9489,27 @@ var ListViewRoot = memoGeneric(
       },
       [variant, defaultContextValue, renderChild, data.length]
     );
-    const draggingContextOverlayValue = useMemo23(
+    const draggingContextOverlayValue = useMemo24(
       () => ({
         isDragOverlay: true
       }),
       []
     );
-    const renderOverlay = useCallback24(
-      (index) => /* @__PURE__ */ React56.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React56.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
+    const renderOverlay = useCallback25(
+      (index) => /* @__PURE__ */ React58.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React58.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
       [draggingContextOverlayValue, renderItem, data]
     );
-    const renderWrappedChild = useCallback24(
+    const renderWrappedChild = useCallback25(
       (index) => {
         const contextValue2 = getItemContextValue(index);
         const current = renderChild(index);
         if (!contextValue2 || !isValidElement3(current)) return null;
-        return /* @__PURE__ */ React56.createElement(ListRowContext.Provider, { key: current.key, value: contextValue2 }, current);
+        return /* @__PURE__ */ React58.createElement(ListRowContext.Provider, { key: current.key, value: contextValue2 }, current);
       },
       [getItemContextValue, renderChild]
     );
-    const ids = useMemo23(() => data.map(keyExtractor), [keyExtractor, data]);
-    const withSortable = (children) => sortable ? /* @__PURE__ */ React56.createElement(
+    const ids = useMemo24(() => data.map(keyExtractor), [keyExtractor, data]);
+    const withSortable = (children) => sortable ? /* @__PURE__ */ React58.createElement(
       Sortable.Root,
       {
         id: sortableId,
@@ -9277,8 +9522,8 @@ var ListViewRoot = memoGeneric(
       },
       children
     ) : children;
-    const withScrollable = (children) => scrollable ? /* @__PURE__ */ React56.createElement(ScrollArea, null, children) : children(null);
-    const getItemHeight = useCallback24(
+    const withScrollable = (children) => scrollable ? /* @__PURE__ */ React58.createElement(ScrollArea, null, children) : children;
+    const getItemHeight = useCallback25(
       (index) => {
         const child = getItemContextValue(index);
         if (child?.isSectionHeader && sectionHeaderVariant === "label") {
@@ -9298,13 +9543,13 @@ var ListViewRoot = memoGeneric(
         data
       ]
     );
-    const getKey = useCallback24(
+    const getKey = useCallback25(
       (index) => keyExtractor(data[index], index),
       [data, keyExtractor]
     );
-    const draggingContextValue = useMemo23(() => ({}), []);
-    const gapStyle = useMemo23(() => ({ gap: `${gap}px` }), [gap]);
-    const contextValue = useMemo23(
+    const draggingContextValue = useMemo24(() => ({}), []);
+    const gapStyle = useMemo24(() => ({ gap: `${gap}px` }), [gap]);
+    const contextValue = useMemo24(
       () => ({
         pressEventName,
         colorScheme,
@@ -9328,7 +9573,7 @@ var ListViewRoot = memoGeneric(
         indentation
       ]
     );
-    return /* @__PURE__ */ React56.createElement(ListViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React56.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React56.createElement(
+    return /* @__PURE__ */ React58.createElement(ListViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React58.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React58.createElement(
       "div",
       {
         id,
@@ -9355,21 +9600,21 @@ var ListViewRoot = memoGeneric(
         onDragLeave,
         onDrop
       },
-      data.length === 0 && renderEmptyState ? renderEmptyState() : withScrollable(
-        (scrollElementRef) => withSortable(
-          virtualized ? /* @__PURE__ */ React56.createElement(
-            VirtualizedList,
-            {
-              ref: forwardedRef,
-              scrollElement: scrollElementRef,
-              items: data,
-              size: virtualized,
-              getItemHeight,
-              keyExtractor: getKey,
-              renderItem: renderWrappedChild
-            }
-          ) : range(0, data.length).map(renderWrappedChild)
+      data.length === 0 && renderEmptyState ? renderEmptyState() : virtualized != null ? withSortable(
+        /* @__PURE__ */ React58.createElement(
+          Virtualized2,
+          {
+            ref: forwardedRef,
+            height: virtualized,
+            itemCount: data.length,
+            getItemHeight,
+            renderItem: renderWrappedChild,
+            itemKey: getKey,
+            useScrollArea: scrollable
+          }
         )
+      ) : withScrollable(
+        withSortable(range(0, data.length).map(renderWrappedChild))
       )
     )));
   })
@@ -9377,11 +9622,11 @@ var ListViewRoot = memoGeneric(
 
 // src/components/listView/ListViewRow.tsx
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React57, {
+import React59, {
   forwardRef as forwardRef21,
-  useCallback as useCallback25,
-  useContext as useContext13,
-  useMemo as useMemo24
+  useCallback as useCallback26,
+  useContext as useContext12,
+  useMemo as useMemo25
 } from "react";
 
 // src/hooks/mergeEventHandlers.ts
@@ -9435,7 +9680,7 @@ var RowContainer = forwardRef21(
     "aria-selected": ariaSelected,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React59.createElement(
       Component,
       {
         ref,
@@ -9517,7 +9762,7 @@ var ListViewDragIndicatorElement = forwardRef21(
     style: style2,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React59.createElement(
       "div",
       {
         ref,
@@ -9585,27 +9830,27 @@ var ListViewRow = memoGeneric(
       divider,
       sortable,
       indentation
-    } = useContext13(ListViewContext);
-    const { marginType, selectedPosition } = useContext13(ListRowContext);
+    } = useContext12(ListViewContext);
+    const { marginType, selectedPosition } = useContext12(ListRowContext);
     const { hoverProps } = useHover({
       onHoverChange
     });
-    const { isDragOverlay } = useContext13(ListViewDraggingContext);
-    const handlePress = useCallback25(
+    const { isDragOverlay } = useContext12(ListViewDraggingContext);
+    const handlePress = useCallback26(
       (event) => {
         if (event.button !== 0) return;
         onPress?.(event);
       },
       [onPress]
     );
-    const handleDoubleClick = useCallback25(
+    const handleDoubleClick = useCallback26(
       (event) => {
         event.stopPropagation();
         onDoubleClick?.();
       },
       [onDoubleClick]
     );
-    const mergedStyle = useMemo24(() => {
+    const mergedStyle = useMemo25(() => {
       return isDragOverlay ? {
         // TODO: Where do these offsets actually come from?
         transform: `translate3d(-36px, -6px, 0)`,
@@ -9616,7 +9861,7 @@ var ListViewRow = memoGeneric(
     const renderContent = (renderProps, ref, relativeDropPositionProp) => {
       const Component = RowContainer;
       const relativeDropPosition = testRelativeDropPosition ?? relativeDropPositionProp;
-      const element = /* @__PURE__ */ React57.createElement(
+      const element = /* @__PURE__ */ React59.createElement(
         Component,
         {
           as,
@@ -9651,7 +9896,7 @@ var ListViewRow = memoGeneric(
           className,
           $clickable: !!onPress
         },
-        relativeDropPosition && /* @__PURE__ */ React57.createElement(
+        relativeDropPosition && /* @__PURE__ */ React59.createElement(
           ListViewDragIndicatorElement,
           {
             key: relativeDropPosition,
@@ -9666,11 +9911,11 @@ var ListViewRow = memoGeneric(
             }) : dragIndicatorStyle
           }
         ),
-        depth > 0 && /* @__PURE__ */ React57.createElement(Spacer.Horizontal, { size: depth * indentation }),
+        depth > 0 && /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: depth * indentation }),
         children
       );
       if (menuItems && onSelectMenuItem) {
-        return /* @__PURE__ */ React57.createElement(
+        return /* @__PURE__ */ React59.createElement(
           ContextMenu,
           {
             items: menuItems,
@@ -9683,7 +9928,7 @@ var ListViewRow = memoGeneric(
       return element;
     };
     if (sortable && id) {
-      return /* @__PURE__ */ React57.createElement(
+      return /* @__PURE__ */ React59.createElement(
         Sortable.Item,
         {
           id,
@@ -9701,12 +9946,12 @@ var ListViewRow = memoGeneric(
 );
 
 // src/components/listView/ListViewRowTitle.tsx
-import React58, { memo as memo21 } from "react";
-var ListViewRowTitle = memo21(function ListViewRowTitle2({
+import React60, { memo as memo20 } from "react";
+var ListViewRowTitle = memo20(function ListViewRowTitle2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "span",
     {
       className: cx(
@@ -9763,7 +10008,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-import React59, { useCallback as useCallback26, useContext as useContext14 } from "react";
+import React61, { useCallback as useCallback27, useContext as useContext13 } from "react";
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
@@ -9774,9 +10019,9 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = useContext14(ListViewContext);
+  const { expandable } = useContext13(ListViewContext);
   const stableOnClickChevron = useStableCallback(onClickChevron);
-  const handleClickChevron = useCallback26(
+  const handleClickChevron = useCallback27(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -9784,7 +10029,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
     },
     [stableOnClickChevron]
   );
-  return /* @__PURE__ */ React59.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && chevronPosition !== "end" && /* @__PURE__ */ React59.createElement(React59.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React61.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && chevronPosition !== "end" && /* @__PURE__ */ React61.createElement(React61.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React61.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React61.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -9793,7 +10038,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React59.createElement(React59.Fragment, null, renderIcon(icon), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ React59.createElement(React59.Fragment, null) : /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
+  ), /* @__PURE__ */ React61.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React61.createElement(React61.Fragment, null, renderIcon(icon), /* @__PURE__ */ React61.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ React61.createElement(React61.Fragment, null) : /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -9802,7 +10047,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 8 }))));
+  ), /* @__PURE__ */ React61.createElement(Spacer.Horizontal, { size: 8 }))));
 });
 var TreeView;
 ((TreeView2) => {
@@ -9870,9 +10115,9 @@ var List = memoGeneric(
       getItemStyle,
       getItemClassName
     } = props;
-    const [internalHoveredId, setHoveredId] = useState25();
-    const [internalRenamingId, setRenamingId] = useState25();
-    const [dropdownOpenId, setDropdownOpenId] = useState25();
+    const [internalHoveredId, setHoveredId] = useState26();
+    const [internalRenamingId, setRenamingId] = useState26();
+    const [dropdownOpenId, setDropdownOpenId] = useState26();
     const hoveredId = internalHoveredId ?? testHoveredId;
     const renamingId = testRenamingId ?? internalRenamingId;
     const itemClassName = cx(
@@ -9880,7 +10125,7 @@ var List = memoGeneric(
       pyMap[size],
       itemClassNameProp
     );
-    const itemStyle = useMemo25(
+    const itemStyle = useMemo26(
       () => ({ ...cssVarOverrides, ...itemStyleProp }),
       [itemStyleProp]
     );
@@ -9918,7 +10163,7 @@ var List = memoGeneric(
         setRenamingId(id);
       }
     }));
-    return /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React62.createElement(
       ViewComponent.Root,
       {
         variant: "bare",
@@ -9967,7 +10212,7 @@ var List = memoGeneric(
               handleSelect(id);
             }
           };
-          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React60.createElement(
+          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React62.createElement(
             ActionMenu,
             {
               menuItems,
@@ -9987,7 +10232,7 @@ var List = memoGeneric(
           let below = detailPosition === "below" ? detailContent : void 0;
           if (below && normalizedDetailLineClamp) {
             const clampClassName = DETAIL_LINE_CLAMP_CLASSES[normalizedDetailLineClamp];
-            below = /* @__PURE__ */ React60.createElement(
+            below = /* @__PURE__ */ React62.createElement(
               "div",
               {
                 className: cx(
@@ -10000,7 +10245,7 @@ var List = memoGeneric(
           }
           const perItemStyle = getItemStyle?.(item, isSelected);
           const perItemClassName = getItemClassName?.(item, isSelected);
-          return /* @__PURE__ */ React60.createElement(
+          return /* @__PURE__ */ React62.createElement(
             ViewComponent.Row,
             {
               as: typeof href === "string" ? LinkComponent2 : void 0,
@@ -10055,7 +10300,7 @@ var List = memoGeneric(
               },
               dragIndicatorStyle
             },
-            /* @__PURE__ */ React60.createElement(
+            /* @__PURE__ */ React62.createElement(
               "div",
               {
                 className: cx(
@@ -10063,7 +10308,7 @@ var List = memoGeneric(
                   rowGapMap[size]
                 )
               },
-              thumbnail && /* @__PURE__ */ React60.createElement(
+              thumbnail && /* @__PURE__ */ React62.createElement(
                 "div",
                 {
                   className: cx(
@@ -10076,13 +10321,13 @@ var List = memoGeneric(
                 },
                 thumbnail
               ),
-              /* @__PURE__ */ React60.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-w-0" }, /* @__PURE__ */ React60.createElement("div", { className: "n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2" }, /* @__PURE__ */ React60.createElement(
+              /* @__PURE__ */ React62.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-w-0" }, /* @__PURE__ */ React62.createElement("div", { className: "n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2" }, /* @__PURE__ */ React62.createElement(
                 "div",
                 {
                   className: "n-flex-1 n-w-0 n-flex n-items-center",
                   tabIndex: -1
                 },
-                isRenaming ? /* @__PURE__ */ React60.createElement(
+                isRenaming ? /* @__PURE__ */ React62.createElement(
                   ViewComponent.EditableRowTitle,
                   {
                     value: getName(item),
@@ -10098,7 +10343,7 @@ var List = memoGeneric(
                       e.stopPropagation();
                     }
                   }
-                ) : /* @__PURE__ */ React60.createElement(
+                ) : /* @__PURE__ */ React62.createElement(
                   ViewComponent.RowTitle,
                   {
                     className: cx(
@@ -10108,7 +10353,7 @@ var List = memoGeneric(
                   },
                   getName(item)
                 )
-              ), right && detailPosition === "end" && /* @__PURE__ */ React60.createElement(DetailContainer, { selected: isSelected }, right), end && detailPosition === "end" && /* @__PURE__ */ React60.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React60.createElement(
+              ), right && detailPosition === "end" && /* @__PURE__ */ React62.createElement(DetailContainer, { selected: isSelected }, right), end && detailPosition === "end" && /* @__PURE__ */ React62.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React62.createElement(
                 DetailContainer,
                 {
                   selected: isSelected,
@@ -10116,8 +10361,8 @@ var List = memoGeneric(
                 },
                 below
               )),
-              right && detailPosition === "below" && /* @__PURE__ */ React60.createElement(DetailContainer, { selected: isSelected }, right),
-              end && detailPosition === "below" && /* @__PURE__ */ React60.createElement(DetailContainer, { selected: isSelected }, end)
+              right && detailPosition === "below" && /* @__PURE__ */ React62.createElement(DetailContainer, { selected: isSelected }, right),
+              end && detailPosition === "below" && /* @__PURE__ */ React62.createElement(DetailContainer, { selected: isSelected }, end)
             )
           );
         }
@@ -10125,12 +10370,12 @@ var List = memoGeneric(
     );
   })
 );
-var DetailContainer = memo22(function DetailContainer2({
+var DetailContainer = memo21(function DetailContainer2({
   children,
   selected,
   align = "center"
 }) {
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       className: cx(
@@ -10201,7 +10446,7 @@ var itemHeightMap = {
 // src/components/Collection.tsx
 var Collection = forwardRefGeneric(function Collection2(props, ref) {
   const { viewType, ...rest } = props;
-  return viewType === "grid" ? /* @__PURE__ */ React61.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React61.createElement(List, { ref, ...rest });
+  return viewType === "grid" ? /* @__PURE__ */ React63.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React63.createElement(List, { ref, ...rest });
 });
 
 // ../noya-color/src/convert.ts
@@ -10362,7 +10607,7 @@ import { clamp as clamp3 } from "@noya-app/noya-utils";
 
 // src/components/ColorSwatch.tsx
 import { CheckIcon } from "@noya-app/noya-icons";
-import React62, { forwardRef as forwardRef22 } from "react";
+import React64, { forwardRef as forwardRef22 } from "react";
 var colorSwatchSizeMap = {
   xxsmall: 15,
   xsmall: 21,
@@ -10380,7 +10625,7 @@ var ColorSwatch = forwardRef22(function ColorSwatch2({
 }, ref) {
   const sizePx = colorSwatchSizeMap[size];
   const checkedColor = getContrastColorForBackground(color);
-  return /* @__PURE__ */ React62.createElement("div", { className: "n-relative", style: { width: sizePx, height: sizePx } }, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React64.createElement("div", { className: "n-relative", style: { width: sizePx, height: sizePx } }, /* @__PURE__ */ React64.createElement(
     Component,
     {
       ...props,
@@ -10396,7 +10641,7 @@ var ColorSwatch = forwardRef22(function ColorSwatch2({
         ...style2
       }
     }
-  ), checked && /* @__PURE__ */ React62.createElement(
+  ), checked && /* @__PURE__ */ React64.createElement(
     CheckIcon,
     {
       color: checkedColor,
@@ -10407,7 +10652,7 @@ var ColorSwatch = forwardRef22(function ColorSwatch2({
 
 // src/components/ColorSwatchControl.tsx
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import React63, { useMemo as useMemo26 } from "react";
+import React65, { useMemo as useMemo27 } from "react";
 function ColorSwatchControl(props) {
   const {
     options,
@@ -10422,7 +10667,7 @@ function ColorSwatchControl(props) {
     id,
     style: style2
   } = props;
-  const styles3 = useMemo26(() => {
+  const styles3 = useMemo27(() => {
     return {
       display: "grid",
       gridTemplateColumns: `repeat(auto-fill, minmax(${colorSwatchSizeMap[size]}px, 1fr))`,
@@ -10430,8 +10675,8 @@ function ColorSwatchControl(props) {
       ...style2
     };
   }, [size, style2]);
-  const content = /* @__PURE__ */ React63.createElement("div", { className, id, style: styles3 }, options.map((option) => {
-    const item = /* @__PURE__ */ React63.createElement(
+  const content = /* @__PURE__ */ React65.createElement("div", { className, id, style: styles3 }, options.map((option) => {
+    const item = /* @__PURE__ */ React65.createElement(
       ColorSwatch,
       {
         key: `${option}-color-swatch`,
@@ -10444,7 +10689,7 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return /* @__PURE__ */ React63.createElement(
+    return /* @__PURE__ */ React65.createElement(
       ToggleGroupPrimitive.Item,
       {
         asChild: true,
@@ -10455,7 +10700,7 @@ function ColorSwatchControl(props) {
       item
     );
   }));
-  return /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React65.createElement(
     ToggleGroupPrimitive.Root,
     {
       type: "single",
@@ -10470,18 +10715,18 @@ function ColorSwatchControl(props) {
 
 // src/components/Combobox.tsx
 import { DropdownChevronIcon as DropdownChevronIcon2 } from "@noya-app/noya-icons";
-import React66, {
-  useCallback as useCallback27,
+import React68, {
+  useCallback as useCallback28,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo27,
+  useMemo as useMemo28,
   useRef as useRef21,
-  useState as useState26
+  useState as useState27
 } from "react";
 
 // src/utils/combobox.ts
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import React64, { useSyncExternalStore } from "react";
+import React66, { useSyncExternalStore } from "react";
 
 // src/utils/fuzzyScorer.ts
 import { scoreFilePathFuzzy } from "vscode-fuzzy-scorer";
@@ -10818,7 +11063,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 (React64.isValidElement(node)) {
+  if (React66.isValidElement(node)) {
     return getNodeText(node.props?.children);
   }
   return "";
@@ -10826,7 +11071,7 @@ function getNodeText(node) {
 
 // src/components/ComboboxMenu.tsx
 import { CheckIcon as CheckIcon2 } from "@noya-app/noya-icons";
-import React65, { memo as memo23 } from "react";
+import React67, { memo as memo22 } from "react";
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
     items,
@@ -10840,7 +11085,7 @@ var ComboboxMenu = memoGeneric(
     itemHeight,
     getRowHeightForItem
   }, forwardedRef) {
-    return /* @__PURE__ */ React65.createElement(
+    return /* @__PURE__ */ React67.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -10850,7 +11095,7 @@ var ComboboxMenu = memoGeneric(
           return item.value;
         },
         data: items,
-        virtualized: listSize,
+        virtualized: listSize.height,
         ...itemHeight ? { itemHeight } : {},
         ...getRowHeightForItem ? { getItemHeightForItem: getRowHeightForItem } : {},
         pressEventName: "onPointerDown",
@@ -10858,7 +11103,7 @@ var ComboboxMenu = memoGeneric(
         style: style2,
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React65.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React65.createElement(
+            return /* @__PURE__ */ React67.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React67.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -10873,7 +11118,7 @@ var ComboboxMenu = memoGeneric(
             // Only selectable items can have tooltips in this menu
             isSelectableMenuItem(item) ? item.tooltip : void 0
           );
-          return /* @__PURE__ */ React65.createElement(
+          return /* @__PURE__ */ React67.createElement(
             ListView.Row,
             {
               key: item.value,
@@ -10886,12 +11131,12 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ React65.createElement("div", { className: "n-flex n-flex-1 n-min-w-0 n-items-start" }, indented && /* @__PURE__ */ React65.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React65.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React65.createElement(CheckIcon2, null)) : indented ? /* @__PURE__ */ React65.createElement(
+            /* @__PURE__ */ React67.createElement("div", { className: "n-flex n-flex-1 n-min-w-0 n-items-start" }, indented && /* @__PURE__ */ React67.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React67.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React67.createElement(CheckIcon2, null)) : indented ? /* @__PURE__ */ React67.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
               }
-            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement(MenuIcon, { icon: item.icon }), /* @__PURE__ */ React65.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React65.createElement("div", { className: "n-flex n-flex-col n-min-w-0 n-flex-1" }, /* @__PURE__ */ React65.createElement("div", { className: "n-min-w-0 n-truncate" }, tokens.map((token, j) => /* @__PURE__ */ React65.createElement(
+            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(MenuIcon, { icon: item.icon }), /* @__PURE__ */ React67.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React67.createElement("div", { className: "n-flex n-flex-col n-min-w-0 n-flex-1" }, /* @__PURE__ */ React67.createElement("div", { className: "n-min-w-0 n-truncate" }, tokens.map((token, j) => /* @__PURE__ */ React67.createElement(
               "span",
               {
                 key: `${item.value}-token-${j}`,
@@ -10901,16 +11146,16 @@ var ComboboxMenu = memoGeneric(
                 )
               },
               token.text
-            ))), tooltip && /* @__PURE__ */ React65.createElement(Small, { color: "textSubtle", className: "n-truncate" }, tooltip))),
-            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React65.createElement("div", { className: "n-flex n-items-center n-min-w-0 n-ml-2" }, item.shortcut ? /* @__PURE__ */ React65.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && /* @__PURE__ */ React65.createElement(MenuIcon, { icon: item.icon }))
+            ))), tooltip && /* @__PURE__ */ React67.createElement(Small, { color: "textSubtle", className: "n-truncate" }, tooltip))),
+            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React67.createElement("div", { className: "n-flex n-items-center n-min-w-0 n-ml-2" }, item.shortcut ? /* @__PURE__ */ React67.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && /* @__PURE__ */ React67.createElement(MenuIcon, { icon: item.icon }))
           );
         }
       }
     );
   })
 );
-var MenuIcon = memo23(function MenuIcon2({ icon }) {
-  return /* @__PURE__ */ React65.createElement("div", { className: "n-relative n-top-[2px]" }, renderIcon(icon));
+var MenuIcon = memo22(function MenuIcon2({ icon }) {
+  return /* @__PURE__ */ React67.createElement("div", { className: "n-relative n-top-[2px]" }, renderIcon(icon));
 });
 
 // src/components/Combobox.tsx
@@ -10934,7 +11179,7 @@ var Combobox = memoGeneric(
     iconPosition = "right",
     ...rest
   }, forwardedRef) {
-    const props = useMemo27(() => {
+    const props = useMemo28(() => {
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
@@ -10973,7 +11218,7 @@ var Combobox = memoGeneric(
       }
     }
     const initialValueString = getInitialValueString();
-    const [comboboxState] = useState26(
+    const [comboboxState] = useState27(
       () => new ComboboxState(
         items,
         initialValueString,
@@ -10981,9 +11226,9 @@ var Combobox = memoGeneric(
       )
     );
     const state = useComboboxState(comboboxState);
-    const [isFocused, setIsFocused] = useState26(false);
+    const [isFocused, setIsFocused] = useState27(false);
     const listRef = useRef21(null);
-    const [shouldBlur, setShouldBlur] = useState26(false);
+    const [shouldBlur, setShouldBlur] = useState27(false);
     const { fieldId: id } = useLabel({
       fieldId: rest.id
     });
@@ -11000,7 +11245,7 @@ var Combobox = memoGeneric(
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const handleBlur = useCallback27(() => {
+    const handleBlur = useCallback28(() => {
       ref.current?.blur();
       comboboxState.reset(initialValueString);
       if (props.mode === "string") {
@@ -11019,7 +11264,7 @@ var Combobox = memoGeneric(
       }
       setIsFocused(false);
     }, [filter, initialValueString, props, state, comboboxState]);
-    const handleFocus = useCallback27(
+    const handleFocus = useCallback28(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
@@ -11033,7 +11278,7 @@ var Combobox = memoGeneric(
       },
       [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
-    const handleUpdateSelection = useCallback27(
+    const handleUpdateSelection = useCallback28(
       (item) => {
         if (item.type !== void 0) return;
         const selectedItem = comboboxState.selectCurrentItem(item);
@@ -11049,7 +11294,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleIndexChange = useCallback27(
+    const handleIndexChange = useCallback28(
       (index) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
@@ -11065,7 +11310,7 @@ var Combobox = memoGeneric(
       },
       [props, comboboxState]
     );
-    const handleChange = useCallback27(
+    const handleChange = useCallback28(
       (value) => {
         if (readOnly) return;
         comboboxState.setFilter(value);
@@ -11080,7 +11325,7 @@ var Combobox = memoGeneric(
       },
       [readOnly, props, comboboxState]
     );
-    const handleKeyDown = useCallback27(
+    const handleKeyDown = useCallback28(
       (event) => {
         let handled = false;
         const item = comboboxState.getSelectedItem();
@@ -11188,7 +11433,7 @@ var Combobox = memoGeneric(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    const handleChevronClick = useCallback27(
+    const handleChevronClick = useCallback28(
       (event) => {
         event.stopPropagation();
         if (shouldShowMenu) {
@@ -11215,27 +11460,27 @@ var Combobox = memoGeneric(
       ref.current?.focus();
       handleBlur();
     }, [shouldBlur, handleBlur]);
-    const { sectionHeaderCount, menuItemsCount, tallMenuItemsCount } = useMemo27(
+    const { sectionHeaderCount, menuItemsCount, tallMenuItemsCount } = useMemo28(
       () => ListView.getMenuMetrics(filteredItems),
       [filteredItems]
     );
     const hasCheckedItems = items.some(
       (item) => isSelectableMenuItem(item) && item.checked
     );
-    return /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React68.createElement(
       InputField2.Root,
       {
         id,
         size,
         sideOffset: 6,
         start: icon ? renderIcon(icon) : void 0,
-        end: /* @__PURE__ */ React66.createElement(React66.Fragment, null, loading && /* @__PURE__ */ React66.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React66.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React66.createElement(
+        end: /* @__PURE__ */ React68.createElement(React68.Fragment, null, loading && /* @__PURE__ */ React68.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React68.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React68.createElement(
           InputField2.Button,
           {
             variant: "floating",
             onClick: handleChevronClick
           },
-          /* @__PURE__ */ React66.createElement(
+          /* @__PURE__ */ React68.createElement(
             DropdownChevronIcon2,
             {
               className: cx(
@@ -11255,7 +11500,7 @@ var Combobox = memoGeneric(
             maxBaseRows: 10.5
           });
           const adjustedListSize = { width, height: computedHeight };
-          return /* @__PURE__ */ React66.createElement(
+          return /* @__PURE__ */ React68.createElement(
             "div",
             {
               className: cx(
@@ -11263,7 +11508,7 @@ var Combobox = memoGeneric(
                 shouldShowMenu && !readOnly ? "n-flex" : "n-hidden"
               )
             },
-            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React66.createElement(
+            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React68.createElement(
               ComboboxMenu,
               {
                 ref: listRef,
@@ -11281,11 +11526,11 @@ var Combobox = memoGeneric(
                   getRowHeightForItem: (item) => isSelectableMenuItem(item) && item.tooltip ? ListView.tallRowHeight : baseRowHeight
                 } : { itemHeight: baseRowHeight }
               }
-            ) : /* @__PURE__ */ React66.createElement("div", { className: "n-flex n-flex-col n-h-[50px] n-p-5 n-items-center n-justify-center" }, /* @__PURE__ */ React66.createElement(Small, { className: "n-text-text-disabled" }, loading ? "Loading..." : "No results"))
+            ) : /* @__PURE__ */ React68.createElement("div", { className: "n-flex n-flex-col n-h-[50px] n-p-5 n-items-center n-justify-center" }, /* @__PURE__ */ React68.createElement(Small, { className: "n-text-text-disabled" }, loading ? "Loading..." : "No results"))
           );
         }
       },
-      /* @__PURE__ */ React66.createElement(
+      /* @__PURE__ */ React68.createElement(
         InputField2.Input,
         {
           ref,
@@ -11310,7 +11555,7 @@ var Combobox = memoGeneric(
           ...readOnly ? { readOnly: true } : {}
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React66.createElement(
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React68.createElement(
         InputField2.Typeahead,
         {
           value: typeaheadValue,
@@ -11324,18 +11569,18 @@ var Combobox = memoGeneric(
 );
 
 // src/components/CommandPalette.tsx
-import React68, { memo as memo24 } from "react";
+import React70, { memo as memo23 } from "react";
 
 // src/components/SearchCompletionMenu.tsx
 import { getCurrentPlatform as getCurrentPlatform2, handleKeyboardEvent } from "@noya-app/noya-keymap";
-import React67, {
+import React69, {
   forwardRef as forwardRef23,
-  useCallback as useCallback28,
+  useCallback as useCallback29,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef22,
-  useState as useState27
+  useState as useState28
 } from "react";
 var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
   onSelect,
@@ -11346,17 +11591,17 @@ var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
   testSelectedIndex,
   testSearch
 }, forwardedRef) {
-  const [state, setState] = useState27({
+  const [state, setState] = useState28({
     search: testSearch ?? "",
     index: 0
   });
   const { index, search } = state;
-  const listRef = React67.useRef(null);
+  const listRef = React69.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
   useEffect21(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
-  const results = useMemo28(
+  const results = useMemo29(
     () => fuzzyFilter({
       items: items.map(
         (item) => typeof item.title === "string" ? item.title : item.value
@@ -11368,10 +11613,10 @@ var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
     })),
     [items, search]
   );
-  const setSearch = useCallback28((search2) => {
+  const setSearch = useCallback29((search2) => {
     setState((state2) => ({ ...state2, search: search2, index: 0 }));
   }, []);
-  const setIndex = useCallback28((index2) => {
+  const setIndex = useCallback29((index2) => {
     setState((state2) => ({ ...state2, index: index2 }));
   }, []);
   useEffect21(() => {
@@ -11393,14 +11638,14 @@ var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
     width: listSize.width,
     height: searchHeight + listSize.height
   };
-  const selectAndClose = useCallback28(
+  const selectAndClose = useCallback29(
     (item) => {
       onSelect(item);
       onClose();
     },
     [onSelect, onClose]
   );
-  const handleKeyDown = useCallback28(
+  const handleKeyDown = useCallback29(
     (event) => {
       handleKeyboardEvent(event.nativeEvent, getCurrentPlatform2(navigator), {
         ArrowUp: () => {
@@ -11434,7 +11679,7 @@ var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
       inputRef.current?.focus();
     }
   }));
-  return /* @__PURE__ */ React67.createElement("div", { ...elementSize, className: "n-flex n-flex-col n-overflow-hidden" }, /* @__PURE__ */ React67.createElement(InputField2.Root, { className: "n-flex n-flex-0" }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React69.createElement("div", { ...elementSize, className: "n-flex n-flex-col n-overflow-hidden" }, /* @__PURE__ */ React69.createElement(InputField2.Root, { className: "n-flex n-flex-0" }, /* @__PURE__ */ React69.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -11454,7 +11699,7 @@ var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
       onChange: setSearch,
       onKeyDown: handleKeyDown
     }
-  )), /* @__PURE__ */ React67.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React67.createElement(
+  )), /* @__PURE__ */ React69.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React69.createElement(
     ComboboxMenu,
     {
       ref: listRef,
@@ -11469,29 +11714,29 @@ var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
       onHoverIndex: setIndex,
       indented: hasCheckedItems
     }
-  ) : /* @__PURE__ */ React67.createElement(
+  ) : /* @__PURE__ */ React69.createElement(
     "div",
     {
       ...listSize,
       className: "n-flex n-flex-col n-p-20 n-items-center n-justify-center"
     },
-    /* @__PURE__ */ React67.createElement(Small, { color: "textDisabled" }, "No results")
+    /* @__PURE__ */ React69.createElement(Small, { color: "textDisabled" }, "No results")
   ));
 });
 
 // src/components/CommandPalette.tsx
-var CommandPalette = memo24(function CommandPalette2({
+var CommandPalette = memo23(function CommandPalette2({
   showCommandPalette,
   setShowCommandPalette,
   items,
   onSelect,
   onHover
 }) {
-  const menuRef = React68.useRef(null);
-  const handleClose = React68.useCallback(() => {
+  const menuRef = React70.useRef(null);
+  const handleClose = React70.useCallback(() => {
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React70.createElement(
     Dialog,
     {
       style: {
@@ -11517,7 +11762,7 @@ var CommandPalette = memo24(function CommandPalette2({
         }, 0);
       }
     },
-    /* @__PURE__ */ React68.createElement("div", { className: "n-flex n-flex-col n-flex-1" }, /* @__PURE__ */ React68.createElement(AutoSizer, null, (size) => /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React70.createElement("div", { className: "n-flex n-flex-col n-flex-1" }, /* @__PURE__ */ React70.createElement(AutoSizer, null, (size) => /* @__PURE__ */ React70.createElement(
       SearchCompletionMenu,
       {
         ref: menuRef,
@@ -11532,21 +11777,21 @@ var CommandPalette = memo24(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-import React69 from "react";
-var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React69.createElement(
+import React71 from "react";
+var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React71.createElement(
   Tooltip,
   {
     key: userId,
-    content: /* @__PURE__ */ React69.createElement("div", { className: "n-flex n-flex-col" }, /* @__PURE__ */ React69.createElement(Small, null, name))
+    content: /* @__PURE__ */ React71.createElement("div", { className: "n-flex n-flex-col" }, /* @__PURE__ */ React71.createElement(Small, null, name))
   },
-  /* @__PURE__ */ React69.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
+  /* @__PURE__ */ React71.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ React69.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ React69.createElement(AvatarStack, { size: INPUT_HEIGHT }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React69.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ React71.createElement(AvatarStack, { size: INPUT_HEIGHT }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React71.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React71.createElement(
     Button,
     {
       active: isAssistantOpen,
@@ -11558,7 +11803,7 @@ var ConnectedUsersMenuLayout = ({
 };
 
 // src/components/DraggableMenuButton.tsx
-import React70, { useCallback as useCallback29, useState as useState28 } from "react";
+import React72, { useCallback as useCallback30, useState as useState29 } from "react";
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -11576,8 +11821,8 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     onChange: onOpenChangeProp,
     defaultValue: false
   });
-  const [downPosition, setDownPosition] = useState28(null);
-  const handlePointerDownCapture = useCallback29(
+  const [downPosition, setDownPosition] = useState29(null);
+  const handlePointerDownCapture = useCallback30(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -11590,7 +11835,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [open]
   );
-  const handlePointerUp = useCallback29(
+  const handlePointerUp = useCallback30(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -11609,13 +11854,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [downPosition, open, setOpen]
   );
-  const handleOpenChange = useCallback29(
+  const handleOpenChange = useCallback30(
     (isOpen) => {
       if (!isOpen) setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "div",
     {
       ...rest,
@@ -11632,7 +11877,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onClick?.();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React70.createElement(
+    items && onSelect ? /* @__PURE__ */ React72.createElement(
       DropdownMenu,
       {
         open,
@@ -11641,14 +11886,14 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React70.createElement("div", { className: "n-pointer-events-none n-h-[15px]" }, /* @__PURE__ */ React70.createElement(
+      /* @__PURE__ */ React72.createElement("div", { className: "n-pointer-events-none n-h-[15px]" }, /* @__PURE__ */ React72.createElement(
         Icon,
         {
           name: iconName,
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React70.createElement(
+    ) : /* @__PURE__ */ React72.createElement(
       Icon,
       {
         name: iconName,
@@ -11660,10 +11905,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 import { Dialog as Dialog3 } from "radix-ui";
-import * as React71 from "react";
+import * as React73 from "react";
 import { useImperativeHandle as useImperativeHandle8 } from "react";
-var Drawer = React71.memo(
-  React71.forwardRef(function Drawer2({
+var Drawer = React73.memo(
+  React73.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -11695,7 +11940,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(
       Dialog3.Overlay,
       {
         className: cx(
@@ -11705,7 +11950,7 @@ var Drawer = React71.memo(
         ),
         style: overlayStyle
       }
-    ), /* @__PURE__ */ React71.createElement(
+    ), /* @__PURE__ */ React73.createElement(
       Dialog3.Content,
       {
         id,
@@ -11717,24 +11962,24 @@ var Drawer = React71.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React71.createElement(Dialog3.Title, null, title),
+      title && /* @__PURE__ */ React73.createElement(Dialog3.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React73.createElement(
       Dialog3.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React71.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React71.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React73.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React73.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
 
 // src/components/Fade.tsx
-import React72 from "react";
+import React74 from "react";
 var Fade = ({
   children,
   direction = "right",
@@ -11756,7 +12001,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__ */ React72.createElement("div", { className: cx("n-relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React74.createElement("div", { className: cx("n-relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React74.createElement(
     "div",
     {
       className: cx(
@@ -11775,21 +12020,21 @@ var Fade = ({
 };
 
 // src/components/file-explorer/FileExplorerLayout.tsx
-import React73 from "react";
+import React75 from "react";
 var FileExplorerLayout = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ React73.createElement(Section, { className: cx(className, "n-px-3 n-flex-1"), ...props }, children);
+}) => /* @__PURE__ */ React75.createElement(Section, { className: cx(className, "n-px-3 n-flex-1"), ...props }, children);
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
   isUploading,
   children
-}) => /* @__PURE__ */ React73.createElement("div", { className: "n-flex n-items-center n-gap-2" }, showUploadButton && /* @__PURE__ */ React73.createElement(
+}) => /* @__PURE__ */ React75.createElement("div", { className: "n-flex n-items-center n-gap-2" }, showUploadButton && /* @__PURE__ */ React75.createElement(
   Button,
   {
-    icon: isUploading ? /* @__PURE__ */ React73.createElement(ActivityIndicator, { size: 15 }) : "UploadIcon",
+    icon: isUploading ? /* @__PURE__ */ React75.createElement(ActivityIndicator, { size: 15 }) : "UploadIcon",
     onClick: onUpload,
     "aria-label": "Upload file",
     tooltip: "Upload file",
@@ -11799,7 +12044,7 @@ var FileExplorerUploadButton = ({
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
-    return /* @__PURE__ */ React73.createElement(Collection, { ref, className: "-n-mx-3 n-flex-1", ...props });
+    return /* @__PURE__ */ React75.createElement(Collection, { ref, className: "-n-mx-3 n-flex-1", ...props });
   }
 );
 var FileExplorerDetail = ({
@@ -11808,7 +12053,7 @@ var FileExplorerDetail = ({
   children,
   className,
   style: style2
-}) => /* @__PURE__ */ React73.createElement(
+}) => /* @__PURE__ */ React75.createElement(
   "span",
   {
     className: cx(
@@ -11823,10 +12068,10 @@ var FileExplorerDetail = ({
 var FileExplorerEmptyState = ({
   children: label = "No files",
   ...props
-}) => /* @__PURE__ */ React73.createElement(Banner, { className: "n-mx-3", ...props }, label);
+}) => /* @__PURE__ */ React75.createElement(Banner, { className: "n-mx-3", ...props }, label);
 
 // src/components/FileUploadIndicator.tsx
-import React76 from "react";
+import React78 from "react";
 
 // src/utils/formatByteSize.ts
 var byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -11846,7 +12091,7 @@ import {
   SpeakerLoudIcon,
   VideoIcon
 } from "@noya-app/noya-icons";
-import React74, { memo as memo26, useMemo as useMemo29 } from "react";
+import React76, { memo as memo25, useMemo as useMemo30 } from "react";
 
 // src/components/catppuccin/fileIcons.ts
 var fileIcons = {
@@ -14286,7 +14531,7 @@ var getThumbnailColors = (colorScheme, selected) => {
       };
   }
 };
-var MediaThumbnail = memo26(function MediaThumbnail2({
+var MediaThumbnail = memo25(function MediaThumbnail2({
   contentType: contentTypeProp,
   selected = false,
   className,
@@ -14304,14 +14549,14 @@ var MediaThumbnail = memo26(function MediaThumbnail2({
     selected
   );
   const contentType = getAssetType(contentTypeProp);
-  const iconStyles = useMemo29(
+  const iconStyles = useMemo30(
     () => ({
       width: iconSizeMap[size],
       height: iconSizeMap[size]
     }),
     [size]
   );
-  const content = useMemo29(() => {
+  const content = useMemo30(() => {
     if (renderThumbnailIcon) {
       const rendered = renderThumbnailIcon({ fileName, contentType });
       if (rendered) return rendered;
@@ -14331,7 +14576,7 @@ var MediaThumbnail = memo26(function MediaThumbnail2({
       renderUrl.searchParams.set("url", url);
       renderUrl.searchParams.set("fit", aspect);
       renderUrl.searchParams.set("theme", "light");
-      return /* @__PURE__ */ React74.createElement(
+      return /* @__PURE__ */ React76.createElement(
         "img",
         {
           src: renderUrl.toString(),
@@ -14345,23 +14590,23 @@ var MediaThumbnail = memo26(function MediaThumbnail2({
     }
     switch (contentType) {
       case "image":
-        return /* @__PURE__ */ React74.createElement(ImageIcon2, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React76.createElement(ImageIcon2, { color: iconColor, style: iconStyles });
       case "video":
-        return /* @__PURE__ */ React74.createElement(VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React76.createElement(VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ React74.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React76.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon2 = Icons[iconName];
-          return /* @__PURE__ */ React74.createElement(Icon2, { color: iconColor, style: iconStyles });
+          return /* @__PURE__ */ React76.createElement(Icon2, { color: iconColor, style: iconStyles });
         }
         if (fileName) {
           if (fileName.endsWith(".noya")) {
-            return /* @__PURE__ */ React74.createElement(NoyaIcon, { color: iconColor, style: iconStyles });
+            return /* @__PURE__ */ React76.createElement(NoyaIcon, { color: iconColor, style: iconStyles });
           }
           const fileIcon = findFileIcon(fileName);
           if (fileIcon) {
-            return /* @__PURE__ */ React74.createElement(
+            return /* @__PURE__ */ React76.createElement(
               "img",
               {
                 src: `https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`,
@@ -14371,7 +14616,7 @@ var MediaThumbnail = memo26(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ React74.createElement(FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React76.createElement(FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [
     renderThumbnailIcon,
@@ -14385,7 +14630,7 @@ var MediaThumbnail = memo26(function MediaThumbnail2({
     iconStyles,
     iconName
   ]);
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: cx(
@@ -14428,7 +14673,7 @@ function findFileIcon(fileName) {
 // src/components/Progress.tsx
 import { clamp as clamp4 } from "@noya-app/noya-utils";
 import { Progress as ProgressPrimitive } from "radix-ui";
-import * as React75 from "react";
+import * as React77 from "react";
 function Progress({
   value,
   colorScheme = "normal",
@@ -14437,18 +14682,18 @@ function Progress({
   style: styleProp
 }) {
   const clampedValue = clamp4(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(
     ProgressPrimitive.Root,
     {
       className: cx(
@@ -14458,7 +14703,7 @@ function Progress({
       style: style2,
       value: clampedValue
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React77.createElement(
       ProgressPrimitive.Indicator,
       {
         className: cx(
@@ -14483,14 +14728,14 @@ function FileUploadIndicator({
 }) {
   const done = percent === 1;
   const value = typeof percent === "number" ? Math.round(percent) : 0;
-  return /* @__PURE__ */ React76.createElement("div", { className: "n-flex n-items-center n-gap-2" }, /* @__PURE__ */ React76.createElement("div", { className: "n-w-12 n-h-12 n-bg-background n-rounded-md n-overflow-hidden" }, /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React78.createElement("div", { className: "n-flex n-items-center n-gap-2" }, /* @__PURE__ */ React78.createElement("div", { className: "n-w-12 n-h-12 n-bg-background n-rounded-md n-overflow-hidden" }, /* @__PURE__ */ React78.createElement(
     MediaThumbnail,
     {
       size: "medium",
       fileName: name,
       contentType
     }
-  )), /* @__PURE__ */ React76.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-justify-center n-gap-1 n-min-w-0" }, name && /* @__PURE__ */ React76.createElement(Small, { color: "text", className: "n-truncate n-leading-none" }, name), typeof total === "number" && typeof percent === "number" && /* @__PURE__ */ React76.createElement(
+  )), /* @__PURE__ */ React78.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-justify-center n-gap-1 n-min-w-0" }, name && /* @__PURE__ */ React78.createElement(Small, { color: "text", className: "n-truncate n-leading-none" }, name), typeof total === "number" && typeof percent === "number" && /* @__PURE__ */ React78.createElement(
     Small,
     {
       color: "textSubtle",
@@ -14501,7 +14746,7 @@ function FileUploadIndicator({
     " /",
     " ",
     formatByteSize(total)
-  ), typeof value === "number" && /* @__PURE__ */ React76.createElement(
+  ), typeof value === "number" && /* @__PURE__ */ React78.createElement(
     Progress,
     {
       value,
@@ -14509,7 +14754,7 @@ function FileUploadIndicator({
       className: "n-rounded-sm",
       colorScheme: "secondary"
     }
-  )), /* @__PURE__ */ React76.createElement("div", { className: "n-flex n-items-center n-justify-center n-gap-2" }, typeof value === "number" && /* @__PURE__ */ React76.createElement(
+  )), /* @__PURE__ */ React78.createElement("div", { className: "n-flex n-items-center n-justify-center n-gap-2" }, typeof value === "number" && /* @__PURE__ */ React78.createElement(
     Small,
     {
       color: "textSubtle",
@@ -14518,12 +14763,12 @@ function FileUploadIndicator({
     },
     value,
     "%"
-  ), done ? /* @__PURE__ */ React76.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__ */ React76.createElement(Checkmark, null)) : /* @__PURE__ */ React76.createElement(ActivityIndicator, { size: 15 })));
+  ), done ? /* @__PURE__ */ React78.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__ */ React78.createElement(Checkmark, null)) : /* @__PURE__ */ React78.createElement(ActivityIndicator, { size: 15 })));
 }
 function FileUploadList({
   uploads
 }) {
-  return /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement("div", { className: "n-flex n-items-center n-gap-2 n-py-2 n-px-4" }, /* @__PURE__ */ React76.createElement(Heading5, null, "Uploading ", uploads.length, " ", uploads.length === 1 ? "asset" : "assets")), /* @__PURE__ */ React76.createElement(Divider, null), /* @__PURE__ */ React76.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__ */ React76.createElement(
+  return /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement("div", { className: "n-flex n-items-center n-gap-2 n-py-2 n-px-4" }, /* @__PURE__ */ React78.createElement(Heading5, null, "Uploading ", uploads.length, " ", uploads.length === 1 ? "asset" : "assets")), /* @__PURE__ */ React78.createElement(Divider, null), /* @__PURE__ */ React78.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__ */ React78.createElement(
     FileUploadIndicator,
     {
       key: upload.id,
@@ -14536,7 +14781,7 @@ function FileUploadList({
 }
 
 // src/components/FloatingWindow.tsx
-import React77, { useCallback as useCallback30, useRef as useRef23, useState as useState29 } from "react";
+import React79, { useCallback as useCallback31, useRef as useRef23, useState as useState30 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -14629,7 +14874,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React77.createElement(React77.Fragment, null, /* @__PURE__ */ React77.createElement(Small, { className: "n-flex-1 n-font-medium n-text-text" }, title), toolbarContent, /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(Small, { className: "n-flex-1 n-font-medium n-text-text" }, title), toolbarContent, /* @__PURE__ */ React79.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -14656,15 +14901,15 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = useState29({ x: initialX, y: initialY });
-  const [size, setSize] = useState29({
+  const [position, setPosition] = useState30({ x: initialX, y: initialY });
+  const [size, setSize] = useState30({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = useState29(false);
-  const [isResizing, setIsResizing] = useState29(false);
-  const [dragOffset, setDragOffset] = useState29({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = useState29(null);
+  const [isDragging, setIsDragging] = useState30(false);
+  const [isResizing, setIsResizing] = useState30(false);
+  const [dragOffset, setDragOffset] = useState30({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = useState30(null);
   const wrapperRef = useRef23(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
@@ -14673,7 +14918,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = useCallback30((e) => {
+  const handleMouseDown = useCallback31((e) => {
     if (!wrapperRef.current) return;
     const rect = wrapperRef.current.getBoundingClientRect();
     setDragOffset({
@@ -14682,7 +14927,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = useCallback30(
+  const handleResizeStart = useCallback31(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -14691,7 +14936,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = useCallback30(
+  const handleMouseMove = useCallback31(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -14745,13 +14990,13 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = useCallback30((_e) => {
+  const handleMouseUp = useCallback31((_e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React77.useEffect(() => {
+  React79.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -14761,11 +15006,11 @@ var FloatingWindow = ({
   }, [handleMouseMove, handleMouseUp]);
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = useCallback30(() => {
+  const handleClose = useCallback31(() => {
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -14780,7 +15025,7 @@ var FloatingWindow = ({
         zIndex: cssVars.zIndex.menu
       }
     },
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React79.createElement(
       "div",
       {
         style: {
@@ -14791,9 +15036,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React77.createElement(Divider, null),
-    /* @__PURE__ */ React77.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React79.createElement(Divider, null),
+    /* @__PURE__ */ React79.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React79.createElement(
       "div",
       {
         key: direction,
@@ -14805,8 +15050,8 @@ var FloatingWindow = ({
 };
 
 // src/components/InspectorContainer.tsx
-import React78, { forwardRef as forwardRef25, memo as memo27 } from "react";
-var InspectorContainer = memo27(
+import React80, { forwardRef as forwardRef25, memo as memo26 } from "react";
+var InspectorContainer = memo26(
   forwardRef25(function InspectorContainer2({
     header,
     children,
@@ -14816,7 +15061,7 @@ var InspectorContainer = memo27(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ React78.createElement(
+    return /* @__PURE__ */ React80.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -14831,32 +15076,32 @@ var InspectorContainer = memo27(
         }
       },
       header,
-      children ? /* @__PURE__ */ React78.createElement(ScrollArea, null, /* @__PURE__ */ React78.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React78.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React78.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
+      children ? /* @__PURE__ */ React80.createElement(ScrollArea, null, /* @__PURE__ */ React80.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React80.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React80.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import * as React79 from "react";
-var LabeledElementView = React79.memo(function LabeledElementView2({
+import * as React81 from "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,
@@ -14869,7 +15114,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();
@@ -14931,17 +15176,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
-import React81, { memo as memo29, useMemo as useMemo32 } from "react";
+import React83, { memo as memo28, useMemo as useMemo33 } from "react";
 
 // src/hooks/useIndent.ts
-import React80 from "react";
-var IndentContext = React80.createContext(0);
+import React82 from "react";
+var IndentContext = React82.createContext(0);
 var useIndent = () => {
-  return React80.useContext(IndentContext);
+  return React82.useContext(IndentContext);
 };
 
 // src/components/LabeledField.tsx
@@ -14953,7 +15198,7 @@ var labeledFieldStyles = (labelType) => cx(
 var labelTypeInset = {
   type: "inset"
 };
-var LabeledField = memo29(function LabeledField2({
+var LabeledField = memo28(function LabeledField2({
   children,
   label,
   labelType: labelTypeProp,
@@ -14969,15 +15214,15 @@ var LabeledField = memo29(function LabeledField2({
   const labelWidth = labelWidthFromContext ?? minWidth;
   const labelTypeFromContext = useLabelType();
   const labelType = labelTypeProp ?? labelTypeFromContext;
-  const labeledFieldClasses = useMemo32(
+  const labeledFieldClasses = useMemo33(
     () => labeledFieldStyles(labelType),
     [labelType]
   );
-  const labelContextValue = useMemo32(
+  const labelContextValue = useMemo33(
     () => ({ fieldId, label }),
     [fieldId, label]
   );
-  const indentStyle = useMemo32(
+  const indentStyle = useMemo33(
     () => ({
       width: indentLevel * 8,
       flexBasis: indentLevel * 8,
@@ -14986,20 +15231,20 @@ var LabeledField = memo29(function LabeledField2({
     }),
     [indentLevel]
   );
-  const fieldStyle = useMemo32(
+  const fieldStyle = useMemo33(
     () => ({
       minWidth: `calc(100% - ${labelWidth + indentLevel * 8 + 6}px)`
     }),
     [labelWidth, indentLevel]
   );
-  const labelStyle = useMemo32(
+  const labelStyle = useMemo33(
     () => ({
       minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
       ...labelStyleProp
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ React81.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ React81.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ React81.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React81.createElement("div", { style: indentStyle }), /* @__PURE__ */ React81.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React83.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ React83.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ React83.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React83.createElement("div", { style: indentStyle }), /* @__PURE__ */ React83.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ React83.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -15008,13 +15253,13 @@ var LabeledField = memo29(function LabeledField2({
       ...props
     },
     label
-  ), labelType === "start" ? /* @__PURE__ */ React81.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
+  ), labelType === "start" ? /* @__PURE__ */ React83.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/ListMenu.tsx
 import { ArrowRightIcon } from "@noya-app/noya-icons";
 import { chunkBy as chunkBy2 } from "@noya-app/noya-utils";
-import React82 from "react";
+import React84 from "react";
 function getItemId(item) {
   if (item.type === "submenu") {
     return item.id;
@@ -15043,7 +15288,7 @@ function ListMenu({
     const regularItems = chunk.filter(
       (item) => isSubMenuItem(item) || isSelectableMenuItem(item)
     );
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React84.createElement(
       List,
       {
         key: regularItems.map(getItemId).join("-"),
@@ -15055,43 +15300,43 @@ function ListMenu({
         getName: (item) => item.title.toString(),
         selectedIds,
         renderRight,
-        renderThumbnail: ({ item }) => /* @__PURE__ */ React82.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__ */ React82.createElement(ArrowRightIcon, null),
+        renderThumbnail: ({ item }) => /* @__PURE__ */ React84.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__ */ React84.createElement(ArrowRightIcon, null),
         onClickItem: (itemId) => onSelect(itemId)
       }
     );
   });
   return withSeparatorElements(
     lists,
-    /* @__PURE__ */ React82.createElement(Divider, { overflow: 12, className: "n-my-1" })
+    /* @__PURE__ */ React84.createElement(Divider, { overflow: 12, className: "n-my-1" })
   );
 }
 
 // src/components/ListNavigator.tsx
-import React86 from "react";
+import React88 from "react";
 
 // src/components/Navigator.tsx
-import React85, {
+import React87, {
   Children as Children4,
   isValidElement as isValidElement5,
-  useCallback as useCallback32,
-  useMemo as useMemo34,
+  useCallback as useCallback33,
+  useMemo as useMemo35,
   useRef as useRef26,
-  useState as useState31
+  useState as useState32
 } from "react";
 
 // src/components/StackNavigator.tsx
 import { isDeepEqual as isDeepEqual4 } from "@noya-app/noya-utils";
-import React84, {
-  useCallback as useCallback31,
+import React86, {
+  useCallback as useCallback32,
   useEffect as useEffect22,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef25,
-  useState as useState30
+  useState as useState31
 } from "react";
 
 // src/components/BaseToolbar.tsx
-import React83 from "react";
+import React85 from "react";
 var toolbarStyle = {
   [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent"
@@ -15103,7 +15348,7 @@ function BaseToolbarContainer({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ React83.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React85.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ React85.createElement(
     "div",
     {
       className: cx(
@@ -15116,7 +15361,7 @@ function BaseToolbarContainer({
       }
     },
     children
-  ), showDivider && /* @__PURE__ */ React83.createElement(Divider, { variant: "strong" }));
+  ), showDivider && /* @__PURE__ */ React85.createElement(Divider, { variant: "strong" }));
 }
 function BaseToolbar({
   children,
@@ -15128,7 +15373,7 @@ function BaseToolbar({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React85.createElement(
     BaseToolbarContainer,
     {
       showDivider,
@@ -15136,25 +15381,25 @@ function BaseToolbar({
       innerClassName,
       enableAbsoluteBreakpoint
     },
-    logo && /* @__PURE__ */ React83.createElement(React83.Fragment, null, logo, /* @__PURE__ */ React83.createElement(DividerVertical, null)),
-    /* @__PURE__ */ React83.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ React83.createElement(Spacer.Horizontal, { size: 10 })),
-    children && /* @__PURE__ */ React83.createElement(
+    logo && /* @__PURE__ */ React85.createElement(React85.Fragment, null, logo, /* @__PURE__ */ React85.createElement(DividerVertical, null)),
+    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
+    left && /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })),
+    children && /* @__PURE__ */ React85.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__ */ React83.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
+      /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
     ),
-    /* @__PURE__ */ React83.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ React83.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ React83.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
-    /* @__PURE__ */ React83.createElement(Spacer.Horizontal, { size: 10 })
+    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
+    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })
   );
 }
 
 // src/components/StackNavigator.tsx
-var StackRenderContext = React84.createContext({});
+var StackRenderContext = React86.createContext({});
 function StackNavigator({
   items,
   onBack,
@@ -15169,14 +15414,14 @@ function StackNavigator({
 }) {
   const top = items.at(-1);
   const previousLengthRef = useRef25(items.length);
-  const direction = useMemo33(() => {
+  const direction = useMemo34(() => {
     const previous = previousLengthRef.current;
     previousLengthRef.current = items.length;
     return items.length >= previous ? "forward" : "back";
   }, [items.length]);
-  const [cardSizes, setCardSizes] = useState30({});
-  const [containerSize, setContainerSize] = useState30();
-  const handleSizeChange = useCallback31((key, size) => {
+  const [cardSizes, setCardSizes] = useState31({});
+  const [containerSize, setContainerSize] = useState31();
+  const handleSizeChange = useCallback32((key, size) => {
     setCardSizes((prev) => {
       if (isDeepEqual4(prev[key], size)) {
         return prev;
@@ -15216,7 +15461,7 @@ function StackNavigator({
       return changed ? next : prev;
     });
   }, [items]);
-  const animationStyles = useMemo33(() => {
+  const animationStyles = useMemo34(() => {
     return {
       entering: {
         opacity: 0,
@@ -15236,7 +15481,7 @@ function StackNavigator({
     };
   }, [direction]);
   const shouldAnimateSize = containerSize !== void 0;
-  const contentStyle = useMemo33(() => {
+  const contentStyle = useMemo34(() => {
     if (!containerSize) return void 0;
     const style3 = {
       // width: containerSize.width,
@@ -15249,8 +15494,8 @@ function StackNavigator({
     }
     return style3;
   }, [containerSize, shouldAnimateSize]);
-  const [animationStates, setAnimationStates] = useState30({});
-  const [renderContentCache, setRenderContentCache] = useState30(
+  const [animationStates, setAnimationStates] = useState31({});
+  const [renderContentCache, setRenderContentCache] = useState31(
     () => Object.fromEntries(items.map((item) => [item.key, item.renderContent]))
   );
   useEffect22(() => {
@@ -15271,7 +15516,7 @@ function StackNavigator({
       return changed ? next : prev;
     });
   }, [animationStates, items]);
-  const handleChildStateChange = useCallback31(
+  const handleChildStateChange = useCallback32(
     (key, state) => {
       if (!key) return;
       setAnimationStates((prev) => {
@@ -15314,7 +15559,7 @@ function StackNavigator({
     }
     return defaultRenderHeader(headerProps);
   };
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "div",
     {
       className: cx("n-flex n-flex-col", className),
@@ -15330,13 +15575,13 @@ function StackNavigator({
       }
     },
     showHeader && renderHeaderContent(),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React86.createElement(
       "div",
       {
         className: cx("n-relative n-overflow-hidden", contentClassName),
         style: contentStyle
       },
-      /* @__PURE__ */ React84.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ React84.createElement(
+      /* @__PURE__ */ React86.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ React86.createElement(
         AnimatePresence,
         {
           duration: 200,
@@ -15345,7 +15590,7 @@ function StackNavigator({
           mode: "wait",
           onChildStateChange: handleChildStateChange
         },
-        /* @__PURE__ */ React84.createElement(
+        /* @__PURE__ */ React86.createElement(
           StackNavigatorCard,
           {
             key: top.key,
@@ -15365,15 +15610,15 @@ var StackNavigatorCard = ({
   style: style2,
   className
 }) => {
-  const ref = React84.useRef(null);
+  const ref = React86.useRef(null);
   const size = useSize(ref);
-  const renderContext = React84.useContext(StackRenderContext);
+  const renderContext = React86.useContext(StackRenderContext);
   const renderContent = renderContext?.[item.key] ?? item.renderContent;
-  React84.useEffect(() => {
+  React86.useEffect(() => {
     if (!size || size.width === 0 || size.height === 0) return;
     onSizeChange(item.key, size);
   }, [item.key, onSizeChange, size]);
-  return /* @__PURE__ */ React84.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
+  return /* @__PURE__ */ React86.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
 };
 function defaultRenderHeader({
   showDivider,
@@ -15382,13 +15627,13 @@ function defaultRenderHeader({
   right,
   title
 }) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React86.createElement(
     BaseToolbar,
     {
       innerClassName: "n-px-1",
       showDivider,
       enableAbsoluteBreakpoint: false,
-      left: showBackButton && /* @__PURE__ */ React84.createElement(
+      left: showBackButton && /* @__PURE__ */ React86.createElement(
         Button,
         {
           className: "-n-mx-2",
@@ -15399,7 +15644,7 @@ function defaultRenderHeader({
       ),
       right
     },
-    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ React84.createElement(Body, null, title) : title
+    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ React86.createElement(Body, null, title) : title
   );
 }
 
@@ -15411,16 +15656,16 @@ var NavigatorScreen = Object.assign(
     [navigatorScreenIdentifier]: true
   }
 );
-var NavigatorScreenContext = React85.createContext(null);
+var NavigatorScreenContext = React87.createContext(null);
 function useNavigator() {
-  const context = React85.useContext(NavigatorScreenContext);
+  const context = React87.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigator must be used within a Navigator screen");
   }
   return context.navigation;
 }
 function useNavigatorRoute() {
-  const context = React85.useContext(NavigatorScreenContext);
+  const context = React87.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigatorRoute must be used within a Navigator screen");
   }
@@ -15448,7 +15693,7 @@ function NavigatorImpl({
   showHeader,
   renderHeader
 }) {
-  const screens = useMemo34(() => {
+  const screens = useMemo35(() => {
     const configs = [];
     Children4.forEach(children, (child) => {
       if (!isNavigatorScreenElement(child)) return;
@@ -15456,7 +15701,7 @@ function NavigatorImpl({
     });
     return configs;
   }, [children]);
-  const screenMap = useMemo34(() => {
+  const screenMap = useMemo35(() => {
     const map = /* @__PURE__ */ new Map();
     for (const screen of screens) {
       if (map.has(screen.name)) {
@@ -15469,7 +15714,7 @@ function NavigatorImpl({
     return map;
   }, [screens]);
   const keyRef = useRef26(0);
-  const createEntry = useCallback32(
+  const createEntry = useCallback33(
     (name, params) => ({
       key: `${String(name)}-${keyRef.current++}`,
       name,
@@ -15483,13 +15728,13 @@ function NavigatorImpl({
       `Navigator: initial route "${String(initialScreenName)}" is not registered as a screen.`
     );
   }
-  const [stack, setStack] = useState31(() => [
+  const [stack, setStack] = useState32(() => [
     createEntry(
       initialScreenName,
       initialRoute.params
     )
   ]);
-  const push = useCallback32(
+  const push = useCallback33(
     (...args) => {
       const [name, params] = args;
       const screen = screenMap.get(name);
@@ -15503,7 +15748,7 @@ function NavigatorImpl({
     },
     [createEntry, screenMap]
   );
-  const pop = useCallback32(() => {
+  const pop = useCallback33(() => {
     setStack((prev) => {
       if (prev.length <= 1) return prev;
       const nextStack = prev.slice(0, -1);
@@ -15519,7 +15764,7 @@ function NavigatorImpl({
       return updatedStack;
     });
   }, [createEntry]);
-  const replace = useCallback32(
+  const replace = useCallback33(
     (targetKey, name, params) => {
       const screen = screenMap.get(name);
       if (!screen) {
@@ -15545,7 +15790,7 @@ function NavigatorImpl({
     },
     [createEntry, screenMap]
   );
-  const items = useMemo34(() => {
+  const items = useMemo35(() => {
     return stack.flatMap((entry) => {
       const screen = screenMap.get(entry.name);
       if (!screen) return [];
@@ -15583,7 +15828,7 @@ function NavigatorImpl({
           onBack: headerProps.onBack
         }),
         renderContent: () => {
-          return /* @__PURE__ */ React85.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
+          return /* @__PURE__ */ React87.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
         }
       };
     });
@@ -15591,7 +15836,7 @@ function NavigatorImpl({
   const shouldShowHeader = evaluateOption(showHeader, {
     stack
   });
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React87.createElement(
     StackNavigator,
     {
       items,
@@ -15631,7 +15876,7 @@ function ListNavigator({
   renderHeader,
   selectedIds
 }) {
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React88.createElement(
     ListNavigatorInternal,
     {
       initialRoute: { name: "screen", params: { id: void 0 } },
@@ -15649,7 +15894,7 @@ function ListNavigator({
       className,
       style: style2
     },
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React88.createElement(
       ListNavigatorInternal.Screen,
       {
         name: "screen",
@@ -15664,7 +15909,7 @@ function ListNavigator({
         const nestedItem = items.find(
           (item) => isSubMenuItem(item) && item.id === route.params.id
         );
-        return /* @__PURE__ */ React86.createElement(
+        return /* @__PURE__ */ React88.createElement(
           ListMenu,
           {
             items: nestedItem?.items ?? items,
@@ -15689,18 +15934,19 @@ function ListNavigator({
 
 // src/components/Message.tsx
 import { uuid as uuid2 } from "@noya-app/noya-utils";
-import React87, { forwardRef as forwardRef26, memo as memo30, useMemo as useMemo35 } from "react";
-var Message = memo30(
+import React89, { forwardRef as forwardRef26, memo as memo29, useMemo as useMemo36 } from "react";
+var Message = memo29(
   forwardRef26(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = uuid2();
-    const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
-    const styles3 = useMemo35(
+    const resolvedUserId = user?.userId ?? user?.connectionId ?? randomId;
+    const userMessageBackgroundColor = colorFromString(resolvedUserId);
+    const styles3 = useMemo36(
       () => role === "user" ? {
         backgroundColor: userMessageBackgroundColor
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ React87.createElement(
+    return /* @__PURE__ */ React89.createElement(
       "div",
       {
         className: cx(
@@ -15708,24 +15954,24 @@ var Message = memo30(
           role === "user" ? "n-flex-row-reverse" : "n-flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ React87.createElement(
+      role === "assistant" ? /* @__PURE__ */ React89.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ React87.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ React87.createElement(
+        /* @__PURE__ */ React89.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ React89.createElement(
         Avatar,
         {
-          userId: !user ? randomId : user?.id,
+          userId: resolvedUserId,
           name: user?.name ?? "Anonymous",
           image: user?.image,
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ React87.createElement(
+      /* @__PURE__ */ React89.createElement(
         "div",
         {
           className: cx(
@@ -15745,9 +15991,9 @@ var Message = memo30(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 import { Link1Icon } from "@noya-app/noya-icons";
-import React88 from "react";
+import React90 from "react";
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ React88.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React90.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React90.createElement(
     "a",
     {
       href: url,
@@ -15755,15 +16001,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__ */ React88.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ React88.createElement(Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
-    /* @__PURE__ */ React88.createElement(DividerVertical, null),
-    /* @__PURE__ */ React88.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
+    /* @__PURE__ */ React90.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ React90.createElement(Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
+    /* @__PURE__ */ React90.createElement(DividerVertical, null),
+    /* @__PURE__ */ React90.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ React88.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
+  return /* @__PURE__ */ React90.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -15777,7 +16023,7 @@ function getPipelineResultLink(value) {
 }
 
 // src/components/ResizableContainer.tsx
-import React89, { useCallback as useCallback33, useRef as useRef27, useState as useState32 } from "react";
+import React91, { useCallback as useCallback34, useRef as useRef27, useState as useState33 } from "react";
 var ResizableContainer = ({
   children,
   minWidth,
@@ -15794,9 +16040,9 @@ var ResizableContainer = ({
   const resizeableRef = useRef27(null);
   const handleRef = useRef27(null);
   const clickCounter = useRef27(createClickCounter({ delay: 250 }));
-  const [width, setWidth] = useState32();
-  const [drag, setDrag] = useState32();
-  const handlePointerDown = useCallback33(
+  const [width, setWidth] = useState33();
+  const [drag, setDrag] = useState33();
+  const handlePointerDown = useCallback34(
     (event) => {
       const containerWidth = containerRef.current?.getBoundingClientRect().width;
       const resizeableWidth = resizeableRef.current?.getBoundingClientRect().width;
@@ -15814,7 +16060,7 @@ var ResizableContainer = ({
     },
     [maxWidth, minWidth]
   );
-  const handlePointerMove = useCallback33(
+  const handlePointerMove = useCallback34(
     (event) => {
       if (!drag) return;
       const delta = event.clientX - drag.startX;
@@ -15830,7 +16076,7 @@ var ResizableContainer = ({
     },
     [drag, onChangeWidth]
   );
-  const handlePointerUp = useCallback33(
+  const handlePointerUp = useCallback34(
     (event) => {
       setDrag(void 0);
       handleRef.current?.releasePointerCapture(event.pointerId);
@@ -15846,7 +16092,7 @@ var ResizableContainer = ({
     },
     [shouldResetWidth]
   );
-  return /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React91.createElement(
     "div",
     {
       ref: containerRef,
@@ -15854,7 +16100,7 @@ var ResizableContainer = ({
       style: { position: "relative", ...style2 },
       className
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React91.createElement(
       "div",
       {
         ref: resizeableRef,
@@ -15865,7 +16111,7 @@ var ResizableContainer = ({
         }
       },
       typeof children === "function" ? children({ width }) : children,
-      /* @__PURE__ */ React89.createElement(
+      /* @__PURE__ */ React91.createElement(
         "div",
         {
           ref: handleRef,
@@ -15890,7 +16136,7 @@ var ResizableContainer = ({
           onPointerUp: handlePointerUp,
           onPointerCancel: handlePointerUp
         },
-        /* @__PURE__ */ React89.createElement(
+        /* @__PURE__ */ React91.createElement(
           "div",
           {
             style: {
@@ -15908,7 +16154,7 @@ var ResizableContainer = ({
           }
         )
       ),
-      drag && /* @__PURE__ */ React89.createElement(
+      drag && /* @__PURE__ */ React91.createElement(
         "div",
         {
           style: {
@@ -15931,7 +16177,7 @@ function clamp5(value, min, max) {
 
 // src/components/RingProgress.tsx
 import { clamp as clamp6 } from "@noya-app/noya-utils";
-import * as React90 from "react";
+import * as React92 from "react";
 function RingProgress({
   value,
   dividedBy = 100,
@@ -15947,14 +16193,14 @@ function RingProgress({
   const safeDivisor = dividedBy > 0 ? dividedBy : 1;
   const clampedRaw = clamp6(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";
@@ -15967,7 +16213,7 @@ function RingProgress({
         return "n-stroke-text";
     }
   }, [colorScheme]);
-  const computedStroke = React90.useMemo(() => {
+  const computedStroke = React92.useMemo(() => {
     if (color) return color;
     switch (colorScheme) {
       case "primary":
@@ -15981,7 +16227,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),
@@ -15992,7 +16238,7 @@ function RingProgress({
       "aria-valuemax": safeDivisor,
       "aria-label": ariaLabel
     },
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React92.createElement(
       "svg",
       {
         width: size,
@@ -16000,7 +16246,7 @@ function RingProgress({
         viewBox: `0 0 ${size} ${size}`,
         style: { display: "block" }
       },
-      /* @__PURE__ */ React90.createElement(
+      /* @__PURE__ */ React92.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16011,7 +16257,7 @@ function RingProgress({
           strokeWidth: thickness
         }
       ),
-      /* @__PURE__ */ React90.createElement(
+      /* @__PURE__ */ React92.createElement(
         "circle",
         {
           cx: size / 2,
@@ -16035,49 +16281,13 @@ function RingProgress({
 }
 
 // src/components/ScrollableSidebar.tsx
-import React91 from "react";
+import React93 from "react";
 function ScrollableSidebar({ children }) {
-  return /* @__PURE__ */ React91.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ React91.createElement(ScrollArea, null, children));
-}
-
-// src/components/ScrollArea2.tsx
-import { ScrollArea as ScrollArea3 } from "@base-ui-components/react/scroll-area";
-import * as React92 from "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(ScrollArea3.Root, { className: cx("n-relative", className) }, /* @__PURE__ */ React92.createElement(
-    ScrollArea3.Viewport,
-    {
-      className: cx("n-h-full n-overscroll-contain", viewportClassName)
-    },
-    children
-  ), (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ React92.createElement(
-    ScrollArea3.Scrollbar,
-    {
-      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)
-    },
-    /* @__PURE__ */ React92.createElement(ScrollArea3.Thumb, { className: SCROLLBAR_THUMB_VERTICAL })
-  ), (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ React92.createElement(
-    ScrollArea3.Scrollbar,
-    {
-      orientation: "horizontal",
-      className: cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)
-    },
-    /* @__PURE__ */ React92.createElement(ScrollArea3.Thumb, { className: SCROLLBAR_THUMB_HORIZONTAL })
-  ), orientation === "both" && /* @__PURE__ */ React92.createElement(ScrollArea3.Corner, null));
+  return /* @__PURE__ */ React93.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ React93.createElement(ScrollArea, null, children));
 }
 
 // src/components/Section.tsx
-import React93, { memo as memo31, useMemo as useMemo37 } from "react";
+import React94, { memo as memo30, useMemo as useMemo38 } from "react";
 var titleIconStyle = {
   marginRight: "6px",
   alignSelf: "flex-start",
@@ -16098,14 +16308,14 @@ function SectionHeader({
   titleClassName,
   onClickTitle
 }) {
-  const headerStyle = useMemo37(
+  const headerStyle = useMemo38(
     () => ({
       minHeight: INPUT_HEIGHT,
       ...style2
     }),
     [style2]
   );
-  const titleElement = title ? /* @__PURE__ */ React93.createElement(
+  const titleElement = title ? /* @__PURE__ */ React94.createElement(
     InspectorPrimitives_exports.Title,
     {
       $textStyle: titleTextStyle,
@@ -16113,16 +16323,16 @@ function SectionHeader({
     },
     title
   ) : null;
-  return /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(
     InspectorPrimitives_exports.SectionHeader,
     {
       style: headerStyle,
       className
     },
-    titleIcon && /* @__PURE__ */ React93.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
-    titleElement && /* @__PURE__ */ React93.createElement(React93.Fragment, null, onClickTitle ? /* @__PURE__ */ React93.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
-    headerSeparator === "space" && /* @__PURE__ */ React93.createElement(Spacer.Horizontal, null),
-    headerSeparator === "dot" && /* @__PURE__ */ React93.createElement(
+    titleIcon && /* @__PURE__ */ React94.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
+    titleElement && /* @__PURE__ */ React94.createElement(React94.Fragment, null, onClickTitle ? /* @__PURE__ */ React94.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
+    headerSeparator === "space" && /* @__PURE__ */ React94.createElement(Spacer.Horizontal, null),
+    headerSeparator === "dot" && /* @__PURE__ */ React94.createElement(
       Text,
       {
         variant: titleTextStyle,
@@ -16148,7 +16358,7 @@ var SectionInternal = ({
   titleClassName,
   headerStyle: headerStyleProp
 }) => {
-  const style2 = useMemo37(
+  const style2 = useMemo38(
     () => ({
       display: "flex",
       flexDirection: "column",
@@ -16159,15 +16369,15 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = React93.Children.toArray(children).some((child) => !!child);
-  const headerStyle = useMemo37(
+  const hasChildren = React94.Children.toArray(children).some((child) => !!child);
+  const headerStyle = useMemo38(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
       ...headerStyleProp
     }),
     [hasChildren, headerStyleProp]
   );
-  return /* @__PURE__ */ React93.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React94.createElement(
     SectionHeader,
     {
       style: headerStyle,
@@ -16179,7 +16389,7 @@ var SectionInternal = ({
       right,
       headerSeparator
     }
-  ), /* @__PURE__ */ React93.createElement(IndentContext.Provider, { value: 0 }, children));
+  ), /* @__PURE__ */ React94.createElement(IndentContext.Provider, { value: 0 }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -16192,12 +16402,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ React93.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ React93.createElement(
+      title: /* @__PURE__ */ React94.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ React94.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -16208,21 +16418,21 @@ var ExpandableSection = ({
     expanded && props.children
   );
 };
-var Section = memo31(function InspectorSection({
+var Section = memo30(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ React93.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React93.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ React94.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React94.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 import { ToggleGroup as ToggleGroupPrimitive2 } from "radix-ui";
-import React94, {
+import React95, {
   createContext as createContext13,
   forwardRef as forwardRef27,
-  useCallback as useCallback34,
-  useContext as useContext15,
-  useMemo as useMemo38
+  useCallback as useCallback35,
+  useContext as useContext14,
+  useMemo as useMemo39
 } from "react";
 var SegmentedControlContext = createContext13({
   colorScheme: "primary"
@@ -16237,8 +16447,8 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme } = useContext15(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ React94.createElement(
+  const { colorScheme } = useContext14(SegmentedControlContext);
+  const itemElement = /* @__PURE__ */ React95.createElement(
     ToggleGroupPrimitive2.Item,
     {
       ref: forwardedRef,
@@ -16269,7 +16479,7 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
       ),
       ...props
     },
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.createElement(
       "span",
       {
         className: cx(
@@ -16281,7 +16491,7 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ React94.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React95.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -16294,16 +16504,16 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   className,
   style: style2
 }) {
-  const contextValue = useMemo38(() => ({ colorScheme }), [colorScheme]);
+  const contextValue = useMemo39(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
-  const handleValueChange = useCallback34(
+  const handleValueChange = useCallback35(
     (value2) => {
       if (!allowEmpty && !value2) return;
       onValueChange?.(value2);
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React94.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React95.createElement(
     ToggleGroupPrimitive2.Root,
     {
       id,
@@ -16322,13 +16532,13 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ React94.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ React95.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 import * as PopperPrimitive from "@radix-ui/react-popper";
-import React95, { memo as memo32, useMemo as useMemo39 } from "react";
+import React96, { memo as memo31, useMemo as useMemo40 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
@@ -16343,7 +16553,7 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbarContainer = memo32(
+var SelectionToolbarContainer = memo31(
   function SelectionToolbarContainer2({
     rect,
     children,
@@ -16357,15 +16567,15 @@ var SelectionToolbarContainer = memo32(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React95.useRef(null);
+    const containerRef = React96.useRef(null);
     const size = useSize(containerRef, "width");
-    const virtualRef = useMemo39(
+    const virtualRef = useMemo40(
       () => ({
         current: createVirtualElement(rect)
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ React95.createElement(
+    const popperContent = /* @__PURE__ */ React96.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16383,7 +16593,7 @@ var SelectionToolbarContainer = memo32(
           [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
-      /* @__PURE__ */ React95.createElement(
+      /* @__PURE__ */ React96.createElement(
         "div",
         {
           ref: containerRef,
@@ -16400,7 +16610,7 @@ var SelectionToolbarContainer = memo32(
         children
       )
     );
-    return /* @__PURE__ */ React95.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React95.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ React96.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React96.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
   }
 );
 
@@ -16411,9 +16621,9 @@ import {
   DropdownChevronIcon as DropdownChevronIcon3
 } from "@noya-app/noya-icons";
 import { Select } from "radix-ui";
-import React96, {
-  useMemo as useMemo40,
-  useState as useState33
+import React97, {
+  useMemo as useMemo41,
+  useState as useState34
 } from "react";
 var readOnlyStyle = {
   justifyContent: "flex-start",
@@ -16437,7 +16647,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelType = useLabelType();
-  return /* @__PURE__ */ React96.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React97.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React97.createElement(
     Button,
     {
       id,
@@ -16449,10 +16659,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ React96.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
-    label && labelType === "inset" && /* @__PURE__ */ React96.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React96.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ React96.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ React96.createElement(Select.Value, { placeholder })),
-    /* @__PURE__ */ React96.createElement(
+    icon && /* @__PURE__ */ React97.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
+    label && labelType === "inset" && /* @__PURE__ */ React97.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React97.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ React97.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ React97.createElement(Select.Value, { placeholder })),
+    /* @__PURE__ */ React97.createElement(
       DropdownChevronIcon3,
       {
         className: cx(
@@ -16489,7 +16699,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = useState33(open);
+  const [internalOpen, setInternalOpen] = useState34(open);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
@@ -16500,8 +16710,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     }
     setInternalOpen(open2);
   };
-  const readOnlyButton = useMemo40(
-    () => /* @__PURE__ */ React96.createElement(
+  const readOnlyButton = useMemo41(
+    () => /* @__PURE__ */ React97.createElement(
       Button,
       {
         id,
@@ -16511,11 +16721,11 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ React96.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ React97.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
-  const contentStyle = useMemo40(() => {
+  const contentStyle = useMemo41(() => {
     return {
       width: "var(--radix-select-trigger-width)",
       minWidth: "max-content",
@@ -16523,7 +16733,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ React96.createElement(
+  const content = /* @__PURE__ */ React97.createElement(
     Select.Root,
     {
       value,
@@ -16531,7 +16741,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -16546,7 +16756,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ React96.createElement(Select.Portal, null, /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(Select.Portal, null, /* @__PURE__ */ React97.createElement(
       Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16557,14 +16767,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ React96.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React96.createElement(
+      /* @__PURE__ */ React97.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React97.createElement(
         ChevronUpIcon,
         {
           className: cx("n-transition-transform n-duration-100")
         }
       )),
-      /* @__PURE__ */ React96.createElement(Select.Viewport, null, /* @__PURE__ */ React96.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ React96.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React96.createElement(ChevronDownIcon, null))
+      /* @__PURE__ */ React97.createElement(Select.Viewport, null, /* @__PURE__ */ React97.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ React97.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React97.createElement(ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -16572,12 +16782,12 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 import { Slider as RadixSlider } from "radix-ui";
-import React97, { memo as memo33, useCallback as useCallback35, useMemo as useMemo41 } from "react";
+import React98, { memo as memo32, useCallback as useCallback36, useMemo as useMemo42 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
-var Slider = memo33(function Slider2({
+var Slider = memo32(function Slider2({
   style: style2,
   className,
   value,
@@ -16591,21 +16801,21 @@ var Slider = memo33(function Slider2({
   readOnly = false,
   ...props
 }) {
-  const arrayValue = useMemo41(
+  const arrayValue = useMemo42(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const handleValueChange = useCallback35(
+  const handleValueChange = useCallback36(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
   const ratio = (arrayValue[0] - min) / (max - min);
-  return /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React98.createElement(
     RadixSlider.Root,
     {
       min,
@@ -16623,7 +16833,7 @@ var Slider = memo33(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React97.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ React98.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-l n-bg-slider-active-background",
@@ -16632,7 +16842,7 @@ var Slider = memo33(function Slider2({
           width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
         }
       }
-    ), /* @__PURE__ */ React97.createElement(
+    ), /* @__PURE__ */ React98.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-r n-bg-input-background",
@@ -16642,7 +16852,7 @@ var Slider = memo33(function Slider2({
         }
       }
     )),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
@@ -16660,28 +16870,28 @@ var Slider = memo33(function Slider2({
 });
 
 // src/components/sorting/createSharedDrag.tsx
-import * as React98 from "react";
+import * as React99 from "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
 import { clamp as clamp7 } from "@noya-app/noya-utils";
-import React99, { memo as memo34, useCallback as useCallback36, useMemo as useMemo42 } from "react";
-var Stepper = memo34(function Stepper2({
+import React100, { memo as memo33, useCallback as useCallback37, useMemo as useMemo43 } from "react";
+var Stepper = memo33(function Stepper2({
   style: style2,
   className,
   value: valueProp,
@@ -16698,17 +16908,17 @@ var Stepper = memo34(function Stepper2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const value = useMemo42(() => {
+  const value = useMemo43(() => {
     return clamp7(valueProp, min, max);
   }, [valueProp, min, max]);
-  const handleValueChange = useCallback36(
+  const handleValueChange = useCallback37(
     (value2) => {
       const newValue = clamp7(value2, min, max);
       onValueChange(newValue);
     },
     [onValueChange, min, max]
   );
-  return /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React100.createElement(
     "div",
     {
       id,
@@ -16720,7 +16930,7 @@ var Stepper = memo34(function Stepper2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React99.createElement(
+    /* @__PURE__ */ React100.createElement(
       InputField2.Root,
       {
         className: "n-flex-1",
@@ -16728,7 +16938,7 @@ var Stepper = memo34(function Stepper2({
         startClassName: "-n-ml-[3px]",
         endWidth: 17,
         endClassName: "-n-mr-[3px]",
-        start: /* @__PURE__ */ React99.createElement(
+        start: /* @__PURE__ */ React100.createElement(
           IconButton,
           {
             iconName: "MinusIcon",
@@ -16742,7 +16952,7 @@ var Stepper = memo34(function Stepper2({
             }
           }
         ),
-        end: /* @__PURE__ */ React99.createElement(
+        end: /* @__PURE__ */ React100.createElement(
           IconButton,
           {
             iconName: "PlusIcon",
@@ -16757,7 +16967,7 @@ var Stepper = memo34(function Stepper2({
           }
         )
       },
-      /* @__PURE__ */ React99.createElement(
+      /* @__PURE__ */ React100.createElement(
         InputField2.NumberInput,
         {
           value,
@@ -16772,7 +16982,7 @@ var Stepper = memo34(function Stepper2({
 
 // src/components/Switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import * as React100 from "react";
+import * as React101 from "react";
 var Switch = function Switch2({
   id,
   value,
@@ -16784,7 +16994,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -16803,12 +17013,12 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React100.createElement(SwitchPrimitive.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(SwitchPrimitive.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
-import * as React101 from "react";
+import * as React102 from "react";
 function Tabs({
   value,
   onValueChange,
@@ -16823,7 +17033,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",
@@ -16832,11 +17042,11 @@ 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
-import React102, { useCallback as useCallback37, useMemo as useMemo43, useState as useState34 } from "react";
+import React103, { useCallback as useCallback38, useMemo as useMemo44, useState as useState35 } from "react";
 function UserPicker({
   users,
   value,
@@ -16846,27 +17056,27 @@ function UserPicker({
   placeholder = "Search users...",
   ...rest
 }) {
-  const sortedUsers = useMemo43(() => {
+  const sortedUsers = useMemo44(() => {
     return [...users].sort(
       (a, b) => getUserDisplayName(a).localeCompare(getUserDisplayName(b), void 0, {
         sensitivity: "base"
       })
     );
   }, [users]);
-  const usersById = useMemo43(() => {
+  const usersById = useMemo44(() => {
     return new Map(sortedUsers.map((user) => [user.id, user]));
   }, [sortedUsers]);
-  const items = useMemo43(() => {
+  const items = useMemo44(() => {
     return sortedUsers.map(createUserMenuItem);
   }, [sortedUsers]);
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState34(defaultValue2);
+  const [uncontrolledValue, setUncontrolledValue] = useState35(defaultValue2);
   const selectedUserId = isControlled ? value : uncontrolledValue;
-  const selectedItem = useMemo43(() => {
+  const selectedItem = useMemo44(() => {
     if (!selectedUserId) return void 0;
     return items.find((item) => item.value === selectedUserId);
   }, [items, selectedUserId]);
-  const updateSelectedUserId = useCallback37(
+  const updateSelectedUserId = useCallback38(
     (userId) => {
       if (!isControlled) {
         setUncontrolledValue(userId);
@@ -16875,14 +17085,14 @@ function UserPicker({
     },
     [isControlled, onChangeUserId]
   );
-  const handleSelectItem = useCallback37(
+  const handleSelectItem = useCallback38(
     (item) => {
       updateSelectedUserId(item.value);
       onSelectUser?.(usersById.get(item.value));
     },
     [updateSelectedUserId, onSelectUser, usersById]
   );
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     Combobox,
     {
       ...rest,
@@ -16906,7 +17116,7 @@ function createUserMenuItem(user) {
   return {
     value: user.id,
     title,
-    icon: /* @__PURE__ */ React102.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ React102.createElement(
+    icon: /* @__PURE__ */ React103.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ React103.createElement(
       Avatar,
       {
         size: 15 + overflow * 2,
@@ -16925,15 +17135,15 @@ function createUserMenuItem(user) {
 }
 
 // src/components/UserPointer.tsx
-import React103, { memo as memo35, useMemo as useMemo44 } from "react";
-var UserPointerContainer = memo35(function UserPointerContainer2({
+import React104, { memo as memo34, useMemo as useMemo45 } from "react";
+var UserPointerContainer = memo34(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(
     "div",
     {
       style: {
@@ -16950,7 +17160,7 @@ var UserPointerContainer = memo35(function UserPointerContainer2({
     children
   );
 });
-var UserNameTag = memo35(function UserNameTag2({
+var UserNameTag = memo34(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
@@ -16959,7 +17169,7 @@ var UserNameTag = memo35(function UserNameTag2({
   size = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(
     "span",
     {
       className: cx(
@@ -16978,14 +17188,14 @@ var UserNameTag = memo35(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = memo35(function PointerIcon({
+var UserPointerIcon = memo34(function PointerIcon({
   size,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(
     "svg",
     {
       width: size,
@@ -17000,7 +17210,7 @@ var UserPointerIcon = memo35(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React103.createElement(
+    /* @__PURE__ */ React104.createElement(
       "polygon",
       {
         points,
@@ -17013,7 +17223,7 @@ var UserPointerIcon = memo35(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = memo35(function UserPointer2({
+var UserPointer = memo34(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -17026,22 +17236,22 @@ var UserPointer = memo35(function UserPointer2({
   labelSize = "medium",
   bordered = true
 }) {
-  const userBackgroundColor = useMemo44(
+  const userBackgroundColor = useMemo45(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = useMemo44(
+  const pointerOverlapStyle = useMemo45(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = useMemo44(
+  const nameTagOverlapStyle = useMemo45(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React104.createElement(
     UserPointerContainer,
     {
       point,
@@ -17049,14 +17259,14 @@ var UserPointer = memo35(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React103.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ React103.createElement(
+    name && /* @__PURE__ */ React104.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ React104.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React103.createElement(
+    ), /* @__PURE__ */ React104.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -17072,16 +17282,16 @@ var UserPointer = memo35(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React109, {
-  memo as memo37,
-  useCallback as useCallback39,
+import React110, {
+  memo as memo36,
+  useCallback as useCallback40,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo48,
+  useMemo as useMemo49,
   useRef as useRef30
 } from "react";
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React107, { useMemo as useMemo46, useRef as useRef28, useState as useState35 } from "react";
+import React108, { useMemo as useMemo47, useRef as useRef28, useState as useState36 } from "react";
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -17090,20 +17300,20 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/VerticalTabMenu.tsx
-import React106, { useMemo as useMemo45 } from "react";
+import React107, { useMemo as useMemo46 } from "react";
 
 // src/components/Toolbar.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React105, {
+import React106, {
   createContext as createContext15,
-  useContext as useContext16
+  useContext as useContext15
 } from "react";
 
 // src/components/ToolbarDrawer.tsx
-import React104, { forwardRef as forwardRef28, memo as memo36 } from "react";
-var ToolbarDrawer = memo36(
+import React105, { forwardRef as forwardRef28, memo as memo35 } from "react";
+var ToolbarDrawer = memo35(
   forwardRef28(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ React104.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React104.createElement(
+    return /* @__PURE__ */ React105.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React105.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",
@@ -17124,8 +17334,8 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = React105.useState(false);
-  return /* @__PURE__ */ React105.createElement(
+  const [open, setOpen] = React106.useState(false);
+  return /* @__PURE__ */ React106.createElement(
     DropdownMenu,
     {
       open,
@@ -17137,7 +17347,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ React105.createElement(
+    /* @__PURE__ */ React106.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -17153,7 +17363,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ React105.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React105.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React105.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ React106.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React106.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React106.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -17167,8 +17377,8 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     content: itemContent,
     checked
   } = item;
-  const [open, setOpen] = React105.useState(false);
-  const content = /* @__PURE__ */ React105.createElement("span", null, /* @__PURE__ */ React105.createElement(
+  const [open, setOpen] = React106.useState(false);
+  const content = /* @__PURE__ */ React106.createElement("span", null, /* @__PURE__ */ React106.createElement(
     Popover,
     {
       open,
@@ -17177,7 +17387,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ React105.createElement(
+      trigger: /* @__PURE__ */ React106.createElement(
         Button,
         {
           disabled,
@@ -17190,7 +17400,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
   ));
-  return tooltip && !open ? /* @__PURE__ */ React105.createElement(
+  return tooltip && !open ? /* @__PURE__ */ React106.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -17210,7 +17420,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ React105.createElement(
+  const content = /* @__PURE__ */ React106.createElement(
     Button,
     {
       as,
@@ -17227,7 +17437,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__ */ React105.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React105.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ React106.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React106.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -17239,17 +17449,17 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   displayFilter,
   dividerOverflow: dividerOverflowProp
 }) {
-  const { dividerOverflow: contextDividerOverflow } = useContext16(ToolbarMenuContext);
+  const { dividerOverflow: contextDividerOverflow } = useContext15(ToolbarMenuContext);
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ React105.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ React106.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ React105.createElement(ToolbarMenuPopover, { item, portalContainer });
+    return /* @__PURE__ */ React106.createElement(ToolbarMenuPopover, { item, portalContainer });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ React105.createElement(
+    return /* @__PURE__ */ React106.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -17261,7 +17471,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ React105.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ React106.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
@@ -17273,8 +17483,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   displayFilter = "iconAndText",
   dividerOverflow
 }) {
-  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(React106.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React106.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -17299,21 +17509,21 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = React105.useMemo(
+  const allMenuItems = React106.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   useKeyboardShortcuts3(
-    React105.useMemo(
+    React106.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React105.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React105.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React106.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React106.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -17321,7 +17531,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React105.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React105.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React106.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React106.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -17342,19 +17552,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = useMemo45(() => {
+  const style2 = useMemo46(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.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__ */ React106.createElement(
+    /* @__PURE__ */ React107.createElement(
       ToolbarMenu,
       {
         items,
@@ -17383,11 +17593,11 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   compactDrawerMenu
 }) {
   const portalContainer = useRef28(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState35({
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState36({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = useMemo46(
+  const allTabItems = useMemo47(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -17395,16 +17605,16 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = useMemo46(
+  const allSelectableTabItems = useMemo47(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
   const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = useMemo46(
+  const leftSelectableTabItems = useMemo47(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = useMemo46(
+  const rightSelectableTabItems = useMemo47(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
@@ -17441,14 +17651,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
   } : { activeValue: void 0, isSidebarCollapsed: true };
-  return /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && !useCompactInToolbar && /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17457,8 +17667,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         isSidebarCollapsed,
         onChange: (value) => handleSelectTab(value)
       }
-    ), /* @__PURE__ */ React107.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ React107.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__ */ React107.createElement(
+    ), /* @__PURE__ */ React108.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ React108.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__ */ React108.createElement(
       Button,
       {
         variant: "none",
@@ -17481,8 +17691,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       }
     )),
-    /* @__PURE__ */ React107.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ React107.createElement(
+    /* @__PURE__ */ React108.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ React108.createElement(
       Drawer,
       {
         ref: leftSidebarRef,
@@ -17503,7 +17713,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ React107.createElement(
+    rightPanel && /* @__PURE__ */ React108.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17529,7 +17739,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React108, { useCallback as useCallback38, useMemo as useMemo47, useRef as useRef29 } from "react";
+import React109, { useCallback as useCallback39, useMemo as useMemo48, useRef as useRef29 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -17703,7 +17913,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   const hasLeftPanel = !!leftPanel;
   const hasRightPanel = !!rightPanel;
   const hasCenterPanel = !!centerPanel;
-  const autoSaveId = useMemo47(() => {
+  const autoSaveId = useMemo48(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
   const layoutIds = getLayoutIds({
@@ -17730,7 +17940,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   });
   const [data, setData] = usePersistentStateObject(clientStorage, storageKey, {});
   const layoutGroup = data?.[propertyKey];
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo47(() => {
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo48(() => {
     return getLayoutCollapsedState({
       layoutGroup,
       propertyKey,
@@ -17739,7 +17949,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       hasRightPanel
     });
   }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
-  const handleLeftTabChange = useCallback38(
+  const handleLeftTabChange = useCallback39(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -17756,7 +17966,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = useCallback38(
+  const handleRightTabChange = useCallback39(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -17773,7 +17983,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  const handleLayoutChange = useCallback38(
+  const handleLayoutChange = useCallback39(
     (layout) => {
       setData((prev) => {
         const newData = {
@@ -17791,7 +18001,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__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -17802,7 +18012,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ React108.createElement(React108.Fragment, null, showLeftTabs && /* @__PURE__ */ React108.createElement(
+    leftPanel && /* @__PURE__ */ React109.createElement(React109.Fragment, null, showLeftTabs && /* @__PURE__ */ React109.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17811,7 +18021,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ React108.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React108.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ React109.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React109.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -17824,8 +18034,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React108.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ React108.createElement(
+    ), /* @__PURE__ */ React109.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ React109.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -17836,7 +18046,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React108.createElement(
+    rightPanel && /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React109.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17849,7 +18059,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React108.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React108.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React109.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React109.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -17871,11 +18081,11 @@ function renderPanelChildren(fn, props) {
 }
 
 // src/components/workspace/WorkspaceSideContext.tsx
-import { createContext as createContext16, useContext as useContext17 } from "react";
+import { createContext as createContext16, useContext as useContext16 } from "react";
 var WorkspaceSideContext = createContext16({});
 var WorkspaceSideProvider = WorkspaceSideContext.Provider;
 function useWorkspaceSide() {
-  return useContext17(WorkspaceSideContext);
+  return useContext16(WorkspaceSideContext);
 }
 
 // src/components/workspace/WorkspaceLayout.tsx
@@ -17938,7 +18148,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   theme,
   compactDrawerMenu
 }, forwardedRef) {
-  const containerRef = React109.useRef(null);
+  const containerRef = React110.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -18039,56 +18249,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 = useCallback39(() => {
+  const closeLeftSidebar = useCallback40(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = useCallback39(() => {
+  const closeRightSidebar = useCallback40(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = useMemo48(() => {
+  const leftChildrenProps = useMemo49(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = useMemo48(() => {
+  const rightChildrenProps = useMemo49(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = useMemo48(() => {
+  const leftSidebarProviderValue = useMemo49(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = useMemo48(() => {
+  const rightSidebarProviderValue = useMemo49(() => {
     return {
       closeSidebar: closeRightSidebar
     };
   }, [closeRightSidebar]);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React109.createElement(
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React110.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    /* @__PURE__ */ React109.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
+    /* @__PURE__ */ React110.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React109.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React110.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    /* @__PURE__ */ React109.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
+    /* @__PURE__ */ React110.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ React109.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = useMemo48(
+  const centerPanel = /* @__PURE__ */ React110.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = useMemo49(
     () => ({
       minSize: leftSidebarMinPercentage,
       maxSize: leftSidebarMaxPercentage,
@@ -18106,7 +18316,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = useMemo48(
+  const rightSidebarOptions = useMemo49(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -18126,7 +18336,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__ */ React109.createElement(
+  return /* @__PURE__ */ React110.createElement(
     "div",
     {
       ref: containerRef,
@@ -18139,7 +18349,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ React109.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React110.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React110.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -18162,12 +18372,12 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     ))
   );
 });
-var PanelInner = memo37(function PanelInner2({
+var PanelInner = memo36(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React110.createElement(
     "div",
     {
       style: style2,
@@ -18182,22 +18392,22 @@ function getFirstTabValue(items, defaultValue2) {
 }
 
 // src/contexts/ImageDataContext.tsx
-import * as React110 from "react";
-var ImageDataContext = React110.createContext(
+import * as React111 from "react";
+var ImageDataContext = React111.createContext(
   void 0
 );
-var ImageDataProvider = React110.memo(function ImageDataProvider2({
+var ImageDataProvider = React111.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React110.useMemo(
+  const contextValue = React111.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React110.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React111.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React110.useContext(ImageDataContext);
+  const value = React111.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -18214,9 +18424,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-import { useEffect as useEffect23, useState as useState36 } from "react";
+import { useEffect as useEffect23, useState as useState37 } from "react";
 function useTheme() {
-  const [theme, setTheme] = useState36("light");
+  const [theme, setTheme] = useState37("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -18351,11 +18561,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round as round2 } from "@noya-app/noya-utils";
-import * as React111 from "react";
+import * as React112 from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React111.memo(function DimensionInput2({
+var DimensionInput = React112.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -18365,15 +18575,15 @@ var DimensionInput = React111.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React111.useCallback(
+  const handleNudgeValue = React112.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React111.useCallback(
+  const handleSetValue = React112.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React111.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React111.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React111.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 : round2(value, 2),
@@ -18400,11 +18610,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-import React112, {
+import React113, {
   forwardRef as forwardRef29,
-  memo as memo40
+  memo as memo39
 } from "react";
-var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
+var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
   "div",
   {
     ref,
@@ -18412,8 +18622,8 @@ var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React112.createElement(
+var SectionHeader2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React113.createElement(
   "div",
   {
     ref,
@@ -18424,7 +18634,7 @@ var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
+var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
   "div",
   {
     ref,
@@ -18432,7 +18642,7 @@ var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React11
     ...props
   }
 ));
-var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
+var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
   "div",
   {
     ref,
@@ -18440,7 +18650,7 @@ var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
+var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
   "input",
   {
     ref,
@@ -18449,7 +18659,7 @@ var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React112.createElement(
+var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React113.createElement(
   "span",
   {
     ref,
@@ -18457,14 +18667,14 @@ var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React112.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React112.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var VerticalSeparator = () => /* @__PURE__ */ React113.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React113.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
 var RowLabel = forwardRef29(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement(
     "label",
     {
       ref,
@@ -18476,7 +18686,7 @@ var RowLabel = forwardRef29(function RowLabel2({
     }
   );
 });
-var LabeledRow = memo40(function LabeledRow2({
+var LabeledRow = memo39(function LabeledRow2({
   id,
   children,
   label,
@@ -18484,7 +18694,7 @@ var LabeledRow = memo40(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React112.createElement(Row, { id, className }, /* @__PURE__ */ React112.createElement(Column, null, /* @__PURE__ */ React112.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React112.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React112.createElement(Row, null, children)));
+  return /* @__PURE__ */ React113.createElement(Row, { id, className }, /* @__PURE__ */ React113.createElement(Column, null, /* @__PURE__ */ React113.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React113.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React113.createElement(Row, null, children)));
 });
 export {
   AIAssistantInput,
@@ -18625,6 +18835,7 @@ export {
   UserAvatar,
   UserPicker,
   UserPointer,
+  Virtualized2 as Virtualized,
   WorkspaceLayout,
   WorkspaceSideProvider,
   acceptsDrop,