@primer/react 38.6.0-rc.a40322d70 → 38.6.0

package/dist/PageLayout/PageLayout.js

@@ -5,63 +5,13 @@ import { useId } from '../hooks/useId.js';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
 import { useSlots } from '../hooks/useSlots.js';
+import { canUseDOM } from '../utils/environment.js';
 import { useOverflow } from '../hooks/useOverflow.js';
 import { warning } from '../utils/warning.js';
 import { getResponsiveAttributes } from '../internal/utils/getResponsiveAttributes.js';
 import classes from './PageLayout.module.css.js';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-let viewportWidthListeners;
-let viewportWidthObserver;
-function subscribeToViewportWidth(callback) {
-  if (!viewportWidthListeners) {
-    viewportWidthListeners = new Set();
-    viewportWidthObserver = new ResizeObserver(() => {
-      if (viewportWidthListeners) {
-        for (const listener of viewportWidthListeners) {
-          listener();
-        }
-      }
-    });
-    viewportWidthObserver.observe(document.documentElement);
-  }
-  viewportWidthListeners.add(callback);
-  return () => {
-    var _viewportWidthListene, _viewportWidthListene2;
-    (_viewportWidthListene = viewportWidthListeners) === null || _viewportWidthListene === void 0 ? void 0 : _viewportWidthListene.delete(callback);
-    if (((_viewportWidthListene2 = viewportWidthListeners) === null || _viewportWidthListene2 === void 0 ? void 0 : _viewportWidthListene2.size) === 0) {
-      var _viewportWidthObserve;
-      (_viewportWidthObserve = viewportWidthObserver) === null || _viewportWidthObserve === void 0 ? void 0 : _viewportWidthObserve.disconnect();
-      viewportWidthObserver = undefined;
-      viewportWidthListeners = undefined;
-    }
-  };
-}
-function getViewportWidth() {
-  return window.innerWidth;
-}
-function getServerViewportWidth() {
-  return 0;
-}
-
-/**
- * Custom hook that subscribes to viewport width changes using a shared ResizeObserver
- */
-function useViewportWidth() {
-  return React.useSyncExternalStore(subscribeToViewportWidth, getViewportWidth, getServerViewportWidth);
-}
-
-/**
- * Gets the --pane-max-width-diff CSS variable value from a pane element.
- * This value is set by CSS media queries and controls the max pane width constraint.
- * Falls back to 511 (the CSS default) if the value cannot be read.
- */
-function getPaneMaxWidthDiff(paneElement) {
-  if (!paneElement) return 511;
-  const value = parseInt(getComputedStyle(paneElement).getPropertyValue('--pane-max-width-diff'), 10);
-  return value > 0 ? value : 511;
-}
 const PageLayoutContext = /*#__PURE__*/React.createContext({
   padding: 'normal',
   rowGap: 'normal',
@@ -274,27 +224,12 @@ const HorizontalDivider = t0 => {
   }
   return t8;
 };
-// Helper to update ARIA slider attributes via direct DOM manipulation
-// This avoids re-renders when values change during drag or on viewport resize
-const updateAriaValues = (handle, values) => {
-  if (!handle) return;
-  if (values.min !== undefined) handle.setAttribute('aria-valuemin', String(values.min));
-  if (values.max !== undefined) handle.setAttribute('aria-valuemax', String(values.max));
-  if (values.current !== undefined) {
-    handle.setAttribute('aria-valuenow', String(values.current));
-    handle.setAttribute('aria-valuetext', `Pane width ${values.current} pixels`);
-  }
-};
-const DATA_DRAGGING_ATTR = 'data-dragging';
-const isDragging = handle => {
-  return (handle === null || handle === void 0 ? void 0 : handle.getAttribute(DATA_DRAGGING_ATTR)) === 'true';
-};
 const VerticalDivider = t0 => {
-  const $ = c(32);
+  const $ = c(40);
   const {
     variant: t1,
     draggable: t2,
-    handleRef,
+    onDragStart,
     onDrag,
     onDragEnd,
     onDoubleClick,
@@ -304,175 +239,234 @@ const VerticalDivider = t0 => {
   } = t0;
   const variant = t1 === undefined ? "none" : t1;
   const draggable = t2 === undefined ? false : t2;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isKeyboardDrag, setIsKeyboardDrag] = React.useState(false);
   const stableOnDrag = React.useRef(onDrag);
   const stableOnDragEnd = React.useRef(onDragEnd);
-  let t3;
-  if ($[0] !== onDrag || $[1] !== onDragEnd) {
-    t3 = () => {
-      stableOnDrag.current = onDrag;
-      stableOnDragEnd.current = onDragEnd;
-    };
-    $[0] = onDrag;
-    $[1] = onDragEnd;
-    $[2] = t3;
-  } else {
-    t3 = $[2];
-  }
-  React.useEffect(t3);
   const {
     paneRef
   } = React.useContext(PageLayoutContext);
-  const handlePointerDown = _temp;
-  let t4;
-  if ($[3] !== handleRef) {
-    t4 = event_0 => {
-      if (!isDragging(handleRef.current)) {
-        return;
-      }
-      event_0.preventDefault();
-      if (event_0.movementX !== 0) {
-        stableOnDrag.current(event_0.movementX, false);
+  const [minWidth, setMinWidth] = React.useState(0);
+  const [maxWidth, setMaxWidth] = React.useState(0);
+  const [currentWidth, setCurrentWidth] = React.useState(0);
+  let t3;
+  if ($[0] !== paneRef) {
+    t3 = () => {
+      if (paneRef.current !== null) {
+        const paneStyles = getComputedStyle(paneRef.current);
+        const maxPaneWidthDiffPixels = paneStyles.getPropertyValue("--pane-max-width-diff");
+        const minWidthPixels = paneStyles.getPropertyValue("--pane-min-width");
+        const paneWidth = paneRef.current.getBoundingClientRect().width;
+        const maxPaneWidthDiff = Number(maxPaneWidthDiffPixels.split("px")[0]);
+        const minPaneWidth = Number(minWidthPixels.split("px")[0]);
+        const viewportWidth = window.innerWidth;
+        const maxPaneWidth = viewportWidth > maxPaneWidthDiff ? viewportWidth - maxPaneWidthDiff : viewportWidth;
+        setMinWidth(minPaneWidth);
+        setMaxWidth(maxPaneWidth);
+        setCurrentWidth(paneWidth || 0);
       }
     };
-    $[3] = handleRef;
-    $[4] = t4;
+    $[0] = paneRef;
+    $[1] = t3;
   } else {
-    t4 = $[4];
+    t3 = $[1];
   }
-  const handlePointerMove = t4;
-  let t5;
-  if ($[5] !== handleRef) {
-    t5 = event_1 => {
-      if (!isDragging(handleRef.current)) {
-        return;
-      }
-      event_1.preventDefault();
-    };
-    $[5] = handleRef;
-    $[6] = t5;
+  let t4;
+  if ($[2] !== isDragging || $[3] !== isKeyboardDrag || $[4] !== paneRef) {
+    t4 = [paneRef, isKeyboardDrag, isDragging];
+    $[2] = isDragging;
+    $[3] = isKeyboardDrag;
+    $[4] = paneRef;
+    $[5] = t4;
   } else {
-    t5 = $[6];
+    t4 = $[5];
   }
-  const handlePointerUp = t5;
+  React.useEffect(t3, t4);
+  let t5;
   let t6;
-  if ($[7] !== handleRef) {
-    t6 = event_2 => {
-      if (!isDragging(handleRef.current)) {
-        return;
-      }
-      const target_0 = event_2.currentTarget;
-      target_0.removeAttribute(DATA_DRAGGING_ATTR);
-      stableOnDragEnd.current();
+  if ($[6] !== onDrag) {
+    t5 = () => {
+      stableOnDrag.current = onDrag;
     };
-    $[7] = handleRef;
+    t6 = [onDrag];
+    $[6] = onDrag;
+    $[7] = t5;
     $[8] = t6;
   } else {
+    t5 = $[7];
     t6 = $[8];
   }
-  const handleLostPointerCapture = t6;
+  React.useEffect(t5, t6);
   let t7;
-  if ($[9] !== paneRef) {
-    t7 = event_3 => {
-      if (event_3.key === "ArrowLeft" || event_3.key === "ArrowRight" || event_3.key === "ArrowUp" || event_3.key === "ArrowDown") {
-        event_3.preventDefault();
-        if (!paneRef.current) {
-          return;
-        }
-        const delta = event_3.key === "ArrowLeft" || event_3.key === "ArrowDown" ? -3 : 3;
-        event_3.currentTarget.setAttribute(DATA_DRAGGING_ATTR, "true");
-        stableOnDrag.current(delta, true);
-      }
+  let t8;
+  if ($[9] !== onDragEnd) {
+    t7 = () => {
+      stableOnDragEnd.current = onDragEnd;
     };
-    $[9] = paneRef;
+    t8 = [onDragEnd];
+    $[9] = onDragEnd;
     $[10] = t7;
+    $[11] = t8;
   } else {
     t7 = $[10];
+    t8 = $[11];
   }
-  const handleKeyDown = t7;
-  let t8;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = event_4 => {
-      if (event_4.key === "ArrowLeft" || event_4.key === "ArrowRight" || event_4.key === "ArrowUp" || event_4.key === "ArrowDown") {
-        event_4.preventDefault();
-        event_4.currentTarget.removeAttribute(DATA_DRAGGING_ATTR);
-        stableOnDragEnd.current();
+  React.useEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[12] !== currentWidth || $[13] !== isDragging || $[14] !== isKeyboardDrag || $[15] !== maxWidth || $[16] !== minWidth) {
+    t9 = () => {
+      const handleDrag = function handleDrag(event) {
+        var _stableOnDrag$current;
+        (_stableOnDrag$current = stableOnDrag.current) === null || _stableOnDrag$current === void 0 ? void 0 : _stableOnDrag$current.call(stableOnDrag, event.movementX, false);
+        event.preventDefault();
+      };
+      const handleDragEnd = function handleDragEnd(event_0) {
+        var _stableOnDragEnd$curr;
+        setIsDragging(false);
+        (_stableOnDragEnd$curr = stableOnDragEnd.current) === null || _stableOnDragEnd$curr === void 0 ? void 0 : _stableOnDragEnd$curr.call(stableOnDragEnd);
+        event_0.preventDefault();
+      };
+      const handleKeyDrag = function handleKeyDrag(event_1) {
+        var _stableOnDrag$current2;
+        let delta;
+        if ((event_1.key === "ArrowLeft" || event_1.key === "ArrowDown") && currentWidth > minWidth) {
+          delta = -3;
+        } else {
+          if ((event_1.key === "ArrowRight" || event_1.key === "ArrowUp") && currentWidth < maxWidth) {
+            delta = 3;
+          } else {
+            return;
+          }
+        }
+        setCurrentWidth(currentWidth + delta);
+        (_stableOnDrag$current2 = stableOnDrag.current) === null || _stableOnDrag$current2 === void 0 ? void 0 : _stableOnDrag$current2.call(stableOnDrag, delta, true);
+        event_1.preventDefault();
+      };
+      const handleKeyDragEnd = function handleKeyDragEnd(event_2) {
+        var _stableOnDragEnd$curr2;
+        setIsKeyboardDrag(false);
+        (_stableOnDragEnd$curr2 = stableOnDragEnd.current) === null || _stableOnDragEnd$curr2 === void 0 ? void 0 : _stableOnDragEnd$curr2.call(stableOnDragEnd);
+        event_2.preventDefault();
+      };
+      if (isDragging || isKeyboardDrag) {
+        window.addEventListener("mousemove", handleDrag);
+        window.addEventListener("keydown", handleKeyDrag);
+        window.addEventListener("mouseup", handleDragEnd);
+        window.addEventListener("keyup", handleKeyDragEnd);
+        const body = document.body;
+        body === null || body === void 0 ? void 0 : body.setAttribute("data-page-layout-dragging", "true");
+      } else {
+        window.removeEventListener("mousemove", handleDrag);
+        window.removeEventListener("mouseup", handleDragEnd);
+        window.removeEventListener("keydown", handleKeyDrag);
+        window.removeEventListener("keyup", handleKeyDragEnd);
+        const body_0 = document.body;
+        body_0 === null || body_0 === void 0 ? void 0 : body_0.removeAttribute("data-page-layout-dragging");
       }
+      return () => {
+        window.removeEventListener("mousemove", handleDrag);
+        window.removeEventListener("mouseup", handleDragEnd);
+        window.removeEventListener("keydown", handleKeyDrag);
+        window.removeEventListener("keyup", handleKeyDragEnd);
+        const body_1 = document.body;
+        body_1 === null || body_1 === void 0 ? void 0 : body_1.removeAttribute("data-page-layout-dragging");
+      };
     };
-    $[11] = t8;
+    t10 = [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth];
+    $[12] = currentWidth;
+    $[13] = isDragging;
+    $[14] = isKeyboardDrag;
+    $[15] = maxWidth;
+    $[16] = minWidth;
+    $[17] = t10;
+    $[18] = t9;
   } else {
-    t8 = $[11];
+    t10 = $[17];
+    t9 = $[18];
   }
-  const handleKeyUp = t8;
-  let t9;
-  if ($[12] !== className) {
-    t9 = clsx(classes.VerticalDivider, className);
-    $[12] = className;
-    $[13] = t9;
+  React.useEffect(t9, t10);
+  let t11;
+  if ($[19] !== className) {
+    t11 = clsx(classes.VerticalDivider, className);
+    $[19] = className;
+    $[20] = t11;
   } else {
-    t9 = $[13];
+    t11 = $[20];
   }
-  let t10;
-  if ($[14] !== variant) {
-    t10 = getResponsiveAttributes("variant", variant);
-    $[14] = variant;
-    $[15] = t10;
+  let t12;
+  if ($[21] !== variant) {
+    t12 = getResponsiveAttributes("variant", variant);
+    $[21] = variant;
+    $[22] = t12;
   } else {
-    t10 = $[15];
+    t12 = $[22];
   }
-  let t11;
-  if ($[16] !== position) {
-    t11 = getResponsiveAttributes("position", position);
-    $[16] = position;
-    $[17] = t11;
+  let t13;
+  if ($[23] !== position) {
+    t13 = getResponsiveAttributes("position", position);
+    $[23] = position;
+    $[24] = t13;
   } else {
-    t11 = $[17];
+    t13 = $[24];
   }
-  let t12;
-  if ($[18] !== draggable || $[19] !== handleKeyDown || $[20] !== handleLostPointerCapture || $[21] !== handlePointerMove || $[22] !== handlePointerUp || $[23] !== handleRef || $[24] !== onDoubleClick) {
-    t12 = draggable ? /*#__PURE__*/jsx("div", {
-      ref: handleRef,
+  let t14;
+  if ($[25] !== currentWidth || $[26] !== draggable || $[27] !== isDragging || $[28] !== isKeyboardDrag || $[29] !== maxWidth || $[30] !== minWidth || $[31] !== onDoubleClick || $[32] !== onDragStart) {
+    t14 = draggable ? /*#__PURE__*/jsx("div", {
       className: classes.DraggableHandle,
+      "data-dragging": isDragging || isKeyboardDrag,
       role: "slider",
       "aria-label": "Draggable pane splitter",
+      "aria-valuemin": minWidth,
+      "aria-valuemax": maxWidth,
+      "aria-valuenow": currentWidth,
+      "aria-valuetext": `Pane width ${currentWidth} pixels`,
       tabIndex: 0,
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onLostPointerCapture: handleLostPointerCapture,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
+      onMouseDown: event_3 => {
+        if (event_3.button === 0) {
+          setIsDragging(true);
+          onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+        }
+      },
+      onKeyDown: event_4 => {
+        if (event_4.key === "ArrowLeft" || event_4.key === "ArrowRight" || event_4.key === "ArrowUp" || event_4.key === "ArrowDown") {
+          setIsKeyboardDrag(true);
+          onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+        }
+      },
       onDoubleClick: onDoubleClick
     }) : null;
-    $[18] = draggable;
-    $[19] = handleKeyDown;
-    $[20] = handleLostPointerCapture;
-    $[21] = handlePointerMove;
-    $[22] = handlePointerUp;
-    $[23] = handleRef;
-    $[24] = onDoubleClick;
-    $[25] = t12;
+    $[25] = currentWidth;
+    $[26] = draggable;
+    $[27] = isDragging;
+    $[28] = isKeyboardDrag;
+    $[29] = maxWidth;
+    $[30] = minWidth;
+    $[31] = onDoubleClick;
+    $[32] = onDragStart;
+    $[33] = t14;
   } else {
-    t12 = $[25];
+    t14 = $[33];
   }
-  let t13;
-  if ($[26] !== style || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t9) {
-    t13 = /*#__PURE__*/jsx("div", {
-      className: t9,
-      ...t10,
-      ...t11,
+  let t15;
+  if ($[34] !== style || $[35] !== t11 || $[36] !== t12 || $[37] !== t13 || $[38] !== t14) {
+    t15 = /*#__PURE__*/jsx("div", {
+      className: t11,
+      ...t12,
+      ...t13,
       style: style,
-      children: t12
+      children: t14
     });
-    $[26] = style;
-    $[27] = t10;
-    $[28] = t11;
-    $[29] = t12;
-    $[30] = t9;
-    $[31] = t13;
+    $[34] = style;
+    $[35] = t11;
+    $[36] = t12;
+    $[37] = t13;
+    $[38] = t14;
+    $[39] = t15;
   } else {
-    t13 = $[31];
+    t15 = $[39];
   }
-  return t13;
+  return t15;
 };
 
 // ----------------------------------------------------------------------------
@@ -711,14 +705,6 @@ const isCustomWidthOptions = width => {
 const isPaneWidth = width => {
   return ['small', 'medium', 'large'].includes(width);
 };
-const getDefaultPaneWidth = w => {
-  if (isPaneWidth(w)) {
-    return defaultPaneWidth[w];
-  } else if (isCustomWidthOptions(w)) {
-    return parseInt(w.default, 10);
-  }
-  return 0;
-};
 const defaultPaneWidth = {
   small: 256,
   medium: 296,
@@ -728,241 +714,422 @@ const overflowProps = {
   tabIndex: 0,
   role: 'region'
 };
-const Pane = /*#__PURE__*/React.forwardRef(({
-  'aria-label': label,
-  'aria-labelledby': labelledBy,
-  position: responsivePosition = 'end',
-  positionWhenNarrow = 'inherit',
-  width = 'medium',
-  minWidth = 256,
-  padding = 'none',
-  resizable = false,
-  widthStorageKey = 'paneWidth',
-  divider: responsiveDivider = 'none',
-  dividerWhenNarrow = 'inherit',
-  sticky = false,
-  offsetHeader = 0,
-  hidden: responsiveHidden = false,
-  children,
-  id,
-  className,
-  style
-}, forwardRef) => {
-  // Combine position and positionWhenNarrow for backwards compatibility
-  const positionProp = !isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit' ? {
-    regular: responsivePosition,
-    narrow: positionWhenNarrow
-  } : responsivePosition;
-
-  // Combine divider and dividerWhenNarrow for backwards compatibility
-  const dividerProp = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== 'inherit' ? {
-    regular: responsiveDivider,
-    narrow: dividerWhenNarrow
-  } : responsiveDivider;
-
-  // For components that need responsive values in JavaScript logic, we'll use a fallback value
-  // The actual responsive behavior will be handled by CSS through data attributes
-  const position = isResponsiveValue(positionProp) ? 'end' : positionProp;
-  const dividerVariant = isResponsiveValue(dividerProp) ? 'none' : dividerProp;
+const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(92);
+  const {
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
+    position: t1,
+    positionWhenNarrow: t2,
+    width: t3,
+    minWidth: t4,
+    padding: t5,
+    resizable: t6,
+    widthStorageKey: t7,
+    divider: t8,
+    dividerWhenNarrow: t9,
+    sticky: t10,
+    offsetHeader: t11,
+    hidden: t12,
+    children,
+    id,
+    className,
+    style
+  } = t0;
+  const responsivePosition = t1 === undefined ? "end" : t1;
+  const positionWhenNarrow = t2 === undefined ? "inherit" : t2;
+  const width = t3 === undefined ? "medium" : t3;
+  const minWidth = t4 === undefined ? 256 : t4;
+  const padding = t5 === undefined ? "none" : t5;
+  const resizable = t6 === undefined ? false : t6;
+  const widthStorageKey = t7 === undefined ? "paneWidth" : t7;
+  const responsiveDivider = t8 === undefined ? "none" : t8;
+  const dividerWhenNarrow = t9 === undefined ? "inherit" : t9;
+  const sticky = t10 === undefined ? false : t10;
+  const offsetHeader = t11 === undefined ? 0 : t11;
+  const responsiveHidden = t12 === undefined ? false : t12;
+  let t13;
+  if ($[0] !== positionWhenNarrow || $[1] !== responsivePosition) {
+    t13 = !isResponsiveValue(responsivePosition) && positionWhenNarrow !== "inherit" ? {
+      regular: responsivePosition,
+      narrow: positionWhenNarrow
+    } : responsivePosition;
+    $[0] = positionWhenNarrow;
+    $[1] = responsivePosition;
+    $[2] = t13;
+  } else {
+    t13 = $[2];
+  }
+  const positionProp = t13;
+  let t14;
+  if ($[3] !== dividerWhenNarrow || $[4] !== responsiveDivider) {
+    t14 = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== "inherit" ? {
+      regular: responsiveDivider,
+      narrow: dividerWhenNarrow
+    } : responsiveDivider;
+    $[3] = dividerWhenNarrow;
+    $[4] = responsiveDivider;
+    $[5] = t14;
+  } else {
+    t14 = $[5];
+  }
+  const dividerProp = t14;
+  let t15;
+  if ($[6] !== positionProp) {
+    t15 = isResponsiveValue(positionProp) ? "end" : positionProp;
+    $[6] = positionProp;
+    $[7] = t15;
+  } else {
+    t15 = $[7];
+  }
+  const position = t15;
+  let t16;
+  if ($[8] !== dividerProp) {
+    t16 = isResponsiveValue(dividerProp) ? "none" : dividerProp;
+    $[8] = dividerProp;
+    $[9] = t16;
+  } else {
+    t16 = $[9];
+  }
+  const dividerVariant = t16;
   const {
     rowGap,
     columnGap,
     paneRef
   } = React.useContext(PageLayoutContext);
-
-  // Initial pane width for the first render - only used to set the initial CSS variable.
-  // After mount, all updates go directly to the DOM via style.setProperty() to avoid re-renders.
-  const defaultWidth = getDefaultPaneWidth(width);
-
-  // Track current width during drag - initialized lazily in layout effect
-  const currentWidthRef = React.useRef(defaultWidth);
-
-  // Track whether we've initialized the width from localStorage
-  const initializedRef = React.useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    var _paneRef$current2;
-    // Only initialize once on mount - subsequent updates come from drag operations
-    if (initializedRef.current || !resizable) return;
-    initializedRef.current = true;
-    // Before paint, check localStorage for a stored width
-    try {
-      const value = localStorage.getItem(widthStorageKey);
-      if (value !== null && !isNaN(Number(value))) {
-        var _paneRef$current;
-        const num = Number(value);
-        currentWidthRef.current = num;
-        (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.style.setProperty('--pane-width', `${num}px`);
-        return;
+  const getDefaultPaneWidth = _temp;
+  let t17;
+  if ($[10] !== width || $[11] !== widthStorageKey) {
+    t17 = () => {
+      if (!canUseDOM) {
+        return getDefaultPaneWidth(width);
       }
-    } catch {
-      // localStorage unavailable - set default via DOM
-    }
-    (_paneRef$current2 = paneRef.current) === null || _paneRef$current2 === void 0 ? void 0 : _paneRef$current2.style.setProperty('--pane-width', `${defaultWidth}px`);
-  }, [widthStorageKey, paneRef, resizable, defaultWidth]);
-
-  // Subscribe to viewport width changes for responsive max constraint calculation
-  const viewportWidth = useViewportWidth();
-
-  // Calculate min width constraint from width configuration
-  const minPaneWidth = isCustomWidthOptions(width) ? parseInt(width.min, 10) : minWidth;
-
-  // Cache max width constraint - updated when viewport changes (which triggers CSS breakpoint changes)
-  // This avoids calling getComputedStyle() on every drag frame
-  const maxPaneWidthRef = React.useRef(minPaneWidth);
-  React.useEffect(() => {
-    if (isCustomWidthOptions(width)) {
-      maxPaneWidthRef.current = parseInt(width.max, 10);
-    } else {
-      const maxWidthDiff = getPaneMaxWidthDiff(paneRef.current);
-      maxPaneWidthRef.current = viewportWidth > 0 ? Math.max(minPaneWidth, viewportWidth - maxWidthDiff) : minPaneWidth;
-    }
-  }, [width, minPaneWidth, viewportWidth, paneRef]);
-
-  // Ref to the drag handle for updating ARIA attributes
-  const handleRef = React.useRef(null);
-
-  // Update ARIA attributes on mount and when viewport/constraints change
-  useIsomorphicLayoutEffect(() => {
-    updateAriaValues(handleRef.current, {
-      min: minPaneWidth,
-      max: maxPaneWidthRef.current,
-      current: currentWidthRef.current
-    });
-  }, [minPaneWidth, viewportWidth]);
+      let storedWidth;
+      try {
+        storedWidth = localStorage.getItem(widthStorageKey);
+      } catch (t18) {
+        storedWidth = null;
+      }
+      return storedWidth && !isNaN(Number(storedWidth)) ? Number(storedWidth) : getDefaultPaneWidth(width);
+    };
+    $[10] = width;
+    $[11] = widthStorageKey;
+    $[12] = t17;
+  } else {
+    t17 = $[12];
+  }
+  const [paneWidth, setPaneWidth] = React.useState(t17);
+  let t18;
+  if ($[13] !== widthStorageKey) {
+    t18 = width_1 => {
+      setPaneWidth(width_1);
+      try {
+        localStorage.setItem(widthStorageKey, width_1.toString());
+      } catch (t19) {
+      }
+    };
+    $[13] = widthStorageKey;
+    $[14] = t18;
+  } else {
+    t18 = $[14];
+  }
+  const updatePaneWidth = t18;
   useRefObjectAsForwardedRef(forwardRef, paneRef);
   const hasOverflow = useOverflow(paneRef);
   const paneId = useId(id);
-  const labelProp = {};
-  if (hasOverflow) {
-    process.env.NODE_ENV !== "production" ? warning(label === undefined && labelledBy === undefined, 'The <PageLayout.Pane> has overflow and `aria-label` or `aria-labelledby` has not been set. ' + 'Please provide `aria-label` or `aria-labelledby` to <PageLayout.Pane> in order to label this ' + 'region.') : void 0;
-    if (labelledBy) {
-      labelProp['aria-labelledby'] = labelledBy;
-    } else if (label) {
-      labelProp['aria-label'] = label;
+  let labelProp;
+  if ($[15] !== hasOverflow || $[16] !== label || $[17] !== labelledBy) {
+    labelProp = {};
+    if (hasOverflow) {
+      process.env.NODE_ENV !== "production" ? warning(label === undefined && labelledBy === undefined, "The <PageLayout.Pane> has overflow and `aria-label` or `aria-labelledby` has not been set. Please provide `aria-label` or `aria-labelledby` to <PageLayout.Pane> in order to label this region.") : void 0;
+      if (labelledBy) {
+        labelProp["aria-labelledby"] = labelledBy;
+      } else {
+        if (label) {
+          labelProp["aria-label"] = label;
+        }
+      }
     }
+    $[15] = hasOverflow;
+    $[16] = label;
+    $[17] = labelledBy;
+    $[18] = labelProp;
+  } else {
+    labelProp = $[18];
   }
-  const setWidthInLocalStorage = value_0 => {
-    try {
-      localStorage.setItem(widthStorageKey, value_0.toString());
-    } catch {
-      // Ignore write errors
-    }
-  };
-  return /*#__PURE__*/jsxs("div", {
-    className: clsx(classes.PaneWrapper, className),
-    style: {
-      '--offset-header': typeof offsetHeader === 'number' ? `${offsetHeader}px` : offsetHeader,
-      '--spacing-row': `var(--spacing-${rowGap})`,
-      '--spacing-column': `var(--spacing-${columnGap})`,
+  let t19;
+  if ($[19] !== className) {
+    t19 = clsx(classes.PaneWrapper, className);
+    $[19] = className;
+    $[20] = t19;
+  } else {
+    t19 = $[20];
+  }
+  const t20 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
+  const t21 = `var(--spacing-${rowGap})`;
+  const t22 = `var(--spacing-${columnGap})`;
+  let t23;
+  if ($[21] !== style || $[22] !== t20 || $[23] !== t21 || $[24] !== t22) {
+    t23 = {
+      "--offset-header": t20,
+      "--spacing-row": t21,
+      "--spacing-column": t22,
       ...style
-    },
-    ...getResponsiveAttributes('is-hidden', responsiveHidden),
-    ...getResponsiveAttributes('position', positionProp),
-    "data-sticky": sticky || undefined,
-    children: [/*#__PURE__*/jsx(HorizontalDivider, {
-      variant: isResponsiveValue(dividerProp) ? dividerProp : {
-        narrow: dividerVariant,
-        regular: 'none'
-      },
+    };
+    $[21] = style;
+    $[22] = t20;
+    $[23] = t21;
+    $[24] = t22;
+    $[25] = t23;
+  } else {
+    t23 = $[25];
+  }
+  const t24 = t23;
+  let t25;
+  if ($[26] !== responsiveHidden) {
+    t25 = getResponsiveAttributes("is-hidden", responsiveHidden);
+    $[26] = responsiveHidden;
+    $[27] = t25;
+  } else {
+    t25 = $[27];
+  }
+  let t26;
+  if ($[28] !== positionProp) {
+    t26 = getResponsiveAttributes("position", positionProp);
+    $[28] = positionProp;
+    $[29] = t26;
+  } else {
+    t26 = $[29];
+  }
+  const t27 = sticky || undefined;
+  let t28;
+  if ($[30] !== dividerProp || $[31] !== dividerVariant) {
+    t28 = isResponsiveValue(dividerProp) ? dividerProp : {
+      narrow: dividerVariant,
+      regular: "none"
+    };
+    $[30] = dividerProp;
+    $[31] = dividerVariant;
+    $[32] = t28;
+  } else {
+    t28 = $[32];
+  }
+  const t29 = `var(--spacing-${rowGap})`;
+  let t30;
+  if ($[33] !== t29) {
+    t30 = {
+      "--spacing": t29
+    };
+    $[33] = t29;
+    $[34] = t30;
+  } else {
+    t30 = $[34];
+  }
+  const t31 = t30;
+  let t32;
+  if ($[35] !== positionProp || $[36] !== t28 || $[37] !== t31) {
+    t32 = /*#__PURE__*/jsx(HorizontalDivider, {
+      variant: t28,
       className: classes.PaneHorizontalDivider,
-      style: {
-        '--spacing': `var(--spacing-${rowGap})`
-      },
+      style: t31,
       position: positionProp
-    }), /*#__PURE__*/jsx("div", {
+    });
+    $[35] = positionProp;
+    $[36] = t28;
+    $[37] = t31;
+    $[38] = t32;
+  } else {
+    t32 = $[38];
+  }
+  let t33;
+  if ($[39] !== hasOverflow) {
+    t33 = hasOverflow ? overflowProps : {};
+    $[39] = hasOverflow;
+    $[40] = t33;
+  } else {
+    t33 = $[40];
+  }
+  let t34;
+  if ($[41] !== id || $[42] !== paneId) {
+    t34 = id && {
+      id: paneId
+    };
+    $[41] = id;
+    $[42] = paneId;
+    $[43] = t34;
+  } else {
+    t34 = $[43];
+  }
+  const t35 = resizable || undefined;
+  const t36 = `var(--spacing-${padding})`;
+  const t37 = isCustomWidthOptions(width) ? width.min : `${minWidth}px`;
+  const t38 = isCustomWidthOptions(width) ? width.max : "calc(100vw - var(--pane-max-width-diff))";
+  const t39 = isCustomWidthOptions(width) ? width.default : undefined;
+  const t40 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
+  const t41 = `${paneWidth}px`;
+  let t42;
+  if ($[44] !== t36 || $[45] !== t37 || $[46] !== t38 || $[47] !== t39 || $[48] !== t40 || $[49] !== t41) {
+    t42 = {
+      "--spacing": t36,
+      "--pane-min-width": t37,
+      "--pane-max-width": t38,
+      "--pane-width-custom": t39,
+      "--pane-width-size": t40,
+      "--pane-width": t41
+    };
+    $[44] = t36;
+    $[45] = t37;
+    $[46] = t38;
+    $[47] = t39;
+    $[48] = t40;
+    $[49] = t41;
+    $[50] = t42;
+  } else {
+    t42 = $[50];
+  }
+  const t43 = t42;
+  let t44;
+  if ($[51] !== children || $[52] !== labelProp || $[53] !== paneRef || $[54] !== t33 || $[55] !== t34 || $[56] !== t35 || $[57] !== t43) {
+    t44 = /*#__PURE__*/jsx("div", {
       ref: paneRef,
-      ...(hasOverflow ? overflowProps : {}),
+      ...t33,
       ...labelProp,
-      ...(id && {
-        id: paneId
-      }),
+      ...t34,
       className: classes.Pane,
-      "data-resizable": resizable || undefined,
-      style: {
-        '--spacing': `var(--spacing-${padding})`,
-        '--pane-min-width': isCustomWidthOptions(width) ? width.min : `${minWidth}px`,
-        '--pane-max-width': isCustomWidthOptions(width) ? width.max : `calc(100vw - var(--pane-max-width-diff))`,
-        '--pane-width-custom': isCustomWidthOptions(width) ? width.default : undefined,
-        '--pane-width-size': `var(--pane-width-${isPaneWidth(width) ? width : 'custom'})`
-        // --pane-width is set via layout effect (for localStorage) and DOM manipulation (for drag).
-      },
+      "data-resizable": t35,
+      style: t43,
       children: children
-    }), /*#__PURE__*/jsx(VerticalDivider, {
-      variant: isResponsiveValue(dividerProp) ? {
-        narrow: 'none',
-        regular: resizable ? 'line' : dividerProp.regular || 'none',
-        wide: resizable ? 'line' : dividerProp.wide || dividerProp.regular || 'none'
-      } : {
-        narrow: 'none',
-        // If pane is resizable, always show a vertical divider on regular viewports
-        regular: resizable ? 'line' : dividerVariant
+    });
+    $[51] = children;
+    $[52] = labelProp;
+    $[53] = paneRef;
+    $[54] = t33;
+    $[55] = t34;
+    $[56] = t35;
+    $[57] = t43;
+    $[58] = t44;
+  } else {
+    t44 = $[58];
+  }
+  let t45;
+  if ($[59] !== dividerProp || $[60] !== dividerVariant || $[61] !== resizable) {
+    t45 = isResponsiveValue(dividerProp) ? {
+      narrow: "none",
+      regular: resizable ? "line" : dividerProp.regular || "none",
+      wide: resizable ? "line" : dividerProp.wide || dividerProp.regular || "none"
+    } : {
+      narrow: "none",
+      regular: resizable ? "line" : dividerVariant
+    };
+    $[59] = dividerProp;
+    $[60] = dividerVariant;
+    $[61] = resizable;
+    $[62] = t45;
+  } else {
+    t45 = $[62];
+  }
+  let t46;
+  if ($[63] !== paneWidth || $[64] !== position || $[65] !== updatePaneWidth) {
+    t46 = (delta, t47) => {
+      const isKeyboard = t47 === undefined ? false : t47;
+      let deltaWithDirection;
+      if (isKeyboard) {
+        deltaWithDirection = delta;
+      } else {
+        deltaWithDirection = position === "end" ? -delta : delta;
       }
-      // If pane is resizable, the divider should be draggable
-      ,
-      draggable: resizable,
-      handleRef: handleRef,
-      onDrag: (delta, isKeyboard = false) => {
-        const deltaWithDirection = isKeyboard ? delta : position === 'end' ? -delta : delta;
-        const maxWidth = maxPaneWidthRef.current;
-        if (isKeyboard) {
-          // Clamp keyboard delta to stay within bounds
-          const newWidth = Math.max(minPaneWidth, Math.min(maxWidth, currentWidthRef.current + deltaWithDirection));
-          if (newWidth !== currentWidthRef.current) {
-            var _paneRef$current3;
-            currentWidthRef.current = newWidth;
-            (_paneRef$current3 = paneRef.current) === null || _paneRef$current3 === void 0 ? void 0 : _paneRef$current3.style.setProperty('--pane-width', `${newWidth}px`);
-            updateAriaValues(handleRef.current, {
-              current: newWidth
-            });
-          }
-        } else {
-          // Apply delta directly via CSS variable for immediate visual feedback
-          if (paneRef.current) {
-            const newWidth_0 = currentWidthRef.current + deltaWithDirection;
-            const clampedWidth = Math.max(minPaneWidth, Math.min(maxWidth, newWidth_0));
-
-            // Only update if the clamped width actually changed
-            // This prevents drift when dragging against min/max constraints
-            if (clampedWidth !== currentWidthRef.current) {
-              paneRef.current.style.setProperty('--pane-width', `${clampedWidth}px`);
-              currentWidthRef.current = clampedWidth;
-              updateAriaValues(handleRef.current, {
-                current: clampedWidth
-              });
-            }
-          }
-        }
+      updatePaneWidth(paneWidth + deltaWithDirection);
+    };
+    $[63] = paneWidth;
+    $[64] = position;
+    $[65] = updatePaneWidth;
+    $[66] = t46;
+  } else {
+    t46 = $[66];
+  }
+  let t47;
+  if ($[67] !== paneRef || $[68] !== updatePaneWidth) {
+    t47 = () => {
+      var _paneRef$current;
+      const paneRect = (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.getBoundingClientRect();
+      if (!paneRect) {
+        return;
       }
-      // Save final width to localStorage (skip React state update to avoid reconciliation)
-      ,
-      onDragEnd: () => {
-        // For mouse drag: The CSS variable is already set and currentWidthRef is in sync.
-        // We intentionally skip setPaneWidth() to avoid triggering expensive React
-        // reconciliation with large DOM trees. The ref is the source of truth for
-        // subsequent drag operations.
-        setWidthInLocalStorage(currentWidthRef.current);
-      },
-      position: positionProp
-      // Reset pane width on double click
-      ,
-      onDoubleClick: () => {
-        const defaultWidth_0 = getDefaultPaneWidth(width);
-        // Update CSS variable and ref directly - skip React state to avoid reconciliation
-        if (paneRef.current) {
-          paneRef.current.style.setProperty('--pane-width', `${defaultWidth_0}px`);
-          currentWidthRef.current = defaultWidth_0;
-          updateAriaValues(handleRef.current, {
-            current: defaultWidth_0
-          });
-        }
-        setWidthInLocalStorage(defaultWidth_0);
-      },
+      updatePaneWidth(paneRect.width);
+    };
+    $[67] = paneRef;
+    $[68] = updatePaneWidth;
+    $[69] = t47;
+  } else {
+    t47 = $[69];
+  }
+  let t48;
+  if ($[70] !== updatePaneWidth || $[71] !== width) {
+    t48 = () => updatePaneWidth(getDefaultPaneWidth(width));
+    $[70] = updatePaneWidth;
+    $[71] = width;
+    $[72] = t48;
+  } else {
+    t48 = $[72];
+  }
+  const t49 = `var(--spacing-${columnGap})`;
+  let t50;
+  if ($[73] !== t49) {
+    t50 = {
+      "--spacing": t49
+    };
+    $[73] = t49;
+    $[74] = t50;
+  } else {
+    t50 = $[74];
+  }
+  const t51 = t50;
+  let t52;
+  if ($[75] !== positionProp || $[76] !== resizable || $[77] !== t45 || $[78] !== t46 || $[79] !== t47 || $[80] !== t48 || $[81] !== t51) {
+    t52 = /*#__PURE__*/jsx(VerticalDivider, {
+      variant: t45,
+      draggable: resizable,
+      onDrag: t46,
+      onDragEnd: t47,
+      position: positionProp,
+      onDoubleClick: t48,
       className: classes.PaneVerticalDivider,
-      style: {
-        '--spacing': `var(--spacing-${columnGap})`
-      }
-    })]
-  });
+      style: t51
+    });
+    $[75] = positionProp;
+    $[76] = resizable;
+    $[77] = t45;
+    $[78] = t46;
+    $[79] = t47;
+    $[80] = t48;
+    $[81] = t51;
+    $[82] = t52;
+  } else {
+    t52 = $[82];
+  }
+  let t53;
+  if ($[83] !== t19 || $[84] !== t24 || $[85] !== t25 || $[86] !== t26 || $[87] !== t27 || $[88] !== t32 || $[89] !== t44 || $[90] !== t52) {
+    t53 = /*#__PURE__*/jsxs("div", {
+      className: t19,
+      style: t24,
+      ...t25,
+      ...t26,
+      "data-sticky": t27,
+      children: [t32, t44, t52]
+    });
+    $[83] = t19;
+    $[84] = t24;
+    $[85] = t25;
+    $[86] = t26;
+    $[87] = t27;
+    $[88] = t32;
+    $[89] = t44;
+    $[90] = t52;
+    $[91] = t53;
+  } else {
+    t53 = $[91];
+  }
+  return t53;
 });
 Pane.displayName = 'PageLayout.Pane';
 
@@ -1121,14 +1288,15 @@ Header.__SLOT__ = Symbol('PageLayout.Header');
 Content.__SLOT__ = Symbol('PageLayout.Content');
 Pane.__SLOT__ = Symbol('PageLayout.Pane');
 Footer.__SLOT__ = Symbol('PageLayout.Footer');
-function _temp(event) {
-  if (event.button !== 0) {
-    return;
-  }
-  event.preventDefault();
-  const target = event.currentTarget;
-  target.setPointerCapture(event.pointerId);
-  target.setAttribute(DATA_DRAGGING_ATTR, "true");
+function _temp(width_0) {
+  if (isPaneWidth(width_0)) {
+    return defaultPaneWidth[width_0];
+  } else {
+    if (isCustomWidthOptions(width_0)) {
+      return Number(width_0.default.split("px")[0]);
+    }
+  }
+  return 0;
 }
 
 export { PageLayout };