@noya-app/noya-designsystem 0.1.52 → 0.1.54

package/dist/index.mjs

@@ -381,7 +381,7 @@ var ClientStorage = class {
 var clientStorage = new ClientStorage();
 
 // src/components/ActionMenu.tsx
-import React25, { useMemo as useMemo11 } from "react";
+import React26, { useMemo as useMemo11 } from "react";
 
 // src/theme/index.ts
 import tailwindConfig from "@noya-app/noya-tailwind-config";
@@ -422,27 +422,57 @@ var INPUT_HEIGHT = 27;
 // src/components/DropdownMenu.tsx
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
-import React24, {
+import React25, {
   useMemo as useMemo10
 } from "react";
 
+// src/contexts/PortalScopeContext.tsx
+import * as React5 from "react";
+var PortalScopeContext = React5.createContext(void 0);
+var PortalScopeProvider = React5.memo(function PortalScopeProvider2({
+  children,
+  portalScopeId
+}) {
+  return /* @__PURE__ */ React5.createElement(PortalScopeContext.Provider, { value: portalScopeId }, children);
+});
+function usePortalScopeId() {
+  return React5.useContext(PortalScopeContext) ?? "";
+}
+var portalScopeDataSetName = "noyaPortalScope";
+var portalScopePropName = `data-noya-portal-scope`;
+function portalScopeProps(id) {
+  return {
+    [portalScopePropName]: id
+  };
+}
+function getClosestPortalScope(element) {
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+  const closest = element.closest(`[${portalScopePropName}]`);
+  if (!closest || !(closest instanceof HTMLElement)) {
+    return;
+  }
+  return closest.dataset[portalScopeDataSetName];
+}
+
 // src/components/internal/Menu.tsx
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React21, { memo as memo8 } from "react";
+import React22, { memo as memo9 } from "react";
 
 // src/contexts/DesignSystemConfiguration.tsx
 import { getCurrentPlatform } from "@noya-app/noya-keymap";
-import * as React20 from "react";
+import * as React21 from "react";
 
 // src/components/Toast.tsx
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React10 from "react";
+import React11 from "react";
 
 // src/components/IconButton.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/components/Button.tsx
-import React7, {
+import React8, {
   forwardRef as forwardRef3,
   useCallback as useCallback10,
   useMemo as useMemo4
@@ -513,10 +543,10 @@ function mergeConflictingClassNames(classNames, options) {
 
 // src/components/Tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React6 from "react";
+import * as React7 from "react";
 
 // src/components/Text.tsx
-import React5, { forwardRef as forwardRef2 } from "react";
+import React6, { forwardRef as forwardRef2 } from "react";
 var elements = {
   title: "h1",
   subtitle: "h1",
@@ -559,7 +589,7 @@ var Text = forwardRef2(function Text2({
   ...rest
 }, forwardedRef) {
   const Component = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     Component,
     {
       ref: forwardedRef,
@@ -578,27 +608,27 @@ var Text = forwardRef2(function Text2({
   );
 });
 var Heading1 = forwardRef2(
-  (props, ref) => /* @__PURE__ */ React5.createElement(Text, { ref, ...props, variant: "heading1" })
+  (props, ref) => /* @__PURE__ */ React6.createElement(Text, { ref, ...props, variant: "heading1" })
 );
 var Heading2 = forwardRef2(
-  (props, ref) => /* @__PURE__ */ React5.createElement(Text, { ref, ...props, variant: "heading2" })
+  (props, ref) => /* @__PURE__ */ React6.createElement(Text, { ref, ...props, variant: "heading2" })
 );
 var Heading3 = forwardRef2(
-  (props, ref) => /* @__PURE__ */ React5.createElement(Text, { ref, ...props, variant: "heading3" })
+  (props, ref) => /* @__PURE__ */ React6.createElement(Text, { ref, ...props, variant: "heading3" })
 );
 var Heading4 = forwardRef2(
-  (props, ref) => /* @__PURE__ */ React5.createElement(Text, { ref, ...props, variant: "heading4" })
+  (props, ref) => /* @__PURE__ */ React6.createElement(Text, { ref, ...props, variant: "heading4" })
 );
 var Heading5 = forwardRef2(
-  (props, ref) => /* @__PURE__ */ React5.createElement(Text, { ref, ...props, variant: "heading5" })
+  (props, ref) => /* @__PURE__ */ React6.createElement(Text, { ref, ...props, variant: "heading5" })
 );
 var Body = forwardRef2(
-  (props, ref) => /* @__PURE__ */ React5.createElement(Text, { ref, ...props, variant: "body" })
+  (props, ref) => /* @__PURE__ */ React6.createElement(Text, { ref, ...props, variant: "body" })
 );
 var Small = forwardRef2(
-  (props, ref) => /* @__PURE__ */ React5.createElement(Text, { ref, ...props, variant: "small" })
+  (props, ref) => /* @__PURE__ */ React6.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ React5.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ React6.createElement(
   "span",
   {
     style: {
@@ -609,14 +639,16 @@ var Italic = ({ children }) => /* @__PURE__ */ React5.createElement(
 );
 
 // src/components/Tooltip.tsx
-var Tooltip = React6.memo(function Tooltip2({
+var Tooltip = React7.memo(function Tooltip2({
   children,
   content,
   sideOffset = 2
 }) {
-  return /* @__PURE__ */ React6.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React6.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React6.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React6.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React6.createElement(
+  const portalScopeId = usePortalScopeId();
+  return /* @__PURE__ */ React7.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React7.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React7.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React7.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React7.createElement(
     TooltipPrimitive.Content,
     {
+      ...portalScopeProps(portalScopeId),
       side: "bottom",
       align: "center",
       sideOffset,
@@ -665,7 +697,7 @@ var Button = forwardRef3(function Button2({
     "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
     disabled ? "opacity-25" : "",
     !className?.includes("flex") ? "flex-none" : "",
-    active ? "bg-primary text-white hover:bg-primary-light active:bg-primary" : variantStyles[variant],
+    active ? "bg-primary-pastel text-primary hover:bg-primary-pastel-light min-w-[31px]" : variantStyles[variant],
     sizeStyles[variant === "thin" ? "thin" : variant === "floating" && size2 !== "small" ? "floating" : variant === "none" ? "none" : size2]
   );
   const buttonClassName = useMemo4(() => {
@@ -673,7 +705,7 @@ var Button = forwardRef3(function Button2({
       categories: ["position"]
     }) : baseClassName;
   }, [className, baseClassName]);
-  const buttonElement = /* @__PURE__ */ React7.createElement(
+  const buttonElement = /* @__PURE__ */ React8.createElement(
     Component,
     {
       ref: forwardedRef,
@@ -688,7 +720,7 @@ var Button = forwardRef3(function Button2({
       }, []),
       ...rest
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       "span",
       {
         className: "min-h-[19px] flex items-center flex-1 justify-center leading-[15px]",
@@ -697,33 +729,33 @@ var Button = forwardRef3(function Button2({
       children
     )
   );
-  return tooltip ? /* @__PURE__ */ React7.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
+  return tooltip ? /* @__PURE__ */ React8.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
 });
 var Button_default = Button;
 
 // src/components/Icons.tsx
 import * as Icons from "@noya-app/noya-icons";
-import * as React8 from "react";
+import * as React9 from "react";
 function renderIcon(iconName) {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName];
-    return /* @__PURE__ */ React8.createElement(Icon, null);
+    return /* @__PURE__ */ React9.createElement(Icon, null);
   }
   return iconName;
 }
 
 // src/components/IconButton.tsx
-var IconButton = React9.memo(
-  React9.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
+var IconButton = React10.memo(
+  React10.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const Icon = Icons[iconName];
-    const style2 = React9.useMemo(() => {
+    const style2 = React10.useMemo(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ React9.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React10.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React10.createElement(
       Icon,
       {
         color: color ?? (selected ? cssVars.colors.iconSelected : cssVars.colors.icon),
@@ -740,37 +772,37 @@ var Toast = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     ToastPrimitive.Root,
     {
       className: "px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-popover text-text-muted",
       ...props
     },
-    title && /* @__PURE__ */ React10.createElement(
+    title && /* @__PURE__ */ React11.createElement(
       ToastPrimitive.Title,
       {
         className: `mb-[5px] ${textStyles.label} font-bold text-text`
       },
       title
     ),
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       ToastPrimitive.Description,
       {
         className: `${textStyles.small} text-text-muted`
       },
       content
     ),
-    children && /* @__PURE__ */ React10.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children),
-    /* @__PURE__ */ React10.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React10.createElement(IconButton, { iconName: "Cross1Icon" }))
+    children && /* @__PURE__ */ React11.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children),
+    /* @__PURE__ */ React11.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React11.createElement(IconButton, { iconName: "Cross1Icon" }))
   );
 };
-var ToastProvider = ({ children }) => /* @__PURE__ */ React10.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React10.createElement(ToastPrimitive.Viewport, { className: "fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" }));
+var ToastProvider = ({ children }) => /* @__PURE__ */ React11.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React11.createElement(ToastPrimitive.Viewport, { className: "fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" }));
 
 // src/contexts/DialogContext.tsx
-import React18, {
-  createContext as createContext3,
+import React19, {
+  createContext as createContext4,
   useCallback as useCallback13,
-  useContext as useContext3,
+  useContext as useContext4,
   useMemo as useMemo7,
   useRef as useRef11,
   useState as useState13
@@ -778,17 +810,17 @@ import React18, {
 
 // src/components/Dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React12, {
+import React13, {
   forwardRef as forwardRef6,
   useImperativeHandle,
   useRef as useRef9
 } from "react";
 
 // src/components/Spacer.tsx
-import * as React11 from "react";
-var SpacerVertical = React11.forwardRef(
+import * as React12 from "react";
+var SpacerVertical = React12.forwardRef(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       "span",
       {
         className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
@@ -801,9 +833,9 @@ var SpacerVertical = React11.forwardRef(
     );
   }
 );
-var SpacerHorizontal = React11.forwardRef(
+var SpacerHorizontal = React12.forwardRef(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       "span",
       {
         className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
@@ -823,7 +855,7 @@ var Spacer;
 })(Spacer || (Spacer = {}));
 
 // src/components/Dialog.tsx
-var StyledOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var StyledOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -832,7 +864,7 @@ var StyledOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 var StyledContent = forwardRef6(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     DialogPrimitive.Content,
     {
       ref,
@@ -852,7 +884,7 @@ var StyledContent = forwardRef6(({ className, children, ...props }, ref) => {
     children
   );
 });
-var StyledTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var StyledTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -863,7 +895,7 @@ var StyledTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-var StyledDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var StyledDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -893,7 +925,7 @@ var Dialog = forwardRef6(function Dialog2({
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ React12.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React12.createElement(StyledOverlay, null), /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(StyledOverlay, null), /* @__PURE__ */ React13.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -905,7 +937,7 @@ var Dialog = forwardRef6(function Dialog2({
         onInteractOutside: (event) => event.preventDefault()
       }
     },
-    showCloseButton && /* @__PURE__ */ React12.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React12.createElement(
+    showCloseButton && /* @__PURE__ */ React13.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React13.createElement(
       IconButton,
       {
         iconName: "Cross1Icon",
@@ -917,13 +949,13 @@ var Dialog = forwardRef6(function Dialog2({
         }
       }
     )),
-    title && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(StyledTitle, null, title), /* @__PURE__ */ React12.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React12.createElement(StyledDescription, null, description), /* @__PURE__ */ React12.createElement(Spacer.Vertical, { size: 20 })),
+    title && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(StyledTitle, null, title), /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React13.createElement(StyledDescription, null, description), /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
 var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style2, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -936,42 +968,42 @@ var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style2, .
 
 // src/components/InputField.tsx
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
-import React17, {
-  createContext as createContext2,
+import React18, {
+  createContext as createContext3,
   forwardRef as forwardRef9,
-  memo as memo6,
+  memo as memo7,
   useCallback as useCallback12,
-  useContext as useContext2,
+  useContext as useContext3,
   useId,
   useMemo as useMemo6,
   useState as useState12
 } from "react";
 
 // src/hooks/useLabel.ts
-import React13 from "react";
-var LabelContext = React13.createContext({
+import React14 from "react";
+var LabelContext = React14.createContext({
   fieldId: "",
   label: void 0
 });
 var useLabel = ({ label, fieldId }) => {
-  const { label: labelFromContext, fieldId: fieldIdFromContext } = React13.useContext(LabelContext);
+  const { label: labelFromContext, fieldId: fieldIdFromContext } = React14.useContext(LabelContext);
   return {
     label: label ?? labelFromContext,
     fieldId: fieldId ?? fieldIdFromContext
   };
 };
-var LabelPositionContext = React13.createContext({
+var LabelPositionContext = React14.createContext({
   position: "start"
 });
 var useLabelPosition = () => {
-  const { position } = React13.useContext(LabelPositionContext);
+  const { position } = React14.useContext(LabelPositionContext);
   return position;
 };
-var LabelWidthContext = React13.createContext({
+var LabelWidthContext = React14.createContext({
   width: 100
 });
 var useLabelWidth = () => {
-  const { width } = React13.useContext(LabelWidthContext);
+  const { width } = React14.useContext(LabelWidthContext);
   return width;
 };
 
@@ -1011,7 +1043,7 @@ var startBaseStyles = "absolute left-1.5 inset-y-0 flex items-center";
 
 // src/components/internal/TextInput.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React14, {
+import React15, {
   forwardRef as forwardRef7,
   useCallback as useCallback11,
   useEffect as useEffect9,
@@ -1021,7 +1053,7 @@ import React14, {
 } from "react";
 
 // src/contexts/GlobalInputBlurContext.tsx
-import { createContext, useContext, useEffect as useEffect8 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8 } from "react";
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1041,10 +1073,10 @@ var defaultValue = /* @__PURE__ */ (() => {
   };
   return value;
 })();
-var GlobalInputBlurContext = createContext(defaultValue);
+var GlobalInputBlurContext = createContext2(defaultValue);
 var GlobalInputBlurProvider = GlobalInputBlurContext.Provider;
 var useGlobalInputBlur = () => {
-  return useContext(GlobalInputBlurContext);
+  return useContext2(GlobalInputBlurContext);
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
@@ -1061,7 +1093,7 @@ function useGlobalInputBlurTrigger() {
 
 // src/components/internal/TextInput.tsx
 var ReadOnlyTextInput = forwardRef7(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1104,7 +1136,7 @@ var ControlledTextInput = forwardRef7(function ControlledTextInput2({
     },
     [onFocus, onFocusChange]
   );
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1133,7 +1165,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   submitOnBlur = true,
   ...rest
 }, forwardedRef) {
-  const ref = React14.useRef(null);
+  const ref = React15.useRef(null);
   const latestValue = useRef10(value);
   latestValue.current = value;
   const userDidEdit = useRef10(false);
@@ -1216,7 +1248,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "input",
     {
       ref: composeRefs(ref, forwardedRef),
@@ -1248,21 +1280,21 @@ var TextInput_default = forwardRef7(function TextInput(props, forwardedRef) {
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ React14.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ React15.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ React14.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React15.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ React14.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React15.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Label.tsx
-import React15, { forwardRef as forwardRef8, memo as memo5 } from "react";
+import React16, { forwardRef as forwardRef8, memo as memo6 } from "react";
 var labelStyles = "flex items-center select-none z-label relative";
 var labelTextStyles = "font-sans text-label uppercase leading-3 font-bold text-text-muted";
-var Label = memo5(
+var Label = memo6(
   forwardRef8(function Label2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React16.createElement(
       "label",
       {
         ref,
@@ -1286,7 +1318,7 @@ var Label = memo5(
 
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React16 from "react";
+import React17 from "react";
 var closeStyles = {
   all: "unset",
   fontFamily: "inherit"
@@ -1314,9 +1346,11 @@ function Popover({
   onClickClose,
   className
 }) {
-  return /* @__PURE__ */ React16.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React16.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React16.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React16.createElement(
+  const portalScopeId = usePortalScopeId();
+  return /* @__PURE__ */ React17.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React17.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React17.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React17.createElement(
     PopoverPrimitive.Content,
     {
+      ...portalScopeProps(portalScopeId),
       className: cx(
         popoverStyle.base,
         variant === "large" && popoverStyle.large,
@@ -1335,20 +1369,20 @@ function Popover({
       arrowPadding: 2
     },
     children,
-    showArrow && /* @__PURE__ */ React16.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
-    closable && /* @__PURE__ */ React16.createElement(
+    showArrow && /* @__PURE__ */ React17.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
+    closable && /* @__PURE__ */ React17.createElement(
       PopoverPrimitive.Close,
       {
         className: "rounded-full h-[25px] w-[25px] inline-flex items-center justify-center absolute top-[5px] right-[5px]",
         style: closeStyles
       },
-      /* @__PURE__ */ React16.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
+      /* @__PURE__ */ React17.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
     )
   )));
 }
 
 // src/components/InputField.tsx
-var InputFieldContext = createContext2({
+var InputFieldContext = createContext3({
   startWidth: void 0,
   size: "medium",
   isFocused: false,
@@ -1358,7 +1392,7 @@ var InputFieldContext = createContext2({
   startRef: null,
   endRef: null
 });
-var useInputFieldContext = () => useContext2(InputFieldContext);
+var useInputFieldContext = () => useContext3(InputFieldContext);
 var noop2 = () => {
 };
 var getFieldSpacing = ({
@@ -1370,7 +1404,7 @@ var getFieldSpacing = ({
   paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 6}px`
 });
 var InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     DropdownMenu,
     {
       items,
@@ -1378,10 +1412,10 @@ var InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu2({ id,
       align: "end",
       sideOffset: 8
     },
-    children || /* @__PURE__ */ React17.createElement(InputFieldButton, { variant: "floating", id }, /* @__PURE__ */ React17.createElement(DropdownChevronIcon, null))
+    children || /* @__PURE__ */ React18.createElement(InputFieldButton, { variant: "floating", id }, /* @__PURE__ */ React18.createElement(DropdownChevronIcon, null))
   );
 });
-var InputFieldButton = memo6(
+var InputFieldButton = memo7(
   forwardRef9(function InputFieldButton2(props, forwardedRef) {
     const {
       children,
@@ -1421,7 +1455,7 @@ var InputFieldButton = memo6(
       }),
       [style2, variant]
     );
-    return /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement(
       Button,
       {
         as,
@@ -1478,7 +1512,7 @@ var InputElement = forwardRef9(
       [inputClassName]
     );
     if (as === "span") {
-      return /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(
         "span",
         {
           ref,
@@ -1489,7 +1523,7 @@ var InputElement = forwardRef9(
         children
       );
     }
-    return /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement(
       TextInput_default,
       {
         ref,
@@ -1513,7 +1547,7 @@ var InputFieldInput = forwardRef9(function InputFieldInput2({ textAlign, variant
     },
     [onFocusChange]
   );
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     InputElement,
     {
       ref,
@@ -1525,7 +1559,7 @@ var InputFieldInput = forwardRef9(function InputFieldInput2({ textAlign, variant
   );
 });
 var InputFieldTypeahead = (props) => {
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     InputElement,
     {
       as: "span",
@@ -1543,8 +1577,8 @@ var InputFieldTypeahead = (props) => {
         []
       )
     },
-    /* @__PURE__ */ React17.createElement("span", { style: { opacity: 0 } }, props.prefix),
-    props.isFocused && /* @__PURE__ */ React17.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
+    /* @__PURE__ */ React18.createElement("span", { style: { opacity: 0 } }, props.prefix),
+    props.isFocused && /* @__PURE__ */ React18.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
   );
 };
 function parseNumber(value) {
@@ -1600,7 +1634,7 @@ function InputFieldNumberInput(props) {
     },
     [onBlur]
   );
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     InputFieldInput,
     {
       ...rest,
@@ -1613,7 +1647,7 @@ function InputFieldNumberInput(props) {
     }
   );
 }
-var RootContainer = forwardRef9(({ $width, className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+var RootContainer = forwardRef9(({ $width, className, ...props }, ref) => /* @__PURE__ */ React18.createElement(
   "div",
   {
     ref,
@@ -1642,10 +1676,10 @@ function InputFieldRoot({
   label: labelProp
 }) {
   const randomId = useId();
-  const [isFocused, setIsFocused] = React17.useState(false);
-  const startRef = React17.useRef(null);
-  const inputRef = React17.useRef(null);
-  const endRef = React17.useRef(null);
+  const [isFocused, setIsFocused] = React18.useState(false);
+  const startRef = React18.useRef(null);
+  const inputRef = React18.useRef(null);
+  const endRef = React18.useRef(null);
   const measuredInputSize = useSize(inputRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
@@ -1676,15 +1710,15 @@ function InputFieldRoot({
     [startWidth, endWidth, size2, isFocused, handleFocusChange, id, randomId]
   );
   const insetLabel = useMemo6(
-    () => /* @__PURE__ */ React17.createElement(Label, { htmlFor: id, className: "!text-text-disabled" }, labelProp ?? label),
+    () => /* @__PURE__ */ React18.createElement(Label, { htmlFor: id, className: "!text-text-disabled" }, labelProp ?? label),
     [id, labelProp, label]
   );
-  const rootElement = /* @__PURE__ */ React17.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ React17.createElement("span", { ref: startRef, className: startBaseStyles }, start), (end || label) && /* @__PURE__ */ React17.createElement("span", { ref: endRef, className: cx(endStyles, label && end && "gap-1.5") }, labelProp ? insetLabel : label && labelPosition === "inset" && insetLabel, end));
+  const rootElement = /* @__PURE__ */ React18.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ React18.createElement("span", { ref: startRef, className: startBaseStyles }, start), (end || label) && /* @__PURE__ */ React18.createElement("span", { ref: endRef, className: cx(endStyles, label && end && "gap-1.5") }, labelProp ? insetLabel : label && labelPosition === "inset" && insetLabel, end));
   const measuredWidthObject = useMemo6(
     () => measuredInputSize ? { width: measuredInputSize.width + 4 } : void 0,
     [measuredInputSize]
   );
-  return /* @__PURE__ */ React17.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React18.createElement(
     Popover,
     {
       open: true,
@@ -1700,7 +1734,7 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidthObject && /* @__PURE__ */ React17.createElement(
+    measuredWidthObject && /* @__PURE__ */ React18.createElement(
       "div",
       {
         className: "flex flex-col overflow-hidden",
@@ -1725,7 +1759,7 @@ var PrimitiveInputField = ({
     () => ({ ...spacingStyles, ...style2 }),
     [spacingStyles, style2]
   );
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "input",
     {
       style: memoizedStyles,
@@ -1740,10 +1774,10 @@ var PrimitiveInputField = ({
   );
 };
 var InputFieldSubcomponents = {
-  Root: memo6(InputFieldRoot),
-  Input: memo6(InputFieldInput),
-  Typeahead: memo6(InputFieldTypeahead),
-  NumberInput: memo6(InputFieldNumberInput),
+  Root: memo7(InputFieldRoot),
+  Input: memo7(InputFieldInput),
+  Typeahead: memo7(InputFieldTypeahead),
+  NumberInput: memo7(InputFieldNumberInput),
   DropdownMenu: InputFieldDropdownMenu,
   Button: InputFieldButton,
   PrimitiveElement: PrimitiveInputField
@@ -1766,7 +1800,7 @@ var InputFieldComponent = forwardRef9(
       className,
       ...inputProps
     } = props;
-    return /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement(
       InputFieldSubcomponents.Root,
       {
         width,
@@ -1782,7 +1816,7 @@ var InputFieldComponent = forwardRef9(
         style: style2,
         className
       },
-      /* @__PURE__ */ React17.createElement(InputFieldSubcomponents.Input, { ref, ...inputProps }),
+      /* @__PURE__ */ React18.createElement(InputFieldSubcomponents.Input, { ref, ...inputProps }),
       children
     );
   }
@@ -1801,7 +1835,7 @@ function createDeferredPromise() {
   });
   return { promise, resolve, reject };
 }
-var DialogContext = createContext3(void 0);
+var DialogContext = createContext4(void 0);
 var DialogProvider = function DialogProvider2({
   children
 }) {
@@ -1903,7 +1937,7 @@ var DialogProvider = function DialogProvider2({
     if (!dialogRef.current) return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     DialogContext.Provider,
     {
       value: useMemo7(
@@ -1917,7 +1951,7 @@ var DialogProvider = function DialogProvider2({
       )
     },
     children
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Dialog,
     {
       ref: dialogRef,
@@ -1948,7 +1982,7 @@ var DialogProvider = function DialogProvider2({
         [contents]
       )
     },
-    contents?.type === "confirmation" ? /* @__PURE__ */ React18.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React18.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React18.createElement(
+    contents?.type === "confirmation" ? /* @__PURE__ */ React19.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React19.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React19.createElement(
       Button,
       {
         onClick: () => {
@@ -1957,7 +1991,7 @@ var DialogProvider = function DialogProvider2({
         }
       },
       contents.cancelButtonLabel ?? "Cancel"
-    ), /* @__PURE__ */ React18.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React18.createElement(
+    ), /* @__PURE__ */ React19.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React19.createElement(
       Button,
       {
         onClick: () => {
@@ -1966,7 +2000,7 @@ var DialogProvider = function DialogProvider2({
         }
       },
       contents.confirmButtonLabel ?? "OK"
-    )) : contents?.type === "custom" ? /* @__PURE__ */ React18.createElement(React18.Fragment, null, contents.children) : /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(InputField2.Root, null, /* @__PURE__ */ React18.createElement(
+    )) : contents?.type === "custom" ? /* @__PURE__ */ React19.createElement(React19.Fragment, null, contents.children) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(InputField2.Root, null, /* @__PURE__ */ React19.createElement(
       InputField2.Input,
       {
         ref: inputRef,
@@ -1982,7 +2016,7 @@ var DialogProvider = function DialogProvider2({
         },
         onKeyDown: handleKeyDown
       }
-    )), /* @__PURE__ */ React18.createElement(Spacer.Vertical, { size: 20 }), /* @__PURE__ */ React18.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React18.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React18.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React18.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React18.createElement(
+    )), /* @__PURE__ */ React19.createElement(Spacer.Vertical, { size: 20 }), /* @__PURE__ */ React19.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React19.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React19.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React19.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React19.createElement(
       Button,
       {
         disabled: !contents || contents.type !== "input" || !contents.inputValue,
@@ -1993,7 +2027,7 @@ var DialogProvider = function DialogProvider2({
   ));
 };
 function useDialogContext() {
-  const value = useContext3(DialogContext);
+  const value = useContext4(DialogContext);
   if (!value) {
     throw new Error("Missing DialogProvider");
   }
@@ -2014,10 +2048,10 @@ function useOpenDialog() {
 
 // src/contexts/FloatingWindowContext.tsx
 import { uuid } from "@noya-app/noya-utils";
-import React19, { createContext as createContext4, useContext as useContext4, useMemo as useMemo8, useState as useState14 } from "react";
+import React20, { createContext as createContext5, useContext as useContext5, useMemo as useMemo8, useState as useState14 } from "react";
 import { createPortal } from "react-dom";
-var FloatingWindowContext = createContext4(void 0);
-var CurrentWindowContext = createContext4(void 0);
+var FloatingWindowContext = createContext5(void 0);
+var CurrentWindowContext = createContext5(void 0);
 var FloatingWindowProvider = ({
   children
 }) => {
@@ -2027,7 +2061,7 @@ var FloatingWindowProvider = ({
       const id = uuid();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ React19.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ React20.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -2039,12 +2073,12 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ React19.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+  return /* @__PURE__ */ React20.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
     ([id, element]) => createPortal(element, document.body, id)
   ));
 };
 var useFloatingWindowManager = () => {
-  const context = useContext4(FloatingWindowContext);
+  const context = useContext5(FloatingWindowContext);
   if (!context) {
     throw new Error(
       "useFloatingWindow must be used within a FloatingWindowProvider"
@@ -2053,7 +2087,7 @@ var useFloatingWindowManager = () => {
   return context;
 };
 var useCurrentFloatingWindowInternal = () => {
-  const context = useContext4(CurrentWindowContext);
+  const context = useContext5(CurrentWindowContext);
   if (!context) {
     throw new Error("useCurrentWindow must be used within a FloatingWindow");
   }
@@ -2061,30 +2095,30 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = React20.createContext({
+var DesignSystemConfigurationContext = React21.createContext({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = React20.memo(
+var DesignSystemConfigurationProvider = React21.memo(
   function DesignSystemConfigurationProvider2({
     children,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = React20.useState(platform ?? "key");
-    React20.useEffect(() => {
+    const [internalPlatform, setInternalPlatform] = React21.useState(platform ?? "key");
+    React21.useEffect(() => {
       if (platform !== void 0) return;
       if (typeof navigator !== "undefined") {
         setInternalPlatform(getCurrentPlatform(navigator));
       }
     }, [platform]);
-    const contextValue = React20.useMemo(
+    const contextValue = React21.useMemo(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ React20.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React20.createElement(DialogProvider, null, /* @__PURE__ */ React20.createElement(ToastProvider, null, /* @__PURE__ */ React20.createElement(FloatingWindowProvider, null, children))));
+    return /* @__PURE__ */ React21.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React21.createElement(DialogProvider, null, /* @__PURE__ */ React21.createElement(ToastProvider, null, /* @__PURE__ */ React21.createElement(FloatingWindowProvider, null, children))));
   }
 );
 function useDesignSystemConfiguration() {
-  return React20.useContext(DesignSystemConfigurationContext);
+  return React21.useContext(DesignSystemConfigurationContext);
 }
 
 // src/utils/withSeparatorElements.ts
@@ -2144,7 +2178,7 @@ var getMenuItemKey = (item, index) => {
   }
 };
 var CHECKBOX_WIDTH = 15;
-var CHECKBOX_RIGHT_INSET = 8;
+var CHECKBOX_RIGHT_INSET = 6;
 var CHECKBOX_INDENT_WIDTH = 6;
 var styles = {
   separatorStyle: "h-px bg-divider mx-3 my-1",
@@ -2181,7 +2215,7 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
 var ShortcutElement = ({
   children,
   fixedWidth
-}) => /* @__PURE__ */ React21.createElement(
+}) => /* @__PURE__ */ React22.createElement(
   "kbd",
   {
     className: cx(
@@ -2192,12 +2226,12 @@ var ShortcutElement = ({
   },
   children
 );
-var KeyboardShortcut = memo8(function KeyboardShortcut2({
+var KeyboardShortcut = memo9(function KeyboardShortcut2({
   shortcut
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator: separator2 } = getShortcutDisplayParts(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ React21.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ React22.createElement(
     ShortcutElement,
     {
       key,
@@ -2205,19 +2239,19 @@ var KeyboardShortcut = memo8(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, separator2 ? withSeparatorElements(
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, separator2 ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ React21.createElement(ShortcutElement, null, separator2)
+    /* @__PURE__ */ React22.createElement(ShortcutElement, null, separator2)
   ) : keyElements);
 });
-var SectionHeader = memo8(function SectionHeader2({
+var SectionHeader = memo9(function SectionHeader2({
   title,
   variant = "normal",
   id,
   isFirst,
   indented
 }) {
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     "span",
     {
       id,
@@ -2232,7 +2266,7 @@ var SectionHeader = memo8(function SectionHeader2({
         }
       )
     },
-    indented && /* @__PURE__ */ React21.createElement(
+    indented && /* @__PURE__ */ React22.createElement(
       Spacer.Horizontal,
       {
         size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -2244,12 +2278,11 @@ var SectionHeader = memo8(function SectionHeader2({
 
 // src/components/internal/MenuViewport.tsx
 import { ChevronRightIcon } from "@noya-app/noya-icons";
-import React23 from "react";
+import React24 from "react";
 
 // src/components/internal/SelectItem.tsx
-import { CheckIcon } from "@noya-app/noya-icons";
-import React22, { useCallback as useCallback14 } from "react";
-var SelectItem = React22.forwardRef(
+import React23, { useCallback as useCallback14 } from "react";
+var SelectItem = React23.forwardRef(
   ({
     children,
     icon,
@@ -2274,7 +2307,7 @@ var SelectItem = React22.forwardRef(
       []
     );
     if (checked && Components4.CheckboxItem) {
-      return /* @__PURE__ */ React22.createElement("div", { className: "px-1" }, /* @__PURE__ */ React22.createElement(
+      return /* @__PURE__ */ React23.createElement("div", { className: "px-1" }, /* @__PURE__ */ React23.createElement(
         Components4.CheckboxItem,
         {
           checked,
@@ -2286,14 +2319,14 @@ var SelectItem = React22.forwardRef(
             testSelected && styles.testSelectedItemStyle
           )
         },
-        /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }),
-        Components4.ItemIndicator && /* @__PURE__ */ React22.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ React22.createElement(CheckIcon, null)),
-        icon && /* @__PURE__ */ React22.createElement(React22.Fragment, null, renderIcon(icon), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 8 })),
+        /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }),
+        Components4.ItemIndicator && /* @__PURE__ */ React23.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ React23.createElement(Checkmark, null)),
+        icon && /* @__PURE__ */ React23.createElement(React23.Fragment, null, renderIcon(icon), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 8 })),
         children,
-        shortcut && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React22.createElement(KeyboardShortcut, { shortcut }))
+        shortcut && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React23.createElement(KeyboardShortcut, { shortcut }))
       ));
     }
-    return /* @__PURE__ */ React22.createElement("div", { className: "px-1" }, /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React23.createElement("div", { className: "px-1" }, /* @__PURE__ */ React23.createElement(
       Components4.Item,
       {
         className: cx(
@@ -2308,10 +2341,34 @@ var SelectItem = React22.forwardRef(
         onSelect: handleSelectItem,
         ...props
       },
-      /* @__PURE__ */ React22.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ React22.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React22.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ React22.createElement(React22.Fragment, null, renderIcon(icon), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React22.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React22.createElement(KeyboardShortcut, { shortcut })))
+      /* @__PURE__ */ React23.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ React23.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React23.createElement(Checkmark, null)) : indented ? /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ React23.createElement(React23.Fragment, null, renderIcon(icon), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React23.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React23.createElement(KeyboardShortcut, { shortcut })))
     ));
   }
 );
+function Checkmark() {
+  return /* @__PURE__ */ React23.createElement(
+    "svg",
+    {
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      width: 15,
+      height: 15
+    },
+    /* @__PURE__ */ React23.createElement(
+      "path",
+      {
+        className: "scale-90 origin-center",
+        d: "M3 8L6 11L12 5",
+        strokeWidth: "1.1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        stroke: "currentColor"
+      }
+    )
+  );
+}
 
 // src/components/internal/MenuViewport.tsx
 var MenuViewport = ({
@@ -2319,13 +2376,14 @@ var MenuViewport = ({
   Components: Components4,
   onSelect
 }) => {
+  const portalScopeId = usePortalScopeId();
   const hasCheckedItem = items.some(
     (item) => item.type !== "separator" && item.type !== "sectionHeader" && item.checked
   );
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, items.map((item, index) => {
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, items.map((item, index) => {
     switch (item.type) {
       case "separator":
-        return /* @__PURE__ */ React23.createElement(
+        return /* @__PURE__ */ React24.createElement(
           Components4.Separator,
           {
             key: index,
@@ -2333,7 +2391,7 @@ var MenuViewport = ({
           }
         );
       case "sectionHeader":
-        return /* @__PURE__ */ React23.createElement(
+        return /* @__PURE__ */ React24.createElement(
           SectionHeader,
           {
             isFirst: index === 0,
@@ -2344,7 +2402,7 @@ var MenuViewport = ({
         );
       case "submenu":
         if (item.items && Components4.Sub && Components4.SubTrigger && Components4.SubContent && Components4.Portal) {
-          return /* @__PURE__ */ React23.createElement(Components4.Sub, { key: item.id }, /* @__PURE__ */ React23.createElement(
+          return /* @__PURE__ */ React24.createElement(Components4.Sub, { key: item.id }, /* @__PURE__ */ React24.createElement(
             Components4.SubTrigger,
             {
               className: cx(
@@ -2355,9 +2413,10 @@ var MenuViewport = ({
               onClick: (e) => {
                 e.stopPropagation();
                 e.preventDefault();
-              }
+              },
+              disabled: item.disabled
             },
-            /* @__PURE__ */ React23.createElement(
+            /* @__PURE__ */ React24.createElement(
               SelectItem,
               {
                 value: item.id,
@@ -2368,16 +2427,17 @@ var MenuViewport = ({
                 indented: hasCheckedItem,
                 disabled: item.disabled
               },
-              /* @__PURE__ */ React23.createElement("div", { className: "flex items-center flex-1" }, item.title),
-              /* @__PURE__ */ React23.createElement(ChevronRightIcon, { className: "-mr-1" })
+              /* @__PURE__ */ React24.createElement("div", { className: "flex items-center flex-1" }, item.title),
+              /* @__PURE__ */ React24.createElement(ChevronRightIcon, { className: "-mr-1" })
             )
-          ), /* @__PURE__ */ React23.createElement(Components4.Portal, null, /* @__PURE__ */ React23.createElement(
+          ), /* @__PURE__ */ React24.createElement(Components4.Portal, null, /* @__PURE__ */ React24.createElement(
             Components4.SubContent,
             {
+              ...portalScopeProps(portalScopeId),
               alignOffset: -5,
               className: styles.contentStyle
             },
-            /* @__PURE__ */ React23.createElement(
+            /* @__PURE__ */ React24.createElement(
               MenuViewport,
               {
                 items: item.items,
@@ -2388,7 +2448,7 @@ var MenuViewport = ({
           )));
         } else return null;
       default:
-        return /* @__PURE__ */ React23.createElement(
+        return /* @__PURE__ */ React24.createElement(
           SelectItem,
           {
             key: item.value,
@@ -2411,7 +2471,7 @@ var MenuViewport = ({
 // src/components/DropdownMenu.tsx
 var Components = {
   Separator: RadixDropdownMenu.Separator,
-  ItemText: React24.Fragment,
+  ItemText: React25.Fragment,
   Item: RadixDropdownMenu.Item,
   CheckboxItem: RadixDropdownMenu.CheckboxItem,
   ItemIndicator: RadixDropdownMenu.ItemIndicator,
@@ -2437,6 +2497,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     emptyState,
     contentStyle
   } = props;
+  const portalScopeId = usePortalScopeId();
   const keymap = useMemo10(
     () => shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [items, onSelect, shouldBindKeyboardShortcuts]
@@ -2450,16 +2511,17 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     }),
     [contentStyle]
   );
-  return /* @__PURE__ */ React24.createElement(RadixDropdownMenu.Root, { onOpenChange, open }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(RadixDropdownMenu.Root, { onOpenChange, open }, /* @__PURE__ */ React25.createElement(
     RadixDropdownMenu.Trigger,
     {
       ref: forwardedRef,
       asChild: true
     },
     children
-  ), /* @__PURE__ */ React24.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React24.createElement(
+  ), /* @__PURE__ */ React25.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React25.createElement(
     RadixDropdownMenu.Content,
     {
+      ...portalScopeProps(portalScopeId),
       className: styles.contentStyle,
       side,
       sideOffset,
@@ -2470,7 +2532,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
       ...{ onCloseAutoFocus }
     },
     items.length === 0 ? emptyState : null,
-    /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(
       MenuViewport,
       {
         items,
@@ -2501,14 +2563,14 @@ var ActionMenu = memoGeneric(function ActionMenu2({
       ...style2
     };
   }, [selected, style2, variant]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     DropdownMenu,
     {
       items: menuItems,
       onSelect,
       onOpenChange
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(
       IconButton,
       {
         style: internalStyle,
@@ -2522,16 +2584,16 @@ var ActionMenu = memoGeneric(function ActionMenu2({
 });
 
 // src/components/ActivityIndicator.tsx
-import * as React26 from "react";
-var ActivityIndicator = React26.memo(function ActivityIndicator2({
+import * as React27 from "react";
+var ActivityIndicator = React27.memo(function ActivityIndicator2({
   size: size2 = 16,
   opacity = 1,
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
   className
 }) {
-  const opacityStyle = React26.useMemo(() => ({ opacity }), [opacity]);
-  const dynamicStyles = React26.useMemo(
+  const opacityStyle = React27.useMemo(() => ({ opacity }), [opacity]);
+  const dynamicStyles = React27.useMemo(
     () => ({
       border: `2px solid ${trackColor}`,
       borderTopColor: color,
@@ -2540,19 +2602,19 @@ var ActivityIndicator = React26.memo(function ActivityIndicator2({
     }),
     [size2, color, trackColor]
   );
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "div",
     {
       className: cx("flex justify-center items-center", className),
       style: opacityStyle
     },
-    /* @__PURE__ */ React26.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
+    /* @__PURE__ */ React27.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
   );
 });
 
 // src/components/Avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import React27, { forwardRef as forwardRef10, useMemo as useMemo13 } from "react";
+import React28, { forwardRef as forwardRef10, useMemo as useMemo13 } from "react";
 
 // src/utils/colorFromString.ts
 var colorForStringValues = {
@@ -2621,7 +2683,7 @@ var getInnerAvatarStyles = (size2, variant) => {
     minHeight: dimension
   };
 };
-var AvatarRoot = React27.forwardRef(
+var AvatarRoot = React28.forwardRef(
   ({
     className,
     size: size2 = 21,
@@ -2640,7 +2702,7 @@ var AvatarRoot = React27.forwardRef(
       }),
       [backgroundColor, size2, style2]
     );
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React28.createElement(
       AvatarPrimitive.Root,
       {
         ref,
@@ -2655,8 +2717,8 @@ var AvatarRoot = React27.forwardRef(
     );
   }
 );
-var AvatarImage = React27.forwardRef(({ className, size: size2 = 21, variant = "normal", ...props }, ref) => {
-  return /* @__PURE__ */ React27.createElement(
+var AvatarImage = React28.forwardRef(({ className, size: size2 = 21, variant = "normal", ...props }, ref) => {
+  return /* @__PURE__ */ React28.createElement(
     AvatarPrimitive.Image,
     {
       ref,
@@ -2672,9 +2734,9 @@ var AvatarImage = React27.forwardRef(({ className, size: size2 = 21, variant = "
 function getMonogram(text) {
   return text?.at(0)?.toLocaleUpperCase();
 }
-var AvatarFallback = React27.forwardRef(
+var AvatarFallback = React28.forwardRef(
   ({ className, children, style: style2, size: size2 = 21, backgroundColor, ...props }, ref) => {
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React28.createElement(
       AvatarPrimitive.Fallback,
       {
         ref,
@@ -2695,7 +2757,7 @@ var AvatarFallback = React27.forwardRef(
     );
   }
 );
-var Avatar = React27.memo(
+var Avatar = React28.memo(
   forwardRef10(function Avatar2({
     image,
     name,
@@ -2708,7 +2770,7 @@ var Avatar = React27.memo(
     ...props
   }, forwardedRef) {
     const getBackgroundColor = backgroundColor ?? colorFromString(userId ?? name ?? "");
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React28.createElement(
       AvatarRoot,
       {
         ref: forwardedRef,
@@ -2718,7 +2780,7 @@ var Avatar = React27.memo(
         className,
         ...props
       },
-      image ? /* @__PURE__ */ React27.createElement(AvatarImage, { src: image, alt: name, size: size2, variant }) : /* @__PURE__ */ React27.createElement(
+      image ? /* @__PURE__ */ React28.createElement(AvatarImage, { src: image, alt: name, size: size2, variant }) : /* @__PURE__ */ React28.createElement(
         AvatarFallback,
         {
           backgroundColor: getBackgroundColor,
@@ -2730,31 +2792,31 @@ var Avatar = React27.memo(
     );
   })
 );
-var OverflowAvatar = React27.memo(function OverflowAvatar2({
+var OverflowAvatar = React28.memo(function OverflowAvatar2({
   size: size2 = 21,
   count
 }) {
-  return /* @__PURE__ */ React27.createElement(AvatarRoot, { size: size2, backgroundColor: "var(--n-text-disabled)", disabled: true }, /* @__PURE__ */ React27.createElement(AvatarFallback, { backgroundColor: "var(--n-text-disabled)", size: size2 }, "+", count));
+  return /* @__PURE__ */ React28.createElement(AvatarRoot, { size: size2, backgroundColor: "var(--n-text-disabled)", disabled: true }, /* @__PURE__ */ React28.createElement(AvatarFallback, { backgroundColor: "var(--n-text-disabled)", size: size2 }, "+", count));
 });
-var AvatarStack = React27.memo(function AvatarStack2({
+var AvatarStack = React28.memo(function AvatarStack2({
   size: size2 = 21,
   children,
   max = 3,
   className
 }) {
-  const avatarCount = React27.Children.count(children);
+  const avatarCount = React28.Children.count(children);
   const overflowCount = avatarCount - max;
   const childrenArray = useMemo13(() => {
-    const processedChildren = React27.Children.toArray(children).map((child) => React27.cloneElement(child, { size: size2 })).slice(0, max);
+    const processedChildren = React28.Children.toArray(children).map((child) => React28.cloneElement(child, { size: size2 })).slice(0, max);
     if (avatarCount > max) {
       return [
-        /* @__PURE__ */ React27.createElement(OverflowAvatar, { key: "overflow", size: size2, count: overflowCount }),
+        /* @__PURE__ */ React28.createElement(OverflowAvatar, { key: "overflow", size: size2, count: overflowCount }),
         ...processedChildren
       ];
     }
     return processedChildren;
   }, [children, max, size2, avatarCount, overflowCount]);
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     {
       className: cx(
@@ -2764,7 +2826,7 @@ var AvatarStack = React27.memo(function AvatarStack2({
       )
     },
     childrenArray.map((child, index) => {
-      return /* @__PURE__ */ React27.createElement(
+      return /* @__PURE__ */ React28.createElement(
         "div",
         {
           className: cx("relative", size2 > 36 ? "-ml-3" : "-ml-1.5"),
@@ -2777,10 +2839,10 @@ var AvatarStack = React27.memo(function AvatarStack2({
 });
 
 // src/components/NoyaLogo.tsx
-import React28, { forwardRef as forwardRef11 } from "react";
+import React29, { forwardRef as forwardRef11 } from "react";
 var Logo = forwardRef11(function Logo2(props, ref) {
   const fill = props.fill || cssVars.colors.logoFill;
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "svg",
     {
       ref,
@@ -2790,14 +2852,14 @@ var Logo = forwardRef11(function Logo2(props, ref) {
       ...props,
       className: "w-6 aspect-[24/26]"
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       "path",
       {
         d: "M6.5 3H2V12H5V6H6.5C7.32843 6 8 6.67157 8 7.5V12H11V7.5C11 5.01472 8.98528 3 6.5 3Z",
         fill
       }
     ),
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2806,14 +2868,14 @@ var Logo = forwardRef11(function Logo2(props, ref) {
         fill
       }
     ),
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       "path",
       {
         d: "M5 14H2V18.5C2 20.9853 4.01472 23 6.5 23H8V26H11V17H8V20H6.5C5.67157 20 5 19.3284 5 18.5V14Z",
         fill
       }
     ),
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2826,12 +2888,12 @@ var Logo = forwardRef11(function Logo2(props, ref) {
 });
 
 // src/components/ai-assistant/AIAssistantLayout.tsx
-import React30, { forwardRef as forwardRef13 } from "react";
+import React31, { forwardRef as forwardRef13 } from "react";
 
 // src/components/TextArea.tsx
-import React29, {
+import React30, {
   forwardRef as forwardRef12,
-  memo as memo10,
+  memo as memo11,
   useCallback as useCallback15,
   useEffect as useEffect11,
   useRef as useRef12
@@ -2846,7 +2908,7 @@ var useAutoResize = (value) => {
   }, [value]);
   return textareaRef;
 };
-var TextArea = memo10(
+var TextArea = memo11(
   forwardRef12(function TextArea2({
     value,
     onChangeText,
@@ -2875,7 +2937,7 @@ var TextArea = memo10(
       },
       [autoResize, autoResizeRef, forwardedRef]
     );
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       "textarea",
       {
         className: cx(
@@ -2891,7 +2953,7 @@ var TextArea = memo10(
     );
   })
 );
-var TextAreaRow = memo10(
+var TextAreaRow = memo11(
   forwardRef12(function TextAreaRow2({
     className,
     textAreaClassName,
@@ -2900,31 +2962,31 @@ var TextAreaRow = memo10(
     endClassName,
     ...rest
   }, forwardedRef) {
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       "div",
       {
         ref: forwardedRef,
         className: cx("relative w-full h-full", className)
       },
-      /* @__PURE__ */ React29.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
-      /* @__PURE__ */ React29.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
+      /* @__PURE__ */ React30.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
+      /* @__PURE__ */ React30.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
     );
   })
 );
 
 // src/components/ai-assistant/AIAssistantLayout.tsx
 var AIAssistantLoadingIndicator = () => {
-  return /* @__PURE__ */ React30.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React31.createElement(
     Avatar,
     {
       name: "Assistant",
       size: INPUT_HEIGHT,
       backgroundColor: cssVars.colors.primaryPastel
     },
-    /* @__PURE__ */ React30.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-  ), /* @__PURE__ */ React30.createElement("div", { className: "animate-pulse" }, "\u258B"));
+    /* @__PURE__ */ React31.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+  ), /* @__PURE__ */ React31.createElement("div", { className: "animate-pulse" }, "\u258B"));
 };
-var AIAssistantInput = forwardRef13(({ value, onChange, onSubmitClick, onKeyDown, disabled }, ref) => /* @__PURE__ */ React30.createElement(
+var AIAssistantInput = forwardRef13(({ value, onChange, onSubmitClick, onKeyDown, disabled }, ref) => /* @__PURE__ */ React31.createElement(
   TextAreaRow,
   {
     autoResize: true,
@@ -2936,7 +2998,7 @@ var AIAssistantInput = forwardRef13(({ value, onChange, onSubmitClick, onKeyDown
     placeholder: "Tell me what you'd like to do...",
     onKeyDown,
     disabled,
-    end: /* @__PURE__ */ React30.createElement(
+    end: /* @__PURE__ */ React31.createElement(
       IconButton,
       {
         iconName: "ArrowUpIcon",
@@ -2961,13 +3023,13 @@ var AIAssistantLayout = forwardRef13(
     className,
     style: style2
   }, ref) => {
-    return /* @__PURE__ */ React30.createElement("div", { className: cx("flex flex-col flex-1", className), style: style2 }, /* @__PURE__ */ React30.createElement("div", { className: "flex-1 min-h-0 overflow-auto", ref }, /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col gap-2 pb-4 pt-1" }, renderMessages(), isLoading ? renderLoadingIndicator?.() : null)), /* @__PURE__ */ React30.createElement("div", { className: "border-t border-divider pt-1 px-1" }, renderInput()));
+    return /* @__PURE__ */ React31.createElement("div", { className: cx("flex flex-col flex-1", className), style: style2 }, /* @__PURE__ */ React31.createElement("div", { className: "flex-1 min-h-0 overflow-auto", ref }, /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col gap-2 pb-4 pt-1" }, renderMessages(), isLoading ? renderLoadingIndicator?.() : null)), /* @__PURE__ */ React31.createElement("div", { className: "border-t border-divider pt-1 px-1" }, renderInput()));
   }
 );
 
 // src/components/AnimatePresence.tsx
 import { isDeepEqual as isDeepEqual3 } from "@noya-app/noya-utils";
-import React31, {
+import React32, {
   Children as Children2,
   isValidElement as isValidElement2,
   useCallback as useCallback16,
@@ -3047,7 +3109,7 @@ var PresenceChild = ({
   if (animationState === "exited" && !isPresent) {
     return null;
   }
-  return /* @__PURE__ */ React31.createElement("div", { style: mergedAnimationStyles[animationState], className }, children);
+  return /* @__PURE__ */ React32.createElement("div", { style: mergedAnimationStyles[animationState], className }, children);
 };
 var AnimatePresence = ({
   children,
@@ -3122,7 +3184,7 @@ var AnimatePresence = ({
       return filtered;
     });
   }, []);
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, mountedChildren.map(({ child, isPresent, skipInitialAnimation: skipInitialAnimation2 }) => /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, mountedChildren.map(({ child, isPresent, skipInitialAnimation: skipInitialAnimation2 }) => /* @__PURE__ */ React32.createElement(
     PresenceChild,
     {
       key: child.key,
@@ -3138,13 +3200,13 @@ var AnimatePresence = ({
 };
 
 // src/components/Banner.tsx
-import React32 from "react";
+import React33 from "react";
 var bannerStyles = {
   backgroundColor: cssVars.colors.inputBackground,
   color: cssVars.colors.textDisabled
 };
 function Banner({ label = "No items", className, style: style2 }) {
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(
     "div",
     {
       className: cx(
@@ -3153,15 +3215,15 @@ function Banner({ label = "No items", className, style: style2 }) {
       ),
       style: { ...bannerStyles, ...style2 }
     },
-    /* @__PURE__ */ React32.createElement(Small, { color: "textDisabled" }, label)
+    /* @__PURE__ */ React33.createElement(Small, { color: "textDisabled" }, label)
   );
 }
 
 // src/components/Breadcrumbs.tsx
 import { forwardRef as forwardRef14 } from "react";
-import React33 from "react";
+import React34 from "react";
 var BreadcrumbText = forwardRef14(function BreadcrumbText2({ children, className, onClick, ...props }, ref) {
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     Text,
     {
       ...props,
@@ -3181,7 +3243,7 @@ var slashStyle = {
   margin: "0 3px"
 };
 var BreadcrumbSlash = () => {
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "svg",
     {
       width: "7",
@@ -3192,7 +3254,7 @@ var BreadcrumbSlash = () => {
       opacity: 0.5,
       style: slashStyle
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       "path",
       {
         d: "M1 16L6 1",
@@ -3206,16 +3268,16 @@ var BreadcrumbSlash = () => {
 };
 
 // src/components/Checkbox.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 var colorSchemeStyles = {
   normal: "text-text-subtle",
   primary: "text-primary",
   secondary: "text-secondary"
 };
-var Checkbox = React34.memo(
-  React34.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
+var Checkbox = React35.memo(
+  React35.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
-    return /* @__PURE__ */ React34.createElement(
+    return /* @__PURE__ */ React35.createElement(
       "div",
       {
         className: cx(
@@ -3225,7 +3287,7 @@ var Checkbox = React34.memo(
         ),
         style: style2
       },
-      /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React35.createElement(
         "input",
         {
           ref,
@@ -3254,7 +3316,7 @@ var Checkbox = React34.memo(
           id
         }
       ),
-      /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React35.createElement(
         "svg",
         {
           className: `
@@ -3274,7 +3336,7 @@ var Checkbox = React34.memo(
           xmlns: "http://www.w3.org/2000/svg",
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React34.createElement(
+        /* @__PURE__ */ React35.createElement(
           "path",
           {
             d: "M3 6L4.5 7.5L8 4",
@@ -3290,10 +3352,10 @@ var Checkbox = React34.memo(
 
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React36, { forwardRef as forwardRef16, memo as memo12 } from "react";
+import React37, { forwardRef as forwardRef16, memo as memo13 } from "react";
 
 // src/hooks/useHover.ts
-import * as React35 from "react";
+import * as React36 from "react";
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -3323,13 +3385,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React35.useState(false);
-  const state = React35.useRef({
+  const [isHovered, setHovered] = React36.useState(false);
+  const state = React36.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React35.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React35.useMemo(
+  React36.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React36.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -3438,7 +3500,7 @@ var ICON_SIZE_STYLES = {
     delete: "mr-[-2px] scale-[0.60]"
   }
 };
-var Chip = memo12(
+var Chip = memo13(
   forwardRef16(function Chip2({
     colorScheme,
     children,
@@ -3475,7 +3537,7 @@ var Chip = memo12(
       className
     );
     const color = colorScheme === "primary" ? cssVars.colors.primary : colorScheme === "secondary" ? cssVars.colors.secondary : cssVars.colors.text;
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       "span",
       {
         ref: forwardedRef,
@@ -3485,7 +3547,7 @@ var Chip = memo12(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ React36.createElement(
+      addable && /* @__PURE__ */ React37.createElement(
         PlusIcon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].add),
@@ -3497,7 +3559,7 @@ var Chip = memo12(
         }
       ),
       children,
-      deletable && /* @__PURE__ */ React36.createElement(
+      deletable && /* @__PURE__ */ React37.createElement(
         Cross1Icon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].delete),
@@ -3514,10 +3576,10 @@ var Chip = memo12(
 );
 
 // src/components/Collection.tsx
-import React46 from "react";
+import React47 from "react";
 
 // src/components/Grid.tsx
-import React41, { useImperativeHandle as useImperativeHandle3, useRef as useRef16, useState as useState20 } from "react";
+import React42, { useImperativeHandle as useImperativeHandle3, useRef as useRef16, useState as useState20 } from "react";
 
 // src/utils/selection.ts
 function updateSelection(allIds, selectedIds, clickedId, event) {
@@ -3545,17 +3607,17 @@ function updateSelection(allIds, selectedIds, clickedId, event) {
 }
 
 // src/components/EditableText.tsx
-import React37, {
+import React38, {
   forwardRef as forwardRef17,
-  memo as memo13,
+  memo as memo14,
   useCallback as useCallback17,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef15,
   useState as useState18
 } from "react";
-var defaultRenderPreview = (props) => /* @__PURE__ */ React37.createElement(BreadcrumbText, { ...props });
-var EditableText = memo13(
+var defaultRenderPreview = (props) => /* @__PURE__ */ React38.createElement(BreadcrumbText, { ...props });
+var EditableText = memo14(
   forwardRef17(function EditableText2({
     value,
     onChange,
@@ -3631,7 +3693,7 @@ var EditableText = memo13(
       style: textStyle,
       className: textClassName
     });
-    const input = /* @__PURE__ */ React37.createElement("div", { className: "flex absolute inset-0 -mx-1.5 -my-1" }, /* @__PURE__ */ React37.createElement(InputField2.Root, { onFocusChange: setFocused }, /* @__PURE__ */ React37.createElement(
+    const input = /* @__PURE__ */ React38.createElement("div", { className: "flex absolute inset-0 -mx-1.5 -my-1" }, /* @__PURE__ */ React38.createElement(InputField2.Root, { onFocusChange: setFocused }, /* @__PURE__ */ React38.createElement(
       InputField2.Input,
       {
         ref: inputRef,
@@ -3671,27 +3733,27 @@ var EditableText = memo13(
         }
       }
     )));
-    return /* @__PURE__ */ React37.createElement("div", { className: cx("flex relative", className), style: style2 }, preview, focused && !readOnly && input);
+    return /* @__PURE__ */ React38.createElement("div", { className: cx("flex relative", className), style: style2 }, preview, focused && !readOnly && input);
   })
 );
 
 // src/components/GridView.tsx
-import React40, {
-  createContext as createContext6,
+import React41, {
+  createContext as createContext7,
   forwardRef as forwardRef18,
-  memo as memo15,
+  memo as memo16,
   useCallback as useCallback20,
-  useContext as useContext6,
+  useContext as useContext7,
   useMemo as useMemo16
 } from "react";
 
 // src/components/ContextMenu.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import React38, { useCallback as useCallback18, useMemo as useMemo15 } from "react";
+import React39, { useCallback as useCallback18, useMemo as useMemo15 } from "react";
 var Components2 = {
   Separator: RadixContextMenu.Separator,
-  ItemText: React38.Fragment,
+  ItemText: React39.Fragment,
   Item: RadixContextMenu.Item,
   CheckboxItem: RadixContextMenu.CheckboxItem,
   ItemIndicator: RadixContextMenu.ItemIndicator,
@@ -3711,6 +3773,7 @@ function ContextMenuRoot({
     () => shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [items, onSelect, shouldBindKeyboardShortcuts]
   );
+  const portalScopeId = usePortalScopeId();
   useKeyboardShortcuts2(keymap);
   const onPointerDown = useCallback18((event) => {
     event.preventDefault();
@@ -3722,39 +3785,46 @@ function ContextMenuRoot({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React38.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ React38.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React38.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React38.createElement(RadixContextMenu.Content, { className: styles.contentStyle }, /* @__PURE__ */ React38.createElement(
-    MenuViewport,
+  return /* @__PURE__ */ React39.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ React39.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React39.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React39.createElement(
+    RadixContextMenu.Content,
     {
-      items,
-      Components: Components2,
-      onSelect: handleSelectItem
-    }
-  ))));
+      ...portalScopeProps(portalScopeId),
+      className: styles.contentStyle
+    },
+    /* @__PURE__ */ React39.createElement(
+      MenuViewport,
+      {
+        items,
+        Components: Components2,
+        onSelect: handleSelectItem
+      }
+    )
+  )));
 }
 var ContextMenu = memoGeneric(ContextMenuRoot);
 
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import * as React39 from "react";
-var ScrollArea = React39.memo(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = React39.useState(null);
-  return /* @__PURE__ */ React39.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React39.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React39.createElement(
+import * as React40 from "react";
+var ScrollArea = React40.memo(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = React40.useState(null);
+  return /* @__PURE__ */ React40.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React40.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React40.createElement(
     RadixScrollArea.Viewport,
     {
       className: "w-full h-full [&>div]:block",
-      ref: React39.useCallback(
+      ref: React40.useCallback(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React39.createElement(
+  ), /* @__PURE__ */ React40.createElement(
     RadixScrollArea.Scrollbar,
     {
       orientation: "vertical",
       className: "scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
     },
-    /* @__PURE__ */ React39.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
+    /* @__PURE__ */ React40.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
   )));
 });
 
@@ -3763,7 +3833,7 @@ var ItemTitle = ({
   showBackground,
   children
 }) => {
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     "span",
     {
       className: cx(
@@ -3778,7 +3848,7 @@ var ItemDescription = ({
   showBackground,
   children
 }) => {
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     "span",
     {
       className: cx(
@@ -3793,7 +3863,7 @@ var SectionTitle = ({
   last = false,
   children
 }) => {
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     "span",
     {
       className: `font-sans text-heading3 font-medium user-select-none truncate ${last ? "text-text" : "text-text-muted"}`
@@ -3826,7 +3896,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { textPosition, bordered, disabled } = useContext6(GridViewContext);
+  const { textPosition, bordered, disabled } = useContext7(GridViewContext);
   const handleClick = useCallback20(
     (event) => {
       event.stopPropagation();
@@ -3849,7 +3919,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
     },
     [onSelect, onKeyDown]
   );
-  let element = /* @__PURE__ */ React40.createElement(
+  let element = /* @__PURE__ */ React41.createElement(
     "div",
     {
       ...props,
@@ -3872,7 +3942,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
       onDoubleClick,
       onContextMenu
     },
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React41.createElement(
       "div",
       {
         className: cx(
@@ -3883,13 +3953,13 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React40.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ React40.createElement(ItemDescription, null, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React40.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5" }, title && /* @__PURE__ */ React40.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React40.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    action && /* @__PURE__ */ React40.createElement("div", { className: "absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5" }, action),
-    loading && /* @__PURE__ */ React40.createElement("div", { className: "flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]" }, /* @__PURE__ */ React40.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React41.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ React41.createElement(ItemDescription, null, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React41.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5" }, title && /* @__PURE__ */ React41.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React41.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    action && /* @__PURE__ */ React41.createElement("div", { className: "absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5" }, action),
+    loading && /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]" }, /* @__PURE__ */ React41.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ React40.createElement(
+    element = /* @__PURE__ */ React41.createElement(
       ContextMenu,
       {
         items: menuItems,
@@ -3900,17 +3970,17 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
     );
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ React40.createElement(
+    element = /* @__PURE__ */ React41.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React40.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React40.createElement(ItemTitle, null, title), /* @__PURE__ */ React40.createElement(ItemDescription, null, subtitle))
+        content: /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React41.createElement(ItemTitle, null, title), /* @__PURE__ */ React41.createElement(ItemDescription, null, subtitle))
       },
       element
     );
   }
   return element;
 });
-var GridViewContext = createContext6({
+var GridViewContext = createContext7({
   minColumnWidth: "220px",
   textPosition: "below",
   bordered: false,
@@ -3958,8 +4028,8 @@ var GridViewRoot = forwardRef18(function GridViewRoot2({
       categories: ["flex"]
     });
   }, [className, scrollable]);
-  const content = /* @__PURE__ */ React40.createElement("div", { className: cx("p-3", contentClassName) }, children);
-  return /* @__PURE__ */ React40.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(
+  const content = /* @__PURE__ */ React41.createElement("div", { className: cx("p-3", contentClassName) }, children);
+  return /* @__PURE__ */ React41.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React41.createElement(
     "div",
     {
       onClick: handleClick,
@@ -3967,7 +4037,7 @@ var GridViewRoot = forwardRef18(function GridViewRoot2({
       ...props,
       ref: forwardedRef
     },
-    scrollable ? /* @__PURE__ */ React40.createElement(ScrollArea, null, content) : content
+    scrollable ? /* @__PURE__ */ React41.createElement(ScrollArea, null, content) : content
   ));
 });
 function GridViewSection({
@@ -3975,13 +4045,13 @@ function GridViewSection({
   className,
   renderEmptyState
 }) {
-  const { minColumnWidth, gap } = useContext6(GridViewContext);
+  const { minColumnWidth, gap } = useContext7(GridViewContext);
   const styles3 = {
     gridTemplateColumns: `repeat(auto-fill, minmax(${minColumnWidth}, 1fr))`,
     gap: `${gap}px`
   };
-  const isEmpty = React40.Children.count(children) === 0;
-  return isEmpty && renderEmptyState ? renderEmptyState() : /* @__PURE__ */ React40.createElement(
+  const isEmpty = React41.Children.count(children) === 0;
+  return isEmpty && renderEmptyState ? renderEmptyState() : /* @__PURE__ */ React41.createElement(
     "div",
     {
       role: "presentation",
@@ -3993,17 +4063,17 @@ function GridViewSection({
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ React40.createElement("div", { className: "px-5" }, /* @__PURE__ */ React40.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ React40.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ React40.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ React41.createElement("div", { className: "px-5" }, /* @__PURE__ */ React41.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ React41.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ React41.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
 ((GridView2) => {
-  GridView2.Root = memo15(GridViewRoot);
+  GridView2.Root = memo16(GridViewRoot);
   GridView2.Item = memoGeneric(GridViewItem);
-  GridView2.Section = memo15(GridViewSection);
-  GridView2.SectionHeader = memo15(GridViewSectionHeader);
+  GridView2.Section = memo16(GridViewSection);
+  GridView2.SectionHeader = memo16(GridViewSectionHeader);
 })(GridView || (GridView = {}));
 
 // src/components/Grid.tsx
@@ -4110,7 +4180,7 @@ var Grid = memoGeneric(
       onFilesDrop
     );
     const { minColumnWidth, gap } = getGridSize(size2);
-    return /* @__PURE__ */ React41.createElement(
+    return /* @__PURE__ */ React42.createElement(
       GridView.Root,
       {
         role: "listbox",
@@ -4127,7 +4197,7 @@ var Grid = memoGeneric(
         ...dropTargetProps,
         ref: fileDropTargetRef
       },
-      items.length > 0 ? /* @__PURE__ */ React41.createElement(GridView.Section, null, items.map((item) => {
+      items.length > 0 ? /* @__PURE__ */ React42.createElement(GridView.Section, null, items.map((item) => {
         const id = getId(item);
         const isDropdownOpen = dropdownOpenId === id;
         const isHovered = testHoveredId === id || currentHoveredId === id || isDropdownOpen;
@@ -4146,7 +4216,7 @@ var Grid = memoGeneric(
             handleSelect(id);
           }
         };
-        const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React41.createElement(
+        const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React42.createElement(
           ActionMenu,
           {
             menuItems,
@@ -4155,7 +4225,7 @@ var Grid = memoGeneric(
             onOpenChange
           }
         ));
-        return /* @__PURE__ */ React41.createElement(
+        return /* @__PURE__ */ React42.createElement(
           GridView.Item,
           {
             key: id,
@@ -4168,7 +4238,7 @@ var Grid = memoGeneric(
             onHoverChange: (isHovering) => {
               setHoveredId(isHovering ? id : void 0);
             },
-            title: /* @__PURE__ */ React41.createElement(
+            title: /* @__PURE__ */ React42.createElement(
               EditableText,
               {
                 tabIndex: isRenaming ? void 0 : -1,
@@ -4185,7 +4255,7 @@ var Grid = memoGeneric(
                 },
                 textClassName: "bg-listview-editing-background max-h-input-height"
               },
-              (props2) => /* @__PURE__ */ React41.createElement(
+              (props2) => /* @__PURE__ */ React42.createElement(
                 "span",
                 {
                   ...props2,
@@ -4196,7 +4266,7 @@ var Grid = memoGeneric(
                 }
               )
             ),
-            subtitle: /* @__PURE__ */ React41.createElement(
+            subtitle: /* @__PURE__ */ React42.createElement(
               "span",
               {
                 className: cx(
@@ -4230,7 +4300,7 @@ var Grid = memoGeneric(
               }
             }
           },
-          thumbnail && /* @__PURE__ */ React41.createElement(
+          thumbnail && /* @__PURE__ */ React42.createElement(
             "div",
             {
               className: cx(
@@ -4248,19 +4318,19 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-import React45, { memo as memo18, useImperativeHandle as useImperativeHandle5, useRef as useRef19, useState as useState22 } from "react";
+import React46, { memo as memo19, useImperativeHandle as useImperativeHandle5, useRef as useRef19, useState as useState22 } from "react";
 
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React43, {
+import React44, {
   Children as Children3,
-  createContext as createContext8,
+  createContext as createContext9,
   forwardRef as forwardRef19,
   isValidElement as isValidElement3,
-  memo as memo17,
+  memo as memo18,
   useCallback as useCallback22,
-  useContext as useContext8,
+  useContext as useContext9,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo18,
@@ -4308,8 +4378,8 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import * as React42 from "react";
-import { memo as memo16 } from "react";
+import * as React43 from "react";
+import { memo as memo17 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var normalizeListTargetIndex = (index, position) => {
   return position === "above" ? index : index + 1;
@@ -4322,7 +4392,7 @@ var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = React42.createContext({
+var SortableItemContext = React43.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -4377,7 +4447,7 @@ function SortableItem({
     setActivatorEvent,
     axis,
     getDropTargetParentIndex
-  } = React42.useContext(SortableItemContext);
+  } = React43.useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
   const { activatorEvent } = useDndContext();
   const {
@@ -4398,7 +4468,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = React42.useCallback((node) => setNodeRef(node), [setNodeRef]);
+  const ref = React43.useCallback((node) => setNodeRef(node), [setNodeRef]);
   const parentIndex = overIndex === -1 ? void 0 : getDropTargetParentIndex?.(overIndex);
   const isValidParent = parentIndex === void 0 || parentIndex === -1 ? false : acceptsDrop2(activeIndex, parentIndex, "inside");
   const overIdAcceptsDrop = overIndex === -1 ? void 0 : acceptsDrop2(activeIndex, overIndex, "inside");
@@ -4435,26 +4505,26 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = React42.useState();
-  const activatorEvent = React42.useRef(null);
-  const [position, setPosition] = React42.useState({
+  const [activeIndex, setActiveIndex] = React43.useState();
+  const activatorEvent = React43.useRef(null);
+  const [position, setPosition] = React43.useState({
     x: 0,
     y: 0
   });
-  const setActivatorEvent = React42.useCallback((event) => {
+  const setActivatorEvent = React43.useCallback((event) => {
     activatorEvent.current = event;
   }, []);
-  const handleDragStart = React42.useCallback(
+  const handleDragStart = React43.useCallback(
     (event) => {
       const index = keys.findIndex((id) => id === event.active.id);
       setActiveIndex(index);
     },
     [keys]
   );
-  const handleDragMove = React42.useCallback((event) => {
+  const handleDragMove = React43.useCallback((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = React42.useCallback(
+  const handleDragEnd = React43.useCallback(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -4481,14 +4551,14 @@ function SortableRoot({
     },
     [acceptsDrop2, axis, keys, onMoveItem, position.x, position.y]
   );
-  const [mounted, setMounted] = React42.useState(false);
-  React42.useEffect(() => {
+  const [mounted, setMounted] = React43.useState(false);
+  React43.useEffect(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     SortableItemContext.Provider,
     {
-      value: React42.useMemo(
+      value: React43.useMemo(
         () => ({
           keys,
           acceptsDrop: acceptsDrop2,
@@ -4507,7 +4577,7 @@ function SortableRoot({
         ]
       )
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
       DndContext,
       {
         sensors,
@@ -4516,7 +4586,7 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React42.createElement(
+      /* @__PURE__ */ React43.createElement(
         SortableContext,
         {
           items: keys,
@@ -4525,14 +4595,14 @@ function SortableRoot({
         children
       ),
       mounted && renderOverlay && createPortal2(
-        /* @__PURE__ */ React42.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ React43.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
   );
 }
 var SortableSubcomponents = {
-  Root: memo16(SortableRoot),
+  Root: memo17(SortableRoot),
   Item: memoGeneric(SortableItem)
 };
 var SortableComponent = memoGeneric(function Sortable(props) {
@@ -4543,11 +4613,11 @@ var SortableComponent = memoGeneric(function Sortable(props) {
     shouldRenderOverlay = true,
     ...rest
   } = props;
-  const keys = React42.useMemo(
+  const keys = React43.useMemo(
     () => items.map(keyExtractor),
     [items, keyExtractor]
   );
-  const renderOverlay = React42.useCallback(
+  const renderOverlay = React43.useCallback(
     (index) => {
       return renderItem(
         items[index],
@@ -4567,14 +4637,14 @@ var SortableComponent = memoGeneric(function Sortable(props) {
     },
     [renderItem, items]
   );
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     SortableSubcomponents.Root,
     {
       ...rest,
       keys,
       renderOverlay: shouldRenderOverlay ? renderOverlay : void 0
     },
-    keys.map((key, index) => /* @__PURE__ */ React42.createElement(SortableSubcomponents.Item, { key, id: key }, (props2) => {
+    keys.map((key, index) => /* @__PURE__ */ React43.createElement(SortableSubcomponents.Item, { key, id: key }, (props2) => {
       return renderItem(
         items[index],
         props2,
@@ -4588,11 +4658,11 @@ var Sortable2 = Object.assign(SortableComponent, SortableSubcomponents);
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
-var ListViewDraggingContext = createContext8({
+var ListViewDraggingContext = createContext9({
   indentation: 12
 });
 ListViewDraggingContext.displayName = "ListViewDraggingContext";
-var ListRowContext = createContext8({
+var ListRowContext = createContext9({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -4610,7 +4680,7 @@ var ListViewRowTitle = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ React43.createElement(
+}) => /* @__PURE__ */ React44.createElement(
   "span",
   {
     className: cx(
@@ -4638,7 +4708,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 1);
   }, [autoFocus]);
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -4677,7 +4747,7 @@ var RowContainer = forwardRef19(
     "aria-selected": ariaSelected,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React43.createElement(
+    return /* @__PURE__ */ React44.createElement(
       "div",
       {
         ref,
@@ -4755,7 +4825,7 @@ var ListViewDragIndicatorElement = forwardRef19(
     style: style2,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React43.createElement(
+    return /* @__PURE__ */ React44.createElement(
       "div",
       {
         ref,
@@ -4822,11 +4892,11 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = useContext8(ListRowContext);
+  } = useContext9(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragOverlay } = useContext8(ListViewDraggingContext);
+  const { indentation, isDragOverlay } = useContext9(ListViewDraggingContext);
   const handlePress = useCallback22(
     (event) => {
       event.preventDefault();
@@ -4856,7 +4926,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
   }, ref) => {
     const Component = RowContainer;
     const relativeDropPosition = testRelativeDropPosition ?? relativeDropPositionProp;
-    const element = /* @__PURE__ */ React43.createElement(
+    const element = /* @__PURE__ */ React44.createElement(
       Component,
       {
         ref,
@@ -4890,7 +4960,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
         className,
         $clickable: !!onPress
       },
-      relativeDropPosition && /* @__PURE__ */ React43.createElement(
+      relativeDropPosition && /* @__PURE__ */ React44.createElement(
         ListViewDragIndicatorElement,
         {
           key: relativeDropPosition,
@@ -4905,11 +4975,11 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
           }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4922,23 +4992,23 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ React43.createElement(Sortable2.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ React44.createElement(Sortable2.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
       sortableProps,
       composeRefs2(sortableRef, forwardedRef)
     ));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = createContext8(
+var RenderItemContext = createContext9(
   () => null
 );
 RenderItemContext.displayName = "RenderItemContext";
-var VirtualizedListRow = memo17(function VirtualizedListRow2({
+var VirtualizedListRow = memo18(function VirtualizedListRow2({
   index,
   style: style2
 }) {
-  const renderItem = useContext8(RenderItemContext);
-  return /* @__PURE__ */ React43.createElement("div", { key: index, style: style2 }, renderItem(index));
+  const renderItem = useContext9(RenderItemContext);
+  return /* @__PURE__ */ React44.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
   size: size2,
@@ -4969,7 +5039,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React43.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React44.createElement(
     WindowScroller,
     {
       scrollElement,
@@ -4980,7 +5050,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React43.createElement("div", { ref: registerChild }, /* @__PURE__ */ React43.createElement(
+      }) => /* @__PURE__ */ React44.createElement("div", { ref: registerChild }, /* @__PURE__ */ React44.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -5010,7 +5080,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     )
   ));
 });
-var VirtualizedList = memo17(
+var VirtualizedList = memo18(
   VirtualizedListInner
 );
 var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
@@ -5152,7 +5222,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     [indentation]
   );
   const renderOverlay = useCallback22(
-    (index) => /* @__PURE__ */ React43.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React43.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
+    (index) => /* @__PURE__ */ React44.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React44.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback22(
@@ -5160,12 +5230,12 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
       if (!contextValue || !isValidElement3(current)) return null;
-      return /* @__PURE__ */ React43.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ React44.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
   const ids = useMemo18(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ React43.createElement(
+  const withSortable = (children) => sortable ? /* @__PURE__ */ React44.createElement(
     Sortable2.Root,
     {
       onMoveItem,
@@ -5176,7 +5246,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React43.createElement(ScrollArea, null, children) : children(null);
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React44.createElement(ScrollArea, null, children) : children(null);
   const getItemHeight = useCallback22(
     (index) => {
       const child = getItemContextValue(index);
@@ -5191,7 +5261,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   );
   const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
   const gapStyle = useMemo18(() => ({ gap: `${gap}px` }), [gap]);
-  return /* @__PURE__ */ React43.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React44.createElement(
     "div",
     {
       id,
@@ -5220,7 +5290,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     data.length === 0 && renderEmptyState ? renderEmptyState() : withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React43.createElement(
+        virtualized ? /* @__PURE__ */ React44.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -5244,7 +5314,7 @@ var ChildrenListViewInner = forwardRef19(function ChildrenListViewInner2({ child
     ),
     [children]
   );
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
@@ -5258,19 +5328,19 @@ var ChildrenListViewInner = forwardRef19(function ChildrenListViewInner2({ child
     }
   );
 });
-var ChildrenListView = memo17(ChildrenListViewInner);
+var ChildrenListView = memo18(ChildrenListViewInner);
 var SimpleListViewInner = forwardRefGeneric(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ React43.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React44.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ React43.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React44.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
 var SimpleListView = memoGeneric(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = memo17(ListViewRowTitle);
-  ListView2.EditableRowTitle = memo17(ListViewEditableRowTitle);
+  ListView2.RowTitle = memo18(ListViewRowTitle);
+  ListView2.EditableRowTitle = memo18(ListViewEditableRowTitle);
   ListView2.Row = memoGeneric(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
@@ -5287,7 +5357,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-import React44, { useCallback as useCallback23, useContext as useContext9 } from "react";
+import React45, { useCallback as useCallback23, useContext as useContext10 } from "react";
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
@@ -5296,7 +5366,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = useContext9(ListView.RowContext);
+  const { expandable } = useContext10(ListView.RowContext);
   const handleClickChevron = useCallback23(
     (event) => {
       event.stopPropagation();
@@ -5304,7 +5374,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React44.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React44.createElement(React44.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React45.createElement(React45.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React45.createElement(
     IconButton,
     {
       className: chevronClassName,
@@ -5312,7 +5382,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React45.createElement(React45.Fragment, null, renderIcon(icon), /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -5404,7 +5474,7 @@ var List = memoGeneric(
         setRenamingId(id);
       }
     }));
-    return /* @__PURE__ */ React45.createElement(
+    return /* @__PURE__ */ React46.createElement(
       ViewComponent.Root,
       {
         variant: "bare",
@@ -5447,7 +5517,7 @@ var List = memoGeneric(
               handleSelect(id);
             }
           };
-          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React45.createElement(
+          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React46.createElement(
             ActionMenu,
             {
               menuItems,
@@ -5463,7 +5533,7 @@ var List = memoGeneric(
           ));
           const end = action || detailPosition === "end" && renderDetail?.(item, isSelected);
           const below = detailPosition === "below" && renderDetail?.(item, isSelected);
-          return /* @__PURE__ */ React45.createElement(
+          return /* @__PURE__ */ React46.createElement(
             ViewComponent.Row,
             {
               id,
@@ -5511,12 +5581,12 @@ var List = memoGeneric(
               },
               dragIndicatorStyle
             },
-            /* @__PURE__ */ React45.createElement(
+            /* @__PURE__ */ React46.createElement(
               "div",
               {
                 className: cx("flex flex-1 items-center px-2", rowGapMap[size2])
               },
-              thumbnail && /* @__PURE__ */ React45.createElement(
+              thumbnail && /* @__PURE__ */ React46.createElement(
                 "div",
                 {
                   className: cx(
@@ -5529,7 +5599,7 @@ var List = memoGeneric(
                 },
                 thumbnail
               ),
-              /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ React45.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ React45.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ React45.createElement(
+              /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ React46.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ React46.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ React46.createElement(
                 ViewComponent.EditableRowTitle,
                 {
                   value: getName(item),
@@ -5544,7 +5614,7 @@ var List = memoGeneric(
                     e.stopPropagation();
                   }
                 }
-              ) : /* @__PURE__ */ React45.createElement(
+              ) : /* @__PURE__ */ React46.createElement(
                 ViewComponent.RowTitle,
                 {
                   className: cx(
@@ -5553,8 +5623,8 @@ var List = memoGeneric(
                   )
                 },
                 getName(item)
-              )), end && detailPosition === "end" && /* @__PURE__ */ React45.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React45.createElement(DetailContainer, { selected: isSelected }, below)),
-              end && detailPosition === "below" && /* @__PURE__ */ React45.createElement(DetailContainer, { selected: isSelected }, end)
+              )), end && detailPosition === "end" && /* @__PURE__ */ React46.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React46.createElement(DetailContainer, { selected: isSelected }, below)),
+              end && detailPosition === "below" && /* @__PURE__ */ React46.createElement(DetailContainer, { selected: isSelected }, end)
             )
           );
         }
@@ -5562,11 +5632,11 @@ var List = memoGeneric(
     );
   })
 );
-var DetailContainer = memo18(function DetailContainer2({
+var DetailContainer = memo19(function DetailContainer2({
   children,
   selected
 }) {
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     "div",
     {
       className: cx("flex items-center gap-2", selected && "text-primary"),
@@ -5611,11 +5681,11 @@ var fontStyleMap = {
 // src/components/Collection.tsx
 var Collection = forwardRefGeneric(function Collection2(props, ref) {
   const { viewType, ...rest } = props;
-  return viewType === "grid" ? /* @__PURE__ */ React46.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React46.createElement(List, { ref, ...rest });
+  return viewType === "grid" ? /* @__PURE__ */ React47.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React47.createElement(List, { ref, ...rest });
 });
 
 // src/components/ColorSwatch.tsx
-import React47, { forwardRef as forwardRef20 } from "react";
+import React48, { forwardRef as forwardRef20 } from "react";
 var colorSwatchSizeMap = {
   xsmall: 21,
   small: 27,
@@ -5624,7 +5694,7 @@ var colorSwatchSizeMap = {
 };
 var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "small", checked, style: style2, ...props }, ref) {
   const sizePx = colorSwatchSizeMap[size2];
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     "button",
     {
       ...props,
@@ -5634,9 +5704,9 @@ var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "sma
         width: sizePx,
         height: sizePx,
         borderRadius: "4px",
-        outline: checked ? "2px solid rgba(0,0,0,0.2)" : "1px solid rgba(0,0,0,0.1)",
+        outline: checked ? `2px solid ${cssVars.colors.primary}` : "1px solid rgba(0,0,0,0.1)",
         outlineOffset: -1,
-        boxShadow: checked ? `inset 0 0 0 2px rgba(0,0,0,0.2)` : void 0,
+        boxShadow: checked ? `inset 0 0 0 2px ${cssVars.colors.background}` : void 0,
         ...style2
       }
     }
@@ -5645,7 +5715,7 @@ var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "sma
 
 // src/components/ColorSwatchControl.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React48, { useMemo as useMemo19 } from "react";
+import React49, { useMemo as useMemo19 } from "react";
 function ColorSwatchControl(props) {
   const {
     options,
@@ -5668,8 +5738,8 @@ function ColorSwatchControl(props) {
       ...style2
     };
   }, [size2, style2]);
-  const content = /* @__PURE__ */ React48.createElement("div", { className, id, style: styles3 }, options.map((option) => {
-    const item = /* @__PURE__ */ React48.createElement(
+  const content = /* @__PURE__ */ React49.createElement("div", { className, id, style: styles3 }, options.map((option) => {
+    const item = /* @__PURE__ */ React49.createElement(
       ColorSwatch,
       {
         key: option,
@@ -5682,23 +5752,25 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return readOnly ? item : /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React49.createElement(
       ToggleGroupPrimitive.Item,
       {
         asChild: true,
         value: option,
-        key: option
+        key: option,
+        disabled: readOnly
       },
       item
     );
   }));
-  return readOnly ? content : /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     ToggleGroupPrimitive.Root,
     {
       type: "single",
       value,
       onValueChange,
-      className: "w-full"
+      className: "w-full",
+      disabled: readOnly
     },
     content
   );
@@ -5706,7 +5778,7 @@ function ColorSwatchControl(props) {
 
 // src/components/Combobox.tsx
 import { DropdownChevronIcon as DropdownChevronIcon2 } from "@noya-app/noya-icons";
-import React50, {
+import React51, {
   useCallback as useCallback24,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
@@ -6047,8 +6119,8 @@ function useComboboxState(state) {
 }
 
 // src/components/ComboboxMenu.tsx
-import { CheckIcon as CheckIcon2 } from "@noya-app/noya-icons";
-import React49 from "react";
+import { CheckIcon } from "@noya-app/noya-icons";
+import React50 from "react";
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
     items,
@@ -6060,7 +6132,7 @@ var ComboboxMenu = memoGeneric(
     indented,
     iconPosition = "right"
   }, forwardedRef) {
-    return /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React50.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -6076,7 +6148,7 @@ var ComboboxMenu = memoGeneric(
         style: style2,
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React49.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React49.createElement(
+            return /* @__PURE__ */ React50.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React50.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -6087,7 +6159,7 @@ var ComboboxMenu = memoGeneric(
             item: typeof item.title === "string" ? item.title : item.value,
             itemScore: item
           });
-          return /* @__PURE__ */ React49.createElement(
+          return /* @__PURE__ */ React50.createElement(
             ListView.Row,
             {
               key: item.value,
@@ -6100,12 +6172,12 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ React49.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React49.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React49.createElement(CheckIcon2, null)) : indented ? /* @__PURE__ */ React49.createElement(
+            /* @__PURE__ */ React50.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React50.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React50.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React50.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
               }
-            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React49.createElement(React49.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ React49.createElement(
+            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React50.createElement(React50.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ React50.createElement(
               "span",
               {
                 key: `${item.value}-token-${j}`,
@@ -6116,7 +6188,7 @@ var ComboboxMenu = memoGeneric(
               },
               token.text
             ))),
-            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React49.createElement(React49.Fragment, null, item.shortcut ? /* @__PURE__ */ React49.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
+            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React50.createElement(React50.Fragment, null, item.shortcut ? /* @__PURE__ */ React50.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
           );
         }
       }
@@ -6438,19 +6510,19 @@ var Combobox = memoGeneric(
     const hasCheckedItems = items.some(
       (item) => isSelectableMenuItem(item) && item.checked
     );
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React51.createElement(
       InputField2.Root,
       {
         id,
         size: size2,
         sideOffset: 6,
-        end: /* @__PURE__ */ React50.createElement(React50.Fragment, null, loading && /* @__PURE__ */ React50.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React50.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React50.createElement(
+        end: /* @__PURE__ */ React51.createElement(React51.Fragment, null, loading && /* @__PURE__ */ React51.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React51.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React51.createElement(
           InputField2.Button,
           {
             variant: "floating",
             onClick: handleChevronClick
           },
-          /* @__PURE__ */ React50.createElement(
+          /* @__PURE__ */ React51.createElement(
             DropdownChevronIcon2,
             {
               className: cx(
@@ -6469,7 +6541,7 @@ var Combobox = memoGeneric(
             ListView.rowHeight * 10.5
           );
           const listSize = { width, height };
-          return /* @__PURE__ */ React50.createElement(
+          return /* @__PURE__ */ React51.createElement(
             "div",
             {
               className: cx(
@@ -6477,7 +6549,7 @@ var Combobox = memoGeneric(
                 shouldShowMenu && !readOnly ? "flex" : "hidden"
               )
             },
-            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React50.createElement(
+            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React51.createElement(
               ComboboxMenu,
               {
                 ref: listRef,
@@ -6491,11 +6563,11 @@ var Combobox = memoGeneric(
                 },
                 indented: hasCheckedItems
               }
-            ) : /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ React50.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
+            ) : /* @__PURE__ */ React51.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ React51.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
           );
         }
       },
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React51.createElement(
         InputField2.Input,
         {
           ref,
@@ -6520,7 +6592,7 @@ var Combobox = memoGeneric(
           ...readOnly ? { readOnly: true } : {}
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React50.createElement(
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React51.createElement(
         InputField2.Typeahead,
         {
           value: typeaheadValue,
@@ -6534,11 +6606,11 @@ var Combobox = memoGeneric(
 );
 
 // src/components/CommandPalette.tsx
-import React53, { memo as memo20 } from "react";
+import React54, { memo as memo21 } from "react";
 
 // src/components/SearchCompletionMenu.tsx
 import { getCurrentPlatform as getCurrentPlatform2, handleKeyboardEvent } from "@noya-app/noya-keymap";
-import React52, {
+import React53, {
   forwardRef as forwardRef21,
   useCallback as useCallback25,
   useEffect as useEffect17,
@@ -6549,15 +6621,15 @@ import React52, {
 } from "react";
 
 // src/components/Divider.tsx
-import React51, { memo as memo19 } from "react";
-var Divider = memo19(function Divider2({
+import React52, { memo as memo20 } from "react";
+var Divider = memo20(function Divider2({
   variant = "normal",
   overflow = 0,
   className,
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(
     "div",
     {
       className: cx(
@@ -6577,14 +6649,14 @@ var Divider = memo19(function Divider2({
     }
   );
 });
-var DividerVertical = memo19(function DividerVertical2({
+var DividerVertical = memo20(function DividerVertical2({
   variant = "normal",
   overflow = 0,
   className,
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(
     "div",
     {
       className: cx(`
@@ -6618,7 +6690,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
     index: 0
   });
   const { index, search } = state;
-  const listRef = React52.useRef(null);
+  const listRef = React53.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
   useEffect17(() => {
     listRef.current?.scrollToIndex(index);
@@ -6697,7 +6769,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       inputRef.current?.focus();
     }
   }));
-  return /* @__PURE__ */ React52.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ React52.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ React53.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ React53.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -6717,7 +6789,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       onChange: setSearch,
       onKeyDown: handleKeyDown
     }
-  )), /* @__PURE__ */ React52.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React52.createElement(
+  )), /* @__PURE__ */ React53.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React53.createElement(
     ComboboxMenu,
     {
       ref: listRef,
@@ -6732,29 +6804,29 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       onHoverIndex: setIndex,
       indented: hasCheckedItems
     }
-  ) : /* @__PURE__ */ React52.createElement(
+  ) : /* @__PURE__ */ React53.createElement(
     "div",
     {
       ...listSize,
       className: "flex flex-col p-20 items-center justify-center"
     },
-    /* @__PURE__ */ React52.createElement(Small, { color: "textDisabled" }, "No results")
+    /* @__PURE__ */ React53.createElement(Small, { color: "textDisabled" }, "No results")
   ));
 });
 
 // src/components/CommandPalette.tsx
-var CommandPalette = memo20(function CommandPalette2({
+var CommandPalette = memo21(function CommandPalette2({
   showCommandPalette,
   setShowCommandPalette,
   items,
   onSelect,
   onHover
 }) {
-  const menuRef = React53.useRef(null);
-  const handleClose = React53.useCallback(() => {
+  const menuRef = React54.useRef(null);
+  const handleClose = React54.useCallback(() => {
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React54.createElement(
     Dialog,
     {
       style: {
@@ -6780,7 +6852,7 @@ var CommandPalette = memo20(function CommandPalette2({
         }, 0);
       }
     },
-    /* @__PURE__ */ React53.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React53.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React54.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React54.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ React54.createElement(
       SearchCompletionMenu,
       {
         ref: menuRef,
@@ -6796,14 +6868,14 @@ var CommandPalette = memo20(function CommandPalette2({
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
 import { ChatBubbleWithDotsIcon } from "@noya-app/noya-icons";
-import React54 from "react";
-var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React54.createElement(
+import React55 from "react";
+var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React55.createElement(
   Tooltip,
   {
     key: userId,
-    content: /* @__PURE__ */ React54.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React54.createElement(Small, null, name))
+    content: /* @__PURE__ */ React55.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React55.createElement(Small, null, name))
   },
-  /* @__PURE__ */ React54.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
+  /* @__PURE__ */ React55.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
@@ -6811,12 +6883,12 @@ var ConnectedUsersMenuLayout = ({
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ React54.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ React54.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ React55.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React55.createElement(
     Tooltip,
     {
-      content: /* @__PURE__ */ React54.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React54.createElement(Small, null, "AI Assistant"))
+      content: /* @__PURE__ */ React55.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React55.createElement(Small, null, "AI Assistant"))
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement(
       Button_default,
       {
         variant: isAssistantOpen ? "secondary" : void 0,
@@ -6825,44 +6897,28 @@ var ConnectedUsersMenuLayout = ({
           backgroundColor: isAssistantOpen ? colorFromString(currentUserId ?? "") : void 0
         }
       },
-      "AI",
-      /* @__PURE__ */ React54.createElement(Spacer.Horizontal, { size: 8 }),
-      /* @__PURE__ */ React54.createElement(
+      /* @__PURE__ */ React55.createElement(
         ChatBubbleWithDotsIcon,
         {
           color: isAssistantOpen ? void 0 : cssVars.colors.icon
         }
-      )
+      ),
+      /* @__PURE__ */ React55.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      "AI"
     )
   ));
 };
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React55, { forwardRef as forwardRef22, useCallback as useCallback26, useState as useState25 } from "react";
-var DotButton = forwardRef22(({ className, ...props }, ref) => /* @__PURE__ */ React55.createElement(
-  "div",
-  {
-    ref,
-    className: cx(
-      `cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background `,
-      className
-    ),
-    ...props
-  }
-));
-var Trigger5 = forwardRef22(({ className, ...props }, ref) => /* @__PURE__ */ React55.createElement(
-  "div",
-  {
-    ref,
-    className: cx(`pointer-events-none h-[15px] `, className),
-    ...props
-  }
-));
+import React56, { useCallback as useCallback26, useState as useState25 } from "react";
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   items,
   onSelect,
-  isVisible = true
+  onClick,
+  isVisible = true,
+  className,
+  style: style2
 }) {
   const [open, setOpen] = useState25(false);
   const [downPosition, setDownPosition] = useState25(null);
@@ -6901,17 +6957,23 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React55.createElement(
-    DotButton,
+  return /* @__PURE__ */ React56.createElement(
+    "div",
     {
+      className: cx(
+        "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
+        className
+      ),
+      style: style2,
       onPointerDownCapture: handlePointerDownCapture,
       onPointerUp: handlePointerUp,
       onClick: (event) => {
         event.stopPropagation();
         event.preventDefault();
+        onClick?.();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React55.createElement(
+    items && onSelect ? /* @__PURE__ */ React56.createElement(
       DropdownMenu,
       {
         open,
@@ -6920,13 +6982,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React55.createElement(Trigger5, null, /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React56.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ React56.createElement(
         DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React55.createElement(
+    ) : /* @__PURE__ */ React56.createElement(
       DragHandleDots2Icon,
       {
         color: isVisible || open ? cssVars.colors.icon : "transparent"
@@ -6937,10 +6999,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 import * as Dialog3 from "@radix-ui/react-dialog";
-import * as React56 from "react";
+import * as React57 from "react";
 import { useImperativeHandle as useImperativeHandle8 } from "react";
-var Drawer = React56.memo(
-  React56.forwardRef(function Drawer2({
+var Drawer = React57.memo(
+  React57.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -6970,7 +7032,7 @@ var Drawer = React56.memo(
         return internalOpen;
       }
     }));
-    const inner = /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(
+    const inner = /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
       Dialog3.Overlay,
       {
         className: cx(
@@ -6978,7 +7040,7 @@ var Drawer = React56.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React56.createElement(
+    ), /* @__PURE__ */ React57.createElement(
       Dialog3.Content,
       {
         id,
@@ -6990,24 +7052,24 @@ var Drawer = React56.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React56.createElement(Dialog3.Title, null, title),
+      title && /* @__PURE__ */ React57.createElement(Dialog3.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React56.createElement(
+    return /* @__PURE__ */ React57.createElement(
       Dialog3.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React56.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React56.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React57.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React57.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
 
 // src/components/Fade.tsx
-import React57 from "react";
+import React58 from "react";
 var Fade = ({
   children,
   direction = "right",
@@ -7029,7 +7091,7 @@ var Fade = ({
     top: "left-0 right-0 top-0",
     bottom: "left-0 right-0 bottom-0"
   }[direction];
-  return /* @__PURE__ */ React57.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React58.createElement(
     "div",
     {
       className: cx(
@@ -7048,17 +7110,17 @@ var Fade = ({
 };
 
 // src/components/file-explorer/FileExplorerLayout.tsx
-import React58 from "react";
+import React59 from "react";
 var FileExplorerLayout = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ React58.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
+}) => /* @__PURE__ */ React59.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
   children
-}) => /* @__PURE__ */ React58.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ React58.createElement(
+}) => /* @__PURE__ */ React59.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ React59.createElement(
   IconButton,
   {
     iconName: "UploadIcon",
@@ -7069,14 +7131,14 @@ var FileExplorerUploadButton = ({
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
-    return /* @__PURE__ */ React58.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
+    return /* @__PURE__ */ React59.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
   }
 );
 var FileExplorerDetail = ({
   selected,
   size: size2,
   children
-}) => /* @__PURE__ */ React58.createElement(
+}) => /* @__PURE__ */ React59.createElement(
   "span",
   {
     className: cx(
@@ -7089,10 +7151,10 @@ var FileExplorerDetail = ({
 var FileExplorerEmptyState = ({
   label = "No files",
   ...props
-}) => /* @__PURE__ */ React58.createElement(Banner, { label, className: "mx-3", ...props });
+}) => /* @__PURE__ */ React59.createElement(Banner, { label, className: "mx-3", ...props });
 
 // src/components/FillInputField.tsx
-import React61, { forwardRef as forwardRef24, memo as memo24 } from "react";
+import React62, { forwardRef as forwardRef23, memo as memo25 } from "react";
 
 // ../noya-file-format/src/types.ts
 var types_exports = {};
@@ -7417,25 +7479,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 
 // src/contexts/ImageDataContext.tsx
-import * as React59 from "react";
-var ImageDataContext = React59.createContext(
+import * as React60 from "react";
+var ImageDataContext = React60.createContext(
   void 0
 );
-var ImageDataProvider = React59.memo(function ImageDataProvider2({
+var ImageDataProvider = React60.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React59.useMemo(
+  const contextValue = React60.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React59.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React60.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React59.useContext(ImageDataContext);
+  const value = React60.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -7505,10 +7567,10 @@ var dotsHorizontalSvg = (fillColor) => `
     <path d='M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z'></path>
   </svg>
 `;
-var Background = React60.memo(function Background2({
+var Background = React61.memo(function Background2({
   background: background2
 }) {
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "span",
     {
       className: `${background2 ? `bg-[${background2}]` : "bg-input-background"} absolute inset-0`
@@ -7527,7 +7589,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React60.memo(
+var PatternPreviewBackground = React61.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -7536,7 +7598,7 @@ var PatternPreviewBackground = React60.memo(
     const image = useImageData(imageRef);
     const url = useObjectURL(image);
     const size2 = getPatternSizeAndPosition(fillType, tileScale);
-    const background2 = React60.useMemo(
+    const background2 = React61.useMemo(
       () => [
         size2,
         `url(${url})`,
@@ -7544,44 +7606,44 @@ var PatternPreviewBackground = React60.memo(
       ].join(" "),
       [fillType, size2, url]
     );
-    return /* @__PURE__ */ React60.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React61.createElement(Background, { background: background2 });
   }
 );
-var ColorPreviewBackground = React60.memo(function ColorPreviewBackground2({
+var ColorPreviewBackground = React61.memo(function ColorPreviewBackground2({
   color
 }) {
-  const background2 = React60.useMemo(
+  const background2 = React61.useMemo(
     () => sketchColorToRgbaString(color),
     [color]
   );
-  return /* @__PURE__ */ React60.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React61.createElement(Background, { background: background2 });
 });
-var GradientPreviewBackground = React60.memo(
+var GradientPreviewBackground = React61.memo(
   function GradientPreviewBackground2({
     gradient
   }) {
-    const background2 = React60.useMemo(
+    const background2 = React61.useMemo(
       () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
       [gradient.gradientType, gradient.stops]
     );
-    return /* @__PURE__ */ React60.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React61.createElement(Background, { background: background2 });
   }
 );
 var background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
   cssVars.colors.placeholderDots
 )}") no-repeat`;
-var FillPreviewBackground = React60.memo(function FillPreviewBackground2({
+var FillPreviewBackground = React61.memo(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ React60.createElement(Background, { background });
+  if (!value) return /* @__PURE__ */ React61.createElement(Background, { background });
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React60.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React61.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React60.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React61.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image) return null;
-      return /* @__PURE__ */ React60.createElement(
+      return /* @__PURE__ */ React61.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -7593,7 +7655,7 @@ var FillPreviewBackground = React60.memo(function FillPreviewBackground2({
 });
 
 // src/components/FillInputField.tsx
-var FillButton = forwardRef24(({ className, ...props }, ref) => /* @__PURE__ */ React61.createElement(
+var FillButton = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React62.createElement(
   "button",
   {
     ref,
@@ -7604,14 +7666,14 @@ var FillButton = forwardRef24(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-var FillInputField = memo24(
-  forwardRef24(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ React61.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React61.createElement(FillPreviewBackground, { value }));
+var FillInputField = memo25(
+  forwardRef23(function FillInputField2({ id, value, ...rest }, ref) {
+    return /* @__PURE__ */ React62.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React62.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-import React62, { useCallback as useCallback27, useRef as useRef22, useState as useState26 } from "react";
+import React63, { useCallback as useCallback27, useRef as useRef22, useState as useState26 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -7704,7 +7766,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React63.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -7826,7 +7888,7 @@ var FloatingWindow = ({
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -7840,7 +7902,7 @@ var FloatingWindow = ({
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -7855,7 +7917,7 @@ var FloatingWindow = ({
         zIndex: cssVars.zIndex.menu
       }
     },
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(
       "div",
       {
         style: {
@@ -7866,9 +7928,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React62.createElement(Divider, null),
-    /* @__PURE__ */ React62.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(Divider, null),
+    /* @__PURE__ */ React63.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React63.createElement(
       "div",
       {
         key: direction,
@@ -7890,8 +7952,8 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import * as React63 from "react";
-var GradientPicker = React63.memo(function GradientPicker2({
+import * as React64 from "react";
+var GradientPicker = React64.memo(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -7900,7 +7962,7 @@ var GradientPicker = React63.memo(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = React63.useMemo(
+  const colorModel = React64.useMemo(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: rgbaToHsva2,
@@ -7909,30 +7971,30 @@ var GradientPicker = React63.memo(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = React63.useMemo(
+  const rgbaColor = React64.useMemo(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = React63.useCallback(
+  const handleChangeColor = React64.useCallback(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = React63.useCallback(
+  const handleAddGradientStop = React64.useCallback(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(
     NoyaColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React64.createElement(
       Gradient,
       {
         gradients: value,
@@ -7943,19 +8005,19 @@ var GradientPicker = React63.memo(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React63.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React63.createElement(Saturation, null),
-    /* @__PURE__ */ React63.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React63.createElement(Hue, null),
-    /* @__PURE__ */ React63.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React63.createElement(Alpha, null)
+    /* @__PURE__ */ React64.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React64.createElement(Saturation, null),
+    /* @__PURE__ */ React64.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React64.createElement(Hue, null),
+    /* @__PURE__ */ React64.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React64.createElement(Alpha, null)
   );
 });
 
 // src/components/InspectorContainer.tsx
-import React64, { forwardRef as forwardRef25, memo as memo26 } from "react";
-var InspectorContainer = memo26(
-  forwardRef25(function InspectorContainer2({
+import React65, { forwardRef as forwardRef24, memo as memo27 } from "react";
+var InspectorContainer = memo27(
+  forwardRef24(function InspectorContainer2({
     header,
     children,
     fallback,
@@ -7964,7 +8026,7 @@ var InspectorContainer = memo26(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ React64.createElement(
+    return /* @__PURE__ */ React65.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -7979,32 +8041,32 @@ var InspectorContainer = memo26(
         }
       },
       header,
-      children ? /* @__PURE__ */ React64.createElement(ScrollArea, null, /* @__PURE__ */ React64.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React64.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React64.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
+      children ? /* @__PURE__ */ React65.createElement(ScrollArea, null, /* @__PURE__ */ React65.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React65.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React65.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import * as React65 from "react";
-var LabeledElementView = React65.memo(function LabeledElementView2({
+import * as React66 from "react";
+var LabeledElementView = React66.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React65.Children.toArray(children).flatMap(
-    (child) => React65.isValidElement(child) && child.type === React65.Fragment ? child.props.children : [child]
+  const elementIds = React66.Children.toArray(children).flatMap(
+    (child) => React66.isValidElement(child) && child.type === React66.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React65.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React66.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React65.useRef(null);
-  const refs = React65.useMemo(() => {
+  const containerRef = React66.useRef(null);
+  const refs = React66.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React65.createRef()])
+      serializedIds.split(",").map((id) => [id, React66.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React65.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React65.createElement(
+  const labelElements = React66.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React66.createElement(
       "span",
       {
         key: id,
@@ -8017,7 +8079,7 @@ var LabeledElementView = React65.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React65.useLayoutEffect(() => {
+  React66.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -8079,19 +8141,19 @@ var LabeledElementView = React65.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React65.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React65.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React65.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
+  return /* @__PURE__ */ React66.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React66.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React66.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
 });
 
 // src/components/LabeledField.tsx
-import React67, { memo as memo28, useMemo as useMemo27 } from "react";
+import React68, { memo as memo29, useMemo as useMemo27 } from "react";
 
 // src/hooks/useIndent.ts
-import React66 from "react";
-var IndentContext = React66.createContext({
+import React67 from "react";
+var IndentContext = React67.createContext({
   indentLevel: 0
 });
 var useIndent = () => {
-  const { indentLevel } = React66.useContext(IndentContext);
+  const { indentLevel } = React67.useContext(IndentContext);
   return indentLevel;
 };
 
@@ -8104,7 +8166,7 @@ var labeledFieldStyles = (labelPosition) => cx(
 var labelPositionInset = {
   position: "inset"
 };
-var LabeledField = memo28(function LabeledField2({
+var LabeledField = memo29(function LabeledField2({
   children,
   label,
   labelPosition: labelPositionProp,
@@ -8150,7 +8212,7 @@ var LabeledField = memo28(function LabeledField2({
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ React67.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ React67.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ React67.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React67.createElement("div", { style: indentStyle }), /* @__PURE__ */ React67.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ React68.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ React68.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React68.createElement("div", { style: indentStyle }), /* @__PURE__ */ React68.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ React68.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -8159,7 +8221,7 @@ var LabeledField = memo28(function LabeledField2({
       ...props
     },
     label
-  ), labelPosition === "start" ? /* @__PURE__ */ React67.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
+  ), labelPosition === "start" ? /* @__PURE__ */ React68.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/MediaThumbnail.tsx
@@ -8169,7 +8231,7 @@ import {
   SpeakerLoudIcon,
   VideoIcon
 } from "@noya-app/noya-icons";
-import React68, { memo as memo29, useMemo as useMemo28 } from "react";
+import React69, { memo as memo30, useMemo as useMemo28 } from "react";
 
 // src/components/catppuccin/fileIcons.ts
 var fileIcons = {
@@ -10609,7 +10671,7 @@ var getThumbnailColors = (colorScheme, selected) => {
       };
   }
 };
-var MediaThumbnail = memo29(function MediaThumbnail2({
+var MediaThumbnail = memo30(function MediaThumbnail2({
   contentType: contentTypeProp,
   selected = false,
   className,
@@ -10634,8 +10696,8 @@ var MediaThumbnail = memo29(function MediaThumbnail2({
   const content = useMemo28(() => {
     switch (contentType) {
       case "image":
-        if (!url) return /* @__PURE__ */ React68.createElement(ImageIcon, { color: iconColor, style: iconStyles });
-        return /* @__PURE__ */ React68.createElement(
+        if (!url) return /* @__PURE__ */ React69.createElement(ImageIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React69.createElement(
           "img",
           {
             src: url,
@@ -10645,18 +10707,18 @@ var MediaThumbnail = memo29(function MediaThumbnail2({
           }
         );
       case "video":
-        return /* @__PURE__ */ React68.createElement(VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React69.createElement(VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ React68.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React69.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon = Icons[iconName];
-          return /* @__PURE__ */ React68.createElement(Icon, { color: iconColor, style: iconStyles });
+          return /* @__PURE__ */ React69.createElement(Icon, { color: iconColor, style: iconStyles });
         }
         if (fileName) {
           const fileIcon = findFileIcon(fileName);
           if (fileIcon) {
-            return /* @__PURE__ */ React68.createElement(
+            return /* @__PURE__ */ React69.createElement(
               "img",
               {
                 src: `https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`,
@@ -10666,10 +10728,10 @@ var MediaThumbnail = memo29(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ React68.createElement(FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React69.createElement(FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "div",
     {
       className: cx(
@@ -10700,9 +10762,9 @@ function findFileIcon(fileName) {
 }
 
 // src/components/Message.tsx
-import React69, { forwardRef as forwardRef26, memo as memo30, useMemo as useMemo29 } from "react";
-var Message = memo30(
-  forwardRef26(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
+import React70, { forwardRef as forwardRef25, memo as memo31, useMemo as useMemo29 } from "react";
+var Message = memo31(
+  forwardRef25(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = crypto.randomUUID();
     const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
     const styles3 = useMemo29(
@@ -10711,7 +10773,7 @@ var Message = memo30(
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React70.createElement(
       "div",
       {
         className: cx(
@@ -10719,15 +10781,15 @@ var Message = memo30(
           role === "user" ? "flex-row-reverse" : "flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ React69.createElement(
+      role === "assistant" ? /* @__PURE__ */ React70.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ React69.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ React69.createElement(
+        /* @__PURE__ */ React70.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ React70.createElement(
         Avatar,
         {
           userId: !user ? randomId : user?.id,
@@ -10736,7 +10798,7 @@ var Message = memo30(
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React70.createElement(
         "div",
         {
           className: cx(
@@ -10746,7 +10808,7 @@ var Message = memo30(
           style: styles3,
           ref
         },
-        /* @__PURE__ */ React69.createElement(
+        /* @__PURE__ */ React70.createElement(
           Text,
           {
             variant: "small",
@@ -10761,9 +10823,9 @@ var Message = memo30(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 import { Link1Icon } from "@noya-app/noya-icons";
-import React70 from "react";
+import React71 from "react";
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ React70.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React71.createElement(
     "a",
     {
       href: url,
@@ -10771,15 +10833,15 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "flex text-primary hover:opacity-80 border border-divider rounded-md"
     },
-    /* @__PURE__ */ React70.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ React70.createElement(Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
-    /* @__PURE__ */ React70.createElement(DividerVertical, null),
-    /* @__PURE__ */ React70.createElement(Small, { className: "truncate p-2 flex-1" }, url)
+    /* @__PURE__ */ React71.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ React71.createElement(Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
+    /* @__PURE__ */ React71.createElement(DividerVertical, null),
+    /* @__PURE__ */ React71.createElement(Small, { className: "truncate p-2 flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ React70.createElement("div", { className: "flex flex-col gap-2" }, children);
+  return /* @__PURE__ */ React71.createElement("div", { className: "flex flex-col gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -10795,27 +10857,27 @@ function getPipelineResultLink(value) {
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React71 from "react";
+import * as React72 from "react";
 function Progress({
   value,
   variant = "normal",
   className
 }) {
   const clampedValue = clamp(value, 0, 100);
-  const transformStyles = React71.useMemo(
+  const transformStyles = React72.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`
     }),
     [clampedValue]
   );
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(
     ProgressPrimitive.Root,
     {
       className: cx(`relative hidden bg-input-background h-[5px] `, className),
       style: { transform: "translateZ(0)" },
       value: clampedValue
     },
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(
       ProgressPrimitive.Indicator,
       {
         className: `${variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text"} transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full`,
@@ -10826,7 +10888,7 @@ function Progress({
 }
 
 // src/components/Section.tsx
-import React72, { memo as memo31, useMemo as useMemo31 } from "react";
+import React73, { memo as memo32, useMemo as useMemo31 } from "react";
 var titleIconStyle = {
   marginRight: "8px",
   alignSelf: "flex-start",
@@ -10861,7 +10923,7 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = React72.Children.toArray(children).some((child) => !!child);
+  const hasChildren = React73.Children.toArray(children).some((child) => !!child);
   const headerStyle = useMemo31(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
@@ -10869,7 +10931,7 @@ var SectionInternal = ({
     }),
     [hasChildren]
   );
-  return /* @__PURE__ */ React72.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React72.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ React72.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ React72.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ React72.createElement(React72.Fragment, null, onClickTitle ? /* @__PURE__ */ React72.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ React72.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ React72.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ React72.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React72.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
+  return /* @__PURE__ */ React73.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React73.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ React73.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ React73.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ React73.createElement(React73.Fragment, null, onClickTitle ? /* @__PURE__ */ React73.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ React73.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ React73.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ React73.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React73.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -10882,12 +10944,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ React72.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ React72.createElement(
+      title: /* @__PURE__ */ React73.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ React73.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -10898,26 +10960,26 @@ var ExpandableSection = ({
     expanded && props.children
   );
 };
-var Section = memo31(function InspectorSection({
+var Section = memo32(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ React72.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React72.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ React73.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React73.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 import * as ToggleGroupPrimitive2 from "@radix-ui/react-toggle-group";
-import React73, {
-  createContext as createContext10,
-  forwardRef as forwardRef27,
+import React74, {
+  createContext as createContext11,
+  forwardRef as forwardRef26,
   useCallback as useCallback29,
-  useContext as useContext11,
+  useContext as useContext12,
   useMemo as useMemo32
 } from "react";
-var SegmentedControlContext = createContext10({
+var SegmentedControlContext = createContext11({
   colorScheme: "primary"
 });
-var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
+var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
   value,
   tooltip,
   title,
@@ -10926,20 +10988,23 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
   className,
   ...props
 }, forwardedRef) {
-  const { colorScheme } = useContext11(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ React73.createElement(
+  const { colorScheme } = useContext12(SegmentedControlContext);
+  const itemElement = /* @__PURE__ */ React74.createElement(
     ToggleGroupPrimitive2.Item,
     {
       ref: forwardedRef,
       value: (value ?? "").toString(),
       disabled,
       className: cx(
-        "font-sans text-heading5 font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
+        "font-sans text-button font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
         colorScheme === "secondary" ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1" : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
         colorScheme === "secondary" ? "aria-checked:bg-secondary aria-checked:text-white" : colorScheme === "primary" ? "aria-checked:bg-primary aria-checked:text-white" : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
         "aria-checked:shadow-segment",
-        "whitespace-pre",
+        "whitespace-pre px-1",
+        "border-r border-divider last:border-r-0",
+        "aria-checked:border-r-transparent",
+        "[&:has(+[aria-checked=true])]:border-r-transparent",
         className
       ),
       ...props
@@ -10947,17 +11012,8 @@ var SegmentedControlItem = forwardRef27(function SegmentedControlItem2({
     icon && renderIcon(icon),
     title
   );
-  return tooltip ? /* @__PURE__ */ React73.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React74.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var Separator3 = ({ transparent }) => /* @__PURE__ */ React73.createElement(
-  "div",
-  {
-    className: cx(
-      "w-[1px] my-1 self-stretch bg-divider",
-      transparent && "bg-transparent"
-    )
-  }
-);
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
   value,
@@ -10965,7 +11021,6 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   colorScheme,
   allowEmpty,
   items,
-  separator: separator2 = true,
   className,
   style: style2
 }) {
@@ -10978,8 +11033,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     },
     [allowEmpty, onValueChange]
   );
-  const selectedIndex = items.findIndex((item) => item?.value === value);
-  return /* @__PURE__ */ React73.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React74.createElement(
     ToggleGroupPrimitive2.Root,
     {
       id,
@@ -10987,23 +11041,21 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       value,
       onValueChange: handleValueChange,
       className: cx(
-        `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
+        `grid appearance-none relative outline-none min-h-input-height rounded bg-input-background py-0.5 px-0.5`,
         className
       ),
-      style: style2
+      style: {
+        ...style2,
+        gridTemplateColumns: `repeat(${items.length}, 1fr)`
+      }
     },
-    separator2 ? items.map((item, index) => {
-      const isLastItem = index === items.length - 1;
-      const currentValue = item?.value;
-      const showSeparator = currentValue !== value && (selectedIndex === 0 && selectedIndex !== index ? true : index !== selectedIndex - 1);
-      return /* @__PURE__ */ React73.createElement(React73.Fragment, { key: index }, /* @__PURE__ */ React73.createElement(SegmentedControlItem, { key: index, ...item }), !isLastItem && /* @__PURE__ */ React73.createElement(Separator3, { transparent: !showSeparator }));
-    }) : items.map((item, index) => /* @__PURE__ */ React73.createElement(SegmentedControlItem, { key: index, ...item }))
+    items.map((item, index) => /* @__PURE__ */ React74.createElement(SegmentedControlItem, { key: index, ...item }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 import * as PopperPrimitive from "@radix-ui/react-popper";
-import React74, { useMemo as useMemo33 } from "react";
+import React75, { memo as memo33, useMemo as useMemo33 } from "react";
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
     width: rect.width,
@@ -11017,42 +11069,48 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbar = memoGeneric(function SelectionToolbar2({ rect, menuItems, onSelectMenuItem }) {
-  const containerRef = React74.useRef(null);
-  const size2 = useSize(containerRef, "width");
-  const virtualRef = useMemo33(
-    () => ({
-      current: createVirtualElement(rect)
-    }),
-    [rect]
-  );
-  return /* @__PURE__ */ React74.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React74.createElement(PopperPrimitive.Anchor, { virtualRef }), /* @__PURE__ */ React74.createElement(
-    PopperPrimitive.Content,
-    {
-      side: "top",
-      sideOffset: 10,
-      align: "center",
-      avoidCollisions: true,
-      collisionPadding: 10,
-      "data-editor-overlay": true,
-      contentEditable: false,
-      style: {
-        zIndex: 1e3,
-        opacity: size2 ? 1 : 0,
-        transition: "opacity 0.2s ease-in-out",
-        ["--n-input-background"]: "transparent"
-      }
-    },
-    /* @__PURE__ */ React74.createElement(
-      "div",
+var SelectionToolbarContainer = memo33(
+  function SelectionToolbarContainer2({
+    rect,
+    children
+  }) {
+    const portalScopeId = usePortalScopeId();
+    const containerRef = React75.useRef(null);
+    const size2 = useSize(containerRef, "width");
+    const virtualRef = useMemo33(
+      () => ({
+        current: createVirtualElement(rect)
+      }),
+      [rect]
+    );
+    return /* @__PURE__ */ React75.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React75.createElement(PopperPrimitive.Anchor, { virtualRef }), /* @__PURE__ */ React75.createElement(
+      PopperPrimitive.Content,
       {
-        ref: containerRef,
-        className: "flex gap-1 bg-popover-background rounded shadow-popover p-1"
+        ...portalScopeProps(portalScopeId),
+        side: "top",
+        sideOffset: 10,
+        align: "center",
+        avoidCollisions: true,
+        collisionPadding: 10,
+        contentEditable: false,
+        style: {
+          zIndex: 1e3,
+          opacity: size2 ? 1 : 0,
+          transition: "opacity 0.2s ease-in-out",
+          ["--n-input-background"]: "transparent"
+        }
       },
-      /* @__PURE__ */ React74.createElement(ToolbarMenu, { items: menuItems, onSelectMenuItem })
-    )
-  ));
-});
+      /* @__PURE__ */ React75.createElement(
+        "div",
+        {
+          ref: containerRef,
+          className: "flex gap-1 bg-popover-background rounded shadow-popover p-1"
+        },
+        children
+      )
+    ));
+  }
+);
 
 // src/components/SelectMenu.tsx
 import {
@@ -11061,7 +11119,7 @@ import {
   DropdownChevronIcon as DropdownChevronIcon3
 } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React75, {
+import React76, {
   useMemo as useMemo34,
   useState as useState27
 } from "react";
@@ -11095,7 +11153,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelPosition = useLabelPosition();
-  return /* @__PURE__ */ React75.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React76.createElement(
     Button,
     {
       id,
@@ -11107,10 +11165,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ React75.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
-    label && labelPosition === "inset" && /* @__PURE__ */ React75.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React75.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ React75.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ React75.createElement(Select.Value, { placeholder })),
-    /* @__PURE__ */ React75.createElement(
+    icon && /* @__PURE__ */ React76.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
+    label && labelPosition === "inset" && /* @__PURE__ */ React76.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React76.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ React76.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ React76.createElement(Select.Value, { placeholder })),
+    /* @__PURE__ */ React76.createElement(
       DropdownChevronIcon3,
       {
         className: cx(
@@ -11142,6 +11200,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
   contentStyle: contentStyleProp,
   ...props
 }) {
+  const portalScopeId = usePortalScopeId();
   const selectedItem = items.find(
     (item) => isSelectableMenuItem(item) && item.value === value
   );
@@ -11158,7 +11217,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     setInternalOpen(open2);
   };
   const readOnlyButton = useMemo34(
-    () => /* @__PURE__ */ React75.createElement(
+    () => /* @__PURE__ */ React76.createElement(
       Button,
       {
         id,
@@ -11168,7 +11227,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ React75.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ React76.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
@@ -11180,7 +11239,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ React75.createElement(
+  const content = /* @__PURE__ */ React76.createElement(
     Select.Root,
     {
       value,
@@ -11188,7 +11247,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -11203,9 +11262,10 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ React75.createElement(Select.Portal, null, /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(Select.Portal, null, /* @__PURE__ */ React76.createElement(
       Select.Content,
       {
+        ...portalScopeProps(portalScopeId),
         className: styles.contentStyle,
         position: "popper",
         sideOffset: 6,
@@ -11213,14 +11273,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ React75.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React75.createElement(
+      /* @__PURE__ */ React76.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React76.createElement(
         ChevronUpIcon,
         {
           className: cx("transition-transform duration-100")
         }
       )),
-      /* @__PURE__ */ React75.createElement(Select.Viewport, null, /* @__PURE__ */ React75.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ React75.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React75.createElement(ChevronDownIcon, null))
+      /* @__PURE__ */ React76.createElement(Select.Viewport, null, /* @__PURE__ */ React76.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ React76.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React76.createElement(ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -11228,13 +11288,13 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React76, { memo as memo32, useCallback as useCallback30, useMemo as useMemo35 } from "react";
+import React77, { memo as memo34, useCallback as useCallback30, useMemo as useMemo35 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
 var insetEndStyles2 = getInsetEndStyles();
-var Slider = memo32(function Slider2({
+var Slider = memo34(function Slider2({
   style: style2,
   className,
   value,
@@ -11283,7 +11343,7 @@ var Slider = memo32(function Slider2({
     }),
     [percentage.raw]
   );
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     RadixSlider.Root,
     {
       min,
@@ -11301,19 +11361,19 @@ var Slider = memo32(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React76.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React76.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React76.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React77.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React77.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React77.createElement(
       "div",
       {
         style: trackFillStyle,
         className: cx(
-          "absolute inset-0 w-full h-full rounded overflow-hidden",
+          "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
           colorScheme === "primary" && "bg-primary",
           colorScheme === "secondary" && "bg-secondary"
         )
       }
     )),
-    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React76.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React76.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
-    /* @__PURE__ */ React76.createElement(
+    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React77.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React77.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
+    /* @__PURE__ */ React77.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
@@ -11330,7 +11390,7 @@ var Slider = memo32(function Slider2({
 
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React77 from "react";
+import * as React78 from "react";
 var Switch = function Switch2({
   id,
   value,
@@ -11342,7 +11402,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11361,20 +11421,20 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React77.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
+    /* @__PURE__ */ React78.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
   );
 };
 
 // src/components/UserPointer.tsx
-import React78, { memo as memo33, useMemo as useMemo36 } from "react";
-var UserPointerContainer = memo33(function UserPointerContainer2({
+import React79, { memo as memo35, useMemo as useMemo36 } from "react";
+var UserPointerContainer = memo35(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "div",
     {
       style: {
@@ -11391,13 +11451,13 @@ var UserPointerContainer = memo33(function UserPointerContainer2({
     children
   );
 });
-var UserNameTag = memo33(function UserNameTag2({
+var UserNameTag = memo35(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
   children
 }) {
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "span",
     {
       className: cx(
@@ -11413,14 +11473,14 @@ var UserNameTag = memo33(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = memo33(function PointerIcon({
+var UserPointerIcon = memo35(function PointerIcon({
   size: size2,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "svg",
     {
       width: size2,
@@ -11435,7 +11495,7 @@ var UserPointerIcon = memo33(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React79.createElement(
       "polygon",
       {
         points,
@@ -11448,7 +11508,7 @@ var UserPointerIcon = memo33(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = memo33(function UserPointer2({
+var UserPointer = memo35(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -11472,7 +11532,7 @@ var UserPointer = memo33(function UserPointer2({
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     UserPointerContainer,
     {
       point,
@@ -11480,14 +11540,14 @@ var UserPointer = memo33(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React78.createElement("div", { className: "relative" }, /* @__PURE__ */ React78.createElement(
+    name && /* @__PURE__ */ React79.createElement("div", { className: "relative" }, /* @__PURE__ */ React79.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React78.createElement(
+    ), /* @__PURE__ */ React79.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -11500,9 +11560,9 @@ var UserPointer = memo33(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React82, {
-  forwardRef as forwardRef28,
-  memo as memo36,
+import React83, {
+  forwardRef as forwardRef27,
+  memo as memo38,
   useCallback as useCallback31,
   useImperativeHandle as useImperativeHandle9,
   useRef as useRef27,
@@ -11530,7 +11590,7 @@ function useWindowSize() {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React80, { memo as memo34, useLayoutEffect as useLayoutEffect9, useRef as useRef25, useState as useState29 } from "react";
+import React81, { memo as memo36, useLayoutEffect as useLayoutEffect9, useRef as useRef25, useState as useState29 } from "react";
 
 // src/hooks/usePreservePanelSize.tsx
 import { useLayoutEffect as useLayoutEffect8, useRef as useRef24 } from "react";
@@ -11670,7 +11730,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var DrawerWorkspaceLayout = memo34(function DrawerWorkspaceLayout2({
+var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
   leftPanel,
   leftSidebarRef,
   rightPanel,
@@ -11691,14 +11751,14 @@ var DrawerWorkspaceLayout = memo34(function DrawerWorkspaceLayout2({
   }, [handleChangeLayoutState, mounted]);
   const leftSidebarCollapsed = internalLayoutState?.leftSidebarCollapsed ?? false;
   const rightSidebarCollapsed = internalLayoutState?.rightSidebarCollapsed ?? false;
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "flex flex-1 relative focus:outline-none"
     },
-    leftPanel && /* @__PURE__ */ React80.createElement(
+    leftPanel && /* @__PURE__ */ React81.createElement(
       Drawer,
       {
         id: LEFT_SIDEBAR_ID,
@@ -11719,7 +11779,7 @@ var DrawerWorkspaceLayout = memo34(function DrawerWorkspaceLayout2({
       leftPanel
     ),
     centerPanel,
-    rightPanel && /* @__PURE__ */ React80.createElement(
+    rightPanel && /* @__PURE__ */ React81.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -11743,13 +11803,13 @@ var DrawerWorkspaceLayout = memo34(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React81, { memo as memo35, useRef as useRef26 } from "react";
+import React82, { memo as memo37, useRef as useRef26 } from "react";
 import {
   Panel,
   PanelGroup,
   PanelResizeHandle
 } from "react-resizable-panels";
-var PanelWorkspaceLayout = memo35(function PanelWorkspaceLayout2({
+var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
   leftPanel,
   rightPanel,
   centerPanel,
@@ -11764,7 +11824,7 @@ var PanelWorkspaceLayout = memo35(function PanelWorkspaceLayout2({
 }) {
   const panelGroupRef = useRef26(null);
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -11773,7 +11833,7 @@ var PanelWorkspaceLayout = memo35(function PanelWorkspaceLayout2({
       direction: "horizontal",
       autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
     },
-    leftPanel && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+    leftPanel && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -11786,8 +11846,8 @@ var PanelWorkspaceLayout = memo35(function PanelWorkspaceLayout2({
         collapsible: true
       },
       internalLayoutState?.leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React81.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
-    /* @__PURE__ */ React81.createElement(
+    ), /* @__PURE__ */ React82.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
+    /* @__PURE__ */ React82.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -11798,7 +11858,7 @@ var PanelWorkspaceLayout = memo35(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React81.createElement(
+    rightPanel && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React82.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -11816,7 +11876,7 @@ var PanelWorkspaceLayout = memo35(function PanelWorkspaceLayout2({
 });
 
 // src/components/workspace/WorkspaceLayout.tsx
-var WorkspaceLayout = forwardRef28(function WorkspaceLayout2({
+var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
   autoSavePrefix,
   left,
   right,
@@ -11847,7 +11907,7 @@ var WorkspaceLayout = forwardRef28(function WorkspaceLayout2({
   } = {},
   theme
 }, forwardedRef) {
-  const containerRef = React82.useRef(null);
+  const containerRef = React83.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -11945,7 +12005,7 @@ var WorkspaceLayout = forwardRef28(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
-  const leftPanel = left ? /* @__PURE__ */ React82.createElement(
+  const leftPanel = left ? /* @__PURE__ */ React83.createElement(
     PanelInner,
     {
       style: leftStyle,
@@ -11953,7 +12013,7 @@ var WorkspaceLayout = forwardRef28(function WorkspaceLayout2({
     },
     left
   ) : null;
-  const rightPanel = right ? /* @__PURE__ */ React82.createElement(
+  const rightPanel = right ? /* @__PURE__ */ React83.createElement(
     PanelInner,
     {
       style: rightStyle,
@@ -11961,7 +12021,7 @@ var WorkspaceLayout = forwardRef28(function WorkspaceLayout2({
     },
     right
   ) : null;
-  const centerPanel = /* @__PURE__ */ React82.createElement(PanelInner, { className: "bg-canvas-background" }, children);
+  const centerPanel = /* @__PURE__ */ React83.createElement(PanelInner, { className: "bg-canvas-background" }, children);
   const leftSidebarOptions = {
     minSize: leftSidebarMinPercentage,
     maxSize: leftSidebarMaxPercentage,
@@ -11976,7 +12036,7 @@ var WorkspaceLayout = forwardRef28(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__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(
     "div",
     {
       ref: containerRef,
@@ -11986,7 +12046,7 @@ var WorkspaceLayout = forwardRef28(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ React82.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React83.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -12004,12 +12064,12 @@ var WorkspaceLayout = forwardRef28(function WorkspaceLayout2({
     ))
   );
 });
-var PanelInner = memo36(function PanelInner2({
+var PanelInner = memo38(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React82.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
+  return /* @__PURE__ */ React83.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
 });
 
 // src/hooks/usePlatform.ts
@@ -12162,11 +12222,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import * as React83 from "react";
+import * as React84 from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React83.memo(function DimensionInput2({
+var DimensionInput = React84.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -12176,15 +12236,15 @@ var DimensionInput = React83.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React83.useCallback(
+  const handleNudgeValue = React84.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React83.useCallback(
+  const handleSetValue = React84.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React83.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React83.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React84.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React84.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -12211,11 +12271,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title4,
   VerticalSeparator: () => VerticalSeparator
 });
-import React84, {
-  forwardRef as forwardRef29,
-  memo as memo38
+import React85, {
+  forwardRef as forwardRef28,
+  memo as memo40
 } from "react";
-var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React84.createElement(
+var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React85.createElement(
   "div",
   {
     ref,
@@ -12223,8 +12283,8 @@ var Section2 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React84.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
-var Title4 = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React84.createElement(
+var SectionHeader3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React85.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
+var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React85.createElement(
   "div",
   {
     ref,
@@ -12235,7 +12295,7 @@ var Title4 = forwardRef29(({ className, $textStyle, ...props }, ref) => /* @__PU
     ...props
   }
 ));
-var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React84.createElement(
+var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React85.createElement(
   "div",
   {
     ref,
@@ -12243,7 +12303,7 @@ var Row = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React84
     ...props
   }
 ));
-var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React84.createElement(
+var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React85.createElement(
   "div",
   {
     ref,
@@ -12251,7 +12311,7 @@ var Column = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React84.createElement(
+var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React85.createElement(
   "input",
   {
     ref,
@@ -12260,7 +12320,7 @@ var Checkbox3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React84.createElement(
+var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React85.createElement(
   "span",
   {
     ref,
@@ -12268,14 +12328,14 @@ var Text3 = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React84.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React84.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = forwardRef29(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ React85.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = forwardRef28(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "label",
     {
       ref,
@@ -12287,7 +12347,7 @@ var RowLabel = forwardRef29(function RowLabel2({
     }
   );
 });
-var LabeledRow = memo38(function LabeledRow2({
+var LabeledRow = memo40(function LabeledRow2({
   id,
   children,
   label,
@@ -12295,11 +12355,11 @@ var LabeledRow = memo38(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React84.createElement(Row, { id, className }, /* @__PURE__ */ React84.createElement(Column, null, /* @__PURE__ */ React84.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React84.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React84.createElement(Row, null, children)));
+  return /* @__PURE__ */ React85.createElement(Row, { id, className }, /* @__PURE__ */ React85.createElement(Column, null, /* @__PURE__ */ React85.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React85.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React85.createElement(Row, null, children)));
 });
 
 // src/components/BaseToolbar.tsx
-import React85 from "react";
+import React86 from "react";
 var toolbarStyle = {
   [cssVarNames.colors.inputBackground]: "transparent"
 };
@@ -12310,7 +12370,7 @@ function BaseToolbar({
   logo,
   showDivider = true
 }) {
-  return /* @__PURE__ */ React85.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React86.createElement(
     "div",
     {
       className: "flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar",
@@ -12318,10 +12378,10 @@ function BaseToolbar({
         flex: `0 0 ${cssVars.spacing.toolbarHeight}`
       }
     },
-    logo && /* @__PURE__ */ React85.createElement(React85.Fragment, null, logo, /* @__PURE__ */ React85.createElement(DividerVertical, null)),
-    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ React85.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React85.createElement(
+    logo && /* @__PURE__ */ React86.createElement(React86.Fragment, null, logo, /* @__PURE__ */ React86.createElement(DividerVertical, null)),
+    /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 }),
+    left && /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 })),
+    /* @__PURE__ */ React86.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React86.createElement(
       "div",
       {
         style: {
@@ -12333,16 +12393,91 @@ function BaseToolbar({
       },
       children
     )),
-    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ React85.createElement("div", { className: "flex gap-toolbar-separator" }, right)
-  ), showDivider && /* @__PURE__ */ React85.createElement(Divider, { variant: "strong" }));
+    /* @__PURE__ */ React86.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ React86.createElement("div", { className: "flex gap-toolbar-separator" }, right)
+  ), showDivider && /* @__PURE__ */ React86.createElement(Divider, { variant: "strong" }));
 }
 
 // src/components/Toolbar.tsx
 import { DropdownChevronIcon as DropdownChevronIcon4 } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React86 from "react";
+import React87 from "react";
+var iconButtonStyle = {
+  height: 27,
+  width: 27,
+  minWidth: 27
+};
+var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
+  item,
+  onSelectMenuItem
+}) {
+  const [open, setOpen] = React87.useState(false);
+  return /* @__PURE__ */ React87.createElement(
+    DropdownMenu,
+    {
+      open,
+      onOpenChange: setOpen,
+      items: item.items,
+      onSelect: (value) => {
+        if (onSelectMenuItem && value) {
+          onSelectMenuItem(value);
+        }
+      }
+    },
+    /* @__PURE__ */ React87.createElement(Button, { disabled: item.disabled, active: item.checked || open }, item.icon && renderIcon(item.icon), item.title && item.icon && /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { inline: true, size: 6 }), item.title, /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ React87.createElement(DropdownChevronIcon4, null))
+  );
+});
+var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
+  item,
+  onSelectMenuItem
+}) {
+  const content = /* @__PURE__ */ React87.createElement(
+    Button,
+    {
+      disabled: item.disabled,
+      active: item.checked,
+      style: item.icon && !item.title ? iconButtonStyle : void 0,
+      onClick: () => {
+        if (onSelectMenuItem && item.value) {
+          onSelectMenuItem(item.value);
+        }
+      }
+    },
+    item.icon && renderIcon(item.icon),
+    item.title && item.icon && /* @__PURE__ */ React87.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+    item.title
+  );
+  return item.tooltip ? /* @__PURE__ */ React87.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
+});
+var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
+  item,
+  onSelectMenuItem
+}) {
+  if (item.type === "sectionHeader") return null;
+  if (item.type === "separator") {
+    return /* @__PURE__ */ React87.createElement(DividerVertical, { overflow: 4 });
+  }
+  if (isSelectableMenuItem(item)) {
+    return /* @__PURE__ */ React87.createElement(ToolbarMenuButton, { item, onSelectMenuItem });
+  }
+  return /* @__PURE__ */ React87.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+});
+var ToolbarMenu = memoGeneric(function ToolbarMenu2({
+  items,
+  onSelectMenuItem
+}) {
+  return /* @__PURE__ */ React87.createElement(React87.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React87.createElement(
+      ToolbarMenuItem,
+      {
+        key: i,
+        item,
+        onSelectMenuItem
+      }
+    );
+  }));
+});
 function Toolbar({
   children,
   logo,
@@ -12351,28 +12486,28 @@ function Toolbar({
   onSelectMenuItem,
   shouldBindKeyboardShortcuts = true
 }) {
-  const allMenuItems = React86.useMemo(
+  const allMenuItems = React87.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   useKeyboardShortcuts4(
-    React86.useMemo(
+    React87.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React86.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React86.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React87.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React87.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
           onSelectMenuItem
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React86.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React86.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React87.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React87.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -12383,64 +12518,6 @@ function Toolbar({
     children
   );
 }
-var activeButtonStyle = {
-  backgroundColor: cssVars.colors.primaryPastel,
-  color: cssVars.colors.primary
-};
-var ToolbarMenu = memoGeneric(function ToolbarMenu2({
-  items,
-  onSelectMenuItem
-}) {
-  return /* @__PURE__ */ React86.createElement(React86.Fragment, null, items.map((item, i) => {
-    if (item.type === "sectionHeader") return null;
-    if (item.type === "separator") {
-      return /* @__PURE__ */ React86.createElement(DividerVertical, { key: i, overflow: 4 });
-    }
-    if (isSelectableMenuItem(item)) {
-      const content = /* @__PURE__ */ React86.createElement(
-        Button,
-        {
-          key: i,
-          disabled: item.disabled,
-          style: item.checked ? activeButtonStyle : void 0,
-          onClick: () => {
-            if (onSelectMenuItem && item.value) {
-              onSelectMenuItem(item.value);
-            }
-          }
-        },
-        item.title,
-        item.title && item.icon && /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-        item.icon && renderIcon(item.icon)
-      );
-      return item.tooltip ? /* @__PURE__ */ React86.createElement(Tooltip, { sideOffset: 10, content: item.tooltip, key: i }, content) : content;
-    }
-    return /* @__PURE__ */ React86.createElement(
-      DropdownMenu,
-      {
-        key: i,
-        items: item.items,
-        onSelect: (value) => {
-          if (onSelectMenuItem && value) {
-            onSelectMenuItem(value);
-          }
-        }
-      },
-      /* @__PURE__ */ React86.createElement(
-        Button,
-        {
-          disabled: item.disabled,
-          style: item.checked ? activeButtonStyle : void 0
-        },
-        item.title,
-        item.title && item.icon && /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-        item.icon && renderIcon(item.icon),
-        /* @__PURE__ */ React86.createElement(Spacer.Horizontal, { size: 6 }),
-        /* @__PURE__ */ React86.createElement(DropdownChevronIcon4, null)
-      )
-    );
-  }));
-});
 export {
   AIAssistantInput,
   AIAssistantLayout,
@@ -12529,6 +12606,7 @@ export {
   PipelineResultLayout,
   PipelineResultLink,
   Popover,
+  PortalScopeProvider,
   Progress,
   RIGHT_SIDEBAR_ID,
   SUPPORTED_CANVAS_UPLOAD_TYPES,
@@ -12539,7 +12617,7 @@ export {
   SectionHeader,
   SegmentedControl,
   SelectMenu,
-  SelectionToolbar,
+  SelectionToolbarContainer,
   Slider,
   Small,
   Sortable2 as Sortable,
@@ -12552,6 +12630,9 @@ export {
   ToastProvider,
   Toolbar,
   ToolbarMenu,
+  ToolbarMenuButton,
+  ToolbarMenuDropdown,
+  ToolbarMenuItem,
   Tooltip,
   TreeView,
   UserAvatar,
@@ -12570,6 +12651,7 @@ export {
   fuzzyFilter,
   fuzzyScore,
   fuzzyTokenize,
+  getClosestPortalScope,
   getFieldSpacing,
   getGradientBackground,
   getGridSize,
@@ -12589,6 +12671,9 @@ export {
   moveTreeItem,
   normalizeListTargetIndex,
   popoverStyle,
+  portalScopeDataSetName,
+  portalScopePropName,
+  portalScopeProps,
   renderIcon,
   rgbaToSketchColor,
   separator,
@@ -12621,6 +12706,7 @@ export {
   useOpenInputDialog,
   usePlatform,
   usePlatformModKey,
+  usePortalScopeId,
   usePreservePanelSize,
   useTheme,
   validateDropIndicator,