@noya-app/noya-designsystem 0.1.82 → 0.1.83

package/dist/index.mjs

@@ -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 useRef94 = React321.useRef;
     var useEffect61 = React321.useEffect;
-    var useMemo157 = React321.useMemo;
+    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) {
@@ -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, useEffect61 = 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) {
@@ -30949,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"
 });
@@ -30962,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;
@@ -30993,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
@@ -31001,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
@@ -31018,34 +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 [resizeTrigger, setResizeTrigger] = useState61(0);
-  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;
@@ -31063,16 +31068,134 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       width: itemRect.width
     });
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length, resizeTrigger]);
+  }, [containerRef, itemRefs, selectedIndex, variant, itemCount, isCompact]);
+  useLayoutEffect10(measureIndicator, [measureIndicator]);
   useLayoutEffect10(() => {
     const container = containerRef.current;
     if (!container || variant !== "default") return;
     const observer = new ResizeObserver(() => {
-      setResizeTrigger((prev) => prev + 1);
+      isResizingRef.current = true;
+      clearTimeout(resizeTimeoutRef.current);
+      resizeTimeoutRef.current = setTimeout(() => {
+        isResizingRef.current = false;
+      }, RESIZE_SETTLE_MS);
+      measureIndicator();
     });
     observer.observe(container);
-    return () => observer.disconnect();
-  }, [variant]);
+    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;
@@ -31085,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(
@@ -31099,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",
@@ -31118,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,
@@ -41231,8 +41354,8 @@ import React317, {
   memo as memo40,
   useCallback as useCallback74,
   useImperativeHandle as useImperativeHandle18,
-  useMemo as useMemo155,
-  useRef as useRef94
+  useMemo as useMemo154,
+  useRef as useRef93
 } from "react";
 
 // src/components/OverlayToolbar.tsx
@@ -41304,16 +41427,7 @@ function OverlayToolbar({
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React312, { useMemo as useMemo152, useRef as useRef90, useState as useState76 } from "react";
-
-// src/components/workspace/constants.ts
-var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
-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";
@@ -41628,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({
@@ -41673,166 +41760,138 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   rightTabItems,
   rightTabValue,
   onChangeRightTab,
-  onChangeLeftTab,
-  compactDrawerMenu
+  onChangeLeftTab
 }) {
-  const portalContainer = useRef90(null);
   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 useCallback73, useMemo as useMemo154, useRef as useRef93, useState as useState78 } 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 useEffect58,
   useId as useId5,
@@ -41854,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();
@@ -41879,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(
@@ -41895,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,
@@ -41910,13 +41989,13 @@ var Panel = forwardRef124(
 );
 
 // src/components/resizablePanels/PanelGroup.tsx
-import React314, {
+import React313, {
   forwardRef as forwardRef125,
   useCallback as useCallback71,
   useEffect as useEffect59,
   useImperativeHandle as useImperativeHandle17,
-  useMemo as useMemo153,
-  useRef as useRef91,
+  useMemo as useMemo152,
+  useRef as useRef90,
   useState as useState77
 } from "react";
 function getStorageKey(autoSaveId) {
@@ -41938,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] = useState77(/* @__PURE__ */ new Map());
-    const panelsRef = useRef91(panels);
+    const panelsRef = useRef90(panels);
     panelsRef.current = panels;
     const [resizing, setResizing] = useState77(null);
-    const sortedPanels = useMemo153(() => {
+    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;
@@ -41998,8 +42077,13 @@ var PanelGroup = forwardRef125(
           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,
@@ -42233,7 +42317,7 @@ var PanelGroup = forwardRef125(
         });
       }
     }));
-    const contextValue = useMemo153(
+    const contextValue = useMemo152(
       () => ({
         registerPanel,
         unregisterPanel,
@@ -42259,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,
@@ -42277,14 +42361,14 @@ var PanelGroup = forwardRef125(
 );
 
 // src/components/resizablePanels/PanelResizeHandle.tsx
-import React315, { useCallback as useCallback72, 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 handleRef = useRef91(null);
   const handleMouseDown = useCallback72(
     (e) => {
       if (disabled2 || !context) return;
@@ -42296,7 +42380,7 @@ function PanelResizeHandle({
   if (!context) {
     return null;
   }
-  return /* @__PURE__ */ React315.createElement(
+  return /* @__PURE__ */ React314.createElement(
     "div",
     {
       ref: handleRef,
@@ -42309,7 +42393,7 @@ function PanelResizeHandle({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ React315.createElement(
+    /* @__PURE__ */ React314.createElement(
       "div",
       {
         style: {
@@ -42325,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,
@@ -42341,30 +42451,54 @@ 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 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] = useState78(
     rightSidebarOptions.defaultCollapsed ?? false
   );
+  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 = useCallback73(
     (value) => {
@@ -42400,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,
@@ -42413,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,
@@ -42435,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,
       {
@@ -42446,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,
@@ -42459,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
@@ -42551,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);
@@ -42569,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,
@@ -42648,24 +42790,24 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       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
     };
@@ -42687,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,
@@ -42705,7 +42847,7 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       leftShowTabs
     ]
   );
-  const rightSidebarOptions = useMemo155(
+  const rightSidebarOptions = useMemo154(
     () => ({
       minSize: rightSidebarMinPixels,
       maxSize: rightSidebarMaxPixels,
@@ -42756,7 +42898,9 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         autoSavePrefix,
         leftSidebarRef,
         rightSidebarRef,
-        compactDrawerMenu
+        onLeftSidebarStateChange,
+        onRightSidebarStateChange,
+        shouldAutoSave
       }
     ), isOverlay && /* @__PURE__ */ React317.createElement(
       OverlayToolbar,