@noya-app/noya-designsystem 0.1.54 → 0.1.55

package/dist/index.js

@@ -113,6 +113,7 @@ __export(src_exports, {
   MediaThumbnail: () => MediaThumbnail,
   MenuViewport: () => MenuViewport,
   Message: () => Message,
+  OpenPortalsProvider: () => OpenPortalsProvider,
   PatternPreviewBackground: () => PatternPreviewBackground,
   PipelineResultLayout: () => PipelineResultLayout,
   PipelineResultLink: () => PipelineResultLink,
@@ -205,6 +206,7 @@ __export(src_exports, {
   useGlobalInputBlur: () => useGlobalInputBlur,
   useGlobalInputBlurListener: () => useGlobalInputBlurListener,
   useGlobalInputBlurTrigger: () => useGlobalInputBlurTrigger,
+  useHasOpenPortals: () => useHasOpenPortals,
   useHover: () => useHover,
   useImageData: () => useImageData,
   useIndent: () => useIndent,
@@ -215,6 +217,7 @@ __export(src_exports, {
   useOpenConfirmationDialog: () => useOpenConfirmationDialog,
   useOpenDialog: () => useOpenDialog,
   useOpenInputDialog: () => useOpenInputDialog,
+  useOpenPortalsControls: () => useOpenPortalsControls,
   usePlatform: () => usePlatform,
   usePlatformModKey: () => usePlatformModKey,
   usePortalScopeId: () => usePortalScopeId,
@@ -676,14 +679,14 @@ var import_react32 = __toESM(require("react"));
 
 // src/contexts/DesignSystemConfiguration.tsx
 var import_noya_keymap = require("@noya-app/noya-keymap");
-var React21 = __toESM(require("react"));
+var React22 = __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 React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 
 // src/components/Button.tsx
 var import_react20 = __toESM(require("react"));
@@ -751,9 +754,58 @@ function mergeConflictingClassNames(classNames, options) {
   return classNamesList.join(" ");
 }
 
+// src/components/Icons.tsx
+var Icons = __toESM(require("@noya-app/noya-icons"));
+var React6 = __toESM(require("react"));
+function renderIcon(iconName) {
+  if (typeof iconName === "string") {
+    const Icon = Icons[iconName];
+    return /* @__PURE__ */ React6.createElement(Icon, null);
+  }
+  return iconName;
+}
+
+// src/components/Spacer.tsx
+var React7 = __toESM(require("react"));
+var SpacerVertical = React7.forwardRef(
+  ({ size: size2, inline, ...props }, ref) => {
+    return /* @__PURE__ */ React7.createElement(
+      "span",
+      {
+        className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
+        style: size2 ? {
+          minHeight: `${size2}px`
+        } : void 0,
+        ...props,
+        ref
+      }
+    );
+  }
+);
+var SpacerHorizontal = React7.forwardRef(
+  ({ size: size2, inline, ...props }, ref) => {
+    return /* @__PURE__ */ React7.createElement(
+      "span",
+      {
+        className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
+        style: size2 ? {
+          minWidth: `${size2}px`
+        } : void 0,
+        ...props,
+        ref
+      }
+    );
+  }
+);
+var Spacer;
+((Spacer2) => {
+  Spacer2.Vertical = SpacerVertical;
+  Spacer2.Horizontal = SpacerHorizontal;
+})(Spacer || (Spacer = {}));
+
 // src/components/Tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var React7 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 
 // src/components/Text.tsx
 var import_react19 = __toESM(require("react"));
@@ -849,13 +901,13 @@ var Italic = ({ children }) => /* @__PURE__ */ import_react19.default.createElem
 );
 
 // src/components/Tooltip.tsx
-var Tooltip = React7.memo(function Tooltip2({
+var Tooltip = React9.memo(function Tooltip2({
   children,
   content,
   sideOffset = 2
 }) {
   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(
+  return /* @__PURE__ */ React9.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React9.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React9.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React9.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React9.createElement(
     TooltipPrimitive.Content,
     {
       ...portalScopeProps(portalScopeId),
@@ -892,6 +944,8 @@ var Button = (0, import_react20.forwardRef)(function Button2({
   className,
   style: style2,
   tabIndex,
+  icon,
+  iconRight,
   tooltip,
   active = false,
   disabled = false,
@@ -936,36 +990,29 @@ var Button = (0, import_react20.forwardRef)(function Button2({
         className: "min-h-[19px] flex items-center flex-1 justify-center leading-[15px]",
         style: contentStyle
       },
-      children
+      icon && renderIcon(icon),
+      icon && children && /* @__PURE__ */ import_react20.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      children,
+      iconRight && (icon || children) && /* @__PURE__ */ import_react20.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      iconRight && renderIcon(iconRight)
     )
   );
   return tooltip ? /* @__PURE__ */ import_react20.default.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
 });
 var Button_default = Button;
 
-// src/components/Icons.tsx
-var Icons = __toESM(require("@noya-app/noya-icons"));
-var React9 = __toESM(require("react"));
-function renderIcon(iconName) {
-  if (typeof iconName === "string") {
-    const Icon = Icons[iconName];
-    return /* @__PURE__ */ React9.createElement(Icon, null);
-  }
-  return iconName;
-}
-
 // src/components/IconButton.tsx
-var IconButton = React10.memo(
-  React10.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
+var IconButton = React11.memo(
+  React11.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const Icon = Icons[iconName];
-    const style2 = React10.useMemo(() => {
+    const style2 = React11.useMemo(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ React10.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React11.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React11.createElement(
       Icon,
       {
         color: color ?? (selected ? cssVars.colors.iconSelected : cssVars.colors.icon),
@@ -1014,46 +1061,6 @@ var import_react29 = __toESM(require("react"));
 // src/components/Dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_react22 = __toESM(require("react"));
-
-// src/components/Spacer.tsx
-var React12 = __toESM(require("react"));
-var SpacerVertical = React12.forwardRef(
-  ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React12.createElement(
-      "span",
-      {
-        className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
-        style: size2 ? {
-          minHeight: `${size2}px`
-        } : void 0,
-        ...props,
-        ref
-      }
-    );
-  }
-);
-var SpacerHorizontal = React12.forwardRef(
-  ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React12.createElement(
-      "span",
-      {
-        className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
-        style: size2 ? {
-          minWidth: `${size2}px`
-        } : void 0,
-        ...props,
-        ref
-      }
-    );
-  }
-);
-var Spacer;
-((Spacer2) => {
-  Spacer2.Vertical = SpacerVertical;
-  Spacer2.Horizontal = SpacerHorizontal;
-})(Spacer || (Spacer = {}));
-
-// src/components/Dialog.tsx
 var StyledOverlay = (0, import_react22.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react22.default.createElement(
   DialogPrimitive.Overlay,
   {
@@ -1068,9 +1075,8 @@ var StyledContent = (0, import_react22.forwardRef)(({ className, children, ...pr
     {
       ref,
       className: cx(
-        `
-      fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-      w-[90vw] max-w-[450px] max-h-[85vh] p-dialog-padding rounded-[2px] 
+        `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
+      w-[90vw] max-w-[550px] max-h-[85vh] p-dialog-padding rounded-[2px] 
       font-sans text-heading5 font-normal leading-[19px] text-text-muted 
       bg-popover-background pointer-events-all z-[1000] focus:outline-none 
       shadow-dialog-shadow
@@ -1088,7 +1094,7 @@ var StyledTitle = (0, import_react22.forwardRef)(({ className, ...props }, ref)
   {
     ref,
     className: cx(
-      `m-0 font-sans text-base font-normal leading-[1.4] text-text `,
+      `m-0 font-sans text-heading3 font-medium leading-[1.4] text-text `,
       className
     ),
     ...props
@@ -1149,7 +1155,7 @@ var Dialog = (0, import_react22.forwardRef)(function Dialog2({
       }
     )),
     title && /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react22.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react22.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react22.default.createElement(Spacer.Vertical, { size: 20 })),
+    description && /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react22.default.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
@@ -1502,6 +1508,47 @@ var Label = (0, import_react26.memo)(
 // src/components/Popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
 var import_react27 = __toESM(require("react"));
+
+// src/contexts/OpenPortalsContext.tsx
+var React17 = __toESM(require("react"));
+var OpenPortalsContext = React17.createContext({
+  hasOpenPortals: false
+});
+var OpenPortalControlsContext = React17.createContext({
+  addOpenPortal: () => {
+  },
+  removeOpenPortal: () => {
+  }
+});
+var OpenPortalsProvider = React17.memo(function OpenPortalsProvider2({
+  children
+}) {
+  const [openPortals, setOpenPortals] = React17.useState([]);
+  const value = React17.useMemo(
+    () => ({ hasOpenPortals: openPortals.length > 0 }),
+    [openPortals]
+  );
+  const controlsValue = React17.useMemo(
+    () => ({
+      addOpenPortal: (portal) => {
+        setOpenPortals((prev) => [...prev, portal]);
+      },
+      removeOpenPortal: (portal) => {
+        setOpenPortals((prev) => prev.filter((p) => p !== portal));
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ React17.createElement(OpenPortalsContext.Provider, { value }, /* @__PURE__ */ React17.createElement(OpenPortalControlsContext.Provider, { value: controlsValue }, children));
+});
+function useHasOpenPortals() {
+  return React17.useContext(OpenPortalsContext).hasOpenPortals;
+}
+function useOpenPortalsControls() {
+  return React17.useContext(OpenPortalControlsContext);
+}
+
+// src/components/Popover.tsx
 var closeStyles = {
   all: "unset",
   fontFamily: "inherit"
@@ -1527,13 +1574,30 @@ function Popover({
   onInteractOutside,
   onFocusOutside,
   onClickClose,
-  className
+  className,
+  portalContainer
 }) {
+  const defaultId = (0, import_react27.useId)();
   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(
+  const contentRef = (0, import_react27.useRef)(null);
+  const [isOpen, setIsOpen] = useControlledOrUncontrolled({
+    value: open,
+    onChange: onOpenChange,
+    defaultValue: false
+  });
+  const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
+  (0, import_react27.useEffect)(() => {
+    if (!isOpen) return;
+    addOpenPortal(portalScopeId || defaultId);
+    return () => {
+      removeOpenPortal(portalScopeId || defaultId);
+    };
+  }, [addOpenPortal, isOpen, portalScopeId, removeOpenPortal, defaultId]);
+  return /* @__PURE__ */ import_react27.default.createElement(PopoverPrimitive.Root, { open: isOpen, onOpenChange: setIsOpen }, /* @__PURE__ */ import_react27.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react27.default.createElement(PopoverPrimitive.Portal, { container: portalContainer }, /* @__PURE__ */ import_react27.default.createElement(
     PopoverPrimitive.Content,
     {
       ...portalScopeProps(portalScopeId),
+      ref: contentRef,
       className: cx(
         popoverStyle.base,
         variant === "large" && popoverStyle.large,
@@ -1547,7 +1611,15 @@ function Popover({
       onCloseAutoFocus,
       onInteractOutside,
       onFocusOutside,
-      onPointerDownOutside,
+      onPointerDownOutside: (event) => {
+        if (isEventInsideElement(
+          event.detail.originalEvent,
+          contentRef.current
+        )) {
+          event.preventDefault();
+        }
+        onPointerDownOutside?.(event);
+      },
       collisionPadding: 8,
       arrowPadding: 2
     },
@@ -1563,6 +1635,19 @@ function Popover({
     )
   )));
 }
+function isEventInsideElement(event, element) {
+  if (!element) return false;
+  const body = document.body;
+  const originalPointerEvents = body.style.pointerEvents;
+  body.style.pointerEvents = "auto";
+  const elementsAtPoint = document.elementsFromPoint(
+    event.clientX,
+    event.clientY
+  );
+  body.style.pointerEvents = originalPointerEvents;
+  const target = elementsAtPoint.at(0);
+  return target && element.contains(target);
+}
 
 // src/components/InputField.tsx
 var InputFieldContext = (0, import_react28.createContext)({
@@ -1685,7 +1770,7 @@ var InputElement = (0, import_react28.forwardRef)(
       readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text",
       "font-sans font-normal",
       $textAlign && `text-${$textAlign}`,
-      size2 === "small" ? "text-[11px] leading-[19px] py-[1px]" : size2 === "large" ? "py-2.5 text-heading5" : size2 === "medium" ? "py-1  text-heading5" : $variant === "bare" && "py-1 -m-1",
+      size2 === "small" ? "text-[11px] leading-[19px] py-[1px]" : size2 === "large" ? "py-2.5 text-heading5" : size2 === "medium" ? "py-1 text-heading5" : $variant === "bare" && "py-1 -m-1",
       className
     );
     const mergedClassName = (0, import_react28.useMemo)(
@@ -1856,6 +1941,8 @@ function InputFieldRoot({
   className,
   start,
   end,
+  startClassName,
+  endClassName,
   label: labelProp
 }) {
   const randomId = (0, import_react28.useId)();
@@ -1896,7 +1983,15 @@ function InputFieldRoot({
     () => /* @__PURE__ */ import_react28.default.createElement(Label, { htmlFor: id, className: "!text-text-disabled" }, labelProp ?? label),
     [id, labelProp, label]
   );
-  const rootElement = /* @__PURE__ */ import_react28.default.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ import_react28.default.createElement("span", { ref: startRef, className: startBaseStyles }, start), (end || label) && /* @__PURE__ */ import_react28.default.createElement("span", { ref: endRef, className: cx(endStyles, label && end && "gap-1.5") }, labelProp ? insetLabel : label && labelPosition === "inset" && insetLabel, end));
+  const rootElement = /* @__PURE__ */ import_react28.default.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ import_react28.default.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start), (end || label) && /* @__PURE__ */ import_react28.default.createElement(
+    "span",
+    {
+      ref: endRef,
+      className: cx(endStyles, label && end && "gap-1.5", endClassName)
+    },
+    labelProp ? insetLabel : label && labelPosition === "inset" && insetLabel,
+    end
+  ));
   const measuredWidthObject = (0, import_react28.useMemo)(
     () => measuredInputSize ? { width: measuredInputSize.width + 4 } : void 0,
     [measuredInputSize]
@@ -2278,30 +2373,30 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = React21.createContext({
+var DesignSystemConfigurationContext = React22.createContext({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = React21.memo(
+var DesignSystemConfigurationProvider = React22.memo(
   function DesignSystemConfigurationProvider2({
     children,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = React21.useState(platform ?? "key");
-    React21.useEffect(() => {
+    const [internalPlatform, setInternalPlatform] = React22.useState(platform ?? "key");
+    React22.useEffect(() => {
       if (platform !== void 0) return;
       if (typeof navigator !== "undefined") {
         setInternalPlatform((0, import_noya_keymap.getCurrentPlatform)(navigator));
       }
     }, [platform]);
-    const contextValue = React21.useMemo(
+    const contextValue = React22.useMemo(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ React21.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React21.createElement(DialogProvider, null, /* @__PURE__ */ React21.createElement(ToastProvider, null, /* @__PURE__ */ React21.createElement(FloatingWindowProvider, null, children))));
+    return /* @__PURE__ */ React22.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React22.createElement(OpenPortalsProvider, null, /* @__PURE__ */ React22.createElement(DialogProvider, null, /* @__PURE__ */ React22.createElement(ToastProvider, null, /* @__PURE__ */ React22.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  return React21.useContext(DesignSystemConfigurationContext);
+  return React22.useContext(DesignSystemConfigurationContext);
 }
 
 // src/utils/withSeparatorElements.ts
@@ -2762,16 +2857,16 @@ var ActionMenu = memoGeneric(function ActionMenu2({
 });
 
 // src/components/ActivityIndicator.tsx
-var React27 = __toESM(require("react"));
-var ActivityIndicator = React27.memo(function ActivityIndicator2({
+var React28 = __toESM(require("react"));
+var ActivityIndicator = React28.memo(function ActivityIndicator2({
   size: size2 = 16,
   opacity = 1,
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
   className
 }) {
-  const opacityStyle = React27.useMemo(() => ({ opacity }), [opacity]);
-  const dynamicStyles = React27.useMemo(
+  const opacityStyle = React28.useMemo(() => ({ opacity }), [opacity]);
+  const dynamicStyles = React28.useMemo(
     () => ({
       border: `2px solid ${trackColor}`,
       borderTopColor: color,
@@ -2780,13 +2875,13 @@ var ActivityIndicator = React27.memo(function ActivityIndicator2({
     }),
     [size2, color, trackColor]
   );
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     {
       className: cx("flex justify-center items-center", className),
       style: opacityStyle
     },
-    /* @__PURE__ */ React27.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
+    /* @__PURE__ */ React28.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
   );
 });
 
@@ -3432,16 +3527,16 @@ var BreadcrumbSlash = () => {
 };
 
 // src/components/Checkbox.tsx
-var React35 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 var colorSchemeStyles = {
   normal: "text-text-subtle",
   primary: "text-primary",
   secondary: "text-secondary"
 };
-var Checkbox = React35.memo(
-  React35.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
+var Checkbox = React36.memo(
+  React36.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
-    return /* @__PURE__ */ React35.createElement(
+    return /* @__PURE__ */ React36.createElement(
       "div",
       {
         className: cx(
@@ -3451,7 +3546,7 @@ var Checkbox = React35.memo(
         ),
         style: style2
       },
-      /* @__PURE__ */ React35.createElement(
+      /* @__PURE__ */ React36.createElement(
         "input",
         {
           ref,
@@ -3480,7 +3575,7 @@ var Checkbox = React35.memo(
           id
         }
       ),
-      /* @__PURE__ */ React35.createElement(
+      /* @__PURE__ */ React36.createElement(
         "svg",
         {
           className: `
@@ -3500,7 +3595,7 @@ var Checkbox = React35.memo(
           xmlns: "http://www.w3.org/2000/svg",
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React35.createElement(
+        /* @__PURE__ */ React36.createElement(
           "path",
           {
             d: "M3 6L4.5 7.5L8 4",
@@ -3519,7 +3614,7 @@ var import_noya_icons3 = require("@noya-app/noya-icons");
 var import_react45 = __toESM(require("react"));
 
 // src/hooks/useHover.ts
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -3549,13 +3644,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React36.useState(false);
-  const state = React36.useRef({
+  const [isHovered, setHovered] = React37.useState(false);
+  const state = React37.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React36.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React36.useMemo(
+  React37.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React37.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -3954,26 +4049,26 @@ var ContextMenu = memoGeneric(ContextMenuRoot);
 
 // src/components/ScrollArea.tsx
 var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
-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(
+var React41 = __toESM(require("react"));
+var ScrollArea = React41.memo(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = React41.useState(null);
+  return /* @__PURE__ */ React41.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React41.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React41.createElement(
     RadixScrollArea.Viewport,
     {
       className: "w-full h-full [&>div]:block",
-      ref: React40.useCallback(
+      ref: React41.useCallback(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React40.createElement(
+  ), /* @__PURE__ */ React41.createElement(
     RadixScrollArea.Scrollbar,
     {
       orientation: "vertical",
       className: "scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
     },
-    /* @__PURE__ */ React40.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
+    /* @__PURE__ */ React41.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
   )));
 });
 
@@ -4102,7 +4197,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, null, subtitle || " ")),
+    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, null, subtitle || " ")),
     textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react48.default.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5" }, title && /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
     action && /* @__PURE__ */ import_react48.default.createElement("div", { className: "absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5" }, action),
     loading && /* @__PURE__ */ import_react48.default.createElement("div", { className: "flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]" }, /* @__PURE__ */ import_react48.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
@@ -4409,7 +4504,7 @@ var Grid = memoGeneric(
                 {
                   ...props2,
                   className: cx(
-                    isSelected && "text-selected-list-item-text",
+                    isSelected ? "text-selected-list-item-text" : "text-text",
                     "truncate select-none"
                   )
                 }
@@ -4502,7 +4597,7 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/Sortable.tsx
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var import_react50 = require("react");
 var import_react_dom2 = require("react-dom");
 var normalizeListTargetIndex = (index, position) => {
@@ -4516,7 +4611,7 @@ var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = React43.createContext({
+var SortableItemContext = React44.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -4571,7 +4666,7 @@ function SortableItem({
     setActivatorEvent,
     axis,
     getDropTargetParentIndex
-  } = React43.useContext(SortableItemContext);
+  } = React44.useContext(SortableItemContext);
   const sortable = (0, import_sortable.useSortable)({ id, disabled });
   const { activatorEvent } = (0, import_core.useDndContext)();
   const {
@@ -4592,7 +4687,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = React43.useCallback((node) => setNodeRef(node), [setNodeRef]);
+  const ref = React44.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");
@@ -4629,26 +4724,26 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = React43.useState();
-  const activatorEvent = React43.useRef(null);
-  const [position, setPosition] = React43.useState({
+  const [activeIndex, setActiveIndex] = React44.useState();
+  const activatorEvent = React44.useRef(null);
+  const [position, setPosition] = React44.useState({
     x: 0,
     y: 0
   });
-  const setActivatorEvent = React43.useCallback((event) => {
+  const setActivatorEvent = React44.useCallback((event) => {
     activatorEvent.current = event;
   }, []);
-  const handleDragStart = React43.useCallback(
+  const handleDragStart = React44.useCallback(
     (event) => {
       const index = keys.findIndex((id) => id === event.active.id);
       setActiveIndex(index);
     },
     [keys]
   );
-  const handleDragMove = React43.useCallback((event) => {
+  const handleDragMove = React44.useCallback((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = React43.useCallback(
+  const handleDragEnd = React44.useCallback(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -4675,14 +4770,14 @@ function SortableRoot({
     },
     [acceptsDrop2, axis, keys, onMoveItem, position.x, position.y]
   );
-  const [mounted, setMounted] = React43.useState(false);
-  React43.useEffect(() => {
+  const [mounted, setMounted] = React44.useState(false);
+  React44.useEffect(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     SortableItemContext.Provider,
     {
-      value: React43.useMemo(
+      value: React44.useMemo(
         () => ({
           keys,
           acceptsDrop: acceptsDrop2,
@@ -4701,7 +4796,7 @@ function SortableRoot({
         ]
       )
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -4710,7 +4805,7 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React43.createElement(
+      /* @__PURE__ */ React44.createElement(
         import_sortable.SortableContext,
         {
           items: keys,
@@ -4719,7 +4814,7 @@ function SortableRoot({
         children
       ),
       mounted && renderOverlay && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ React43.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ React44.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -4737,11 +4832,11 @@ var SortableComponent = memoGeneric(function Sortable(props) {
     shouldRenderOverlay = true,
     ...rest
   } = props;
-  const keys = React43.useMemo(
+  const keys = React44.useMemo(
     () => items.map(keyExtractor),
     [items, keyExtractor]
   );
-  const renderOverlay = React43.useCallback(
+  const renderOverlay = React44.useCallback(
     (index) => {
       return renderItem(
         items[index],
@@ -4761,14 +4856,14 @@ var SortableComponent = memoGeneric(function Sortable(props) {
     },
     [renderItem, items]
   );
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     SortableSubcomponents.Root,
     {
       ...rest,
       keys,
       renderOverlay: shouldRenderOverlay ? renderOverlay : void 0
     },
-    keys.map((key, index) => /* @__PURE__ */ React43.createElement(SortableSubcomponents.Item, { key, id: key }, (props2) => {
+    keys.map((key, index) => /* @__PURE__ */ React44.createElement(SortableSubcomponents.Item, { key, id: key }, (props2) => {
       return renderItem(
         items[index],
         props2,
@@ -6976,7 +7071,6 @@ var CommandPalette = (0, import_react62.memo)(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-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,
@@ -6988,38 +7082,22 @@ var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ import_react63.def
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
-  currentUserId,
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ import_react63.default.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ import_react63.default.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react63.default.createElement(
-    Tooltip,
+  return /* @__PURE__ */ import_react63.default.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ import_react63.default.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react63.default.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ import_react63.default.createElement(
+    Button_default,
     {
-      content: /* @__PURE__ */ import_react63.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react63.default.createElement(Small, null, "AI Assistant"))
+      active: isAssistantOpen,
+      onClick: launchAIAssistant,
+      icon: "ChatBubbleWithDotsIcon"
     },
-    /* @__PURE__ */ import_react63.default.createElement(
-      Button_default,
-      {
-        variant: isAssistantOpen ? "secondary" : void 0,
-        onClick: launchAIAssistant,
-        style: {
-          backgroundColor: isAssistantOpen ? colorFromString(currentUserId ?? "") : void 0
-        }
-      },
-      /* @__PURE__ */ import_react63.default.createElement(
-        import_noya_icons6.ChatBubbleWithDotsIcon,
-        {
-          color: isAssistantOpen ? void 0 : cssVars.colors.icon
-        }
-      ),
-      /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-      "AI"
-    )
-  ));
+    "AI"
+  )));
 };
 
 // src/components/DraggableMenuButton.tsx
-var import_noya_icons7 = require("@noya-app/noya-icons");
+var import_noya_icons6 = require("@noya-app/noya-icons");
 var import_react64 = __toESM(require("react"));
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   items,
@@ -7092,13 +7170,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         shouldBindKeyboardShortcuts: false
       },
       /* @__PURE__ */ import_react64.default.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ import_react64.default.createElement(
-        import_noya_icons7.DragHandleDots2Icon,
+        import_noya_icons6.DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
     ) : /* @__PURE__ */ import_react64.default.createElement(
-      import_noya_icons7.DragHandleDots2Icon,
+      import_noya_icons6.DragHandleDots2Icon,
       {
         color: isVisible || open ? cssVars.colors.icon : "transparent"
       }
@@ -7108,10 +7186,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 var import_react65 = require("react");
-var Drawer = React57.memo(
-  React57.forwardRef(function Drawer2({
+var Drawer = React58.memo(
+  React58.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -7141,7 +7219,7 @@ var Drawer = React57.memo(
         return internalOpen;
       }
     }));
-    const inner = /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
+    const inner = /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
       Dialog3.Overlay,
       {
         className: cx(
@@ -7149,7 +7227,7 @@ var Drawer = React57.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React57.createElement(
+    ), /* @__PURE__ */ React58.createElement(
       Dialog3.Content,
       {
         id,
@@ -7161,18 +7239,18 @@ var Drawer = React57.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React57.createElement(Dialog3.Title, null, title),
+      title && /* @__PURE__ */ React58.createElement(Dialog3.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React58.createElement(
       Dialog3.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React57.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React57.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React58.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React58.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
@@ -7588,25 +7666,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 
 // src/contexts/ImageDataContext.tsx
-var React60 = __toESM(require("react"));
-var ImageDataContext = React60.createContext(
+var React61 = __toESM(require("react"));
+var ImageDataContext = React61.createContext(
   void 0
 );
-var ImageDataProvider = React60.memo(function ImageDataProvider2({
+var ImageDataProvider = React61.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React60.useMemo(
+  const contextValue = React61.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React60.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React61.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React60.useContext(ImageDataContext);
+  const value = React61.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -7672,10 +7750,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 = React61.memo(function Background2({
+var Background = React62.memo(function Background2({
   background: background2
 }) {
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "span",
     {
       className: `${background2 ? `bg-[${background2}]` : "bg-input-background"} absolute inset-0`
@@ -7694,7 +7772,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React61.memo(
+var PatternPreviewBackground = React62.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -7703,7 +7781,7 @@ var PatternPreviewBackground = React61.memo(
     const image = useImageData(imageRef);
     const url = useObjectURL(image);
     const size2 = getPatternSizeAndPosition(fillType, tileScale);
-    const background2 = React61.useMemo(
+    const background2 = React62.useMemo(
       () => [
         size2,
         `url(${url})`,
@@ -7711,44 +7789,44 @@ var PatternPreviewBackground = React61.memo(
       ].join(" "),
       [fillType, size2, url]
     );
-    return /* @__PURE__ */ React61.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React62.createElement(Background, { background: background2 });
   }
 );
-var ColorPreviewBackground = React61.memo(function ColorPreviewBackground2({
+var ColorPreviewBackground = React62.memo(function ColorPreviewBackground2({
   color
 }) {
-  const background2 = React61.useMemo(
+  const background2 = React62.useMemo(
     () => sketchColorToRgbaString(color),
     [color]
   );
-  return /* @__PURE__ */ React61.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React62.createElement(Background, { background: background2 });
 });
-var GradientPreviewBackground = React61.memo(
+var GradientPreviewBackground = React62.memo(
   function GradientPreviewBackground2({
     gradient
   }) {
-    const background2 = React61.useMemo(
+    const background2 = React62.useMemo(
       () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
       [gradient.gradientType, gradient.stops]
     );
-    return /* @__PURE__ */ React61.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React62.createElement(Background, { background: background2 });
   }
 );
 var background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
   cssVars.colors.placeholderDots
 )}") no-repeat`;
-var FillPreviewBackground = React61.memo(function FillPreviewBackground2({
+var FillPreviewBackground = React62.memo(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ React61.createElement(Background, { background });
+  if (!value) return /* @__PURE__ */ React62.createElement(Background, { background });
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React61.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React62.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React61.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React62.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image) return null;
-      return /* @__PURE__ */ React61.createElement(
+      return /* @__PURE__ */ React62.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -8048,8 +8126,8 @@ var FloatingWindow = ({
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var React64 = __toESM(require("react"));
-var GradientPicker = React64.memo(function GradientPicker2({
+var React65 = __toESM(require("react"));
+var GradientPicker = React65.memo(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -8058,7 +8136,7 @@ var GradientPicker = React64.memo(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = React64.useMemo(
+  const colorModel = React65.useMemo(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: import_noya_colorpicker2.rgbaToHsva,
@@ -8067,30 +8145,30 @@ var GradientPicker = React64.memo(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = React64.useMemo(
+  const rgbaColor = React65.useMemo(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = React64.useCallback(
+  const handleChangeColor = React65.useCallback(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = React64.useCallback(
+  const handleAddGradientStop = React65.useCallback(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React65.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -8101,12 +8179,12 @@ var GradientPicker = React64.memo(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__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)
+    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React65.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React65.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ React65.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React65.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
@@ -8144,25 +8222,25 @@ var InspectorContainer = (0, import_react71.memo)(
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var React66 = __toESM(require("react"));
-var LabeledElementView = React66.memo(function LabeledElementView2({
+var React67 = __toESM(require("react"));
+var LabeledElementView = React67.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React66.Children.toArray(children).flatMap(
-    (child) => React66.isValidElement(child) && child.type === React66.Fragment ? child.props.children : [child]
+  const elementIds = React67.Children.toArray(children).flatMap(
+    (child) => React67.isValidElement(child) && child.type === React67.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React66.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React67.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React66.useRef(null);
-  const refs = React66.useMemo(() => {
+  const containerRef = React67.useRef(null);
+  const refs = React67.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React66.createRef()])
+      serializedIds.split(",").map((id) => [id, React67.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React66.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React66.createElement(
+  const labelElements = React67.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React67.createElement(
       "span",
       {
         key: id,
@@ -8175,7 +8253,7 @@ var LabeledElementView = React66.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React66.useLayoutEffect(() => {
+  React67.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -8237,7 +8315,7 @@ var LabeledElementView = React66.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, 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));
+  return /* @__PURE__ */ React67.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React67.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React67.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
 });
 
 // src/components/LabeledField.tsx
@@ -8321,7 +8399,7 @@ var LabeledField = (0, import_react73.memo)(function LabeledField2({
 });
 
 // src/components/MediaThumbnail.tsx
-var import_noya_icons8 = require("@noya-app/noya-icons");
+var import_noya_icons7 = require("@noya-app/noya-icons");
 var import_react74 = __toESM(require("react"));
 
 // src/components/catppuccin/fileIcons.ts
@@ -10787,7 +10865,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_icons8.ImageIcon, { color: iconColor, style: iconStyles });
+        if (!url) return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.ImageIcon, { color: iconColor, style: iconStyles });
         return /* @__PURE__ */ import_react74.default.createElement(
           "img",
           {
@@ -10798,9 +10876,9 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
           }
         );
       case "video":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon = Icons[iconName];
@@ -10819,7 +10897,7 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons7.FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
   return /* @__PURE__ */ import_react74.default.createElement(
@@ -10913,7 +10991,7 @@ var Message = (0, import_react75.memo)(
 );
 
 // src/components/pipeline/PipelineResultLayout.tsx
-var import_noya_icons9 = require("@noya-app/noya-icons");
+var import_noya_icons8 = 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(
@@ -10924,7 +11002,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_icons9.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_icons8.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)
   ));
@@ -10948,27 +11026,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 React72 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 function Progress({
   value,
   variant = "normal",
   className
 }) {
   const clampedValue = (0, import_noya_utils10.clamp)(value, 0, 100);
-  const transformStyles = React72.useMemo(
+  const transformStyles = React73.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`
     }),
     [clampedValue]
   );
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     ProgressPrimitive.Root,
     {
       className: cx(`relative hidden bg-input-background h-[5px] `, className),
       style: { transform: "translateZ(0)" },
       value: clampedValue
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.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`,
@@ -11071,6 +11149,7 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
   disabled = false,
   icon,
   className,
+  variant = "default",
   ...props
 }, forwardedRef) {
   const { colorScheme } = (0, import_react78.useContext)(SegmentedControlContext);
@@ -11081,21 +11160,30 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
       value: (value ?? "").toString(),
       disabled,
       className: cx(
-        "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",
+        "group",
+        "flex items-center justify-center",
+        "font-sans text-button relative flex-1 appearance-none text-segmented-control-item focus:outline-none transition-colors",
+        variant === "tabs" ? "font-semibold" : "font-normal",
+        variant === "tabs" ? "" : colorScheme === "secondary" ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1" : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+        variant === "tabs" ? "aria-checked:text-primary" : 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 px-1",
-        "border-r border-divider last:border-r-0",
-        "aria-checked:border-r-transparent",
-        "[&:has(+[aria-checked=true])]:border-r-transparent",
+        variant === "default" ? "px-1 rounded aria-checked:shadow-segment" : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        variant === "default" && "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
         className
       ),
       ...props
     },
-    icon && renderIcon(icon),
-    title
+    /* @__PURE__ */ import_react78.default.createElement(
+      "span",
+      {
+        className: cx(
+          "inline-flex whitespace-pre flex-nowrap gap-1.5 items-center justify-center align-middle text-center",
+          variant === "tabs" && "group-focus:ring-2 group-focus:ring-primary-pastel group-focus:ring-offset-2"
+        )
+      },
+      icon && renderIcon(icon),
+      title
+    )
   );
   return tooltip ? /* @__PURE__ */ import_react78.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
@@ -11106,6 +11194,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   colorScheme,
   allowEmpty,
   items,
+  variant = "default",
   className,
   style: style2
 }) {
@@ -11126,7 +11215,9 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       value,
       onValueChange: handleValueChange,
       className: cx(
-        `grid appearance-none relative outline-none min-h-input-height rounded bg-input-background py-0.5 px-0.5`,
+        `appearance-none relative outline-none`,
+        variant === "default" && "grid min-h-input-height bg-input-background rounded py-0.5 px-0.5",
+        variant === "tabs" && "flex gap-1.5 min-h-[33px]",
         className
       ),
       style: {
@@ -11134,13 +11225,14 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    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, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
 var import_react79 = __toESM(require("react"));
+var import_react_dom3 = require("react-dom");
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
     width: rect.width,
@@ -11157,7 +11249,8 @@ var createVirtualElement = (rect) => ({
 var SelectionToolbarContainer = (0, import_react79.memo)(
   function SelectionToolbarContainer2({
     rect,
-    children
+    children,
+    portalContainer
   }) {
     const portalScopeId = usePortalScopeId();
     const containerRef = import_react79.default.useRef(null);
@@ -11168,7 +11261,7 @@ var SelectionToolbarContainer = (0, import_react79.memo)(
       }),
       [rect]
     );
-    return /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Anchor, { virtualRef }), /* @__PURE__ */ import_react79.default.createElement(
+    const popperContent = /* @__PURE__ */ import_react79.default.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -11189,16 +11282,21 @@ var SelectionToolbarContainer = (0, import_react79.memo)(
         "div",
         {
           ref: containerRef,
-          className: "flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          className: "flex gap-1 bg-popover-background rounded shadow-popover p-1",
+          onClick: (e) => e.stopPropagation(),
+          onMouseDown: (e) => e.stopPropagation(),
+          onPointerDown: (e) => e.stopPropagation(),
+          onWheel: (e) => e.stopPropagation()
         },
         children
       )
-    ));
+    );
+    return /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react79.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom3.createPortal)(popperContent, portalContainer) : popperContent);
   }
 );
 
 // src/components/SelectMenu.tsx
-var import_noya_icons10 = require("@noya-app/noya-icons");
+var import_noya_icons9 = require("@noya-app/noya-icons");
 var Select = __toESM(require("@radix-ui/react-select"));
 var import_react80 = __toESM(require("react"));
 var readOnlyStyle = {
@@ -11247,7 +11345,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_icons10.DropdownChevronIcon,
+      import_noya_icons9.DropdownChevronIcon,
       {
         className: cx(
           "transition-transform duration-100 ml-1.5",
@@ -11352,13 +11450,13 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         style: contentStyle
       },
       /* @__PURE__ */ import_react80.default.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(
-        import_noya_icons10.ChevronUpIcon,
+        import_noya_icons9.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_icons10.ChevronDownIcon, null))
+      /* @__PURE__ */ import_react80.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(import_noya_icons9.ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -11468,7 +11566,7 @@ var Slider = (0, import_react81.memo)(function Slider2({
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var React78 = __toESM(require("react"));
+var React79 = __toESM(require("react"));
 var Switch = function Switch2({
   id,
   value,
@@ -11480,7 +11578,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11499,7 +11597,7 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__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]" })
+    /* @__PURE__ */ React79.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
   );
 };
 
@@ -12289,11 +12387,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var React84 = __toESM(require("react"));
+var React85 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React84.memo(function DimensionInput2({
+var DimensionInput = React85.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -12303,15 +12401,15 @@ var DimensionInput = React84.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React84.useCallback(
+  const handleNudgeValue = React85.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React84.useCallback(
+  const handleSetValue = React85.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React84.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React84.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React85.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React85.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
@@ -12464,7 +12562,6 @@ function BaseToolbar({
 }
 
 // src/components/Toolbar.tsx
-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 = {
@@ -12489,7 +12586,16 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__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))
+    /* @__PURE__ */ import_react91.default.createElement(
+      Button,
+      {
+        disabled: item.disabled,
+        active: item.checked || open,
+        icon: item.icon,
+        iconRight: "DropdownChevronIcon"
+      },
+      item.title
+    )
   );
 });
 var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
@@ -12501,6 +12607,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     {
       disabled: item.disabled,
       active: item.checked,
+      icon: item.icon,
       style: item.icon && !item.title ? iconButtonStyle : void 0,
       onClick: () => {
         if (onSelectMenuItem && item.value) {
@@ -12508,8 +12615,6 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
         }
       }
     },
-    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;
@@ -12667,6 +12772,7 @@ function Toolbar({
   MediaThumbnail,
   MenuViewport,
   Message,
+  OpenPortalsProvider,
   PatternPreviewBackground,
   PipelineResultLayout,
   PipelineResultLink,
@@ -12759,6 +12865,7 @@ function Toolbar({
   useGlobalInputBlur,
   useGlobalInputBlurListener,
   useGlobalInputBlurTrigger,
+  useHasOpenPortals,
   useHover,
   useImageData,
   useIndent,
@@ -12769,6 +12876,7 @@ function Toolbar({
   useOpenConfirmationDialog,
   useOpenDialog,
   useOpenInputDialog,
+  useOpenPortalsControls,
   usePlatform,
   usePlatformModKey,
   usePortalScopeId,