@noya-app/noya-designsystem 0.1.65 → 0.1.67

package/dist/index.mjs

@@ -395,14 +395,14 @@ var require_grammarDiagnostics = __commonJS({
           rootNonTerminating.add(name);
         }
       }
-      const memo40 = /* @__PURE__ */ new Map();
+      const memo41 = /* @__PURE__ */ new Map();
       const collectCauses = (name, path) => {
-        if (memo40.has(name)) {
-          return memo40.get(name);
+        if (memo41.has(name)) {
+          return memo41.get(name);
         }
         if (rootNonTerminating.has(name)) {
           const direct = /* @__PURE__ */ new Set([name]);
-          memo40.set(name, direct);
+          memo41.set(name, direct);
           return direct;
         }
         if (path.has(name)) {
@@ -421,7 +421,7 @@ var require_grammarDiagnostics = __commonJS({
           }
         }
         path.delete(name);
-        memo40.set(name, result);
+        memo41.set(name, result);
         return result;
       };
       const dependencyIssues = [];
@@ -5311,6 +5311,7 @@ var DialogProvider = function DialogProvider2({
     [submit]
   );
   const inputRef = useRef11(null);
+  const confirmButtonRef = useRef11(null);
   const dialogRef = useRef11(null);
   const containsElement = useCallback14((element) => {
     if (!dialogRef.current) return false;
@@ -5349,14 +5350,23 @@ var DialogProvider = function DialogProvider2({
       ),
       onOpenAutoFocus: useCallback14(
         (event) => {
-          event.stopPropagation();
-          event.preventDefault();
-          if (!contents || contents.type !== "input") return;
-          inputRef.current?.focus();
-          inputRef.current?.setSelectionRange(
-            0,
-            inputRef.current.value.length
-          );
+          if (!contents) return;
+          if (contents.type === "input") {
+            event.stopPropagation();
+            event.preventDefault();
+            inputRef.current?.focus();
+            inputRef.current?.setSelectionRange(
+              0,
+              inputRef.current.value.length
+            );
+            return;
+          }
+          if (contents.type === "confirmation") {
+            event.stopPropagation();
+            event.preventDefault();
+            confirmButtonRef.current?.focus();
+            return;
+          }
         },
         [contents]
       )
@@ -5373,6 +5383,8 @@ var DialogProvider = function DialogProvider2({
     ), /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React21.createElement(
       Button,
       {
+        colorScheme: "primary",
+        ref: confirmButtonRef,
         onClick: () => {
           contents.resolve(true);
           setContents(void 0);
@@ -6615,9 +6627,28 @@ var AIAssistantLayout = forwardRef13(
   }
 );
 
+// src/components/Anchor.tsx
+import React38, { forwardRef as forwardRef14 } from "react";
+var Anchor = forwardRef14(function Anchor2({ className, active, children, as, ...props }, ref) {
+  const Component = as ?? "a";
+  return /* @__PURE__ */ React38.createElement(
+    Component,
+    {
+      ref,
+      className: cx(
+        "n-font-sans n-text-heading5 n-text-breadcrumb-text n-font-normal hover:n-text-breadcrumb-text-hover n-leading-[19px] n-rounded n-no-underline n-inline-flex n-items-center n-justify-center n-gap-2 hover:n-opacity-80 active:n-opacity-90 n-select-none",
+        active ? "n-text-text !n-underline n-decoration-text-decorative-light" : "n-text-text-muted",
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+
 // src/components/AnimatePresence.tsx
 import { isDeepEqual as isDeepEqual3 } from "@noya-app/noya-utils";
-import React38, {
+import React39, {
   Children as Children2,
   isValidElement as isValidElement2,
   useCallback as useCallback17,
@@ -6700,7 +6731,7 @@ var PresenceChild = ({
   if (animationState === "exited" && !isPresent) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement("div", { style: mergedAnimationStyles[animationState], className }, children);
+  return /* @__PURE__ */ React39.createElement("div", { style: mergedAnimationStyles[animationState], className }, children);
 };
 var AnimatePresence = ({
   children,
@@ -6776,7 +6807,7 @@ var AnimatePresence = ({
       return filtered;
     });
   }, []);
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, mountedChildren.map(({ child, isPresent, skipInitialAnimation: skipInitialAnimation2 }) => /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, mountedChildren.map(({ child, isPresent, skipInitialAnimation: skipInitialAnimation2 }) => /* @__PURE__ */ React39.createElement(
     PresenceChild,
     {
       key: child.key,
@@ -6795,7 +6826,7 @@ var AnimatePresence = ({
 
 // src/components/Banner.tsx
 import { ExclamationTriangleIcon, InfoCircledIcon } from "@noya-app/noya-icons";
-import React39 from "react";
+import React40 from "react";
 function Banner({
   children: label = "No items",
   className,
@@ -6814,7 +6845,7 @@ function Banner({
       categories: ["textAlign"]
     }
   );
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(
     "div",
     {
       className: cx(
@@ -6826,7 +6857,7 @@ function Banner({
       ),
       style: style2
     },
-    (variant === "info" || variant === "error") && /* @__PURE__ */ React39.createElement(
+    (variant === "info" || variant === "error") && /* @__PURE__ */ React40.createElement(
       Small,
       {
         className: cx(
@@ -6835,15 +6866,15 @@ function Banner({
         )
       },
       `\u200B`,
-      variant === "error" ? /* @__PURE__ */ React39.createElement(ExclamationTriangleIcon, { className: "n-text-heading5" }) : /* @__PURE__ */ React39.createElement(InfoCircledIcon, { className: "n-text-heading5" })
+      variant === "error" ? /* @__PURE__ */ React40.createElement(ExclamationTriangleIcon, { className: "n-text-heading5" }) : /* @__PURE__ */ React40.createElement(InfoCircledIcon, { className: "n-text-heading5" })
     ),
-    /* @__PURE__ */ React39.createElement(Small, { className: labelClassName, style: labelStyle }, label)
+    /* @__PURE__ */ React40.createElement(Small, { className: labelClassName, style: labelStyle }, label)
   );
 }
 
 // src/components/blocks/ImageBlockComponent.tsx
 import { ImageIcon } from "@noya-app/noya-icons";
-import React40, { forwardRef as forwardRef14 } from "react";
+import React41, { forwardRef as forwardRef15 } from "react";
 var placeholderClassName = "n-cursor-pointer n-flex n-items-center n-justify-center n-p-4 n-border n-border-dashed n-border-indigo-100 n-rounded-md n-bg-indigo-50";
 function decodeImageSrc(src) {
   if (!src) return void 0;
@@ -6853,8 +6884,8 @@ function decodeImageSrc(src) {
     return void 0;
   }
 }
-var ImageLoadingComponent = forwardRef14(function ImageLoadingComponent2(props, forwardedRef) {
-  return /* @__PURE__ */ React40.createElement(
+var ImageLoadingComponent = forwardRef15(function ImageLoadingComponent2(props, forwardedRef) {
+  return /* @__PURE__ */ React41.createElement(
     "span",
     {
       ...props,
@@ -6862,11 +6893,11 @@ var ImageLoadingComponent = forwardRef14(function ImageLoadingComponent2(props,
       contentEditable: false,
       className: cx(placeholderClassName, props.className)
     },
-    /* @__PURE__ */ React40.createElement(ActivityIndicator, null)
+    /* @__PURE__ */ React41.createElement(ActivityIndicator, null)
   );
 });
-var ImagePlaceholderComponent = forwardRef14(function ImagePlaceholderComponent2(props, forwardedRef) {
-  return /* @__PURE__ */ React40.createElement(
+var ImagePlaceholderComponent = forwardRef15(function ImagePlaceholderComponent2(props, forwardedRef) {
+  return /* @__PURE__ */ React41.createElement(
     "span",
     {
       ...props,
@@ -6874,11 +6905,11 @@ var ImagePlaceholderComponent = forwardRef14(function ImagePlaceholderComponent2
       contentEditable: false,
       className: cx(placeholderClassName, props.className)
     },
-    /* @__PURE__ */ React40.createElement(ImageIcon, { className: "n-w-[30px] n-h-[30px] n-text-indigo-900 n-pointer-events-none" })
+    /* @__PURE__ */ React41.createElement(ImageIcon, { className: "n-w-[30px] n-h-[30px] n-text-indigo-900 n-pointer-events-none" })
   );
 });
-var ImageErrorComponent = forwardRef14(function ImageErrorComponent2({ src, ...props }, forwardedRef) {
-  return /* @__PURE__ */ React40.createElement(
+var ImageErrorComponent = forwardRef15(function ImageErrorComponent2({ src, ...props }, forwardedRef) {
+  return /* @__PURE__ */ React41.createElement(
     "span",
     {
       ...props,
@@ -6886,16 +6917,16 @@ var ImageErrorComponent = forwardRef14(function ImageErrorComponent2({ src, ...p
       contentEditable: false,
       className: cx(placeholderClassName, props.className)
     },
-    /* @__PURE__ */ React40.createElement("span", { className: "n-text-cm-error n-font-mono n-text-sm" }, "Invalid image URL: ", src ?? "No URL provided")
+    /* @__PURE__ */ React41.createElement("span", { className: "n-text-cm-error n-font-mono n-text-sm" }, "Invalid image URL: ", src ?? "No URL provided")
   );
 });
-var ImageDisplayComponent = forwardRef14(function ImageDisplayComponent2({
+var ImageDisplayComponent = forwardRef15(function ImageDisplayComponent2({
   src,
   alt,
   title,
   ...props
 }, forwardedRef) {
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     "img",
     {
       ...props,
@@ -6915,7 +6946,7 @@ var ImageDisplayComponent = forwardRef14(function ImageDisplayComponent2({
     }
   );
 });
-var ImageBlockComponent_ = forwardRef14(function ImageBlockComponent({
+var ImageBlockComponent_ = forwardRef15(function ImageBlockComponent({
   src,
   alt,
   title,
@@ -6923,7 +6954,7 @@ var ImageBlockComponent_ = forwardRef14(function ImageBlockComponent({
   ...props
 }, forwardedRef) {
   if (imageState === "loading") {
-    return /* @__PURE__ */ React40.createElement(
+    return /* @__PURE__ */ React41.createElement(
       ImageLoadingComponent,
       {
         ...props,
@@ -6932,7 +6963,7 @@ var ImageBlockComponent_ = forwardRef14(function ImageBlockComponent({
     );
   }
   if (!src) {
-    return /* @__PURE__ */ React40.createElement(
+    return /* @__PURE__ */ React41.createElement(
       ImagePlaceholderComponent,
       {
         ...props,
@@ -6942,7 +6973,7 @@ var ImageBlockComponent_ = forwardRef14(function ImageBlockComponent({
   }
   const decodedSrc = decodeImageSrc(src.toString());
   if (!decodedSrc || imageState === "error") {
-    return /* @__PURE__ */ React40.createElement(
+    return /* @__PURE__ */ React41.createElement(
       ImageErrorComponent,
       {
         ...props,
@@ -6951,7 +6982,7 @@ var ImageBlockComponent_ = forwardRef14(function ImageBlockComponent({
       }
     );
   }
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     ImageDisplayComponent,
     {
       ...props,
@@ -6970,10 +7001,10 @@ var ImageBlockComponent2 = Object.assign(ImageBlockComponent_, {
 });
 
 // src/components/Breadcrumbs.tsx
-import { forwardRef as forwardRef15 } from "react";
-import React41 from "react";
-var BreadcrumbText = forwardRef15(function BreadcrumbText2({ children, className, onClick, ...props }, ref) {
-  return /* @__PURE__ */ React41.createElement(
+import { forwardRef as forwardRef16 } from "react";
+import React42 from "react";
+var BreadcrumbText = forwardRef16(function BreadcrumbText2({ children, className, onClick, ...props }, ref) {
+  return /* @__PURE__ */ React42.createElement(
     Text,
     {
       ...props,
@@ -6993,7 +7024,7 @@ var slashStyle = {
   margin: "0 3px"
 };
 var BreadcrumbSlash = () => {
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(
     "svg",
     {
       width: "7",
@@ -7004,7 +7035,7 @@ var BreadcrumbSlash = () => {
       opacity: 0.5,
       style: slashStyle
     },
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React42.createElement(
       "path",
       {
         d: "M1 16L6 1",
@@ -7018,16 +7049,16 @@ var BreadcrumbSlash = () => {
 };
 
 // src/components/Checkbox.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 var colorSchemeStyles2 = {
   normal: "n-text-text-subtle",
   primary: "n-text-primary",
   secondary: "n-text-secondary"
 };
-var Checkbox = React42.memo(
-  React42.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "primary", ...props }, ref) {
+var Checkbox = React43.memo(
+  React43.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "primary", ...props }, ref) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
-    return /* @__PURE__ */ React42.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         className: cx(
@@ -7037,7 +7068,7 @@ var Checkbox = React42.memo(
         ),
         style: style2
       },
-      /* @__PURE__ */ React42.createElement(
+      /* @__PURE__ */ React43.createElement(
         "input",
         {
           ref,
@@ -7048,7 +7079,7 @@ var Checkbox = React42.memo(
           id
         }
       ),
-      /* @__PURE__ */ React42.createElement(
+      /* @__PURE__ */ React43.createElement(
         "svg",
         {
           className: `n-absolute n-inset-0 n-h-input-height n-w-input-height n-pointer-events-none n-stroke-white n-opacity-0 peer-checked:n-opacity-100 n-z-label stroke-[1.3px]`,
@@ -7057,7 +7088,7 @@ var Checkbox = React42.memo(
           xmlns: "http://www.w3.org/2000/svg",
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React42.createElement(
+        /* @__PURE__ */ React43.createElement(
           "path",
           {
             d: "M3 6L4.5 7.5L8 4",
@@ -7073,10 +7104,10 @@ var Checkbox = React42.memo(
 
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React44, { forwardRef as forwardRef17, memo as memo15 } from "react";
+import React45, { forwardRef as forwardRef18, memo as memo15 } from "react";
 
 // src/hooks/useHover.ts
-import * as React43 from "react";
+import * as React44 from "react";
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -7106,13 +7137,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React43.useState(false);
-  const state = React43.useRef({
+  const [isHovered, setHovered] = React44.useState(false);
+  const state = React44.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React43.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React43.useMemo(
+  React44.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React44.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -7186,6 +7217,13 @@ var SHADOW_STYLES = {
   error: "n-shadow-[0_0_0_1px_var(--n-chip-error-shadow)_inset]",
   default: "n-shadow-[0_0_0_1px_var(--n-chip-default-shadow)_inset]"
 };
+var HOVER_SHADOW_STYLES = {
+  primary: "hover:n-shadow-[0_0_0_1px_var(--n-chip-primary-shadow-hover)_inset]",
+  secondary: "hover:n-shadow-[0_0_0_1px_var(--n-chip-secondary-shadow-hover)_inset]",
+  info: "hover:n-shadow-[0_0_0_1px_var(--n-chip-default-shadow-hover)_inset]",
+  error: "hover:n-shadow-[0_0_0_1px_var(--n-chip-error-shadow-hover)_inset]",
+  default: "hover:n-shadow-[0_0_0_1px_var(--n-chip-default-shadow-hover)_inset]"
+};
 var COLOR_STYLES = {
   primary: {
     text: "n-text-primary",
@@ -7233,7 +7271,7 @@ var ICON_SIZE_STYLES = {
   }
 };
 var Chip = memo15(
-  forwardRef17(function Chip2({
+  forwardRef18(function Chip2({
     colorScheme,
     children,
     deletable,
@@ -7258,7 +7296,12 @@ var Chip = memo15(
     const handleClick = !children && !deletable && addable ? onAdd : onClick;
     const isInteractive = !!handleClick || clickable === true;
     const colors = COLOR_STYLES[colorScheme ?? "default"];
-    const variantClasses = variant === "solid" ? `${colors.text} ${colors.bg}` : variant === "outlined" ? `${colors.text} n-bg-transparent ${SHADOW_STYLES[colorScheme ?? "default"]} hover:${colors.subtle} hover:n-shadow-none` : "";
+    const variantClasses = variant === "solid" ? cx(colors.text, colors.bg) : variant === "outlined" ? cx(
+      colors.text,
+      "n-bg-transparent",
+      SHADOW_STYLES[colorScheme ?? "default"],
+      HOVER_SHADOW_STYLES[colorScheme ?? "default"]
+    ) : "";
     const chipClasses = cx(
       BASE_STYLES,
       SIZE_STYLES[size],
@@ -7269,7 +7312,7 @@ var Chip = memo15(
       className
     );
     const color = colorScheme === "primary" ? cssVars.colors.primary : colorScheme === "secondary" ? cssVars.colors.secondary : cssVars.colors.text;
-    return /* @__PURE__ */ React44.createElement(
+    return /* @__PURE__ */ React45.createElement(
       "span",
       {
         ref: forwardedRef,
@@ -7279,7 +7322,7 @@ var Chip = memo15(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ React44.createElement(
+      addable && /* @__PURE__ */ React45.createElement(
         PlusIcon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size].add),
@@ -7291,7 +7334,7 @@ var Chip = memo15(
         }
       ),
       children,
-      deletable && /* @__PURE__ */ React44.createElement(
+      deletable && /* @__PURE__ */ React45.createElement(
         Cross1Icon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size].delete),
@@ -7308,10 +7351,10 @@ var Chip = memo15(
 );
 
 // src/components/Collection.tsx
-import React60 from "react";
+import React61 from "react";
 
 // src/components/Grid.tsx
-import React49, { useImperativeHandle as useImperativeHandle3, useRef as useRef16, useState as useState23 } from "react";
+import React50, { useImperativeHandle as useImperativeHandle3, useRef as useRef16, useState as useState23 } from "react";
 
 // src/utils/selection.ts
 function updateSelection(allIds, selectedIds, clickedId, event) {
@@ -7339,8 +7382,8 @@ function updateSelection(allIds, selectedIds, clickedId, event) {
 }
 
 // src/components/EditableText.tsx
-import React45, {
-  forwardRef as forwardRef18,
+import React46, {
+  forwardRef as forwardRef19,
   memo as memo16,
   useCallback as useCallback18,
   useEffect as useEffect17,
@@ -7348,9 +7391,9 @@ import React45, {
   useRef as useRef15,
   useState as useState21
 } from "react";
-var defaultRenderPreview = (props) => /* @__PURE__ */ React45.createElement(BreadcrumbText, { ...props });
+var defaultRenderPreview = (props) => /* @__PURE__ */ React46.createElement(BreadcrumbText, { ...props });
 var EditableText = memo16(
-  forwardRef18(function EditableText2({
+  forwardRef19(function EditableText2({
     value,
     onChange,
     onSubmit,
@@ -7414,18 +7457,22 @@ var EditableText = memo16(
     const displayValue = inputValue || placeholder || "";
     const preview = children({
       children: displayValue,
-      onClick: () => setFocused(true),
+      onClick: () => {
+        if (readOnly) return;
+        setFocused(true);
+      },
       ref: previewRef,
       tabIndex,
       onKeyDown: (e) => {
+        if (readOnly) return;
         if (e.key === "Enter" || e.key === " ") {
           setFocused(true);
         }
       },
       style: textStyle,
-      className: textClassName
+      className: cx(focused && "n-invisible", textClassName)
     });
-    const input = /* @__PURE__ */ React45.createElement("div", { className: "n-flex n-absolute n-inset-0 -mx-1.5 -n-my-1" }, /* @__PURE__ */ React45.createElement(InputField2.Root, { onFocusChange: setFocused }, /* @__PURE__ */ React45.createElement(
+    const input = /* @__PURE__ */ React46.createElement("div", { className: "n-flex n-absolute n-inset-0 -n-mx-1.5 -n-my-1" }, /* @__PURE__ */ React46.createElement(InputField2.Root, { onFocusChange: setFocused }, /* @__PURE__ */ React46.createElement(
       InputField2.Input,
       {
         ref: inputRef,
@@ -7465,27 +7512,46 @@ var EditableText = memo16(
         }
       }
     )));
-    return /* @__PURE__ */ React45.createElement("div", { className: cx("n-flex n-relative", className), style: style2 }, preview, focused && !readOnly && input);
+    return /* @__PURE__ */ React46.createElement("div", { className: cx("n-flex n-relative", className), style: style2 }, preview, focused && !readOnly && input);
   })
 );
 
 // src/components/GridView.tsx
-import React48, {
+import React49, {
   createContext as createContext9,
-  forwardRef as forwardRef19,
+  forwardRef as forwardRef20,
   memo as memo18,
   useCallback as useCallback21,
   useContext as useContext9,
   useMemo as useMemo18
 } from "react";
 
+// src/utils/detailLineClamp.ts
+var DETAIL_LINE_CLAMP_CLASS_MAP = {
+  1: "n-truncate",
+  2: "n-text-wrap n-line-clamp-2",
+  3: "n-text-wrap n-line-clamp-3",
+  4: "n-text-wrap n-line-clamp-4"
+};
+function normalizeDetailLineClamp(lineClamp) {
+  if (lineClamp == null) return void 0;
+  const normalized = Math.floor(lineClamp);
+  if (!Number.isFinite(normalized)) {
+    return void 0;
+  }
+  if (normalized < 1) return 1;
+  if (normalized > 4) return 4;
+  return normalized;
+}
+var DETAIL_LINE_CLAMP_CLASSES = DETAIL_LINE_CLAMP_CLASS_MAP;
+
 // src/components/ContextMenu.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import { ContextMenu as RadixContextMenu } from "radix-ui";
-import React46, { useCallback as useCallback19, useMemo as useMemo17 } from "react";
+import React47, { useCallback as useCallback19, useMemo as useMemo17 } from "react";
 var Components2 = {
   Separator: RadixContextMenu.Separator,
-  ItemText: React46.Fragment,
+  ItemText: React47.Fragment,
   Item: RadixContextMenu.Item,
   CheckboxItem: RadixContextMenu.CheckboxItem,
   ItemIndicator: RadixContextMenu.ItemIndicator,
@@ -7517,13 +7583,13 @@ function ContextMenuRoot({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React46.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ React46.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React46.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ React47.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React47.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React47.createElement(
     RadixContextMenu.Content,
     {
       ...portalScopeProps(portalScopeId),
       className: styles.contentStyle
     },
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(
       MenuViewport,
       {
         items,
@@ -7537,26 +7603,26 @@ var ContextMenu = memoGeneric(ContextMenuRoot);
 
 // src/components/ScrollArea.tsx
 import { ScrollArea as RadixScrollArea } from "radix-ui";
-import * as React47 from "react";
-var ScrollArea = React47.memo(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = React47.useState(null);
-  return /* @__PURE__ */ React47.createElement("div", { className: "n-flex-1 n-min-h-0" }, /* @__PURE__ */ React47.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React47.createElement(
+import * as React48 from "react";
+var ScrollArea = React48.memo(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = React48.useState(null);
+  return /* @__PURE__ */ React48.createElement("div", { className: "n-flex-1 n-min-h-0" }, /* @__PURE__ */ React48.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React48.createElement(
     RadixScrollArea.Viewport,
     {
       className: "n-w-full n-h-full [&>div]:n-block",
-      ref: React47.useCallback(
+      ref: React48.useCallback(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React47.createElement(
+  ), /* @__PURE__ */ React48.createElement(
     RadixScrollArea.Scrollbar,
     {
       orientation: "vertical",
       className: "n-scroll-component n-flex n-p-[3px] data-[orientation=vertical]:n-w-[10px]"
     },
-    /* @__PURE__ */ React47.createElement(RadixScrollArea.Thumb, { className: "n-scroll-component n-flex-1 n-rounded-[10px] n-bg-scrollbar" })
+    /* @__PURE__ */ React48.createElement(RadixScrollArea.Thumb, { className: "n-scroll-component n-flex-1 n-rounded-[10px] n-bg-scrollbar" })
   )));
 });
 
@@ -7565,7 +7631,7 @@ var ItemTitle = ({
   showBackground,
   children
 }) => {
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     "span",
     {
       className: cx(
@@ -7578,13 +7644,17 @@ var ItemTitle = ({
 };
 var ItemDescription = ({
   showBackground,
-  children
+  children,
+  lineClamp
 }) => {
-  return /* @__PURE__ */ React48.createElement(
+  const normalizedLineClamp = normalizeDetailLineClamp(lineClamp) ?? 1;
+  const clampClassName = DETAIL_LINE_CLAMP_CLASSES[normalizedLineClamp];
+  return /* @__PURE__ */ React49.createElement(
     "span",
     {
       className: cx(
-        "n-font-sans n-text-sm n-text-text-muted n-select-none n-truncate",
+        "n-font-sans n-text-sm n-text-text-muted n-select-none",
+        clampClassName,
         showBackground && "n-bg-sidebar-background n-n-border n-border-divider-subtle n-rounded-[2px] n-backdrop-blur-[4px] n-p-[2px_4px]"
       )
     },
@@ -7595,7 +7665,7 @@ var SectionTitle = ({
   last = false,
   children
 }) => {
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     "span",
     {
       className: cx(
@@ -7632,7 +7702,13 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { textPosition, bordered, disabled, alwaysShowSubtitles } = useContext9(GridViewContext);
+  const {
+    textPosition,
+    bordered,
+    disabled,
+    alwaysShowSubtitles,
+    descriptionLineClamp
+  } = useContext9(GridViewContext);
   const handleClick = useCallback21(
     (event) => {
       event.stopPropagation();
@@ -7659,7 +7735,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
   );
   const LinkComponent2 = useLinkComponent();
   const Component = typeof href === "string" ? LinkComponent2 : "div";
-  let element = /* @__PURE__ */ React48.createElement(
+  let element = /* @__PURE__ */ React49.createElement(
     Component,
     {
       ...props,
@@ -7683,7 +7759,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
       onDoubleClick,
       onContextMenu
     },
-    /* @__PURE__ */ React48.createElement(
+    /* @__PURE__ */ React49.createElement(
       "div",
       {
         className: cx(
@@ -7694,13 +7770,23 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React48.createElement(ItemTitle, null, title || " "), (alwaysShowSubtitles || subtitle) && /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React48.createElement(ItemDescription, null, subtitle || " "))),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React48.createElement("div", { className: "n-absolute n-inset-0 n-flex n-flex-col n-justify-end n-items-start n-p-1 n-pointer-events-none n-truncate n-gap-0.5" }, title && /* @__PURE__ */ React48.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React48.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    action && /* @__PURE__ */ React48.createElement("div", { className: "n-absolute n-top-[7px] n-right-[7px] n-flex n-flex-col n-justify-end n-items-start n-p-1 n-truncate n-gap-0.5" }, action),
-    loading && /* @__PURE__ */ React48.createElement("div", { className: "n-flex n-flex-col n-justify-start n-items-end n-p-1 n-pointer-events-none n-animate-shimmer n-absolute n-inset-0 n-bg-gradient-to-r n-from-white/0 n-via-[rgb(226,232,240)]/50 n-to-white/0 n-bg-[length:200%_100%]" }, /* @__PURE__ */ React48.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React49.createElement(ItemTitle, null, title || " "), (alwaysShowSubtitles || subtitle) && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React49.createElement(ItemDescription, { lineClamp: descriptionLineClamp }, subtitle || " "))),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React49.createElement(
+      "div",
+      {
+        className: cx(
+          "n-absolute n-inset-0 n-flex n-flex-col n-justify-end n-items-start n-p-1 n-pointer-events-none n-gap-0.5",
+          descriptionLineClamp === 1 && "n-truncate"
+        )
+      },
+      title && /* @__PURE__ */ React49.createElement(ItemTitle, { showBackground: true }, title),
+      subtitle && /* @__PURE__ */ React49.createElement(ItemDescription, { showBackground: true, lineClamp: descriptionLineClamp }, subtitle)
+    ),
+    action && /* @__PURE__ */ React49.createElement("div", { className: "n-absolute n-top-[7px] n-right-[7px] n-flex n-flex-col n-justify-end n-items-start n-p-1 n-truncate n-gap-0.5" }, action),
+    loading && /* @__PURE__ */ React49.createElement("div", { className: "n-flex n-flex-col n-justify-start n-items-end n-p-1 n-pointer-events-none n-animate-shimmer n-absolute n-inset-0 n-bg-gradient-to-r n-from-white/0 n-via-[rgb(226,232,240)]/50 n-to-white/0 n-bg-[length:200%_100%]" }, /* @__PURE__ */ React49.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ React48.createElement(
+    element = /* @__PURE__ */ React49.createElement(
       ContextMenu,
       {
         items: menuItems,
@@ -7711,10 +7797,10 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
     );
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ React48.createElement(
+    element = /* @__PURE__ */ React49.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React48.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React48.createElement(ItemTitle, null, title), /* @__PURE__ */ React48.createElement(ItemDescription, null, subtitle))
+        content: /* @__PURE__ */ React49.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React49.createElement(ItemTitle, null, title), /* @__PURE__ */ React49.createElement(ItemDescription, { lineClamp: descriptionLineClamp }, subtitle))
       },
       element
     );
@@ -7727,9 +7813,10 @@ var GridViewContext = createContext9({
   bordered: false,
   disabled: false,
   gap: 0,
-  alwaysShowSubtitles: false
+  alwaysShowSubtitles: false,
+  descriptionLineClamp: 1
 });
-var GridViewRoot = forwardRef19(function GridViewRoot2({
+var GridViewRoot = forwardRef20(function GridViewRoot2({
   minColumnWidth = "220px",
   gap = 20,
   children,
@@ -7741,6 +7828,7 @@ var GridViewRoot = forwardRef19(function GridViewRoot2({
   className,
   contentClassName,
   alwaysShowSubtitles = false,
+  descriptionLineClamp = 1,
   ...props
 }, forwardedRef) {
   const handleClick = useCallback21(
@@ -7751,6 +7839,7 @@ var GridViewRoot = forwardRef19(function GridViewRoot2({
     },
     [onClick]
   );
+  const normalizedDescriptionLineClamp = normalizeDetailLineClamp(descriptionLineClamp) ?? 1;
   const contextValue = useMemo18(
     () => ({
       minColumnWidth,
@@ -7758,13 +7847,22 @@ var GridViewRoot = forwardRef19(function GridViewRoot2({
       bordered,
       disabled,
       gap,
-      alwaysShowSubtitles
+      alwaysShowSubtitles,
+      descriptionLineClamp: normalizedDescriptionLineClamp
     }),
-    [bordered, disabled, gap, minColumnWidth, textPosition, alwaysShowSubtitles]
+    [
+      bordered,
+      disabled,
+      gap,
+      minColumnWidth,
+      textPosition,
+      alwaysShowSubtitles,
+      normalizedDescriptionLineClamp
+    ]
   );
   const mergedClassName = useMemo18(() => {
     const baseClassName = cx(
-      "n-flex n-flex-col n--mx-3",
+      "n-flex n-flex-col -n-mx-3",
       scrollable ? "n-basis-0 n-min-h-0" : "n-flex-none",
       className
     );
@@ -7772,8 +7870,8 @@ var GridViewRoot = forwardRef19(function GridViewRoot2({
       categories: ["flex"]
     });
   }, [className, scrollable]);
-  const content = /* @__PURE__ */ React48.createElement("div", { className: cx("n-p-3", contentClassName) }, children);
-  return /* @__PURE__ */ React48.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React48.createElement(
+  const content = /* @__PURE__ */ React49.createElement("div", { className: cx("n-p-3", contentClassName) }, children);
+  return /* @__PURE__ */ React49.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React49.createElement(
     "div",
     {
       onClick: handleClick,
@@ -7781,7 +7879,7 @@ var GridViewRoot = forwardRef19(function GridViewRoot2({
       ...props,
       ref: forwardedRef
     },
-    scrollable ? /* @__PURE__ */ React48.createElement(ScrollArea, null, content) : content
+    scrollable ? /* @__PURE__ */ React49.createElement(ScrollArea, null, content) : content
   ));
 });
 function GridViewSection({
@@ -7794,8 +7892,8 @@ function GridViewSection({
     gridTemplateColumns: `repeat(auto-fill, minmax(${minColumnWidth}, 1fr))`,
     gap: `${gap}px`
   };
-  const isEmpty = React48.Children.count(children) === 0;
-  return isEmpty && renderEmptyState ? renderEmptyState() : /* @__PURE__ */ React48.createElement(
+  const isEmpty = React49.Children.count(children) === 0;
+  return isEmpty && renderEmptyState ? renderEmptyState() : /* @__PURE__ */ React49.createElement(
     "div",
     {
       role: "presentation",
@@ -7807,9 +7905,9 @@ function GridViewSection({
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ React48.createElement("div", { className: "n-px-5" }, /* @__PURE__ */ React48.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ React48.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ React48.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ React49.createElement("div", { className: "n-px-5" }, /* @__PURE__ */ React49.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ React49.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ React49.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
@@ -7875,6 +7973,7 @@ var Grid = memoGeneric(
       renderAction,
       renderDetail,
       renderRight,
+      detailLineClamp,
       onSelectionChange,
       selectedIds = emptyArray,
       //   itemRoleDescription = "clickable item",
@@ -7930,7 +8029,7 @@ var Grid = memoGeneric(
       onFilesDrop
     );
     const { minColumnWidth, gap } = getGridSize(size);
-    return /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React50.createElement(
       GridView.Root,
       {
         role: "listbox",
@@ -7940,6 +8039,7 @@ var Grid = memoGeneric(
         scrollable: items.length > 0 && scrollable,
         contentClassName: cx(items.length === 0 && "n-flex n-flex-1"),
         gap,
+        descriptionLineClamp: detailLineClamp,
         className: cx(
           isDropTargetActive && "n-bg-selected-list-item-background",
           className
@@ -7947,7 +8047,7 @@ var Grid = memoGeneric(
         ...dropTargetProps,
         ref: fileDropTargetRef
       },
-      items.length > 0 ? /* @__PURE__ */ React49.createElement(GridView.Section, null, items.map((item) => {
+      items.length > 0 ? /* @__PURE__ */ React50.createElement(GridView.Section, null, items.map((item) => {
         const id = getId(item);
         const href = getHref?.(item);
         const isDropdownOpen = dropdownOpenId === id;
@@ -7967,7 +8067,7 @@ var Grid = memoGeneric(
             handleSelect(id);
           }
         };
-        const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React49.createElement(
+        const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React50.createElement(
           ActionMenu,
           {
             menuItems,
@@ -7976,7 +8076,7 @@ var Grid = memoGeneric(
             onOpenChange
           }
         ));
-        const subtitle = /* @__PURE__ */ React49.createElement(
+        const subtitle = /* @__PURE__ */ React50.createElement(
           "span",
           {
             className: cx(isSelected && "n-text-selected-list-item-text")
@@ -7984,7 +8084,7 @@ var Grid = memoGeneric(
           renderDetail?.(item, isSelected)
         );
         const right = renderRight?.(item, isSelected);
-        return /* @__PURE__ */ React49.createElement(
+        return /* @__PURE__ */ React50.createElement(
           GridView.Item,
           {
             key: id,
@@ -7998,7 +8098,7 @@ var Grid = memoGeneric(
             onHoverChange: (isHovering) => {
               setHoveredId(isHovering ? id : void 0);
             },
-            title: /* @__PURE__ */ React49.createElement("div", { className: "n-flex n-items-center n-gap-2 n-flex-row" }, /* @__PURE__ */ React49.createElement(
+            title: /* @__PURE__ */ React50.createElement("div", { className: "n-flex n-items-center n-gap-2 n-flex-row" }, /* @__PURE__ */ React50.createElement(
               EditableText,
               {
                 className: cx(
@@ -8019,7 +8119,7 @@ var Grid = memoGeneric(
                 },
                 textClassName: "n-bg-listview-editing-background n-max-h-input-height"
               },
-              (props2) => /* @__PURE__ */ React49.createElement(
+              (props2) => /* @__PURE__ */ React50.createElement(
                 "span",
                 {
                   ...props2,
@@ -8029,7 +8129,7 @@ var Grid = memoGeneric(
                   )
                 }
               )
-            ), right && /* @__PURE__ */ React49.createElement("div", { className: "n-flex-none" }, right), detailPosition === "end" && subtitle),
+            ), right && /* @__PURE__ */ React50.createElement("div", { className: "n-flex-none" }, right), detailPosition === "end" && subtitle),
             subtitle: detailPosition === "below" && subtitle,
             loading: false,
             selected: isSelected,
@@ -8056,7 +8156,7 @@ var Grid = memoGeneric(
               }
             }
           },
-          thumbnail && /* @__PURE__ */ React49.createElement(
+          thumbnail && /* @__PURE__ */ React50.createElement(
             "div",
             {
               className: cx(
@@ -8074,10 +8174,10 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-import React59, {
+import React60, {
   memo as memo22,
   useImperativeHandle as useImperativeHandle5,
-  useMemo as useMemo24,
+  useMemo as useMemo25,
   useRef as useRef20,
   useState as useState25
 } from "react";
@@ -8110,14 +8210,15 @@ var RenderItemContext = createContext10(
 RenderItemContext.displayName = "RenderItemContext";
 
 // src/components/listView/ListViewEditableRowTitle.tsx
-import React50, { memo as memo19, useLayoutEffect as useLayoutEffect5, useRef as useRef17 } from "react";
+import React51, { memo as memo19, useLayoutEffect as useLayoutEffect5, useRef as useRef17 } from "react";
 var ListViewEditableRowTitle = memo19(function ListViewEditableRowTitle2({
   value,
   onSubmitEditing,
   autoFocus,
   placeholder,
   className,
-  onKeyDown
+  onKeyDown,
+  selectBeforeDot = false
 }) {
   const inputRef = useRef17(null);
   useLayoutEffect5(() => {
@@ -8125,10 +8226,22 @@ var ListViewEditableRowTitle = memo19(function ListViewEditableRowTitle2({
     if (!element || !autoFocus) return;
     element.focus();
     setTimeout(() => {
+      if (selectBeforeDot) {
+        const index = value.lastIndexOf(".");
+        if (index > 0) {
+          element.select();
+          try {
+            element.setSelectionRange(0, index, "forward");
+          } catch {
+            element.select();
+          }
+          return;
+        }
+      }
       element.select();
     }, 1);
-  }, [autoFocus]);
-  return /* @__PURE__ */ React50.createElement(
+  }, [autoFocus, selectBeforeDot, value]);
+  return /* @__PURE__ */ React51.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -8147,14 +8260,14 @@ var ListViewEditableRowTitle = memo19(function ListViewEditableRowTitle2({
 
 // src/components/listView/ListViewRoot.tsx
 import { range } from "@noya-app/noya-utils";
-import React55, {
+import React56, {
   isValidElement as isValidElement3,
   memo as memo20,
   useCallback as useCallback24,
   useContext as useContext12,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo22,
+  useMemo as useMemo23,
   useRef as useRef19
 } from "react";
 import { WindowScroller } from "react-virtualized";
@@ -8168,13 +8281,14 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import * as React54 from "react";
+import * as React55 from "react";
+import { useMemo as useMemo22 } from "react";
 
 // src/components/sorting/DragRegistration.tsx
-import React51 from "react";
-var DragRegistrationContext = React51.createContext(null);
+import React52 from "react";
+var DragRegistrationContext = React52.createContext(null);
 function useDragRegistration(context) {
-  const value = React51.useContext(context);
+  const value = React52.useContext(context);
   if (!value) {
     throw new Error(
       "useDragRegistration must be used within a DragRegistrationProvider"
@@ -8183,11 +8297,11 @@ function useDragRegistration(context) {
   return value;
 }
 function useDragRegistrationManager() {
-  const [registeredLists, setRegisteredLists] = React51.useState(/* @__PURE__ */ new Map());
-  const registerList = React51.useCallback((list) => {
+  const [registeredLists, setRegisteredLists] = React52.useState(/* @__PURE__ */ new Map());
+  const registerList = React52.useCallback((list) => {
     setRegisteredLists((prev) => new Map(prev).set(list.id, list));
   }, []);
-  const unregisterList = React51.useCallback((listId) => {
+  const unregisterList = React52.useCallback((listId) => {
     setRegisteredLists((prev) => {
       const newMap = new Map(prev);
       newMap.delete(listId);
@@ -8196,15 +8310,15 @@ function useDragRegistrationManager() {
   }, []);
   return { registerList, unregisterList, registeredLists };
 }
-var ActiveDragContext = React51.createContext(null);
+var ActiveDragContext = React52.createContext(null);
 function useActiveDrag(context) {
-  const value = React51.useContext(context);
+  const value = React52.useContext(context);
   if (!value) {
     throw new Error("useActiveDrag must be used within a ActiveDragProvider");
   }
   return value;
 }
-var AnyDragContext = React51.createContext(false);
+var AnyDragContext = React52.createContext(false);
 
 // src/components/sorting/SharedDragProvider.tsx
 import {
@@ -8221,7 +8335,7 @@ import {
   unionRects
 } from "@noya-app/noya-geometry";
 import { windowsOf } from "@noya-app/noya-utils";
-import * as React52 from "react";
+import * as React53 from "react";
 import { useMemo as useMemo20 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 function SharedDragProvider({
@@ -8242,22 +8356,22 @@ function SharedDragProvider({
     })
   );
   const mounted = useMounted();
-  const [dragState, setDragState] = React52.useState({
+  const [dragState, setDragState] = React53.useState({
     source: null,
     target: null,
     indicator: null
   });
-  const stableOnMoveItem = React52.useRef(onMoveItem);
+  const stableOnMoveItem = React53.useRef(onMoveItem);
   useIsomorphicLayoutEffect(() => {
     stableOnMoveItem.current = onMoveItem;
   }, [onMoveItem]);
-  const stableAcceptsDrop = React52.useRef(acceptsDrop2);
+  const stableAcceptsDrop = React53.useRef(acceptsDrop2);
   useIsomorphicLayoutEffect(() => {
     stableAcceptsDrop.current = acceptsDrop2;
   }, [acceptsDrop2]);
   const { registerList, unregisterList, registeredLists } = useDragRegistrationManager();
-  const activatorEventRef = React52.useRef(null);
-  const handleDragStart = React52.useCallback(
+  const activatorEventRef = React53.useRef(null);
+  const handleDragStart = React53.useCallback(
     (event) => {
       activatorEventRef.current = event.activatorEvent;
       for (const [listId, list] of registeredLists) {
@@ -8279,7 +8393,7 @@ function SharedDragProvider({
     },
     [registeredLists]
   );
-  const handleDragMove = React52.useCallback(
+  const handleDragMove = React53.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -8303,7 +8417,7 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source]
   );
-  const handleDragEnd = React52.useCallback(
+  const handleDragEnd = React53.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -8347,7 +8461,7 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source, stableOnMoveItem]
   );
-  const contextValue = React52.useMemo(
+  const contextValue = React53.useMemo(
     () => ({
       registerList,
       unregisterList
@@ -8355,19 +8469,19 @@ function SharedDragProvider({
     [registerList, unregisterList]
   );
   const activeList = dragState.source ? registeredLists.get(dragState.source.listId) : null;
-  const activeDragContextValue = React52.useMemo(
+  const activeDragContextValue = React53.useMemo(
     () => dragState,
     [dragState]
   );
   const collisionDetection = useMemo20(() => {
     return getItemFirstCollisionDetection(registeredLists, itemHitSlop);
   }, [registeredLists, itemHitSlop]);
-  return /* @__PURE__ */ React52.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React52.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React53.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React53.createElement(
     sharedDragProps.activeDragContext.Provider,
     {
       value: activeDragContextValue
     },
-    /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React53.createElement(
       DndContext,
       {
         sensors,
@@ -8378,26 +8492,26 @@ function SharedDragProvider({
       },
       children,
       mounted && activeList?.renderOverlay && dragState.source && createPortal2(
-        /* @__PURE__ */ React52.createElement(DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
+        /* @__PURE__ */ React53.createElement(DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
         document.body
       )
     )
   )));
 }
 function useMounted() {
-  const [mounted, setMounted] = React52.useState(false);
-  React52.useEffect(() => {
+  const [mounted, setMounted] = React53.useState(false);
+  React53.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function withDragProvider(Component) {
   return function WithDragProvider(props) {
-    const anyDragContext = React52.useContext(AnyDragContext);
+    const anyDragContext = React53.useContext(AnyDragContext);
     if (!anyDragContext) {
-      return /* @__PURE__ */ React52.createElement(SharedDragProvider, null, /* @__PURE__ */ React52.createElement(Component, { ...props }));
+      return /* @__PURE__ */ React53.createElement(SharedDragProvider, null, /* @__PURE__ */ React53.createElement(Component, { ...props }));
     }
-    return /* @__PURE__ */ React52.createElement(Component, { ...props });
+    return /* @__PURE__ */ React53.createElement(Component, { ...props });
   };
 }
 var getItemFirstCollisionDetection = (registeredLists, itemHitSlop) => (parameters) => {
@@ -8574,7 +8688,7 @@ function findDropTarget({
 }
 
 // src/components/sorting/sorting.ts
-import * as React53 from "react";
+import * as React54 from "react";
 var normalizeListTargetIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
@@ -8590,7 +8704,7 @@ var defaultAcceptsDrop = ({
   }
   return true;
 };
-var SortableItemContext = React53.createContext({
+var SortableItemContext = React54.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -8656,7 +8770,7 @@ function parseDragItemKey(key) {
 }
 
 // src/components/sorting/Sortable.tsx
-var SortableItemContext2 = React54.createContext({
+var SortableItemContext2 = React55.createContext({
   acceptsDrop: defaultAcceptsDrop,
   listId: "",
   getDropTargetParentIndex: void 0,
@@ -8669,7 +8783,7 @@ function useSortableDropIndicator({
   acceptsDrop: acceptsDrop2,
   getDropTargetParentIndex
 }) {
-  const { activeDragContext } = React54.useContext(SortableItemContext2);
+  const { activeDragContext } = React55.useContext(SortableItemContext2);
   const activeDrag = useActiveDrag(activeDragContext);
   const { source, target } = activeDrag;
   if (!source || !target) return;
@@ -8700,7 +8814,7 @@ function SortableItem({
   disabled,
   children
 }) {
-  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React54.useContext(SortableItemContext2);
+  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React55.useContext(SortableItemContext2);
   const dragItemKey = createDragItemKey(listId, id);
   const {
     attributes,
@@ -8715,7 +8829,7 @@ function SortableItem({
     id: dragItemKey,
     disabled
   });
-  const ref = React54.useCallback(
+  const ref = React55.useCallback(
     (node) => setNodeRef(node),
     [setNodeRef]
   );
@@ -8726,21 +8840,33 @@ function SortableItem({
     acceptsDrop: acceptsDrop2,
     getDropTargetParentIndex
   });
-  return children(
-    {
+  const props = useMemo22(
+    () => ({
       ref,
       ...attributes,
       ...listeners,
       style: { opacity: isDragging ? 0.5 : 1 }
-    },
-    {
+    }),
+    [ref, attributes, listeners, isDragging]
+  );
+  const extraProps = useMemo22(
+    () => ({
       isDragging,
+      isOverlay: false,
       setActivatorNodeRef,
       setDraggableNodeRef,
       setDroppableNodeRef,
       relativeDropPosition
-    }
+    }),
+    [
+      isDragging,
+      setActivatorNodeRef,
+      setDraggableNodeRef,
+      setDroppableNodeRef,
+      relativeDropPosition
+    ]
   );
+  return children(props, extraProps);
 }
 function SortableRoot_({
   id: idProp,
@@ -8757,9 +8883,9 @@ function SortableRoot_({
   containerRef,
   itemHitSlop
 }) {
-  const defaultId = React54.useId();
+  const defaultId = React55.useId();
   const id = idProp ?? defaultId;
-  const keys = React54.useMemo(() => {
+  const keys = React55.useMemo(() => {
     return keysProp.map((key) => createDragItemKey(id, key));
   }, [keysProp, id]);
   const { registerList, unregisterList } = useDragRegistration(
@@ -8768,7 +8894,7 @@ function SortableRoot_({
   const { setNodeRef: setDroppableRef } = useDroppable({
     id
   });
-  React54.useEffect(() => {
+  React55.useEffect(() => {
     const listConfig = {
       id,
       keys,
@@ -8822,7 +8948,7 @@ function SortableRoot_({
     keys,
     itemHitSlop
   ]);
-  const contextValue = React54.useMemo(
+  const contextValue = React55.useMemo(
     () => ({
       keys,
       acceptsDrop: acceptsDrop2,
@@ -8833,17 +8959,17 @@ function SortableRoot_({
     [keys, acceptsDrop2, id, getDropTargetParentIndex, sharedDragProps]
   );
   const activeDragContext = sharedDragProps?.activeDragContext ?? ActiveDragContext;
-  const dragState = React54.useContext(activeDragContext);
+  const dragState = React55.useContext(activeDragContext);
   const isDragging = !!dragState?.source;
-  React54.useEffect(() => {
+  React55.useEffect(() => {
     onIsDraggingChange?.(isDragging);
   }, [isDragging, onIsDraggingChange]);
-  React54.useEffect(() => {
+  React55.useEffect(() => {
     if (containerRef) {
       setDroppableRef(containerRef.current);
     }
   });
-  return /* @__PURE__ */ React54.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React55.createElement(
     SortableContext,
     {
       items: keys,
@@ -8860,11 +8986,11 @@ var Sortable_ = function Sortable_2({
   renderItem,
   ...rest
 }) {
-  const keys = React54.useMemo(
+  const keys = React55.useMemo(
     () => items.map(keyExtractor),
     [items, keyExtractor]
   );
-  const renderOverlay = React54.useCallback(
+  const renderOverlay = React55.useCallback(
     (index) => {
       return renderItem(
         items[index],
@@ -8894,18 +9020,15 @@ var Sortable_ = function Sortable_2({
     },
     [renderItem, items]
   );
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     SortableRoot,
     {
       ...rest,
       keys,
       renderOverlay: shouldRenderOverlay ? renderOverlay : void 0
     },
-    keys.map((key, index) => /* @__PURE__ */ React54.createElement(SortableItem, { key, id: key }, (props, extraProps) => {
-      return renderItem(items[index], props, {
-        isOverlay: false,
-        ...extraProps
-      });
+    keys.map((key, index) => /* @__PURE__ */ React55.createElement(SortableItem, { key, id: key }, (props, extraProps) => {
+      return renderItem(items[index], props, extraProps);
     }))
   );
 };
@@ -8916,13 +9039,14 @@ var Sortable = Object.assign(Sortable_, {
 
 // src/components/listView/ListViewRoot.tsx
 var ROW_HEIGHT = 31;
-var SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
+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__ */ React55.createElement("div", { key: index, style: style2 }, renderItem(index));
+  return /* @__PURE__ */ React56.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
   size,
@@ -8941,11 +9065,12 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
   useLayoutEffect6(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
-    // When items change, we need to re-render the virtualized list,
-    // since it doesn't currently support row height changes
-    items
+    // When items or the height resolver change, re-render the virtualized list
+    // since VariableSizeList caches sizes per index.
+    items,
+    getItemHeight
   ]);
-  const listStyle = useMemo22(
+  const listStyle = useMemo23(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -8953,18 +9078,18 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React55.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React56.createElement(
     WindowScroller,
     {
       scrollElement,
-      style: useMemo22(() => ({ flex: "1 1 auto" }), [])
+      style: useMemo23(() => ({ flex: "1 1 auto" }), [])
     },
     useCallback24(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React55.createElement("div", { ref: registerChild }, /* @__PURE__ */ React55.createElement(
+      }) => /* @__PURE__ */ React56.createElement("div", { ref: registerChild }, /* @__PURE__ */ React56.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -9032,7 +9157,8 @@ var ListViewRoot = memoGeneric(
     getDropTargetParentIndex,
     sharedDragProps,
     sortableId,
-    itemHeight
+    itemHeight,
+    getItemHeightForItem
   }, forwardedRef) {
     const handleClick = useCallback24(
       (event) => {
@@ -9048,7 +9174,7 @@ var ListViewRoot = memoGeneric(
       (index) => renderItem(data[index], index, { isDragOverlay: false }),
       [data, renderItem]
     );
-    const defaultContextValue = useMemo22(
+    const defaultContextValue = useMemo23(
       () => ({
         marginType: "none",
         selectedPosition: "only",
@@ -9058,8 +9184,14 @@ var ListViewRoot = memoGeneric(
     );
     const getItemContextValue = useCallback24(
       (i) => {
-        if (variant === "bare" || variant === "normal")
-          return defaultContextValue;
+        if (variant === "bare" || variant === "normal") {
+          const current2 = renderChild(i);
+          if (!isValidElement3(current2)) return defaultContextValue;
+          return {
+            ...defaultContextValue,
+            isSectionHeader: !!current2.props.isSectionHeader
+          };
+        }
         const current = renderChild(i);
         if (!isValidElement3(current)) return;
         const prevChild = i - 1 >= 0 && renderChild(i - 1);
@@ -9098,14 +9230,14 @@ var ListViewRoot = memoGeneric(
       },
       [variant, defaultContextValue, renderChild, data.length]
     );
-    const draggingContextOverlayValue = useMemo22(
+    const draggingContextOverlayValue = useMemo23(
       () => ({
         isDragOverlay: true
       }),
       []
     );
     const renderOverlay = useCallback24(
-      (index) => /* @__PURE__ */ React55.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React55.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
+      (index) => /* @__PURE__ */ React56.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React56.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
       [draggingContextOverlayValue, renderItem, data]
     );
     const renderWrappedChild = useCallback24(
@@ -9113,12 +9245,12 @@ var ListViewRoot = memoGeneric(
         const contextValue2 = getItemContextValue(index);
         const current = renderChild(index);
         if (!contextValue2 || !isValidElement3(current)) return null;
-        return /* @__PURE__ */ React55.createElement(ListRowContext.Provider, { key: current.key, value: contextValue2 }, current);
+        return /* @__PURE__ */ React56.createElement(ListRowContext.Provider, { key: current.key, value: contextValue2 }, current);
       },
       [getItemContextValue, renderChild]
     );
-    const ids = useMemo22(() => data.map(keyExtractor), [keyExtractor, data]);
-    const withSortable = (children) => sortable ? /* @__PURE__ */ React55.createElement(
+    const ids = useMemo23(() => data.map(keyExtractor), [keyExtractor, data]);
+    const withSortable = (children) => sortable ? /* @__PURE__ */ React56.createElement(
       Sortable.Root,
       {
         id: sortableId,
@@ -9131,23 +9263,34 @@ var ListViewRoot = memoGeneric(
       },
       children
     ) : children;
-    const withScrollable = (children) => scrollable ? /* @__PURE__ */ React55.createElement(ScrollArea, null, children) : children(null);
+    const withScrollable = (children) => scrollable ? /* @__PURE__ */ React56.createElement(ScrollArea, null, children) : children(null);
     const getItemHeight = useCallback24(
       (index) => {
-        if (itemHeight) return itemHeight;
         const child = getItemContextValue(index);
-        const height = child?.isSectionHeader && sectionHeaderVariant === "label" ? SECTION_HEADER_LABEL_HEIGHT : ROW_HEIGHT;
-        return height;
+        if (child?.isSectionHeader && sectionHeaderVariant === "label") {
+          return SECTION_HEADER_LABEL_HEIGHT;
+        }
+        if (itemHeight) return itemHeight;
+        if (getItemHeightForItem) {
+          return getItemHeightForItem(data[index], index);
+        }
+        return ROW_HEIGHT;
       },
-      [getItemContextValue, itemHeight, sectionHeaderVariant]
+      [
+        getItemContextValue,
+        itemHeight,
+        sectionHeaderVariant,
+        getItemHeightForItem,
+        data
+      ]
     );
     const getKey = useCallback24(
       (index) => keyExtractor(data[index], index),
       [data, keyExtractor]
     );
-    const draggingContextValue = useMemo22(() => ({}), []);
-    const gapStyle = useMemo22(() => ({ gap: `${gap}px` }), [gap]);
-    const contextValue = useMemo22(
+    const draggingContextValue = useMemo23(() => ({}), []);
+    const gapStyle = useMemo23(() => ({ gap: `${gap}px` }), [gap]);
+    const contextValue = useMemo23(
       () => ({
         pressEventName,
         colorScheme,
@@ -9171,7 +9314,7 @@ var ListViewRoot = memoGeneric(
         indentation
       ]
     );
-    return /* @__PURE__ */ React55.createElement(ListViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React55.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React55.createElement(
+    return /* @__PURE__ */ React56.createElement(ListViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React56.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React56.createElement(
       "div",
       {
         id,
@@ -9200,7 +9343,7 @@ var ListViewRoot = memoGeneric(
       },
       data.length === 0 && renderEmptyState ? renderEmptyState() : withScrollable(
         (scrollElementRef) => withSortable(
-          virtualized ? /* @__PURE__ */ React55.createElement(
+          virtualized ? /* @__PURE__ */ React56.createElement(
             VirtualizedList,
             {
               ref: forwardedRef,
@@ -9220,11 +9363,11 @@ var ListViewRoot = memoGeneric(
 
 // src/components/listView/ListViewRow.tsx
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React56, {
-  forwardRef as forwardRef20,
+import React57, {
+  forwardRef as forwardRef21,
   useCallback as useCallback25,
   useContext as useContext13,
-  useMemo as useMemo23
+  useMemo as useMemo24
 } from "react";
 
 // src/hooks/mergeEventHandlers.ts
@@ -9251,7 +9394,7 @@ function mergeEventHandlers(...handlerMaps) {
 }
 
 // src/components/listView/ListViewRow.tsx
-var RowContainer = forwardRef20(
+var RowContainer = forwardRef21(
   ({
     as: Component = "div",
     href,
@@ -9278,7 +9421,7 @@ var RowContainer = forwardRef20(
     "aria-selected": ariaSelected,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React56.createElement(
+    return /* @__PURE__ */ React57.createElement(
       Component,
       {
         ref,
@@ -9350,7 +9493,7 @@ var RowContainer = forwardRef20(
     );
   }
 );
-var ListViewDragIndicatorElement = forwardRef20(
+var ListViewDragIndicatorElement = forwardRef21(
   ({
     className,
     $relativeDropPosition,
@@ -9360,7 +9503,7 @@ var ListViewDragIndicatorElement = forwardRef20(
     style: style2,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React56.createElement(
+    return /* @__PURE__ */ React57.createElement(
       "div",
       {
         ref,
@@ -9448,7 +9591,7 @@ var ListViewRow = memoGeneric(
       },
       [onDoubleClick]
     );
-    const mergedStyle = useMemo23(() => {
+    const mergedStyle = useMemo24(() => {
       return isDragOverlay ? {
         // TODO: Where do these offsets actually come from?
         transform: `translate3d(-36px, -6px, 0)`,
@@ -9459,7 +9602,7 @@ var ListViewRow = memoGeneric(
     const renderContent = (renderProps, ref, relativeDropPositionProp) => {
       const Component = RowContainer;
       const relativeDropPosition = testRelativeDropPosition ?? relativeDropPositionProp;
-      const element = /* @__PURE__ */ React56.createElement(
+      const element = /* @__PURE__ */ React57.createElement(
         Component,
         {
           as,
@@ -9494,7 +9637,7 @@ var ListViewRow = memoGeneric(
           className,
           $clickable: !!onPress
         },
-        relativeDropPosition && /* @__PURE__ */ React56.createElement(
+        relativeDropPosition && /* @__PURE__ */ React57.createElement(
           ListViewDragIndicatorElement,
           {
             key: relativeDropPosition,
@@ -9509,11 +9652,11 @@ var ListViewRow = memoGeneric(
             }) : dragIndicatorStyle
           }
         ),
-        depth > 0 && /* @__PURE__ */ React56.createElement(Spacer.Horizontal, { size: depth * indentation }),
+        depth > 0 && /* @__PURE__ */ React57.createElement(Spacer.Horizontal, { size: depth * indentation }),
         children
       );
       if (menuItems && onSelectMenuItem) {
-        return /* @__PURE__ */ React56.createElement(
+        return /* @__PURE__ */ React57.createElement(
           ContextMenu,
           {
             items: menuItems,
@@ -9526,7 +9669,7 @@ var ListViewRow = memoGeneric(
       return element;
     };
     if (sortable && id) {
-      return /* @__PURE__ */ React56.createElement(
+      return /* @__PURE__ */ React57.createElement(
         Sortable.Item,
         {
           id,
@@ -9544,12 +9687,12 @@ var ListViewRow = memoGeneric(
 );
 
 // src/components/listView/ListViewRowTitle.tsx
-import React57, { memo as memo21 } from "react";
+import React58, { memo as memo21 } from "react";
 var ListViewRowTitle = memo21(function ListViewRowTitle2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     "span",
     {
       className: cx(
@@ -9572,22 +9715,47 @@ var ListView;
   ListView2.DragIndicator = ListViewDragIndicatorElement;
   ListView2.rowHeight = ROW_HEIGHT;
   ListView2.sectionHeaderLabelHeight = SECTION_HEADER_LABEL_HEIGHT;
+  ListView2.tallRowHeight = TALL_ROW_HEIGHT;
   ListView2.calculateHeight = ({
     menuItemsCount,
     sectionHeaderCount
   }) => {
     return menuItemsCount * ListView2.rowHeight + sectionHeaderCount * ListView2.sectionHeaderLabelHeight;
   };
+  ListView2.calculateHeightWithTallRows = ({
+    menuItemsCount,
+    sectionHeaderCount,
+    tallMenuItemsCount,
+    maxBaseRows
+  }) => {
+    const normalRows = menuItemsCount - tallMenuItemsCount;
+    const totalHeight = normalRows * ListView2.rowHeight + tallMenuItemsCount * ListView2.tallRowHeight + sectionHeaderCount * ListView2.sectionHeaderLabelHeight;
+    const maxHeight = ListView2.rowHeight * maxBaseRows;
+    return Math.min(totalHeight, maxHeight);
+  };
+  ListView2.getMenuMetrics = (items) => {
+    const sectionHeaderCount = items.filter(
+      (item) => isMenuItemSectionHeader(item)
+    ).length;
+    const menuItemsCount = items.filter(
+      (item) => isSelectableMenuItem(item)
+    ).length;
+    const tallMenuItemsCount = items.filter((item) => {
+      return isSelectableMenuItem(item) && item.tooltip !== void 0;
+    }).length;
+    return { sectionHeaderCount, menuItemsCount, tallMenuItemsCount };
+  };
   ListView2.normalizeTargetIndex = normalizeListTargetIndex;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-import React58, { useCallback as useCallback26, useContext as useContext14 } from "react";
+import React59, { useCallback as useCallback26, useContext as useContext14 } from "react";
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   chevronClassName,
+  chevronAs,
   children,
   ...rest
 }, forwardedRef) {
@@ -9596,19 +9764,21 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   const handleClickChevron = useCallback26(
     (event) => {
       event.stopPropagation();
+      event.preventDefault();
       stableOnClickChevron?.({ altKey: event.altKey });
     },
     [stableOnClickChevron]
   );
-  return /* @__PURE__ */ React58.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React58.createElement(React58.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React58.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React59.createElement(React59.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React59.createElement(
     IconButton,
     {
+      as: chevronAs,
       className: chevronClassName,
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React58.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React58.createElement(React58.Fragment, null, renderIcon(icon), /* @__PURE__ */ React58.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React59.createElement(React59.Fragment, null, renderIcon(icon), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -9643,6 +9813,7 @@ var List = memoGeneric(
       renderAction,
       renderDetail,
       renderRight,
+      detailLineClamp,
       onSelectionChange,
       itemStyle: itemStyleProp,
       itemClassName: itemClassNameProp,
@@ -9669,7 +9840,8 @@ var List = memoGeneric(
       dragIndicatorStyle,
       sortableId,
       sharedDragProps,
-      virtualized
+      virtualized,
+      renameSelectsBeforeDot
     } = props;
     const [internalHoveredId, setHoveredId] = useState25();
     const [internalRenamingId, setRenamingId] = useState25();
@@ -9681,10 +9853,11 @@ var List = memoGeneric(
       pyMap[size],
       itemClassNameProp
     );
-    const itemStyle = useMemo24(
+    const itemStyle = useMemo25(
       () => ({ ...cssVarOverrides, ...itemStyleProp }),
       [itemStyleProp]
     );
+    const normalizedDetailLineClamp = normalizeDetailLineClamp(detailLineClamp);
     const handleSelect = (itemId, event) => {
       if (!onSelectionChange) return;
       setRenamingId(void 0);
@@ -9718,7 +9891,7 @@ var List = memoGeneric(
         setRenamingId(id);
       }
     }));
-    return /* @__PURE__ */ React59.createElement(
+    return /* @__PURE__ */ React60.createElement(
       ViewComponent.Root,
       {
         variant: "bare",
@@ -9767,7 +9940,7 @@ var List = memoGeneric(
               handleSelect(id);
             }
           };
-          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React59.createElement(
+          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React60.createElement(
             ActionMenu,
             {
               menuItems,
@@ -9781,10 +9954,24 @@ var List = memoGeneric(
               }
             }
           ));
-          const end = action || detailPosition === "end" && renderDetail?.(item, isSelected);
+          const detailContent = renderDetail?.(item, isSelected);
+          const end = action || detailPosition === "end" && detailContent;
           const right = renderRight?.(item, isSelected);
-          const below = detailPosition === "below" && renderDetail?.(item, isSelected);
-          return /* @__PURE__ */ React59.createElement(
+          let below = detailPosition === "below" ? detailContent : void 0;
+          if (below && normalizedDetailLineClamp) {
+            const clampClassName = DETAIL_LINE_CLAMP_CLASSES[normalizedDetailLineClamp];
+            below = /* @__PURE__ */ React60.createElement(
+              "div",
+              {
+                className: cx(
+                  "n-overflow-hidden n-w-full n-max-w-full",
+                  clampClassName
+                )
+              },
+              below
+            );
+          }
+          return /* @__PURE__ */ React60.createElement(
             ViewComponent.Row,
             {
               as: typeof href === "string" ? LinkComponent2 : void 0,
@@ -9799,6 +9986,7 @@ var List = memoGeneric(
               className: itemClassName,
               testRelativeDropPosition: testShowDropIndicatorId === id ? "inside" : void 0,
               chevronClassName: cx(expandable && "n-relative n-left-2"),
+              chevronAs: href ? "div" : void 0,
               style: itemStyle,
               hovered: isHovered,
               selected: isSelected,
@@ -9835,12 +10023,15 @@ var List = memoGeneric(
               },
               dragIndicatorStyle
             },
-            /* @__PURE__ */ React59.createElement(
+            /* @__PURE__ */ React60.createElement(
               "div",
               {
-                className: cx("n-flex n-flex-1 n-items-center n-px-2", rowGapMap[size])
+                className: cx(
+                  "n-flex n-flex-1 n-items-center n-px-2",
+                  rowGapMap[size]
+                )
               },
-              thumbnail && /* @__PURE__ */ React59.createElement(
+              thumbnail && /* @__PURE__ */ React60.createElement(
                 "div",
                 {
                   className: cx(
@@ -9853,33 +10044,48 @@ var List = memoGeneric(
                 },
                 thumbnail
               ),
-              /* @__PURE__ */ React59.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-w-0" }, /* @__PURE__ */ React59.createElement("div", { className: "n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2" }, /* @__PURE__ */ React59.createElement("div", { className: "n-flex-1 n-w-0 n-flex n-items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ React59.createElement(
-                ViewComponent.EditableRowTitle,
+              /* @__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(
+                "div",
                 {
-                  value: getName(item),
-                  placeholder: getPlaceholder?.(item) ?? "Enter name",
-                  className: fontStyleMap[size],
-                  autoFocus: !isTestingRenaming,
-                  onSubmitEditing: (value) => {
-                    onRename?.(item, value);
-                    setRenamingId(void 0);
-                  },
-                  onKeyDown: (e) => {
-                    e.stopPropagation();
+                  className: "n-flex-1 n-w-0 n-flex n-items-center",
+                  tabIndex: -1
+                },
+                isRenaming ? /* @__PURE__ */ React60.createElement(
+                  ViewComponent.EditableRowTitle,
+                  {
+                    value: getName(item),
+                    placeholder: getPlaceholder?.(item) ?? "Enter name",
+                    className: fontStyleMap[size],
+                    autoFocus: !isTestingRenaming,
+                    selectBeforeDot: renameSelectsBeforeDot,
+                    onSubmitEditing: (value) => {
+                      onRename?.(item, value);
+                      setRenamingId(void 0);
+                    },
+                    onKeyDown: (e) => {
+                      e.stopPropagation();
+                    }
                   }
-                }
-              ) : /* @__PURE__ */ React59.createElement(
-                ViewComponent.RowTitle,
+                ) : /* @__PURE__ */ React60.createElement(
+                  ViewComponent.RowTitle,
+                  {
+                    className: cx(
+                      fontStyleMap[size],
+                      isSelected && "n-text-selected-list-item-text"
+                    )
+                  },
+                  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(
+                DetailContainer,
                 {
-                  className: cx(
-                    fontStyleMap[size],
-                    isSelected && "n-text-selected-list-item-text"
-                  )
+                  selected: isSelected,
+                  align: normalizedDetailLineClamp && normalizedDetailLineClamp > 1 ? "start" : "center"
                 },
-                getName(item)
-              )), right && detailPosition === "end" && /* @__PURE__ */ React59.createElement(DetailContainer, { selected: isSelected }, right), end && detailPosition === "end" && /* @__PURE__ */ React59.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React59.createElement(DetailContainer, { selected: isSelected }, below)),
-              right && detailPosition === "below" && /* @__PURE__ */ React59.createElement(DetailContainer, { selected: isSelected }, right),
-              end && detailPosition === "below" && /* @__PURE__ */ React59.createElement(DetailContainer, { selected: isSelected }, end)
+                below
+              )),
+              right && detailPosition === "below" && /* @__PURE__ */ React60.createElement(DetailContainer, { selected: isSelected }, right),
+              end && detailPosition === "below" && /* @__PURE__ */ React60.createElement(DetailContainer, { selected: isSelected }, end)
             )
           );
         }
@@ -9889,12 +10095,17 @@ var List = memoGeneric(
 );
 var DetailContainer = memo22(function DetailContainer2({
   children,
-  selected
+  selected,
+  align = "center"
 }) {
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
-      className: cx("n-flex n-items-center n-gap-2", selected && "n-text-primary"),
+      className: cx(
+        "n-flex n-gap-2",
+        align === "center" ? "n-items-center" : "n-items-start",
+        selected && "n-text-primary"
+      ),
       tabIndex: -1
     },
     children
@@ -9958,7 +10169,7 @@ var itemHeightMap = {
 // src/components/Collection.tsx
 var Collection = forwardRefGeneric(function Collection2(props, ref) {
   const { viewType, ...rest } = props;
-  return viewType === "grid" ? /* @__PURE__ */ React60.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React60.createElement(List, { ref, ...rest });
+  return viewType === "grid" ? /* @__PURE__ */ React61.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React61.createElement(List, { ref, ...rest });
 });
 
 // ../noya-color/src/convert.ts
@@ -10119,7 +10330,7 @@ import { clamp as clamp3 } from "@noya-app/noya-utils";
 
 // src/components/ColorSwatch.tsx
 import { CheckIcon } from "@noya-app/noya-icons";
-import React61, { forwardRef as forwardRef21 } from "react";
+import React62, { forwardRef as forwardRef22 } from "react";
 var colorSwatchSizeMap = {
   xxsmall: 15,
   xsmall: 21,
@@ -10127,7 +10338,7 @@ var colorSwatchSizeMap = {
   medium: 36,
   large: 48
 };
-var ColorSwatch = forwardRef21(function ColorSwatch2({
+var ColorSwatch = forwardRef22(function ColorSwatch2({
   color,
   size = "small",
   checked,
@@ -10137,7 +10348,7 @@ var ColorSwatch = forwardRef21(function ColorSwatch2({
 }, ref) {
   const sizePx = colorSwatchSizeMap[size];
   const checkedColor = getContrastColorForBackground(color);
-  return /* @__PURE__ */ React61.createElement("div", { className: "n-relative", style: { width: sizePx, height: sizePx } }, /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement("div", { className: "n-relative", style: { width: sizePx, height: sizePx } }, /* @__PURE__ */ React62.createElement(
     Component,
     {
       ...props,
@@ -10153,7 +10364,7 @@ var ColorSwatch = forwardRef21(function ColorSwatch2({
         ...style2
       }
     }
-  ), checked && /* @__PURE__ */ React61.createElement(
+  ), checked && /* @__PURE__ */ React62.createElement(
     CheckIcon,
     {
       color: checkedColor,
@@ -10164,7 +10375,7 @@ var ColorSwatch = forwardRef21(function ColorSwatch2({
 
 // src/components/ColorSwatchControl.tsx
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import React62, { useMemo as useMemo25 } from "react";
+import React63, { useMemo as useMemo26 } from "react";
 function ColorSwatchControl(props) {
   const {
     options,
@@ -10179,7 +10390,7 @@ function ColorSwatchControl(props) {
     id,
     style: style2
   } = props;
-  const styles3 = useMemo25(() => {
+  const styles3 = useMemo26(() => {
     return {
       display: "grid",
       gridTemplateColumns: `repeat(auto-fill, minmax(${colorSwatchSizeMap[size]}px, 1fr))`,
@@ -10187,8 +10398,8 @@ function ColorSwatchControl(props) {
       ...style2
     };
   }, [size, style2]);
-  const content = /* @__PURE__ */ React62.createElement("div", { className, id, style: styles3 }, options.map((option) => {
-    const item = /* @__PURE__ */ React62.createElement(
+  const content = /* @__PURE__ */ React63.createElement("div", { className, id, style: styles3 }, options.map((option) => {
+    const item = /* @__PURE__ */ React63.createElement(
       ColorSwatch,
       {
         key: `${option}-color-swatch`,
@@ -10201,7 +10412,7 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return /* @__PURE__ */ React62.createElement(
+    return /* @__PURE__ */ React63.createElement(
       ToggleGroupPrimitive.Item,
       {
         asChild: true,
@@ -10212,7 +10423,7 @@ function ColorSwatchControl(props) {
       item
     );
   }));
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     ToggleGroupPrimitive.Root,
     {
       type: "single",
@@ -10227,18 +10438,18 @@ function ColorSwatchControl(props) {
 
 // src/components/Combobox.tsx
 import { DropdownChevronIcon as DropdownChevronIcon2 } from "@noya-app/noya-icons";
-import React64, {
+import React66, {
   useCallback as useCallback27,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo26,
+  useMemo as useMemo27,
   useRef as useRef21,
   useState as useState26
 } from "react";
 
 // src/utils/combobox.ts
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import { useSyncExternalStore } from "react";
+import React64, { useSyncExternalStore } from "react";
 
 // src/utils/fuzzyScorer.ts
 import { scoreFilePathFuzzy } from "vscode-fuzzy-scorer";
@@ -10520,7 +10731,11 @@ function filterWithGroupedSections(items, query) {
       );
     } else {
       const scoredItems = fuzzyFilter({
-        items: selectableItems.map((item) => item.title.toString()),
+        items: selectableItems.map((item) => {
+          const title = item.title?.toString?.() ?? "";
+          const tooltipText = getNodeText(item.tooltip);
+          return tooltipText ? `${title} ${tooltipText}` : title;
+        }),
         query
       });
       const usedIndexes = new Set(scoredItems.map((item) => item.index));
@@ -10566,10 +10781,20 @@ function useComboboxState(state) {
     state.getSnapshot
   );
 }
+function getNodeText(node) {
+  if (node === null || node === void 0 || typeof node === "boolean")
+    return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getNodeText).join("");
+  if (React64.isValidElement(node)) {
+    return getNodeText(node.props?.children);
+  }
+  return "";
+}
 
 // src/components/ComboboxMenu.tsx
 import { CheckIcon as CheckIcon2 } from "@noya-app/noya-icons";
-import React63 from "react";
+import React65, { memo as memo23 } from "react";
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
     items,
@@ -10579,9 +10804,11 @@ var ComboboxMenu = memoGeneric(
     listSize,
     style: style2,
     indented,
-    iconPosition = "right"
+    iconPosition = "right",
+    itemHeight,
+    getRowHeightForItem
   }, forwardedRef) {
-    return /* @__PURE__ */ React63.createElement(
+    return /* @__PURE__ */ React65.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -10592,12 +10819,14 @@ var ComboboxMenu = memoGeneric(
         },
         data: items,
         virtualized: listSize,
+        ...itemHeight ? { itemHeight } : {},
+        ...getRowHeightForItem ? { getItemHeightForItem: getRowHeightForItem } : {},
         pressEventName: "onPointerDown",
         sectionHeaderVariant: "label",
         style: style2,
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React63.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React63.createElement(
+            return /* @__PURE__ */ React65.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React65.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -10608,7 +10837,11 @@ var ComboboxMenu = memoGeneric(
             item: typeof item.title === "string" ? item.title : item.value,
             itemScore: item
           });
-          return /* @__PURE__ */ React63.createElement(
+          const tooltip = (
+            // Only selectable items can have tooltips in this menu
+            isSelectableMenuItem(item) ? item.tooltip : void 0
+          );
+          return /* @__PURE__ */ React65.createElement(
             ListView.Row,
             {
               key: item.value,
@@ -10621,12 +10854,12 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ React63.createElement("div", { className: "n-flex n-flex-1 n-min-w-0 n-items-center" }, indented && /* @__PURE__ */ React63.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React63.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React63.createElement(CheckIcon2, null)) : indented ? /* @__PURE__ */ React63.createElement(
+            /* @__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(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
               }
-            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React63.createElement(React63.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React63.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ React63.createElement(
+            ) : 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(
               "span",
               {
                 key: `${item.value}-token-${j}`,
@@ -10636,14 +10869,17 @@ var ComboboxMenu = memoGeneric(
                 )
               },
               token.text
-            ))),
-            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React63.createElement(React63.Fragment, null, item.shortcut ? /* @__PURE__ */ React63.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
+            ))), 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 }))
           );
         }
       }
     );
   })
 );
+var MenuIcon = memo23(function MenuIcon2({ icon }) {
+  return /* @__PURE__ */ React65.createElement("div", { className: "n-relative n-top-[2px]" }, renderIcon(icon));
+});
 
 // src/components/Combobox.tsx
 var Combobox = memoGeneric(
@@ -10652,6 +10888,7 @@ var Combobox = memoGeneric(
     placeholder,
     items,
     size,
+    icon,
     style: style2,
     className,
     label: labelProp,
@@ -10664,7 +10901,7 @@ var Combobox = memoGeneric(
     onDeleteWhenEmpty,
     ...rest
   }, forwardedRef) {
-    const props = useMemo26(() => {
+    const props = useMemo27(() => {
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
@@ -10945,33 +11182,27 @@ var Combobox = memoGeneric(
       ref.current?.focus();
       handleBlur();
     }, [shouldBlur, handleBlur]);
-    const { sectionHeaderCount, menuItemsCount } = useMemo26(
-      () => ({
-        sectionHeaderCount: filteredItems.filter(
-          (item) => isMenuItemSectionHeader(item)
-        ).length,
-        menuItemsCount: filteredItems.filter(
-          (item) => isSelectableMenuItem(item)
-        ).length
-      }),
+    const { sectionHeaderCount, menuItemsCount, tallMenuItemsCount } = useMemo27(
+      () => ListView.getMenuMetrics(filteredItems),
       [filteredItems]
     );
     const hasCheckedItems = items.some(
       (item) => isSelectableMenuItem(item) && item.checked
     );
-    return /* @__PURE__ */ React64.createElement(
+    return /* @__PURE__ */ React66.createElement(
       InputField2.Root,
       {
         id,
         size,
         sideOffset: 6,
-        end: /* @__PURE__ */ React64.createElement(React64.Fragment, null, loading && /* @__PURE__ */ React64.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React64.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React64.createElement(
+        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(
           InputField2.Button,
           {
             variant: "floating",
             onClick: handleChevronClick
           },
-          /* @__PURE__ */ React64.createElement(
+          /* @__PURE__ */ React66.createElement(
             DropdownChevronIcon2,
             {
               className: cx(
@@ -10982,15 +11213,16 @@ var Combobox = memoGeneric(
           )
         )),
         renderPopoverContent: ({ width }) => {
-          const height = Math.min(
-            ListView.calculateHeight({
-              menuItemsCount,
-              sectionHeaderCount
-            }),
-            ListView.rowHeight * 10.5
-          );
-          const listSize = { width, height };
-          return /* @__PURE__ */ React64.createElement(
+          const hasTooltips = tallMenuItemsCount > 0;
+          const baseRowHeight = ListView.rowHeight;
+          const computedHeight = ListView.calculateHeightWithTallRows({
+            menuItemsCount,
+            sectionHeaderCount,
+            tallMenuItemsCount,
+            maxBaseRows: 10.5
+          });
+          const adjustedListSize = { width, height: computedHeight };
+          return /* @__PURE__ */ React66.createElement(
             "div",
             {
               className: cx(
@@ -10998,7 +11230,7 @@ var Combobox = memoGeneric(
                 shouldShowMenu && !readOnly ? "n-flex" : "n-hidden"
               )
             },
-            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React64.createElement(
+            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React66.createElement(
               ComboboxMenu,
               {
                 ref: listRef,
@@ -11006,17 +11238,20 @@ var Combobox = memoGeneric(
                 selectedIndex,
                 onSelectItem: handleUpdateSelection,
                 onHoverIndex: handleIndexChange,
-                listSize,
+                listSize: adjustedListSize,
                 style: {
-                  flex: `0 0 ${height}px`
+                  flex: `0 0 ${computedHeight}px`
                 },
-                indented: hasCheckedItems
+                indented: hasCheckedItems,
+                ...hasTooltips ? {
+                  getRowHeightForItem: (item) => isSelectableMenuItem(item) && item.tooltip ? ListView.tallRowHeight : baseRowHeight
+                } : { itemHeight: baseRowHeight }
               }
-            ) : /* @__PURE__ */ React64.createElement("div", { className: "n-flex n-flex-col n-h-[50px] n-p-5 n-items-center n-justify-center" }, /* @__PURE__ */ React64.createElement(Small, { className: "n-text-text-disabled" }, loading ? "Loading..." : "No results"))
+            ) : /* @__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__ */ React64.createElement(
+      /* @__PURE__ */ React66.createElement(
         InputField2.Input,
         {
           ref,
@@ -11041,7 +11276,7 @@ var Combobox = memoGeneric(
           ...readOnly ? { readOnly: true } : {}
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React64.createElement(
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React66.createElement(
         InputField2.Typeahead,
         {
           value: typeaheadValue,
@@ -11055,20 +11290,20 @@ var Combobox = memoGeneric(
 );
 
 // src/components/CommandPalette.tsx
-import React66, { memo as memo23 } from "react";
+import React68, { memo as memo24 } from "react";
 
 // src/components/SearchCompletionMenu.tsx
 import { getCurrentPlatform as getCurrentPlatform2, handleKeyboardEvent } from "@noya-app/noya-keymap";
-import React65, {
-  forwardRef as forwardRef22,
+import React67, {
+  forwardRef as forwardRef23,
   useCallback as useCallback28,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo27,
+  useMemo as useMemo28,
   useRef as useRef22,
   useState as useState27
 } from "react";
-var SearchCompletionMenu = forwardRef22(function SearchCompletionMenu2({
+var SearchCompletionMenu = forwardRef23(function SearchCompletionMenu2({
   onSelect,
   onHover,
   onClose,
@@ -11082,12 +11317,12 @@ var SearchCompletionMenu = forwardRef22(function SearchCompletionMenu2({
     index: 0
   });
   const { index, search } = state;
-  const listRef = React65.useRef(null);
+  const listRef = React67.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
   useEffect21(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
-  const results = useMemo27(
+  const results = useMemo28(
     () => fuzzyFilter({
       items: items.map(
         (item) => typeof item.title === "string" ? item.title : item.value
@@ -11108,10 +11343,14 @@ var SearchCompletionMenu = forwardRef22(function SearchCompletionMenu2({
   useEffect21(() => {
     onHover?.(results[index]);
   }, [index, onHover, results]);
-  const searchHeight = 31;
+  const baseRowHeight = ListView.rowHeight;
+  const searchHeight = baseRowHeight;
   const listSize = results.length > 0 ? {
     width,
-    height: Math.min(results.length * 31, 31 * 6.5)
+    height: Math.min(
+      results.length * baseRowHeight,
+      baseRowHeight * 6.5
+    )
   } : {
     width,
     height: 60
@@ -11161,7 +11400,7 @@ var SearchCompletionMenu = forwardRef22(function SearchCompletionMenu2({
       inputRef.current?.focus();
     }
   }));
-  return /* @__PURE__ */ React65.createElement("div", { ...elementSize, className: "n-flex n-flex-col n-overflow-hidden" }, /* @__PURE__ */ React65.createElement(InputField2.Root, { className: "n-flex n-flex-0" }, /* @__PURE__ */ React65.createElement(
+  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(
     InputField2.Input,
     {
       ref: inputRef,
@@ -11181,7 +11420,7 @@ var SearchCompletionMenu = forwardRef22(function SearchCompletionMenu2({
       onChange: setSearch,
       onKeyDown: handleKeyDown
     }
-  )), /* @__PURE__ */ React65.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React65.createElement(
+  )), /* @__PURE__ */ React67.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React67.createElement(
     ComboboxMenu,
     {
       ref: listRef,
@@ -11196,29 +11435,29 @@ var SearchCompletionMenu = forwardRef22(function SearchCompletionMenu2({
       onHoverIndex: setIndex,
       indented: hasCheckedItems
     }
-  ) : /* @__PURE__ */ React65.createElement(
+  ) : /* @__PURE__ */ React67.createElement(
     "div",
     {
       ...listSize,
       className: "n-flex n-flex-col n-p-20 n-items-center n-justify-center"
     },
-    /* @__PURE__ */ React65.createElement(Small, { color: "textDisabled" }, "No results")
+    /* @__PURE__ */ React67.createElement(Small, { color: "textDisabled" }, "No results")
   ));
 });
 
 // src/components/CommandPalette.tsx
-var CommandPalette = memo23(function CommandPalette2({
+var CommandPalette = memo24(function CommandPalette2({
   showCommandPalette,
   setShowCommandPalette,
   items,
   onSelect,
   onHover
 }) {
-  const menuRef = React66.useRef(null);
-  const handleClose = React66.useCallback(() => {
+  const menuRef = React68.useRef(null);
+  const handleClose = React68.useCallback(() => {
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React68.createElement(
     Dialog,
     {
       style: {
@@ -11244,7 +11483,7 @@ var CommandPalette = memo23(function CommandPalette2({
         }, 0);
       }
     },
-    /* @__PURE__ */ React66.createElement("div", { className: "n-flex n-flex-col n-flex-1" }, /* @__PURE__ */ React66.createElement(AutoSizer, null, (size) => /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React68.createElement("div", { className: "n-flex n-flex-col n-flex-1" }, /* @__PURE__ */ React68.createElement(AutoSizer, null, (size) => /* @__PURE__ */ React68.createElement(
       SearchCompletionMenu,
       {
         ref: menuRef,
@@ -11259,21 +11498,21 @@ var CommandPalette = memo23(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-import React67 from "react";
-var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React67.createElement(
+import React69 from "react";
+var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React69.createElement(
   Tooltip,
   {
     key: userId,
-    content: /* @__PURE__ */ React67.createElement("div", { className: "n-flex n-flex-col" }, /* @__PURE__ */ React67.createElement(Small, null, name))
+    content: /* @__PURE__ */ React69.createElement("div", { className: "n-flex n-flex-col" }, /* @__PURE__ */ React69.createElement(Small, null, name))
   },
-  /* @__PURE__ */ React67.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
+  /* @__PURE__ */ React69.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ React67.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ React67.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "n-mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React67.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React69.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ React69.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "n-mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React69.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React69.createElement(
     Button,
     {
       active: isAssistantOpen,
@@ -11285,7 +11524,7 @@ var ConnectedUsersMenuLayout = ({
 };
 
 // src/components/DraggableMenuButton.tsx
-import React68, { useCallback as useCallback29, useState as useState28 } from "react";
+import React70, { useCallback as useCallback29, useState as useState28 } from "react";
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -11339,7 +11578,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       ...rest,
@@ -11356,7 +11595,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onClick?.();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React68.createElement(
+    items && onSelect ? /* @__PURE__ */ React70.createElement(
       DropdownMenu,
       {
         open,
@@ -11365,14 +11604,14 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React68.createElement("div", { className: "n-pointer-events-none n-h-[15px]" }, /* @__PURE__ */ React68.createElement(
+      /* @__PURE__ */ React70.createElement("div", { className: "n-pointer-events-none n-h-[15px]" }, /* @__PURE__ */ React70.createElement(
         Icon,
         {
           name: iconName,
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React68.createElement(
+    ) : /* @__PURE__ */ React70.createElement(
       Icon,
       {
         name: iconName,
@@ -11384,10 +11623,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 import { Dialog as Dialog3 } from "radix-ui";
-import * as React69 from "react";
+import * as React71 from "react";
 import { useImperativeHandle as useImperativeHandle8 } from "react";
-var Drawer = React69.memo(
-  React69.forwardRef(function Drawer2({
+var Drawer = React71.memo(
+  React71.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -11419,7 +11658,7 @@ var Drawer = React69.memo(
         return internalOpen;
       }
     }));
-    const inner = /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(
+    const inner = /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
       Dialog3.Overlay,
       {
         className: cx(
@@ -11429,7 +11668,7 @@ var Drawer = React69.memo(
         ),
         style: overlayStyle
       }
-    ), /* @__PURE__ */ React69.createElement(
+    ), /* @__PURE__ */ React71.createElement(
       Dialog3.Content,
       {
         id,
@@ -11441,24 +11680,24 @@ var Drawer = React69.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React69.createElement(Dialog3.Title, null, title),
+      title && /* @__PURE__ */ React71.createElement(Dialog3.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React71.createElement(
       Dialog3.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React69.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React69.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React71.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React71.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
 
 // src/components/Fade.tsx
-import React70 from "react";
+import React72 from "react";
 var Fade = ({
   children,
   direction = "right",
@@ -11480,7 +11719,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__ */ React70.createElement("div", { className: cx("n-relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { className: cx("n-relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: cx(
@@ -11499,21 +11738,21 @@ var Fade = ({
 };
 
 // src/components/file-explorer/FileExplorerLayout.tsx
-import React71 from "react";
+import React73 from "react";
 var FileExplorerLayout = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ React71.createElement(Section, { className: cx(className, "n-px-3 n-flex-1"), ...props }, children);
+}) => /* @__PURE__ */ React73.createElement(Section, { className: cx(className, "n-px-3 n-flex-1"), ...props }, children);
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
   isUploading,
   children
-}) => /* @__PURE__ */ React71.createElement("div", { className: "n-flex n-items-center n-gap-2" }, showUploadButton && /* @__PURE__ */ React71.createElement(
+}) => /* @__PURE__ */ React73.createElement("div", { className: "n-flex n-items-center n-gap-2" }, showUploadButton && /* @__PURE__ */ React73.createElement(
   Button,
   {
-    icon: isUploading ? /* @__PURE__ */ React71.createElement(ActivityIndicator, { size: 15 }) : "UploadIcon",
+    icon: isUploading ? /* @__PURE__ */ React73.createElement(ActivityIndicator, { size: 15 }) : "UploadIcon",
     onClick: onUpload,
     "aria-label": "Upload file",
     tooltip: "Upload file",
@@ -11523,7 +11762,7 @@ var FileExplorerUploadButton = ({
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
-    return /* @__PURE__ */ React71.createElement(Collection, { ref, className: "-n-mx-3 n-flex-1", ...props });
+    return /* @__PURE__ */ React73.createElement(Collection, { ref, className: "-n-mx-3 n-flex-1", ...props });
   }
 );
 var FileExplorerDetail = ({
@@ -11532,7 +11771,7 @@ var FileExplorerDetail = ({
   children,
   className,
   style: style2
-}) => /* @__PURE__ */ React71.createElement(
+}) => /* @__PURE__ */ React73.createElement(
   "span",
   {
     className: cx(
@@ -11547,10 +11786,10 @@ var FileExplorerDetail = ({
 var FileExplorerEmptyState = ({
   children: label = "No files",
   ...props
-}) => /* @__PURE__ */ React71.createElement(Banner, { className: "n-mx-3", ...props }, label);
+}) => /* @__PURE__ */ React73.createElement(Banner, { className: "n-mx-3", ...props }, label);
 
 // src/components/FileUploadIndicator.tsx
-import React74 from "react";
+import React76 from "react";
 
 // src/utils/formatByteSize.ts
 var byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -11570,7 +11809,7 @@ import {
   SpeakerLoudIcon,
   VideoIcon
 } from "@noya-app/noya-icons";
-import React72, { memo as memo25, useMemo as useMemo28 } from "react";
+import React74, { memo as memo26, useMemo as useMemo29 } from "react";
 
 // src/components/catppuccin/fileIcons.ts
 var fileIcons = {
@@ -14010,7 +14249,7 @@ var getThumbnailColors = (colorScheme, selected) => {
       };
   }
 };
-var MediaThumbnail = memo25(function MediaThumbnail2({
+var MediaThumbnail = memo26(function MediaThumbnail2({
   contentType: contentTypeProp,
   selected = false,
   className,
@@ -14028,14 +14267,14 @@ var MediaThumbnail = memo25(function MediaThumbnail2({
     selected
   );
   const contentType = getAssetType(contentTypeProp);
-  const iconStyles = useMemo28(
+  const iconStyles = useMemo29(
     () => ({
       width: iconSizeMap[size],
       height: iconSizeMap[size]
     }),
     [size]
   );
-  const content = useMemo28(() => {
+  const content = useMemo29(() => {
     if (renderThumbnailIcon) {
       const rendered = renderThumbnailIcon({ fileName, contentType });
       if (rendered) return rendered;
@@ -14055,7 +14294,7 @@ var MediaThumbnail = memo25(function MediaThumbnail2({
       renderUrl.searchParams.set("url", url);
       renderUrl.searchParams.set("fit", aspect);
       renderUrl.searchParams.set("theme", "light");
-      return /* @__PURE__ */ React72.createElement(
+      return /* @__PURE__ */ React74.createElement(
         "img",
         {
           src: renderUrl.toString(),
@@ -14069,23 +14308,23 @@ var MediaThumbnail = memo25(function MediaThumbnail2({
     }
     switch (contentType) {
       case "image":
-        return /* @__PURE__ */ React72.createElement(ImageIcon2, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(ImageIcon2, { color: iconColor, style: iconStyles });
       case "video":
-        return /* @__PURE__ */ React72.createElement(VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ React72.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon2 = Icons[iconName];
-          return /* @__PURE__ */ React72.createElement(Icon2, { color: iconColor, style: iconStyles });
+          return /* @__PURE__ */ React74.createElement(Icon2, { color: iconColor, style: iconStyles });
         }
         if (fileName) {
           if (fileName.endsWith(".noya")) {
-            return /* @__PURE__ */ React72.createElement(NoyaIcon, { color: iconColor, style: iconStyles });
+            return /* @__PURE__ */ React74.createElement(NoyaIcon, { color: iconColor, style: iconStyles });
           }
           const fileIcon = findFileIcon(fileName);
           if (fileIcon) {
-            return /* @__PURE__ */ React72.createElement(
+            return /* @__PURE__ */ React74.createElement(
               "img",
               {
                 src: `https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`,
@@ -14095,7 +14334,7 @@ var MediaThumbnail = memo25(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ React72.createElement(FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [
     renderThumbnailIcon,
@@ -14109,7 +14348,7 @@ var MediaThumbnail = memo25(function MediaThumbnail2({
     iconStyles,
     iconName
   ]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React74.createElement(
     "div",
     {
       className: cx(
@@ -14152,7 +14391,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 React73 from "react";
+import * as React75 from "react";
 function Progress({
   value,
   colorScheme = "normal",
@@ -14161,18 +14400,18 @@ function Progress({
   style: styleProp
 }) {
   const clampedValue = clamp4(value, 0, 100);
-  const transformStyles = React73.useMemo(
+  const transformStyles = React75.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`,
       backgroundColor: color
     }),
     [color, clampedValue]
   );
-  const style2 = React73.useMemo(
+  const style2 = React75.useMemo(
     () => ({ transform: "translateZ(0)", ...styleProp }),
     [styleProp]
   );
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React75.createElement(
     ProgressPrimitive.Root,
     {
       className: cx(
@@ -14182,7 +14421,7 @@ function Progress({
       style: style2,
       value: clampedValue
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React75.createElement(
       ProgressPrimitive.Indicator,
       {
         className: cx(
@@ -14207,14 +14446,14 @@ function FileUploadIndicator({
 }) {
   const done = percent === 1;
   const value = typeof percent === "number" ? Math.round(percent) : 0;
-  return /* @__PURE__ */ React74.createElement("div", { className: "n-flex n-items-center n-gap-2" }, /* @__PURE__ */ React74.createElement("div", { className: "n-w-12 n-h-12 n-bg-background n-rounded-md n-overflow-hidden" }, /* @__PURE__ */ React74.createElement(
+  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(
     MediaThumbnail,
     {
       size: "medium",
       fileName: name,
       contentType
     }
-  )), /* @__PURE__ */ React74.createElement("div", { className: "n-flex n-flex-col n-flex-1 n-justify-center n-gap-1 n-min-w-0" }, name && /* @__PURE__ */ React74.createElement(Small, { color: "text", className: "n-truncate n-leading-none" }, name), typeof total === "number" && typeof percent === "number" && /* @__PURE__ */ React74.createElement(
+  )), /* @__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(
     Small,
     {
       color: "textSubtle",
@@ -14225,7 +14464,7 @@ function FileUploadIndicator({
     " /",
     " ",
     formatByteSize(total)
-  ), typeof value === "number" && /* @__PURE__ */ React74.createElement(
+  ), typeof value === "number" && /* @__PURE__ */ React76.createElement(
     Progress,
     {
       value,
@@ -14233,7 +14472,7 @@ function FileUploadIndicator({
       className: "n-rounded-sm",
       colorScheme: "secondary"
     }
-  )), /* @__PURE__ */ React74.createElement("div", { className: "n-flex n-items-center n-justify-center n-gap-2" }, typeof value === "number" && /* @__PURE__ */ React74.createElement(
+  )), /* @__PURE__ */ React76.createElement("div", { className: "n-flex n-items-center n-justify-center n-gap-2" }, typeof value === "number" && /* @__PURE__ */ React76.createElement(
     Small,
     {
       color: "textSubtle",
@@ -14242,12 +14481,12 @@ function FileUploadIndicator({
     },
     value,
     "%"
-  ), done ? /* @__PURE__ */ React74.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__ */ React74.createElement(Checkmark, null)) : /* @__PURE__ */ React74.createElement(ActivityIndicator, { size: 15 })));
+  ), 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 })));
 }
 function FileUploadList({
   uploads
 }) {
-  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement("div", { className: "n-flex n-items-center n-gap-2 n-py-2 n-px-4" }, /* @__PURE__ */ React74.createElement(Heading5, null, "Uploading ", uploads.length, " ", uploads.length === 1 ? "asset" : "assets")), /* @__PURE__ */ React74.createElement(Divider, null), /* @__PURE__ */ React74.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__ */ React74.createElement(
+  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(
     FileUploadIndicator,
     {
       key: upload.id,
@@ -14260,7 +14499,7 @@ function FileUploadList({
 }
 
 // src/components/FloatingWindow.tsx
-import React75, { useCallback as useCallback30, useRef as useRef23, useState as useState29 } from "react";
+import React77, { useCallback as useCallback30, useRef as useRef23, useState as useState29 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -14353,7 +14592,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(Small, { className: "n-flex-1 n-font-medium n-text-text" }, title), toolbarContent, /* @__PURE__ */ React75.createElement(
+  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(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -14475,7 +14714,7 @@ var FloatingWindow = ({
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React75.useEffect(() => {
+  React77.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -14489,7 +14728,7 @@ var FloatingWindow = ({
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React77.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -14504,7 +14743,7 @@ var FloatingWindow = ({
         zIndex: cssVars.zIndex.menu
       }
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React77.createElement(
       "div",
       {
         style: {
@@ -14515,9 +14754,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React75.createElement(Divider, null),
-    /* @__PURE__ */ React75.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React77.createElement(Divider, null),
+    /* @__PURE__ */ React77.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React77.createElement(
       "div",
       {
         key: direction,
@@ -14529,9 +14768,9 @@ var FloatingWindow = ({
 };
 
 // src/components/InspectorContainer.tsx
-import React76, { forwardRef as forwardRef24, memo as memo26 } from "react";
-var InspectorContainer = memo26(
-  forwardRef24(function InspectorContainer2({
+import React78, { forwardRef as forwardRef25, memo as memo27 } from "react";
+var InspectorContainer = memo27(
+  forwardRef25(function InspectorContainer2({
     header,
     children,
     fallback,
@@ -14540,7 +14779,7 @@ var InspectorContainer = memo26(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ React76.createElement(
+    return /* @__PURE__ */ React78.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -14555,32 +14794,32 @@ var InspectorContainer = memo26(
         }
       },
       header,
-      children ? /* @__PURE__ */ React76.createElement(ScrollArea, null, /* @__PURE__ */ React76.createElement("div", { className: "n-flex n-flex-col n-relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React76.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React76.createElement("div", { className: "n-flex n-flex-col n-relative n-h-full" }, fallback) : null
+      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
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import * as React77 from "react";
-var LabeledElementView = React77.memo(function LabeledElementView2({
+import * as React79 from "react";
+var LabeledElementView = React79.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React77.Children.toArray(children).flatMap(
-    (child) => React77.isValidElement(child) && child.type === React77.Fragment ? child.props.children : [child]
+  const elementIds = React79.Children.toArray(children).flatMap(
+    (child) => React79.isValidElement(child) && child.type === React79.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React77.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React79.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React77.useRef(null);
-  const refs = React77.useMemo(() => {
+  const containerRef = React79.useRef(null);
+  const refs = React79.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React77.createRef()])
+      serializedIds.split(",").map((id) => [id, React79.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React77.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React77.createElement(
+  const labelElements = React79.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React79.createElement(
       "span",
       {
         key: id,
@@ -14593,7 +14832,7 @@ var LabeledElementView = React77.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React77.useLayoutEffect(() => {
+  React79.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -14655,17 +14894,17 @@ var LabeledElementView = React77.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React77.createElement("div", { className: "n-flex n-flex-1 n-flex-col n-relative", ref: containerRef }, /* @__PURE__ */ React77.createElement("div", { className: "n-flex n-flex-1 n-items-center" }, children), /* @__PURE__ */ React77.createElement("div", { className: "n-relative n-overflow-hidden n-select-none" }, 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));
 });
 
 // src/components/LabeledField.tsx
-import React79, { memo as memo28, useMemo as useMemo31 } from "react";
+import React81, { memo as memo29, useMemo as useMemo32 } from "react";
 
 // src/hooks/useIndent.ts
-import React78 from "react";
-var IndentContext = React78.createContext(0);
+import React80 from "react";
+var IndentContext = React80.createContext(0);
 var useIndent = () => {
-  return React78.useContext(IndentContext);
+  return React80.useContext(IndentContext);
 };
 
 // src/components/LabeledField.tsx
@@ -14677,7 +14916,7 @@ var labeledFieldStyles = (labelType) => cx(
 var labelTypeInset = {
   type: "inset"
 };
-var LabeledField = memo28(function LabeledField2({
+var LabeledField = memo29(function LabeledField2({
   children,
   label,
   labelType: labelTypeProp,
@@ -14693,15 +14932,15 @@ var LabeledField = memo28(function LabeledField2({
   const labelWidth = labelWidthFromContext ?? minWidth;
   const labelTypeFromContext = useLabelType();
   const labelType = labelTypeProp ?? labelTypeFromContext;
-  const labeledFieldClasses = useMemo31(
+  const labeledFieldClasses = useMemo32(
     () => labeledFieldStyles(labelType),
     [labelType]
   );
-  const labelContextValue = useMemo31(
+  const labelContextValue = useMemo32(
     () => ({ fieldId, label }),
     [fieldId, label]
   );
-  const indentStyle = useMemo31(
+  const indentStyle = useMemo32(
     () => ({
       width: indentLevel * 8,
       flexBasis: indentLevel * 8,
@@ -14710,20 +14949,20 @@ var LabeledField = memo28(function LabeledField2({
     }),
     [indentLevel]
   );
-  const fieldStyle = useMemo31(
+  const fieldStyle = useMemo32(
     () => ({
       minWidth: `calc(100% - ${labelWidth + indentLevel * 8 + 6}px)`
     }),
     [labelWidth, indentLevel]
   );
-  const labelStyle = useMemo31(
+  const labelStyle = useMemo32(
     () => ({
       minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
       ...labelStyleProp
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ React79.createElement(LabelContext.Provider, { value: labelContextValue }, labelType === "inset" ? /* @__PURE__ */ React79.createElement(LabelTypeContext.Provider, { value: labelTypeInset }, children) : /* @__PURE__ */ React79.createElement("div", { className: cx("n-flex n-relative n-flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React79.createElement("div", { style: indentStyle }), /* @__PURE__ */ React79.createElement("div", { className: labeledFieldClasses }, labelType !== "none" && /* @__PURE__ */ React79.createElement(
+  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(
     Label,
     {
       htmlFor: fieldId,
@@ -14732,13 +14971,13 @@ var LabeledField = memo28(function LabeledField2({
       ...props
     },
     label
-  ), labelType === "start" ? /* @__PURE__ */ React79.createElement("div", { className: "n-flex-auto n-flex", style: fieldStyle }, children) : children)));
+  ), labelType === "start" ? /* @__PURE__ */ React81.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 React80 from "react";
+import React82 from "react";
 function getItemId(item) {
   if (item.type === "submenu") {
     return item.id;
@@ -14767,7 +15006,7 @@ function ListMenu({
     const regularItems = chunk.filter(
       (item) => isSubMenuItem(item) || isSelectableMenuItem(item)
     );
-    return /* @__PURE__ */ React80.createElement(
+    return /* @__PURE__ */ React82.createElement(
       List,
       {
         key: regularItems.map(getItemId).join("-"),
@@ -14779,43 +15018,43 @@ function ListMenu({
         getName: (item) => item.title.toString(),
         selectedIds,
         renderRight,
-        renderThumbnail: ({ item }) => /* @__PURE__ */ React80.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__ */ React80.createElement(ArrowRightIcon, null),
+        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),
         onClickItem: (itemId) => onSelect(itemId)
       }
     );
   });
   return withSeparatorElements(
     lists,
-    /* @__PURE__ */ React80.createElement(Divider, { overflow: 12, className: "n-my-1" })
+    /* @__PURE__ */ React82.createElement(Divider, { overflow: 12, className: "n-my-1" })
   );
 }
 
 // src/components/ListNavigator.tsx
-import React84 from "react";
+import React86 from "react";
 
 // src/components/Navigator.tsx
-import React83, {
+import React85, {
   Children as Children4,
   isValidElement as isValidElement5,
   useCallback as useCallback32,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef26,
   useState as useState31
 } from "react";
 
 // src/components/StackNavigator.tsx
 import { isDeepEqual as isDeepEqual4 } from "@noya-app/noya-utils";
-import React82, {
+import React84, {
   useCallback as useCallback31,
   useEffect as useEffect22,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useRef as useRef25,
   useState as useState30
 } from "react";
 
 // src/components/BaseToolbar.tsx
-import React81 from "react";
+import React83 from "react";
 var toolbarStyle = {
   [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent"
@@ -14827,7 +15066,7 @@ function BaseToolbarContainer({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ React81.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React83.createElement("div", { className: cx("n-flex n-flex-col", className), style: toolbarStyle }, /* @__PURE__ */ React83.createElement(
     "div",
     {
       className: cx(
@@ -14840,7 +15079,7 @@ function BaseToolbarContainer({
       }
     },
     children
-  ), showDivider && /* @__PURE__ */ React81.createElement(Divider, { variant: "strong" }));
+  ), showDivider && /* @__PURE__ */ React83.createElement(Divider, { variant: "strong" }));
 }
 function BaseToolbar({
   children,
@@ -14852,7 +15091,7 @@ function BaseToolbar({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React83.createElement(
     BaseToolbarContainer,
     {
       showDivider,
@@ -14860,24 +15099,24 @@ function BaseToolbar({
       innerClassName,
       enableAbsoluteBreakpoint
     },
-    logo && /* @__PURE__ */ React81.createElement(React81.Fragment, null, logo, /* @__PURE__ */ React81.createElement(DividerVertical, null)),
-    /* @__PURE__ */ React81.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ React81.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ React81.createElement(
+    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 })),
+    /* @__PURE__ */ React83.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"
       },
-      /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
+      /* @__PURE__ */ React83.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
     ),
-    /* @__PURE__ */ React81.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ React81.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ React81.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right)
+    /* @__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)
   );
 }
 
 // src/components/StackNavigator.tsx
-var StackRenderContext = React82.createContext({});
+var StackRenderContext = React84.createContext({});
 function StackNavigator({
   items,
   onBack,
@@ -14892,7 +15131,7 @@ function StackNavigator({
 }) {
   const top = items.at(-1);
   const previousLengthRef = useRef25(items.length);
-  const direction = useMemo32(() => {
+  const direction = useMemo33(() => {
     const previous = previousLengthRef.current;
     previousLengthRef.current = items.length;
     return items.length >= previous ? "forward" : "back";
@@ -14939,7 +15178,7 @@ function StackNavigator({
       return changed ? next : prev;
     });
   }, [items]);
-  const animationStyles = useMemo32(() => {
+  const animationStyles = useMemo33(() => {
     return {
       entering: {
         opacity: 0,
@@ -14959,7 +15198,7 @@ function StackNavigator({
     };
   }, [direction]);
   const shouldAnimateSize = containerSize !== void 0;
-  const contentStyle = useMemo32(() => {
+  const contentStyle = useMemo33(() => {
     if (!containerSize) return void 0;
     const style3 = {
       // width: containerSize.width,
@@ -15037,7 +15276,7 @@ function StackNavigator({
     }
     return defaultRenderHeader(headerProps);
   };
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "div",
     {
       className: cx("n-flex n-flex-col", className),
@@ -15053,13 +15292,13 @@ function StackNavigator({
       }
     },
     showHeader && renderHeaderContent(),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React84.createElement(
       "div",
       {
         className: cx("n-relative n-overflow-hidden", contentClassName),
         style: contentStyle
       },
-      /* @__PURE__ */ React82.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ React82.createElement(
+      /* @__PURE__ */ React84.createElement(StackRenderContext.Provider, { value: renderContentCache }, /* @__PURE__ */ React84.createElement(
         AnimatePresence,
         {
           duration: 200,
@@ -15068,7 +15307,7 @@ function StackNavigator({
           mode: "wait",
           onChildStateChange: handleChildStateChange
         },
-        /* @__PURE__ */ React82.createElement(
+        /* @__PURE__ */ React84.createElement(
           StackNavigatorCard,
           {
             key: top.key,
@@ -15088,15 +15327,15 @@ var StackNavigatorCard = ({
   style: style2,
   className
 }) => {
-  const ref = React82.useRef(null);
+  const ref = React84.useRef(null);
   const size = useSize(ref);
-  const renderContext = React82.useContext(StackRenderContext);
+  const renderContext = React84.useContext(StackRenderContext);
   const renderContent = renderContext?.[item.key] ?? item.renderContent;
-  React82.useEffect(() => {
+  React84.useEffect(() => {
     if (!size || size.width === 0 || size.height === 0) return;
     onSizeChange(item.key, size);
   }, [item.key, onSizeChange, size]);
-  return /* @__PURE__ */ React82.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
+  return /* @__PURE__ */ React84.createElement("div", { ref, className: cx("n-flex n-flex-col", className), style: style2 }, renderContent?.());
 };
 function defaultRenderHeader({
   showDivider,
@@ -15105,13 +15344,13 @@ function defaultRenderHeader({
   right,
   title
 }) {
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React84.createElement(
     BaseToolbar,
     {
       innerClassName: "n-px-1",
       showDivider,
       enableAbsoluteBreakpoint: false,
-      left: showBackButton && /* @__PURE__ */ React82.createElement(
+      left: showBackButton && /* @__PURE__ */ React84.createElement(
         Button,
         {
           className: "-n-mx-2",
@@ -15122,7 +15361,7 @@ function defaultRenderHeader({
       ),
       right
     },
-    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ React82.createElement(Body, null, title) : title
+    typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ React84.createElement(Body, null, title) : title
   );
 }
 
@@ -15134,16 +15373,16 @@ var NavigatorScreen = Object.assign(
     [navigatorScreenIdentifier]: true
   }
 );
-var NavigatorScreenContext = React83.createContext(null);
+var NavigatorScreenContext = React85.createContext(null);
 function useNavigator() {
-  const context = React83.useContext(NavigatorScreenContext);
+  const context = React85.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigator must be used within a Navigator screen");
   }
   return context.navigation;
 }
 function useNavigatorRoute() {
-  const context = React83.useContext(NavigatorScreenContext);
+  const context = React85.useContext(NavigatorScreenContext);
   if (!context) {
     throw new Error("useNavigatorRoute must be used within a Navigator screen");
   }
@@ -15171,7 +15410,7 @@ function NavigatorImpl({
   showHeader,
   renderHeader
 }) {
-  const screens = useMemo33(() => {
+  const screens = useMemo34(() => {
     const configs = [];
     Children4.forEach(children, (child) => {
       if (!isNavigatorScreenElement(child)) return;
@@ -15179,7 +15418,7 @@ function NavigatorImpl({
     });
     return configs;
   }, [children]);
-  const screenMap = useMemo33(() => {
+  const screenMap = useMemo34(() => {
     const map = /* @__PURE__ */ new Map();
     for (const screen of screens) {
       if (map.has(screen.name)) {
@@ -15268,7 +15507,7 @@ function NavigatorImpl({
     },
     [createEntry, screenMap]
   );
-  const items = useMemo33(() => {
+  const items = useMemo34(() => {
     return stack.flatMap((entry) => {
       const screen = screenMap.get(entry.name);
       if (!screen) return [];
@@ -15306,7 +15545,7 @@ function NavigatorImpl({
           onBack: headerProps.onBack
         }),
         renderContent: () => {
-          return /* @__PURE__ */ React83.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
+          return /* @__PURE__ */ React85.createElement(NavigatorScreenContext.Provider, { value: context }, evaluateOption(screen.children, context));
         }
       };
     });
@@ -15314,7 +15553,7 @@ function NavigatorImpl({
   const shouldShowHeader = evaluateOption(showHeader, {
     stack
   });
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React85.createElement(
     StackNavigator,
     {
       items,
@@ -15354,7 +15593,7 @@ function ListNavigator({
   renderHeader,
   selectedIds
 }) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React86.createElement(
     ListNavigatorInternal,
     {
       initialRoute: { name: "screen", params: { id: void 0 } },
@@ -15372,7 +15611,7 @@ function ListNavigator({
       className,
       style: style2
     },
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React86.createElement(
       ListNavigatorInternal.Screen,
       {
         name: "screen",
@@ -15387,7 +15626,7 @@ function ListNavigator({
         const nestedItem = items.find(
           (item) => isSubMenuItem(item) && item.id === route.params.id
         );
-        return /* @__PURE__ */ React84.createElement(
+        return /* @__PURE__ */ React86.createElement(
           ListMenu,
           {
             items: nestedItem?.items ?? items,
@@ -15412,18 +15651,18 @@ function ListNavigator({
 
 // src/components/Message.tsx
 import { uuid as uuid2 } from "@noya-app/noya-utils";
-import React85, { forwardRef as forwardRef25, memo as memo29, useMemo as useMemo34 } from "react";
-var Message = memo29(
-  forwardRef25(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
+import React87, { forwardRef as forwardRef26, memo as memo30, useMemo as useMemo35 } from "react";
+var Message = memo30(
+  forwardRef26(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = uuid2();
     const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
-    const styles3 = useMemo34(
+    const styles3 = useMemo35(
       () => role === "user" ? {
         backgroundColor: userMessageBackgroundColor
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ React85.createElement(
+    return /* @__PURE__ */ React87.createElement(
       "div",
       {
         className: cx(
@@ -15431,15 +15670,15 @@ var Message = memo29(
           role === "user" ? "n-flex-row-reverse" : "n-flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ React85.createElement(
+      role === "assistant" ? /* @__PURE__ */ React87.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ React85.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ React85.createElement(
+        /* @__PURE__ */ React87.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ React87.createElement(
         Avatar,
         {
           userId: !user ? randomId : user?.id,
@@ -15448,7 +15687,7 @@ var Message = memo29(
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ React85.createElement(
+      /* @__PURE__ */ React87.createElement(
         "div",
         {
           className: cx(
@@ -15468,9 +15707,9 @@ var Message = memo29(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 import { Link1Icon } from "@noya-app/noya-icons";
-import React86 from "react";
+import React88 from "react";
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ React86.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React88.createElement("div", { className: "n-flex n-flex-col gap-0.5" }, /* @__PURE__ */ React88.createElement(
     "a",
     {
       href: url,
@@ -15478,15 +15717,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__ */ React86.createElement("div", { className: "n-flex n-gap-1 n-items-center n-p-2" }, /* @__PURE__ */ React86.createElement(Link1Icon, { className: "n-w-[15px] n-h-[15px] n-flex-shrink-0" })),
-    /* @__PURE__ */ React86.createElement(DividerVertical, null),
-    /* @__PURE__ */ React86.createElement(Small, { className: "n-truncate n-p-2 n-flex-1" }, url)
+    /* @__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)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ React86.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
+  return /* @__PURE__ */ React88.createElement("div", { className: "n-flex n-flex-col n-gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -15500,7 +15739,7 @@ function getPipelineResultLink(value) {
 }
 
 // src/components/ResizableContainer.tsx
-import React87, { useCallback as useCallback33, useRef as useRef27, useState as useState32 } from "react";
+import React89, { useCallback as useCallback33, useRef as useRef27, useState as useState32 } from "react";
 var ResizableContainer = ({
   children,
   minWidth,
@@ -15569,7 +15808,7 @@ var ResizableContainer = ({
     },
     [shouldResetWidth]
   );
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React89.createElement(
     "div",
     {
       ref: containerRef,
@@ -15577,7 +15816,7 @@ var ResizableContainer = ({
       style: { position: "relative", ...style2 },
       className
     },
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React89.createElement(
       "div",
       {
         ref: resizeableRef,
@@ -15588,7 +15827,7 @@ var ResizableContainer = ({
         }
       },
       typeof children === "function" ? children({ width }) : children,
-      /* @__PURE__ */ React87.createElement(
+      /* @__PURE__ */ React89.createElement(
         "div",
         {
           ref: handleRef,
@@ -15613,7 +15852,7 @@ var ResizableContainer = ({
           onPointerUp: handlePointerUp,
           onPointerCancel: handlePointerUp
         },
-        /* @__PURE__ */ React87.createElement(
+        /* @__PURE__ */ React89.createElement(
           "div",
           {
             style: {
@@ -15631,7 +15870,7 @@ var ResizableContainer = ({
           }
         )
       ),
-      drag && /* @__PURE__ */ React87.createElement(
+      drag && /* @__PURE__ */ React89.createElement(
         "div",
         {
           style: {
@@ -15654,7 +15893,7 @@ function clamp5(value, min, max) {
 
 // src/components/RingProgress.tsx
 import { clamp as clamp6 } from "@noya-app/noya-utils";
-import * as React88 from "react";
+import * as React90 from "react";
 function RingProgress({
   value,
   dividedBy = 100,
@@ -15670,14 +15909,14 @@ function RingProgress({
   const safeDivisor = dividedBy > 0 ? dividedBy : 1;
   const clampedRaw = clamp6(value, 0, safeDivisor);
   const clampedPercent = clampedRaw / safeDivisor * 100;
-  const radius = React88.useMemo(() => (size - thickness) / 2, [size, thickness]);
-  const circumference = React88.useMemo(() => 2 * Math.PI * radius, [radius]);
-  const dashOffset = React88.useMemo(
+  const radius = React90.useMemo(() => (size - thickness) / 2, [size, thickness]);
+  const circumference = React90.useMemo(() => 2 * Math.PI * radius, [radius]);
+  const dashOffset = React90.useMemo(
     () => (100 - clampedPercent) / 100 * circumference,
     [circumference, clampedPercent]
   );
   const trackStroke = trackColor ?? "var(--n-input-background, rgba(0,0,0,0.08))";
-  const colorClass = React88.useMemo(() => {
+  const colorClass = React90.useMemo(() => {
     switch (colorScheme) {
       case "primary":
         return "n-stroke-primary";
@@ -15690,7 +15929,7 @@ function RingProgress({
         return "n-stroke-text";
     }
   }, [colorScheme]);
-  const computedStroke = React88.useMemo(() => {
+  const computedStroke = React90.useMemo(() => {
     if (color) return color;
     switch (colorScheme) {
       case "primary":
@@ -15704,7 +15943,7 @@ function RingProgress({
         return "var(--n-text, currentColor)";
     }
   }, [color, colorScheme]);
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React90.createElement(
     "span",
     {
       className: cx("n-inline-flex n-items-center n-justify-center", className),
@@ -15715,7 +15954,7 @@ function RingProgress({
       "aria-valuemax": safeDivisor,
       "aria-label": ariaLabel
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React90.createElement(
       "svg",
       {
         width: size,
@@ -15723,7 +15962,7 @@ function RingProgress({
         viewBox: `0 0 ${size} ${size}`,
         style: { display: "block" }
       },
-      /* @__PURE__ */ React88.createElement(
+      /* @__PURE__ */ React90.createElement(
         "circle",
         {
           cx: size / 2,
@@ -15734,7 +15973,7 @@ function RingProgress({
           strokeWidth: thickness
         }
       ),
-      /* @__PURE__ */ React88.createElement(
+      /* @__PURE__ */ React90.createElement(
         "circle",
         {
           cx: size / 2,
@@ -15758,13 +15997,49 @@ function RingProgress({
 }
 
 // src/components/ScrollableSidebar.tsx
-import React89 from "react";
+import React91 from "react";
 function ScrollableSidebar({ children }) {
-  return /* @__PURE__ */ React89.createElement("div", { className: "n-relative n-flex n-flex-col n-flex-1 n-max-h-full" }, /* @__PURE__ */ React89.createElement(ScrollArea, null, 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));
 }
 
 // src/components/Section.tsx
-import React90, { memo as memo30, useMemo as useMemo36 } from "react";
+import React93, { memo as memo31, useMemo as useMemo37 } from "react";
 var titleIconStyle = {
   marginRight: "6px",
   alignSelf: "flex-start",
@@ -15785,14 +16060,14 @@ function SectionHeader({
   titleClassName,
   onClickTitle
 }) {
-  const headerStyle = useMemo36(
+  const headerStyle = useMemo37(
     () => ({
       minHeight: INPUT_HEIGHT,
       ...style2
     }),
     [style2]
   );
-  const titleElement = title ? /* @__PURE__ */ React90.createElement(
+  const titleElement = title ? /* @__PURE__ */ React93.createElement(
     InspectorPrimitives_exports.Title,
     {
       $textStyle: titleTextStyle,
@@ -15800,16 +16075,16 @@ function SectionHeader({
     },
     title
   ) : null;
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React93.createElement(
     InspectorPrimitives_exports.SectionHeader,
     {
       style: headerStyle,
       className
     },
-    titleIcon && /* @__PURE__ */ React90.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, "\u200B", renderIcon(titleIcon)),
-    titleElement && /* @__PURE__ */ React90.createElement(React90.Fragment, null, onClickTitle ? /* @__PURE__ */ React90.createElement(Button, { variant: "none", onClick: onClickTitle }, titleElement) : titleElement),
-    headerSeparator === "space" && /* @__PURE__ */ React90.createElement(Spacer.Horizontal, null),
-    headerSeparator === "dot" && /* @__PURE__ */ React90.createElement(
+    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(
       Text,
       {
         variant: titleTextStyle,
@@ -15835,7 +16110,7 @@ var SectionInternal = ({
   titleClassName,
   headerStyle: headerStyleProp
 }) => {
-  const style2 = useMemo36(
+  const style2 = useMemo37(
     () => ({
       display: "flex",
       flexDirection: "column",
@@ -15846,15 +16121,15 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = React90.Children.toArray(children).some((child) => !!child);
-  const headerStyle = useMemo36(
+  const hasChildren = React93.Children.toArray(children).some((child) => !!child);
+  const headerStyle = useMemo37(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
       ...headerStyleProp
     }),
     [hasChildren, headerStyleProp]
   );
-  return /* @__PURE__ */ React90.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React93.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React93.createElement(
     SectionHeader,
     {
       style: headerStyle,
@@ -15866,7 +16141,7 @@ var SectionInternal = ({
       right,
       headerSeparator
     }
-  ), /* @__PURE__ */ React90.createElement(IndentContext.Provider, { value: 0 }, children));
+  ), /* @__PURE__ */ React93.createElement(IndentContext.Provider, { value: 0 }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -15879,12 +16154,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React93.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ React90.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ React90.createElement(
+      title: /* @__PURE__ */ React93.createElement("div", { className: "n-flex n-gap-1 n-items-center" }, props.title, /* @__PURE__ */ React93.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -15895,26 +16170,26 @@ var ExpandableSection = ({
     expanded && props.children
   );
 };
-var Section = memo30(function InspectorSection({
+var Section = memo31(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ React90.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React90.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ React93.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React93.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 import { ToggleGroup as ToggleGroupPrimitive2 } from "radix-ui";
-import React91, {
+import React94, {
   createContext as createContext13,
-  forwardRef as forwardRef26,
+  forwardRef as forwardRef27,
   useCallback as useCallback34,
   useContext as useContext15,
-  useMemo as useMemo37
+  useMemo as useMemo38
 } from "react";
 var SegmentedControlContext = createContext13({
   colorScheme: "primary"
 });
-var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
+var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
   value,
   tooltip,
   title,
@@ -15925,7 +16200,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
   ...props
 }, forwardedRef) {
   const { colorScheme } = useContext15(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ React91.createElement(
+  const itemElement = /* @__PURE__ */ React94.createElement(
     ToggleGroupPrimitive2.Item,
     {
       ref: forwardedRef,
@@ -15956,7 +16231,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       ),
       ...props
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React94.createElement(
       "span",
       {
         className: cx(
@@ -15968,7 +16243,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ React91.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React94.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -15981,7 +16256,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   className,
   style: style2
 }) {
-  const contextValue = useMemo37(() => ({ colorScheme }), [colorScheme]);
+  const contextValue = useMemo38(() => ({ colorScheme }), [colorScheme]);
   const { fieldId: id } = useLabel({ fieldId: idProp });
   const handleValueChange = useCallback34(
     (value2) => {
@@ -15990,7 +16265,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React91.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React94.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React94.createElement(
     ToggleGroupPrimitive2.Root,
     {
       id,
@@ -16009,13 +16284,13 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ React91.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ React94.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 import * as PopperPrimitive from "@radix-ui/react-popper";
-import React92, { memo as memo31, useMemo as useMemo38 } from "react";
+import React95, { memo as memo32, useMemo as useMemo39 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
@@ -16030,7 +16305,7 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbarContainer = memo31(
+var SelectionToolbarContainer = memo32(
   function SelectionToolbarContainer2({
     rect,
     children,
@@ -16044,15 +16319,15 @@ var SelectionToolbarContainer = memo31(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React92.useRef(null);
+    const containerRef = React95.useRef(null);
     const size = useSize(containerRef, "width");
-    const virtualRef = useMemo38(
+    const virtualRef = useMemo39(
       () => ({
         current: createVirtualElement(rect)
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ React92.createElement(
+    const popperContent = /* @__PURE__ */ React95.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16070,7 +16345,7 @@ var SelectionToolbarContainer = memo31(
           [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
-      /* @__PURE__ */ React92.createElement(
+      /* @__PURE__ */ React95.createElement(
         "div",
         {
           ref: containerRef,
@@ -16087,7 +16362,7 @@ var SelectionToolbarContainer = memo31(
         children
       )
     );
-    return /* @__PURE__ */ React92.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React92.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ React95.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React95.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
   }
 );
 
@@ -16098,8 +16373,8 @@ import {
   DropdownChevronIcon as DropdownChevronIcon3
 } from "@noya-app/noya-icons";
 import { Select } from "radix-ui";
-import React93, {
-  useMemo as useMemo39,
+import React96, {
+  useMemo as useMemo40,
   useState as useState33
 } from "react";
 var readOnlyStyle = {
@@ -16124,7 +16399,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelType = useLabelType();
-  return /* @__PURE__ */ React93.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React96.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React96.createElement(
     Button,
     {
       id,
@@ -16136,10 +16411,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ React93.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
-    label && labelType === "inset" && /* @__PURE__ */ React93.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React93.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ React93.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ React93.createElement(Select.Value, { placeholder })),
-    /* @__PURE__ */ React93.createElement(
+    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(
       DropdownChevronIcon3,
       {
         className: cx(
@@ -16187,8 +16462,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     }
     setInternalOpen(open2);
   };
-  const readOnlyButton = useMemo39(
-    () => /* @__PURE__ */ React93.createElement(
+  const readOnlyButton = useMemo40(
+    () => /* @__PURE__ */ React96.createElement(
       Button,
       {
         id,
@@ -16198,11 +16473,11 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ React93.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ React96.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
-  const contentStyle = useMemo39(() => {
+  const contentStyle = useMemo40(() => {
     return {
       width: "var(--radix-select-trigger-width)",
       minWidth: "max-content",
@@ -16210,7 +16485,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ React93.createElement(
+  const content = /* @__PURE__ */ React96.createElement(
     Select.Root,
     {
       value,
@@ -16218,7 +16493,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React96.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -16233,7 +16508,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ React93.createElement(Select.Portal, null, /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React96.createElement(Select.Portal, null, /* @__PURE__ */ React96.createElement(
       Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -16244,14 +16519,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ React93.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React93.createElement(
+      /* @__PURE__ */ React96.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React96.createElement(
         ChevronUpIcon,
         {
           className: cx("n-transition-transform n-duration-100")
         }
       )),
-      /* @__PURE__ */ React93.createElement(Select.Viewport, null, /* @__PURE__ */ React93.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ React93.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React93.createElement(ChevronDownIcon, null))
+      /* @__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))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -16259,12 +16534,12 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 import { Slider as RadixSlider } from "radix-ui";
-import React94, { memo as memo32, useCallback as useCallback35, useMemo as useMemo40 } from "react";
+import React97, { memo as memo33, useCallback as useCallback35, useMemo as useMemo41 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
-var Slider = memo32(function Slider2({
+var Slider = memo33(function Slider2({
   style: style2,
   className,
   value,
@@ -16278,7 +16553,7 @@ var Slider = memo32(function Slider2({
   readOnly = false,
   ...props
 }) {
-  const arrayValue = useMemo40(
+  const arrayValue = useMemo41(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
@@ -16292,7 +16567,7 @@ var Slider = memo32(function Slider2({
     [onValueChange]
   );
   const ratio = (arrayValue[0] - min) / (max - min);
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React97.createElement(
     RadixSlider.Root,
     {
       min,
@@ -16310,7 +16585,7 @@ var Slider = memo32(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React94.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React97.createElement("div", { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ React97.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-l n-bg-slider-active-background",
@@ -16319,7 +16594,7 @@ var Slider = memo32(function Slider2({
           width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
         }
       }
-    ), /* @__PURE__ */ React94.createElement(
+    ), /* @__PURE__ */ React97.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-r n-bg-input-background",
@@ -16329,7 +16604,7 @@ var Slider = memo32(function Slider2({
         }
       }
     )),
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React97.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
@@ -16347,28 +16622,28 @@ var Slider = memo32(function Slider2({
 });
 
 // src/components/sorting/createSharedDrag.tsx
-import * as React95 from "react";
+import * as React98 from "react";
 function createSharedDrag() {
-  const dragRegistrationContext = React95.createContext(null);
-  const activeDragContext = React95.createContext(
+  const dragRegistrationContext = React98.createContext(null);
+  const activeDragContext = React98.createContext(
     null
   );
   const sharedDragProps = {
     dragRegistrationContext,
     activeDragContext
   };
-  const Provider = (props) => /* @__PURE__ */ React95.createElement(SharedDragProvider, { sharedDragProps, ...props });
+  const Provider = (props) => /* @__PURE__ */ React98.createElement(SharedDragProvider, { sharedDragProps, ...props });
   return {
     Provider,
-    Sortable: (props) => /* @__PURE__ */ React95.createElement(Sortable, { sharedDragProps, ...props }),
+    Sortable: (props) => /* @__PURE__ */ React98.createElement(Sortable, { sharedDragProps, ...props }),
     props: sharedDragProps
   };
 }
 
 // src/components/Stepper.tsx
 import { clamp as clamp7 } from "@noya-app/noya-utils";
-import React96, { memo as memo33, useCallback as useCallback36, useMemo as useMemo41 } from "react";
-var Stepper = memo33(function Stepper2({
+import React99, { memo as memo34, useCallback as useCallback36, useMemo as useMemo42 } from "react";
+var Stepper = memo34(function Stepper2({
   style: style2,
   className,
   value: valueProp,
@@ -16385,7 +16660,7 @@ var Stepper = memo33(function Stepper2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const value = useMemo41(() => {
+  const value = useMemo42(() => {
     return clamp7(valueProp, min, max);
   }, [valueProp, min, max]);
   const handleValueChange = useCallback36(
@@ -16395,7 +16670,7 @@ var Stepper = memo33(function Stepper2({
     },
     [onValueChange, min, max]
   );
-  return /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React99.createElement(
     "div",
     {
       id,
@@ -16407,7 +16682,7 @@ var Stepper = memo33(function Stepper2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React99.createElement(
       Button,
       {
         icon: "MinusIcon",
@@ -16415,7 +16690,7 @@ var Stepper = memo33(function Stepper2({
         onClick: () => handleValueChange(value - step)
       }
     ),
-    /* @__PURE__ */ React96.createElement(InputField2.Root, { className: "n-flex-1" }, /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React99.createElement(InputField2.Root, { className: "n-flex-1" }, /* @__PURE__ */ React99.createElement(
       InputField2.NumberInput,
       {
         value,
@@ -16424,7 +16699,7 @@ var Stepper = memo33(function Stepper2({
         readOnly
       }
     )),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React99.createElement(
       Button,
       {
         icon: "PlusIcon",
@@ -16437,7 +16712,7 @@ var Stepper = memo33(function Stepper2({
 
 // src/components/Switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import * as React97 from "react";
+import * as React100 from "react";
 var Switch = function Switch2({
   id,
   value,
@@ -16449,7 +16724,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React100.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -16468,12 +16743,12 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React97.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__ */ 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]" })
   );
 };
 
 // src/components/Tabs.tsx
-import * as React98 from "react";
+import * as React101 from "react";
 function Tabs({
   value,
   onValueChange,
@@ -16488,7 +16763,7 @@ function Tabs({
     value,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ React98.createElement("div", { ...props, className: cx("n-flex n-flex-col", props.className) }, /* @__PURE__ */ React98.createElement("div", { className: "n-flex n-flex-row n-px-3" }, /* @__PURE__ */ React98.createElement(
+  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(
     SegmentedControl,
     {
       className: "n-flex-1",
@@ -16497,19 +16772,19 @@ function Tabs({
       variant,
       items: selectableItems
     }
-  )), /* @__PURE__ */ React98.createElement(Divider, null), renderContent({ value: activeTab }));
+  )), /* @__PURE__ */ React101.createElement(Divider, null), renderContent({ value: activeTab }));
 }
 
 // src/components/UserPointer.tsx
-import React99, { memo as memo34, useMemo as useMemo42 } from "react";
-var UserPointerContainer = memo34(function UserPointerContainer2({
+import React102, { memo as memo35, useMemo as useMemo43 } from "react";
+var UserPointerContainer = memo35(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React102.createElement(
     "div",
     {
       style: {
@@ -16526,17 +16801,23 @@ var UserPointerContainer = memo34(function UserPointerContainer2({
     children
   );
 });
-var UserNameTag = memo34(function UserNameTag2({
+var UserNameTag = memo35(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
-  children
+  children,
+  variant = "rounded",
+  size = "medium",
+  bordered = true
 }) {
-  return /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React102.createElement(
     "span",
     {
       className: cx(
-        "n-relative n-inline-block n-rounded-full n-text-xs n-font-medium n-leading-none n-text-white n-shadow-sm n-px-2 n-py-1.5 n-border n-border-background",
+        "n-relative n-inline-block n-text-xs n-font-medium n-leading-none n-text-white n-shadow-sm",
+        bordered && "n-border n-border-background",
+        size === "small" ? "n-p-1" : "n-px-2 n-py-1.5",
+        variant === "rounded" ? "n-rounded-full" : "n-rounded-none",
         className
       ),
       style: {
@@ -16548,14 +16829,14 @@ var UserNameTag = memo34(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = memo34(function PointerIcon({
+var UserPointerIcon = memo35(function PointerIcon({
   size,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React102.createElement(
     "svg",
     {
       width: size,
@@ -16570,7 +16851,7 @@ var UserPointerIcon = memo34(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React99.createElement(
+    /* @__PURE__ */ React102.createElement(
       "polygon",
       {
         points,
@@ -16583,31 +16864,35 @@ var UserPointerIcon = memo34(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = memo34(function UserPointer2({
+var UserPointer = memo35(function UserPointer2({
   userId,
   name,
   visible = true,
   point,
   backgroundColor,
   style: style2,
-  className
+  className,
+  showPointerIcon = true,
+  labelVariant = "rounded",
+  labelSize = "medium",
+  bordered = true
 }) {
-  const userBackgroundColor = useMemo42(
+  const userBackgroundColor = useMemo43(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = useMemo42(
+  const pointerOverlapStyle = useMemo43(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = useMemo42(
+  const nameTagOverlapStyle = useMemo43(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React102.createElement(
     UserPointerContainer,
     {
       point,
@@ -16615,18 +16900,21 @@ var UserPointer = memo34(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React99.createElement("div", { className: "n-relative" }, /* @__PURE__ */ React99.createElement(
+    name && /* @__PURE__ */ React102.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ React102.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React99.createElement(
+    ), /* @__PURE__ */ React102.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
-        style: nameTagOverlapStyle
+        style: showPointerIcon ? nameTagOverlapStyle : void 0,
+        variant: labelVariant,
+        size: labelSize,
+        bordered
       },
       name
     ))
@@ -16635,10 +16923,16 @@ var UserPointer = memo34(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React105, { memo as memo36, useImperativeHandle as useImperativeHandle9, useMemo as useMemo46, useRef as useRef30 } from "react";
+import React108, {
+  memo as memo37,
+  useCallback as useCallback38,
+  useImperativeHandle as useImperativeHandle9,
+  useMemo as useMemo47,
+  useRef as useRef30
+} from "react";
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React103, { useMemo as useMemo44, useRef as useRef28, useState as useState34 } from "react";
+import React106, { useMemo as useMemo45, useRef as useRef28, useState as useState34 } from "react";
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -16647,20 +16941,20 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/VerticalTabMenu.tsx
-import React102, { useMemo as useMemo43 } from "react";
+import React105, { useMemo as useMemo44 } from "react";
 
 // src/components/Toolbar.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React101, {
+import React104, {
   createContext as createContext15,
   useContext as useContext16
 } from "react";
 
 // src/components/ToolbarDrawer.tsx
-import React100, { forwardRef as forwardRef27, memo as memo35 } from "react";
-var ToolbarDrawer = memo35(
-  forwardRef27(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ React100.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React100.createElement(
+import React103, { forwardRef as forwardRef28, memo as memo36 } from "react";
+var ToolbarDrawer = memo36(
+  forwardRef28(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
+    return /* @__PURE__ */ React103.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ React103.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",
@@ -16681,8 +16975,8 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = React101.useState(false);
-  return /* @__PURE__ */ React101.createElement(
+  const [open, setOpen] = React104.useState(false);
+  return /* @__PURE__ */ React104.createElement(
     DropdownMenu,
     {
       open,
@@ -16694,7 +16988,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React104.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -16710,7 +17004,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ React101.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React101.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React101.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ React104.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ React104.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React104.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -16724,8 +17018,8 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     content: itemContent,
     checked
   } = item;
-  const [open, setOpen] = React101.useState(false);
-  const content = /* @__PURE__ */ React101.createElement("span", null, /* @__PURE__ */ React101.createElement(
+  const [open, setOpen] = React104.useState(false);
+  const content = /* @__PURE__ */ React104.createElement("span", null, /* @__PURE__ */ React104.createElement(
     Popover,
     {
       open,
@@ -16734,7 +17028,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       showArrow: false,
       sideOffset: SIDE_OFFSET,
       portalContainer,
-      trigger: /* @__PURE__ */ React101.createElement(
+      trigger: /* @__PURE__ */ React104.createElement(
         Button,
         {
           disabled,
@@ -16747,7 +17041,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => setOpen(false) }) : itemContent
   ));
-  return tooltip && !open ? /* @__PURE__ */ React101.createElement(
+  return tooltip && !open ? /* @__PURE__ */ React104.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -16767,7 +17061,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ React101.createElement(
+  const content = /* @__PURE__ */ React104.createElement(
     Button,
     {
       as,
@@ -16784,7 +17078,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__ */ React101.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React101.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ React104.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ React104.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -16800,13 +17094,13 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ React101.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ React104.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ React101.createElement(ToolbarMenuPopover, { item, portalContainer });
+    return /* @__PURE__ */ React104.createElement(ToolbarMenuPopover, { item, portalContainer });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ React101.createElement(
+    return /* @__PURE__ */ React104.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -16818,7 +17112,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ React101.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ React104.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
@@ -16830,8 +17124,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   displayFilter = "iconAndText",
   dividerOverflow
 }) {
-  return /* @__PURE__ */ React101.createElement(React101.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React104.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -16856,21 +17150,21 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = React101.useMemo(
+  const allMenuItems = React104.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   useKeyboardShortcuts3(
-    React101.useMemo(
+    React104.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React104.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React101.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React101.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React104.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React104.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -16878,7 +17172,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React101.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React101.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React104.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ React104.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -16899,19 +17193,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = useMemo43(() => {
+  const style2 = useMemo44(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React105.createElement(
     "div",
     {
       className: "n-w-[47px] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
       style: style2
     },
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React105.createElement(
       ToolbarMenu,
       {
         items,
@@ -16943,7 +17237,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = useMemo44(
+  const allTabItems = useMemo45(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -16951,11 +17245,11 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const leftSelectableTabItems = useMemo44(
+  const leftSelectableTabItems = useMemo45(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = useMemo44(
+  const rightSelectableTabItems = useMemo45(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
@@ -16963,14 +17257,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
   } : { activeValue: void 0, isSidebarCollapsed: true };
-  return /* @__PURE__ */ React103.createElement(
+  return /* @__PURE__ */ React106.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && /* @__PURE__ */ React103.createElement(
+    hasTabs && /* @__PURE__ */ React106.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17008,9 +17302,9 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       }
     ),
-    hasTabs && /* @__PURE__ */ React103.createElement(DividerVertical, { className: "n-h-full" }),
-    /* @__PURE__ */ React103.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ React103.createElement(
+    hasTabs && /* @__PURE__ */ React106.createElement(DividerVertical, { className: "n-h-full" }),
+    /* @__PURE__ */ React106.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ React106.createElement(
       Drawer,
       {
         ref: leftSidebarRef,
@@ -17036,7 +17330,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ React103.createElement(
+    rightPanel && /* @__PURE__ */ React106.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17067,7 +17361,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React104, { useCallback as useCallback37, useMemo as useMemo45, useRef as useRef29 } from "react";
+import React107, { useCallback as useCallback37, useMemo as useMemo46, useRef as useRef29 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -17240,7 +17534,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   const hasLeftPanel = !!leftPanel;
   const hasRightPanel = !!rightPanel;
   const hasCenterPanel = !!centerPanel;
-  const autoSaveId = useMemo45(() => {
+  const autoSaveId = useMemo46(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
   const layoutIds = getLayoutIds({
@@ -17267,7 +17561,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   });
   const [data, setData] = usePersistentStateObject(clientStorage, storageKey, {});
   const layoutGroup = data?.[propertyKey];
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo45(() => {
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo46(() => {
     return getLayoutCollapsedState({
       layoutGroup,
       propertyKey,
@@ -17325,7 +17619,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [setData, propertyKey]
   );
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React107.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -17336,7 +17630,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ React104.createElement(React104.Fragment, null, leftSidebarOptions.showTabs && leftTabItems && /* @__PURE__ */ React104.createElement(
+    leftPanel && /* @__PURE__ */ React107.createElement(React107.Fragment, null, leftSidebarOptions.showTabs && leftTabItems && /* @__PURE__ */ React107.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17345,7 +17639,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), leftSidebarOptions.showTabs && leftTabItems && !leftSidebarCollapsed && /* @__PURE__ */ React104.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React104.createElement(
+    ), leftSidebarOptions.showTabs && leftTabItems && !leftSidebarCollapsed && /* @__PURE__ */ React107.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React107.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -17358,8 +17652,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React104.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ React104.createElement(
+    ), /* @__PURE__ */ React107.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ React107.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -17370,7 +17664,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React104.createElement(
+    rightPanel && /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(PanelResizeHandle, { className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React107.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -17383,7 +17677,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React104.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React104.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React107.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React107.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -17397,13 +17691,21 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
 });
 
 // src/components/workspace/renderPanelChildren.tsx
-function renderPanelChildren(fn, activeTabValue) {
+function renderPanelChildren(fn, props) {
   if (typeof fn === "function") {
-    return fn({ activeTabValue });
+    return fn(props);
   }
   return fn;
 }
 
+// src/components/workspace/WorkspaceSideContext.tsx
+import { createContext as createContext16, useContext as useContext17 } from "react";
+var WorkspaceSideContext = createContext16({});
+var WorkspaceSideProvider = WorkspaceSideContext.Provider;
+function useWorkspaceSide() {
+  return useContext17(WorkspaceSideContext);
+}
+
 // src/components/workspace/WorkspaceLayout.tsx
 var defaultLeftTabItems = [
   {
@@ -17463,7 +17765,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   } = {},
   theme
 }, forwardedRef) {
-  const containerRef = React105.useRef(null);
+  const containerRef = React108.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -17563,24 +17865,57 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React105.createElement(
+  const isDrawerActive = sideType === "drawer" || sideType === "auto" && parentSize.width <= sideTypeBreakpoint;
+  const closeLeftSidebar = useCallback38(() => {
+    if (isDrawerActive) {
+      leftSidebarRef.current?.collapse();
+    }
+  }, [isDrawerActive]);
+  const closeRightSidebar = useCallback38(() => {
+    if (isDrawerActive) {
+      rightSidebarRef.current?.collapse();
+    }
+  }, [isDrawerActive]);
+  const leftChildrenProps = useMemo47(() => {
+    return {
+      activeTabValue: leftTabValue,
+      closeSidebar: closeLeftSidebar
+    };
+  }, [leftTabValue, closeLeftSidebar]);
+  const rightChildrenProps = useMemo47(() => {
+    return {
+      activeTabValue: rightTabValue,
+      closeSidebar: closeRightSidebar
+    };
+  }, [rightTabValue, closeRightSidebar]);
+  const leftSidebarProviderValue = useMemo47(() => {
+    return {
+      closeSidebar: closeLeftSidebar
+    };
+  }, [closeLeftSidebar]);
+  const rightSidebarProviderValue = useMemo47(() => {
+    return {
+      closeSidebar: closeRightSidebar
+    };
+  }, [closeRightSidebar]);
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ React108.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    leftTabValue ? renderPanelChildren(left, leftTabValue) : null
+    /* @__PURE__ */ React108.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React105.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ React108.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    rightTabValue ? renderPanelChildren(right, rightTabValue) : null
+    /* @__PURE__ */ React108.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ React105.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = useMemo46(
+  const centerPanel = /* @__PURE__ */ React108.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = useMemo47(
     () => ({
       minSize: leftSidebarMinPercentage,
       maxSize: leftSidebarMaxPercentage,
@@ -17598,7 +17933,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = useMemo46(
+  const rightSidebarOptions = useMemo47(
     () => ({
       minSize: rightSidebarMinPercentage,
       maxSize: rightSidebarMaxPercentage,
@@ -17618,17 +17953,20 @@ 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__ */ React105.createElement(
+  return /* @__PURE__ */ React108.createElement(
     "div",
     {
       ref: containerRef,
       id,
-      className: cx("n-flex n-flex-col n-bg-canvas-background n-relative", className),
+      className: cx(
+        "n-flex n-flex-col n-bg-canvas-background n-relative",
+        className
+      ),
       style: style2,
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ React105.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React105.createElement(
+    /* @__PURE__ */ React108.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ React108.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -17650,12 +17988,12 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     ))
   );
 });
-var PanelInner = memo36(function PanelInner2({
+var PanelInner = memo37(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React108.createElement(
     "div",
     {
       style: style2,
@@ -17670,22 +18008,22 @@ function getFirstTabValue(items, defaultValue2) {
 }
 
 // src/contexts/ImageDataContext.tsx
-import * as React106 from "react";
-var ImageDataContext = React106.createContext(
+import * as React109 from "react";
+var ImageDataContext = React109.createContext(
   void 0
 );
-var ImageDataProvider = React106.memo(function ImageDataProvider2({
+var ImageDataProvider = React109.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React106.useMemo(
+  const contextValue = React109.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React106.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React109.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React106.useContext(ImageDataContext);
+  const value = React109.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -17734,6 +18072,9 @@ function useTheme() {
   return theme;
 }
 
+// src/theme/proseTheme.ts
+var proseTheme = "n-prose n-prose-sm n-max-w-none [[data-theme='dark']_&]:n-prose-invert prose-a:n-text-blue-600";
+
 // src/utils/createSectionedMenu.ts
 function withSeparators(elements2, separator2) {
   const result = [];
@@ -17836,11 +18177,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round as round2 } from "@noya-app/noya-utils";
-import * as React107 from "react";
+import * as React110 from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React107.memo(function DimensionInput2({
+var DimensionInput = React110.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -17850,15 +18191,15 @@ var DimensionInput = React107.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React107.useCallback(
+  const handleNudgeValue = React110.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React107.useCallback(
+  const handleSetValue = React110.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React107.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React107.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React110.createElement(LabeledField, { label, labelType: "inset" }, /* @__PURE__ */ React110.createElement(InputField2.Root, { id, width: size }, /* @__PURE__ */ React110.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : round2(value, 2),
@@ -17885,11 +18226,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-import React108, {
-  forwardRef as forwardRef28,
-  memo as memo39
+import React111, {
+  forwardRef as forwardRef29,
+  memo as memo40
 } from "react";
-var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React108.createElement(
+var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
   "div",
   {
     ref,
@@ -17897,8 +18238,8 @@ var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React108.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React108.createElement(
+var SectionHeader2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React111.createElement(
   "div",
   {
     ref,
@@ -17909,7 +18250,7 @@ var Title = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React108.createElement(
+var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
   "div",
   {
     ref,
@@ -17917,7 +18258,7 @@ var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React10
     ...props
   }
 ));
-var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React108.createElement(
+var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
   "div",
   {
     ref,
@@ -17925,7 +18266,7 @@ var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React108.createElement(
+var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
   "input",
   {
     ref,
@@ -17934,7 +18275,7 @@ var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React108.createElement(
+var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React111.createElement(
   "span",
   {
     ref,
@@ -17942,14 +18283,14 @@ var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React108.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React108.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = forwardRef28(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ React111.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React111.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = forwardRef29(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React111.createElement(
     "label",
     {
       ref,
@@ -17961,7 +18302,7 @@ var RowLabel = forwardRef28(function RowLabel2({
     }
   );
 });
-var LabeledRow = memo39(function LabeledRow2({
+var LabeledRow = memo40(function LabeledRow2({
   id,
   children,
   label,
@@ -17969,7 +18310,7 @@ var LabeledRow = memo39(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React108.createElement(Row, { id, className }, /* @__PURE__ */ React108.createElement(Column, null, /* @__PURE__ */ React108.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React108.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React108.createElement(Row, null, children)));
+  return /* @__PURE__ */ React111.createElement(Row, { id, className }, /* @__PURE__ */ React111.createElement(Column, null, /* @__PURE__ */ React111.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React111.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React111.createElement(Row, null, children)));
 });
 export {
   AIAssistantInput,
@@ -17978,6 +18319,7 @@ export {
   ActionMenu,
   ActivityIndicator,
   ActivityLog,
+  Anchor,
   AnimatePresence,
   Avatar,
   AvatarStack,
@@ -18071,6 +18413,7 @@ export {
   SUPPORTED_CANVAS_UPLOAD_TYPES,
   SUPPORTED_IMAGE_UPLOAD_TYPES,
   ScrollArea,
+  ScrollArea22 as ScrollArea2,
   ScrollableSidebar,
   SearchCompletionMenu,
   Section,
@@ -18108,6 +18451,7 @@ export {
   UserAvatar,
   UserPointer,
   WorkspaceLayout,
+  WorkspaceSideProvider,
   acceptsDrop,
   colorForStringValues,
   colorFromString,
@@ -18153,6 +18497,7 @@ export {
   portalScopeDataSetName,
   portalScopePropName,
   portalScopeProps,
+  proseTheme,
   renderIcon,
   separator,
   styles,
@@ -18187,6 +18532,7 @@ export {
   usePlatformModKey,
   usePortalScopeId,
   useTheme,
+  useWorkspaceSide,
   validateDropIndicator,
   withDragProvider,
   withSeparatorElements