@noya-app/noya-designsystem 0.1.52 → 0.1.54

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,9 @@ __export(src_exports, {
   ToastProvider: () => ToastProvider,
   Toolbar: () => Toolbar,
   ToolbarMenu: () => ToolbarMenu,
+  ToolbarMenuButton: () => ToolbarMenuButton,
+  ToolbarMenuDropdown: () => ToolbarMenuDropdown,
+  ToolbarMenuItem: () => ToolbarMenuItem,
   Tooltip: () => Tooltip,
   TreeView: () => TreeView,
   UserAvatar: () => UserAvatar,
@@ -158,6 +162,7 @@ __export(src_exports, {
   fuzzyFilter: () => fuzzyFilter,
   fuzzyScore: () => fuzzyScore,
   fuzzyTokenize: () => fuzzyTokenize,
+  getClosestPortalScope: () => getClosestPortalScope,
   getFieldSpacing: () => getFieldSpacing,
   getGradientBackground: () => getGradientBackground,
   getGridSize: () => getGridSize,
@@ -177,6 +182,9 @@ __export(src_exports, {
   moveTreeItem: () => moveTreeItem,
   normalizeListTargetIndex: () => normalizeListTargetIndex,
   popoverStyle: () => popoverStyle,
+  portalScopeDataSetName: () => portalScopeDataSetName,
+  portalScopePropName: () => portalScopePropName,
+  portalScopeProps: () => portalScopeProps,
   renderIcon: () => renderIcon,
   rgbaToSketchColor: () => rgbaToSketchColor,
   separator: () => separator,
@@ -209,6 +217,7 @@ __export(src_exports, {
   useOpenInputDialog: () => useOpenInputDialog,
   usePlatform: () => usePlatform,
   usePlatformModKey: () => usePlatformModKey,
+  usePortalScopeId: () => usePortalScopeId,
   usePreservePanelSize: () => usePreservePanelSize,
   useTheme: () => useTheme,
   validateDropIndicator: () => validateDropIndicator,
@@ -631,20 +640,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 +753,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 +849,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 +907,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 +945,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 +1016,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 +1032,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 +1529,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 +2278,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
@@ -2313,7 +2356,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",
@@ -2412,11 +2455,10 @@ var SectionHeader = (0, import_react32.memo)(function SectionHeader2({
 });
 
 // src/components/internal/MenuViewport.tsx
-var import_noya_icons3 = require("@noya-app/noya-icons");
+var import_noya_icons2 = require("@noya-app/noya-icons");
 var import_react34 = __toESM(require("react"));
 
 // src/components/internal/SelectItem.tsx
-var import_noya_icons2 = require("@noya-app/noya-icons");
 var import_react33 = __toESM(require("react"));
 var SelectItem = import_react33.default.forwardRef(
   ({
@@ -2456,7 +2498,7 @@ var SelectItem = import_react33.default.forwardRef(
           )
         },
         /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }),
-        Components4.ItemIndicator && /* @__PURE__ */ import_react33.default.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(import_noya_icons2.CheckIcon, null)),
+        Components4.ItemIndicator && /* @__PURE__ */ import_react33.default.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(Checkmark, null)),
         icon && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 8 })),
         children,
         shortcut && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react33.default.createElement(KeyboardShortcut, { shortcut }))
@@ -2477,10 +2519,34 @@ var SelectItem = import_react33.default.forwardRef(
         onSelect: handleSelectItem,
         ...props
       },
-      /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ import_react33.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(import_noya_icons2.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react33.default.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react33.default.createElement(KeyboardShortcut, { shortcut })))
+      /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ import_react33.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(Checkmark, null)) : indented ? /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react33.default.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react33.default.createElement(KeyboardShortcut, { shortcut })))
     ));
   }
 );
+function Checkmark() {
+  return /* @__PURE__ */ import_react33.default.createElement(
+    "svg",
+    {
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      width: 15,
+      height: 15
+    },
+    /* @__PURE__ */ import_react33.default.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 = ({
@@ -2488,6 +2554,7 @@ var MenuViewport = ({
   Components: Components4,
   onSelect
 }) => {
+  const portalScopeId = usePortalScopeId();
   const hasCheckedItem = items.some(
     (item) => item.type !== "separator" && item.type !== "sectionHeader" && item.checked
   );
@@ -2524,7 +2591,8 @@ var MenuViewport = ({
               onClick: (e) => {
                 e.stopPropagation();
                 e.preventDefault();
-              }
+              },
+              disabled: item.disabled
             },
             /* @__PURE__ */ import_react34.default.createElement(
               SelectItem,
@@ -2538,11 +2606,12 @@ var MenuViewport = ({
                 disabled: item.disabled
               },
               /* @__PURE__ */ import_react34.default.createElement("div", { className: "flex items-center flex-1" }, item.title),
-              /* @__PURE__ */ import_react34.default.createElement(import_noya_icons3.ChevronRightIcon, { className: "-mr-1" })
+              /* @__PURE__ */ import_react34.default.createElement(import_noya_icons2.ChevronRightIcon, { className: "-mr-1" })
             )
           ), /* @__PURE__ */ import_react34.default.createElement(Components4.Portal, null, /* @__PURE__ */ import_react34.default.createElement(
             Components4.SubContent,
             {
+              ...portalScopeProps(portalScopeId),
               alignOffset: -5,
               className: styles.contentStyle
             },
@@ -2606,6 +2675,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 +2699,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 +2762,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 +2780,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 +3432,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 +3451,7 @@ var Checkbox = React34.memo(
         ),
         style: style2
       },
-      /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React35.createElement(
         "input",
         {
           ref,
@@ -3409,7 +3480,7 @@ var Checkbox = React34.memo(
           id
         }
       ),
-      /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React35.createElement(
         "svg",
         {
           className: `
@@ -3429,7 +3500,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",
@@ -3444,11 +3515,11 @@ var Checkbox = React34.memo(
 );
 
 // src/components/Chip.tsx
-var import_noya_icons4 = require("@noya-app/noya-icons");
+var import_noya_icons3 = 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 +3549,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) {
@@ -3641,7 +3712,7 @@ var Chip = (0, import_react45.memo)(
         ...rest
       },
       addable && /* @__PURE__ */ import_react45.default.createElement(
-        import_noya_icons4.PlusIcon,
+        import_noya_icons3.PlusIcon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].add),
           onClick: onAdd && ((event) => {
@@ -3653,7 +3724,7 @@ var Chip = (0, import_react45.memo)(
       ),
       children,
       deletable && /* @__PURE__ */ import_react45.default.createElement(
-        import_noya_icons4.Cross1Icon,
+        import_noya_icons3.Cross1Icon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].delete),
           ...hoverDeleteProps,
@@ -3851,6 +3922,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 +3934,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 +4502,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 +4516,7 @@ var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = React42.createContext({
+var SortableItemContext = React43.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -4492,7 +4571,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 +4592,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 +4629,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 +4675,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 +4701,7 @@ function SortableRoot({
         ]
       )
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -4631,7 +4710,7 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React42.createElement(
+      /* @__PURE__ */ React43.createElement(
         import_sortable.SortableContext,
         {
           items: keys,
@@ -4640,7 +4719,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 +4737,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 +4761,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,
@@ -5749,9 +5828,9 @@ var ColorSwatch = (0, import_react55.forwardRef)(function ColorSwatch2({ color,
         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
       }
     }
@@ -5797,30 +5876,32 @@ 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
   );
 }
 
 // src/components/Combobox.tsx
-var import_noya_icons6 = require("@noya-app/noya-icons");
+var import_noya_icons5 = require("@noya-app/noya-icons");
 var import_react59 = __toESM(require("react"));
 
 // src/utils/combobox.ts
@@ -6155,7 +6236,7 @@ function useComboboxState(state) {
 }
 
 // src/components/ComboboxMenu.tsx
-var import_noya_icons5 = require("@noya-app/noya-icons");
+var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_react58 = __toESM(require("react"));
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
@@ -6208,7 +6289,7 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react58.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react58.default.createElement(import_noya_icons5.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react58.default.createElement(
+            /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react58.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react58.default.createElement(import_noya_icons4.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react58.default.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
@@ -6559,7 +6640,7 @@ var Combobox = memoGeneric(
             onClick: handleChevronClick
           },
           /* @__PURE__ */ import_react59.default.createElement(
-            import_noya_icons6.DropdownChevronIcon,
+            import_noya_icons5.DropdownChevronIcon,
             {
               className: cx(
                 "transition-transform duration-100",
@@ -6895,7 +6976,7 @@ var CommandPalette = (0, import_react62.memo)(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-var import_noya_icons7 = require("@noya-app/noya-icons");
+var import_noya_icons6 = require("@noya-app/noya-icons");
 var import_react63 = __toESM(require("react"));
 var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ import_react63.default.createElement(
   Tooltip,
@@ -6925,44 +7006,28 @@ var ConnectedUsersMenuLayout = ({
           backgroundColor: isAssistantOpen ? colorFromString(currentUserId ?? "") : void 0
         }
       },
-      "AI",
-      /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: 8 }),
       /* @__PURE__ */ import_react63.default.createElement(
-        import_noya_icons7.ChatBubbleWithDotsIcon,
+        import_noya_icons6.ChatBubbleWithDotsIcon,
         {
           color: isAssistantOpen ? void 0 : cssVars.colors.icon
         }
-      )
+      ),
+      /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      "AI"
     )
   ));
 };
 
 // src/components/DraggableMenuButton.tsx
-var import_noya_icons8 = require("@noya-app/noya-icons");
+var import_noya_icons7 = 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 +7067,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,14 +7091,14 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react64.default.createElement(Trigger5, null, /* @__PURE__ */ import_react64.default.createElement(
-        import_noya_icons8.DragHandleDots2Icon,
+      /* @__PURE__ */ import_react64.default.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ import_react64.default.createElement(
+        import_noya_icons7.DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
     ) : /* @__PURE__ */ import_react64.default.createElement(
-      import_noya_icons8.DragHandleDots2Icon,
+      import_noya_icons7.DragHandleDots2Icon,
       {
         color: isVisible || open ? cssVars.colors.icon : "transparent"
       }
@@ -7037,10 +7108,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 +7141,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 +7149,7 @@ var Drawer = React56.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React56.createElement(
+    ), /* @__PURE__ */ React57.createElement(
       Dialog3.Content,
       {
         id,
@@ -7090,18 +7161,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 +7588,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 +7672,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 +7694,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React60.memo(
+var PatternPreviewBackground = React61.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -7632,7 +7703,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 +7711,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 +8048,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 +8058,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 +8067,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 +8101,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 +8144,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 +8175,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 +8237,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
@@ -8250,7 +8321,7 @@ var LabeledField = (0, import_react73.memo)(function LabeledField2({
 });
 
 // src/components/MediaThumbnail.tsx
-var import_noya_icons9 = require("@noya-app/noya-icons");
+var import_noya_icons8 = require("@noya-app/noya-icons");
 var import_react74 = __toESM(require("react"));
 
 // src/components/catppuccin/fileIcons.ts
@@ -10716,7 +10787,7 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
   const content = (0, import_react74.useMemo)(() => {
     switch (contentType) {
       case "image":
-        if (!url) return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.ImageIcon, { color: iconColor, style: iconStyles });
+        if (!url) return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.ImageIcon, { color: iconColor, style: iconStyles });
         return /* @__PURE__ */ import_react74.default.createElement(
           "img",
           {
@@ -10727,9 +10798,9 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
           }
         );
       case "video":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon = Icons[iconName];
@@ -10748,7 +10819,7 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
   return /* @__PURE__ */ import_react74.default.createElement(
@@ -10842,7 +10913,7 @@ var Message = (0, import_react75.memo)(
 );
 
 // src/components/pipeline/PipelineResultLayout.tsx
-var import_noya_icons10 = require("@noya-app/noya-icons");
+var import_noya_icons9 = require("@noya-app/noya-icons");
 var import_react76 = __toESM(require("react"));
 var PipelineResultLink = ({ url }) => {
   return /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react76.default.createElement(
@@ -10853,7 +10924,7 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "flex text-primary hover:opacity-80 border border-divider rounded-md"
     },
-    /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ import_react76.default.createElement(import_noya_icons10.Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
+    /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ import_react76.default.createElement(import_noya_icons9.Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
     /* @__PURE__ */ import_react76.default.createElement(DividerVertical, null),
     /* @__PURE__ */ import_react76.default.createElement(Small, { className: "truncate p-2 flex-1" }, url)
   ));
@@ -10877,27 +10948,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`,
@@ -11010,12 +11081,15 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
       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
@@ -11025,15 +11099,6 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
   );
   return tooltip ? /* @__PURE__ */ import_react78.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var Separator3 = ({ transparent }) => /* @__PURE__ */ import_react78.default.createElement(
-  "div",
-  {
-    className: cx(
-      "w-[1px] my-1 self-stretch bg-divider",
-      transparent && "bg-transparent"
-    )
-  }
-);
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
   value,
@@ -11041,7 +11106,6 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   colorScheme,
   allowEmpty,
   items,
-  separator: separator2 = true,
   className,
   style: style2
 }) {
@@ -11054,7 +11118,6 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     },
     [allowEmpty, onValueChange]
   );
-  const selectedIndex = items.findIndex((item) => item?.value === value);
   return /* @__PURE__ */ import_react78.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react78.default.createElement(
     ToggleGroupPrimitive2.Root,
     {
@@ -11063,17 +11126,15 @@ 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__ */ import_react78.default.createElement(import_react78.default.Fragment, { key: index }, /* @__PURE__ */ import_react78.default.createElement(SegmentedControlItem, { key: index, ...item }), !isLastItem && /* @__PURE__ */ import_react78.default.createElement(Separator3, { transparent: !showSeparator }));
-    }) : items.map((item, index) => /* @__PURE__ */ import_react78.default.createElement(SegmentedControlItem, { key: index, ...item }))
+    items.map((item, index) => /* @__PURE__ */ import_react78.default.createElement(SegmentedControlItem, { key: index, ...item }))
   ));
 });
 
@@ -11093,45 +11154,51 @@ 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");
+var import_noya_icons10 = require("@noya-app/noya-icons");
 var Select = __toESM(require("@radix-ui/react-select"));
 var import_react80 = __toESM(require("react"));
 var readOnlyStyle = {
@@ -11180,7 +11247,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     label && labelPosition === "inset" && /* @__PURE__ */ import_react80.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react80.default.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
     /* @__PURE__ */ import_react80.default.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ import_react80.default.createElement(Select.Value, { placeholder })),
     /* @__PURE__ */ import_react80.default.createElement(
-      import_noya_icons11.DropdownChevronIcon,
+      import_noya_icons10.DropdownChevronIcon,
       {
         className: cx(
           "transition-transform duration-100 ml-1.5",
@@ -11211,6 +11278,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
   contentStyle: contentStyleProp,
   ...props
 }) {
+  const portalScopeId = usePortalScopeId();
   const selectedItem = items.find(
     (item) => isSelectableMenuItem(item) && item.value === value
   );
@@ -11275,6 +11343,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,
@@ -11283,13 +11352,13 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         style: contentStyle
       },
       /* @__PURE__ */ import_react80.default.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(
-        import_noya_icons11.ChevronUpIcon,
+        import_noya_icons10.ChevronUpIcon,
         {
           className: cx("transition-transform duration-100")
         }
       )),
       /* @__PURE__ */ import_react80.default.createElement(Select.Viewport, null, /* @__PURE__ */ import_react80.default.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ import_react80.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(import_noya_icons11.ChevronDownIcon, null))
+      /* @__PURE__ */ import_react80.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(import_noya_icons10.ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -11375,7 +11444,7 @@ var Slider = (0, import_react81.memo)(function Slider2({
       {
         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"
         )
@@ -11399,7 +11468,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 +11480,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11430,7 +11499,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 +12289,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 +12303,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),
@@ -12395,9 +12464,84 @@ function BaseToolbar({
 }
 
 // src/components/Toolbar.tsx
-var import_noya_icons12 = require("@noya-app/noya-icons");
+var import_noya_icons11 = require("@noya-app/noya-icons");
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
 var import_react91 = __toESM(require("react"));
+var iconButtonStyle = {
+  height: 27,
+  width: 27,
+  minWidth: 27
+};
+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.icon && renderIcon(item.icon), item.title && item.icon && /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), item.title, /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ import_react91.default.createElement(import_noya_icons11.DropdownChevronIcon, null))
+  );
+});
+var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
+  item,
+  onSelectMenuItem
+}) {
+  const content = /* @__PURE__ */ import_react91.default.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__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+    item.title
+  );
+  return item.tooltip ? /* @__PURE__ */ import_react91.default.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__ */ import_react91.default.createElement(DividerVertical, { overflow: 4 });
+  }
+  if (isSelectableMenuItem(item)) {
+    return /* @__PURE__ */ import_react91.default.createElement(ToolbarMenuButton, { item, onSelectMenuItem });
+  }
+  return /* @__PURE__ */ import_react91.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+});
+var ToolbarMenu = memoGeneric(function ToolbarMenu2({
+  items,
+  onSelectMenuItem
+}) {
+  return /* @__PURE__ */ import_react91.default.createElement(import_react91.default.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ import_react91.default.createElement(
+      ToolbarMenuItem,
+      {
+        key: i,
+        item,
+        onSelectMenuItem
+      }
+    );
+  }));
+});
 function Toolbar({
   children,
   logo,
@@ -12438,64 +12582,6 @@ function Toolbar({
     children
   );
 }
-var activeButtonStyle = {
-  backgroundColor: cssVars.colors.primaryPastel,
-  color: cssVars.colors.primary
-};
-var ToolbarMenu = memoGeneric(function ToolbarMenu2({
-  items,
-  onSelectMenuItem
-}) {
-  return /* @__PURE__ */ import_react91.default.createElement(import_react91.default.Fragment, null, items.map((item, i) => {
-    if (item.type === "sectionHeader") return null;
-    if (item.type === "separator") {
-      return /* @__PURE__ */ import_react91.default.createElement(DividerVertical, { key: i, overflow: 4 });
-    }
-    if (isSelectableMenuItem(item)) {
-      const content = /* @__PURE__ */ import_react91.default.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__ */ 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, key: i }, content) : content;
-    }
-    return /* @__PURE__ */ import_react91.default.createElement(
-      DropdownMenu,
-      {
-        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)
-      )
-    );
-  }));
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIAssistantInput,
@@ -12585,6 +12671,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   PipelineResultLayout,
   PipelineResultLink,
   Popover,
+  PortalScopeProvider,
   Progress,
   RIGHT_SIDEBAR_ID,
   SUPPORTED_CANVAS_UPLOAD_TYPES,
@@ -12595,7 +12682,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   SectionHeader,
   SegmentedControl,
   SelectMenu,
-  SelectionToolbar,
+  SelectionToolbarContainer,
   Slider,
   Small,
   Sortable,
@@ -12608,6 +12695,9 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   ToastProvider,
   Toolbar,
   ToolbarMenu,
+  ToolbarMenuButton,
+  ToolbarMenuDropdown,
+  ToolbarMenuItem,
   Tooltip,
   TreeView,
   UserAvatar,
@@ -12626,6 +12716,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   fuzzyFilter,
   fuzzyScore,
   fuzzyTokenize,
+  getClosestPortalScope,
   getFieldSpacing,
   getGradientBackground,
   getGridSize,
@@ -12645,6 +12736,9 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   moveTreeItem,
   normalizeListTargetIndex,
   popoverStyle,
+  portalScopeDataSetName,
+  portalScopePropName,
+  portalScopeProps,
   renderIcon,
   rgbaToSketchColor,
   separator,
@@ -12677,6 +12771,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   useOpenInputDialog,
   usePlatform,
   usePlatformModKey,
+  usePortalScopeId,
   usePreservePanelSize,
   useTheme,
   validateDropIndicator,