@atlaskit/navigation-system 11.3.4 → 11.4.0

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

@@ -0,0 +1,193 @@
+/* local-panel-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./local-panel-surface.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useContext, useMemo, useRef } from 'react';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { useMotion } from '@atlaskit/motion/entering/use-motion';
+import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { localPanelWidthVar } from './constants';
+import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
+import { PanelSplitter } from './panel-splitter/panel-splitter';
+import { PanelSplitterProvider } from './panel-splitter/provider';
+const localPanelVar = '--p_lclPnlW';
+const panelSplitterResizingVar = '--p_lclPnlRsz';
+const localPanelSplitterId = Symbol('LocalPanel PanelSplitter');
+
+// Compiled preserves the existing container-relative widths and discrete motion styles.
+/* eslint-disable @compiled/shorthand-property-sorting -- Content motion overrides only the animation delay. */
+const styles = {
+  panelWrapper: "_nd5l1gzg _kqsw1if8 _bfhk1bhr _vchhusvi _4t3ieqxy _152tidpf _10fph9n0 _1bsb13q4",
+  managedInline: "_nd5l1c6w _bfhkvuon _152tidpf _1bsb1c5w",
+  unmeasured: "_nd5l32aw _191wbqna _1bsb1cku _bfhk1g1j _16qs1dhr",
+  managedOverlay: "_nd5l1gzg _bfhk1bhr _1bsb1c5w",
+  panelScrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
+  border: "_191wglyw _16qs130s",
+  managedInlineBorder: "_191wia51 _16qsglyw",
+  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _bq641n9t _105aeydr",
+  contentEntering: "_y44v1mph",
+  contentExiting: "_y44vf1qi",
+  contentChangeContainer: "_4t3i1osq"
+};
+const contentEnteringDelayStyles = {
+  root: "_ju25dn4k"
+};
+/* eslint-enable @compiled/shorthand-property-sorting */
+
+const PanelContentMotion = ({
+  children
+}) => {
+  const {
+    state,
+    ref
+  } = useMotion();
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: ax([styles.contentChangeContainer, state === 'entering' && styles.contentEntering, state === 'exiting' && styles.contentExiting])
+  }, children);
+};
+/**
+ * Internal surface for PanelLayout. The host supplies content; navigation owns its geometry.
+ */
+export function LocalPanelSurface({
+  children,
+  contentKey,
+  label,
+  resizeLabel,
+  defaultWidth,
+  minWidth,
+  maxWidth,
+  testId,
+  layoutRef,
+  managedSizing,
+  getManagedResizeBounds,
+  prepareResize,
+  onManagedResizeStart,
+  onManagedResize,
+  onManagedResizeEnd,
+  onWidthChange,
+  onResizeEnd
+}) {
+  var _managedSizing$mode, _managedSizing$width;
+  const ref = useRef(null);
+  const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
+  useLayoutEffect(() => {
+    const panel = ref.current;
+    if (!dangerouslyHoistSlotSizes || !panel) {
+      return;
+    }
+    // Container-relative CSS owns the initial width, before the sizing runtime loads.
+    // Publish geometry directly for external controls; never feed it into saved preferences.
+    let previousWidth;
+    const publishWidth = width => {
+      if (width !== previousWidth) {
+        previousWidth = width;
+        panel.ownerDocument.documentElement.style.setProperty(localPanelWidthVar, `${width}px`);
+      }
+    };
+    publishWidth(panel.getBoundingClientRect().width);
+    const observer = new ResizeObserver(([entry]) => {
+      var _entry$borderBoxSize$, _entry$borderBoxSize, _entry$borderBoxSize$2;
+      publishWidth((_entry$borderBoxSize$ = (_entry$borderBoxSize = entry.borderBoxSize) === null || _entry$borderBoxSize === void 0 ? void 0 : (_entry$borderBoxSize$2 = _entry$borderBoxSize[0]) === null || _entry$borderBoxSize$2 === void 0 ? void 0 : _entry$borderBoxSize$2.inlineSize) !== null && _entry$borderBoxSize$ !== void 0 ? _entry$borderBoxSize$ : panel.getBoundingClientRect().width);
+    });
+    observer.observe(panel, {
+      box: 'border-box'
+    });
+    return () => {
+      observer.disconnect();
+      panel.ownerDocument.documentElement.style.removeProperty(localPanelWidthVar);
+    };
+  }, [dangerouslyHoistSlotSizes]);
+  const scrollRef = useRef(null);
+  useLayoutEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, [contentKey]);
+  const {
+    state,
+    ref: motionRef
+  } = useMotion();
+  const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
+  const isContentMotionEnabled = fg('platform-dst-motion-uplift-panel-content');
+  const mergedRef = useMemo(() => isMotionUpliftEnabled ? mergeRefs([ref, motionRef]) : ref, [isMotionUpliftEnabled, motionRef]);
+  const mode = (_managedSizing$mode = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) !== null && _managedSizing$mode !== void 0 ? _managedSizing$mode : 'overlay';
+  const managedMode = useStableRef(managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode);
+  // Resize preparation can load the coordinator after the interaction starts.
+  // Read its latest mode instead of the pre-load callback's captured fallback.
+  const getMode = useCallback(() => {
+    if (managedMode.current) {
+      return managedMode.current;
+    }
+    return ref.current && getComputedStyle(ref.current).gridArea.split('/')[0].trim() === 'panel' ? 'inline' : 'overlay';
+  }, [managedMode]);
+  const dragMode = useRef('overlay');
+  const completedResizeModeRef = useRef(mode);
+  const renderedWidth = (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : Math.max(minWidth, Math.min(defaultWidth, maxWidth !== null && maxWidth !== void 0 ? maxWidth : Infinity));
+  // Before the first measurement, CSS caps the surface to its containing region.
+  // Resize preparation waits for the coordinator to resolve the same bounds for both inputs.
+  const getResizeBounds = useCallback(() => {
+    var _getManagedResizeBoun;
+    return (_getManagedResizeBoun = getManagedResizeBounds()) !== null && _getManagedResizeBoun !== void 0 ? _getManagedResizeBoun : {
+      min: '0px',
+      max: '0px'
+    };
+  }, [getManagedResizeBounds]);
+  const onCompleteResize = useCallback(width => {
+    // Keyboard analytics are debounced; retain the mode that produced this width,
+    // rather than the layout mode when the delayed callback eventually runs.
+    const mode = getMode();
+    completedResizeModeRef.current = mode;
+    onManagedResizeEnd(mode, width);
+    onWidthChange(width);
+  }, [getMode, onManagedResizeEnd, onWidthChange]);
+  const onResizeStartInternal = useCallback(() => {
+    dragMode.current = getMode();
+    onManagedResizeStart(dragMode.current);
+  }, [getMode, onManagedResizeStart]);
+  const onResizeInternal = useCallback(width => onManagedResize(dragMode.current, width), [onManagedResize]);
+  const handleResizeEnd = useCallback(event => onResizeEnd({
+    ...event,
+    mode: completedResizeModeRef.current
+  }), [onResizeEnd]);
+  return /*#__PURE__*/React.createElement("section", {
+    "aria-label": label,
+    "data-testid": testId,
+    "data-layout-with-panel-slot": "",
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+      [localPanelVar]: `${renderedWidth}px`
+    },
+    ref: mergedRef,
+    className: ax([isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, styles.panelWrapper, styles.border, !managedSizing && styles.unmeasured, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInline, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInlineBorder])
+  }, /*#__PURE__*/React.createElement(PanelSplitterProvider, {
+    panelId: localPanelSplitterId,
+    panelRef: ref,
+    resizingElementRef: layoutRef,
+    panelWidth: renderedWidth,
+    onCompleteResize: onCompleteResize,
+    prepareResize: prepareResize,
+    onResizeStartInternal: onResizeStartInternal,
+    onResizeInternal: onResizeInternal,
+    getResizeBounds: getResizeBounds,
+    isEnabled: managedSizing !== undefined || prepareResize !== undefined,
+    resizingCssVar: panelSplitterResizingVar,
+    position: "start"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scrollRef,
+    "data-testid": testId && `${testId}--scroll-container`,
+    className: ax([styles.panelScrollContainer, state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'entering' && contentEnteringDelayStyles.root, state === 'exiting' && styles.contentExiting])
+  }, isContentMotionEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+    exitThenEnter: true
+  }, /*#__PURE__*/React.createElement(PanelContentMotion, {
+    key: contentKey
+  }, children)) : children, /*#__PURE__*/React.createElement(PanelSplitter, {
+    label: resizeLabel,
+    testId: testId && `${testId}--splitter`,
+    onResizeEnd: handleResizeEnd
+  }))));
+}

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

@@ -5,7 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
-import { mainMinimumWidthVar } from '../constants';
+import { defaultMainMinWidth, mainMinimumWidthVar } from '../constants';
+import { MainMinWidthContext } from '../main-min-width-context';
 import { gridRootFitId, gridRootId } from '../root';
 import { useLayoutId } from '../use-layout-id';
 import { useLayoutMainSizing } from '../use-layout-main-sizing';
@@ -24,7 +25,7 @@ export function Main({
   skipLinkLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content',
   testId,
   id: providedId,
-  minWidth = 320
+  minWidth = defaultMainMinWidth
 }) {
   const id = useLayoutId({
     providedId
@@ -40,5 +41,7 @@ export function Main({
     className: ax([mainElementStyles.root, xcss]),
     role: "main",
     "data-testid": testId
-  }, children));
+  }, /*#__PURE__*/React.createElement(MainMinWidthContext.Provider, {
+    value: fg('platform-dst-chat-panel-layout') ? minWidth : defaultMainMinWidth
+  }, children)));
 }

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

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import { defaultMainMinWidth } from './constants';
+
+// Available during SSR, before Main registers with the measured sizing coordinator.
+export const MainMinWidthContext = /*#__PURE__*/createContext(defaultMainMinWidth);

package/dist/es2019/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/es2019/ui/page-layout/panel-layout-shell.js

@@ -0,0 +1,74 @@
+/* panel-layout-shell.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./panel-layout-shell.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext, useId } from 'react';
+import { MainMinWidthContext } from './main-min-width-context';
+
+// The grid uses runtime CSS variables and container sizing outside @atlaskit/css's bounded values.
+const localPanelTrackWidthVar = '--p_lclPnlTrackW';
+const localPanelResizingVar = '--p_lclPnlRsz';
+const localPanelMinWidthVar = '--p_lclPnlMinW';
+const 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.
+ */
+export function PanelLayoutShell({
+  children,
+  panel,
+  isPanelOpen,
+  panelWidth,
+  compactPanelWidth,
+  panelMinWidth = 320,
+  mode,
+  layoutRef,
+  shouldClipOverflow = false,
+  testId
+}) {
+  const mainMinWidth = useContext(MainMinWidthContext);
+  const id = `local-panel-${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.
+  const inlineQuery = `@container local-panel-layout (min-width: ${mainMinWidth + panelMinWidth}px)`;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 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, `${inlineQuery} {
+					#${id} {
+						--p_lclPnlSsrAreas: var(--p_lclPnlSsrInlineAreas);
+						--p_lclPnlSsrColumns: minmax(0, 1fr) min(var(--p_lclPnlSsrPreferredW), calc(100% - ${mainMinWidth}px));
+						--p_lclPnlSsrArea: panel;
+						--p_lclPnlSsrWidth: 100%;
+						--p_lclPnlSsrBackground: ${"var(--ds-surface, #FFFFFF)"};
+						--p_lclPnlSsrShadow: none;
+						--p_lclPnlSsrBorder: ${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"};
+					}
+				}`), /*#__PURE__*/React.createElement("div", {
+    id: id,
+    "data-testid": testId,
+    ref: layoutRef,
+    style: {
+      // These runtime track widths are shared with the panel splitter.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
+      [localPanelTrackWidthVar]: `${panelWidth}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
+      [localPanelMinWidthVar]: `${panelMinWidth}px`,
+      '--p_lclPnlCompactW': `${compactPanelWidth}px`
+    },
+    className: 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: ax([styles.mainContent])
+  }, children), panel));
+}

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

@@ -0,0 +1,147 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import invariant from 'tiny-invariant';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { getPanelLayoutDefaults } from './get-panel-layout-defaults';
+import { LayoutAreaSizingContext } from './layout-area-sizing-context';
+import { LayoutAreaSizingProvider } from './layout-area-sizing-provider';
+import { LocalPanelSurface } from './local-panel-surface';
+import { PanelLayoutShell } from './panel-layout-shell';
+import { useLayoutAreaSizing } from './use-layout-area-sizing';
+
+// Development-only ownership checks are scoped to each coordinator, not the whole page.
+const mountedPanelLayouts = new WeakSet();
+function CoordinatedPanelLayout({
+  children,
+  panel,
+  isPanelOpen,
+  panelKey,
+  panelWidth,
+  defaultPanelWidth,
+  compactDefaultPanelWidth,
+  panelMinWidth: suppliedMinWidth,
+  panelMaxWidth,
+  onPanelWidthChange,
+  onResizeEnd,
+  panelLabel = 'Panel',
+  resizeLabel = 'Resize panel',
+  testId,
+  layoutRef
+}) {
+  var _ref, _ref2, _ref3, _state$width;
+  const [defaults] = useState(getPanelLayoutDefaults);
+  const panelMinWidth = suppliedMinWidth !== null && suppliedMinWidth !== void 0 ? suppliedMinWidth : defaults.panelMinWidth;
+  const coordinator = useContext(LayoutAreaSizingContext);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && coordinator) {
+      invariant(!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 () => {
+        mountedPanelLayouts.delete(coordinator);
+      };
+    }
+  }, [coordinator]);
+  const [defaultWidth] = useState((_ref = defaultPanelWidth !== null && defaultPanelWidth !== void 0 ? defaultPanelWidth : panelWidth) !== null && _ref !== void 0 ? _ref : defaults.panelWidth);
+  const [compactWidth] = useState((_ref2 = (_ref3 = compactDefaultPanelWidth !== null && compactDefaultPanelWidth !== void 0 ? compactDefaultPanelWidth : defaultPanelWidth) !== null && _ref3 !== void 0 ? _ref3 : panelWidth) !== null && _ref2 !== void 0 ? _ref2 : defaults.compactPanelWidth);
+  // Use the controlled request before measurement too, without changing the mount-time default.
+  const fallbackWidth = Math.max(panelMinWidth, Math.min(panelWidth !== null && panelWidth !== void 0 ? panelWidth : defaultWidth, panelMaxWidth !== null && panelMaxWidth !== void 0 ? panelMaxWidth : Infinity));
+  const {
+    state,
+    prepareResize,
+    getResizeBounds,
+    startResize,
+    resize,
+    completeResize
+  } = useLayoutAreaSizing({
+    area: 'panel',
+    config: {
+      isOpen: isPanelOpen,
+      requestedWidth: panelWidth,
+      defaultWidth,
+      compactDefaultWidth: compactWidth,
+      minWidth: panelMinWidth,
+      maxWidth: panelMaxWidth
+    }
+  });
+  // Host callback identity is unrelated to sizing. Keep drag bindings stable while
+  // still delivering completions to the latest product-owned state and analytics.
+  const onWidthChangeRef = useStableRef(onPanelWidthChange);
+  const onResizeEndRef = useStableRef(onResizeEnd);
+  const handleWidthChange = useCallback(width => {
+    var _onWidthChangeRef$cur;
+    return (_onWidthChangeRef$cur = onWidthChangeRef.current) === null || _onWidthChangeRef$cur === void 0 ? void 0 : _onWidthChangeRef$cur.call(onWidthChangeRef, width);
+  }, [onWidthChangeRef]);
+  const handleResizeEnd = useCallback(event => {
+    var _onResizeEndRef$curre;
+    return (_onResizeEndRef$curre = onResizeEndRef.current) === null || _onResizeEndRef$curre === void 0 ? void 0 : _onResizeEndRef$curre.call(onResizeEndRef, event);
+  }, [onResizeEndRef]);
+  const isMotionEnabled = fg('platform-dst-motion-uplift-panel');
+  const surface = isPanelOpen && /*#__PURE__*/React.createElement(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 && `${testId}--panel-slot`
+  }, panel);
+  return /*#__PURE__*/React.createElement(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.createElement(ExitingPersistence, 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.
+ */
+export function PanelLayout(props) {
+  const parentSizing = useContext(LayoutAreaSizingContext);
+  const layoutRef = useRef(null);
+  const content = /*#__PURE__*/React.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.createElement(LayoutAreaSizingProvider, {
+    layoutRef: layoutRef
+  }, content);
+}

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

@@ -176,7 +176,7 @@ const PortaledPanelSplitter = ({
   const initialClientXRef = useRef(null);
   // Live allocation changes panelWidth on every frame. Only the legacy path should
   // rebind the drag listeners when this value changes.
-  const legacyPanelWidth = fg('platform-dst-chat-panel-layout') ? undefined : panelWidth;
+  const legacyPanelWidth = fg('platform-dst-chat-panel-layout') || onResizeInternal ? undefined : panelWidth;
   useEffect(() => {
     const splitter = splitterRef.current;
     invariant(splitter, 'Splitter ref must be set');
@@ -287,7 +287,7 @@ const PortaledPanelSplitter = ({
           position
         });
         const resizingWidth = `clamp(${resizeBounds.min}, ${targetWidth}px, ${resizeBounds.max})`;
-        if (fg('platform-dst-chat-panel-layout') && onResizeInternal) {
+        if (onResizeInternal) {
           // The allocator needs below-minimum requests for the local-to-chat cascade.
           const currentBounds = getResizeBounds();
           const width = Math.max(0, Math.min(targetWidth, prepareResize ? window.innerWidth : convertResizeBoundToPixels(currentBounds.max)));
@@ -324,7 +324,7 @@ const PortaledPanelSplitter = ({
         const finalWidth = getPixelWidth(panel);
         // Persist the final preferred width before removing the imperative drag
         // variable, so the rendered width is continuous across pointer release.
-        if (fg('platform-dst-chat-panel-layout')) {
+        if (fg('platform-dst-chat-panel-layout') || onResizeInternal) {
           flushSync(() => onCompleteResize(finalWidth));
         } else {
           onCompleteResize(finalWidth);
@@ -358,7 +358,7 @@ const PortaledPanelSplitter = ({
   const keyboardBoundsReady = useRef(false);
   const pendingKeyboardWidth = useRef(null);
   const handleSliderInputChange = useCallback(async (event, pendingKey) => {
-    const isManagedResize = fg('platform-dst-chat-panel-layout') && onResizeInternal;
+    const isManagedResize = onResizeInternal;
     const sequence = focusSequence.current;
     let value = isManagedResize ? parseFloat(event.currentTarget.value) : parseInt(event.currentTarget.value);
     if (prepareResize) {

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

@@ -17,7 +17,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import { hasOpenDialogOrPopover } from '@atlaskit/top-layer/page-surface/has-open-dialog-or-popover';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
-import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, defaultMainMinWidth, mainMinimumWidthVar, openLayerObserverSideNavNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { convertResizeBoundToPixels } from '../panel-splitter/convert-resize-bound-to-pixels';
@@ -338,7 +338,7 @@ function SideNavInternal({
     const isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
     const localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
     const mainContentWidth = mainWidth - localPanelWidth;
-    const mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, 320);
+    const mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, defaultMainMinWidth);
     const availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
     const availableInlineWidth = Math.floor(sideNavWidth + availableWidth);
     const constrainedMaxWidth = maxWidth ? Math.min(convertResizeBoundToPixels(maxWidth), availableInlineWidth) : availableInlineWidth;

package/dist/esm/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/esm/ui/page-layout/calculate-layout-area-states.js

@@ -12,12 +12,12 @@ function clampTargetWidth(_ref) {
 function getTargetWidth(area, isSideNavOverlay) {
   var _area$compactDefaultW, _area$liveResize, _ref2, _area$requestedWidth;
   var 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 : (_ref2 = (_area$requestedWidth = area.requestedWidth) !== null && _area$requestedWidth !== void 0 ? _area$requestedWidth : area.preferredInlineWidth) !== null && _ref2 !== void 0 ? _ref2 : defaultWidth;
+  return ((_area$liveResize = area.liveResize) === null || _area$liveResize === void 0 ? void 0 : _area$liveResize.mode) === 'inline' ? area.liveResize.width : (_ref2 = (_area$requestedWidth = area.requestedWidth) !== null && _area$requestedWidth !== void 0 ? _area$requestedWidth : area.preferredWidth) !== null && _ref2 !== void 0 ? _ref2 : defaultWidth;
 }
-function getOverlayTargetWidth(area, isSideNavOverlay) {
+function getOverlayTargetWidth(area, isSideNavOverlay, areaName) {
   var _area$compactDefaultW2, _area$liveResize2, _ref3, _area$requestedWidth2;
   var 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 : (_ref3 = (_area$requestedWidth2 = area.requestedWidth) !== null && _area$requestedWidth2 !== void 0 ? _area$requestedWidth2 : area.preferredOverlayWidth) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
+  return ((_area$liveResize2 = area.liveResize) === null || _area$liveResize2 === void 0 ? void 0 : _area$liveResize2.mode) === 'overlay' ? area.liveResize.width : (_ref3 = (_area$requestedWidth2 = area.requestedWidth) !== null && _area$requestedWidth2 !== void 0 ? _area$requestedWidth2 : areaName === 'panel' ? area.preferredWidth : area.preferredOverlayWidth) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
 }
 export function calculateLayoutAreaStates(_ref4) {
   var _ref5, _resizeSession$overla, _baselineWidths$chat, _panel$liveResize, _states$sideNav$widt, _states$sideNav, _states$chatPanel$wi, _states$chatPanel;
@@ -186,7 +186,7 @@ export function calculateLayoutAreaStates(_ref4) {
       var layoutMax = (_areaName2 === 'chat-panel' ? layoutWidth : mainAreaWidth) * 0.9;
       var _max = Math.max(0, Math.min(configuredMax, layoutMax));
       var effectiveMin = Math.min(_min2, _max);
-      var _target = getOverlayTargetWidth(_area, isSideNavOverlay);
+      var _target = getOverlayTargetWidth(_area, isSideNavOverlay, _areaName2);
       var _width = clampTargetWidth({
         target: _target,
         min: effectiveMin,

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

@@ -8,7 +8,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';
@@ -152,7 +152,7 @@ export function ChatPanel(_ref) {
     var localPanel = main.querySelector('[data-layout-with-panel-slot]');
     var isLocalPanelInline = localPanel && getComputedStyle(localPanel).gridArea === 'panel';
     var localPanelWidth = isLocalPanelInline ? localPanel.getBoundingClientRect().width : 0;
-    var mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, 320);
+    var mainMinimumWidth = getPixelCustomProperty(main, mainMinimumWidthVar, defaultMainMinWidth);
     var mainContentWidth = mainWidth - localPanelWidth;
     var availableWidth = Math.max(0, mainContentWidth - mainMinimumWidth);
     var availableInlineWidth = Math.floor(chatPanelWidth + availableWidth);

package/dist/esm/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 var defaultMainMinWidth = 320;
+
 // These are "compressed" to discourage usage.
 export var sideNavVar = '--n_sNvw';
 export var asideVar = '--n_asDw';
@@ -15,6 +20,15 @@ export var bannerMountedVar = '--n_bnrM';
 export var topNavMountedVar = '--n_tNvM';
 export var 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 var localPanelWidthVar = '--n_localPanelWidth';
+
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
  *

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

@@ -0,0 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+var DEFAULT_PANEL_WIDTH = 365;
+var 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/esm/ui/page-layout/layout-area-sizing-provider.js

@@ -4,6 +4,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
 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';
@@ -65,7 +66,7 @@ export function LayoutAreaSizingProvider(_ref) {
       listener: dismissOlderOverlay
     });
   }, [chatPanelMode, lastOpenedOverlay, sideNavMode]);
-  var mainMinWidth = useRef(320);
+  var mainMinWidth = useRef(defaultMainMinWidth);
   var loadRef = useRef(function () {});
   var ready = useRef(false);
   var waiting = useRef([]);