@atlaskit/navigation-system 11.0.0 → 11.1.0

package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css

@@ -4,6 +4,7 @@
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
+._1bsbhc79{width:var(--n_snvRsz,var(--n_sNvw))}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
@@ -24,7 +25,7 @@
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -29,7 +29,10 @@ var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _dangerouslyHoistCssVarToDocumentRoot = require("../dangerously-hoist-css-var-to-document-root");
 var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
+var _convertResizeBoundToPixels = require("../panel-splitter/convert-resize-bound-to-pixels");
 var _provider = require("../panel-splitter/provider");
+var _resolveLayoutWidth = require("../resolve-layout-width");
+var _useLayoutAreaSizing2 = require("../use-layout-area-sizing");
 var _useLayoutId = require("../use-layout-id");
 var _useResizingWidthCssVarOnRootElement = require("../use-resizing-width-css-var-on-root-element");
 var _useSafeDefaultWidth = require("../use-safe-default-width");
@@ -52,12 +55,11 @@ var panelSplitterResizingVar = '--n_snvRsz';
 // Used to share the side nav width with the panel splitter, which is rendered outside the side nav element
 // but positioned to stay at its right edge.
 var sideNavClampedWidthVar = '--n_snvW';
-var widthResizeBounds = {
-  min: '240px',
-  max: '50vw'
-};
-function getResizeBounds() {
-  return widthResizeBounds;
+var fallbackMinWidth = '240px';
+function getPixelCustomProperty(element, propertyName, fallback) {
+  var raw = getComputedStyle(element).getPropertyValue(propertyName).trim();
+  var value = Number.parseFloat(raw);
+  return Number.isFinite(value) ? (0, _resolveLayoutWidth.resolveLayoutWidth)(raw.endsWith('vw') ? "".concat(value, "vw") : value, window.innerWidth) : fallback;
 }
 
 /**
@@ -71,6 +73,8 @@ var panelSplitterPortalTargetStyles = {
 };
 var styles = {
   root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
+  chatPanelSizing: "_1bsbhc79",
+  managedOverlay: "_cpcf1gzg _6kttglyw _w8v11bhr _1jug130s",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -120,11 +124,14 @@ var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
  * context value.
  */
 function SideNavInternal(_ref) {
-  var _sideNavState$lastTri;
+  var _managedSizing$mode, _managedSizing$width, _sideNavState$lastTri;
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed,
     _ref$defaultWidth = _ref.defaultWidth,
     defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? fallbackMinWidth : _ref$minWidth,
+    maxWidth = _ref.maxWidth,
     testId = _ref.testId,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Sidebar' : _ref$label,
@@ -136,6 +143,7 @@ function SideNavInternal(_ref) {
     onPeekEnd = _ref.onPeekEnd,
     providedId = _ref.id,
     canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var isChatPanelLayoutEnabled = (0, _fg.fg)('platform-dst-chat-panel-layout');
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
@@ -221,18 +229,142 @@ function SideNavInternal(_ref) {
   });
   var _useState5 = (0, _react.useState)(defaultWidth),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    width = _useState6[0],
-    setWidth = _useState6[1];
-  var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
+    inlineWidth = _useState6[0],
+    setInlineWidth = _useState6[1];
+  var _useState7 = (0, _react.useState)(defaultWidth),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    overlayWidth = _useState8[0],
+    setOverlayWidth = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    isInline = _useState0[0],
+    setIsInline = _useState0[1];
+  (0, _react.useEffect)(function () {
+    if (!isChatPanelLayoutEnabled) {
+      return;
+    }
+    var mediaQuery = window.matchMedia('(min-width: 64rem)');
+    setIsInline(mediaQuery.matches);
+    var onChange = function onChange(event) {
+      return setIsInline(event.matches);
+    };
+    return (0, _bindEventListener.bind)(mediaQuery, {
+      type: 'change',
+      listener: onChange
+    });
+  }, [isChatPanelLayoutEnabled]);
+  var toggleVisibilityForChatPanel = (0, _useToggleSideNav.useToggleSideNav)({
+    trigger: 'programmatic'
+  });
+  var closeOverlayForChatPanel = (0, _react.useCallback)(function () {
+    // Allocation can overlay an expanded desktop nav when other slots consume
+    // its space. Dismiss the visibility state selected by the viewport, not the mode.
+    var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (isDesktop ? isExpandedOnDesktop : isExpandedOnMobile) {
+      toggleVisibilityForChatPanel();
+    }
+  }, [isExpandedOnDesktop, isExpandedOnMobile, toggleVisibilityForChatPanel]);
+  var _useLayoutAreaSizing = (0, _useLayoutAreaSizing2.useLayoutAreaSizing)({
+      area: 'side-nav',
+      config: {
+        defaultWidth: defaultWidth,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        isOpen: isInline ? isExpandedOnDesktop : isExpandedOnMobile,
+        onRequestClose: closeOverlayForChatPanel
+      }
+    }),
+    managedSizing = _useLayoutAreaSizing.state,
+    getManagedResizeBounds = _useLayoutAreaSizing.getResizeBounds,
+    startResize = _useLayoutAreaSizing.startResize,
+    resize = _useLayoutAreaSizing.resize,
+    completeResize = _useLayoutAreaSizing.completeResize;
+  var mode = (_managedSizing$mode = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) !== null && _managedSizing$mode !== void 0 ? _managedSizing$mode : isInline ? 'inline' : 'overlay';
+  var renderedWidth = isChatPanelLayoutEnabled ? (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : mode === 'inline' ? inlineWidth : overlayWidth : inlineWidth;
+  var configuredMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100vw';
+  var clampedWidth = !isChatPanelLayoutEnabled ? "clamp(240px, ".concat(inlineWidth, "px, 50vw)") : managedSizing ? "".concat(renderedWidth, "px") : "clamp(".concat(minWidth, ", ").concat(renderedWidth, "px, ").concat(configuredMaxWidth, ")");
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var navRef = (0, _react.useRef)(null);
   var panelSplitterPortalTargetRef = (0, _react.useRef)(null);
+  var getResizeBounds = (0, _react.useCallback)(function () {
+    if (!isChatPanelLayoutEnabled) {
+      return {
+        min: '240px',
+        max: '50vw'
+      };
+    }
+    var managedBounds = getManagedResizeBounds();
+    if (managedBounds) {
+      return managedBounds;
+    }
+    var sideNav = navRef.current;
+    var layoutRoot = sideNav === null || sideNav === void 0 ? void 0 : sideNav.parentElement;
+    var main = layoutRoot === null || layoutRoot === void 0 ? void 0 : layoutRoot.querySelector(':scope > [data-layout-slot][role="main"]');
+    var fallbackMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : mode === 'inline' ? '100vw' : '90vw';
+    if (!sideNav || mode === 'overlay') {
+      var chatPanel = layoutRoot === null || layoutRoot === void 0 ? void 0 : layoutRoot.querySelector(':scope > [data-layout-chat-panel]');
+      var inlineChatPanelWidth = chatPanel && getComputedStyle(chatPanel).gridArea === 'chat-panel' ? chatPanel.getBoundingClientRect().width : 0;
+      var overlayMaxWidth = Math.floor((window.innerWidth - inlineChatPanelWidth) * 0.9);
+      var _constrainedMaxWidth = maxWidth ? Math.min((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(maxWidth), overlayMaxWidth) : overlayMaxWidth;
+      return {
+        min: minWidth,
+        max: "".concat(Math.max((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(minWidth), _constrainedMaxWidth), "px")
+      };
+    }
+    if (!main) {
+      return {
+        min: minWidth,
+        max: fallbackMaxWidth
+      };
+    }
+    var sideNavWidth = sideNav.getBoundingClientRect().width;
+    var mainWidth = main.getBoundingClientRect().width;
+
+    // JSDOM does not perform layout, so retain the static fallback in unit tests and other
+    // environments where used widths cannot be measured.
+    if (sideNavWidth === 0 || mainWidth === 0) {
+      return {
+        min: minWidth,
+        max: fallbackMaxWidth
+      };
+    }
+    var localPanel = main.querySelector('[data-layout-with-panel-slot]');
+    var isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
+    var localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
+    var mainContentWidth = mainWidth - localPanelWidth;
+    var mainMinimumWidth = getPixelCustomProperty(main, _constants.mainMinimumWidthVar, 320);
+    var availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
+    var availableInlineWidth = Math.floor(sideNavWidth + availableWidth);
+    var constrainedMaxWidth = maxWidth ? Math.min((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(maxWidth), availableInlineWidth) : availableInlineWidth;
+    return {
+      min: minWidth,
+      max: "".concat(Math.max((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(minWidth), constrainedMaxWidth), "px")
+    };
+  }, [getManagedResizeBounds, isChatPanelLayoutEnabled, maxWidth, minWidth, mode]);
   /**
    * Used to share the side nav element with the `Panel`,
    * which observes the side nav to determine its maximum width.
    */
   var sharedRef = (0, _useSideNavRef.useSideNavRef)();
   var mergedRef = (0, _mergeRefs.default)([navRef, sharedRef]);
+  var onCompleteResize = (0, _react.useCallback)(function (finalWidth) {
+    if (!isChatPanelLayoutEnabled) {
+      setInlineWidth(finalWidth);
+      return;
+    }
+    if (mode === 'inline') {
+      setInlineWidth(finalWidth);
+    } else {
+      setOverlayWidth(finalWidth);
+    }
+    completeResize(mode, finalWidth);
+  }, [completeResize, isChatPanelLayoutEnabled, mode]);
+  var onResizeStartInternal = (0, _react.useCallback)(function () {
+    startResize(mode);
+  }, [mode, startResize]);
+  var onResizeInternal = (0, _react.useCallback)(function (width) {
+    return resize(mode, width);
+  }, [mode, resize]);
   var toggleButtonElement = (0, _react.useContext)(_sideNavToggleButtonElement.SideNavToggleButtonElement);
   var topNavStartElement = (0, _react.useContext)(_topNavStartElement.TopNavStartElement);
   var devTimeOnlyAttributes = {};
@@ -724,7 +856,7 @@ function SideNavInternal(_ref) {
   // Used to conditionally display the keyboard shortcut in the SideNavPanelSplitter tooltip.
   var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
-    isEnabled: true,
+    isEnabled: !isChatPanelLayoutEnabled || !managedSizing,
     cssVar: panelSplitterResizingVar,
     panelId: _constants.sideNavPanelSplitterId
   });
@@ -786,7 +918,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",
@@ -806,8 +938,10 @@ function SideNavInternal(_ref) {
     panelId: _constants.sideNavPanelSplitterId,
     panelRef: navRef,
     portalRef: isFhsEnabled ? panelSplitterPortalTargetRef : undefined,
-    panelWidth: width,
-    onCompleteResize: setWidth,
+    panelWidth: renderedWidth,
+    onCompleteResize: onCompleteResize,
+    onResizeStartInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeStartInternal : undefined,
+    onResizeInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeInternal : undefined,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar
     // Not resizable when in peek (flyout) mode.
@@ -837,6 +971,8 @@ function SideNav(_ref9) {
     defaultCollapsed = _ref9.defaultCollapsed,
     _ref9$defaultWidth = _ref9.defaultWidth,
     defaultWidth = _ref9$defaultWidth === void 0 ? 320 : _ref9$defaultWidth,
+    minWidth = _ref9.minWidth,
+    maxWidth = _ref9.maxWidth,
     testId = _ref9.testId,
     label = _ref9.label,
     _ref9$skipLinkLabel = _ref9.skipLinkLabel,
@@ -852,6 +988,8 @@ function SideNav(_ref9) {
   }, /*#__PURE__*/_react.default.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,
     defaultWidth: defaultWidth,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
     testId: testId,
     label: label,
     skipLinkLabel: skipLinkLabel,

package/dist/cjs/ui/page-layout/use-layout-area-sizing.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLayoutAreaSizing = useLayoutAreaSizing;
+var _react = require("react");
+var _layoutAreaSizingContext = require("./layout-area-sizing-context");
+var _layoutAreaStateContexts = require("./layout-area-state-contexts");
+function useLayoutAreaSizing(_ref) {
+  var area = _ref.area,
+    config = _ref.config;
+  var context = (0, _react.useContext)(_layoutAreaSizingContext.LayoutAreaSizingContext);
+  var requestedWidth = config.requestedWidth,
+    defaultWidth = config.defaultWidth,
+    compactDefaultWidth = config.compactDefaultWidth,
+    minWidth = config.minWidth,
+    maxWidth = config.maxWidth,
+    isOpen = config.isOpen,
+    onRequestClose = config.onRequestClose;
+  var registerArea = context === null || context === void 0 ? void 0 : context.registerArea;
+  var unregisterArea = context === null || context === void 0 ? void 0 : context.unregisterArea;
+  var startAreaResize = context === null || context === void 0 ? void 0 : context.startResize;
+  var resizeArea = context === null || context === void 0 ? void 0 : context.resize;
+  var completeAreaResize = context === null || context === void 0 ? void 0 : context.completeResize;
+  var getAreaResizeBounds = context === null || context === void 0 ? void 0 : context.getResizeBounds;
+  var state = (0, _react.useContext)(_layoutAreaStateContexts.layoutAreaStateContexts[area]);
+  // Dismissal is not a sizing input. Register a stable delegate while keeping
+  // the consumer's latest committed callback outside allocation state.
+  var onRequestCloseRef = (0, _react.useRef)(onRequestClose);
+  (0, _react.useEffect)(function () {
+    onRequestCloseRef.current = onRequestClose;
+  }, [onRequestClose]);
+  var requestClose = (0, _react.useCallback)(function () {
+    var _onRequestCloseRef$cu;
+    return (_onRequestCloseRef$cu = onRequestCloseRef.current) === null || _onRequestCloseRef$cu === void 0 ? void 0 : _onRequestCloseRef$cu.call(onRequestCloseRef);
+  }, []);
+  (0, _react.useEffect)(function () {
+    registerArea === null || registerArea === void 0 || registerArea(area, {
+      requestedWidth: requestedWidth,
+      defaultWidth: defaultWidth,
+      compactDefaultWidth: compactDefaultWidth,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      isOpen: isOpen,
+      onRequestClose: requestClose
+    });
+  }, [area, compactDefaultWidth, defaultWidth, isOpen, maxWidth, minWidth, registerArea, requestClose, requestedWidth]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      return unregisterArea === null || unregisterArea === void 0 ? void 0 : unregisterArea(area);
+    };
+  }, [area, unregisterArea]);
+  var startResize = (0, _react.useCallback)(function (mode) {
+    return startAreaResize === null || startAreaResize === void 0 ? void 0 : startAreaResize(area, mode);
+  }, [area, startAreaResize]);
+  var resize = (0, _react.useCallback)(function (mode, width) {
+    return resizeArea === null || resizeArea === void 0 ? void 0 : resizeArea(area, mode, width);
+  }, [area, resizeArea]);
+  var completeResize = (0, _react.useCallback)(function (mode, width) {
+    return completeAreaResize === null || completeAreaResize === void 0 ? void 0 : completeAreaResize(area, mode, width);
+  }, [area, completeAreaResize]);
+  var getResizeBounds = (0, _react.useCallback)(function () {
+    return getAreaResizeBounds === null || getAreaResizeBounds === void 0 ? void 0 : getAreaResizeBounds(area);
+  }, [area, getAreaResizeBounds]);
+  return {
+    state: state,
+    startResize: startResize,
+    resize: resize,
+    completeResize: completeResize,
+    getResizeBounds: getResizeBounds
+  };
+}

package/dist/cjs/ui/page-layout/use-layout-main-sizing.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLayoutMainSizing = useLayoutMainSizing;
+var _react = require("react");
+var _layoutAreaSizingContext = require("./layout-area-sizing-context");
+function useLayoutMainSizing(minWidth) {
+  var context = (0, _react.useContext)(_layoutAreaSizingContext.LayoutAreaSizingContext);
+  var setMainMinWidth = context === null || context === void 0 ? void 0 : context.setMainMinWidth;
+  (0, _react.useEffect)(function () {
+    return setMainMinWidth === null || setMainMinWidth === void 0 ? void 0 : setMainMinWidth(minWidth);
+  }, [minWidth, setMainMinWidth]);
+}

package/dist/cjs/ui/page-layout/use-occupied-layout-width.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOccupiedLayoutWidth = useOccupiedLayoutWidth;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Measures the existing Root slots that are not managed by the chat-layout allocator.
+ * Only count separate inline columns: Aside stacks below Main on mobile, and the
+ * legacy Panel spans other areas while overlaying. Read the grid rather than duplicating
+ * its responsive breakpoints. Border boxes include slot borders and live splitter widths.
+ */
+function useOccupiedLayoutWidth(layoutRef) {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (!root) {
+      return;
+    }
+    var occupiedSlots = [];
+    var measure = function measure() {
+      var _getComputedStyle$gri, _rows$map$find;
+      if (occupiedSlots.length === 0) {
+        setWidth(0);
+        return;
+      }
+      var rows = (_getComputedStyle$gri = getComputedStyle(root).gridTemplateAreas.match(/"[^"]+"/g)) !== null && _getComputedStyle$gri !== void 0 ? _getComputedStyle$gri : [];
+      var mainRow = (_rows$map$find = rows.map(function (row) {
+        return row.replace(/"/g, '').split(/\s+/);
+      }).find(function (row) {
+        return row.includes('main');
+      })) !== null && _rows$map$find !== void 0 ? _rows$map$find : [];
+      var occupiedWidth = 0;
+      var _iterator = _createForOfIteratorHelper(occupiedSlots),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var child = _step.value;
+          var style = getComputedStyle(child);
+          var area = style.gridArea.split('/').map(function (part) {
+            return part.trim();
+          });
+          var slot = area[0];
+          if (['ribbon', 'aside', 'panel'].includes(slot) && area.every(function (part) {
+            return part === slot;
+          }) && mainRow.includes(slot) && style.display !== 'none' && style.position !== 'absolute' && style.position !== 'fixed') {
+            occupiedWidth += child.getBoundingClientRect().width;
+          }
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setWidth(occupiedWidth);
+    };
+    var resizeObserver = new ResizeObserver(measure);
+    var observeSlots = function observeSlots() {
+      resizeObserver.disconnect();
+      resizeObserver.observe(root);
+      // Managed regions resize on every drag frame but cannot consume extra tracks.
+      // Keep them out of both the observer and the measurement loop. Slot identity,
+      // unlike gridArea, remains stable when a region switches to overlay mode.
+      // TopNav and Banner also span columns rather than consuming independent tracks.
+      occupiedSlots = Array.from(root.children).filter(function (child) {
+        return child instanceof HTMLElement && child.hasAttribute('data-layout-slot') && !child.matches('nav, header, [role="main"], [data-layout-chat-panel]') && getComputedStyle(child).gridArea.split('/')[0].trim() !== 'banner';
+      });
+      var _iterator2 = _createForOfIteratorHelper(occupiedSlots),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+          resizeObserver.observe(child);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      measure();
+    };
+    var mutationObserver = new MutationObserver(observeSlots);
+    mutationObserver.observe(root, {
+      childList: true
+    });
+    observeSlots();
+    var unbind = (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: measure
+    });
+    return function () {
+      unbind();
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [layoutRef]);
+  return width;
+}

package/dist/es2019/entry-points/layout/chat-panel.js

@@ -0,0 +1 @@
+export { ChatPanel } from '../../ui/page-layout/chat-panel';

package/dist/es2019/entry-points/layout/layout-sizing.js

@@ -0,0 +1,3 @@
+export { contentHeightWhenFixed, contentInsetBlockStart, mainMinimumWidthVar, sideNavLiveWidthVar } from '../../ui/page-layout/constants';
+export { useLayoutAreaSizing as UNSAFE_useLayoutAreaSizing } from '../../ui/page-layout/use-layout-area-sizing';
+export { resolveLayoutWidth as UNSAFE_resolveLayoutWidth } from '../../ui/page-layout/resolve-layout-width';

package/dist/es2019/ui/page-layout/calculate-layout-area-states.js

@@ -0,0 +1,128 @@
+import { resolveLayoutWidth } from './resolve-layout-width';
+function clampTargetWidth({
+  target,
+  min,
+  max
+}) {
+  return Math.max(min, Math.min(target, max));
+}
+function getTargetWidth(area, isSideNavOverlay) {
+  var _area$compactDefaultW, _area$liveResize, _ref, _area$requestedWidth;
+  const defaultWidth = isSideNavOverlay ? (_area$compactDefaultW = area.compactDefaultWidth) !== null && _area$compactDefaultW !== void 0 ? _area$compactDefaultW : area.defaultWidth : area.defaultWidth;
+  return ((_area$liveResize = area.liveResize) === null || _area$liveResize === void 0 ? void 0 : _area$liveResize.mode) === 'inline' ? area.liveResize.width : (_ref = (_area$requestedWidth = area.requestedWidth) !== null && _area$requestedWidth !== void 0 ? _area$requestedWidth : area.preferredInlineWidth) !== null && _ref !== void 0 ? _ref : defaultWidth;
+}
+function getOverlayTargetWidth(area, isSideNavOverlay) {
+  var _area$compactDefaultW2, _area$liveResize2, _ref2, _area$requestedWidth2;
+  const defaultWidth = isSideNavOverlay ? (_area$compactDefaultW2 = area.compactDefaultWidth) !== null && _area$compactDefaultW2 !== void 0 ? _area$compactDefaultW2 : area.defaultWidth : area.defaultWidth;
+  return ((_area$liveResize2 = area.liveResize) === null || _area$liveResize2 === void 0 ? void 0 : _area$liveResize2.mode) === 'overlay' ? area.liveResize.width : (_ref2 = (_area$requestedWidth2 = area.requestedWidth) !== null && _area$requestedWidth2 !== void 0 ? _area$requestedWidth2 : area.preferredOverlayWidth) !== null && _ref2 !== void 0 ? _ref2 : defaultWidth;
+}
+export function calculateLayoutAreaStates({
+  viewportWidth,
+  layoutWidth = viewportWidth,
+  isChatPanelOverlay,
+  isSideNavOverlay,
+  occupiedWidth = 0,
+  mainMinWidth: mainMinWidthBound,
+  areas,
+  resizeSession
+}) {
+  var _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
+  const mainMinWidth = resolveLayoutWidth(mainMinWidthBound, viewportWidth);
+  const availableWidth = Math.max(0, layoutWidth - occupiedWidth);
+  const sideNav = areas['side-nav'];
+  const panel = areas.panel;
+  const chatPanel = areas['chat-panel'];
+  const sideNavMinWidth = sideNav ? resolveLayoutWidth(sideNav.minWidth, viewportWidth) : 0;
+  const panelMinWidth = panel ? resolveLayoutWidth(panel.minWidth, viewportWidth) : 0;
+  const chatPanelMinWidth = chatPanel ? resolveLayoutWidth(chatPanel.minWidth, viewportWidth) : 0;
+  const isSideNavOpenInline = Boolean((sideNav === null || sideNav === void 0 ? void 0 : sideNav.isOpen) && !isSideNavOverlay && availableWidth >= mainMinWidth + sideNavMinWidth);
+  const isChatPanelOpenInline = Boolean((chatPanel === null || chatPanel === void 0 ? void 0 : chatPanel.isOpen) && !isChatPanelOverlay && availableWidth >= mainMinWidth + chatPanelMinWidth + (isSideNavOpenInline ? sideNavMinWidth : 0));
+  const isPanelInline = Boolean((panel === null || panel === void 0 ? void 0 : panel.isOpen) && availableWidth >= mainMinWidth + panelMinWidth + (isChatPanelOpenInline ? chatPanelMinWidth : 0) + (isSideNavOpenInline ? sideNavMinWidth : 0));
+  const inlineAreas = [isSideNavOpenInline && 'side-nav', isPanelInline && 'panel', isChatPanelOpenInline && 'chat-panel'].filter(area => Boolean(area));
+  const widths = new Map();
+  const minimums = new Map();
+  for (const areaName of inlineAreas) {
+    const area = areas[areaName];
+    if (!area) {
+      continue;
+    }
+    const min = resolveLayoutWidth(area.minWidth, viewportWidth);
+    const max = area.maxWidth ? resolveLayoutWidth(area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
+    const baselineWidth = resizeSession === null || resizeSession === void 0 ? void 0 : resizeSession.baselineWidths[areaName];
+    const requestedTarget = resizeSession && areaName !== resizeSession.area && baselineWidth !== undefined ? baselineWidth : getTargetWidth(area, isSideNavOverlay);
+    const target = clampTargetWidth({
+      target: requestedTarget,
+      min,
+      max
+    });
+    minimums.set(areaName, min);
+    widths.set(areaName, target);
+  }
+  let overflow = Math.max(0, Array.from(widths.values()).reduce((total, width) => total + width, 0) - (availableWidth - mainMinWidth));
+  const compressionOrder = ['panel', 'chat-panel', 'side-nav'];
+  // User resizing consumes only Main's spare width. Viewport changes clear the
+  // snapshot and retain the normal automatic compression order.
+  const shrinkOrder = resizeSession ? [resizeSession.area] : compressionOrder;
+  for (const areaName of shrinkOrder) {
+    var _widths$get, _minimums$get;
+    if (overflow <= 0) {
+      break;
+    }
+    const width = (_widths$get = widths.get(areaName)) !== null && _widths$get !== void 0 ? _widths$get : 0;
+    const min = (_minimums$get = minimums.get(areaName)) !== null && _minimums$get !== void 0 ? _minimums$get : 0;
+    const reduction = Math.min(overflow, Math.max(0, width - min));
+    widths.set(areaName, width - reduction);
+    overflow -= reduction;
+  }
+  const totalInlineWidth = Array.from(widths.values()).reduce((total, width) => total + width, 0);
+  const states = {};
+  for (const areaName of inlineAreas) {
+    var _widths$get2, _minimums$get2, _areas$areaName;
+    const width = (_widths$get2 = widths.get(areaName)) !== null && _widths$get2 !== void 0 ? _widths$get2 : 0;
+    const min = (_minimums$get2 = minimums.get(areaName)) !== null && _minimums$get2 !== void 0 ? _minimums$get2 : 0;
+    const maxWidth = (_areas$areaName = areas[areaName]) === null || _areas$areaName === void 0 ? void 0 : _areas$areaName.maxWidth;
+    const configuredMax = maxWidth !== undefined ? resolveLayoutWidth(maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
+    states[areaName] = {
+      mode: 'inline',
+      width,
+      minWidth: min,
+      resizeBounds: {
+        min,
+        max: Math.max(min, Math.min(configuredMax, availableWidth - mainMinWidth - totalInlineWidth + width))
+      }
+    };
+  }
+  const inlineSideNavWidth = (_states$sideNav$widt = (_states$sideNav = states['side-nav']) === null || _states$sideNav === void 0 ? void 0 : _states$sideNav.width) !== null && _states$sideNav$widt !== void 0 ? _states$sideNav$widt : 0;
+  const inlineChatPanelWidth = (_states$chatPanel$wi = (_states$chatPanel = states['chat-panel']) === null || _states$chatPanel === void 0 ? void 0 : _states$chatPanel.width) !== null && _states$chatPanel$wi !== void 0 ? _states$chatPanel$wi : 0;
+  const mainAreaWidth = Math.max(0, availableWidth - inlineSideNavWidth - inlineChatPanelWidth);
+  for (const areaName of ['side-nav', 'panel', 'chat-panel']) {
+    var _states$areaName;
+    const area = areas[areaName];
+    if (!(area !== null && area !== void 0 && area.isOpen) || ((_states$areaName = states[areaName]) === null || _states$areaName === void 0 ? void 0 : _states$areaName.mode) === 'inline') {
+      continue;
+    }
+    const min = resolveLayoutWidth(area.minWidth, viewportWidth);
+    const configuredMax = area.maxWidth ? resolveLayoutWidth(area.maxWidth, viewportWidth) : Number.POSITIVE_INFINITY;
+    // Chat covers Root; SideNav and the local panel overlay Main's grid track.
+    // Occupied tracks and inline chat are not part of that covered region.
+    const layoutMax = (areaName === 'chat-panel' ? layoutWidth : mainAreaWidth) * 0.9;
+    const max = Math.max(0, Math.min(configuredMax, layoutMax));
+    const effectiveMin = Math.min(min, max);
+    const target = getOverlayTargetWidth(area, isSideNavOverlay);
+    const width = clampTargetWidth({
+      target,
+      min: effectiveMin,
+      max
+    });
+    states[areaName] = {
+      mode: 'overlay',
+      width,
+      minWidth: effectiveMin,
+      resizeBounds: {
+        min: effectiveMin,
+        max
+      }
+    };
+  }
+  return states;
+}