@atlaskit/navigation-system 11.3.4 → 11.4.0

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

@@ -13,6 +13,7 @@ var _runtime = require("@compiled/react/runtime");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useSkipLink = require("../../../context/skip-links/use-skip-link");
 var _constants = require("../constants");
+var _mainMinWidthContext = require("../main-min-width-context");
 var _root = require("../root");
 var _useLayoutId = require("../use-layout-id");
 var _useLayoutMainSizing = require("../use-layout-main-sizing");
@@ -34,7 +35,7 @@ function Main(_ref) {
     testId = _ref.testId,
     providedId = _ref.id,
     _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth;
+    minWidth = _ref$minWidth === void 0 ? _constants.defaultMainMinWidth : _ref$minWidth;
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
@@ -49,5 +50,7 @@ function Main(_ref) {
     className: (0, _runtime.ax)([mainElementStyles.root, xcss]),
     role: "main",
     "data-testid": testId
-  }, children));
+  }, /*#__PURE__*/React.createElement(_mainMinWidthContext.MainMinWidthContext.Provider, {
+    value: (0, _fg.fg)('platform-dst-chat-panel-layout') ? minWidth : _constants.defaultMainMinWidth
+  }, children)));
 }

package/dist/cjs/ui/page-layout/main-min-width-context.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainMinWidthContext = void 0;
+var _react = require("react");
+var _constants = require("./constants");
+// Available during SSR, before Main registers with the measured sizing coordinator.
+var MainMinWidthContext = exports.MainMinWidthContext = /*#__PURE__*/(0, _react.createContext)(_constants.defaultMainMinWidth);

package/dist/cjs/ui/page-layout/panel-layout-shell.compiled.css

@@ -0,0 +1,27 @@
+._nd5l1gzg{grid-area:main}._129o1uuk{--p_lclPnlSsrPreferredW:var(--p_lclPnlCompactW)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._19121cl4{isolation:isolate}
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._1f38177r{container-name:local-panel-layout}
+._1l7c1wug._1l7c1wug{grid-template-rows:auto}
+._1l7chkll._1l7chkll{grid-template-rows:1fr}
+._1lmc1m6a{grid-template-areas:"main"}
+._1lmcc53r{grid-template-areas:var(--p_lclPnlSsrAreas,"main")}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1uwq15vq._1uwq15vq{overflow-x:hidden}
+._2z05hkll{grid-template-rows:1fr}
+._4t3i1osq{height:100%}
+._7cca15wb{container-type:inline-size}
+._82e815vq._82e815vq{overflow-y:hidden}
+._evra4a59{--p_lclPnlSsrInlineAreas:"main panel"}
+._f8371m6a._f8371m6a{grid-template-areas:"main"}
+._f8374a59._f8374a59{grid-template-areas:"main panel"}
+._vleg1orf._vleg1orf{grid-template-columns:minmax(var(--n_mainMinW,20pc),1fr) clamp(var(--p_lclPnlMinW),var(--p_lclPnlRsz,var(--p_lclPnlTrackW)),calc(100% - var(--n_mainMinW, 20pc)))}
+._vlegi47z._vlegi47z{grid-template-columns:minmax(0,1fr)}
+._yv0eggl6{grid-template-columns:var(--p_lclPnlSsrColumns,minmax(0,1fr))}
+._yv0ei47z{grid-template-columns:minmax(0,1fr)}
+@media (min-width:64rem){._peezi77x{--p_lclPnlSsrPreferredW:var(--p_lclPnlTrackW)}}

package/dist/cjs/ui/page-layout/panel-layout-shell.js

@@ -0,0 +1,67 @@
+/* panel-layout-shell.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelLayoutShell = PanelLayoutShell;
+require("./panel-layout-shell.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mainMinWidthContext = require("./main-min-width-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// The grid uses runtime CSS variables and container sizing outside @atlaskit/css's bounded values.
+var localPanelTrackWidthVar = '--p_lclPnlTrackW';
+var localPanelResizingVar = '--p_lclPnlRsz';
+var localPanelMinWidthVar = '--p_lclPnlMinW';
+var styles = {
+  container: "_1f38177r _7cca15wb _4t3i1osq _1bsb1osq",
+  layout: "_1reo1wug _18m91wug _1e0c11p5 _7cca15wb _1lmc1m6a _yv0ei47z _2z05hkll _4t3i1osq _1bsb1osq",
+  mainContent: "_nd5l1gzg _1reo1wug _18m91wug _1e0c1txw _4t3i1osq _19121cl4",
+  panelUplift: "_1reo15vq _18m915vq",
+  unmeasured: "_evra4a59 _1lmcc53r _yv0eggl6 _129o1uuk _peezi77x",
+  managedInline: "_1uwq15vq _82e815vq _f8374a59 _1l7c1wug _vleg1orf",
+  managedOverlay: "_1uwq15vq _82e815vq _f8371m6a _vlegi47z _1l7chkll",
+  panelClosed: "_f8371m6a _vlegi47z _1l7chkll"
+};
+/**
+ * Grid and scrolling for Main and its local panel. Use inside navigation's Root and Main.
+ */
+function PanelLayoutShell(_ref) {
+  var children = _ref.children,
+    panel = _ref.panel,
+    isPanelOpen = _ref.isPanelOpen,
+    panelWidth = _ref.panelWidth,
+    compactPanelWidth = _ref.compactPanelWidth,
+    _ref$panelMinWidth = _ref.panelMinWidth,
+    panelMinWidth = _ref$panelMinWidth === void 0 ? 320 : _ref$panelMinWidth,
+    mode = _ref.mode,
+    layoutRef = _ref.layoutRef,
+    _ref$shouldClipOverfl = _ref.shouldClipOverflow,
+    shouldClipOverflow = _ref$shouldClipOverfl === void 0 ? false : _ref$shouldClipOverfl,
+    testId = _ref.testId;
+  var mainMinWidth = (0, _react.useContext)(_mainMinWidthContext.MainMinWidthContext);
+  var id = "local-panel-".concat((0, _react.useId)().replace(/[^a-zA-Z0-9_-]/g, '_'));
+  // CSS query conditions cannot read custom properties. Only the numeric minimums and
+  // instance selector are generated here; this rule is removed after the first measurement,
+  // so live resizing never rewrites stylesheet text. The named container is local to this shell.
+  var inlineQuery = "@container local-panel-layout (min-width: ".concat(mainMinWidth + panelMinWidth, "px)");
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.container])
+  }, mode === undefined && isPanelOpen &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Instance-scoped SSR query supports caller-defined minimums; CSS variables are not allowed in query conditions.
+  React.createElement("style", null, "".concat(inlineQuery, " {\n\t\t\t\t\t#").concat(id, " {\n\t\t\t\t\t\t--p_lclPnlSsrAreas: var(--p_lclPnlSsrInlineAreas);\n\t\t\t\t\t\t--p_lclPnlSsrColumns: minmax(0, 1fr) min(var(--p_lclPnlSsrPreferredW), calc(100% - ").concat(mainMinWidth, "px));\n\t\t\t\t\t\t--p_lclPnlSsrArea: panel;\n\t\t\t\t\t\t--p_lclPnlSsrWidth: 100%;\n\t\t\t\t\t\t--p_lclPnlSsrBackground: ", "var(--ds-surface, #FFFFFF)", ";\n\t\t\t\t\t\t--p_lclPnlSsrShadow: none;\n\t\t\t\t\t\t--p_lclPnlSsrBorder: ", "var(--ds-border-width, 1px)", " solid ", "var(--ds-border, #0B120E24)", ";\n\t\t\t\t\t}\n\t\t\t\t}")), /*#__PURE__*/React.createElement("div", {
+    id: id,
+    "data-testid": testId,
+    ref: layoutRef,
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, localPanelTrackWidthVar, "".concat(panelWidth, "px")), localPanelMinWidthVar, "".concat(panelMinWidth, "px")), '--p_lclPnlCompactW', "".concat(compactPanelWidth, "px")),
+    className: (0, _runtime.ax)([styles.layout, mode === undefined && isPanelOpen && styles.unmeasured, shouldClipOverflow && styles.panelUplift, mode === 'inline' && styles.managedInline, mode === 'overlay' && styles.managedOverlay, !isPanelOpen && styles.panelClosed])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.mainContent])
+  }, children), panel));
+}

package/dist/cjs/ui/page-layout/panel-layout.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelLayout = PanelLayout;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
+var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _getPanelLayoutDefaults = require("./get-panel-layout-defaults");
+var _layoutAreaSizingContext = require("./layout-area-sizing-context");
+var _layoutAreaSizingProvider = require("./layout-area-sizing-provider");
+var _localPanelSurface = require("./local-panel-surface");
+var _panelLayoutShell = require("./panel-layout-shell");
+var _useLayoutAreaSizing2 = require("./use-layout-area-sizing");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// Development-only ownership checks are scoped to each coordinator, not the whole page.
+var mountedPanelLayouts = new WeakSet();
+function CoordinatedPanelLayout(_ref) {
+  var _ref2, _ref3, _ref4, _state$width;
+  var children = _ref.children,
+    panel = _ref.panel,
+    isPanelOpen = _ref.isPanelOpen,
+    panelKey = _ref.panelKey,
+    panelWidth = _ref.panelWidth,
+    defaultPanelWidth = _ref.defaultPanelWidth,
+    compactDefaultPanelWidth = _ref.compactDefaultPanelWidth,
+    suppliedMinWidth = _ref.panelMinWidth,
+    panelMaxWidth = _ref.panelMaxWidth,
+    onPanelWidthChange = _ref.onPanelWidthChange,
+    onResizeEnd = _ref.onResizeEnd,
+    _ref$panelLabel = _ref.panelLabel,
+    panelLabel = _ref$panelLabel === void 0 ? 'Panel' : _ref$panelLabel,
+    _ref$resizeLabel = _ref.resizeLabel,
+    resizeLabel = _ref$resizeLabel === void 0 ? 'Resize panel' : _ref$resizeLabel,
+    testId = _ref.testId,
+    layoutRef = _ref.layoutRef;
+  var _useState = (0, _react.useState)(_getPanelLayoutDefaults.getPanelLayoutDefaults),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    defaults = _useState2[0];
+  var panelMinWidth = suppliedMinWidth !== null && suppliedMinWidth !== void 0 ? suppliedMinWidth : defaults.panelMinWidth;
+  var coordinator = (0, _react.useContext)(_layoutAreaSizingContext.LayoutAreaSizingContext);
+  (0, _react.useEffect)(function () {
+    if (process.env.NODE_ENV !== 'production' && coordinator) {
+      (0, _tinyInvariant.default)(!mountedPanelLayouts.has(coordinator), 'Only one PanelLayout may be mounted per navigation Root/sizing coordinator, including closed hosts and LayoutWithPanel. Reuse the host to switch panel content.');
+      mountedPanelLayouts.add(coordinator);
+      return function () {
+        mountedPanelLayouts.delete(coordinator);
+      };
+    }
+  }, [coordinator]);
+  var _useState3 = (0, _react.useState)((_ref2 = defaultPanelWidth !== null && defaultPanelWidth !== void 0 ? defaultPanelWidth : panelWidth) !== null && _ref2 !== void 0 ? _ref2 : defaults.panelWidth),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    defaultWidth = _useState4[0];
+  var _useState5 = (0, _react.useState)((_ref3 = (_ref4 = compactDefaultPanelWidth !== null && compactDefaultPanelWidth !== void 0 ? compactDefaultPanelWidth : defaultPanelWidth) !== null && _ref4 !== void 0 ? _ref4 : panelWidth) !== null && _ref3 !== void 0 ? _ref3 : defaults.compactPanelWidth),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 1),
+    compactWidth = _useState6[0];
+  // Use the controlled request before measurement too, without changing the mount-time default.
+  var fallbackWidth = Math.max(panelMinWidth, Math.min(panelWidth !== null && panelWidth !== void 0 ? panelWidth : defaultWidth, panelMaxWidth !== null && panelMaxWidth !== void 0 ? panelMaxWidth : Infinity));
+  var _useLayoutAreaSizing = (0, _useLayoutAreaSizing2.useLayoutAreaSizing)({
+      area: 'panel',
+      config: {
+        isOpen: isPanelOpen,
+        requestedWidth: panelWidth,
+        defaultWidth: defaultWidth,
+        compactDefaultWidth: compactWidth,
+        minWidth: panelMinWidth,
+        maxWidth: panelMaxWidth
+      }
+    }),
+    state = _useLayoutAreaSizing.state,
+    prepareResize = _useLayoutAreaSizing.prepareResize,
+    getResizeBounds = _useLayoutAreaSizing.getResizeBounds,
+    startResize = _useLayoutAreaSizing.startResize,
+    resize = _useLayoutAreaSizing.resize,
+    completeResize = _useLayoutAreaSizing.completeResize;
+  // Host callback identity is unrelated to sizing. Keep drag bindings stable while
+  // still delivering completions to the latest product-owned state and analytics.
+  var onWidthChangeRef = (0, _useStableRef.default)(onPanelWidthChange);
+  var onResizeEndRef = (0, _useStableRef.default)(onResizeEnd);
+  var handleWidthChange = (0, _react.useCallback)(function (width) {
+    var _onWidthChangeRef$cur;
+    return (_onWidthChangeRef$cur = onWidthChangeRef.current) === null || _onWidthChangeRef$cur === void 0 ? void 0 : _onWidthChangeRef$cur.call(onWidthChangeRef, width);
+  }, [onWidthChangeRef]);
+  var handleResizeEnd = (0, _react.useCallback)(function (event) {
+    var _onResizeEndRef$curre;
+    return (_onResizeEndRef$curre = onResizeEndRef.current) === null || _onResizeEndRef$curre === void 0 ? void 0 : _onResizeEndRef$curre.call(onResizeEndRef, event);
+  }, [onResizeEndRef]);
+  var isMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel');
+  var surface = isPanelOpen && /*#__PURE__*/_react.default.createElement(_localPanelSurface.LocalPanelSurface, {
+    key: "local-panel",
+    contentKey: panelKey,
+    defaultWidth: fallbackWidth,
+    minWidth: panelMinWidth,
+    maxWidth: panelMaxWidth,
+    layoutRef: layoutRef,
+    managedSizing: state,
+    getManagedResizeBounds: getResizeBounds,
+    prepareResize: prepareResize,
+    onManagedResizeStart: startResize,
+    onManagedResize: resize,
+    onManagedResizeEnd: completeResize,
+    onWidthChange: handleWidthChange,
+    onResizeEnd: handleResizeEnd,
+    label: panelLabel,
+    resizeLabel: resizeLabel,
+    testId: testId && "".concat(testId, "--panel-slot")
+  }, panel);
+  return /*#__PURE__*/_react.default.createElement(_panelLayoutShell.PanelLayoutShell, {
+    isPanelOpen: isPanelOpen,
+    panelWidth: (_state$width = state === null || state === void 0 ? void 0 : state.width) !== null && _state$width !== void 0 ? _state$width : fallbackWidth,
+    compactPanelWidth: Math.max(panelMinWidth, Math.min(panelWidth !== null && panelWidth !== void 0 ? panelWidth : compactWidth, panelMaxWidth !== null && panelMaxWidth !== void 0 ? panelMaxWidth : Infinity)),
+    panelMinWidth: panelMinWidth,
+    mode: state === null || state === void 0 ? void 0 : state.mode,
+    layoutRef: layoutRef,
+    shouldClipOverflow: isMotionEnabled,
+    testId: testId,
+    panel: isMotionEnabled ? /*#__PURE__*/_react.default.createElement(_exitingPersistence.default, null, surface) : surface
+  }, children);
+}
+
+/**
+ * A coordinated local panel with caller-owned content and state. Keep this host mounted
+ * while closed to retain resized widths. Unmount it to reset its width preferences.
+ *
+ * Mount only one local-panel host per navigation Root/sizing coordinator, including
+ * closed hosts and panel-system's LayoutWithPanel. Switch content through the same host;
+ * separate Roots may each own a local panel.
+ *
+ * With chat layout enabled it shares Root's sizing coordinator. Otherwise it measures
+ * its own Main region, leaving existing navigation/chat behavior unchanged.
+ * Local-panel placement and resize constraints use this layout in both cases; disabling
+ * the chat-layout gate does not restore the previous panel-system layout engine.
+ */
+function PanelLayout(props) {
+  var parentSizing = (0, _react.useContext)(_layoutAreaSizingContext.LayoutAreaSizingContext);
+  var layoutRef = (0, _react.useRef)(null);
+  var content = /*#__PURE__*/_react.default.createElement(CoordinatedPanelLayout, {
+    layoutRef: layoutRef,
+    panel: props.panel,
+    isPanelOpen: props.isPanelOpen,
+    panelKey: props.panelKey,
+    panelWidth: props.panelWidth,
+    defaultPanelWidth: props.defaultPanelWidth,
+    compactDefaultPanelWidth: props.compactDefaultPanelWidth,
+    panelMinWidth: props.panelMinWidth,
+    panelMaxWidth: props.panelMaxWidth,
+    onPanelWidthChange: props.onPanelWidthChange,
+    onResizeEnd: props.onResizeEnd,
+    panelLabel: props.panelLabel,
+    resizeLabel: props.resizeLabel,
+    testId: props.testId
+  }, props.children);
+  return parentSizing ? content : /*#__PURE__*/_react.default.createElement(_layoutAreaSizingProvider.LayoutAreaSizingProvider, {
+    layoutRef: layoutRef
+  }, content);
+}

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -194,7 +194,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
   var initialClientXRef = (0, _react.useRef)(null);
   // Live allocation changes panelWidth on every frame. Only the legacy path should
   // rebind the drag listeners when this value changes.
-  var legacyPanelWidth = (0, _fg.fg)('platform-dst-chat-panel-layout') ? undefined : panelWidth;
+  var legacyPanelWidth = (0, _fg.fg)('platform-dst-chat-panel-layout') || onResizeInternal ? undefined : panelWidth;
   (0, _react.useEffect)(function () {
     var splitter = splitterRef.current;
     (0, _tinyInvariant.default)(splitter, 'Splitter ref must be set');
@@ -303,7 +303,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
           position: position
         });
         var resizingWidth = "clamp(".concat(resizeBounds.min, ", ").concat(targetWidth, "px, ").concat(resizeBounds.max, ")");
-        if ((0, _fg.fg)('platform-dst-chat-panel-layout') && onResizeInternal) {
+        if (onResizeInternal) {
           // The allocator needs below-minimum requests for the local-to-chat cascade.
           var currentBounds = getResizeBounds();
           var width = Math.max(0, Math.min(targetWidth, prepareResize ? window.innerWidth : (0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(currentBounds.max)));
@@ -359,7 +359,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
                 }
                 finalWidth = (0, _getPixelWidth.getPixelWidth)(panel); // Persist the final preferred width before removing the imperative drag
                 // variable, so the rendered width is continuous across pointer release.
-                if ((0, _fg.fg)('platform-dst-chat-panel-layout')) {
+                if ((0, _fg.fg)('platform-dst-chat-panel-layout') || onResizeInternal) {
                   (0, _reactDom.flushSync)(function () {
                     return onCompleteResize(finalWidth);
                   });
@@ -416,7 +416,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
       return _regenerator.default.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            isManagedResize = (0, _fg.fg)('platform-dst-chat-panel-layout') && onResizeInternal;
+            isManagedResize = onResizeInternal;
             sequence = focusSequence.current;
             value = isManagedResize ? parseFloat(event.currentTarget.value) : parseInt(event.currentTarget.value);
             if (!prepareResize) {

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

@@ -362,7 +362,7 @@ function SideNavInternal(_ref4) {
     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 mainMinimumWidth = getPixelCustomProperty(main, _constants.mainMinimumWidthVar, _constants.defaultMainMinWidth);
     var availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
     var availableInlineWidth = Math.floor(sideNavWidth + availableWidth);
     var constrainedMaxWidth = maxWidth ? Math.min((0, _convertResizeBoundToPixels.convertResizeBoundToPixels)(maxWidth), availableInlineWidth) : availableInlineWidth;

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

@@ -0,0 +1,2 @@
+export { PanelLayout } from '../../ui/page-layout/panel-layout';
+export { localPanelWidthVar } from '../../ui/page-layout/constants';

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

@@ -9,12 +9,12 @@ function clampTargetWidth({
 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;
+  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.preferredWidth) !== null && _ref !== void 0 ? _ref : defaultWidth;
 }
-function getOverlayTargetWidth(area, isSideNavOverlay) {
+function getOverlayTargetWidth(area, isSideNavOverlay, areaName) {
   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;
+  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 : areaName === 'panel' ? area.preferredWidth : area.preferredOverlayWidth) !== null && _ref2 !== void 0 ? _ref2 : defaultWidth;
 }
 export function calculateLayoutAreaStates({
   viewportWidth,
@@ -142,7 +142,7 @@ export function calculateLayoutAreaStates({
     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 target = getOverlayTargetWidth(area, isSideNavOverlay, areaName);
     const width = clampTargetWidth({
       target,
       min: effectiveMin,

package/dist/es2019/ui/page-layout/chat-panel.js

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
-import { chatPanelLiveWidthVar, chatPanelVar, localSlotLayers, mainMinimumWidthVar } from './constants';
+import { chatPanelLiveWidthVar, chatPanelVar, defaultMainMinWidth, localSlotLayers, mainMinimumWidthVar } from './constants';
 import { convertResizeBoundToPixels } from './panel-splitter/convert-resize-bound-to-pixels';
 import { PanelSplitterProvider } from './panel-splitter/provider';
 import { resolveLayoutWidth } from './resolve-layout-width';
@@ -139,7 +139,7 @@ export function ChatPanel({
     const localPanel = main.querySelector('[data-layout-with-panel-slot]');
     const isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
     const localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
-    const mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, 320);
+    const mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, defaultMainMinWidth);
     const mainContentWidth = mainWidth - localPanelWidth;
     const availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
     const availableInlineWidth = Math.floor(chatPanelWidth + availableWidth);

package/dist/es2019/ui/page-layout/constants.js

@@ -4,6 +4,11 @@
  * We have chosen to ignore this rule to prevent duplicating them across the different slots, and to provide a high level view of them and how they relate.
  */
 
+/**
+ * Default minimum width of Main, in pixels, before a custom minimum is registered.
+ */
+export const defaultMainMinWidth = 320;
+
 // These are "compressed" to discourage usage.
 export const sideNavVar = '--n_sNvw';
 export const asideVar = '--n_asDw';
@@ -15,6 +20,15 @@ export const bannerMountedVar = '--n_bnrM';
 export const topNavMountedVar = '--n_tNvM';
 export const ribbonVar = '--n_rbnW';
 
+/**
+ * Rendered border-box width of the local PanelLayout surface, in both inline and overlay modes.
+ * Published on document.documentElement after mounting when Root opts into
+ * UNSAFE_dangerouslyHoistSlotSizes. Only the primary Root should opt in.
+ * Use `var(${localPanelWidthVar}, 0px)` for external controls, not for width persistence
+ * or sizing the panel itself. The property is removed when the surface unmounts.
+ */
+export const localPanelWidthVar = '--n_localPanelWidth';
+
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
  *

package/dist/es2019/ui/page-layout/get-panel-layout-defaults.js

@@ -0,0 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+const DEFAULT_PANEL_WIDTH = 365;
+const DEFAULT_PANEL_WIDTH_WITH_CHAT_PANEL_LAYOUT = 400;
+
+/**
+ * Local-panel defaults in pixels, used only when no explicit preference exists.
+ * Keep the existing desktop width until chat layout rolls out. Compact sizing is independent.
+ * These are requested defaults, not measurements of an open panel.
+ */
+export function getPanelLayoutDefaults() {
+  return {
+    panelWidth: fg('platform-dst-chat-panel-layout') ? DEFAULT_PANEL_WIDTH_WITH_CHAT_PANEL_LAYOUT : DEFAULT_PANEL_WIDTH,
+    compactPanelWidth: 320,
+    panelMinWidth: 320
+  };
+}

package/dist/es2019/ui/page-layout/layout-area-sizing-provider.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
+import { defaultMainMinWidth } from './constants';
 import { LayoutAreaSizingContext } from './layout-area-sizing-context';
 import { layoutAreaStateContexts } from './layout-area-state-contexts';
 import { useCssLayoutAreaStates } from './use-css-layout-area-states';
@@ -50,7 +51,7 @@ export function LayoutAreaSizingProvider({
       listener: dismissOlderOverlay
     });
   }, [chatPanelMode, lastOpenedOverlay, sideNavMode]);
-  const mainMinWidth = useRef(320);
+  const mainMinWidth = useRef(defaultMainMinWidth);
   const loadRef = useRef(() => {});
   const ready = useRef(false);
   const waiting = useRef([]);

package/dist/es2019/ui/page-layout/layout-area-sizing-runtime.js

@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { calculateLayoutAreaStates } from './calculate-layout-area-states';
+import { defaultMainMinWidth } from './constants';
 import { LayoutAreaSizingContext } from './layout-area-sizing-context';
 import { layoutAreaStateContexts } from './layout-area-state-contexts';
 import { resolveLayoutWidth } from './resolve-layout-width';
 import { useOccupiedLayoutWidth } from './use-occupied-layout-width';
-const defaultMainMinWidth = 320;
 function useStableAreaState(state) {
   const {
     mode,
@@ -274,7 +274,7 @@ export function LayoutAreaSizingRuntime({
       if (!existing) {
         return current;
       }
-      if (mode === 'overlay') {
+      if (mode === 'overlay' && area !== 'panel') {
         return {
           ...current,
           [area]: {
@@ -289,7 +289,8 @@ export function LayoutAreaSizingRuntime({
         [area]: {
           ...existing,
           liveResize: undefined,
-          preferredInlineWidth: width
+          // Local panels have one preference, regardless of the resized mode.
+          preferredWidth: width
         }
       };
     });

package/dist/es2019/ui/page-layout/local-panel-surface.compiled.css

@@ -0,0 +1,26 @@
+._nd5l1c6w{grid-area:panel}
+._nd5l1gzg{grid-area:main}
+._nd5l32aw{grid-area:var(--p_lclPnlSsrArea,main)}
+._y44v1mph{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
+._191wbqna{border-inline-start:var(--p_lclPnlSsrBorder,none)}
+._191wglyw{border-inline-start:none}
+._191wia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._10fph9n0{justify-self:end}
+._152tidpf{inset-block-start:0}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._16qs1dhr{box-shadow:var(--p_lclPnlSsrShadow,var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f))}
+._16qsglyw{box-shadow:none}
+._18m91wug{overflow-y:auto}
+._1bsb13q4{width:min(90%,var(--p_lclPnlRsz,var(--p_lclPnlW)))}
+._1bsb1c5w{width:var(--p_lclPnlRsz,var(--p_lclPnlW))}
+._1bsb1cku{width:var(--p_lclPnlSsrWidth,min(90%,var(--p_lclPnlSsrPreferredW)))}
+._1reo1wug{overflow-x:auto}
+._4t3i1osq{height:100%}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1g1j{background-color:var(--p_lclPnlSsrBackground,var(--ds-surface-overlay,#fff))}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ju25dn4k{animation-delay:var(--ds-duration-xshort,.1s)}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}