@noya-app/noya-designsystem 0.1.80 → 0.1.82

package/dist/index.mjs

@@ -1,9 +1,10 @@
+import * as __noya_react__ from "react";const require=(m)=>{if(m==="react")return __noya_react__;throw new Error("Dynamic require not supported: "+m)};
 import {
   __commonJS,
   __export,
   __require,
   __toESM
-} from "./chunk-FJ6ZGZIA.mjs";
+} from "./chunk-L6E2LZOL.mjs";
 
 // ../../node_modules/@base-ui/utils/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var require_use_sync_external_store_shim_production = __commonJS({
@@ -14,12 +15,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
-    var useState79 = React321.useState;
-    var useEffect60 = React321.useEffect;
+    var useState80 = React321.useState;
+    var useEffect61 = React321.useEffect;
     var useLayoutEffect12 = React321.useLayoutEffect;
     var useDebugValue2 = React321.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState79({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState80({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect12(
         function() {
           inst.value = value;
@@ -28,7 +29,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect60(
+      useEffect61(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -77,7 +78,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState79({
+        cachedValue = useState80({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -89,7 +90,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect60(
+        useEffect61(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -115,7 +116,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React321 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState79 = React321.useState, useEffect60 = React321.useEffect, useLayoutEffect12 = React321.useLayoutEffect, useDebugValue2 = React321.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React321 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState80 = React321.useState, useEffect61 = React321.useEffect, useLayoutEffect12 = React321.useLayoutEffect, useDebugValue2 = React321.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React321.useSyncExternalStore ? React321.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     }();
@@ -146,7 +147,7 @@ var require_with_selector_production = __commonJS({
     var objectIs = "function" === typeof Object.is ? Object.is : is;
     var useSyncExternalStore3 = shim.useSyncExternalStore;
     var useRef95 = React321.useRef;
-    var useEffect60 = React321.useEffect;
+    var useEffect61 = React321.useEffect;
     var useMemo157 = React321.useMemo;
     var useDebugValue2 = React321.useDebugValue;
     exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
@@ -190,7 +191,7 @@ var require_with_selector_production = __commonJS({
         [getSnapshot, getServerSnapshot, selector, isEqual]
       );
       var value = useSyncExternalStore3(subscribe, instRef[0], instRef[1]);
-      useEffect60(
+      useEffect61(
         function() {
           inst.hasValue = true;
           inst.value = value;
@@ -212,7 +213,7 @@ var require_with_selector_development = __commonJS({
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React321 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore3 = shim.useSyncExternalStore, useRef95 = React321.useRef, useEffect60 = React321.useEffect, useMemo157 = React321.useMemo, useDebugValue2 = React321.useDebugValue;
+      var React321 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore3 = shim.useSyncExternalStore, useRef95 = React321.useRef, useEffect61 = React321.useEffect, useMemo157 = React321.useMemo, useDebugValue2 = React321.useDebugValue;
       exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
         var instRef = useRef95(null);
         if (null === instRef.current) {
@@ -255,7 +256,7 @@ var require_with_selector_development = __commonJS({
           [getSnapshot, getServerSnapshot, selector, isEqual]
         );
         var value = useSyncExternalStore3(subscribe, instRef[0], instRef[1]);
-        useEffect60(
+        useEffect61(
           function() {
             inst.hasValue = true;
             inst.value = value;
@@ -3818,6 +3819,15 @@ var ClientStorage = class {
 };
 var clientStorage = new ClientStorage();
 
+// ../noya-react-utils/src/utils/composeRefs.ts
+function composeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      assignRef(ref, value);
+    }
+  };
+}
+
 // src/components/ActionMenu.tsx
 import React166, { useMemo as useMemo87 } from "react";
 
@@ -6289,11 +6299,11 @@ function getGridNavigatedIndex(listRef, {
         if (loopFocus && (prevIndex - cols < minIndex || nextIndex < 0)) {
           const col = prevIndex % cols;
           const maxCol = maxIndex % cols;
-          const offset4 = maxIndex - (maxCol - col);
+          const offset5 = maxIndex - (maxCol - col);
           if (maxCol === col) {
             nextIndex = maxIndex;
           } else {
-            nextIndex = maxCol > col ? offset4 : offset4 - cols;
+            nextIndex = maxCol > col ? offset5 : offset5 - cols;
           }
         }
       }
@@ -8786,7 +8796,7 @@ var limitShift = function(options) {
         middlewareData
       } = state;
       const {
-        offset: offset4 = 0,
+        offset: offset5 = 0,
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true
       } = evaluate(options, state);
@@ -8798,7 +8808,7 @@ var limitShift = function(options) {
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-      const rawOffset = evaluate(offset4, state);
+      const rawOffset = evaluate(offset5, state);
       const computedOffset = typeof rawOffset === "number" ? {
         mainAxis: rawOffset,
         crossAxis: 0
@@ -13374,14 +13384,14 @@ var baseArrow = (options) => ({
     const min2 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset4 = clamp(min2, center, max2);
-    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset4 && rects.reference[length] / 2 - (center < min2 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const offset5 = clamp(min2, center, max2);
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset5 && rects.reference[length] / 2 - (center < min2 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min2 ? center - min2 : center - max2 : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
       data: {
-        [axis]: offset4,
-        centerOffset: center - offset4 - alignmentOffset,
+        [axis]: offset5,
+        centerOffset: center - offset5 - alignmentOffset,
         ...shouldAddOffset && {
           alignmentOffset
         }
@@ -16834,8 +16844,8 @@ var TooltipViewport = /* @__PURE__ */ React102.forwardRef(function TooltipViewpo
     if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
       setPreviousContentNode(capturedNodeRef.current);
       setShowStartingStyleAttribute(true);
-      const offset4 = calculateRelativePosition(previousActiveTrigger, activeTrigger);
-      setNewTriggerOffset(offset4);
+      const offset5 = calculateRelativePosition(previousActiveTrigger, activeTrigger);
+      setNewTriggerOffset(offset5);
       cleanupFrame.request(() => {
         cleanupFrame.request(() => {
           setShowStartingStyleAttribute(false);
@@ -16912,11 +16922,11 @@ var TooltipViewport = /* @__PURE__ */ React102.forwardRef(function TooltipViewpo
   });
 });
 if (process.env.NODE_ENV !== "production") TooltipViewport.displayName = "TooltipViewport";
-function getActivationDirection(offset4) {
-  if (!offset4) {
+function getActivationDirection(offset5) {
+  if (!offset5) {
     return void 0;
   }
-  return `${getValueWithTolerance(offset4.horizontal, 5, "right", "left")} ${getValueWithTolerance(offset4.vertical, 5, "down", "up")}`;
+  return `${getValueWithTolerance(offset5.horizontal, 5, "right", "left")} ${getValueWithTolerance(offset5.vertical, 5, "down", "up")}`;
 }
 function getValueWithTolerance(value, tolerance, positiveLabel, negativeLabel) {
   if (value > tolerance) {
@@ -17002,6 +17012,29 @@ function mergePropsWithEventComposition(triggerProps, childProps) {
       };
     }
   }
+  if (triggerProps.ref || childProps.ref) {
+    const triggerRef = triggerProps.ref;
+    const childRef = childProps.ref;
+    if (triggerRef && childRef) {
+      mergedProps.ref = (value) => {
+        assignRef(triggerRef, value);
+        assignRef(childRef, value);
+      };
+    } else if (childRef) {
+      mergedProps.ref = childRef;
+    }
+  }
+  if (typeof triggerProps.style === "object" && triggerProps.style !== null && typeof childProps.style === "object" && childProps.style !== null) {
+    mergedProps.style = { ...triggerProps.style, ...childProps.style };
+  } else if (childProps.style !== void 0) {
+    mergedProps.style = childProps.style;
+  }
+  if (triggerProps.className || childProps.className) {
+    const classes = [triggerProps.className, childProps.className].filter(Boolean).join(" ");
+    if (classes) {
+      mergedProps.className = classes;
+    }
+  }
   return mergedProps;
 }
 function cloneElementWithMergedProps(element, triggerProps) {
@@ -19843,7 +19876,7 @@ var getInsetEndStyles = (size4 = "medium") => {
 var startBaseStyles = "n-absolute n-left-1.5 n-inset-y-0 n-flex n-items-center";
 
 // src/components/internal/TextInput.tsx
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
 import React140, {
   forwardRef as forwardRef50,
   useCallback as useCallback34,
@@ -20052,7 +20085,7 @@ var SubmittableTextInput = forwardRef50(function SubmittableTextInput2({
   return /* @__PURE__ */ React140.createElement(
     "input",
     {
-      ref: composeRefs(ref, forwardedRef),
+      ref: composeRefs2(ref, forwardedRef),
       ...rest,
       value: internalValue,
       onKeyDown: handleKeyDown,
@@ -21071,8 +21104,8 @@ var PopoverViewport = /* @__PURE__ */ React156.forwardRef(function PopoverViewpo
     if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
       setPreviousContentNode(capturedNodeRef.current);
       setShowStartingStyleAttribute(true);
-      const offset4 = calculateRelativePosition2(previousActiveTrigger, activeTrigger);
-      setNewTriggerOffset(offset4);
+      const offset5 = calculateRelativePosition2(previousActiveTrigger, activeTrigger);
+      setNewTriggerOffset(offset5);
       cleanupFrame.request(() => {
         cleanupFrame.request(() => {
           setShowStartingStyleAttribute(false);
@@ -21137,11 +21170,11 @@ var PopoverViewport = /* @__PURE__ */ React156.forwardRef(function PopoverViewpo
   });
 });
 if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";
-function getActivationDirection2(offset4) {
-  if (!offset4) {
+function getActivationDirection2(offset5) {
+  if (!offset5) {
     return void 0;
   }
-  return `${getValueWithTolerance2(offset4.horizontal, 5, "right", "left")} ${getValueWithTolerance2(offset4.vertical, 5, "down", "up")}`;
+  return `${getValueWithTolerance2(offset5.horizontal, 5, "right", "left")} ${getValueWithTolerance2(offset5.vertical, 5, "down", "up")}`;
 }
 function getValueWithTolerance2(value, tolerance, positiveLabel, negativeLabel) {
   if (value > tolerance) {
@@ -21349,9 +21382,12 @@ function Popover({
           triggerProps,
           childProps
         );
-        mergedProps.ref = (node) => {
-          if (node) setAnchorElement(node);
-        };
+        mergedProps.ref = composeRefs(
+          mergedProps.ref,
+          (node) => {
+            if (node) setAnchorElement(node);
+          }
+        );
         return React158.cloneElement(
           element,
           mergedProps
@@ -26529,18 +26565,18 @@ function buildMeasurements({
   gap
 }) {
   const measurements = [];
-  let offset4 = paddingTop;
+  let offset5 = paddingTop;
   for (let index2 = 0; index2 < itemCount; index2 += 1) {
     const size4 = Math.max(0, getItemHeight(index2));
-    const start = offset4;
+    const start = offset5;
     const end = start + size4;
     measurements.push({ index: index2, size: size4, start, end });
-    offset4 = end + gap;
+    offset5 = end + gap;
   }
   const totalHeight = measurements.length ? measurements[measurements.length - 1].end + paddingBottom : paddingTop + paddingBottom;
   return { measurements, totalHeight };
 }
-function findFirstVisibleIndex(measurements, offset4) {
+function findFirstVisibleIndex(measurements, offset5) {
   if (!measurements.length) return 0;
   let low = 0;
   let high = measurements.length - 1;
@@ -26548,7 +26584,7 @@ function findFirstVisibleIndex(measurements, offset4) {
   while (low <= high) {
     const middle = Math.floor((low + high) / 2);
     const measurement = measurements[middle];
-    if (measurement.end > offset4) {
+    if (measurement.end > offset5) {
       match = middle;
       high = middle - 1;
     } else {
@@ -26765,8 +26801,8 @@ var VirtualizedInner = React204.forwardRef(function Virtualized({
     },
     visibleRange.end >= visibleRange.start && Array.from(
       { length: visibleRange.end - visibleRange.start + 1 },
-      (_, offset4) => {
-        const index2 = visibleRange.start + offset4;
+      (_, offset5) => {
+        const index2 = visibleRange.start + offset5;
         const measurement = measurements[index2];
         const key = itemKey ? itemKey(index2) : index2;
         return /* @__PURE__ */ React204.createElement(
@@ -27866,7 +27902,7 @@ var ListViewRoot = memoGeneric(
 );
 
 // src/components/listView/ListViewRow.tsx
-import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
+import { composeRefs as composeRefs3 } from "@radix-ui/react-compose-refs";
 import React210, {
   forwardRef as forwardRef84,
   useCallback as useCallback51,
@@ -28181,7 +28217,7 @@ var ListViewRow = memoGeneric(
         },
         ({ ref: sortableRef, ...sortableProps }, { relativeDropPosition }) => renderContent(
           sortableProps,
-          composeRefs2(sortableRef, forwardedRef),
+          composeRefs3(sortableRef, forwardedRef),
           relativeDropPosition
         )
       );
@@ -30796,9 +30832,12 @@ var Drawer = React229.memo(
               triggerProps,
               childProps
             );
-            mergedProps.ref = (node) => {
-              if (node) setAnchorElement(node);
-            };
+            mergedProps.ref = composeRefs(
+              mergedProps.ref,
+              (node) => {
+                if (node) setAnchorElement(node);
+              }
+            );
             return React229.cloneElement(
               element,
               mergedProps
@@ -31001,6 +31040,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   const containerRef = useRef71(null);
   const itemRefs = useRef71([]);
   const [indicatorStyle, setIndicatorStyle] = useState61(null);
+  const [resizeTrigger, setResizeTrigger] = useState61(0);
   const selectedIndex = useMemo117(() => {
     if (!value) return -1;
     return items.findIndex((item) => item.value === value);
@@ -31023,7 +31063,16 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       width: itemRect.width
     });
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length]);
+  }, [selectedIndex, variant, items.length, resizeTrigger]);
+  useLayoutEffect10(() => {
+    const container = containerRef.current;
+    if (!container || variant !== "default") return;
+    const observer = new ResizeObserver(() => {
+      setResizeTrigger((prev) => prev + 1);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [variant]);
   const handleSelect = useCallback57(
     (newValue) => {
       if (!allowEmpty && !newValue) return;
@@ -31130,6 +31179,7 @@ var SECTION_HEADER_HEIGHT = 24;
 var HEADER_HEIGHT = 80;
 var FOOTER_HEIGHT = 40;
 var HORIZONTAL_PADDING = 8;
+var SEGMENTED_CONTROL_ITEM_WIDTH = 31;
 var categoryIcons = {
   search: /* @__PURE__ */ React231.createElement(MagnifyingGlassIcon, null),
   frequent: /* @__PURE__ */ React231.createElement(ClockIcon, null),
@@ -31471,6 +31521,14 @@ var EmojiPicker = memo25(function EmojiPicker2({
     ],
     [frequentlyUsed.length]
   );
+  const segmentedControlGap = useMemo118(() => {
+    const numItems = categoryItems.length;
+    const availableWidth = size4.width - HORIZONTAL_PADDING * 2;
+    const totalItemsWidth = numItems * SEGMENTED_CONTROL_ITEM_WIDTH;
+    const remainingSpace = availableWidth - totalItemsWidth;
+    const numGaps = numItems - 1;
+    return numGaps > 0 ? Math.max(0, remainingSpace / numGaps) : 0;
+  }, [categoryItems.length, size4.width]);
   const displayEmoji = hoveredEmoji ?? selectedEmoji;
   const footerText = displayEmoji ? `:${displayEmoji.names[0]}:${displayEmoji.names.length > 1 ? ` :${displayEmoji.names[1]}:` : ""}` : "";
   const skinToneMenuItems = useMemo118(
@@ -31495,7 +31553,8 @@ var EmojiPicker = memo25(function EmojiPicker2({
         value: activeCategory ?? "search",
         onValueChange: handleCategoryChange,
         allowEmpty: true,
-        className: "n-flex-nowrap n-px-2"
+        className: "n-flex-nowrap n-px-2",
+        style: { gap: segmentedControlGap }
       }
     ),
     /* @__PURE__ */ React231.createElement(Divider, null),
@@ -36346,27 +36405,24 @@ var Section = memo31(function InspectorSection({
 });
 
 // src/components/SelectionToolbar.tsx
-import * as PopperPrimitive from "@radix-ui/react-popper";
-import React261, { memo as memo32, useMemo as useMemo129 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
-var createVirtualElement2 = (rect) => ({
-  getBoundingClientRect: () => ({
-    width: rect.width,
-    height: rect.height,
-    x: rect.x,
-    y: rect.y,
-    top: rect.y,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height,
-    left: rect.x,
-    toJSON: () => null
-  })
-});
+import {
+  useFloating as useFloating3,
+  offset as offset4,
+  flip as flip4,
+  shift as shift4,
+  FloatingPortal as FloatingPortal3
+} from "@floating-ui/react";
+import React261, { memo as memo32, useCallback as useCallback64, useEffect as useEffect54, useMemo as useMemo129, useState as useState68 } from "react";
+function getPlacement(side, align) {
+  if (align === "center") {
+    return side;
+  }
+  return `${side}-${align}`;
+}
 var SelectionToolbarContainer = memo32(
   function SelectionToolbarContainer2({
     rect,
     children,
-    portalContainer,
     side = "top",
     sideOffset = 10,
     align = "center",
@@ -36376,31 +36432,52 @@ var SelectionToolbarContainer = memo32(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React261.useRef(null);
-    const size4 = useSize(containerRef, "width");
-    const virtualRef = useMemo129(
+    const [containerElement, setContainerElement] = useState68(null);
+    const containerRef = useCallback64((el) => {
+      setContainerElement(el);
+    }, []);
+    const containerRefObject = useMemo129(
+      () => ({ current: containerElement }),
+      [containerElement]
+    );
+    const size4 = useSize(containerRefObject, "width");
+    const virtualElement = useMemo129(
       () => ({
-        current: createVirtualElement2(rect)
+        getBoundingClientRect: () => ({
+          width: rect.width,
+          height: rect.height,
+          x: rect.x,
+          y: rect.y,
+          top: rect.y,
+          right: rect.x + rect.width,
+          bottom: rect.y + rect.height,
+          left: rect.x
+        })
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ React261.createElement(
-      PopperPrimitive.Content,
+    const placement = getPlacement(side, align);
+    const { refs, floatingStyles } = useFloating3({
+      placement,
+      middleware: avoidCollisions ? [offset4(sideOffset), flip4(), shift4({ padding: 10 })] : [offset4(sideOffset)]
+    });
+    useEffect54(() => {
+      refs.setPositionReference(virtualElement);
+    }, [refs, virtualElement]);
+    return /* @__PURE__ */ React261.createElement(FloatingPortal3, null, /* @__PURE__ */ React261.createElement(
+      "div",
       {
+        ref: refs.setFloating,
         ...portalScopeProps(portalScopeId),
-        side,
-        sideOffset,
-        align,
-        avoidCollisions,
-        collisionPadding: 10,
         contentEditable: false,
         style: {
-          zIndex: 10,
+          ...floatingStyles,
           opacity: size4 ? 1 : 0,
           transition: `opacity ${transitionDuration}s ease-in-out`,
           [cssVarNames.colors.inputBackground]: "transparent",
           [cssVarNames.colors.buttonBackground]: "transparent"
-        }
+        },
+        className: "n-z-menu"
       },
       /* @__PURE__ */ React261.createElement(
         "div",
@@ -36418,8 +36495,7 @@ var SelectionToolbarContainer = memo32(
         },
         children
       )
-    );
-    return /* @__PURE__ */ React261.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React261.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal5(popperContent, portalContainer) : popperContent);
+    ));
   }
 );
 
@@ -38796,9 +38872,9 @@ if (process.env.NODE_ENV !== "production") SelectGroupLabel.displayName = "Selec
 
 // src/components/SelectMenu.tsx
 import React290, {
-  useCallback as useCallback65,
+  useCallback as useCallback66,
   useMemo as useMemo142,
-  useState as useState70
+  useState as useState71
 } from "react";
 var readOnlyStyle = {
   justifyContent: "flex-start",
@@ -38906,20 +38982,20 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = useState70(open2 ?? false);
+  const [internalOpen, setInternalOpen] = useState71(open2 ?? false);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
   });
   const labelType = useLabelType();
-  const handleOpenChange = useCallback65(
+  const handleOpenChange = useCallback66(
     (newOpen) => {
       onOpenChange?.(newOpen);
       setInternalOpen(newOpen);
     },
     [onOpenChange]
   );
-  const handleValueChange = useCallback65(
+  const handleValueChange = useCallback66(
     (newValue) => {
       if (newValue !== null) {
         onSelect?.(newValue);
@@ -40310,8 +40386,8 @@ var SliderThumb = /* @__PURE__ */ React296.forwardRef(function SliderThumb2(comp
         if (thumbRef.current != null) {
           const axis = orientation === "horizontal" ? "x" : "y";
           const midpoint = getMidpoint(thumbRef.current);
-          const offset4 = (orientation === "horizontal" ? event2.clientX : event2.clientY) - midpoint[axis];
-          pressedThumbCenterOffsetRef.current = offset4;
+          const offset5 = (orientation === "horizontal" ? event2.clientX : event2.clientY) - midpoint[axis];
+          pressedThumbCenterOffsetRef.current = offset5;
         }
         if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
           pressedInputRef.current = inputRef.current;
@@ -40404,7 +40480,7 @@ var SliderIndicator = /* @__PURE__ */ React297.forwardRef(function SliderIndicat
 if (process.env.NODE_ENV !== "production") SliderIndicator.displayName = "SliderIndicator";
 
 // src/components/Slider.tsx
-import React298, { memo as memo36, useCallback as useCallback67 } from "react";
+import React298, { memo as memo36, useCallback as useCallback68 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
@@ -40427,7 +40503,7 @@ var Slider = memo36(function Slider2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const handleValueChange = useCallback67(
+  const handleValueChange = useCallback68(
     (newValue) => {
       onValueChange(newValue);
     },
@@ -40511,7 +40587,7 @@ function createSharedDrag() {
 
 // src/components/Stepper.tsx
 import { clamp as clamp9 } from "@noya-app/noya-utils";
-import React300, { memo as memo37, useCallback as useCallback68, useMemo as useMemo146 } from "react";
+import React300, { memo as memo37, useCallback as useCallback69, useMemo as useMemo146 } from "react";
 var Stepper = memo37(function Stepper2({
   style: style2,
   className,
@@ -40532,7 +40608,7 @@ var Stepper = memo37(function Stepper2({
   const value = useMemo146(() => {
     return clamp9(valueProp, min2, max2);
   }, [valueProp, min2, max2]);
-  const handleValueChange = useCallback68(
+  const handleValueChange = useCallback69(
     (value2) => {
       const newValue = clamp9(value2, min2, max2);
       onValueChange(newValue);
@@ -40913,7 +40989,7 @@ function Tabs({
 }
 
 // src/components/UserPicker.tsx
-import React306, { useCallback as useCallback69, useMemo as useMemo148, useState as useState74 } from "react";
+import React306, { useCallback as useCallback70, useMemo as useMemo148, useState as useState75 } from "react";
 function UserPicker({
   users,
   value,
@@ -40937,13 +41013,13 @@ function UserPicker({
     return sortedUsers.map(createUserMenuItem);
   }, [sortedUsers]);
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState74(defaultValue2);
+  const [uncontrolledValue, setUncontrolledValue] = useState75(defaultValue2);
   const selectedUserId = isControlled ? value : uncontrolledValue;
   const selectedItem = useMemo148(() => {
     if (!selectedUserId) return void 0;
     return items.find((item) => item.value === selectedUserId);
   }, [items, selectedUserId]);
-  const updateSelectedUserId = useCallback69(
+  const updateSelectedUserId = useCallback70(
     (userId) => {
       if (!isControlled) {
         setUncontrolledValue(userId);
@@ -40952,7 +41028,7 @@ function UserPicker({
     },
     [isControlled, onChangeUserId]
   );
-  const handleSelectItem = useCallback69(
+  const handleSelectItem = useCallback70(
     (item) => {
       updateSelectedUserId(item.value);
       onSelectUser?.(usersById.get(item.value));
@@ -41153,7 +41229,7 @@ var UserPointer = memo38(function UserPointer2({
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
 import React317, {
   memo as memo40,
-  useCallback as useCallback73,
+  useCallback as useCallback74,
   useImperativeHandle as useImperativeHandle18,
   useMemo as useMemo155,
   useRef as useRef94
@@ -41228,7 +41304,7 @@ function OverlayToolbar({
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React312, { useMemo as useMemo152, useRef as useRef90, useState as useState75 } from "react";
+import React312, { useMemo as useMemo152, useRef as useRef90, useState as useState76 } from "react";
 
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -41601,7 +41677,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   compactDrawerMenu
 }) {
   const portalContainer = useRef90(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState75({
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState76({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
@@ -41753,12 +41829,12 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React316, { useCallback as useCallback72, useMemo as useMemo154, useRef as useRef93, useState as useState77 } from "react";
+import React316, { useCallback as useCallback73, useMemo as useMemo154, useRef as useRef93, useState as useState78 } from "react";
 
 // src/components/resizablePanels/Panel.tsx
 import React313, {
   forwardRef as forwardRef124,
-  useEffect as useEffect57,
+  useEffect as useEffect58,
   useId as useId5,
   useImperativeHandle as useImperativeHandle16
 } from "react";
@@ -41790,7 +41866,7 @@ var Panel = forwardRef124(
       collapsePanel,
       isPanelExpanded
     } = context;
-    useEffect57(() => {
+    useEffect58(() => {
       registerPanel({
         id,
         order,
@@ -41836,12 +41912,12 @@ var Panel = forwardRef124(
 // src/components/resizablePanels/PanelGroup.tsx
 import React314, {
   forwardRef as forwardRef125,
-  useCallback as useCallback70,
-  useEffect as useEffect58,
+  useCallback as useCallback71,
+  useEffect as useEffect59,
   useImperativeHandle as useImperativeHandle17,
   useMemo as useMemo153,
   useRef as useRef91,
-  useState as useState76
+  useState as useState77
 } from "react";
 function getStorageKey(autoSaveId) {
   return `noya-panels:${autoSaveId}`;
@@ -41865,10 +41941,10 @@ var PanelGroup = forwardRef125(
     const containerRef = useRef91(null);
     const containerSize = useSize(containerRef);
     const containerWidth = containerSize?.width ?? 0;
-    const [panels, setPanels] = useState76(/* @__PURE__ */ new Map());
+    const [panels, setPanels] = useState77(/* @__PURE__ */ new Map());
     const panelsRef = useRef91(panels);
     panelsRef.current = panels;
-    const [resizing, setResizing] = useState76(null);
+    const [resizing, setResizing] = useState77(null);
     const sortedPanels = useMemo153(() => {
       return Array.from(panels.values()).sort((a, b) => a.order - b.order);
     }, [panels]);
@@ -41880,7 +41956,7 @@ var PanelGroup = forwardRef125(
       }
       return null;
     }, [sortedPanels]);
-    const calculateLayout = useCallback70(
+    const calculateLayout = useCallback71(
       (panelStates, width) => {
         if (width === 0) return panelStates;
         const sorted = Array.from(panelStates.values()).sort(
@@ -41905,18 +41981,18 @@ var PanelGroup = forwardRef125(
       },
       []
     );
-    useEffect58(() => {
+    useEffect59(() => {
       if (containerWidth > 0 && panels.size > 0) {
         setPanels((prev) => calculateLayout(prev, containerWidth));
       }
     }, [containerWidth, calculateLayout, panels.size]);
-    useEffect58(() => {
+    useEffect59(() => {
       if (onLayout && sortedPanels.length > 0) {
         const sizes = sortedPanels.map((p) => p.collapsed ? 0 : p.size);
         onLayout(sizes);
       }
     }, [onLayout, sortedPanels]);
-    const registerPanel = useCallback70(
+    const registerPanel = useCallback71(
       (panel) => {
         setPanels((prev) => {
           const savedSizes = loadSavedSizes(autoSaveId);
@@ -41936,26 +42012,26 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const unregisterPanel = useCallback70((panelId) => {
+    const unregisterPanel = useCallback71((panelId) => {
       setPanels((prev) => {
         const newPanels = new Map(prev);
         newPanels.delete(panelId);
         return newPanels;
       });
     }, []);
-    const getPanelSize = useCallback70(
+    const getPanelSize = useCallback71(
       (panelId) => {
         return panels.get(panelId)?.size ?? 0;
       },
       [panels]
     );
-    const getPanelIndex = useCallback70(
+    const getPanelIndex = useCallback71(
       (panelId) => {
         return sortedPanels.findIndex((p) => p.id === panelId);
       },
       [sortedPanels]
     );
-    const setPanelSize = useCallback70(
+    const setPanelSize = useCallback71(
       (panelId, size4) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -41983,7 +42059,7 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const expandPanel = useCallback70(
+    const expandPanel = useCallback71(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42008,7 +42084,7 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const collapsePanel = useCallback70(
+    const collapsePanel = useCallback71(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42032,14 +42108,14 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const isPanelExpanded = useCallback70(
+    const isPanelExpanded = useCallback71(
       (panelId) => {
         const panel = panels.get(panelId);
         return panel ? !panel.collapsed : false;
       },
       [panels]
     );
-    const startResize = useCallback70(
+    const startResize = useCallback71(
       (handleIndex, startX) => {
         const startSizes = sortedPanels.map((p) => p.size);
         setResizing({
@@ -42050,7 +42126,7 @@ var PanelGroup = forwardRef125(
       },
       [sortedPanels]
     );
-    useEffect58(() => {
+    useEffect59(() => {
       if (!resizing) return;
       const handleMouseMove = (e) => {
         const delta = e.clientX - resizing.startX;
@@ -42201,7 +42277,7 @@ var PanelGroup = forwardRef125(
 );
 
 // src/components/resizablePanels/PanelResizeHandle.tsx
-import React315, { useCallback as useCallback71, useContext as useContext65, useRef as useRef92 } from "react";
+import React315, { useCallback as useCallback72, useContext as useContext65, useRef as useRef92 } from "react";
 function PanelResizeHandle({
   className,
   disabled: disabled2,
@@ -42209,7 +42285,7 @@ function PanelResizeHandle({
 }) {
   const context = useContext65(PanelGroupContext);
   const handleRef = useRef92(null);
-  const handleMouseDown = useCallback71(
+  const handleMouseDown = useCallback72(
     (e) => {
       if (disabled2 || !context) return;
       e.preventDefault();
@@ -42271,13 +42347,13 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   const autoSaveId = useMemo154(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v3--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
-  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState77(
+  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState78(
     leftSidebarOptions.defaultCollapsed ?? false
   );
-  const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState77(
+  const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState78(
     rightSidebarOptions.defaultCollapsed ?? false
   );
-  const handleLayoutChange = useCallback72(
+  const handleLayoutChange = useCallback73(
     (sizes) => {
       const leftIndex = leftPanel ? 0 : -1;
       const rightIndex = rightPanel ? leftPanel ? 2 : 1 : -1;
@@ -42290,7 +42366,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftPanel, rightPanel]
   );
-  const handleLeftTabChange = useCallback72(
+  const handleLeftTabChange = useCallback73(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -42307,7 +42383,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = useCallback72(
+  const handleRightTabChange = useCallback73(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -42562,12 +42638,12 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     }
   });
   const isDrawerActive = sideType === "drawer" || sideType === "auto" && parentSize.width <= sideTypeBreakpoint;
-  const closeLeftSidebar = useCallback73(() => {
+  const closeLeftSidebar = useCallback74(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = useCallback73(() => {
+  const closeRightSidebar = useCallback74(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
@@ -42744,9 +42820,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-import { useEffect as useEffect59, useState as useState78 } from "react";
+import { useEffect as useEffect60, useState as useState79 } from "react";
 function useTheme() {
-  const [theme, setTheme] = useState78("light");
+  const [theme, setTheme] = useState79("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -42758,7 +42834,7 @@ function useTheme() {
         break;
     }
   };
-  useEffect59(() => {
+  useEffect60(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {