@noya-app/noya-designsystem 0.1.82 → 0.1.83

package/dist/index.js

@@ -170,17 +170,17 @@ var require_with_selector_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
     var useSyncExternalStore3 = shim.useSyncExternalStore;
-    var useRef95 = React321.useRef;
+    var useRef94 = React321.useRef;
     var useEffect61 = React321.useEffect;
-    var useMemo157 = React321.useMemo;
+    var useMemo156 = React321.useMemo;
     var useDebugValue2 = React321.useDebugValue;
     exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-      var instRef = useRef95(null);
+      var instRef = useRef94(null);
       if (null === instRef.current) {
         var inst = { hasValue: false, value: null };
         instRef.current = inst;
       } else inst = instRef.current;
-      instRef = useMemo157(
+      instRef = useMemo156(
         function() {
           function memoizedSelector(nextSnapshot) {
             if (!hasMemo) {
@@ -237,14 +237,14 @@ var require_with_selector_development = __commonJS({
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React321 = require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore3 = shim.useSyncExternalStore, useRef95 = React321.useRef, 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;
       exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-        var instRef = useRef95(null);
+        var instRef = useRef94(null);
         if (null === instRef.current) {
           var inst = { hasValue: false, value: null };
           instRef.current = inst;
         } else inst = instRef.current;
-        instRef = useMemo157(
+        instRef = useMemo156(
           function() {
             function memoizedSelector(nextSnapshot) {
               if (!hasMemo) {
@@ -31052,6 +31052,12 @@ function applySkinTone(emoji, skinTone) {
 
 // src/components/SegmentedControl.tsx
 var import_react81 = __toESM(require("react"));
+var CONTAINER_PADDING_X = "n-px-0.5";
+var CONTAINER_PADDING_X_PX = 4;
+var ITEM_PADDING = "n-px-input-padding-x";
+var ITEM_PADDING_PX = 16;
+var EXPANSION_THRESHOLD_PX = 20;
+var RESIZE_SETTLE_MS = 150;
 var SegmentedControlContext = (0, import_react81.createContext)({
   colorScheme: "primary"
 });
@@ -31065,7 +31071,14 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
   variant = "default",
   ...props
 }, forwardedRef) {
-  const { colorScheme, onSelect, itemWidth = "auto" } = (0, import_react81.useContext)(SegmentedControlContext);
+  const {
+    colorScheme,
+    onSelect,
+    itemWidth = "auto",
+    isCompact
+  } = (0, import_react81.useContext)(SegmentedControlContext);
+  const showTitle = !(isCompact && icon);
+  const effectiveTooltip = !showTitle && !tooltip ? title : tooltip;
   const handlePointerDown = (0, import_react81.useCallback)(
     (event2) => {
       if (disabled2) return;
@@ -31096,7 +31109,7 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
         // checked
         variant === "tabs" ? "data-[pressed]:n-text-primary" : variant === "buttons" ? "active:n-text-button-text-active active:n-bg-button-background-active data-[pressed]:n-text-button-text-active data-[pressed]:n-bg-button-background-active" : variant === "default" ? (
           // default variant: only text color, background handled by sliding indicator
-          colorScheme === "secondary" ? "data-[pressed]:n-text-white" : colorScheme === "primary" ? "data-[pressed]:n-text-white" : "data-[pressed]:n-text-segmented-control-item-active-text"
+          colorScheme === "secondary" || colorScheme === "primary" ? "data-[pressed]:n-text-white" : "data-[pressed]:n-text-segmented-control-item-active-text"
         ) : colorScheme === "secondary" ? "data-[pressed]:n-bg-secondary data-[pressed]:n-text-white" : colorScheme === "primary" ? "data-[pressed]:n-bg-primary data-[pressed]:n-text-white" : "data-[pressed]:n-bg-segmented-control-item-active-background data-[pressed]:n-text-segmented-control-item-active-text",
         "focus-visible:n-z-interactable",
         // checked default (all colorSchemes) - hide separators near selected
@@ -31104,10 +31117,12 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
         // hover
         variant === "buttons" && "hover:n-bg-button-background-hover",
         // spacing and borders
-        "n-px-input-padding-x",
+        ITEM_PADDING,
         variant === "default" ? "n-rounded after:n-content-[''] after:n-absolute after:n-right-0 after:n-top-0.5 after:n-bottom-0.5 after:n-w-px after:n-bg-divider last:after:n-hidden" : variant === "buttons" ? "n-rounded-sm n-max-w-fit" : "n-border-y-2 n-border-y-transparent data-[pressed]:n-border-b-primary",
-        // icon only buttons
+        // icon only buttons (explicit or due to compact mode)
         variant === "buttons" && title === "" && icon && "n-min-w-input-height",
+        // icon only in compact mode
+        isCompact && icon && "n-min-w-input-height",
         className
       ),
       ...props
@@ -31121,34 +31136,24 @@ var SegmentedControlItem = (0, import_react81.forwardRef)(function SegmentedCont
         )
       },
       icon && renderIcon(icon),
-      title
+      showTitle && title
     )
   );
-  return tooltip ? /* @__PURE__ */ import_react81.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return effectiveTooltip ? /* @__PURE__ */ import_react81.default.createElement(Tooltip, { content: effectiveTooltip }, itemElement) : itemElement;
 });
-var SegmentedControl = memoGeneric(function SegmentedControl2({
-  id: idProp,
-  value,
-  onValueChange,
-  colorScheme,
-  allowEmpty,
-  items,
-  variant = "default",
-  className,
-  style: style2,
-  itemWidth = "auto"
+function useIndicatorPosition({
+  containerRef,
+  itemRefs,
+  selectedIndex,
+  variant,
+  itemCount,
+  isCompact
 }) {
-  const { fieldId: id } = useLabel({ fieldId: idProp });
   const hasInitialized = (0, import_react81.useRef)(false);
-  const containerRef = (0, import_react81.useRef)(null);
-  const itemRefs = (0, import_react81.useRef)([]);
+  const isResizingRef = (0, import_react81.useRef)(false);
+  const resizeTimeoutRef = (0, import_react81.useRef)(void 0);
   const [indicatorStyle, setIndicatorStyle] = (0, import_react81.useState)(null);
-  const [resizeTrigger, setResizeTrigger] = (0, import_react81.useState)(0);
-  const selectedIndex = (0, import_react81.useMemo)(() => {
-    if (!value) return -1;
-    return items.findIndex((item) => item.value === value);
-  }, [value, items]);
-  (0, import_react81.useLayoutEffect)(() => {
+  const measureIndicator = (0, import_react81.useCallback)(() => {
     if (variant !== "default" || selectedIndex < 0) {
       setIndicatorStyle(null);
       return;
@@ -31166,16 +31171,134 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       width: itemRect.width
     });
     hasInitialized.current = true;
-  }, [selectedIndex, variant, items.length, resizeTrigger]);
+  }, [containerRef, itemRefs, selectedIndex, variant, itemCount, isCompact]);
+  (0, import_react81.useLayoutEffect)(measureIndicator, [measureIndicator]);
   (0, import_react81.useLayoutEffect)(() => {
     const container = containerRef.current;
     if (!container || variant !== "default") return;
     const observer = new ResizeObserver(() => {
-      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 = (0, import_react81.useRef)(null);
+  const isCompactRef = (0, import_react81.useRef)(false);
+  const [isCompact, setIsCompact] = (0, import_react81.useState)(false);
+  const allItemsHaveIcons = (0, import_react81.useMemo)(
+    () => items.every((item) => item.icon),
+    [items]
+  );
+  const itemsKey = (0, import_react81.useMemo)(
+    () => items.map((item) => `${item.value}-${item.icon}-${item.title}`).join("|"),
+    [items]
+  );
+  (0, import_react81.useLayoutEffect)(() => {
+    expandedWidthRef.current = null;
+    isCompactRef.current = false;
+    setIsCompact(false);
+  }, [itemsKey]);
+  (0, import_react81.useLayoutEffect)(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (!container || variant !== "default" || !allItemsHaveIcons) {
+      return;
+    }
+    const validItems = itemRefs.current.filter(Boolean);
+    if (validItems.length !== items.length) return;
+    const availableWidth = (containerSize?.width ?? container.clientWidth) - CONTAINER_PADDING_X_PX;
+    if (!isCompactRef.current) {
+      const isOverflowing = validItems.some((item) => {
+        const span = item.querySelector("span");
+        if (!span) return false;
+        const contentWidth = span.scrollWidth;
+        const availableInButton = item.clientWidth - ITEM_PADDING_PX;
+        return contentWidth >= availableInButton - 1;
+      });
+      if (isOverflowing) {
+        const totalItemsWidth = validItems.reduce((sum, item) => {
+          const span = item.querySelector("span");
+          const contentWidth = span ? span.scrollWidth : 0;
+          return sum + contentWidth + ITEM_PADDING_PX;
+        }, 0);
+        expandedWidthRef.current = totalItemsWidth;
+        isCompactRef.current = true;
+        setIsCompact(true);
+      }
+    } else {
+      const expandedWidth = expandedWidthRef.current;
+      if (!expandedWidth) return;
+      if (availableWidth >= expandedWidth + EXPANSION_THRESHOLD_PX) {
+        isCompactRef.current = false;
+        expandedWidthRef.current = null;
+        setIsCompact(false);
+      }
+    }
+  }, [
+    enabled,
+    containerRef,
+    itemRefs,
+    variant,
+    allItemsHaveIcons,
+    containerSize?.width,
+    itemsKey,
+    items.length
+  ]);
+  return isCompact;
+}
+var SegmentedControl = memoGeneric(function SegmentedControl2({
+  id: idProp,
+  value,
+  onValueChange,
+  colorScheme,
+  allowEmpty,
+  items,
+  variant = "default",
+  className,
+  style: style2,
+  itemWidth = "auto",
+  enableCompactMode = false
+}) {
+  const { fieldId: id } = useLabel({ fieldId: idProp });
+  const containerRef = (0, import_react81.useRef)(null);
+  const itemRefs = (0, import_react81.useRef)([]);
+  const selectedIndex = (0, import_react81.useMemo)(() => {
+    if (!value) return -1;
+    return items.findIndex((item) => item.value === value);
+  }, [value, items]);
+  const isCompact = useCompactMode({
+    containerRef,
+    itemRefs,
+    variant,
+    items,
+    enabled: enableCompactMode
+  });
+  const { indicatorStyle, hasInitialized, isResizingRef } = useIndicatorPosition({
+    containerRef,
+    itemRefs,
+    selectedIndex,
+    variant,
+    itemCount: items.length,
+    isCompact
+  });
   const handleSelect = (0, import_react81.useCallback)(
     (newValue) => {
       if (!allowEmpty && !newValue) return;
@@ -31188,8 +31311,8 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     [handleSelect]
   );
   const contextValue = (0, import_react81.useMemo)(
-    () => ({ colorScheme, onSelect: handleSelect, itemWidth }),
-    [colorScheme, handleSelect, itemWidth]
+    () => ({ colorScheme, onSelect: handleSelect, itemWidth, isCompact }),
+    [colorScheme, handleSelect, itemWidth, isCompact]
   );
   const indicatorBgClass = colorScheme === "secondary" ? "n-bg-secondary" : colorScheme === "primary" ? "n-bg-primary" : "n-bg-segmented-control-item-active-background";
   return /* @__PURE__ */ import_react81.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react81.default.createElement(
@@ -31202,7 +31325,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       className: cx(
         "n-appearance-none n-relative n-outline-none",
         variant === "default" && (itemWidth === "fit" ? "n-flex n-w-fit" : "n-grid"),
-        variant === "default" && "n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 n-px-0.5",
+        variant === "default" && `n-min-h-input-height n-bg-input-background n-rounded n-py-0.5 ${CONTAINER_PADDING_X}`,
         variant !== "default" && "n-flex",
         variant === "tabs" && "n-gap-1.5 n-min-h-[33px]",
         variant === "buttons" && "n-gap-1.5 n-min-h-input-height",
@@ -31221,7 +31344,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         className: cx(
           "n-absolute n-top-0.5 n-bottom-0.5 n-rounded n-shadow-segment n-pointer-events-none",
           indicatorBgClass,
-          hasInitialized.current && "n-transition-[left,width] n-duration-200 n-ease-out"
+          hasInitialized.current && !isResizingRef.current && "n-transition-[left,width] n-duration-200 n-ease-out"
         ),
         style: {
           left: indicatorStyle.left,
@@ -41367,15 +41490,6 @@ function OverlayToolbar({
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-var import_react114 = __toESM(require("react"));
-
-// src/components/workspace/constants.ts
-var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
-var LEFT_SIDEBAR_ID = "editor-1-left-sidebar";
-var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
-var CONTENT_AREA_ID = "editor-2-content-area";
-
-// src/components/workspace/VerticalTabMenu.tsx
 var import_react113 = __toESM(require("react"));
 
 // src/components/Toolbar.tsx
@@ -41688,38 +41802,11 @@ function Toolbar({
   );
 }
 
-// src/components/workspace/VerticalTabMenu.tsx
-var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
-  items,
-  activeValue,
-  isSidebarCollapsed,
-  onChange,
-  tooltipSide
-}) {
-  const style2 = (0, import_react113.useMemo)(() => {
-    return {
-      [cssVarNames.colors.inputBackground]: "transparent",
-      [cssVarNames.colors.buttonBackground]: "transparent"
-    };
-  }, []);
-  return /* @__PURE__ */ import_react113.default.createElement(
-    "div",
-    {
-      className: "n-w-[calc(var(--n-toolbar-height)+1px)] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
-      style: style2
-    },
-    /* @__PURE__ */ import_react113.default.createElement(
-      ToolbarMenu,
-      {
-        items,
-        activeValue: isSidebarCollapsed ? void 0 : activeValue,
-        onSelectMenuItem: onChange,
-        tooltipSide,
-        displayFilter: "iconOnly"
-      }
-    )
-  );
-});
+// src/components/workspace/constants.ts
+var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
+var LEFT_SIDEBAR_ID = "editor-1-left-sidebar";
+var RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
+var CONTENT_AREA_ID = "editor-2-content-area";
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
 var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
@@ -41733,158 +41820,130 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   rightTabItems,
   rightTabValue,
   onChangeRightTab,
-  onChangeLeftTab,
-  compactDrawerMenu
+  onChangeLeftTab
 }) {
-  const portalContainer = (0, import_react114.useRef)(null);
-  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react114.useState)({
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react113.useState)({
     leftSidebarCollapsed: true,
     rightSidebarCollapsed: true
   });
-  const allTabItems = (0, import_react114.useMemo)(
+  import_react113.default.useImperativeHandle(
+    leftSidebarRef,
+    () => ({
+      expand: () => setLayoutState((prev) => ({
+        ...prev,
+        leftSidebarCollapsed: false,
+        rightSidebarCollapsed: true
+      })),
+      collapse: () => setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true })),
+      isExpanded: () => !leftSidebarCollapsed
+    }),
+    [leftSidebarCollapsed]
+  );
+  import_react113.default.useImperativeHandle(
+    rightSidebarRef,
+    () => ({
+      expand: () => setLayoutState((prev) => ({
+        ...prev,
+        rightSidebarCollapsed: false,
+        leftSidebarCollapsed: true
+      })),
+      collapse: () => setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true })),
+      isExpanded: () => !rightSidebarCollapsed
+    }),
+    [rightSidebarCollapsed]
+  );
+  const allTabItems = (0, import_react113.useMemo)(
     () => [
       ...leftPanel ? leftTabItems ?? [] : [],
       ...rightPanel ? rightTabItems ?? [] : []
     ],
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
-  const hasTabs = allTabItems.length > 0;
-  const allSelectableTabItems = (0, import_react114.useMemo)(
+  const allSelectableTabItems = (0, import_react113.useMemo)(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
-  const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
-  const leftSelectableTabItems = (0, import_react114.useMemo)(
+  const hasTabs = allSelectableTabItems.length > 0;
+  const leftSelectableTabItems = (0, import_react113.useMemo)(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
   );
-  const rightSelectableTabItems = (0, import_react114.useMemo)(
+  const rightSelectableTabItems = (0, import_react113.useMemo)(
     () => (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__ */ import_react114.default.createElement(
+  const activeDrawerPanel = !leftSidebarCollapsed ? leftPanel : !rightSidebarCollapsed ? rightPanel : null;
+  const isDrawerOpen = activeDrawerPanel !== null;
+  const activeTabValue = !leftSidebarCollapsed ? leftTabValue : !rightSidebarCollapsed ? rightTabValue : void 0;
+  const toolbarMenuItems = (0, import_react113.useMemo)(
+    () => allSelectableTabItems.map((item) => ({
+      ...item,
+      checked: activeTabValue === item.value
+    })),
+    [allSelectableTabItems, activeTabValue]
+  );
+  return /* @__PURE__ */ import_react113.default.createElement(
     "div",
     {
-      ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
-      className: "n-flex n-flex-1 n-relative focus:n-outline-none"
+      className: "n-flex n-flex-col n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react114.default.createElement(import_react114.default.Fragment, null, /* @__PURE__ */ import_react114.default.createElement(
-      VerticalTabMenu,
-      {
-        tooltipSide: "right",
-        items: allTabItems,
-        activeValue,
-        isSidebarCollapsed,
-        onChange: (value) => handleSelectTab(value)
-      }
-    ), /* @__PURE__ */ import_react114.default.createElement(DividerVertical, { className: "n-h-full" })),
-    useCompactInToolbar && /* @__PURE__ */ import_react114.default.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, allSelectableTabItems[0] && /* @__PURE__ */ import_react114.default.createElement(
-      Button,
+    hasTabs && /* @__PURE__ */ import_react113.default.createElement(import_react113.default.Fragment, null, /* @__PURE__ */ import_react113.default.createElement(
+      "div",
       {
-        variant: "none",
-        className: "n-rounded",
+        className: "n-flex n-flex-row n-items-center n-gap-1 n-px-2 n-py-1.5 n-bg-sidebar-background n-flex-none",
         style: {
-          width: "var(--n-input-height)",
-          height: "var(--n-input-height)"
-        },
-        icon: allSelectableTabItems[0].icon,
-        tooltip: allSelectableTabItems[0].tooltip ?? allSelectableTabItems[0].title,
-        active: (() => {
-          const value = allSelectableTabItems[0].value;
-          const isLeftItem = leftSelectableTabItems.some(
-            (i) => i.value === value
-          );
-          const isRightItem = rightSelectableTabItems.some(
-            (i) => i.value === value
-          );
-          return isLeftItem ? !leftSidebarCollapsed : isRightItem ? !rightSidebarCollapsed : false;
-        })(),
-        onClick: () => {
-          const value = allSelectableTabItems[0].value;
-          handleSelectTab(value);
-        }
-      }
-    )),
-    /* @__PURE__ */ import_react114.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
-    leftPanel && /* @__PURE__ */ import_react114.default.createElement(
-      Drawer,
-      {
-        modal: false,
-        ref: leftSidebarRef,
-        className: "n-flex-1",
-        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
-        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
-        open: !leftSidebarCollapsed,
-        positioning: "absolute",
-        side: "left",
-        trigger: null,
-        portalContainer: portalContainer.current,
-        onOpenChange: (open2) => {
-          setLayoutState({
-            leftSidebarCollapsed: !open2,
-            rightSidebarCollapsed
-          });
+          [cssVarNames.colors.inputBackground]: "transparent",
+          [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
-      leftPanel
-    ),
-    rightPanel && /* @__PURE__ */ import_react114.default.createElement(
-      Drawer,
-      {
-        id: RIGHT_SIDEBAR_ID,
-        modal: false,
-        ref: rightSidebarRef,
-        className: "n-flex-1",
-        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
-        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
-        open: !rightSidebarCollapsed,
-        positioning: "absolute",
-        side: "left",
-        trigger: null,
-        portalContainer: portalContainer.current,
-        onOpenChange: (open2) => {
-          setLayoutState({
-            leftSidebarCollapsed,
-            rightSidebarCollapsed: !open2
-          });
+      /* @__PURE__ */ import_react113.default.createElement(
+        ToolbarMenu,
+        {
+          items: toolbarMenuItems,
+          onSelectMenuItem: handleSelectTab
         }
-      },
-      rightPanel
-    )
+      )
+    ), /* @__PURE__ */ import_react113.default.createElement(Divider, null)),
+    /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-1 n-flex n-flex-col n-relative n-min-h-0" }, isDrawerOpen && /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-absolute n-inset-0 n-z-20 n-flex n-flex-col" }, /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-none n-max-h-[50vh] n-overflow-auto n-bg-sidebar-background n-border-b n-border-divider-strong n-shadow-lg" }, activeDrawerPanel), /* @__PURE__ */ import_react113.default.createElement(
+      "div",
+      {
+        className: "n-flex-1 n-bg-black/30",
+        onClick: () => setLayoutState({
+          leftSidebarCollapsed: true,
+          rightSidebarCollapsed: true
+        })
+      }
+    )), /* @__PURE__ */ import_react113.default.createElement("div", { className: "n-flex-1 n-flex n-relative n-min-h-0" }, centerPanel))
   );
 });
 
@@ -41892,15 +41951,15 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
 var import_react119 = __toESM(require("react"));
 
 // src/components/resizablePanels/Panel.tsx
-var import_react116 = __toESM(require("react"));
+var import_react115 = __toESM(require("react"));
 
 // src/components/resizablePanels/PanelGroupContext.tsx
-var import_react115 = require("react");
-var PanelGroupContext = (0, import_react115.createContext)(
+var import_react114 = require("react");
+var PanelGroupContext = (0, import_react114.createContext)(
   null
 );
 function usePanelGroupContext() {
-  const context = (0, import_react115.useContext)(PanelGroupContext);
+  const context = (0, import_react114.useContext)(PanelGroupContext);
   if (!context) {
     throw new Error("Panel must be used within a PanelGroup");
   }
@@ -41908,9 +41967,19 @@ function usePanelGroupContext() {
 }
 
 // src/components/resizablePanels/Panel.tsx
-var Panel = (0, import_react116.forwardRef)(
-  function Panel2({ id: propId, order, className, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, children }, ref) {
-    const generatedId = (0, import_react116.useId)();
+var Panel = (0, import_react115.forwardRef)(
+  function Panel2({
+    id: propId,
+    order,
+    className,
+    defaultSize,
+    minSize,
+    maxSize,
+    collapsible,
+    defaultCollapsed,
+    children
+  }, ref) {
+    const generatedId = (0, import_react115.useId)();
     const id = propId ?? generatedId;
     const context = usePanelGroupContext();
     const {
@@ -41921,7 +41990,7 @@ var Panel = (0, import_react116.forwardRef)(
       collapsePanel,
       isPanelExpanded
     } = context;
-    (0, import_react116.useEffect)(() => {
+    (0, import_react115.useEffect)(() => {
       registerPanel({
         id,
         order,
@@ -41934,10 +42003,20 @@ var Panel = (0, import_react116.forwardRef)(
       return () => {
         unregisterPanel(id);
       };
-    }, [id, order, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, registerPanel, unregisterPanel]);
+    }, [
+      id,
+      order,
+      defaultSize,
+      minSize,
+      maxSize,
+      collapsible,
+      defaultCollapsed,
+      registerPanel,
+      unregisterPanel
+    ]);
     const size4 = getPanelSize(id);
     const isFlexPanel = defaultSize === void 0;
-    (0, import_react116.useImperativeHandle)(
+    (0, import_react115.useImperativeHandle)(
       ref,
       () => ({
         expand: () => expandPanel(id),
@@ -41950,7 +42029,7 @@ var Panel = (0, import_react116.forwardRef)(
     if (size4 === 0 && !isFlexPanel) {
       return null;
     }
-    return /* @__PURE__ */ import_react116.default.createElement(
+    return /* @__PURE__ */ import_react115.default.createElement(
       "div",
       {
         "data-panel-id": id,
@@ -41965,7 +42044,7 @@ var Panel = (0, import_react116.forwardRef)(
 );
 
 // src/components/resizablePanels/PanelGroup.tsx
-var import_react117 = __toESM(require("react"));
+var import_react116 = __toESM(require("react"));
 function getStorageKey(autoSaveId) {
   return `noya-panels:${autoSaveId}`;
 }
@@ -41983,19 +42062,19 @@ function saveSizes(autoSaveId, sizes) {
   if (!autoSaveId) return;
   clientStorage.setItem(getStorageKey(autoSaveId), JSON.stringify(sizes));
 }
-var PanelGroup = (0, import_react117.forwardRef)(
+var PanelGroup = (0, import_react116.forwardRef)(
   function PanelGroup2({ id, className, direction, autoSaveId, onLayout, children }, ref) {
-    const containerRef = (0, import_react117.useRef)(null);
+    const containerRef = (0, import_react116.useRef)(null);
     const containerSize = useSize(containerRef);
     const containerWidth = containerSize?.width ?? 0;
-    const [panels, setPanels] = (0, import_react117.useState)(/* @__PURE__ */ new Map());
-    const panelsRef = (0, import_react117.useRef)(panels);
+    const [panels, setPanels] = (0, import_react116.useState)(/* @__PURE__ */ new Map());
+    const panelsRef = (0, import_react116.useRef)(panels);
     panelsRef.current = panels;
-    const [resizing, setResizing] = (0, import_react117.useState)(null);
-    const sortedPanels = (0, import_react117.useMemo)(() => {
+    const [resizing, setResizing] = (0, import_react116.useState)(null);
+    const sortedPanels = (0, import_react116.useMemo)(() => {
       return Array.from(panels.values()).sort((a, b) => a.order - b.order);
     }, [panels]);
-    const flexPanelId = (0, import_react117.useMemo)(() => {
+    const flexPanelId = (0, import_react116.useMemo)(() => {
       for (const panel of sortedPanels) {
         if (panel.defaultSize === void 0) {
           return panel.id;
@@ -42003,7 +42082,7 @@ var PanelGroup = (0, import_react117.forwardRef)(
       }
       return null;
     }, [sortedPanels]);
-    const calculateLayout = (0, import_react117.useCallback)(
+    const calculateLayout = (0, import_react116.useCallback)(
       (panelStates, width) => {
         if (width === 0) return panelStates;
         const sorted = Array.from(panelStates.values()).sort(
@@ -42028,25 +42107,30 @@ var PanelGroup = (0, import_react117.forwardRef)(
       },
       []
     );
-    (0, import_react117.useEffect)(() => {
+    (0, import_react116.useEffect)(() => {
       if (containerWidth > 0 && panels.size > 0) {
         setPanels((prev) => calculateLayout(prev, containerWidth));
       }
     }, [containerWidth, calculateLayout, panels.size]);
-    (0, import_react117.useEffect)(() => {
+    (0, import_react116.useEffect)(() => {
       if (onLayout && sortedPanels.length > 0) {
         const sizes = sortedPanels.map((p) => p.collapsed ? 0 : p.size);
         onLayout(sizes);
       }
     }, [onLayout, sortedPanels]);
-    const registerPanel = (0, import_react117.useCallback)(
+    const registerPanel = (0, import_react116.useCallback)(
       (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,
@@ -42059,26 +42143,26 @@ var PanelGroup = (0, import_react117.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const unregisterPanel = (0, import_react117.useCallback)((panelId) => {
+    const unregisterPanel = (0, import_react116.useCallback)((panelId) => {
       setPanels((prev) => {
         const newPanels = new Map(prev);
         newPanels.delete(panelId);
         return newPanels;
       });
     }, []);
-    const getPanelSize = (0, import_react117.useCallback)(
+    const getPanelSize = (0, import_react116.useCallback)(
       (panelId) => {
         return panels.get(panelId)?.size ?? 0;
       },
       [panels]
     );
-    const getPanelIndex = (0, import_react117.useCallback)(
+    const getPanelIndex = (0, import_react116.useCallback)(
       (panelId) => {
         return sortedPanels.findIndex((p) => p.id === panelId);
       },
       [sortedPanels]
     );
-    const setPanelSize = (0, import_react117.useCallback)(
+    const setPanelSize = (0, import_react116.useCallback)(
       (panelId, size4) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42106,7 +42190,7 @@ var PanelGroup = (0, import_react117.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const expandPanel = (0, import_react117.useCallback)(
+    const expandPanel = (0, import_react116.useCallback)(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42131,7 +42215,7 @@ var PanelGroup = (0, import_react117.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const collapsePanel = (0, import_react117.useCallback)(
+    const collapsePanel = (0, import_react116.useCallback)(
       (panelId) => {
         setPanels((prev) => {
           const panel = prev.get(panelId);
@@ -42155,14 +42239,14 @@ var PanelGroup = (0, import_react117.forwardRef)(
       },
       [autoSaveId, calculateLayout, containerWidth]
     );
-    const isPanelExpanded = (0, import_react117.useCallback)(
+    const isPanelExpanded = (0, import_react116.useCallback)(
       (panelId) => {
         const panel = panels.get(panelId);
         return panel ? !panel.collapsed : false;
       },
       [panels]
     );
-    const startResize = (0, import_react117.useCallback)(
+    const startResize = (0, import_react116.useCallback)(
       (handleIndex, startX) => {
         const startSizes = sortedPanels.map((p) => p.size);
         setResizing({
@@ -42173,7 +42257,7 @@ var PanelGroup = (0, import_react117.forwardRef)(
       },
       [sortedPanels]
     );
-    (0, import_react117.useEffect)(() => {
+    (0, import_react116.useEffect)(() => {
       if (!resizing) return;
       const handleMouseMove = (e) => {
         const delta = e.clientX - resizing.startX;
@@ -42262,7 +42346,7 @@ var PanelGroup = (0, import_react117.forwardRef)(
       containerWidth,
       flexPanelId
     ]);
-    (0, import_react117.useImperativeHandle)(ref, () => ({
+    (0, import_react116.useImperativeHandle)(ref, () => ({
       getLayout: () => sortedPanels.map((p) => p.size),
       setLayout: (sizes) => {
         setPanels((prev) => {
@@ -42280,7 +42364,7 @@ var PanelGroup = (0, import_react117.forwardRef)(
         });
       }
     }));
-    const contextValue = (0, import_react117.useMemo)(
+    const contextValue = (0, import_react116.useMemo)(
       () => ({
         registerPanel,
         unregisterPanel,
@@ -42306,7 +42390,7 @@ var PanelGroup = (0, import_react117.forwardRef)(
         containerWidth
       ]
     );
-    return /* @__PURE__ */ import_react117.default.createElement(PanelGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react117.default.createElement(
+    return /* @__PURE__ */ import_react116.default.createElement(PanelGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react116.default.createElement(
       "div",
       {
         ref: containerRef,
@@ -42324,15 +42408,15 @@ var PanelGroup = (0, import_react117.forwardRef)(
 );
 
 // src/components/resizablePanels/PanelResizeHandle.tsx
-var import_react118 = __toESM(require("react"));
+var import_react117 = __toESM(require("react"));
 function PanelResizeHandle({
   className,
   disabled: disabled2,
   index: index2
 }) {
-  const context = (0, import_react118.useContext)(PanelGroupContext);
-  const handleRef = (0, import_react118.useRef)(null);
-  const handleMouseDown = (0, import_react118.useCallback)(
+  const context = (0, import_react117.useContext)(PanelGroupContext);
+  const handleRef = (0, import_react117.useRef)(null);
+  const handleMouseDown = (0, import_react117.useCallback)(
     (e) => {
       if (disabled2 || !context) return;
       e.preventDefault();
@@ -42343,7 +42427,7 @@ function PanelResizeHandle({
   if (!context) {
     return null;
   }
-  return /* @__PURE__ */ import_react118.default.createElement(
+  return /* @__PURE__ */ import_react117.default.createElement(
     "div",
     {
       ref: handleRef,
@@ -42356,7 +42440,7 @@ function PanelResizeHandle({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ import_react118.default.createElement(
+    /* @__PURE__ */ import_react117.default.createElement(
       "div",
       {
         style: {
@@ -42372,6 +42456,32 @@ function PanelResizeHandle({
   );
 }
 
+// src/components/workspace/HorizontalTabBar.tsx
+var import_react118 = __toESM(require("react"));
+var HorizontalTabBar = memoGeneric(function HorizontalTabBar2({ items, activeValue, onChange }) {
+  const selectableItems = items.filter(isSelectableMenuItem);
+  if (selectableItems.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react118.default.createElement("div", { className: "n-flex n-flex-col n-bg-sidebar-background n-flex-none" }, /* @__PURE__ */ import_react118.default.createElement("div", { className: "n-flex n-flex-row n-px-3 n-py-3" }, /* @__PURE__ */ import_react118.default.createElement(
+    SegmentedControl,
+    {
+      enableCompactMode: true,
+      className: "n-flex-1",
+      value: activeValue,
+      onValueChange: onChange,
+      variant: "default",
+      items: selectableItems.map((item) => ({
+        value: item.value,
+        title: item.title,
+        icon: item.icon,
+        tooltip: item.tooltip,
+        disabled: item.disabled
+      }))
+    }
+  )));
+});
+
 // src/components/workspace/PanelWorkspaceLayout.tsx
 var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   leftPanel,
@@ -42388,30 +42498,54 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
-  compactDrawerMenu
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave = true
 }) {
   const panelGroupRef = (0, import_react119.useRef)(null);
+  const containerRef = (0, import_react119.useRef)(null);
   const autoSaveId = (0, import_react119.useMemo)(() => {
-    return autoSavePrefix ? `${autoSavePrefix}--v3--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
-  }, [autoSavePrefix]);
+    if (!shouldAutoSave) return void 0;
+    return autoSavePrefix ? `${autoSavePrefix}--v5--${EDITOR_PANEL_GROUP_ID}` : Math.random().toString(36).substring(2, 15);
+  }, [autoSavePrefix, shouldAutoSave]);
   const [leftSidebarCollapsed, setLeftSidebarCollapsed] = (0, import_react119.useState)(
     leftSidebarOptions.defaultCollapsed ?? false
   );
   const [rightSidebarCollapsed, setRightSidebarCollapsed] = (0, import_react119.useState)(
     rightSidebarOptions.defaultCollapsed ?? false
   );
+  const prevLeftSidebarState = (0, import_react119.useRef)(null);
+  const prevRightSidebarState = (0, import_react119.useRef)(null);
   const handleLayoutChange = (0, import_react119.useCallback)(
     (sizes) => {
       const leftIndex = leftPanel ? 0 : -1;
       const rightIndex = rightPanel ? leftPanel ? 2 : 1 : -1;
+      const containerWidth = containerRef.current?.clientWidth ?? 0;
+      const sizesSum = sizes.reduce((a, b) => a + b, 0);
+      if (containerWidth > 0 && sizesSum < containerWidth * 0.5 && sizesSum > 100) {
+        return;
+      }
+      const isPixels = containerWidth > 0 && Math.abs(sizesSum - containerWidth) < Math.abs(sizesSum - 100);
       if (leftIndex >= 0) {
-        setLeftSidebarCollapsed(sizes[leftIndex] === 0);
+        const collapsed = sizes[leftIndex] === 0;
+        setLeftSidebarCollapsed(collapsed);
+        const widthPixels = isPixels ? Math.round(sizes[leftIndex]) : containerWidth > 0 ? Math.round(sizes[leftIndex] / 100 * containerWidth) : 0;
+        if (prevLeftSidebarState.current?.width !== widthPixels || prevLeftSidebarState.current?.collapsed !== collapsed) {
+          prevLeftSidebarState.current = { width: widthPixels, collapsed };
+          onLeftSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
       if (rightIndex >= 0) {
-        setRightSidebarCollapsed(sizes[rightIndex] === 0);
+        const collapsed = sizes[rightIndex] === 0;
+        setRightSidebarCollapsed(collapsed);
+        const widthPixels = isPixels ? Math.round(sizes[rightIndex]) : containerWidth > 0 ? Math.round(sizes[rightIndex] / 100 * containerWidth) : 0;
+        if (prevRightSidebarState.current?.width !== widthPixels || prevRightSidebarState.current?.collapsed !== collapsed) {
+          prevRightSidebarState.current = { width: widthPixels, collapsed };
+          onRightSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
     },
-    [leftPanel, rightPanel]
+    [leftPanel, rightPanel, onLeftSidebarStateChange, onRightSidebarStateChange]
   );
   const handleLeftTabChange = (0, import_react119.useCallback)(
     (value) => {
@@ -42447,10 +42581,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
-  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems && // When compact drawer UI is enabled, only show the rail when the
-  // sidebar is collapsed (for large screens/panel layout).
-  (!compactDrawerMenu || leftSidebarCollapsed);
-  return /* @__PURE__ */ import_react119.default.createElement(
+  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems;
+  return /* @__PURE__ */ import_react119.default.createElement("div", { ref: containerRef, className: "n-flex n-flex-1" }, /* @__PURE__ */ import_react119.default.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -42460,20 +42592,11 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react119.default.createElement(
-      VerticalTabMenu,
-      {
-        tooltipSide: "right",
-        items: leftTabItems,
-        activeValue: leftTabValue,
-        isSidebarCollapsed: leftSidebarCollapsed,
-        onChange: handleLeftTabChange
-      }
-    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react119.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react119.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
-        className: "n-relative",
+        className: "n-relative n-workspace-sidebar",
         order: 1,
         ref: leftSidebarRef,
         defaultSize: leftSidebarOptions.initialSize,
@@ -42482,8 +42605,21 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true,
         defaultCollapsed: leftSidebarOptions.defaultCollapsed
       },
-      leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ import_react119.default.createElement(PanelResizeHandle, { index: 0, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" })),
+      leftSidebarCollapsed ? null : /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex n-flex-col n-h-full" }, showLeftTabs && /* @__PURE__ */ import_react119.default.createElement(
+        HorizontalTabBar,
+        {
+          items: leftTabItems,
+          activeValue: leftTabValue,
+          onChange: handleLeftTabChange
+        }
+      ), /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex-1 n-relative n-min-h-0" }, leftPanel))
+    ), /* @__PURE__ */ import_react119.default.createElement(
+      PanelResizeHandle,
+      {
+        index: 0,
+        className: `n-cursor-col-resize n-w-px n-h-full ${leftSidebarCollapsed ? "" : "n-bg-divider"}`
+      }
+    )),
     /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
@@ -42493,11 +42629,17 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(PanelResizeHandle, { index: 1, className: "n-cursor-col-resize n-w-px n-h-full n-bg-divider" }), /* @__PURE__ */ import_react119.default.createElement(
+    rightPanel && /* @__PURE__ */ import_react119.default.createElement(import_react119.default.Fragment, null, /* @__PURE__ */ import_react119.default.createElement(
+      PanelResizeHandle,
+      {
+        index: 1,
+        className: `n-cursor-col-resize n-w-px n-h-full ${rightSidebarCollapsed ? "" : "n-bg-divider"}`
+      }
+    ), /* @__PURE__ */ import_react119.default.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
-        className: "n-relative",
+        className: "n-relative n-workspace-sidebar",
         order: 3,
         ref: rightSidebarRef,
         minSize: rightSidebarOptions.minSize,
@@ -42506,18 +42648,16 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         collapsible: true,
         defaultCollapsed: rightSidebarOptions.defaultCollapsed
       },
-      rightSidebarCollapsed ? null : rightPanel
-    ), rightSidebarOptions.showTabs && rightTabItems && !rightSidebarCollapsed && /* @__PURE__ */ import_react119.default.createElement(DividerVertical, { className: "n-h-full" }), rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react119.default.createElement(
-      VerticalTabMenu,
-      {
-        tooltipSide: "left",
-        items: rightTabItems,
-        activeValue: rightTabValue,
-        isSidebarCollapsed: rightSidebarCollapsed,
-        onChange: handleRightTabChange
-      }
+      rightSidebarCollapsed ? null : /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex n-flex-col n-h-full" }, rightSidebarOptions.showTabs && rightTabItems && /* @__PURE__ */ import_react119.default.createElement(
+        HorizontalTabBar,
+        {
+          items: rightTabItems,
+          activeValue: rightTabValue,
+          onChange: handleRightTabChange
+        }
+      ), /* @__PURE__ */ import_react119.default.createElement("div", { className: "n-flex-1 n-relative n-min-h-0" }, rightPanel))
     ))
-  );
+  ));
 });
 
 // src/components/workspace/renderPanelChildren.tsx
@@ -42598,7 +42738,9 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     showTabs: rightShowTabs = true
   } = {},
   theme,
-  compactDrawerMenu
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave
 }, forwardedRef) {
   const containerRef = import_react121.default.useRef(null);
   const containerSize = useSize(containerRef);
@@ -42803,7 +42945,9 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         autoSavePrefix,
         leftSidebarRef,
         rightSidebarRef,
-        compactDrawerMenu
+        onLeftSidebarStateChange,
+        onRightSidebarStateChange,
+        shouldAutoSave
       }
     ), isOverlay && /* @__PURE__ */ import_react121.default.createElement(
       OverlayToolbar,