@noya-app/noya-designsystem 0.1.81 → 0.1.83

package/dist/index.js

@@ -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());
     }();
@@ -170,17 +170,17 @@ 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 useMemo157 = React321.useMemo;
+    var useRef94 = React321.useRef;
+    var useEffect61 = React321.useEffect;
+    var useMemo156 = React321.useMemo;
     var useDebugValue2 = React321.useDebugValue;
     exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-      var instRef = useRef95(null);
+      var instRef = useRef94(null);
       if (null === instRef.current) {
         var inst = { hasValue: false, value: null };
         instRef.current = inst;
       } else inst = instRef.current;
-      instRef = useMemo157(
+      instRef = useMemo156(
         function() {
           function memoizedSelector(nextSnapshot) {
             if (!hasMemo) {
@@ -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,14 +237,14 @@ 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, useRef94 = React321.useRef, useEffect61 = React321.useEffect, useMemo156 = React321.useMemo, useDebugValue2 = React321.useDebugValue;
       exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-        var instRef = useRef95(null);
+        var instRef = useRef94(null);
         if (null === instRef.current) {
           var inst = { hasValue: false, value: null };
           instRef.current = inst;
         } else inst = instRef.current;
-        instRef = useMemo157(
+        instRef = useMemo156(
           function() {
             function memoizedSelector(nextSnapshot) {
               if (!hasMemo) {
@@ -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
@@ -31014,6 +31052,12 @@ function applySkinTone(emoji, skinTone) {
 
 // src/components/SegmentedControl.tsx
 var import_react81 = __toESM(require("react"));
+var CONTAINER_PADDING_X = "n-px-0.5";
+var CONTAINER_PADDING_X_PX = 4;
+var ITEM_PADDING = "n-px-input-padding-x";
+var ITEM_PADDING_PX = 16;
+var EXPANSION_THRESHOLD_PX = 20;
+var RESIZE_SETTLE_MS = 150;
 var SegmentedControlContext = (0, import_react81.createContext)({
   colorScheme: "primary"
 });
@@ -31027,7 +31071,14 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme, onSelect, itemWidth = "auto" } = (0, import_react81.useContext)(SegmentedControlContext);
+  const {
+    colorScheme,
+    onSelect,
+    itemWidth = "auto",
+    isCompact
+  } = (0, import_react81.useContext)(SegmentedControlContext);
+  const showTitle = !(isCompact && icon);
+  const effectiveTooltip = !showTitle && !tooltip ? title : tooltip;
   const handlePointerDown = (0, import_react81.useCallback)(
     (event2) => {
       if (disabled2) return;
@@ -31058,7 +31109,7 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
         // checked
         variant === "tabs" ? "data-[pressed]:n-text-primary" : variant === "buttons" ? "active:n-text-button-text-active active:n-bg-button-background-active data-[pressed]:n-text-button-text-active data-[pressed]:n-bg-button-background-active" : variant === "default" ? (
           // default variant: only text color, background handled by sliding indicator
-          colorScheme === "secondary" ? "data-[pressed]:n-text-white" : colorScheme === "primary" ? "data-[pressed]:n-text-white" : "data-[pressed]:n-text-segmented-control-item-active-text"
+          colorScheme === "secondary" || colorScheme === "primary" ? "data-[pressed]:n-text-white" : "data-[pressed]:n-text-segmented-control-item-active-text"
         ) : colorScheme === "secondary" ? "data-[pressed]:n-bg-secondary data-[pressed]:n-text-white" : colorScheme === "primary" ? "data-[pressed]:n-bg-primary data-[pressed]:n-text-white" : "data-[pressed]:n-bg-segmented-control-item-active-background data-[pressed]:n-text-segmented-control-item-active-text",
         "focus-visible:n-z-interactable",
         // checked default (all colorSchemes) - hide separators near selected
@@ -31066,10 +31117,12 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
         // hover
         variant === "buttons" && "hover:n-bg-button-background-hover",
         // spacing and borders
-        "n-px-input-padding-x",
+        ITEM_PADDING,
         variant === "default" ? "n-rounded after:n-content-[''] after:n-absolute after:n-right-0 after:n-top-0.5 after:n-bottom-0.5 after:n-w-px after:n-bg-divider last:after:n-hidden" : variant === "buttons" ? "n-rounded-sm n-max-w-fit" : "n-border-y-2 n-border-y-transparent data-[pressed]:n-border-b-primary",
-        // icon only buttons
+        // icon only buttons (explicit or due to compact mode)
         variant === "buttons" && title === "" && icon && "n-min-w-input-height",
+        // icon only in compact mode
+        isCompact && icon && "n-min-w-input-height",
         className
       ),
       ...props
@@ -31083,33 +31136,24 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
         )
       },
       icon && renderIcon(icon),
-      title
+      showTitle && title
     )
   );
-  return tooltip ? /* @__PURE__ */ import_react81.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return effectiveTooltip ? /* @__PURE__ */ import_react81.default.createElement(Tooltip, { content: effectiveTooltip }, itemElement) : itemElement;
 });
-var SegmentedControl = memoGeneric(function SegmentedControl2({
-  id: idProp,
-  value,
-  onValueChange,
-  colorScheme,
-  allowEmpty,
-  items,
-  variant = "default",
-  className,
-  style: style2,
-  itemWidth = "auto"
+function useIndicatorPosition({
+  containerRef,
+  itemRefs,
+  selectedIndex,
+  variant,
+  itemCount,
+  isCompact
 }) {
-  const { fieldId: id } = useLabel({ fieldId: idProp });
   const hasInitialized = (0, import_react81.useRef)(false);
-  const containerRef = (0, import_react81.useRef)(null);
-  const itemRefs = (0, import_react81.useRef)([]);
+  const isResizingRef = (0, import_react81.useRef)(false);
+  const resizeTimeoutRef = (0, import_react81.useRef)(void 0);
   const [indicatorStyle, setIndicatorStyle] = (0, import_react81.useState)(null);
-  const selectedIndex = (0, import_react81.useMemo)(() => {
-    if (!value) return -1;
-    return items.findIndex((item) => item.value === value);
-  }, [value, items]);
-  (0, import_react81.useLayoutEffect)(() => {
+  const measureIndicator = (0, import_react81.useCallback)(() => {
     if (variant !== "default" || selectedIndex < 0) {
       setIndicatorStyle(null);
       return;
@@ -31127,7 +31171,134 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       width: itemRect.width
     });
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length]);
+  }, [containerRef, itemRefs, selectedIndex, variant, itemCount, isCompact]);
+  (0, import_react81.useLayoutEffect)(measureIndicator, [measureIndicator]);
+  (0, import_react81.useLayoutEffect)(() => {
+    const container = containerRef.current;
+    if (!container || variant !== "default") return;
+    const observer = new ResizeObserver(() => {
+      isResizingRef.current = true;
+      clearTimeout(resizeTimeoutRef.current);
+      resizeTimeoutRef.current = setTimeout(() => {
+        isResizingRef.current = false;
+      }, RESIZE_SETTLE_MS);
+      measureIndicator();
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      clearTimeout(resizeTimeoutRef.current);
+    };
+  }, [containerRef, variant, measureIndicator]);
+  return { indicatorStyle, hasInitialized, isResizingRef };
+}
+function useCompactMode({
+  containerRef,
+  itemRefs,
+  variant,
+  items,
+  enabled
+}) {
+  const containerSize = useSize(containerRef, "width");
+  const expandedWidthRef = (0, import_react81.useRef)(null);
+  const isCompactRef = (0, import_react81.useRef)(false);
+  const [isCompact, setIsCompact] = (0, import_react81.useState)(false);
+  const allItemsHaveIcons = (0, import_react81.useMemo)(
+    () => items.every((item) => item.icon),
+    [items]
+  );
+  const itemsKey = (0, import_react81.useMemo)(
+    () => items.map((item) => `${item.value}-${item.icon}-${item.title}`).join("|"),
+    [items]
+  );
+  (0, import_react81.useLayoutEffect)(() => {
+    expandedWidthRef.current = null;
+    isCompactRef.current = false;
+    setIsCompact(false);
+  }, [itemsKey]);
+  (0, import_react81.useLayoutEffect)(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (!container || variant !== "default" || !allItemsHaveIcons) {
+      return;
+    }
+    const validItems = itemRefs.current.filter(Boolean);
+    if (validItems.length !== items.length) return;
+    const availableWidth = (containerSize?.width ?? container.clientWidth) - CONTAINER_PADDING_X_PX;
+    if (!isCompactRef.current) {
+      const isOverflowing = validItems.some((item) => {
+        const span = item.querySelector("span");
+        if (!span) return false;
+        const contentWidth = span.scrollWidth;
+        const availableInButton = item.clientWidth - ITEM_PADDING_PX;
+        return contentWidth >= availableInButton - 1;
+      });
+      if (isOverflowing) {
+        const totalItemsWidth = validItems.reduce((sum, item) => {
+          const span = item.querySelector("span");
+          const contentWidth = span ? span.scrollWidth : 0;
+          return sum + contentWidth + ITEM_PADDING_PX;
+        }, 0);
+        expandedWidthRef.current = totalItemsWidth;
+        isCompactRef.current = true;
+        setIsCompact(true);
+      }
+    } else {
+      const expandedWidth = expandedWidthRef.current;
+      if (!expandedWidth) return;
+      if (availableWidth >= expandedWidth + EXPANSION_THRESHOLD_PX) {
+        isCompactRef.current = false;
+        expandedWidthRef.current = null;
+        setIsCompact(false);
+      }
+    }
+  }, [
+    enabled,
+    containerRef,
+    itemRefs,
+    variant,
+    allItemsHaveIcons,
+    containerSize?.width,
+    itemsKey,
+    items.length
+  ]);
+  return isCompact;
+}
+var SegmentedControl = memoGeneric(function SegmentedControl2({
+  id: idProp,
+  value,
+  onValueChange,
+  colorScheme,
+  allowEmpty,
+  items,
+  variant = "default",
+  className,
+  style: style2,
+  itemWidth = "auto",
+  enableCompactMode = false
+}) {
+  const { fieldId: id } = useLabel({ fieldId: idProp });
+  const containerRef = (0, import_react81.useRef)(null);
+  const itemRefs = (0, import_react81.useRef)([]);
+  const selectedIndex = (0, import_react81.useMemo)(() => {
+    if (!value) return -1;
+    return items.findIndex((item) => item.value === value);
+  }, [value, items]);
+  const isCompact = useCompactMode({
+    containerRef,
+    itemRefs,
+    variant,
+    items,
+    enabled: enableCompactMode
+  });
+  const { indicatorStyle, hasInitialized, isResizingRef } = useIndicatorPosition({
+    containerRef,
+    itemRefs,
+    selectedIndex,
+    variant,
+    itemCount: items.length,
+    isCompact
+  });
   const handleSelect = (0, import_react81.useCallback)(
     (newValue) => {
       if (!allowEmpty && !newValue) return;
@@ -31140,8 +31311,8 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     [handleSelect]
   );
   const contextValue = (0, import_react81.useMemo)(
-    () => ({ colorScheme, onSelect: handleSelect, itemWidth }),
-    [colorScheme, handleSelect, itemWidth]
+    () => ({ colorScheme, onSelect: handleSelect, itemWidth, isCompact }),
+    [colorScheme, handleSelect, itemWidth, isCompact]
   );
   const indicatorBgClass = colorScheme === "secondary" ? "n-bg-secondary" : colorScheme === "primary" ? "n-bg-primary" : "n-bg-segmented-control-item-active-background";
   return /* @__PURE__ */ import_react81.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react81.default.createElement(
@@ -31154,7 +31325,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       className: cx(
         "n-appearance-none n-relative n-outline-none",
         variant === "default" && (itemWidth === "fit" ? "n-flex n-w-fit" : "n-grid"),
-        variant === "default" && "n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 n-px-0.5",
+        variant === "default" && `n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 ${CONTAINER_PADDING_X}`,
         variant !== "default" && "n-flex",
         variant === "tabs" && "n-gap-1.5 n-min-h-[33px]",
         variant === "buttons" && "n-gap-1.5 n-min-h-input-height",
@@ -31173,7 +31344,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         className: cx(
           "n-absolute n-top-0.5 n-bottom-0.5 n-rounded n-shadow-segment n-pointer-events-none",
           indicatorBgClass,
-          hasInitialized.current && "n-transition-[left,width] n-duration-200 n-ease-out"
+          hasInitialized.current && !isResizingRef.current && "n-transition-[left,width] n-duration-200 n-ease-out"
         ),
         style: {
           left: indicatorStyle.left,
@@ -31234,6 +31405,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 +31747,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 +31779,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 +36612,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 +36633,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 +36696,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 +39067,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 +39090,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 +39120,7 @@ function SelectMenuItems({
           }
         );
       case "sectionHeader":
-        return /* @__PURE__ */ import_react104.default.createElement(
+        return /* @__PURE__ */ import_react105.default.createElement(
           SectionHeaderMenuItem,
           {
             isFirst: index2 === 0,
@@ -38941,21 +39133,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 +39174,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 +39198,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 +39209,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 +39221,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 +39230,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 +39249,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 +39262,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 +39272,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 +40578,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 +40672,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 +40695,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 +40721,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 +40732,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 +40742,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 +40779,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 +40797,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 +40819,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 +40827,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 +40841,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 +40856,7 @@ var Stepper = (0, import_react106.memo)(function Stepper2({
           }
         )
       },
-      /* @__PURE__ */ import_react106.default.createElement(
+      /* @__PURE__ */ import_react107.default.createElement(
         InputField2.NumberInput,
         {
           value,
@@ -40989,7 +41181,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 +41191,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 +41220,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 +41251,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 +41270,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 +41297,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 +41306,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 +41325,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 +41347,7 @@ var UserPointerIcon = (0, import_react108.memo)(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ import_react108.default.createElement(
+    /* @__PURE__ */ import_react109.default.createElement(
       "polygon",
       {
         points,
@@ -41168,7 +41360,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 +41373,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 +41396,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 +41419,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 +41432,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 +41441,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 +41451,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 +41460,7 @@ function OverlayToolbar({
       )
     },
     renderLeftPanel("noya-toolbar-bottom-center")
-  ) : /* @__PURE__ */ import_react109.default.createElement(
+  ) : /* @__PURE__ */ import_react110.default.createElement(
     "div",
     {
       className: cx(
@@ -41277,7 +41469,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 +41477,7 @@ function OverlayToolbar({
         className
       )
     },
-    /* @__PURE__ */ import_react109.default.createElement(
+    /* @__PURE__ */ import_react110.default.createElement(
       "div",
       {
         className: panelClassName,
@@ -41300,24 +41492,15 @@ function OverlayToolbar({
 // src/components/workspace/DrawerWorkspaceLayout.tsx
 var import_react113 = __toESM(require("react"));
 
-// src/components/workspace/constants.ts
-var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
-var LEFT_SIDEBAR_ID = "editor-1-left-sidebar";
-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"));
-
 // 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 +41516,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 +41543,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ import_react111.default.createElement(
+    /* @__PURE__ */ import_react112.default.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -41376,7 +41559,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 +41576,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 +41597,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 +41610,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 +41621,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 +41635,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 +41655,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 +41672,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 +41685,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 +41702,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 +41714,7 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ import_react111.default.createElement(
+  return /* @__PURE__ */ import_react112.default.createElement(
     ToolbarMenuDropdown,
     {
       item,
@@ -41551,8 +41734,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 +41754,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 +41769,7 @@ function Toolbar({
   shouldBindKeyboardShortcuts = true,
   dividerOverflow
 }) {
-  const allMenuItems = import_react111.default.useMemo(
+  const allMenuItems = import_react112.default.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
@@ -41594,11 +41777,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 +41789,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,
@@ -41619,38 +41802,11 @@ function Toolbar({
   );
 }
 
-// src/components/workspace/VerticalTabMenu.tsx
-var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
-  items,
-  activeValue,
-  isSidebarCollapsed,
-  onChange,
-  tooltipSide
-}) {
-  const style2 = (0, import_react112.useMemo)(() => {
-    return {
-      [cssVarNames.colors.inputBackground]: "transparent",
-      [cssVarNames.colors.buttonBackground]: "transparent"
-    };
-  }, []);
-  return /* @__PURE__ */ import_react112.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(
-      ToolbarMenu,
-      {
-        items,
-        activeValue: isSidebarCollapsed ? void 0 : activeValue,
-        onSelectMenuItem: onChange,
-        tooltipSide,
-        displayFilter: "iconOnly"
-      }
-    )
-  );
-});
+// src/components/workspace/constants.ts
+var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
+var LEFT_SIDEBAR_ID = "editor-1-left-sidebar";
+var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
+var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
 var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
@@ -41664,14 +41820,38 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   rightTabItems,
   rightTabValue,
   onChangeRightTab,
-  onChangeLeftTab,
-  compactDrawerMenu
+  onChangeLeftTab
 }) {
-  const portalContainer = (0, import_react113.useRef)(null);
   const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react113.useState)({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
+  import_react113.default.useImperativeHandle(
+    leftSidebarRef,
+    () => ({
+      expand: () => setLayoutState((prev) => ({
+        ...prev,
+        leftSidebarCollapsed: false,
+        rightSidebarCollapsed: true
+      })),
+      collapse: () => setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true })),
+      isExpanded: () => !leftSidebarCollapsed
+    }),
+    [leftSidebarCollapsed]
+  );
+  import_react113.default.useImperativeHandle(
+    rightSidebarRef,
+    () => ({
+      expand: () => setLayoutState((prev) => ({
+        ...prev,
+        rightSidebarCollapsed: false,
+        leftSidebarCollapsed: true
+      })),
+      collapse: () => setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true })),
+      isExpanded: () => !rightSidebarCollapsed
+    }),
+    [rightSidebarCollapsed]
+  );
   const allTabItems = (0, import_react113.useMemo)(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
@@ -41679,12 +41859,11 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     ],
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
-  const hasTabs = allTabItems.length > 0;
   const allSelectableTabItems = (0, import_react113.useMemo)(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
-  const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
+  const hasTabs = allSelectableTabItems.length > 0;
   const leftSelectableTabItems = (0, import_react113.useMemo)(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
@@ -41693,134 +41872,83 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
-  const toggleSidebar = (ref) => {
-    if (ref.current?.isExpanded()) {
-      ref.current?.collapse();
-    } else {
-      ref.current?.expand();
-    }
-  };
-  const ensureExpanded = (ref) => {
-    if (!ref.current?.isExpanded()) {
-      ref.current?.expand();
-    }
-  };
   const handleSelectTab = (value) => {
-    if (leftSelectableTabItems.some((item) => item.value === value)) {
-      if (value === leftTabValue) {
-        toggleSidebar(leftSidebarRef);
+    const isLeftItem = leftSelectableTabItems.some(
+      (item) => item.value === value
+    );
+    const isRightItem = rightSelectableTabItems.some(
+      (item) => item.value === value
+    );
+    if (isLeftItem) {
+      if (value === leftTabValue && !leftSidebarCollapsed) {
+        setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true }));
       } else {
-        ensureExpanded(leftSidebarRef);
+        setLayoutState({
+          leftSidebarCollapsed: false,
+          rightSidebarCollapsed: true
+        });
         onChangeLeftTab?.(value);
       }
-    } else if (rightSelectableTabItems.some((item) => item.value === value)) {
-      if (value === rightTabValue) {
-        toggleSidebar(rightSidebarRef);
+    } else if (isRightItem) {
+      if (value === rightTabValue && !rightSidebarCollapsed) {
+        setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true }));
       } else {
-        ensureExpanded(rightSidebarRef);
+        setLayoutState({
+          leftSidebarCollapsed: true,
+          rightSidebarCollapsed: false
+        });
         onChangeRightTab?.(value);
       }
     }
   };
-  const { activeValue, isSidebarCollapsed } = leftSelectableTabItems.length > 0 && !leftSidebarCollapsed ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed } : rightSelectableTabItems.length > 0 && !rightSidebarCollapsed ? {
-    activeValue: rightTabValue,
-    isSidebarCollapsed: rightSidebarCollapsed
-  } : { activeValue: void 0, isSidebarCollapsed: true };
+  const activeDrawerPanel = !leftSidebarCollapsed ? leftPanel : !rightSidebarCollapsed ? rightPanel : null;
+  const isDrawerOpen = activeDrawerPanel !== null;
+  const activeTabValue = !leftSidebarCollapsed ? leftTabValue : !rightSidebarCollapsed ? rightTabValue : void 0;
+  const toolbarMenuItems = (0, import_react113.useMemo)(
+    () => allSelectableTabItems.map((item) => ({
+      ...item,
+      checked: activeTabValue === item.value
+    })),
+    [allSelectableTabItems, activeTabValue]
+  );
   return /* @__PURE__ */ import_react113.default.createElement(
     "div",
     {
-      ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
-      className: "n-flex n-flex-1 n-relative focus:n-outline-none"
+      className: "n-flex n-flex-col 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(
-      VerticalTabMenu,
-      {
-        tooltipSide: "right",
-        items: allTabItems,
-        activeValue,
-        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(
-      Button,
+    hasTabs && /* @__PURE__ */ import_react113.default.createElement(import_react113.default.Fragment, null, /* @__PURE__ */ import_react113.default.createElement(
+      "div",
       {
-        variant: "none",
-        className: "n-rounded",
+        className: "n-flex n-flex-row n-items-center n-gap-1 n-px-2 n-py-1.5 n-bg-sidebar-background n-flex-none",
         style: {
-          width: "var(--n-input-height)",
-          height: "var(--n-input-height)"
-        },
-        icon: allSelectableTabItems[0].icon,
-        tooltip: allSelectableTabItems[0].tooltip ?? allSelectableTabItems[0].title,
-        active: (() => {
-          const value = allSelectableTabItems[0].value;
-          const isLeftItem = leftSelectableTabItems.some(
-            (i) => i.value === value
-          );
-          const isRightItem = rightSelectableTabItems.some(
-            (i) => i.value === value
-          );
-          return isLeftItem ? !leftSidebarCollapsed : isRightItem ? !rightSidebarCollapsed : false;
-        })(),
-        onClick: () => {
-          const value = allSelectableTabItems[0].value;
-          handleSelectTab(value);
-        }
-      }
-    )),
-    /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ import_react113.default.createElement(
-      Drawer,
-      {
-        modal: false,
-        ref: leftSidebarRef,
-        className: "n-flex-1",
-        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
-        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
-        open: !leftSidebarCollapsed,
-        positioning: "absolute",
-        side: "left",
-        trigger: null,
-        portalContainer: portalContainer.current,
-        onOpenChange: (open2) => {
-          setLayoutState({
-            leftSidebarCollapsed: !open2,
-            rightSidebarCollapsed
-          });
+          [cssVarNames.colors.inputBackground]: "transparent",
+          [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
-      leftPanel
-    ),
-    rightPanel && /* @__PURE__ */ import_react113.default.createElement(
-      Drawer,
-      {
-        id: RIGHT_SIDEBAR_ID,
-        modal: false,
-        ref: rightSidebarRef,
-        className: "n-flex-1",
-        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
-        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
-        open: !rightSidebarCollapsed,
-        positioning: "absolute",
-        side: "left",
-        trigger: null,
-        portalContainer: portalContainer.current,
-        onOpenChange: (open2) => {
-          setLayoutState({
-            leftSidebarCollapsed,
-            rightSidebarCollapsed: !open2
-          });
+      /* @__PURE__ */ import_react113.default.createElement(
+        ToolbarMenu,
+        {
+          items: toolbarMenuItems,
+          onSelectMenuItem: handleSelectTab
         }
-      },
-      rightPanel
-    )
+      )
+    ), /* @__PURE__ */ import_react113.default.createElement(Divider, null)),
+    /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-1 n-flex n-flex-col n-relative n-min-h-0" }, isDrawerOpen && /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-absolute n-inset-0 n-z-20 n-flex n-flex-col" }, /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-none n-max-h-[50vh] n-overflow-auto n-bg-sidebar-background n-border-b n-border-divider-strong n-shadow-lg" }, activeDrawerPanel), /* @__PURE__ */ import_react113.default.createElement(
+      "div",
+      {
+        className: "n-flex-1 n-bg-black/30",
+        onClick: () => setLayoutState({
+          leftSidebarCollapsed: true,
+          rightSidebarCollapsed: true
+        })
+      }
+    )), /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-1 n-flex n-relative n-min-h-0" }, centerPanel))
   );
 });
 
 // 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"));
@@ -41840,7 +41968,17 @@ function usePanelGroupContext() {
 
 // src/components/resizablePanels/Panel.tsx
 var Panel = (0, import_react115.forwardRef)(
-  function Panel2({ id: propId, order, className, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, children }, ref) {
+  function Panel2({
+    id: propId,
+    order,
+    className,
+    defaultSize,
+    minSize,
+    maxSize,
+    collapsible,
+    defaultCollapsed,
+    children
+  }, ref) {
     const generatedId = (0, import_react115.useId)();
     const id = propId ?? generatedId;
     const context = usePanelGroupContext();
@@ -41865,7 +42003,17 @@ var Panel = (0, import_react115.forwardRef)(
       return () => {
         unregisterPanel(id);
       };
-    }, [id, order, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, registerPanel, unregisterPanel]);
+    }, [
+      id,
+      order,
+      defaultSize,
+      minSize,
+      maxSize,
+      collapsible,
+      defaultCollapsed,
+      registerPanel,
+      unregisterPanel
+    ]);
     const size4 = getPanelSize(id);
     const isFlexPanel = defaultSize === void 0;
     (0, import_react115.useImperativeHandle)(
@@ -41976,8 +42124,13 @@ var PanelGroup = (0, import_react116.forwardRef)(
           const savedSizes = loadSavedSizes(autoSaveId);
           const savedSize = savedSizes?.[panel.id];
           const hasSavedSize = savedSize !== void 0;
-          const collapsed = hasSavedSize ? savedSize === 0 && !!panel.collapsible : !!panel.defaultCollapsed && !!panel.collapsible;
-          const initialSize = hasSavedSize ? savedSize : collapsed ? 0 : panel.defaultSize ?? 0;
+          let collapsed;
+          if (hasSavedSize) {
+            collapsed = savedSize === 0 && !!panel.collapsible;
+          } else {
+            collapsed = !!panel.defaultCollapsed && !!panel.collapsible;
+          }
+          const initialSize = collapsed ? 0 : hasSavedSize ? savedSize : panel.defaultSize ?? 0;
           const newPanels = new Map(prev);
           newPanels.set(panel.id, {
             ...panel,
@@ -42303,6 +42456,32 @@ function PanelResizeHandle({
   );
 }
 
+// src/components/workspace/HorizontalTabBar.tsx
+var import_react118 = __toESM(require("react"));
+var HorizontalTabBar = memoGeneric(function HorizontalTabBar2({ items, activeValue, onChange }) {
+  const selectableItems = items.filter(isSelectableMenuItem);
+  if (selectableItems.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react118.default.createElement("div", { className: "n-flex n-flex-col n-bg-sidebar-background n-flex-none" }, /* @__PURE__ */ import_react118.default.createElement("div", { className: "n-flex n-flex-row n-px-3 n-py-3" }, /* @__PURE__ */ import_react118.default.createElement(
+    SegmentedControl,
+    {
+      enableCompactMode: true,
+      className: "n-flex-1",
+      value: activeValue,
+      onValueChange: onChange,
+      variant: "default",
+      items: selectableItems.map((item) => ({
+        value: item.value,
+        title: item.title,
+        icon: item.icon,
+        tooltip: item.tooltip,
+        disabled: item.disabled
+      }))
+    }
+  )));
+});
+
 // src/components/workspace/PanelWorkspaceLayout.tsx
 var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   leftPanel,
@@ -42319,32 +42498,56 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
-  compactDrawerMenu
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave = true
 }) {
-  const panelGroupRef = (0, import_react118.useRef)(null);
-  const autoSaveId = (0, import_react118.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 panelGroupRef = (0, import_react119.useRef)(null);
+  const containerRef = (0, import_react119.useRef)(null);
+  const autoSaveId = (0, import_react119.useMemo)(() => {
+    if (!shouldAutoSave) return void 0;
+    return autoSavePrefix ? `${autoSavePrefix}--v5--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
+  }, [autoSavePrefix, shouldAutoSave]);
+  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 prevLeftSidebarState = (0, import_react119.useRef)(null);
+  const prevRightSidebarState = (0, import_react119.useRef)(null);
+  const handleLayoutChange = (0, import_react119.useCallback)(
     (sizes) => {
       const leftIndex = leftPanel ? 0 : -1;
       const rightIndex = rightPanel ? leftPanel ? 2 : 1 : -1;
+      const containerWidth = containerRef.current?.clientWidth ?? 0;
+      const sizesSum = sizes.reduce((a, b) => a + b, 0);
+      if (containerWidth > 0 && sizesSum < containerWidth * 0.5 && sizesSum > 100) {
+        return;
+      }
+      const isPixels = containerWidth > 0 && Math.abs(sizesSum - containerWidth) < Math.abs(sizesSum - 100);
       if (leftIndex >= 0) {
-        setLeftSidebarCollapsed(sizes[leftIndex] === 0);
+        const collapsed = sizes[leftIndex] === 0;
+        setLeftSidebarCollapsed(collapsed);
+        const widthPixels = isPixels ? Math.round(sizes[leftIndex]) : containerWidth > 0 ? Math.round(sizes[leftIndex] / 100 * containerWidth) : 0;
+        if (prevLeftSidebarState.current?.width !== widthPixels || prevLeftSidebarState.current?.collapsed !== collapsed) {
+          prevLeftSidebarState.current = { width: widthPixels, collapsed };
+          onLeftSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
       if (rightIndex >= 0) {
-        setRightSidebarCollapsed(sizes[rightIndex] === 0);
+        const collapsed = sizes[rightIndex] === 0;
+        setRightSidebarCollapsed(collapsed);
+        const widthPixels = isPixels ? Math.round(sizes[rightIndex]) : containerWidth > 0 ? Math.round(sizes[rightIndex] / 100 * containerWidth) : 0;
+        if (prevRightSidebarState.current?.width !== widthPixels || prevRightSidebarState.current?.collapsed !== collapsed) {
+          prevRightSidebarState.current = { width: widthPixels, collapsed };
+          onRightSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
     },
-    [leftPanel, rightPanel]
+    [leftPanel, rightPanel, onLeftSidebarStateChange, onRightSidebarStateChange]
   );
-  const handleLeftTabChange = (0, import_react118.useCallback)(
+  const handleLeftTabChange = (0, import_react119.useCallback)(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -42361,7 +42564,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()) {
@@ -42378,10 +42581,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  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(
+  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems;
+  return /* @__PURE__ */ import_react119.default.createElement("div", { ref: containerRef, className: "n-flex n-flex-1" }, /* @__PURE__ */ import_react119.default.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -42391,20 +42592,11 @@ 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(
-      VerticalTabMenu,
-      {
-        tooltipSide: "right",
-        items: leftTabItems,
-        activeValue: leftTabValue,
-        isSidebarCollapsed: leftSidebarCollapsed,
-        onChange: handleLeftTabChange
-      }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react118.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react118.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
-        className: "n-relative",
+        className: "n-relative n-workspace-sidebar",
         order: 1,
         ref: leftSidebarRef,
         defaultSize: leftSidebarOptions.initialSize,
@@ -42413,9 +42605,22 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true,
         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(
+      leftSidebarCollapsed ? null : /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex n-flex-col n-h-full" }, showLeftTabs && /* @__PURE__ */ import_react119.default.createElement(
+        HorizontalTabBar,
+        {
+          items: leftTabItems,
+          activeValue: leftTabValue,
+          onChange: handleLeftTabChange
+        }
+      ), /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex-1 n-relative n-min-h-0" }, leftPanel))
+    ), /* @__PURE__ */ import_react119.default.createElement(
+      PanelResizeHandle,
+      {
+        index: 0,
+        className: `n-cursor-col-resize n-w-px n-h-full ${leftSidebarCollapsed ? "" : "n-bg-divider"}`
+      }
+    )),
+    /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -42424,11 +42629,17 @@ 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 ${rightSidebarCollapsed ? "" : "n-bg-divider"}`
+      }
+    ), /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
-        className: "n-relative",
+        className: "n-relative n-workspace-sidebar",
         order: 3,
         ref: rightSidebarRef,
         minSize: rightSidebarOptions.minSize,
@@ -42437,18 +42648,16 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true,
         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(
-      VerticalTabMenu,
-      {
-        tooltipSide: "left",
-        items: rightTabItems,
-        activeValue: rightTabValue,
-        isSidebarCollapsed: rightSidebarCollapsed,
-        onChange: handleRightTabChange
-      }
+      rightSidebarCollapsed ? null : /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex n-flex-col n-h-full" }, rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react119.default.createElement(
+        HorizontalTabBar,
+        {
+          items: rightTabItems,
+          activeValue: rightTabValue,
+          onChange: handleRightTabChange
+        }
+      ), /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex-1 n-relative n-min-h-0" }, rightPanel))
     ))
-  );
+  ));
 });
 
 // src/components/workspace/renderPanelChildren.tsx
@@ -42460,11 +42669,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
@@ -42529,9 +42738,11 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     showTabs: rightShowTabs = true
   } = {},
   theme,
-  compactDrawerMenu
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave
 }, 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 +42758,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 +42770,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 +42827,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 +42894,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 +42915,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 +42928,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,
@@ -42734,9 +42945,11 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         autoSavePrefix,
         leftSidebarRef,
         rightSidebarRef,
-        compactDrawerMenu
+        onLeftSidebarStateChange,
+        onRightSidebarStateChange,
+        shouldAutoSave
       }
-    ), isOverlay && /* @__PURE__ */ import_react120.default.createElement(
+    ), isOverlay && /* @__PURE__ */ import_react121.default.createElement(
       OverlayToolbar,
       {
         left: overlayToolbarLeft,
@@ -42746,12 +42959,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 +43011,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 +43025,7 @@ function useTheme() {
         break;
     }
   };
-  (0, import_react121.useEffect)(() => {
+  (0, import_react122.useEffect)(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -43004,8 +43217,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 +43226,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 +43238,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 +43246,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 +43254,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 +43263,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 +43271,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 +43290,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 +43298,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 = {