@noya-app/noya-designsystem 0.1.52 → 0.1.53

package/dist/index.js

@@ -117,6 +117,7 @@ __export(src_exports, {
   PipelineResultLayout: () => PipelineResultLayout,
   PipelineResultLink: () => PipelineResultLink,
   Popover: () => Popover,
+  PortalScopeProvider: () => PortalScopeProvider,
   Progress: () => Progress,
   RIGHT_SIDEBAR_ID: () => RIGHT_SIDEBAR_ID,
   SUPPORTED_CANVAS_UPLOAD_TYPES: () => SUPPORTED_CANVAS_UPLOAD_TYPES,
@@ -127,7 +128,7 @@ __export(src_exports, {
   SectionHeader: () => SectionHeader,
   SegmentedControl: () => SegmentedControl,
   SelectMenu: () => SelectMenu,
-  SelectionToolbar: () => SelectionToolbar,
+  SelectionToolbarContainer: () => SelectionToolbarContainer,
   Slider: () => Slider,
   Small: () => Small,
   Sortable: () => Sortable2,
@@ -140,6 +141,8 @@ __export(src_exports, {
   ToastProvider: () => ToastProvider,
   Toolbar: () => Toolbar,
   ToolbarMenu: () => ToolbarMenu,
+  ToolbarMenuButton: () => ToolbarMenuButton,
+  ToolbarMenuDropdown: () => ToolbarMenuDropdown,
   Tooltip: () => Tooltip,
   TreeView: () => TreeView,
   UserAvatar: () => UserAvatar,
@@ -158,6 +161,7 @@ __export(src_exports, {
   fuzzyFilter: () => fuzzyFilter,
   fuzzyScore: () => fuzzyScore,
   fuzzyTokenize: () => fuzzyTokenize,
+  getClosestPortalScope: () => getClosestPortalScope,
   getFieldSpacing: () => getFieldSpacing,
   getGradientBackground: () => getGradientBackground,
   getGridSize: () => getGridSize,
@@ -177,6 +181,9 @@ __export(src_exports, {
   moveTreeItem: () => moveTreeItem,
   normalizeListTargetIndex: () => normalizeListTargetIndex,
   popoverStyle: () => popoverStyle,
+  portalScopeDataSetName: () => portalScopeDataSetName,
+  portalScopePropName: () => portalScopePropName,
+  portalScopeProps: () => portalScopeProps,
   renderIcon: () => renderIcon,
   rgbaToSketchColor: () => rgbaToSketchColor,
   separator: () => separator,
@@ -209,6 +216,7 @@ __export(src_exports, {
   useOpenInputDialog: () => useOpenInputDialog,
   usePlatform: () => usePlatform,
   usePlatformModKey: () => usePlatformModKey,
+  usePortalScopeId: () => usePortalScopeId,
   usePreservePanelSize: () => usePreservePanelSize,
   useTheme: () => useTheme,
   validateDropIndicator: () => validateDropIndicator,
@@ -631,20 +639,50 @@ var import_noya_keymap3 = require("@noya-app/noya-keymap");
 var RadixDropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_react35 = __toESM(require("react"));
 
+// src/contexts/PortalScopeContext.tsx
+var React5 = __toESM(require("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
 var import_noya_keymap2 = require("@noya-app/noya-keymap");
 var import_react32 = __toESM(require("react"));
 
 // src/contexts/DesignSystemConfiguration.tsx
 var import_noya_keymap = require("@noya-app/noya-keymap");
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 
 // src/components/Toast.tsx
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
 var import_react21 = __toESM(require("react"));
 
 // src/components/IconButton.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 
 // src/components/Button.tsx
 var import_react20 = __toESM(require("react"));
@@ -714,7 +752,7 @@ function mergeConflictingClassNames(classNames, options) {
 
 // src/components/Tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 
 // src/components/Text.tsx
 var import_react19 = __toESM(require("react"));
@@ -810,14 +848,16 @@ var Italic = ({ children }) => /* @__PURE__ */ import_react19.default.createElem
 );
 
 // 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,
@@ -866,7 +906,7 @@ var Button = (0, import_react20.forwardRef)(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 = (0, import_react20.useMemo)(() => {
@@ -904,27 +944,27 @@ var Button_default = Button;
 
 // src/components/Icons.tsx
 var Icons = __toESM(require("@noya-app/noya-icons"));
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("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),
@@ -975,10 +1015,10 @@ var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_react22 = __toESM(require("react"));
 
 // src/components/Spacer.tsx
-var React11 = __toESM(require("react"));
-var SpacerVertical = React11.forwardRef(
+var React12 = __toESM(require("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" : ""}`,
@@ -991,9 +1031,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" : ""}`,
@@ -1488,9 +1528,11 @@ function Popover({
   onClickClose,
   className
 }) {
+  const portalScopeId = usePortalScopeId();
   return /* @__PURE__ */ import_react27.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react27.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react27.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react27.default.createElement(
     PopoverPrimitive.Content,
     {
+      ...portalScopeProps(portalScopeId),
       className: cx(
         popoverStyle.base,
         variant === "large" && popoverStyle.large,
@@ -2235,30 +2277,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((0, import_noya_keymap.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
@@ -2488,6 +2530,7 @@ var MenuViewport = ({
   Components: Components4,
   onSelect
 }) => {
+  const portalScopeId = usePortalScopeId();
   const hasCheckedItem = items.some(
     (item) => item.type !== "separator" && item.type !== "sectionHeader" && item.checked
   );
@@ -2524,7 +2567,8 @@ var MenuViewport = ({
               onClick: (e) => {
                 e.stopPropagation();
                 e.preventDefault();
-              }
+              },
+              disabled: item.disabled
             },
             /* @__PURE__ */ import_react34.default.createElement(
               SelectItem,
@@ -2543,6 +2587,7 @@ var MenuViewport = ({
           ), /* @__PURE__ */ import_react34.default.createElement(Components4.Portal, null, /* @__PURE__ */ import_react34.default.createElement(
             Components4.SubContent,
             {
+              ...portalScopeProps(portalScopeId),
               alignOffset: -5,
               className: styles.contentStyle
             },
@@ -2606,6 +2651,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     emptyState,
     contentStyle
   } = props;
+  const portalScopeId = usePortalScopeId();
   const keymap = (0, import_react35.useMemo)(
     () => shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [items, onSelect, shouldBindKeyboardShortcuts]
@@ -2629,6 +2675,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
   ), /* @__PURE__ */ import_react35.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react35.default.createElement(
     RadixDropdownMenu.Content,
     {
+      ...portalScopeProps(portalScopeId),
       className: styles.contentStyle,
       side,
       sideOffset,
@@ -2691,16 +2738,16 @@ var ActionMenu = memoGeneric(function ActionMenu2({
 });
 
 // src/components/ActivityIndicator.tsx
-var React26 = __toESM(require("react"));
-var ActivityIndicator = React26.memo(function ActivityIndicator2({
+var React27 = __toESM(require("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,
@@ -2709,13 +2756,13 @@ 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%]" })
   );
 });
 
@@ -3361,16 +3408,16 @@ var BreadcrumbSlash = () => {
 };
 
 // src/components/Checkbox.tsx
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("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(
@@ -3380,7 +3427,7 @@ var Checkbox = React34.memo(
         ),
         style: style2
       },
-      /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React35.createElement(
         "input",
         {
           ref,
@@ -3409,7 +3456,7 @@ var Checkbox = React34.memo(
           id
         }
       ),
-      /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React35.createElement(
         "svg",
         {
           className: `
@@ -3429,7 +3476,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",
@@ -3448,7 +3495,7 @@ var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_react45 = __toESM(require("react"));
 
 // src/hooks/useHover.ts
-var React35 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -3478,13 +3525,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) {
@@ -3851,6 +3898,7 @@ function ContextMenuRoot({
     () => shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [items, onSelect, shouldBindKeyboardShortcuts]
   );
+  const portalScopeId = usePortalScopeId();
   (0, import_noya_keymap4.useKeyboardShortcuts)(keymap);
   const onPointerDown = (0, import_react47.useCallback)((event) => {
     event.preventDefault();
@@ -3862,39 +3910,46 @@ function ContextMenuRoot({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ import_react47.default.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ import_react47.default.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react47.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react47.default.createElement(RadixContextMenu.Content, { className: styles.contentStyle }, /* @__PURE__ */ import_react47.default.createElement(
-    MenuViewport,
+  return /* @__PURE__ */ import_react47.default.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ import_react47.default.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react47.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react47.default.createElement(
+    RadixContextMenu.Content,
     {
-      items,
-      Components: Components2,
-      onSelect: handleSelectItem
-    }
-  ))));
+      ...portalScopeProps(portalScopeId),
+      className: styles.contentStyle
+    },
+    /* @__PURE__ */ import_react47.default.createElement(
+      MenuViewport,
+      {
+        items,
+        Components: Components2,
+        onSelect: handleSelectItem
+      }
+    )
+  )));
 }
 var ContextMenu = memoGeneric(ContextMenuRoot);
 
 // src/components/ScrollArea.tsx
 var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
-var React39 = __toESM(require("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(
+var React40 = __toESM(require("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" })
   )));
 });
 
@@ -4423,7 +4478,7 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/Sortable.tsx
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_react50 = require("react");
 var import_react_dom2 = require("react-dom");
 var normalizeListTargetIndex = (index, position) => {
@@ -4437,7 +4492,7 @@ var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = React42.createContext({
+var SortableItemContext = React43.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -4492,7 +4547,7 @@ function SortableItem({
     setActivatorEvent,
     axis,
     getDropTargetParentIndex
-  } = React42.useContext(SortableItemContext);
+  } = React43.useContext(SortableItemContext);
   const sortable = (0, import_sortable.useSortable)({ id, disabled });
   const { activatorEvent } = (0, import_core.useDndContext)();
   const {
@@ -4513,7 +4568,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");
@@ -4550,26 +4605,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);
@@ -4596,14 +4651,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,
@@ -4622,7 +4677,7 @@ function SortableRoot({
         ]
       )
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -4631,7 +4686,7 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React42.createElement(
+      /* @__PURE__ */ React43.createElement(
         import_sortable.SortableContext,
         {
           items: keys,
@@ -4640,7 +4695,7 @@ function SortableRoot({
         children
       ),
       mounted && renderOverlay && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ React42.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ React43.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -4658,11 +4713,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],
@@ -4682,14 +4737,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,
@@ -5797,23 +5852,25 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return readOnly ? item : /* @__PURE__ */ import_react56.default.createElement(
+    return /* @__PURE__ */ import_react56.default.createElement(
       ToggleGroupPrimitive.Item,
       {
         asChild: true,
         value: option,
-        key: option
+        key: option,
+        disabled: readOnly
       },
       item
     );
   }));
-  return readOnly ? content : /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     ToggleGroupPrimitive.Root,
     {
       type: "single",
       value,
       onValueChange,
-      className: "w-full"
+      className: "w-full",
+      disabled: readOnly
     },
     content
   );
@@ -6940,29 +6997,13 @@ var ConnectedUsersMenuLayout = ({
 // src/components/DraggableMenuButton.tsx
 var import_noya_icons8 = require("@noya-app/noya-icons");
 var import_react64 = __toESM(require("react"));
-var DotButton = (0, import_react64.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react64.default.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 = (0, import_react64.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react64.default.createElement(
-  "div",
-  {
-    ref,
-    className: cx(`pointer-events-none h-[15px] `, className),
-    ...props
-  }
-));
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   items,
   onSelect,
-  isVisible = true
+  onClick,
+  isVisible = true,
+  className,
+  style: style2
 }) {
   const [open, setOpen] = (0, import_react64.useState)(false);
   const [downPosition, setDownPosition] = (0, import_react64.useState)(null);
@@ -7002,13 +7043,19 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     [setOpen]
   );
   return /* @__PURE__ */ import_react64.default.createElement(
-    DotButton,
+    "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__ */ import_react64.default.createElement(
@@ -7020,7 +7067,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react64.default.createElement(Trigger5, null, /* @__PURE__ */ import_react64.default.createElement(
+      /* @__PURE__ */ import_react64.default.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ import_react64.default.createElement(
         import_noya_icons8.DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
@@ -7037,10 +7084,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 var import_react65 = require("react");
-var Drawer = React56.memo(
-  React56.forwardRef(function Drawer2({
+var Drawer = React57.memo(
+  React57.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -7070,7 +7117,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(
@@ -7078,7 +7125,7 @@ var Drawer = React56.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React56.createElement(
+    ), /* @__PURE__ */ React57.createElement(
       Dialog3.Content,
       {
         id,
@@ -7090,18 +7137,18 @@ 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
     );
   })
 );
@@ -7517,25 +7564,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var React60 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 
 // src/contexts/ImageDataContext.tsx
-var React59 = __toESM(require("react"));
-var ImageDataContext = React59.createContext(
+var React60 = __toESM(require("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");
   }
@@ -7601,10 +7648,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`
@@ -7623,7 +7670,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React60.memo(
+var PatternPreviewBackground = React61.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -7632,7 +7679,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})`,
@@ -7640,44 +7687,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,
@@ -7977,8 +8024,8 @@ var FloatingWindow = ({
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var React63 = __toESM(require("react"));
-var GradientPicker = React63.memo(function GradientPicker2({
+var React64 = __toESM(require("react"));
+var GradientPicker = React64.memo(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -7987,7 +8034,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: import_noya_colorpicker2.rgbaToHsva,
@@ -7996,30 +8043,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(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React64.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -8030,12 +8077,12 @@ var GradientPicker = React63.memo(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React63.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React63.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ React63.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React63.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ React63.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React63.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ React64.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React64.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ React64.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React64.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ React64.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React64.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
@@ -8073,25 +8120,25 @@ var InspectorContainer = (0, import_react71.memo)(
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var React65 = __toESM(require("react"));
-var LabeledElementView = React65.memo(function LabeledElementView2({
+var React66 = __toESM(require("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,
@@ -8104,7 +8151,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();
@@ -8166,7 +8213,7 @@ 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
@@ -10877,27 +10924,27 @@ function getPipelineResultLink(value) {
 // src/components/Progress.tsx
 var import_noya_utils10 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var React71 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 function Progress({
   value,
   variant = "normal",
   className
 }) {
   const clampedValue = (0, import_noya_utils10.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`,
@@ -11093,42 +11140,48 @@ var createVirtualElement = (rect) => ({
     toJSON: () => null
   })
 });
-var SelectionToolbar = memoGeneric(function SelectionToolbar2({ rect, menuItems, onSelectMenuItem }) {
-  const containerRef = import_react79.default.useRef(null);
-  const size2 = useSize(containerRef, "width");
-  const virtualRef = (0, import_react79.useMemo)(
-    () => ({
-      current: createVirtualElement(rect)
-    }),
-    [rect]
-  );
-  return /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Anchor, { virtualRef }), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement(
-      "div",
+var SelectionToolbarContainer = (0, import_react79.memo)(
+  function SelectionToolbarContainer2({
+    rect,
+    children
+  }) {
+    const portalScopeId = usePortalScopeId();
+    const containerRef = import_react79.default.useRef(null);
+    const size2 = useSize(containerRef, "width");
+    const virtualRef = (0, import_react79.useMemo)(
+      () => ({
+        current: createVirtualElement(rect)
+      }),
+      [rect]
+    );
+    return /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Anchor, { virtualRef }), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement(ToolbarMenu, { items: menuItems, onSelectMenuItem })
-    )
-  ));
-});
+      /* @__PURE__ */ import_react79.default.createElement(
+        "div",
+        {
+          ref: containerRef,
+          className: "flex gap-1 bg-popover-background rounded shadow-popover p-1"
+        },
+        children
+      )
+    ));
+  }
+);
 
 // src/components/SelectMenu.tsx
 var import_noya_icons11 = require("@noya-app/noya-icons");
@@ -11211,6 +11264,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
   contentStyle: contentStyleProp,
   ...props
 }) {
+  const portalScopeId = usePortalScopeId();
   const selectedItem = items.find(
     (item) => isSelectableMenuItem(item) && item.value === value
   );
@@ -11275,6 +11329,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     /* @__PURE__ */ import_react80.default.createElement(Select.Portal, null, /* @__PURE__ */ import_react80.default.createElement(
       Select.Content,
       {
+        ...portalScopeProps(portalScopeId),
         className: styles.contentStyle,
         position: "popper",
         sideOffset: 6,
@@ -11399,7 +11454,7 @@ var Slider = (0, import_react81.memo)(function Slider2({
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var React77 = __toESM(require("react"));
+var React78 = __toESM(require("react"));
 var Switch = function Switch2({
   id,
   value,
@@ -11411,7 +11466,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11430,7 +11485,7 @@ 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]" })
   );
 };
 
@@ -12220,11 +12275,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var React83 = __toESM(require("react"));
+var React84 = __toESM(require("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,
@@ -12234,15 +12289,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 : (0, import_noya_utils12.round)(value, 2),
@@ -12398,6 +12453,47 @@ function BaseToolbar({
 var import_noya_icons12 = require("@noya-app/noya-icons");
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
 var import_react91 = __toESM(require("react"));
+var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
+  item,
+  onSelectMenuItem
+}) {
+  const [open, setOpen] = import_react91.default.useState(false);
+  return /* @__PURE__ */ import_react91.default.createElement(
+    DropdownMenu,
+    {
+      open,
+      onOpenChange: setOpen,
+      items: item.items,
+      onSelect: (value) => {
+        if (onSelectMenuItem && value) {
+          onSelectMenuItem(value);
+        }
+      }
+    },
+    /* @__PURE__ */ import_react91.default.createElement(Button, { disabled: item.disabled, active: item.checked || open }, item.title, item.title && item.icon && /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), item.icon && renderIcon(item.icon), /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react91.default.createElement(import_noya_icons12.DropdownChevronIcon, null))
+  );
+});
+var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
+  item,
+  onSelectMenuItem
+}) {
+  const content = /* @__PURE__ */ import_react91.default.createElement(
+    Button,
+    {
+      disabled: item.disabled,
+      active: item.checked,
+      onClick: () => {
+        if (onSelectMenuItem && item.value) {
+          onSelectMenuItem(item.value);
+        }
+      }
+    },
+    item.title,
+    item.title && item.icon && /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+    item.icon && renderIcon(item.icon)
+  );
+  return item.tooltip ? /* @__PURE__ */ import_react91.default.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
+});
 function Toolbar({
   children,
   logo,
@@ -12438,10 +12534,6 @@ function Toolbar({
     children
   );
 }
-var activeButtonStyle = {
-  backgroundColor: cssVars.colors.primaryPastel,
-  color: cssVars.colors.primary
-};
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
   onSelectMenuItem
@@ -12452,47 +12544,22 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
       return /* @__PURE__ */ import_react91.default.createElement(DividerVertical, { key: i, overflow: 4 });
     }
     if (isSelectableMenuItem(item)) {
-      const content = /* @__PURE__ */ import_react91.default.createElement(
-        Button,
+      return /* @__PURE__ */ import_react91.default.createElement(
+        ToolbarMenuButton,
         {
           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__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-        item.icon && renderIcon(item.icon)
+          item,
+          onSelectMenuItem
+        }
       );
-      return item.tooltip ? /* @__PURE__ */ import_react91.default.createElement(Tooltip, { sideOffset: 10, content: item.tooltip, key: i }, content) : content;
     }
     return /* @__PURE__ */ import_react91.default.createElement(
-      DropdownMenu,
+      ToolbarMenuDropdown,
       {
         key: i,
-        items: item.items,
-        onSelect: (value) => {
-          if (onSelectMenuItem && value) {
-            onSelectMenuItem(value);
-          }
-        }
-      },
-      /* @__PURE__ */ import_react91.default.createElement(
-        Button,
-        {
-          disabled: item.disabled,
-          style: item.checked ? activeButtonStyle : void 0
-        },
-        item.title,
-        item.title && item.icon && /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-        item.icon && renderIcon(item.icon),
-        /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { size: 6 }),
-        /* @__PURE__ */ import_react91.default.createElement(import_noya_icons12.DropdownChevronIcon, null)
-      )
+        item,
+        onSelectMenuItem
+      }
     );
   }));
 });
@@ -12585,6 +12652,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   PipelineResultLayout,
   PipelineResultLink,
   Popover,
+  PortalScopeProvider,
   Progress,
   RIGHT_SIDEBAR_ID,
   SUPPORTED_CANVAS_UPLOAD_TYPES,
@@ -12595,7 +12663,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   SectionHeader,
   SegmentedControl,
   SelectMenu,
-  SelectionToolbar,
+  SelectionToolbarContainer,
   Slider,
   Small,
   Sortable,
@@ -12608,6 +12676,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   ToastProvider,
   Toolbar,
   ToolbarMenu,
+  ToolbarMenuButton,
+  ToolbarMenuDropdown,
   Tooltip,
   TreeView,
   UserAvatar,
@@ -12626,6 +12696,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   fuzzyFilter,
   fuzzyScore,
   fuzzyTokenize,
+  getClosestPortalScope,
   getFieldSpacing,
   getGradientBackground,
   getGridSize,
@@ -12645,6 +12716,9 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   moveTreeItem,
   normalizeListTargetIndex,
   popoverStyle,
+  portalScopeDataSetName,
+  portalScopePropName,
+  portalScopeProps,
   renderIcon,
   rgbaToSketchColor,
   separator,
@@ -12677,6 +12751,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   useOpenInputDialog,
   usePlatform,
   usePlatformModKey,
+  usePortalScopeId,
   usePreservePanelSize,
   useTheme,
   validateDropIndicator,