@noya-app/noya-designsystem 0.1.81 → 0.1.83

package/dist/index.mjs

@@ -15,12 +15,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
-    var useState79 = React321.useState;
-    var useEffect60 = React321.useEffect;
+    var useState80 = React321.useState;
+    var useEffect61 = React321.useEffect;
     var useLayoutEffect12 = React321.useLayoutEffect;
     var useDebugValue2 = React321.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState79({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState80({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect12(
         function() {
           inst.value = value;
@@ -29,7 +29,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect60(
+      useEffect61(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -78,7 +78,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState79({
+        cachedValue = useState80({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -90,7 +90,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect60(
+        useEffect61(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -116,7 +116,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React321 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState79 = React321.useState, useEffect60 = React321.useEffect, useLayoutEffect12 = React321.useLayoutEffect, useDebugValue2 = React321.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React321 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState80 = React321.useState, useEffect61 = React321.useEffect, useLayoutEffect12 = React321.useLayoutEffect, useDebugValue2 = React321.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React321.useSyncExternalStore ? React321.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     }();
@@ -146,17 +146,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;
     exports.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) {
@@ -191,7 +191,7 @@ var require_with_selector_production = __commonJS({
         [getSnapshot, getServerSnapshot, selector, isEqual]
       );
       var value = useSyncExternalStore3(subscribe, instRef[0], instRef[1]);
-      useEffect60(
+      useEffect61(
         function() {
           inst.hasValue = true;
           inst.value = value;
@@ -213,14 +213,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;
       exports.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) {
@@ -256,7 +256,7 @@ var require_with_selector_development = __commonJS({
           [getSnapshot, getServerSnapshot, selector, isEqual]
         );
         var value = useSyncExternalStore3(subscribe, instRef[0], instRef[1]);
-        useEffect60(
+        useEffect61(
           function() {
             inst.hasValue = true;
             inst.value = value;
@@ -3819,6 +3819,15 @@ var ClientStorage = class {
 };
 var clientStorage = new ClientStorage();
 
+// ../noya-react-utils/src/utils/composeRefs.ts
+function composeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      assignRef(ref, value);
+    }
+  };
+}
+
 // src/components/ActionMenu.tsx
 import React166, { useMemo as useMemo87 } from "react";
 
@@ -6290,11 +6299,11 @@ function getGridNavigatedIndex(listRef, {
         if (loopFocus && (prevIndex - cols < minIndex || nextIndex < 0)) {
           const col = prevIndex % cols;
           const maxCol = maxIndex % cols;
-          const offset4 = maxIndex - (maxCol - col);
+          const offset5 = maxIndex - (maxCol - col);
           if (maxCol === col) {
             nextIndex = maxIndex;
           } else {
-            nextIndex = maxCol > col ? offset4 : offset4 - cols;
+            nextIndex = maxCol > col ? offset5 : offset5 - cols;
           }
         }
       }
@@ -8787,7 +8796,7 @@ var limitShift = function(options) {
         middlewareData
       } = state;
       const {
-        offset: offset4 = 0,
+        offset: offset5 = 0,
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true
       } = evaluate(options, state);
@@ -8799,7 +8808,7 @@ var limitShift = function(options) {
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-      const rawOffset = evaluate(offset4, state);
+      const rawOffset = evaluate(offset5, state);
       const computedOffset = typeof rawOffset === "number" ? {
         mainAxis: rawOffset,
         crossAxis: 0
@@ -13375,14 +13384,14 @@ var baseArrow = (options) => ({
     const min2 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset4 = clamp(min2, center, max2);
-    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset4 && rects.reference[length] / 2 - (center < min2 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const offset5 = clamp(min2, center, max2);
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset5 && rects.reference[length] / 2 - (center < min2 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min2 ? center - min2 : center - max2 : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
       data: {
-        [axis]: offset4,
-        centerOffset: center - offset4 - alignmentOffset,
+        [axis]: offset5,
+        centerOffset: center - offset5 - alignmentOffset,
         ...shouldAddOffset && {
           alignmentOffset
         }
@@ -16835,8 +16844,8 @@ var TooltipViewport = /* @__PURE__ */ React102.forwardRef(function TooltipViewpo
     if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
       setPreviousContentNode(capturedNodeRef.current);
       setShowStartingStyleAttribute(true);
-      const offset4 = calculateRelativePosition(previousActiveTrigger, activeTrigger);
-      setNewTriggerOffset(offset4);
+      const offset5 = calculateRelativePosition(previousActiveTrigger, activeTrigger);
+      setNewTriggerOffset(offset5);
       cleanupFrame.request(() => {
         cleanupFrame.request(() => {
           setShowStartingStyleAttribute(false);
@@ -16913,11 +16922,11 @@ var TooltipViewport = /* @__PURE__ */ React102.forwardRef(function TooltipViewpo
   });
 });
 if (process.env.NODE_ENV !== "production") TooltipViewport.displayName = "TooltipViewport";
-function getActivationDirection(offset4) {
-  if (!offset4) {
+function getActivationDirection(offset5) {
+  if (!offset5) {
     return void 0;
   }
-  return `${getValueWithTolerance(offset4.horizontal, 5, "right", "left")} ${getValueWithTolerance(offset4.vertical, 5, "down", "up")}`;
+  return `${getValueWithTolerance(offset5.horizontal, 5, "right", "left")} ${getValueWithTolerance(offset5.vertical, 5, "down", "up")}`;
 }
 function getValueWithTolerance(value, tolerance, positiveLabel, negativeLabel) {
   if (value > tolerance) {
@@ -17003,6 +17012,29 @@ function mergePropsWithEventComposition(triggerProps, childProps) {
       };
     }
   }
+  if (triggerProps.ref || childProps.ref) {
+    const triggerRef = triggerProps.ref;
+    const childRef = childProps.ref;
+    if (triggerRef && childRef) {
+      mergedProps.ref = (value) => {
+        assignRef(triggerRef, value);
+        assignRef(childRef, value);
+      };
+    } else if (childRef) {
+      mergedProps.ref = childRef;
+    }
+  }
+  if (typeof triggerProps.style === "object" && triggerProps.style !== null && typeof childProps.style === "object" && childProps.style !== null) {
+    mergedProps.style = { ...triggerProps.style, ...childProps.style };
+  } else if (childProps.style !== void 0) {
+    mergedProps.style = childProps.style;
+  }
+  if (triggerProps.className || childProps.className) {
+    const classes = [triggerProps.className, childProps.className].filter(Boolean).join(" ");
+    if (classes) {
+      mergedProps.className = classes;
+    }
+  }
   return mergedProps;
 }
 function cloneElementWithMergedProps(element, triggerProps) {
@@ -19844,7 +19876,7 @@ var getInsetEndStyles = (size4 = "medium") => {
 var startBaseStyles = "n-absolute n-left-1.5 n-inset-y-0 n-flex n-items-center";
 
 // src/components/internal/TextInput.tsx
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
 import React140, {
   forwardRef as forwardRef50,
   useCallback as useCallback34,
@@ -20053,7 +20085,7 @@ var SubmittableTextInput = forwardRef50(function SubmittableTextInput2({
   return /* @__PURE__ */ React140.createElement(
     "input",
     {
-      ref: composeRefs(ref, forwardedRef),
+      ref: composeRefs2(ref, forwardedRef),
       ...rest,
       value: internalValue,
       onKeyDown: handleKeyDown,
@@ -21072,8 +21104,8 @@ var PopoverViewport = /* @__PURE__ */ React156.forwardRef(function PopoverViewpo
     if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
       setPreviousContentNode(capturedNodeRef.current);
       setShowStartingStyleAttribute(true);
-      const offset4 = calculateRelativePosition2(previousActiveTrigger, activeTrigger);
-      setNewTriggerOffset(offset4);
+      const offset5 = calculateRelativePosition2(previousActiveTrigger, activeTrigger);
+      setNewTriggerOffset(offset5);
       cleanupFrame.request(() => {
         cleanupFrame.request(() => {
           setShowStartingStyleAttribute(false);
@@ -21138,11 +21170,11 @@ var PopoverViewport = /* @__PURE__ */ React156.forwardRef(function PopoverViewpo
   });
 });
 if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";
-function getActivationDirection2(offset4) {
-  if (!offset4) {
+function getActivationDirection2(offset5) {
+  if (!offset5) {
     return void 0;
   }
-  return `${getValueWithTolerance2(offset4.horizontal, 5, "right", "left")} ${getValueWithTolerance2(offset4.vertical, 5, "down", "up")}`;
+  return `${getValueWithTolerance2(offset5.horizontal, 5, "right", "left")} ${getValueWithTolerance2(offset5.vertical, 5, "down", "up")}`;
 }
 function getValueWithTolerance2(value, tolerance, positiveLabel, negativeLabel) {
   if (value > tolerance) {
@@ -21350,9 +21382,12 @@ function Popover({
           triggerProps,
           childProps
         );
-        mergedProps.ref = (node) => {
-          if (node) setAnchorElement(node);
-        };
+        mergedProps.ref = composeRefs(
+          mergedProps.ref,
+          (node) => {
+            if (node) setAnchorElement(node);
+          }
+        );
         return React158.cloneElement(
           element,
           mergedProps
@@ -26530,18 +26565,18 @@ function buildMeasurements({
   gap
 }) {
   const measurements = [];
-  let offset4 = paddingTop;
+  let offset5 = paddingTop;
   for (let index2 = 0; index2 < itemCount; index2 += 1) {
     const size4 = Math.max(0, getItemHeight(index2));
-    const start = offset4;
+    const start = offset5;
     const end = start + size4;
     measurements.push({ index: index2, size: size4, start, end });
-    offset4 = end + gap;
+    offset5 = end + gap;
   }
   const totalHeight = measurements.length ? measurements[measurements.length - 1].end + paddingBottom : paddingTop + paddingBottom;
   return { measurements, totalHeight };
 }
-function findFirstVisibleIndex(measurements, offset4) {
+function findFirstVisibleIndex(measurements, offset5) {
   if (!measurements.length) return 0;
   let low = 0;
   let high = measurements.length - 1;
@@ -26549,7 +26584,7 @@ function findFirstVisibleIndex(measurements, offset4) {
   while (low <= high) {
     const middle = Math.floor((low + high) / 2);
     const measurement = measurements[middle];
-    if (measurement.end > offset4) {
+    if (measurement.end > offset5) {
       match = middle;
       high = middle - 1;
     } else {
@@ -26766,8 +26801,8 @@ var VirtualizedInner = React204.forwardRef(function Virtualized({
     },
     visibleRange.end >= visibleRange.start && Array.from(
       { length: visibleRange.end - visibleRange.start + 1 },
-      (_, offset4) => {
-        const index2 = visibleRange.start + offset4;
+      (_, offset5) => {
+        const index2 = visibleRange.start + offset5;
         const measurement = measurements[index2];
         const key = itemKey ? itemKey(index2) : index2;
         return /* @__PURE__ */ React204.createElement(
@@ -27867,7 +27902,7 @@ var ListViewRoot = memoGeneric(
 );
 
 // src/components/listView/ListViewRow.tsx
-import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
+import { composeRefs as composeRefs3 } from "@radix-ui/react-compose-refs";
 import React210, {
   forwardRef as forwardRef84,
   useCallback as useCallback51,
@@ -28182,7 +28217,7 @@ var ListViewRow = memoGeneric(
         },
         ({ ref: sortableRef, ...sortableProps }, { relativeDropPosition }) => renderContent(
           sortableProps,
-          composeRefs2(sortableRef, forwardedRef),
+          composeRefs3(sortableRef, forwardedRef),
           relativeDropPosition
         )
       );
@@ -30797,9 +30832,12 @@ var Drawer = React229.memo(
               triggerProps,
               childProps
             );
-            mergedProps.ref = (node) => {
-              if (node) setAnchorElement(node);
-            };
+            mergedProps.ref = composeRefs(
+              mergedProps.ref,
+              (node) => {
+                if (node) setAnchorElement(node);
+              }
+            );
             return React229.cloneElement(
               element,
               mergedProps
@@ -30911,6 +30949,12 @@ import React230, {
   useRef as useRef71,
   useState as useState61
 } from "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 = createContext49({
   colorScheme: "primary"
 });
@@ -30924,7 +30968,14 @@ var SegmentedControlItem = forwardRef90(function SegmentedControlItem2({
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme, onSelect, itemWidth = "auto" } = useContext51(SegmentedControlContext);
+  const {
+    colorScheme,
+    onSelect,
+    itemWidth = "auto",
+    isCompact
+  } = useContext51(SegmentedControlContext);
+  const showTitle = !(isCompact && icon);
+  const effectiveTooltip = !showTitle && !tooltip ? title : tooltip;
   const handlePointerDown = useCallback57(
     (event2) => {
       if (disabled2) return;
@@ -30955,7 +31006,7 @@ var SegmentedControlItem = forwardRef90(function SegmentedControlItem2({
         // 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
@@ -30963,10 +31014,12 @@ var SegmentedControlItem = forwardRef90(function SegmentedControlItem2({
         // 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
@@ -30980,33 +31033,24 @@ var SegmentedControlItem = forwardRef90(function SegmentedControlItem2({
         )
       },
       icon && renderIcon(icon),
-      title
+      showTitle && title
     )
   );
-  return tooltip ? /* @__PURE__ */ React230.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return effectiveTooltip ? /* @__PURE__ */ React230.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 = useRef71(false);
-  const containerRef = useRef71(null);
-  const itemRefs = useRef71([]);
+  const isResizingRef = useRef71(false);
+  const resizeTimeoutRef = useRef71(void 0);
   const [indicatorStyle, setIndicatorStyle] = useState61(null);
-  const selectedIndex = useMemo117(() => {
-    if (!value) return -1;
-    return items.findIndex((item) => item.value === value);
-  }, [value, items]);
-  useLayoutEffect10(() => {
+  const measureIndicator = useCallback57(() => {
     if (variant !== "default" || selectedIndex < 0) {
       setIndicatorStyle(null);
       return;
@@ -31024,7 +31068,134 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       width: itemRect.width
     });
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length]);
+  }, [containerRef, itemRefs, selectedIndex, variant, itemCount, isCompact]);
+  useLayoutEffect10(measureIndicator, [measureIndicator]);
+  useLayoutEffect10(() => {
+    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 = useRef71(null);
+  const isCompactRef = useRef71(false);
+  const [isCompact, setIsCompact] = useState61(false);
+  const allItemsHaveIcons = useMemo117(
+    () => items.every((item) => item.icon),
+    [items]
+  );
+  const itemsKey = useMemo117(
+    () => items.map((item) => `${item.value}-${item.icon}-${item.title}`).join("|"),
+    [items]
+  );
+  useLayoutEffect10(() => {
+    expandedWidthRef.current = null;
+    isCompactRef.current = false;
+    setIsCompact(false);
+  }, [itemsKey]);
+  useLayoutEffect10(() => {
+    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 = useRef71(null);
+  const itemRefs = useRef71([]);
+  const selectedIndex = useMemo117(() => {
+    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 = useCallback57(
     (newValue) => {
       if (!allowEmpty && !newValue) return;
@@ -31037,8 +31208,8 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     [handleSelect]
   );
   const contextValue = useMemo117(
-    () => ({ 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__ */ React230.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React230.createElement(
@@ -31051,7 +31222,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",
@@ -31070,7 +31241,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,
@@ -31131,6 +31302,7 @@ var SECTION_HEADER_HEIGHT = 24;
 var HEADER_HEIGHT = 80;
 var FOOTER_HEIGHT = 40;
 var HORIZONTAL_PADDING = 8;
+var SEGMENTED_CONTROL_ITEM_WIDTH = 31;
 var categoryIcons = {
   search: /* @__PURE__ */ React231.createElement(MagnifyingGlassIcon, null),
   frequent: /* @__PURE__ */ React231.createElement(ClockIcon, null),
@@ -31472,6 +31644,14 @@ var EmojiPicker = memo25(function EmojiPicker2({
     ],
     [frequentlyUsed.length]
   );
+  const segmentedControlGap = useMemo118(() => {
+    const numItems = categoryItems.length;
+    const availableWidth = size4.width - HORIZONTAL_PADDING * 2;
+    const totalItemsWidth = numItems * SEGMENTED_CONTROL_ITEM_WIDTH;
+    const remainingSpace = availableWidth - totalItemsWidth;
+    const numGaps = numItems - 1;
+    return numGaps > 0 ? Math.max(0, remainingSpace / numGaps) : 0;
+  }, [categoryItems.length, size4.width]);
   const displayEmoji = hoveredEmoji ?? selectedEmoji;
   const footerText = displayEmoji ? `:${displayEmoji.names[0]}:${displayEmoji.names.length > 1 ? ` :${displayEmoji.names[1]}:` : ""}` : "";
   const skinToneMenuItems = useMemo118(
@@ -31496,7 +31676,8 @@ var EmojiPicker = memo25(function EmojiPicker2({
         value: activeCategory ?? "search",
         onValueChange: handleCategoryChange,
         allowEmpty: true,
-        className: "n-flex-nowrap n-px-2"
+        className: "n-flex-nowrap n-px-2",
+        style: { gap: segmentedControlGap }
       }
     ),
     /* @__PURE__ */ React231.createElement(Divider, null),
@@ -36347,27 +36528,24 @@ var Section = memo31(function InspectorSection({
 });
 
 // src/components/SelectionToolbar.tsx
-import * as PopperPrimitive from "@radix-ui/react-popper";
-import React261, { memo as memo32, useMemo as useMemo129 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
-var createVirtualElement2 = (rect) => ({
-  getBoundingClientRect: () => ({
-    width: rect.width,
-    height: rect.height,
-    x: rect.x,
-    y: rect.y,
-    top: rect.y,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height,
-    left: rect.x,
-    toJSON: () => null
-  })
-});
+import {
+  useFloating as useFloating3,
+  offset as offset4,
+  flip as flip4,
+  shift as shift4,
+  FloatingPortal as FloatingPortal3
+} from "@floating-ui/react";
+import React261, { memo as memo32, useCallback as useCallback64, useEffect as useEffect54, useMemo as useMemo129, useState as useState68 } from "react";
+function getPlacement(side, align) {
+  if (align === "center") {
+    return side;
+  }
+  return `${side}-${align}`;
+}
 var SelectionToolbarContainer = memo32(
   function SelectionToolbarContainer2({
     rect,
     children,
-    portalContainer,
     side = "top",
     sideOffset = 10,
     align = "center",
@@ -36377,31 +36555,52 @@ var SelectionToolbarContainer = memo32(
     transitionDuration = 0.2
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React261.useRef(null);
-    const size4 = useSize(containerRef, "width");
-    const virtualRef = useMemo129(
+    const [containerElement, setContainerElement] = useState68(null);
+    const containerRef = useCallback64((el) => {
+      setContainerElement(el);
+    }, []);
+    const containerRefObject = useMemo129(
+      () => ({ current: containerElement }),
+      [containerElement]
+    );
+    const size4 = useSize(containerRefObject, "width");
+    const virtualElement = useMemo129(
       () => ({
-        current: createVirtualElement2(rect)
+        getBoundingClientRect: () => ({
+          width: rect.width,
+          height: rect.height,
+          x: rect.x,
+          y: rect.y,
+          top: rect.y,
+          right: rect.x + rect.width,
+          bottom: rect.y + rect.height,
+          left: rect.x
+        })
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ React261.createElement(
-      PopperPrimitive.Content,
+    const placement = getPlacement(side, align);
+    const { refs, floatingStyles } = useFloating3({
+      placement,
+      middleware: avoidCollisions ? [offset4(sideOffset), flip4(), shift4({ padding: 10 })] : [offset4(sideOffset)]
+    });
+    useEffect54(() => {
+      refs.setPositionReference(virtualElement);
+    }, [refs, virtualElement]);
+    return /* @__PURE__ */ React261.createElement(FloatingPortal3, null, /* @__PURE__ */ React261.createElement(
+      "div",
       {
+        ref: refs.setFloating,
         ...portalScopeProps(portalScopeId),
-        side,
-        sideOffset,
-        align,
-        avoidCollisions,
-        collisionPadding: 10,
         contentEditable: false,
         style: {
-          zIndex: 10,
+          ...floatingStyles,
           opacity: size4 ? 1 : 0,
           transition: `opacity ${transitionDuration}s ease-in-out`,
           [cssVarNames.colors.inputBackground]: "transparent",
           [cssVarNames.colors.buttonBackground]: "transparent"
-        }
+        },
+        className: "n-z-menu"
       },
       /* @__PURE__ */ React261.createElement(
         "div",
@@ -36419,8 +36618,7 @@ var SelectionToolbarContainer = memo32(
         },
         children
       )
-    );
-    return /* @__PURE__ */ React261.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React261.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal5(popperContent, portalContainer) : popperContent);
+    ));
   }
 );
 
@@ -38797,9 +38995,9 @@ if (process.env.NODE_ENV !== "production") SelectGroupLabel.displayName = "Selec
 
 // src/components/SelectMenu.tsx
 import React290, {
-  useCallback as useCallback65,
+  useCallback as useCallback66,
   useMemo as useMemo142,
-  useState as useState70
+  useState as useState71
 } from "react";
 var readOnlyStyle = {
   justifyContent: "flex-start",
@@ -38907,20 +39105,20 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     (item) => isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
-  const [internalOpen, setInternalOpen] = useState70(open2 ?? false);
+  const [internalOpen, setInternalOpen] = useState71(open2 ?? false);
   const { label, fieldId: id } = useLabel({
     label: props.label,
     fieldId: props.id
   });
   const labelType = useLabelType();
-  const handleOpenChange = useCallback65(
+  const handleOpenChange = useCallback66(
     (newOpen) => {
       onOpenChange?.(newOpen);
       setInternalOpen(newOpen);
     },
     [onOpenChange]
   );
-  const handleValueChange = useCallback65(
+  const handleValueChange = useCallback66(
     (newValue) => {
       if (newValue !== null) {
         onSelect?.(newValue);
@@ -40311,8 +40509,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;
@@ -40405,7 +40603,7 @@ var SliderIndicator = /* @__PURE__ */ React297.forwardRef(function SliderIndicat
 if (process.env.NODE_ENV !== "production") SliderIndicator.displayName = "SliderIndicator";
 
 // src/components/Slider.tsx
-import React298, { memo as memo36, useCallback as useCallback67 } from "react";
+import React298, { memo as memo36, useCallback as useCallback68 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
@@ -40428,7 +40626,7 @@ var Slider = memo36(function Slider2({
   const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const handleValueChange = useCallback67(
+  const handleValueChange = useCallback68(
     (newValue) => {
       onValueChange(newValue);
     },
@@ -40512,7 +40710,7 @@ function createSharedDrag() {
 
 // src/components/Stepper.tsx
 import { clamp as clamp9 } from "@noya-app/noya-utils";
-import React300, { memo as memo37, useCallback as useCallback68, useMemo as useMemo146 } from "react";
+import React300, { memo as memo37, useCallback as useCallback69, useMemo as useMemo146 } from "react";
 var Stepper = memo37(function Stepper2({
   style: style2,
   className,
@@ -40533,7 +40731,7 @@ var Stepper = memo37(function Stepper2({
   const value = useMemo146(() => {
     return clamp9(valueProp, min2, max2);
   }, [valueProp, min2, max2]);
-  const handleValueChange = useCallback68(
+  const handleValueChange = useCallback69(
     (value2) => {
       const newValue = clamp9(value2, min2, max2);
       onValueChange(newValue);
@@ -40914,7 +41112,7 @@ function Tabs({
 }
 
 // src/components/UserPicker.tsx
-import React306, { useCallback as useCallback69, useMemo as useMemo148, useState as useState74 } from "react";
+import React306, { useCallback as useCallback70, useMemo as useMemo148, useState as useState75 } from "react";
 function UserPicker({
   users,
   value,
@@ -40938,13 +41136,13 @@ function UserPicker({
     return sortedUsers.map(createUserMenuItem);
   }, [sortedUsers]);
   const isControlled = value !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState74(defaultValue2);
+  const [uncontrolledValue, setUncontrolledValue] = useState75(defaultValue2);
   const selectedUserId = isControlled ? value : uncontrolledValue;
   const selectedItem = useMemo148(() => {
     if (!selectedUserId) return void 0;
     return items.find((item) => item.value === selectedUserId);
   }, [items, selectedUserId]);
-  const updateSelectedUserId = useCallback69(
+  const updateSelectedUserId = useCallback70(
     (userId) => {
       if (!isControlled) {
         setUncontrolledValue(userId);
@@ -40953,7 +41151,7 @@ function UserPicker({
     },
     [isControlled, onChangeUserId]
   );
-  const handleSelectItem = useCallback69(
+  const handleSelectItem = useCallback70(
     (item) => {
       updateSelectedUserId(item.value);
       onSelectUser?.(usersById.get(item.value));
@@ -41154,10 +41352,10 @@ var UserPointer = memo38(function UserPointer2({
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
 import React317, {
   memo as memo40,
-  useCallback as useCallback73,
+  useCallback as useCallback74,
   useImperativeHandle as useImperativeHandle18,
-  useMemo as useMemo155,
-  useRef as useRef94
+  useMemo as useMemo154,
+  useRef as useRef93
 } from "react";
 
 // src/components/OverlayToolbar.tsx
@@ -41229,16 +41427,7 @@ function OverlayToolbar({
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React312, { useMemo as useMemo152, useRef as useRef90, useState as useState75 } from "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
-import React311, { useMemo as useMemo151 } from "react";
+import React311, { useMemo as useMemo151, useState as useState76 } from "react";
 
 // src/components/Toolbar.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
@@ -41553,38 +41742,11 @@ function Toolbar({
   );
 }
 
-// src/components/workspace/VerticalTabMenu.tsx
-var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
-  items,
-  activeValue,
-  isSidebarCollapsed,
-  onChange,
-  tooltipSide
-}) {
-  const style2 = useMemo151(() => {
-    return {
-      [cssVarNames.colors.inputBackground]: "transparent",
-      [cssVarNames.colors.buttonBackground]: "transparent"
-    };
-  }, []);
-  return /* @__PURE__ */ React311.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__ */ React311.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({
@@ -41598,168 +41760,140 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   rightTabItems,
   rightTabValue,
   onChangeRightTab,
-  onChangeLeftTab,
-  compactDrawerMenu
+  onChangeLeftTab
 }) {
-  const portalContainer = useRef90(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState75({
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = useState76({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = useMemo152(
+  React311.useImperativeHandle(
+    leftSidebarRef,
+    () => ({
+      expand: () => setLayoutState((prev) => ({
+        ...prev,
+        leftSidebarCollapsed: false,
+        rightSidebarCollapsed: true
+      })),
+      collapse: () => setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true })),
+      isExpanded: () => !leftSidebarCollapsed
+    }),
+    [leftSidebarCollapsed]
+  );
+  React311.useImperativeHandle(
+    rightSidebarRef,
+    () => ({
+      expand: () => setLayoutState((prev) => ({
+        ...prev,
+        rightSidebarCollapsed: false,
+        leftSidebarCollapsed: true
+      })),
+      collapse: () => setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true })),
+      isExpanded: () => !rightSidebarCollapsed
+    }),
+    [rightSidebarCollapsed]
+  );
+  const allTabItems = useMemo151(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
     ],
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
-  const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = useMemo152(
+  const allSelectableTabItems = useMemo151(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
-  const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = useMemo152(
+  const hasTabs = allSelectableTabItems.length > 0;
+  const leftSelectableTabItems = useMemo151(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = useMemo152(
+  const rightSelectableTabItems = useMemo151(
     () => (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 };
-  return /* @__PURE__ */ React312.createElement(
+  const activeDrawerPanel = !leftSidebarCollapsed ? leftPanel : !rightSidebarCollapsed ? rightPanel : null;
+  const isDrawerOpen = activeDrawerPanel !== null;
+  const activeTabValue = !leftSidebarCollapsed ? leftTabValue : !rightSidebarCollapsed ? rightTabValue : void 0;
+  const toolbarMenuItems = useMemo151(
+    () => allSelectableTabItems.map((item) => ({
+      ...item,
+      checked: activeTabValue === item.value
+    })),
+    [allSelectableTabItems, activeTabValue]
+  );
+  return /* @__PURE__ */ React311.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__ */ React312.createElement(React312.Fragment, null, /* @__PURE__ */ React312.createElement(
-      VerticalTabMenu,
-      {
-        tooltipSide: "right",
-        items: allTabItems,
-        activeValue,
-        isSidebarCollapsed,
-        onChange: (value) => handleSelectTab(value)
-      }
-    ), /* @__PURE__ */ React312.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ React312.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__ */ React312.createElement(
-      Button,
+    hasTabs && /* @__PURE__ */ React311.createElement(React311.Fragment, null, /* @__PURE__ */ React311.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__ */ React312.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ React312.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__ */ React312.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__ */ React311.createElement(
+        ToolbarMenu,
+        {
+          items: toolbarMenuItems,
+          onSelectMenuItem: handleSelectTab
         }
-      },
-      rightPanel
-    )
+      )
+    ), /* @__PURE__ */ React311.createElement(Divider, null)),
+    /* @__PURE__ */ React311.createElement("div", { className: "n-flex-1 n-flex n-flex-col n-relative n-min-h-0" }, isDrawerOpen && /* @__PURE__ */ React311.createElement("div", { className: "n-absolute n-inset-0 n-z-20 n-flex n-flex-col" }, /* @__PURE__ */ React311.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__ */ React311.createElement(
+      "div",
+      {
+        className: "n-flex-1 n-bg-black/30",
+        onClick: () => setLayoutState({
+          leftSidebarCollapsed: true,
+          rightSidebarCollapsed: true
+        })
+      }
+    )), /* @__PURE__ */ React311.createElement("div", { className: "n-flex-1 n-flex n-relative n-min-h-0" }, centerPanel))
   );
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React316, { useCallback as useCallback72, useMemo as useMemo154, useRef as useRef93, useState as useState77 } from "react";
+import React316, { useCallback as useCallback73, useMemo as useMemo153, useRef as useRef92, useState as useState78 } from "react";
 
 // src/components/resizablePanels/Panel.tsx
-import React313, {
+import React312, {
   forwardRef as forwardRef124,
-  useEffect as useEffect57,
+  useEffect as useEffect58,
   useId as useId5,
   useImperativeHandle as useImperativeHandle16
 } from "react";
@@ -41779,7 +41913,17 @@ function usePanelGroupContext() {
 
 // src/components/resizablePanels/Panel.tsx
 var Panel = forwardRef124(
-  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 = useId5();
     const id = propId ?? generatedId;
     const context = usePanelGroupContext();
@@ -41791,7 +41935,7 @@ var Panel = forwardRef124(
       collapsePanel,
       isPanelExpanded
     } = context;
-    useEffect57(() => {
+    useEffect58(() => {
       registerPanel({
         id,
         order,
@@ -41804,7 +41948,17 @@ var Panel = forwardRef124(
       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;
     useImperativeHandle16(
@@ -41820,7 +41974,7 @@ var Panel = forwardRef124(
     if (size4 === 0 && !isFlexPanel) {
       return null;
     }
-    return /* @__PURE__ */ React313.createElement(
+    return /* @__PURE__ */ React312.createElement(
       "div",
       {
         "data-panel-id": id,
@@ -41835,14 +41989,14 @@ var Panel = forwardRef124(
 );
 
 // src/components/resizablePanels/PanelGroup.tsx
-import React314, {
+import React313, {
   forwardRef as forwardRef125,
-  useCallback as useCallback70,
-  useEffect as useEffect58,
+  useCallback as useCallback71,
+  useEffect as useEffect59,
   useImperativeHandle as useImperativeHandle17,
-  useMemo as useMemo153,
-  useRef as useRef91,
-  useState as useState76
+  useMemo as useMemo152,
+  useRef as useRef90,
+  useState as useState77
 } from "react";
 function getStorageKey(autoSaveId) {
   return `noya-panels:${autoSaveId}`;
@@ -41863,17 +42017,17 @@ function saveSizes(autoSaveId, sizes) {
 }
 var PanelGroup = forwardRef125(
   function PanelGroup2({ id, className, direction, autoSaveId, onLayout, children }, ref) {
-    const containerRef = useRef91(null);
+    const containerRef = useRef90(null);
     const containerSize = useSize(containerRef);
     const containerWidth = containerSize?.width ?? 0;
-    const [panels, setPanels] = useState76(/* @__PURE__ */ new Map());
-    const panelsRef = useRef91(panels);
+    const [panels, setPanels] = useState77(/* @__PURE__ */ new Map());
+    const panelsRef = useRef90(panels);
     panelsRef.current = panels;
-    const [resizing, setResizing] = useState76(null);
-    const sortedPanels = useMemo153(() => {
+    const [resizing, setResizing] = useState77(null);
+    const sortedPanels = useMemo152(() => {
       return Array.from(panels.values()).sort((a, b) => a.order - b.order);
     }, [panels]);
-    const flexPanelId = useMemo153(() => {
+    const flexPanelId = useMemo152(() => {
       for (const panel of sortedPanels) {
         if (panel.defaultSize === void 0) {
           return panel.id;
@@ -41881,7 +42035,7 @@ var PanelGroup = forwardRef125(
       }
       return null;
     }, [sortedPanels]);
-    const calculateLayout = useCallback70(
+    const calculateLayout = useCallback71(
       (panelStates, width) => {
         if (width === 0) return panelStates;
         const sorted = Array.from(panelStates.values()).sort(
@@ -41906,25 +42060,30 @@ var PanelGroup = forwardRef125(
       },
       []
     );
-    useEffect58(() => {
+    useEffect59(() => {
       if (containerWidth > 0 && panels.size > 0) {
         setPanels((prev) => calculateLayout(prev, containerWidth));
       }
     }, [containerWidth, calculateLayout, panels.size]);
-    useEffect58(() => {
+    useEffect59(() => {
       if (onLayout && sortedPanels.length > 0) {
         const sizes = sortedPanels.map((p) => p.collapsed ? 0 : p.size);
         onLayout(sizes);
       }
     }, [onLayout, sortedPanels]);
-    const registerPanel = useCallback70(
+    const registerPanel = useCallback71(
       (panel) => {
         setPanels((prev) => {
           const savedSizes = loadSavedSizes(autoSaveId);
           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,
@@ -41937,26 +42096,26 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const unregisterPanel = useCallback70((panelId) => {
+    const unregisterPanel = useCallback71((panelId) => {
       setPanels((prev) => {
         const newPanels = new Map(prev);
         newPanels.delete(panelId);
         return newPanels;
       });
     }, []);
-    const getPanelSize = useCallback70(
+    const getPanelSize = useCallback71(
       (panelId) => {
         return panels.get(panelId)?.size ?? 0;
       },
       [panels]
     );
-    const getPanelIndex = useCallback70(
+    const getPanelIndex = useCallback71(
       (panelId) => {
         return sortedPanels.findIndex((p) => p.id === panelId);
       },
       [sortedPanels]
     );
-    const setPanelSize = useCallback70(
+    const setPanelSize = useCallback71(
       (panelId, size4) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -41984,7 +42143,7 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const expandPanel = useCallback70(
+    const expandPanel = useCallback71(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42009,7 +42168,7 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const collapsePanel = useCallback70(
+    const collapsePanel = useCallback71(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42033,14 +42192,14 @@ var PanelGroup = forwardRef125(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const isPanelExpanded = useCallback70(
+    const isPanelExpanded = useCallback71(
       (panelId) => {
         const panel = panels.get(panelId);
         return panel ? !panel.collapsed : false;
       },
       [panels]
     );
-    const startResize = useCallback70(
+    const startResize = useCallback71(
       (handleIndex, startX) => {
         const startSizes = sortedPanels.map((p) => p.size);
         setResizing({
@@ -42051,7 +42210,7 @@ var PanelGroup = forwardRef125(
       },
       [sortedPanels]
     );
-    useEffect58(() => {
+    useEffect59(() => {
       if (!resizing) return;
       const handleMouseMove = (e) => {
         const delta = e.clientX - resizing.startX;
@@ -42158,7 +42317,7 @@ var PanelGroup = forwardRef125(
         });
       }
     }));
-    const contextValue = useMemo153(
+    const contextValue = useMemo152(
       () => ({
         registerPanel,
         unregisterPanel,
@@ -42184,7 +42343,7 @@ var PanelGroup = forwardRef125(
         containerWidth
       ]
     );
-    return /* @__PURE__ */ React314.createElement(PanelGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React314.createElement(
+    return /* @__PURE__ */ React313.createElement(PanelGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React313.createElement(
       "div",
       {
         ref: containerRef,
@@ -42202,15 +42361,15 @@ var PanelGroup = forwardRef125(
 );
 
 // src/components/resizablePanels/PanelResizeHandle.tsx
-import React315, { useCallback as useCallback71, useContext as useContext65, useRef as useRef92 } from "react";
+import React314, { useCallback as useCallback72, useContext as useContext65, useRef as useRef91 } from "react";
 function PanelResizeHandle({
   className,
   disabled: disabled2,
   index: index2
 }) {
   const context = useContext65(PanelGroupContext);
-  const handleRef = useRef92(null);
-  const handleMouseDown = useCallback71(
+  const handleRef = useRef91(null);
+  const handleMouseDown = useCallback72(
     (e) => {
       if (disabled2 || !context) return;
       e.preventDefault();
@@ -42221,7 +42380,7 @@ function PanelResizeHandle({
   if (!context) {
     return null;
   }
-  return /* @__PURE__ */ React315.createElement(
+  return /* @__PURE__ */ React314.createElement(
     "div",
     {
       ref: handleRef,
@@ -42234,7 +42393,7 @@ function PanelResizeHandle({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ React315.createElement(
+    /* @__PURE__ */ React314.createElement(
       "div",
       {
         style: {
@@ -42250,6 +42409,32 @@ function PanelResizeHandle({
   );
 }
 
+// src/components/workspace/HorizontalTabBar.tsx
+import React315 from "react";
+var HorizontalTabBar = memoGeneric(function HorizontalTabBar2({ items, activeValue, onChange }) {
+  const selectableItems = items.filter(isSelectableMenuItem);
+  if (selectableItems.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ React315.createElement("div", { className: "n-flex n-flex-col n-bg-sidebar-background n-flex-none" }, /* @__PURE__ */ React315.createElement("div", { className: "n-flex n-flex-row n-px-3 n-py-3" }, /* @__PURE__ */ React315.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,
@@ -42266,32 +42451,56 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
-  compactDrawerMenu
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave = true
 }) {
-  const panelGroupRef = useRef93(null);
-  const autoSaveId = useMemo154(() => {
-    return autoSavePrefix ? `${autoSavePrefix}--v3--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
-  }, [autoSavePrefix]);
-  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState77(
+  const panelGroupRef = useRef92(null);
+  const containerRef = useRef92(null);
+  const autoSaveId = useMemo153(() => {
+    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] = useState78(
     leftSidebarOptions.defaultCollapsed ?? false
   );
-  const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState77(
+  const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState78(
     rightSidebarOptions.defaultCollapsed ?? false
   );
-  const handleLayoutChange = useCallback72(
+  const prevLeftSidebarState = useRef92(null);
+  const prevRightSidebarState = useRef92(null);
+  const handleLayoutChange = useCallback73(
     (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 = useCallback72(
+  const handleLeftTabChange = useCallback73(
     (value) => {
       if (value === leftTabValue) {
         if (leftSidebarRef.current?.isExpanded()) {
@@ -42308,7 +42517,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [leftSidebarRef, leftTabValue, onChangeLeftTab]
   );
-  const handleRightTabChange = useCallback72(
+  const handleRightTabChange = useCallback73(
     (value) => {
       if (value === rightTabValue) {
         if (rightSidebarRef.current?.isExpanded()) {
@@ -42325,10 +42534,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__ */ React316.createElement(
+  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems;
+  return /* @__PURE__ */ React316.createElement("div", { ref: containerRef, className: "n-flex n-flex-1" }, /* @__PURE__ */ React316.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -42338,20 +42545,11 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ React316.createElement(React316.Fragment, null, showLeftTabs && /* @__PURE__ */ React316.createElement(
-      VerticalTabMenu,
-      {
-        tooltipSide: "right",
-        items: leftTabItems,
-        activeValue: leftTabValue,
-        isSidebarCollapsed: leftSidebarCollapsed,
-        onChange: handleLeftTabChange
-      }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ React316.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ React316.createElement(
+    leftPanel && /* @__PURE__ */ React316.createElement(React316.Fragment, null, /* @__PURE__ */ React316.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
-        className: "n-relative",
+        className: "n-relative n-workspace-sidebar",
         order: 1,
         ref: leftSidebarRef,
         defaultSize: leftSidebarOptions.initialSize,
@@ -42360,8 +42558,21 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true,
         defaultCollapsed: leftSidebarOptions.defaultCollapsed
       },
-      leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React316.createElement(PanelResizeHandle, { index: 0, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+      leftSidebarCollapsed ? null : /* @__PURE__ */ React316.createElement("div", { className: "n-flex n-flex-col n-h-full" }, showLeftTabs && /* @__PURE__ */ React316.createElement(
+        HorizontalTabBar,
+        {
+          items: leftTabItems,
+          activeValue: leftTabValue,
+          onChange: handleLeftTabChange
+        }
+      ), /* @__PURE__ */ React316.createElement("div", { className: "n-flex-1 n-relative n-min-h-0" }, leftPanel))
+    ), /* @__PURE__ */ React316.createElement(
+      PanelResizeHandle,
+      {
+        index: 0,
+        className: `n-cursor-col-resize n-w-px n-h-full ${leftSidebarCollapsed ? "" : "n-bg-divider"}`
+      }
+    )),
     /* @__PURE__ */ React316.createElement(
       Panel,
       {
@@ -42371,11 +42582,17 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React316.createElement(React316.Fragment, null, /* @__PURE__ */ React316.createElement(PanelResizeHandle, { index: 1, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ React316.createElement(
+    rightPanel && /* @__PURE__ */ React316.createElement(React316.Fragment, null, /* @__PURE__ */ React316.createElement(
+      PanelResizeHandle,
+      {
+        index: 1,
+        className: `n-cursor-col-resize n-w-px n-h-full ${rightSidebarCollapsed ? "" : "n-bg-divider"}`
+      }
+    ), /* @__PURE__ */ React316.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
-        className: "n-relative",
+        className: "n-relative n-workspace-sidebar",
         order: 3,
         ref: rightSidebarRef,
         minSize: rightSidebarOptions.minSize,
@@ -42384,18 +42601,16 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true,
         defaultCollapsed: rightSidebarOptions.defaultCollapsed
       },
-      rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ React316.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React316.createElement(
-      VerticalTabMenu,
-      {
-        tooltipSide: "left",
-        items: rightTabItems,
-        activeValue: rightTabValue,
-        isSidebarCollapsed: rightSidebarCollapsed,
-        onChange: handleRightTabChange
-      }
+      rightSidebarCollapsed ? null : /* @__PURE__ */ React316.createElement("div", { className: "n-flex n-flex-col n-h-full" }, rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ React316.createElement(
+        HorizontalTabBar,
+        {
+          items: rightTabItems,
+          activeValue: rightTabValue,
+          onChange: handleRightTabChange
+        }
+      ), /* @__PURE__ */ React316.createElement("div", { className: "n-flex-1 n-relative n-min-h-0" }, rightPanel))
     ))
-  );
+  ));
 });
 
 // src/components/workspace/renderPanelChildren.tsx
@@ -42476,7 +42691,9 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     showTabs: rightShowTabs = true
   } = {},
   theme,
-  compactDrawerMenu
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave
 }, forwardedRef) {
   const containerRef = React317.useRef(null);
   const containerSize = useSize(containerRef);
@@ -42494,8 +42711,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   const rightSidebarMinPixels = toPixels(rightMinSize);
   const rightSidebarMaxPixels = toPixels(rightMaxSize);
   const rightSidebarInitialPixels = toPixels(rightInitialSize) ?? 280;
-  const leftSidebarRef = useRef94(null);
-  const rightSidebarRef = useRef94(null);
+  const leftSidebarRef = useRef93(null);
+  const rightSidebarRef = useRef93(null);
   const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled({
     value: leftTabValueProp,
     onChange: onChangeLeftTab,
@@ -42563,34 +42780,34 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     }
   });
   const isDrawerActive = sideType === "drawer" || sideType === "auto" && parentSize.width <= sideTypeBreakpoint;
-  const closeLeftSidebar = useCallback73(() => {
+  const closeLeftSidebar = useCallback74(() => {
     if (isDrawerActive) {
       leftSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const closeRightSidebar = useCallback73(() => {
+  const closeRightSidebar = useCallback74(() => {
     if (isDrawerActive) {
       rightSidebarRef.current?.collapse();
     }
   }, [isDrawerActive]);
-  const leftChildrenProps = useMemo155(() => {
+  const leftChildrenProps = useMemo154(() => {
     return {
       activeTabValue: leftTabValue,
       closeSidebar: closeLeftSidebar
     };
   }, [leftTabValue, closeLeftSidebar]);
-  const rightChildrenProps = useMemo155(() => {
+  const rightChildrenProps = useMemo154(() => {
     return {
       activeTabValue: rightTabValue,
       closeSidebar: closeRightSidebar
     };
   }, [rightTabValue, closeRightSidebar]);
-  const leftSidebarProviderValue = useMemo155(() => {
+  const leftSidebarProviderValue = useMemo154(() => {
     return {
       closeSidebar: closeLeftSidebar
     };
   }, [closeLeftSidebar]);
-  const rightSidebarProviderValue = useMemo155(() => {
+  const rightSidebarProviderValue = useMemo154(() => {
     return {
       closeSidebar: closeRightSidebar
     };
@@ -42612,7 +42829,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     /* @__PURE__ */ React317.createElement(WorkspaceSideProvider, { value: rightSidebarProviderValue }, rightTabValue ? renderPanelChildren(right, rightChildrenProps) : null)
   ) : null;
   const centerPanel = /* @__PURE__ */ React317.createElement(PanelInner, { className: "n-bg-canvas-background" }, children);
-  const leftSidebarOptions = useMemo155(
+  const leftSidebarOptions = useMemo154(
     () => ({
       minSize: leftSidebarMinPixels,
       maxSize: leftSidebarMaxPixels,
@@ -42630,7 +42847,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = useMemo155(
+  const rightSidebarOptions = useMemo154(
     () => ({
       minSize: rightSidebarMinPixels,
       maxSize: rightSidebarMaxPixels,
@@ -42681,7 +42898,9 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         autoSavePrefix,
         leftSidebarRef,
         rightSidebarRef,
-        compactDrawerMenu
+        onLeftSidebarStateChange,
+        onRightSidebarStateChange,
+        shouldAutoSave
       }
     ), isOverlay && /* @__PURE__ */ React317.createElement(
       OverlayToolbar,
@@ -42745,9 +42964,9 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-import { useEffect as useEffect59, useState as useState78 } from "react";
+import { useEffect as useEffect60, useState as useState79 } from "react";
 function useTheme() {
-  const [theme, setTheme] = useState78("light");
+  const [theme, setTheme] = useState79("light");
   const checkTheme = () => {
     const currentTheme = document.body.getAttribute("data-theme");
     switch (currentTheme) {
@@ -42759,7 +42978,7 @@ function useTheme() {
         break;
     }
   };
-  useEffect59(() => {
+  useEffect60(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {