npm - @noya-app/noya-designsystem - Versions diffs - 0.1.80 → 0.1.82 - Mend

@noya-app/noya-designsystem 0.1.80 → 0.1.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/.turbo/turbo-build.log +11 -11
package/CHANGELOG.md +13 -0
package/dist/chunk-L6E2LZOL.mjs +44 -0
package/dist/chunk-L6E2LZOL.mjs.map +1 -0
package/dist/chunk-QDV7OQMJ.mjs +37 -0
package/dist/chunk-QDV7OQMJ.mjs.map +1 -0
package/dist/emojis.mjs +2 -1
package/dist/emojis.mjs.map +1 -1
package/dist/index.css +1 -1
package/dist/index.d.mts +7 -4
package/dist/index.d.ts +7 -4
package/dist/index.js +374 -305
package/dist/index.js.map +1 -1
package/dist/index.mjs +208 -132
package/dist/index.mjs.map +1 -1
package/package.json +3 -4
package/src/components/Drawer.tsx +8 -5
package/src/components/EmojiPicker.tsx +13 -1
package/src/components/Popover.tsx +8 -6
package/src/components/SegmentedControl.tsx +17 -1
package/src/components/SelectionToolbar.tsx +88 -71
package/src/utils/mergeProps.ts +38 -0
package/tsup.config.ts +8 -0

package/dist/index.js CHANGED Viewed

@@ -39,12 +39,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;
@@ -53,7 +53,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect60(
+      useEffect61(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -102,7 +102,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];
@@ -114,7 +114,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect60(
+        useEffect61(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -140,7 +140,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;
       exports2.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());
     }();
@@ -171,7 +171,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;
     exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
@@ -215,7 +215,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;
@@ -237,7 +237,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;
       exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
         var instRef = useRef95(null);
         if (null === instRef.current) {
@@ -280,7 +280,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;
@@ -4075,6 +4075,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
 var import_react41 = __toESM(require("react"));
@@ -6546,11 +6555,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;
           }
         }
       }
@@ -9043,7 +9052,7 @@ var limitShift = function(options) {
         middlewareData
       } = state;
       const {
-        offset: offset4 = 0,
+        offset: offset5 = 0,
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true
       } = evaluate(options, state);
@@ -9055,7 +9064,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
@@ -13631,14 +13640,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
         }
@@ -17084,8 +17093,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);
@@ -17162,11 +17171,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) {
@@ -17252,6 +17261,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) {
@@ -21294,8 +21326,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);
@@ -21360,11 +21392,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) {
@@ -21572,9 +21604,12 @@ function Popover({
           triggerProps,
           childProps
         );
-        mergedProps.ref = (node) => {
-          if (node) setAnchorElement(node);
-        };
+        mergedProps.ref = composeRefs(
+          mergedProps.ref,
+          (node) => {
+            if (node) setAnchorElement(node);
+          }
+        );
         return import_react33.default.cloneElement(
           element,
           mergedProps
@@ -26701,18 +26736,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;
@@ -26720,7 +26755,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 {
@@ -26937,8 +26972,8 @@ var VirtualizedInner = import_react61.default.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__ */ import_react61.default.createElement(
@@ -30928,9 +30963,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
@@ -31105,6 +31143,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   const containerRef = (0, import_react81.useRef)(null);
   const itemRefs = (0, import_react81.useRef)([]);
   const [indicatorStyle, setIndicatorStyle] = (0, import_react81.useState)(null);
+  const [resizeTrigger, setResizeTrigger] = (0, import_react81.useState)(0);
   const selectedIndex = (0, import_react81.useMemo)(() => {
     if (!value) return -1;
     return items.findIndex((item) => item.value === value);
@@ -31127,7 +31166,16 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       width: itemRect.width
     });
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length]);
+  }, [selectedIndex, variant, items.length, resizeTrigger]);
+  (0, import_react81.useLayoutEffect)(() => {
+    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 = (0, import_react81.useCallback)(
     (newValue) => {
       if (!allowEmpty && !newValue) return;
@@ -31234,6 +31282,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__ */ import_react82.default.createElement(import_noya_icons10.MagnifyingGlassIcon, null),
   frequent: /* @__PURE__ */ import_react82.default.createElement(import_noya_icons10.ClockIcon, null),
@@ -31575,6 +31624,14 @@ var EmojiPicker = (0, import_react82.memo)(function EmojiPicker2({
     ],
     [frequentlyUsed.length]
   );
+  const segmentedControlGap = (0, import_react82.useMemo)(() => {
+    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 = (0, import_react82.useMemo)(
@@ -31599,7 +31656,8 @@ var EmojiPicker = (0, import_react82.memo)(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__ */ import_react82.default.createElement(Divider, null),
@@ -36431,27 +36489,18 @@ var Section = (0, import_react102.memo)(function InspectorSection({
 });
 // src/components/SelectionToolbar.tsx
-var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
-var import_react103 = __toESM(require("react"));
-var import_react_dom8 = require("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
-  })
-});
-var SelectionToolbarContainer = (0, import_react103.memo)(
+var import_react103 = require("@floating-ui/react");
+var import_react104 = __toESM(require("react"));
+function getPlacement(side, align) {
+  if (align === "center") {
+    return side;
+  }
+  return `${side}-${align}`;
+}
+var SelectionToolbarContainer = (0, import_react104.memo)(
   function SelectionToolbarContainer2({
     rect,
     children,
-    portalContainer,
     side = "top",
     sideOffset = 10,
     align = "center",
@@ -36461,33 +36510,54 @@ var SelectionToolbarContainer = (0, import_react103.memo)(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = import_react103.default.useRef(null);
-    const size4 = useSize(containerRef, "width");
-    const virtualRef = (0, import_react103.useMemo)(
+    const [containerElement, setContainerElement] = (0, import_react104.useState)(null);
+    const containerRef = (0, import_react104.useCallback)((el) => {
+      setContainerElement(el);
+    }, []);
+    const containerRefObject = (0, import_react104.useMemo)(
+      () => ({ current: containerElement }),
+      [containerElement]
+    );
+    const size4 = useSize(containerRefObject, "width");
+    const virtualElement = (0, import_react104.useMemo)(
       () => ({
-        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__ */ import_react103.default.createElement(
-      PopperPrimitive.Content,
+    const placement = getPlacement(side, align);
+    const { refs, floatingStyles } = (0, import_react103.useFloating)({
+      placement,
+      middleware: avoidCollisions ? [(0, import_react103.offset)(sideOffset), (0, import_react103.flip)(), (0, import_react103.shift)({ padding: 10 })] : [(0, import_react103.offset)(sideOffset)]
+    });
+    (0, import_react104.useEffect)(() => {
+      refs.setPositionReference(virtualElement);
+    }, [refs, virtualElement]);
+    return /* @__PURE__ */ import_react104.default.createElement(import_react103.FloatingPortal, null, /* @__PURE__ */ import_react104.default.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__ */ import_react103.default.createElement(
+      /* @__PURE__ */ import_react104.default.createElement(
         "div",
         {
           ref: containerRef,
@@ -36503,8 +36573,7 @@ var SelectionToolbarContainer = (0, import_react103.memo)(
         },
         children
       )
-    );
-    return /* @__PURE__ */ import_react103.default.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ import_react103.default.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? (0, import_react_dom8.createPortal)(popperContent, portalContainer) : popperContent);
+    ));
   }
 );
@@ -38875,7 +38944,7 @@ var SelectGroupLabel = /* @__PURE__ */ React289.forwardRef(function SelectGroupL
 if (process.env.NODE_ENV !== "production") SelectGroupLabel.displayName = "SelectGroupLabel";
 // src/components/SelectMenu.tsx
-var import_react104 = __toESM(require("react"));
+var import_react105 = __toESM(require("react"));
 var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
@@ -38898,29 +38967,29 @@ function SelectItemContent({
   indented,
   children
 }) {
-  return /* @__PURE__ */ import_react104.default.createElement(import_react104.default.Fragment, null, indented && /* @__PURE__ */ import_react104.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ import_react104.default.createElement(
+  return /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, indented && /* @__PURE__ */ import_react105.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ import_react105.default.createElement(
     "span",
     {
       className: "n-flex n-items-center n-relative -n-left-2.5",
       style: { marginRight: -CHECKBOX_RIGHT_INSET }
     },
-    /* @__PURE__ */ import_react104.default.createElement(import_noya_icons14.CheckIcon, null)
-  ) : indented ? /* @__PURE__ */ import_react104.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && (typeof icon === "string" ? /* @__PURE__ */ import_react104.default.createElement(
+    /* @__PURE__ */ import_react105.default.createElement(import_noya_icons14.CheckIcon, null)
+  ) : indented ? /* @__PURE__ */ import_react105.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && (typeof icon === "string" ? /* @__PURE__ */ import_react105.default.createElement(
     Icon,
     {
       name: icon,
       className: "n-mr-2 n-w-4 n-h-4 n-flex-shrink-0"
     }
-  ) : /* @__PURE__ */ import_react104.default.createElement("span", { className: "n-mr-2 n-w-4 n-h-4 n-flex-shrink-0 n-flex n-items-center n-justify-center" }, icon)), /* @__PURE__ */ import_react104.default.createElement("div", { className: "n-flex n-items-center n-flex-1" }, children));
+  ) : /* @__PURE__ */ import_react105.default.createElement("span", { className: "n-mr-2 n-w-4 n-h-4 n-flex-shrink-0 n-flex n-items-center n-justify-center" }, icon)), /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex n-items-center n-flex-1" }, children));
 }
 function SelectMenuItems({
   items,
   hasCheckedItem
 }) {
-  return /* @__PURE__ */ import_react104.default.createElement(import_react104.default.Fragment, null, items.map((item, index2) => {
+  return /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, items.map((item, index2) => {
     switch (item.type) {
       case "separator":
-        return /* @__PURE__ */ import_react104.default.createElement(
+        return /* @__PURE__ */ import_react105.default.createElement(
           index_parts_exports10.Separator,
           {
             key: index2,
@@ -38928,7 +38997,7 @@ function SelectMenuItems({
           }
         );
       case "sectionHeader":
-        return /* @__PURE__ */ import_react104.default.createElement(
+        return /* @__PURE__ */ import_react105.default.createElement(
           SectionHeaderMenuItem,
           {
             isFirst: index2 === 0,
@@ -38941,21 +39010,21 @@ function SelectMenuItems({
       case "submenu":
         return null;
       default:
-        return /* @__PURE__ */ import_react104.default.createElement("div", { key: item.value, className: "n-px-1" }, /* @__PURE__ */ import_react104.default.createElement(
+        return /* @__PURE__ */ import_react105.default.createElement("div", { key: item.value, className: "n-px-1" }, /* @__PURE__ */ import_react105.default.createElement(
           index_parts_exports10.Item,
           {
             value: item.value,
             disabled: item.disabled,
             className: itemStyle3
           },
-          /* @__PURE__ */ import_react104.default.createElement(
+          /* @__PURE__ */ import_react105.default.createElement(
             SelectItemContent,
             {
               icon: item.icon,
               checked: item.checked,
               indented: hasCheckedItem
             },
-            /* @__PURE__ */ import_react104.default.createElement(index_parts_exports10.ItemText, null, item.title ?? item.value)
+            /* @__PURE__ */ import_react105.default.createElement(index_parts_exports10.ItemText, null, item.title ?? item.value)
           )
         ));
     }
@@ -38982,20 +39051,20 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = (0, import_react104.useState)(open2 ?? false);
+  const [internalOpen, setInternalOpen] = (0, import_react105.useState)(open2 ?? false);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
   });
   const labelType = useLabelType();
-  const handleOpenChange = (0, import_react104.useCallback)(
+  const handleOpenChange = (0, import_react105.useCallback)(
     (newOpen) => {
       onOpenChange?.(newOpen);
       setInternalOpen(newOpen);
     },
     [onOpenChange]
   );
-  const handleValueChange = (0, import_react104.useCallback)(
+  const handleValueChange = (0, import_react105.useCallback)(
     (newValue) => {
       if (newValue !== null) {
         onSelect?.(newValue);
@@ -39006,8 +39075,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
   const hasCheckedItem = items.some(
     (item) => isSelectableMenuItem(item) && item.checked
   );
-  const readOnlyButton = (0, import_react104.useMemo)(
-    () => /* @__PURE__ */ import_react104.default.createElement(
+  const readOnlyButton = (0, import_react105.useMemo)(
+    () => /* @__PURE__ */ import_react105.default.createElement(
       Button,
       {
         id,
@@ -39017,11 +39086,11 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled: disabled2
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ import_react104.default.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ import_react105.default.createElement("span", { className: "n-flex n-flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled2, value, selectedItem]
   );
-  const contentStyle = (0, import_react104.useMemo)(() => {
+  const contentStyle = (0, import_react105.useMemo)(() => {
     return {
       width: "var(--anchor-width)",
       minWidth: "max-content",
@@ -39029,7 +39098,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ import_react104.default.createElement(
+  const content = /* @__PURE__ */ import_react105.default.createElement(
     index_parts_exports10.Root,
     {
       value,
@@ -39038,13 +39107,13 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       onOpenChange: handleOpenChange,
       disabled: disabled2
     },
-    /* @__PURE__ */ import_react104.default.createElement(
+    /* @__PURE__ */ import_react105.default.createElement(
       index_parts_exports10.Trigger,
       {
         id,
         onFocus,
         onBlur,
-        render: /* @__PURE__ */ import_react104.default.createElement(
+        render: /* @__PURE__ */ import_react105.default.createElement(
           Button,
           {
             style: style2,
@@ -39057,10 +39126,10 @@ var SelectMenu = memoGeneric(function SelectMenu2({
           }
         )
       },
-      icon && /* @__PURE__ */ import_react104.default.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
-      label && labelType === "inset" && /* @__PURE__ */ import_react104.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react104.default.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
-      /* @__PURE__ */ import_react104.default.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ import_react104.default.createElement(index_parts_exports10.Value, null, selectedItem?.title ?? value ?? placeholder)),
-      /* @__PURE__ */ import_react104.default.createElement(index_parts_exports10.Icon, null, /* @__PURE__ */ import_react104.default.createElement(
+      icon && /* @__PURE__ */ import_react105.default.createElement("span", { className: "n-pr-1.5" }, renderIcon(icon)),
+      label && labelType === "inset" && /* @__PURE__ */ import_react105.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react105.default.createElement(Label, { className: "n-pr-4 n-text-text-disabled", htmlFor: id }, label)),
+      /* @__PURE__ */ import_react105.default.createElement("span", { className: "n-flex-1 n-flex" }, /* @__PURE__ */ import_react105.default.createElement(index_parts_exports10.Value, null, selectedItem?.title ?? value ?? placeholder)),
+      /* @__PURE__ */ import_react105.default.createElement(index_parts_exports10.Icon, null, /* @__PURE__ */ import_react105.default.createElement(
         import_noya_icons14.DropdownChevronIcon,
         {
           className: cx(
@@ -39070,7 +39139,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         }
       ))
     ),
-    /* @__PURE__ */ import_react104.default.createElement(index_parts_exports10.Portal, null, /* @__PURE__ */ import_react104.default.createElement(
+    /* @__PURE__ */ import_react105.default.createElement(index_parts_exports10.Portal, null, /* @__PURE__ */ import_react105.default.createElement(
       index_parts_exports10.Positioner,
       {
         ...portalScopeProps(portalScopeId),
@@ -39080,12 +39149,12 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         style: contentStyle,
         className: "n-z-menu"
       },
-      /* @__PURE__ */ import_react104.default.createElement(index_parts_exports10.Popup, { className: styles.contentStyle }, /* @__PURE__ */ import_react104.default.createElement(index_parts_exports10.ScrollUpArrow, { className: scrollButtonStyles }, /* @__PURE__ */ import_react104.default.createElement(
+      /* @__PURE__ */ import_react105.default.createElement(index_parts_exports10.Popup, { className: styles.contentStyle }, /* @__PURE__ */ import_react105.default.createElement(index_parts_exports10.ScrollUpArrow, { className: scrollButtonStyles }, /* @__PURE__ */ import_react105.default.createElement(
         import_noya_icons14.ChevronUpIcon,
         {
           className: cx("n-transition-transform n-duration-100")
         }
-      )), /* @__PURE__ */ import_react104.default.createElement(SelectMenuItems, { items, hasCheckedItem }), /* @__PURE__ */ import_react104.default.createElement(index_parts_exports10.ScrollDownArrow, { className: scrollButtonStyles }, /* @__PURE__ */ import_react104.default.createElement(import_noya_icons14.ChevronDownIcon, null)))
+      )), /* @__PURE__ */ import_react105.default.createElement(SelectMenuItems, { items, hasCheckedItem }), /* @__PURE__ */ import_react105.default.createElement(index_parts_exports10.ScrollDownArrow, { className: scrollButtonStyles }, /* @__PURE__ */ import_react105.default.createElement(import_noya_icons14.ChevronDownIcon, null)))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -40386,8 +40455,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;
@@ -40480,12 +40549,12 @@ var SliderIndicator = /* @__PURE__ */ React297.forwardRef(function SliderIndicat
 if (process.env.NODE_ENV !== "production") SliderIndicator.displayName = "SliderIndicator";
 // src/components/Slider.tsx
-var import_react105 = __toESM(require("react"));
+var import_react106 = __toESM(require("react"));
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
-var Slider = (0, import_react105.memo)(function Slider2({
+var Slider = (0, import_react106.memo)(function Slider2({
   style: style2,
   className,
   value,
@@ -40503,14 +40572,14 @@ var Slider = (0, import_react105.memo)(function Slider2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const handleValueChange = (0, import_react105.useCallback)(
+  const handleValueChange = (0, import_react106.useCallback)(
     (newValue) => {
       onValueChange(newValue);
     },
     [onValueChange]
   );
   const ratio = (clampedValue - min2) / (max2 - min2);
-  return /* @__PURE__ */ import_react105.default.createElement(
+  return /* @__PURE__ */ import_react106.default.createElement(
     index_parts_exports11.Root,
     {
       min: min2,
@@ -40529,7 +40598,7 @@ var Slider = (0, import_react105.memo)(function Slider2({
       disabled: readOnly,
       thumbAlignment: "edge"
     },
-    /* @__PURE__ */ import_react105.default.createElement(index_parts_exports11.Control, { className: "n-relative n-flex-grow n-h-[21px] n-flex n-items-center" }, /* @__PURE__ */ import_react105.default.createElement(index_parts_exports11.Track, { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ import_react105.default.createElement(
+    /* @__PURE__ */ import_react106.default.createElement(index_parts_exports11.Control, { className: "n-relative n-flex-grow n-h-[21px] n-flex n-items-center" }, /* @__PURE__ */ import_react106.default.createElement(index_parts_exports11.Track, { className: "n-relative n-flex-grow n-h-[3px] n-overflow-hidden" }, /* @__PURE__ */ import_react106.default.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-l n-bg-slider-active-background",
@@ -40540,7 +40609,7 @@ var Slider = (0, import_react105.memo)(function Slider2({
           width: `calc(${ratio * 100}% - ${ratio * THUMB_WIDTH + 2}px)`
         }
       }
-    ), /* @__PURE__ */ import_react105.default.createElement(
+    ), /* @__PURE__ */ import_react106.default.createElement(
       "div",
       {
         className: "n-absolute n-h-full n-rounded-r n-bg-input-background",
@@ -40550,7 +40619,7 @@ var Slider = (0, import_react105.memo)(function Slider2({
           width: `calc(${(1 - ratio) * 100}% - ${(1 - ratio) * THUMB_WIDTH + 2}px)`
         }
       }
-    )), /* @__PURE__ */ import_react105.default.createElement(
+    )), /* @__PURE__ */ import_react106.default.createElement(
       index_parts_exports11.Thumb,
       {
         style: thumbStyle,
@@ -40587,8 +40656,8 @@ function createSharedDrag() {
 // src/components/Stepper.tsx
 var import_noya_utils19 = require("@noya-app/noya-utils");
-var import_react106 = __toESM(require("react"));
-var Stepper = (0, import_react106.memo)(function Stepper2({
+var import_react107 = __toESM(require("react"));
+var Stepper = (0, import_react107.memo)(function Stepper2({
   style: style2,
   className,
   value: valueProp,
@@ -40605,17 +40674,17 @@ var Stepper = (0, import_react106.memo)(function Stepper2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const value = (0, import_react106.useMemo)(() => {
+  const value = (0, import_react107.useMemo)(() => {
     return (0, import_noya_utils19.clamp)(valueProp, min2, max2);
   }, [valueProp, min2, max2]);
-  const handleValueChange = (0, import_react106.useCallback)(
+  const handleValueChange = (0, import_react107.useCallback)(
     (value2) => {
       const newValue = (0, import_noya_utils19.clamp)(value2, min2, max2);
       onValueChange(newValue);
     },
     [onValueChange, min2, max2]
   );
-  return /* @__PURE__ */ import_react106.default.createElement(
+  return /* @__PURE__ */ import_react107.default.createElement(
     "div",
     {
       id,
@@ -40627,7 +40696,7 @@ var Stepper = (0, import_react106.memo)(function Stepper2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ import_react106.default.createElement(
+    /* @__PURE__ */ import_react107.default.createElement(
       InputField2.Root,
       {
         className: "n-flex-1",
@@ -40635,7 +40704,7 @@ var Stepper = (0, import_react106.memo)(function Stepper2({
         startClassName: "-n-ml-[3px]",
         endWidth: 17,
         endClassName: "-n-mr-[3px]",
-        start: /* @__PURE__ */ import_react106.default.createElement(
+        start: /* @__PURE__ */ import_react107.default.createElement(
           IconButton,
           {
             iconName: "MinusIcon",
@@ -40649,7 +40718,7 @@ var Stepper = (0, import_react106.memo)(function Stepper2({
             }
           }
         ),
-        end: /* @__PURE__ */ import_react106.default.createElement(
+        end: /* @__PURE__ */ import_react107.default.createElement(
           IconButton,
           {
             iconName: "PlusIcon",
@@ -40664,7 +40733,7 @@ var Stepper = (0, import_react106.memo)(function Stepper2({
           }
         )
       },
-      /* @__PURE__ */ import_react106.default.createElement(
+      /* @__PURE__ */ import_react107.default.createElement(
         InputField2.NumberInput,
         {
           value,
@@ -40989,7 +41058,7 @@ function Tabs({
 }
 // src/components/UserPicker.tsx
-var import_react107 = __toESM(require("react"));
+var import_react108 = __toESM(require("react"));
 function UserPicker({
   users,
   value,
@@ -40999,27 +41068,27 @@ function UserPicker({
   placeholder = "Search users...",
   ...rest
 }) {
-  const sortedUsers = (0, import_react107.useMemo)(() => {
+  const sortedUsers = (0, import_react108.useMemo)(() => {
     return [...users].sort(
       (a, b) => getUserDisplayName(a).localeCompare(getUserDisplayName(b), void 0, {
         sensitivity: "base"
       })
     );
   }, [users]);
-  const usersById = (0, import_react107.useMemo)(() => {
+  const usersById = (0, import_react108.useMemo)(() => {
     return new Map(sortedUsers.map((user) => [user.id, user]));
   }, [sortedUsers]);
-  const items = (0, import_react107.useMemo)(() => {
+  const items = (0, import_react108.useMemo)(() => {
     return sortedUsers.map(createUserMenuItem);
   }, [sortedUsers]);
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react107.useState)(defaultValue2);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react108.useState)(defaultValue2);
   const selectedUserId = isControlled ? value : uncontrolledValue;
-  const selectedItem = (0, import_react107.useMemo)(() => {
+  const selectedItem = (0, import_react108.useMemo)(() => {
     if (!selectedUserId) return void 0;
     return items.find((item) => item.value === selectedUserId);
   }, [items, selectedUserId]);
-  const updateSelectedUserId = (0, import_react107.useCallback)(
+  const updateSelectedUserId = (0, import_react108.useCallback)(
     (userId) => {
       if (!isControlled) {
         setUncontrolledValue(userId);
@@ -41028,14 +41097,14 @@ function UserPicker({
     },
     [isControlled, onChangeUserId]
   );
-  const handleSelectItem = (0, import_react107.useCallback)(
+  const handleSelectItem = (0, import_react108.useCallback)(
     (item) => {
       updateSelectedUserId(item.value);
       onSelectUser?.(usersById.get(item.value));
     },
     [updateSelectedUserId, onSelectUser, usersById]
   );
-  return /* @__PURE__ */ import_react107.default.createElement(
+  return /* @__PURE__ */ import_react108.default.createElement(
     Combobox,
     {
       ...rest,
@@ -41059,7 +41128,7 @@ function createUserMenuItem(user) {
   return {
     value: user.id,
     title,
-    icon: /* @__PURE__ */ import_react107.default.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ import_react107.default.createElement(
+    icon: /* @__PURE__ */ import_react108.default.createElement("div", { className: "n-relative n-w-[15px] n-h-[15px]" }, /* @__PURE__ */ import_react108.default.createElement(
       Avatar,
       {
         size: 15 + overflow * 2,
@@ -41078,15 +41147,15 @@ function createUserMenuItem(user) {
 }
 // src/components/UserPointer.tsx
-var import_react108 = __toESM(require("react"));
-var UserPointerContainer = (0, import_react108.memo)(function UserPointerContainer2({
+var import_react109 = __toESM(require("react"));
+var UserPointerContainer = (0, import_react109.memo)(function UserPointerContainer2({
   point,
   visible,
   children,
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react109.default.createElement(
     "div",
     {
       style: {
@@ -41105,7 +41174,7 @@ var UserPointerContainer = (0, import_react108.memo)(function UserPointerContain
     children
   );
 });
-var UserNameTag = (0, import_react108.memo)(function UserNameTag2({
+var UserNameTag = (0, import_react109.memo)(function UserNameTag2({
   backgroundColor,
   className,
   style: style2,
@@ -41114,7 +41183,7 @@ var UserNameTag = (0, import_react108.memo)(function UserNameTag2({
   size: size4 = "medium",
   bordered = true
 }) {
-  return /* @__PURE__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react109.default.createElement(
     "span",
     {
       className: cx(
@@ -41133,14 +41202,14 @@ var UserNameTag = (0, import_react108.memo)(function UserNameTag2({
     children
   );
 });
-var UserPointerIcon = (0, import_react108.memo)(function PointerIcon({
+var UserPointerIcon = (0, import_react109.memo)(function PointerIcon({
   size: size4,
   color = "black",
   className,
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react109.default.createElement(
     "svg",
     {
       width: size4,
@@ -41155,7 +41224,7 @@ var UserPointerIcon = (0, import_react108.memo)(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ import_react108.default.createElement(
+    /* @__PURE__ */ import_react109.default.createElement(
       "polygon",
       {
         points,
@@ -41168,7 +41237,7 @@ var UserPointerIcon = (0, import_react108.memo)(function PointerIcon({
 });
 var POINTER_SIZE = 12;
 var POINTER_OVERLAP = 6;
-var UserPointer = (0, import_react108.memo)(function UserPointer2({
+var UserPointer = (0, import_react109.memo)(function UserPointer2({
   userId,
   name,
   visible = true,
@@ -41181,22 +41250,22 @@ var UserPointer = (0, import_react108.memo)(function UserPointer2({
   labelSize = "medium",
   bordered = true
 }) {
-  const userBackgroundColor = (0, import_react108.useMemo)(
+  const userBackgroundColor = (0, import_react109.useMemo)(
     () => backgroundColor ?? colorFromString(userId ?? name ?? ""),
     [backgroundColor, userId, name]
   );
-  const pointerOverlapStyle = (0, import_react108.useMemo)(
+  const pointerOverlapStyle = (0, import_react109.useMemo)(
     () => ({
       marginRight: `-${POINTER_OVERLAP}px`,
       marginBottom: `-${POINTER_OVERLAP}px`
     }),
     []
   );
-  const nameTagOverlapStyle = (0, import_react108.useMemo)(
+  const nameTagOverlapStyle = (0, import_react109.useMemo)(
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ import_react108.default.createElement(
+  return /* @__PURE__ */ import_react109.default.createElement(
     UserPointerContainer,
     {
       point,
@@ -41204,14 +41273,14 @@ var UserPointer = (0, import_react108.memo)(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ import_react108.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react108.default.createElement(
+    name && /* @__PURE__ */ import_react109.default.createElement("div", { className: "n-relative" }, showPointerIcon && /* @__PURE__ */ import_react109.default.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ import_react108.default.createElement(
+    ), /* @__PURE__ */ import_react109.default.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -41227,10 +41296,10 @@ var UserPointer = (0, import_react108.memo)(function UserPointer2({
 // src/components/workspace/WorkspaceLayout.tsx
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
-var import_react120 = __toESM(require("react"));
+var import_react121 = __toESM(require("react"));
 // src/components/OverlayToolbar.tsx
-var import_react109 = __toESM(require("react"));
+var import_react110 = __toESM(require("react"));
 var panelClassName = "n-pointer-events-auto n-inline-flex n-items-center n-gap-toolbar-separator n-rounded-3xl n-border n-border-divider n-bg-sidebar-background n-px-3 n-py-2.5 n-shadow-2xl";
 function OverlayToolbar({
   left,
@@ -41240,7 +41309,7 @@ function OverlayToolbar({
   style: style2
 }) {
   const resolvedLayout = overlayLayout === "topLeftTopRight" ? "topLeftTopRight" : "bottomCenterTopRight";
-  const panelStyle = (0, import_react109.useMemo)(
+  const panelStyle = (0, import_react110.useMemo)(
     () => ({
       ...toolbarTransparentStyle,
       ...style2
@@ -41249,7 +41318,7 @@ function OverlayToolbar({
   );
   const renderLeftPanel = (overlayId) => {
     if (!left) return null;
-    return /* @__PURE__ */ import_react109.default.createElement(
+    return /* @__PURE__ */ import_react110.default.createElement(
       "div",
       {
         className: panelClassName,
@@ -41259,7 +41328,7 @@ function OverlayToolbar({
       left
     );
   };
-  return /* @__PURE__ */ import_react109.default.createElement(import_react109.default.Fragment, null, resolvedLayout === "bottomCenterTopRight" ? /* @__PURE__ */ import_react109.default.createElement(
+  return /* @__PURE__ */ import_react110.default.createElement(import_react110.default.Fragment, null, resolvedLayout === "bottomCenterTopRight" ? /* @__PURE__ */ import_react110.default.createElement(
     "div",
     {
       className: cx(
@@ -41268,7 +41337,7 @@ function OverlayToolbar({
       )
     },
     renderLeftPanel("noya-toolbar-bottom-center")
-  ) : /* @__PURE__ */ import_react109.default.createElement(
+  ) : /* @__PURE__ */ import_react110.default.createElement(
     "div",
     {
       className: cx(
@@ -41277,7 +41346,7 @@ function OverlayToolbar({
       )
     },
     renderLeftPanel("noya-toolbar-top-left")
-  ), right && /* @__PURE__ */ import_react109.default.createElement(
+  ), right && /* @__PURE__ */ import_react110.default.createElement(
     "div",
     {
       className: cx(
@@ -41285,7 +41354,7 @@ function OverlayToolbar({
         className
       )
     },
-    /* @__PURE__ */ import_react109.default.createElement(
+    /* @__PURE__ */ import_react110.default.createElement(
       "div",
       {
         className: panelClassName,
@@ -41298,7 +41367,7 @@ function OverlayToolbar({
 }
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var import_react113 = __toESM(require("react"));
+var import_react114 = __toESM(require("react"));
 // src/components/workspace/constants.ts
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -41307,17 +41376,17 @@ var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
 var CONTENT_AREA_ID = "editor-2-content-area";
 // src/components/workspace/VerticalTabMenu.tsx
-var import_react112 = __toESM(require("react"));
+var import_react113 = __toESM(require("react"));
 // src/components/Toolbar.tsx
 var import_noya_keymap6 = require("@noya-app/noya-keymap");
-var import_react111 = __toESM(require("react"));
+var import_react112 = __toESM(require("react"));
 // src/components/ToolbarDrawer.tsx
-var import_react110 = __toESM(require("react"));
-var ToolbarDrawer = (0, import_react110.memo)(
-  (0, import_react110.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
-    return /* @__PURE__ */ import_react110.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react110.default.createElement(
+var import_react111 = __toESM(require("react"));
+var ToolbarDrawer = (0, import_react111.memo)(
+  (0, import_react111.forwardRef)(function ToolbarDrawer2({ children, trigger, sideOffset = 8 }, ref) {
+    return /* @__PURE__ */ import_react111.default.createElement("div", { className: "n-relative", ref }, /* @__PURE__ */ import_react111.default.createElement(
       "div",
       {
         className: "n-absolute n-bottom-full n-left-1/2 -n-translate-x-1/2 n-rounded-t-lg n-border n-border-toolbar-drawer-border n-border-b-transparent n-bg-toolbar-drawer-background -n-z-10",
@@ -41333,21 +41402,21 @@ var ToolbarDrawer = (0, import_react110.memo)(
 // src/components/Toolbar.tsx
 var SIDE_OFFSET = 6;
-var ToolbarMenuContext = (0, import_react111.createContext)({});
+var ToolbarMenuContext = (0, import_react112.createContext)({});
 var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem,
   onPopoverOpenChange
 }) {
-  const [open2, setOpen] = import_react111.default.useState(false);
-  const handleOpenChange = import_react111.default.useCallback(
+  const [open2, setOpen] = import_react112.default.useState(false);
+  const handleOpenChange = import_react112.default.useCallback(
     (newOpen) => {
       setOpen(newOpen);
       onPopoverOpenChange?.(newOpen);
     },
     [onPopoverOpenChange]
   );
-  return /* @__PURE__ */ import_react111.default.createElement(
+  return /* @__PURE__ */ import_react112.default.createElement(
     DropdownMenu,
     {
       open: open2,
@@ -41360,7 +41429,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ import_react111.default.createElement(
+    /* @__PURE__ */ import_react112.default.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -41376,7 +41445,7 @@ var ToolbarShortcut = ({
   shortcut,
   label
 }) => {
-  return /* @__PURE__ */ import_react111.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react111.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react111.default.createElement(KeyboardShortcut, { shortcut }));
+  return /* @__PURE__ */ import_react112.default.createElement("div", { className: "n-flex n-items-center" }, label, /* @__PURE__ */ import_react112.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react112.default.createElement(KeyboardShortcut, { shortcut }));
 };
 var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
   item,
@@ -41393,20 +41462,20 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     popoverClassName,
     triggerProps: buttonProps
   } = item;
-  const [open2, setOpen] = import_react111.default.useState(false);
-  const handleOpenChange = import_react111.default.useCallback(
+  const [open2, setOpen] = import_react112.default.useState(false);
+  const handleOpenChange = import_react112.default.useCallback(
     (newOpen) => {
       setOpen(newOpen);
       onPopoverOpenChange?.(newOpen);
     },
     [onPopoverOpenChange]
   );
-  const { useDialogOnSmallScreen, isSmallScreen, openDialog } = (0, import_react111.useContext)(ToolbarMenuContext);
+  const { useDialogOnSmallScreen, isSmallScreen, openDialog } = (0, import_react112.useContext)(ToolbarMenuContext);
   const shouldUseDialog = useDialogOnSmallScreen && isSmallScreen && openDialog;
-  const handleOpenDialog = import_react111.default.useCallback(() => {
+  const handleOpenDialog = import_react112.default.useCallback(() => {
     if (!openDialog) return;
     handleOpenChange(true);
-    const dialogContent = typeof itemContent === "function" ? (props) => /* @__PURE__ */ import_react111.default.createElement("div", { className: "-n-m-3" }, itemContent(props)) : /* @__PURE__ */ import_react111.default.createElement("div", { className: "-n-m-3" }, itemContent);
+    const dialogContent = typeof itemContent === "function" ? (props) => /* @__PURE__ */ import_react112.default.createElement("div", { className: "-n-m-3" }, itemContent(props)) : /* @__PURE__ */ import_react112.default.createElement("div", { className: "-n-m-3" }, itemContent);
     const dialog = openDialog({
       title,
       className: "n-w-[90vw] n-max-w-[360px]",
@@ -41414,7 +41483,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     });
     dialog.then(() => handleOpenChange(false));
   }, [openDialog, itemContent, title, handleOpenChange]);
-  const trigger = /* @__PURE__ */ import_react111.default.createElement(
+  const trigger = /* @__PURE__ */ import_react112.default.createElement(
     Button,
     {
       disabled: disabled2,
@@ -41427,7 +41496,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     title
   );
   if (shouldUseDialog) {
-    return tooltip && !open2 ? /* @__PURE__ */ import_react111.default.createElement(
+    return tooltip && !open2 ? /* @__PURE__ */ import_react112.default.createElement(
       Tooltip,
       {
         sideOffset: SIDE_OFFSET,
@@ -41438,7 +41507,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
       trigger
     ) : trigger;
   }
-  const content = /* @__PURE__ */ import_react111.default.createElement("span", null, /* @__PURE__ */ import_react111.default.createElement(
+  const content = /* @__PURE__ */ import_react112.default.createElement("span", null, /* @__PURE__ */ import_react112.default.createElement(
     Popover,
     {
       open: open2,
@@ -41452,7 +41521,7 @@ var ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover2({
     },
     typeof itemContent === "function" ? itemContent({ close: () => handleOpenChange(false) }) : itemContent
   ));
-  return tooltip && !open2 ? /* @__PURE__ */ import_react111.default.createElement(
+  return tooltip && !open2 ? /* @__PURE__ */ import_react112.default.createElement(
     Tooltip,
     {
       sideOffset: SIDE_OFFSET,
@@ -41472,7 +41541,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   displayFilter
 }) {
   const isActive = item.checked || activeValue === item.value;
-  const content = /* @__PURE__ */ import_react111.default.createElement(
+  const content = /* @__PURE__ */ import_react112.default.createElement(
     Button,
     {
       as,
@@ -41489,7 +41558,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     displayFilter === "iconOnly" ? void 0 : item.title
   );
   const tooltip = item.tooltip ?? (displayFilter === "iconOnly" && item.title ? item.title : void 0);
-  return item.drawer && isActive ? /* @__PURE__ */ import_react111.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react111.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
+  return item.drawer && isActive ? /* @__PURE__ */ import_react112.default.createElement(ToolbarDrawer, { trigger: content }, item.drawer) : tooltip ? /* @__PURE__ */ import_react112.default.createElement(Tooltip, { sideOffset: SIDE_OFFSET, content: tooltip, side: tooltipSide }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -41502,14 +41571,14 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   dividerOverflow: dividerOverflowProp,
   onPopoverOpenChange
 }) {
-  const { dividerOverflow: contextDividerOverflow } = (0, import_react111.useContext)(ToolbarMenuContext);
+  const { dividerOverflow: contextDividerOverflow } = (0, import_react112.useContext)(ToolbarMenuContext);
   const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ import_react111.default.createElement(DividerVertical, { overflow: dividerOverflow });
+    return /* @__PURE__ */ import_react112.default.createElement(DividerVertical, { overflow: dividerOverflow });
   }
   if (item.type === "popover") {
-    return /* @__PURE__ */ import_react111.default.createElement(
+    return /* @__PURE__ */ import_react112.default.createElement(
       ToolbarMenuPopover,
       {
         item,
@@ -41519,7 +41588,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
     );
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ import_react111.default.createElement(
+    return /* @__PURE__ */ import_react112.default.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -41531,7 +41600,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ import_react111.default.createElement(
+  return /* @__PURE__ */ import_react112.default.createElement(
     ToolbarMenuDropdown,
     {
       item,
@@ -41551,8 +41620,8 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   dividerOverflow,
   onPopoverOpenChange
 }) {
-  return /* @__PURE__ */ import_react111.default.createElement(import_react111.default.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ import_react111.default.createElement(
+  return /* @__PURE__ */ import_react112.default.createElement(import_react112.default.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ import_react112.default.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -41571,7 +41640,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
 });
 function useBindKeyboardShortcutsForMenuItems(items, onSelectMenuItem) {
   return (0, import_noya_keymap6.useKeyboardShortcuts)(
-    import_react111.default.useMemo(
+    import_react112.default.useMemo(
       () => onSelectMenuItem ? getKeyboardShortcutsForMenuItems(items, onSelectMenuItem) : {},
       [items, onSelectMenuItem]
     )
@@ -41586,7 +41655,7 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = import_react111.default.useMemo(
+  const allMenuItems = import_react112.default.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
@@ -41594,11 +41663,11 @@ function Toolbar({
     allMenuItems,
     shouldBindKeyboardShortcuts ? onSelectMenuItem : void 0
   );
-  return /* @__PURE__ */ import_react111.default.createElement(
+  return /* @__PURE__ */ import_react112.default.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react111.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react111.default.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ import_react112.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react112.default.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
@@ -41606,7 +41675,7 @@ function Toolbar({
           dividerOverflow
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react111.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react111.default.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ import_react112.default.createElement("div", { className: "n-flex n-gap-2" }, /* @__PURE__ */ import_react112.default.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -41627,19 +41696,19 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   onChange,
   tooltipSide
 }) {
-  const style2 = (0, import_react112.useMemo)(() => {
+  const style2 = (0, import_react113.useMemo)(() => {
     return {
       [cssVarNames.colors.inputBackground]: "transparent",
       [cssVarNames.colors.buttonBackground]: "transparent"
     };
   }, []);
-  return /* @__PURE__ */ import_react112.default.createElement(
+  return /* @__PURE__ */ import_react113.default.createElement(
     "div",
     {
       className: "n-w-[calc(var(--n-toolbar-height)+1px)] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
       style: style2
     },
-    /* @__PURE__ */ import_react112.default.createElement(
+    /* @__PURE__ */ import_react113.default.createElement(
       ToolbarMenu,
       {
         items,
@@ -41667,12 +41736,12 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   onChangeLeftTab,
   compactDrawerMenu
 }) {
-  const portalContainer = (0, import_react113.useRef)(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react113.useState)({
+  const portalContainer = (0, import_react114.useRef)(null);
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react114.useState)({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = (0, import_react113.useMemo)(
+  const allTabItems = (0, import_react114.useMemo)(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
@@ -41680,16 +41749,16 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = (0, import_react113.useMemo)(
+  const allSelectableTabItems = (0, import_react114.useMemo)(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
   const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = (0, import_react113.useMemo)(
+  const leftSelectableTabItems = (0, import_react114.useMemo)(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = (0, import_react113.useMemo)(
+  const rightSelectableTabItems = (0, import_react114.useMemo)(
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
@@ -41726,14 +41795,14 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
   } : { activeValue: void 0, isSidebarCollapsed: true };
-  return /* @__PURE__ */ import_react113.default.createElement(
+  return /* @__PURE__ */ import_react114.default.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react113.default.createElement(import_react113.default.Fragment, null, /* @__PURE__ */ import_react113.default.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react114.default.createElement(import_react114.default.Fragment, null, /* @__PURE__ */ import_react114.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -41742,8 +41811,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         isSidebarCollapsed,
         onChange: (value) => handleSelectTab(value)
       }
-    ), /* @__PURE__ */ import_react113.default.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, allSelectableTabItems[0] && /* @__PURE__ */ import_react113.default.createElement(
+    ), /* @__PURE__ */ import_react114.default.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ import_react114.default.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, allSelectableTabItems[0] && /* @__PURE__ */ import_react114.default.createElement(
       Button,
       {
         variant: "none",
@@ -41770,8 +41839,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       }
     )),
-    /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ import_react113.default.createElement(
+    /* @__PURE__ */ import_react114.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
+    leftPanel && /* @__PURE__ */ import_react114.default.createElement(
       Drawer,
       {
         modal: false,
@@ -41793,7 +41862,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       },
       leftPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react113.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react114.default.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -41820,18 +41889,18 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 });
 // src/components/workspace/PanelWorkspaceLayout.tsx
-var import_react118 = __toESM(require("react"));
+var import_react119 = __toESM(require("react"));
 // src/components/resizablePanels/Panel.tsx
-var import_react115 = __toESM(require("react"));
+var import_react116 = __toESM(require("react"));
 // src/components/resizablePanels/PanelGroupContext.tsx
-var import_react114 = require("react");
-var PanelGroupContext = (0, import_react114.createContext)(
+var import_react115 = require("react");
+var PanelGroupContext = (0, import_react115.createContext)(
   null
 );
 function usePanelGroupContext() {
-  const context = (0, import_react114.useContext)(PanelGroupContext);
+  const context = (0, import_react115.useContext)(PanelGroupContext);
   if (!context) {
     throw new Error("Panel must be used within a PanelGroup");
   }
@@ -41839,9 +41908,9 @@ function usePanelGroupContext() {
 }
 // src/components/resizablePanels/Panel.tsx
-var Panel = (0, import_react115.forwardRef)(
+var Panel = (0, import_react116.forwardRef)(
   function Panel2({ id: propId, order, className, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, children }, ref) {
-    const generatedId = (0, import_react115.useId)();
+    const generatedId = (0, import_react116.useId)();
     const id = propId ?? generatedId;
     const context = usePanelGroupContext();
     const {
@@ -41852,7 +41921,7 @@ var Panel = (0, import_react115.forwardRef)(
       collapsePanel,
       isPanelExpanded
     } = context;
-    (0, import_react115.useEffect)(() => {
+    (0, import_react116.useEffect)(() => {
       registerPanel({
         id,
         order,
@@ -41868,7 +41937,7 @@ var Panel = (0, import_react115.forwardRef)(
     }, [id, order, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, registerPanel, unregisterPanel]);
     const size4 = getPanelSize(id);
     const isFlexPanel = defaultSize === void 0;
-    (0, import_react115.useImperativeHandle)(
+    (0, import_react116.useImperativeHandle)(
       ref,
       () => ({
         expand: () => expandPanel(id),
@@ -41881,7 +41950,7 @@ var Panel = (0, import_react115.forwardRef)(
     if (size4 === 0 && !isFlexPanel) {
       return null;
     }
-    return /* @__PURE__ */ import_react115.default.createElement(
+    return /* @__PURE__ */ import_react116.default.createElement(
       "div",
       {
         "data-panel-id": id,
@@ -41896,7 +41965,7 @@ var Panel = (0, import_react115.forwardRef)(
 );
 // src/components/resizablePanels/PanelGroup.tsx
-var import_react116 = __toESM(require("react"));
+var import_react117 = __toESM(require("react"));
 function getStorageKey(autoSaveId) {
   return `noya-panels:${autoSaveId}`;
 }
@@ -41914,19 +41983,19 @@ function saveSizes(autoSaveId, sizes) {
   if (!autoSaveId) return;
   clientStorage.setItem(getStorageKey(autoSaveId), JSON.stringify(sizes));
 }
-var PanelGroup = (0, import_react116.forwardRef)(
+var PanelGroup = (0, import_react117.forwardRef)(
   function PanelGroup2({ id, className, direction, autoSaveId, onLayout, children }, ref) {
-    const containerRef = (0, import_react116.useRef)(null);
+    const containerRef = (0, import_react117.useRef)(null);
     const containerSize = useSize(containerRef);
     const containerWidth = containerSize?.width ?? 0;
-    const [panels, setPanels] = (0, import_react116.useState)(/* @__PURE__ */ new Map());
-    const panelsRef = (0, import_react116.useRef)(panels);
+    const [panels, setPanels] = (0, import_react117.useState)(/* @__PURE__ */ new Map());
+    const panelsRef = (0, import_react117.useRef)(panels);
     panelsRef.current = panels;
-    const [resizing, setResizing] = (0, import_react116.useState)(null);
-    const sortedPanels = (0, import_react116.useMemo)(() => {
+    const [resizing, setResizing] = (0, import_react117.useState)(null);
+    const sortedPanels = (0, import_react117.useMemo)(() => {
       return Array.from(panels.values()).sort((a, b) => a.order - b.order);
     }, [panels]);
-    const flexPanelId = (0, import_react116.useMemo)(() => {
+    const flexPanelId = (0, import_react117.useMemo)(() => {
       for (const panel of sortedPanels) {
         if (panel.defaultSize === void 0) {
           return panel.id;
@@ -41934,7 +42003,7 @@ var PanelGroup = (0, import_react116.forwardRef)(
       }
       return null;
     }, [sortedPanels]);
-    const calculateLayout = (0, import_react116.useCallback)(
+    const calculateLayout = (0, import_react117.useCallback)(
       (panelStates, width) => {
         if (width === 0) return panelStates;
         const sorted = Array.from(panelStates.values()).sort(
@@ -41959,18 +42028,18 @@ var PanelGroup = (0, import_react116.forwardRef)(
       },
       []
     );
-    (0, import_react116.useEffect)(() => {
+    (0, import_react117.useEffect)(() => {
       if (containerWidth > 0 && panels.size > 0) {
         setPanels((prev) => calculateLayout(prev, containerWidth));
       }
     }, [containerWidth, calculateLayout, panels.size]);
-    (0, import_react116.useEffect)(() => {
+    (0, import_react117.useEffect)(() => {
       if (onLayout && sortedPanels.length > 0) {
         const sizes = sortedPanels.map((p) => p.collapsed ? 0 : p.size);
         onLayout(sizes);
       }
     }, [onLayout, sortedPanels]);
-    const registerPanel = (0, import_react116.useCallback)(
+    const registerPanel = (0, import_react117.useCallback)(
       (panel) => {
         setPanels((prev) => {
           const savedSizes = loadSavedSizes(autoSaveId);
@@ -41990,26 +42059,26 @@ var PanelGroup = (0, import_react116.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const unregisterPanel = (0, import_react116.useCallback)((panelId) => {
+    const unregisterPanel = (0, import_react117.useCallback)((panelId) => {
       setPanels((prev) => {
         const newPanels = new Map(prev);
         newPanels.delete(panelId);
         return newPanels;
       });
     }, []);
-    const getPanelSize = (0, import_react116.useCallback)(
+    const getPanelSize = (0, import_react117.useCallback)(
       (panelId) => {
         return panels.get(panelId)?.size ?? 0;
       },
       [panels]
     );
-    const getPanelIndex = (0, import_react116.useCallback)(
+    const getPanelIndex = (0, import_react117.useCallback)(
       (panelId) => {
         return sortedPanels.findIndex((p) => p.id === panelId);
       },
       [sortedPanels]
     );
-    const setPanelSize = (0, import_react116.useCallback)(
+    const setPanelSize = (0, import_react117.useCallback)(
       (panelId, size4) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42037,7 +42106,7 @@ var PanelGroup = (0, import_react116.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const expandPanel = (0, import_react116.useCallback)(
+    const expandPanel = (0, import_react117.useCallback)(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42062,7 +42131,7 @@ var PanelGroup = (0, import_react116.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const collapsePanel = (0, import_react116.useCallback)(
+    const collapsePanel = (0, import_react117.useCallback)(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42086,14 +42155,14 @@ var PanelGroup = (0, import_react116.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const isPanelExpanded = (0, import_react116.useCallback)(
+    const isPanelExpanded = (0, import_react117.useCallback)(
       (panelId) => {
         const panel = panels.get(panelId);
         return panel ? !panel.collapsed : false;
       },
       [panels]
     );
-    const startResize = (0, import_react116.useCallback)(
+    const startResize = (0, import_react117.useCallback)(
       (handleIndex, startX) => {
         const startSizes = sortedPanels.map((p) => p.size);
         setResizing({
@@ -42104,7 +42173,7 @@ var PanelGroup = (0, import_react116.forwardRef)(
       },
       [sortedPanels]
     );
-    (0, import_react116.useEffect)(() => {
+    (0, import_react117.useEffect)(() => {
       if (!resizing) return;
       const handleMouseMove = (e) => {
         const delta = e.clientX - resizing.startX;
@@ -42193,7 +42262,7 @@ var PanelGroup = (0, import_react116.forwardRef)(
       containerWidth,
       flexPanelId
     ]);
-    (0, import_react116.useImperativeHandle)(ref, () => ({
+    (0, import_react117.useImperativeHandle)(ref, () => ({
       getLayout: () => sortedPanels.map((p) => p.size),
       setLayout: (sizes) => {
         setPanels((prev) => {
@@ -42211,7 +42280,7 @@ var PanelGroup = (0, import_react116.forwardRef)(
         });
       }
     }));
-    const contextValue = (0, import_react116.useMemo)(
+    const contextValue = (0, import_react117.useMemo)(
       () => ({
         registerPanel,
         unregisterPanel,
@@ -42237,7 +42306,7 @@ var PanelGroup = (0, import_react116.forwardRef)(
         containerWidth
       ]
     );
-    return /* @__PURE__ */ import_react116.default.createElement(PanelGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react116.default.createElement(
+    return /* @__PURE__ */ import_react117.default.createElement(PanelGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react117.default.createElement(
       "div",
       {
         ref: containerRef,
@@ -42255,15 +42324,15 @@ var PanelGroup = (0, import_react116.forwardRef)(
 );
 // src/components/resizablePanels/PanelResizeHandle.tsx
-var import_react117 = __toESM(require("react"));
+var import_react118 = __toESM(require("react"));
 function PanelResizeHandle({
   className,
   disabled: disabled2,
   index: index2
 }) {
-  const context = (0, import_react117.useContext)(PanelGroupContext);
-  const handleRef = (0, import_react117.useRef)(null);
-  const handleMouseDown = (0, import_react117.useCallback)(
+  const context = (0, import_react118.useContext)(PanelGroupContext);
+  const handleRef = (0, import_react118.useRef)(null);
+  const handleMouseDown = (0, import_react118.useCallback)(
     (e) => {
       if (disabled2 || !context) return;
       e.preventDefault();
@@ -42274,7 +42343,7 @@ function PanelResizeHandle({
   if (!context) {
     return null;
   }
-  return /* @__PURE__ */ import_react117.default.createElement(
+  return /* @__PURE__ */ import_react118.default.createElement(
     "div",
     {
       ref: handleRef,
@@ -42287,7 +42356,7 @@ function PanelResizeHandle({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ import_react117.default.createElement(
+    /* @__PURE__ */ import_react118.default.createElement(
       "div",
       {
         style: {
@@ -42321,17 +42390,17 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   onChangeRightTab,
   compactDrawerMenu
 }) {
-  const panelGroupRef = (0, import_react118.useRef)(null);
-  const autoSaveId = (0, import_react118.useMemo)(() => {
+  const panelGroupRef = (0, import_react119.useRef)(null);
+  const autoSaveId = (0, import_react119.useMemo)(() => {
     return autoSavePrefix ? `${autoSavePrefix}--v3--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
   }, [autoSavePrefix]);
-  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = (0, import_react118.useState)(
+  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = (0, import_react119.useState)(
     leftSidebarOptions.defaultCollapsed ?? false
   );
-  const [rightSidebarCollapsed, setRightSidebarCollapsed] = (0, import_react118.useState)(
+  const [rightSidebarCollapsed, setRightSidebarCollapsed] = (0, import_react119.useState)(
     rightSidebarOptions.defaultCollapsed ?? false
   );
-  const handleLayoutChange = (0, import_react118.useCallback)(
+  const handleLayoutChange = (0, import_react119.useCallback)(
     (sizes) => {
       const leftIndex = leftPanel ? 0 : -1;
       const rightIndex = rightPanel ? leftPanel ? 2 : 1 : -1;
@@ -42344,7 +42413,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftPanel, rightPanel]
   );
-  const handleLeftTabChange = (0, import_react118.useCallback)(
+  const handleLeftTabChange = (0, import_react119.useCallback)(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -42361,7 +42430,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = (0, import_react118.useCallback)(
+  const handleRightTabChange = (0, import_react119.useCallback)(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -42381,7 +42450,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems && // When compact drawer UI is enabled, only show the rail when the
   // sidebar is collapsed (for large screens/panel layout).
   (!compactDrawerMenu || leftSidebarCollapsed);
-  return /* @__PURE__ */ import_react118.default.createElement(
+  return /* @__PURE__ */ import_react119.default.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -42391,7 +42460,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ import_react118.default.createElement(import_react118.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react118.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react119.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -42400,7 +42469,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react118.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react118.default.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react119.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -42414,8 +42483,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         defaultCollapsed: leftSidebarOptions.defaultCollapsed
       },
       leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ import_react118.default.createElement(PanelResizeHandle, { index: 0, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
-    /* @__PURE__ */ import_react118.default.createElement(
+    ), /* @__PURE__ */ import_react119.default.createElement(PanelResizeHandle, { index: 0, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+    /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -42424,7 +42493,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react118.default.createElement(import_react118.default.Fragment, null, /* @__PURE__ */ import_react118.default.createElement(PanelResizeHandle, { index: 1, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react118.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(PanelResizeHandle, { index: 1, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -42438,7 +42507,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         defaultCollapsed: rightSidebarOptions.defaultCollapsed
       },
       rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react118.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react118.default.createElement(
+    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react119.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react119.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "left",
@@ -42460,11 +42529,11 @@ function renderPanelChildren(fn, props) {
 }
 // src/components/workspace/WorkspaceSideContext.tsx
-var import_react119 = require("react");
-var WorkspaceSideContext = (0, import_react119.createContext)({});
+var import_react120 = require("react");
+var WorkspaceSideContext = (0, import_react120.createContext)({});
 var WorkspaceSideProvider = WorkspaceSideContext.Provider;
 function useWorkspaceSide() {
-  return (0, import_react119.useContext)(WorkspaceSideContext);
+  return (0, import_react120.useContext)(WorkspaceSideContext);
 }
 // src/components/workspace/WorkspaceLayout.tsx
@@ -42531,7 +42600,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   theme,
   compactDrawerMenu
 }, forwardedRef) {
-  const containerRef = import_react120.default.useRef(null);
+  const containerRef = import_react121.default.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -42547,8 +42616,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   const rightSidebarMinPixels = toPixels(rightMinSize);
   const rightSidebarMaxPixels = toPixels(rightMaxSize);
   const rightSidebarInitialPixels = toPixels(rightInitialSize) ?? 280;
-  const leftSidebarRef = (0, import_react120.useRef)(null);
-  const rightSidebarRef = (0, import_react120.useRef)(null);
+  const leftSidebarRef = (0, import_react121.useRef)(null);
+  const rightSidebarRef = (0, import_react121.useRef)(null);
   const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled({
     value: leftTabValueProp,
     onChange: onChangeLeftTab,
@@ -42559,7 +42628,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     onChange: onChangeRightTab,
     defaultValue: getFirstTabValue(rightTabItems, "")
   });
-  (0, import_react120.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react121.useImperativeHandle)(forwardedRef, () => ({
     setLeftExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -42616,56 +42685,56 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     }
   });
   const isDrawerActive = sideType === "drawer" || sideType === "auto" && parentSize.width <= sideTypeBreakpoint;
-  const closeLeftSidebar = (0, import_react120.useCallback)(() => {
+  const closeLeftSidebar = (0, import_react121.useCallback)(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = (0, import_react120.useCallback)(() => {
+  const closeRightSidebar = (0, import_react121.useCallback)(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = (0, import_react120.useMemo)(() => {
+  const leftChildrenProps = (0, import_react121.useMemo)(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = (0, import_react120.useMemo)(() => {
+  const rightChildrenProps = (0, import_react121.useMemo)(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = (0, import_react120.useMemo)(() => {
+  const leftSidebarProviderValue = (0, import_react121.useMemo)(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = (0, import_react120.useMemo)(() => {
+  const rightSidebarProviderValue = (0, import_react121.useMemo)(() => {
     return {
       closeSidebar: closeRightSidebar
     };
   }, [closeRightSidebar]);
-  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react120.default.createElement(
+  const leftPanel = left && leftVisible !== false ? /* @__PURE__ */ import_react121.default.createElement(
     PanelInner,
     {
       style: leftStyle,
       className: cx("n-bg-sidebar-background n-flex-col", leftClassName)
     },
-    /* @__PURE__ */ import_react120.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
+    /* @__PURE__ */ import_react121.default.createElement(WorkspaceSideProvider, { value: leftSidebarProviderValue }, leftTabValue ? renderPanelChildren(left, leftChildrenProps) : null)
   ) : null;
-  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react120.default.createElement(
+  const rightPanel = right && rightVisible !== false ? /* @__PURE__ */ import_react121.default.createElement(
     PanelInner,
     {
       style: rightStyle,
       className: cx("n-bg-sidebar-background n-flex-col", rightClassName)
     },
-    /* @__PURE__ */ import_react120.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
+    /* @__PURE__ */ import_react121.default.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
-  const centerPanel = /* @__PURE__ */ import_react120.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = (0, import_react120.useMemo)(
+  const centerPanel = /* @__PURE__ */ import_react121.default.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
+  const leftSidebarOptions = (0, import_react121.useMemo)(
     () => ({
       minSize: leftSidebarMinPixels,
       maxSize: leftSidebarMaxPixels,
@@ -42683,7 +42752,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = (0, import_react120.useMemo)(
+  const rightSidebarOptions = (0, import_react121.useMemo)(
     () => ({
       minSize: rightSidebarMinPixels,
       maxSize: rightSidebarMaxPixels,
@@ -42704,7 +42773,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   const LayoutComponent = sideType === "panel" ? PanelWorkspaceLayout : sideType === "drawer" ? DrawerWorkspaceLayout : parentSize.width > sideTypeBreakpoint ? PanelWorkspaceLayout : DrawerWorkspaceLayout;
   const readyToRender = detectSize === "window" || containerSize && containerSize.width > 0;
   const isOverlay = toolbarVariant === "overlay";
-  return /* @__PURE__ */ import_react120.default.createElement(
+  return /* @__PURE__ */ import_react121.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -42717,7 +42786,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       "data-theme": theme
     },
     !isOverlay && toolbar,
-    /* @__PURE__ */ import_react120.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react120.default.createElement(import_react120.default.Fragment, null, /* @__PURE__ */ import_react120.default.createElement(
+    /* @__PURE__ */ import_react121.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react121.default.createElement(import_react121.default.Fragment, null, /* @__PURE__ */ import_react121.default.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -42736,7 +42805,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         rightSidebarRef,
         compactDrawerMenu
       }
-    ), isOverlay && /* @__PURE__ */ import_react120.default.createElement(
+    ), isOverlay && /* @__PURE__ */ import_react121.default.createElement(
       OverlayToolbar,
       {
         left: overlayToolbarLeft,
@@ -42746,12 +42815,12 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     )))
   );
 });
-var PanelInner = (0, import_react120.memo)(function PanelInner2({
+var PanelInner = (0, import_react121.memo)(function PanelInner2({
   children,
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ import_react120.default.createElement(
+  return /* @__PURE__ */ import_react121.default.createElement(
     "div",
     {
       style: style2,
@@ -42798,9 +42867,9 @@ function usePlatformModKey() {
 }
 // src/hooks/useTheme.ts
-var import_react121 = require("react");
+var import_react122 = require("react");
 function useTheme() {
-  const [theme, setTheme] = (0, import_react121.useState)("light");
+  const [theme, setTheme] = (0, import_react122.useState)("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -42812,7 +42881,7 @@ function useTheme() {
         break;
     }
   };
-  (0, import_react121.useEffect)(() => {
+  (0, import_react122.useEffect)(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -43004,8 +43073,8 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react122 = __toESM(require("react"));
-var Section2 = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react122.default.createElement(
+var import_react123 = __toESM(require("react"));
+var Section2 = (0, import_react123.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react123.default.createElement(
   "div",
   {
     ref,
@@ -43013,8 +43082,8 @@ var Section2 = (0, import_react122.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var SectionHeader2 = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react122.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
-var Title = (0, import_react122.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react122.default.createElement(
+var SectionHeader2 = (0, import_react123.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react123.default.createElement("div", { ref, className: cx(`n-flex n-items-center`, className), ...props }));
+var Title = (0, import_react123.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react123.default.createElement(
   "div",
   {
     ref,
@@ -43025,7 +43094,7 @@ var Title = (0, import_react122.forwardRef)(({ className, $textStyle, ...props }
     ...props
   }
 ));
-var Row = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react122.default.createElement(
+var Row = (0, import_react123.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react123.default.createElement(
   "div",
   {
     ref,
@@ -43033,7 +43102,7 @@ var Row = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /* @
     ...props
   }
 ));
-var Column = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react122.default.createElement(
+var Column = (0, import_react123.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react123.default.createElement(
   "div",
   {
     ref,
@@ -43041,7 +43110,7 @@ var Column = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /
     ...props
   }
 ));
-var Checkbox3 = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react122.default.createElement(
+var Checkbox3 = (0, import_react123.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react123.default.createElement(
   "input",
   {
     ref,
@@ -43050,7 +43119,7 @@ var Checkbox3 = (0, import_react122.forwardRef)(({ className, ...props }, ref) =
     ...props
   }
 ));
-var Text3 = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react122.default.createElement(
+var Text3 = (0, import_react123.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react123.default.createElement(
   "span",
   {
     ref,
@@ -43058,14 +43127,14 @@ var Text3 = (0, import_react122.forwardRef)(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ import_react122.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react122.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = (0, import_react122.forwardRef)(function RowLabel2({
+var VerticalSeparator = () => /* @__PURE__ */ import_react123.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react123.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = (0, import_react123.forwardRef)(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ import_react122.default.createElement(
+  return /* @__PURE__ */ import_react123.default.createElement(
     "label",
     {
       ref,
@@ -43077,7 +43146,7 @@ var RowLabel = (0, import_react122.forwardRef)(function RowLabel2({
     }
   );
 });
-var LabeledRow = (0, import_react122.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react123.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -43085,7 +43154,7 @@ var LabeledRow = (0, import_react122.memo)(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ import_react122.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react122.default.createElement(Column, null, /* @__PURE__ */ import_react122.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react122.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react122.default.createElement(Row, null, children)));
+  return /* @__PURE__ */ import_react123.default.createElement(Row, { id, className }, /* @__PURE__ */ import_react123.default.createElement(Column, null, /* @__PURE__ */ import_react123.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react123.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react123.default.createElement(Row, null, children)));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {