@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/layouts/split-layout/SplitLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/SplitLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './SplitLayout.css';\nexport var column = '_6q8dk21-3-13-2';\nexport var contentShellContainer = '_6q8dk23-3-13-2 _6q8dk21-3-13-2';\nexport var handleColumn = '_6q8dk24-3-13-2 _6q8dk21-3-13-2';\nexport var handleDecorations = '_6q8dk25-3-13-2';\nexport var layout = '_6q8dk20-3-13-2';\nexport var panelShellContainer = '_6q8dk22-3-13-2 _6q8dk21-3-13-2';\nexport var resizeHandle = '_6q8dk26-3-13-2';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;AACb,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,oBAAoB;AACxB,IAAI,SAAS;AACb,IAAI,sBAAsB;AAC1B,IAAI,eAAe;",
+  "sourcesContent": ["import './SplitLayout.css';\nexport var column = '_6q8dk21-3-14-0';\nexport var handleDecorations = '_6q8dk22-3-14-0';\nexport var layout = '_6q8dk20-3-14-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,oBAAoB;AACxB,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/split-layout/panel-sizing.js

@@ -0,0 +1,80 @@
+import { handleFlexWidthVariable } from "./resize-separator/ResizeSeparator.sty.js";
+import {
+  clamp,
+  resolveWidthPx,
+  toCssLength
+} from "./width-utils.js";
+const FALLBACK_HANDLE_WIDTH = 8;
+function resolveHandleWidth(resizable) {
+  if (!resizable) {
+    return 0;
+  }
+  if (typeof document === "undefined") {
+    return FALLBACK_HANDLE_WIDTH;
+  }
+  const declared = getComputedStyle(document.documentElement).getPropertyValue(handleFlexWidthVariable).trim();
+  const parsed = Number.parseFloat(declared);
+  return Number.isNaN(parsed) ? FALLBACK_HANDLE_WIDTH : parsed;
+}
+function resolvePanelBounds(containerWidth, declared, handleWidth) {
+  const minPx = resolveWidthPx(declared.minWidth, containerWidth, 0);
+  const declaredMaxPx = resolveWidthPx(
+    declared.maxWidth,
+    containerWidth,
+    Infinity
+  );
+  const reservedMinPx = resolveWidthPx(declared.reservedMin, containerWidth, 0);
+  let containerMax = Infinity;
+  if (containerWidth !== 0) {
+    containerMax = containerWidth - reservedMinPx - handleWidth;
+  }
+  return {
+    minPx,
+    maxPx: Math.max(minPx, Math.min(declaredMaxPx, containerMax))
+  };
+}
+function resolveRequestedWidth(request, containerWidth) {
+  const { controlledWidth, draggedWidth, defaultWidth } = request;
+  if (controlledWidth !== void 0) {
+    return resolveWidthPx(controlledWidth, containerWidth, 0);
+  }
+  if (draggedWidth !== void 0) {
+    return draggedWidth;
+  }
+  if (defaultWidth !== void 0) {
+    return resolveWidthPx(defaultWidth, containerWidth, 0);
+  }
+  return 0;
+}
+function resolvePanelSizing(request, containerWidth, constraints) {
+  const handleWidth = resolveHandleWidth(constraints.resizable);
+  const bounds = resolvePanelBounds(containerWidth, constraints, handleWidth);
+  const panelWidth = clamp(
+    bounds.minPx,
+    resolveRequestedWidth(request, containerWidth),
+    bounds.maxPx
+  );
+  const isPreMeasure = containerWidth === 0;
+  const declaredWidthCss = toCssLength(
+    request.controlledWidth ?? request.defaultWidth ?? 0
+  );
+  const takenFromContent = isPreMeasure ? `${declaredWidthCss} - ${handleWidth}px` : `${panelWidth ? panelWidth + handleWidth : 0}px`;
+  return {
+    panel: {
+      width: panelWidth,
+      widthCss: isPreMeasure ? declaredWidthCss : `${panelWidth}px`,
+      minPx: bounds.minPx,
+      maxPx: bounds.maxPx
+    },
+    content: {
+      widthCss: `max(${toCssLength(
+        constraints.reservedMin
+      )}, 100% - ${takenFromContent})`
+    }
+  };
+}
+export {
+  resolveHandleWidth,
+  resolvePanelSizing
+};
+//# sourceMappingURL=panel-sizing.js.map

package/esm/layouts/split-layout/panel-sizing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/split-layout/panel-sizing.ts"],
+  "sourcesContent": ["import { handleFlexWidthVariable } from './resize-separator/ResizeSeparator.sty.js';\nimport {\n  clamp,\n  resolveWidthPx,\n  toCssLength,\n  type PanelWidth,\n} from './width-utils.js';\n\n/** Width of the handle track wherever the CSS variable is not declared. */\nconst FALLBACK_HANDLE_WIDTH = 8;\n\n/**\n * Flex space the resize handle track takes from the panel and the content.\n * Under visual refresh the handle cancels its own width with a negative\n * margin, so the variable reports 0 there. Reading it from the document\n * element is synchronous and works before the handle element mounts, so the\n * first render already sizes against the right value.\n *\n * @internal\n */\nexport function resolveHandleWidth(resizable: boolean): number {\n  if (!resizable) {\n    return 0;\n  }\n  if (typeof document === 'undefined') {\n    return FALLBACK_HANDLE_WIDTH;\n  }\n\n  const declared = getComputedStyle(document.documentElement)\n    .getPropertyValue(handleFlexWidthVariable)\n    .trim();\n  const parsed = Number.parseFloat(declared);\n\n  return Number.isNaN(parsed) ? FALLBACK_HANDLE_WIDTH : parsed;\n}\n\n/**\n * Everything a panel and its sibling content are allowed to be. The handle\n * track is deliberately absent: it is resolved by `resolvePanelSizing`, so no\n * caller can size against a handle width of its own.\n *\n * @internal\n */\nexport interface PanelSizingConstraints {\n  minWidth: PanelWidth;\n  maxWidth: PanelWidth;\n  /** Width the sibling content keeps for itself. */\n  reservedMin: PanelWidth;\n  /** A panel without a resize handle has no handle track to pay for. */\n  resizable: boolean;\n}\n\n/**\n * The width a panel asks for, in order of precedence. All three are optional\n * because a drag asks for a bare pixel value.\n *\n * @internal\n */\nexport interface PanelSizingRequest {\n  /** Width the consumer controls. */\n  controlledWidth?: PanelWidth;\n  /** Width the user last dragged to, in px. */\n  draggedWidth?: number;\n  /** Declared width, used until the panel is controlled or dragged. */\n  defaultWidth?: PanelWidth;\n}\n\n/** @internal */\nexport interface PanelSizingValues {\n  /** Resolved width in px. Also what the separator reports as its value. */\n  width: number;\n  widthCss: string;\n  /** Smallest width the panel may take, in px. */\n  minPx: number;\n  /** Largest width the panel may take, in px. Never below `minPx`. */\n  maxPx: number;\n}\n\n/** @internal */\nexport interface PanelSizing {\n  panel: PanelSizingValues;\n  /**\n   * The sibling content is only painted. Its `aria-controls` names the panel,\n   * so a resize separator reports the panel's bounds, never the content's.\n   */\n  content: { widthCss: string };\n}\n\ninterface DeclaredPanelBounds {\n  minWidth: PanelWidth;\n  maxWidth: PanelWidth;\n  /** Width the sibling content keeps for itself. */\n  reservedMin: PanelWidth;\n}\n\ninterface ResolvedPanelBounds {\n  /** Declared minimum, in px. */\n  minPx: number;\n  /**\n   * What the panel may actually take: the declared maximum, or less when the\n   * container cannot fit it beside the content reserve and the handle track.\n   */\n  maxPx: number;\n}\n\n/**\n * Resolves declared widths against the measured container. A percentage cannot\n * resolve before the first measurement, so an unmeasured container leaves the\n * panel unconstrained rather than collapsing it.\n */\nfunction resolvePanelBounds(\n  containerWidth: number,\n  declared: DeclaredPanelBounds,\n  handleWidth: number,\n): ResolvedPanelBounds {\n  const minPx = resolveWidthPx(declared.minWidth, containerWidth, 0);\n  const declaredMaxPx = resolveWidthPx(\n    declared.maxWidth,\n    containerWidth,\n    Infinity,\n  );\n  const reservedMinPx = resolveWidthPx(declared.reservedMin, containerWidth, 0);\n\n  let containerMax = Infinity;\n  if (containerWidth !== 0) {\n    containerMax = containerWidth - reservedMinPx - handleWidth;\n  }\n\n  // The minimum wins over a container that cannot fit it, so the maximum never\n  // ends up below the minimum and the separator cannot report an inverted range.\n  return {\n    minPx,\n    maxPx: Math.max(minPx, Math.min(declaredMaxPx, containerMax)),\n  };\n}\n\nfunction resolveRequestedWidth(\n  request: PanelSizingRequest,\n  containerWidth: number,\n): number {\n  const { controlledWidth, draggedWidth, defaultWidth } = request;\n\n  if (controlledWidth !== undefined) {\n    return resolveWidthPx(controlledWidth, containerWidth, 0);\n  }\n  if (draggedWidth !== undefined) {\n    return draggedWidth;\n  }\n  if (defaultWidth !== undefined) {\n    return resolveWidthPx(defaultWidth, containerWidth, 0);\n  }\n\n  return 0;\n}\n\n/**\n * Resolves the geometry of one panel and its sibling content: the width the\n * panel gets, the CSS both columns are painted with, and the bounds the resize\n * separator reports for the panel it controls.\n *\n * This is the only place the handle track width, the requested width and the\n * clamp are composed. Callers own the declared inputs and the drag gesture,\n * never the arithmetic, so a width cannot be clamped twice against two\n * different handle tracks (APPDEV-19606).\n *\n * @internal\n */\nexport function resolvePanelSizing(\n  request: PanelSizingRequest,\n  containerWidth: number,\n  constraints: PanelSizingConstraints,\n): PanelSizing {\n  const handleWidth = resolveHandleWidth(constraints.resizable);\n  const bounds = resolvePanelBounds(containerWidth, constraints, handleWidth);\n  const panelWidth = clamp(\n    bounds.minPx,\n    resolveRequestedWidth(request, containerWidth),\n    bounds.maxPx,\n  );\n\n  // A percentage resolves to 0 against an unmeasured container, which would\n  // paint a collapsed panel for one frame. The declared length paints instead.\n  const isPreMeasure = containerWidth === 0;\n  const declaredWidthCss = toCssLength(\n    request.controlledWidth ?? request.defaultWidth ?? 0,\n  );\n  const takenFromContent = isPreMeasure\n    ? `${declaredWidthCss} - ${handleWidth}px`\n    : `${panelWidth ? panelWidth + handleWidth : 0}px`;\n\n  return {\n    panel: {\n      width: panelWidth,\n      widthCss: isPreMeasure ? declaredWidthCss : `${panelWidth}px`,\n      minPx: bounds.minPx,\n      maxPx: bounds.maxPx,\n    },\n    content: {\n      widthCss: `max(${toCssLength(\n        constraints.reservedMin,\n      )}, 100% - ${takenFromContent})`,\n    },\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAGP,MAAM,wBAAwB;AAWvB,SAAS,mBAAmB,WAA4B;AAC7D,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,iBAAiB,SAAS,eAAe,EACvD,iBAAiB,uBAAuB,EACxC,KAAK;AACR,QAAM,SAAS,OAAO,WAAW,QAAQ;AAEzC,SAAO,OAAO,MAAM,MAAM,IAAI,wBAAwB;AACxD;AA4EA,SAAS,mBACP,gBACA,UACA,aACqB;AACrB,QAAM,QAAQ,eAAe,SAAS,UAAU,gBAAgB,CAAC;AACjE,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACA,QAAM,gBAAgB,eAAe,SAAS,aAAa,gBAAgB,CAAC;AAE5E,MAAI,eAAe;AACnB,MAAI,mBAAmB,GAAG;AACxB,mBAAe,iBAAiB,gBAAgB;AAAA,EAClD;AAIA,SAAO;AAAA,IACL;AAAA,IACA,OAAO,KAAK,IAAI,OAAO,KAAK,IAAI,eAAe,YAAY,CAAC;AAAA,EAC9D;AACF;AAEA,SAAS,sBACP,SACA,gBACQ;AACR,QAAM,EAAE,iBAAiB,cAAc,aAAa,IAAI;AAExD,MAAI,oBAAoB,QAAW;AACjC,WAAO,eAAe,iBAAiB,gBAAgB,CAAC;AAAA,EAC1D;AACA,MAAI,iBAAiB,QAAW;AAC9B,WAAO;AAAA,EACT;AACA,MAAI,iBAAiB,QAAW;AAC9B,WAAO,eAAe,cAAc,gBAAgB,CAAC;AAAA,EACvD;AAEA,SAAO;AACT;AAcO,SAAS,mBACd,SACA,gBACA,aACa;AACb,QAAM,cAAc,mBAAmB,YAAY,SAAS;AAC5D,QAAM,SAAS,mBAAmB,gBAAgB,aAAa,WAAW;AAC1E,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,IACP,sBAAsB,SAAS,cAAc;AAAA,IAC7C,OAAO;AAAA,EACT;AAIA,QAAM,eAAe,mBAAmB;AACxC,QAAM,mBAAmB;AAAA,IACvB,QAAQ,mBAAmB,QAAQ,gBAAgB;AAAA,EACrD;AACA,QAAM,mBAAmB,eACrB,GAAG,gBAAgB,MAAM,WAAW,OACpC,GAAG,aAAa,aAAa,cAAc,CAAC;AAEhD,SAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU,eAAe,mBAAmB,GAAG,UAAU;AAAA,MACzD,OAAO,OAAO;AAAA,MACd,OAAO,OAAO;AAAA,IAChB;AAAA,IACA,SAAS;AAAA,MACP,UAAU,OAAO;AAAA,QACf,YAAY;AAAA,MACd,CAAC,YAAY,gBAAgB;AAAA,IAC/B;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/layouts/split-layout/resize-separator/ResizeSeparator.css

@@ -0,0 +1,82 @@
+._151k20o0-3-14-0 {
+  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
+  border: none;
+  border-radius: var(--dt-borders-radius-field-default, 6px);
+  cursor: col-resize;
+  height: var(--dt-spacings-size-36, 36px);
+  left: 3px;
+  margin: 0;
+  padding: 0;
+  touch-action: none;
+  transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
+  width: 2px;
+}
+._151k20o0-3-14-0:focus-visible {
+  width: 100%;
+}
+._151k20o0-3-14-0:hover._151k20o0-3-14-0:focus-visible {
+  width: 2px;
+}
+._151k20o0-3-14-0:focus-visible, ._151k20o0-3-14-0:hover {
+  height: var(--dt-spacings-size-48, 48px);
+  background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
+}
+._151k20o0-3-14-0:after {
+  content: "";
+  display: block;
+  height: 100%;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  user-select: none;
+  width: 100%;
+}
+._1jgl8s50-3-14-0 ._151k20o0-3-14-0 {
+  width: 0;
+  cursor: ew-resize;
+}
+._151k20o1-3-14-0 {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  width: var(--dt-spacings-size-8, 8px);
+}
+._1jgl8s50-3-14-0 ._151k20o2-3-14-0 {
+  border-radius: 0;
+  height: 100%;
+  width: var(--dt-spacings-size-8, 8px);
+  left: 0;
+  transition: none;
+  background-color: transparent;
+  margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
+  z-index: 1;
+}
+._1jgl8s50-3-14-0 ._151k20o2-3-14-0::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--dt-borders-width-default, 1px);
+  background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
+  pointer-events: none;
+}
+._1jgl8s50-3-14-0 ._151k20o2-3-14-0:hover::before {
+  background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
+}
+._1jgl8s50-3-14-0 ._151k20o2-3-14-0:active::before {
+  background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
+}
+._1jgl8s50-3-14-0 ._151k20o1-3-14-0:has(._151k20o0-3-14-0:focus-visible)::before {
+  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
+  width: var(--dt-borders-width-emphasized, 2px);
+}
+:root._1jgl8s50-3-14-0 {
+  --_dt-split-handle-ew: 0;
+}

package/esm/layouts/split-layout/resize-separator/ResizeSeparator.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { useGesture } from "@use-gesture/react";
+import { clsx } from "clsx";
+import { forwardRef, useRef } from "react";
+import * as styles from "./ResizeSeparator.sty.js";
+import { useFocusRing } from "../../../core/hooks/useFocusRing.js";
+import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+const ResizeSeparator = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      controls,
+      value,
+      min,
+      max,
+      valueText,
+      onDrag,
+      onDragStart,
+      onDragEnd,
+      className,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...rest
+    } = props;
+    const ref = useRef(null);
+    const mergedRefs = useMergeRefs([ref, forwardedRef]);
+    const { focusProps, focusClassName } = useFocusRing({
+      focusWithin: true,
+      ignoreModality: true
+    });
+    useGesture(
+      {
+        // Wrapped rather than passed through: the gesture engine dispatches on
+        // key presence, not on the value, so handing it an absent optional
+        // callback throws mid-gesture and kills the drag.
+        onDragStart: () => {
+          onDragStart?.();
+        },
+        onDragEnd: () => {
+          onDragEnd?.();
+        },
+        onDrag: (state) => {
+          onDrag?.(state.movement[0]);
+        }
+      },
+      { target: ref }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ...focusProps,
+        role: "separator",
+        ref: mergedRefs,
+        className: clsx(styles.separator, focusClassName, className),
+        tabIndex: 0,
+        "aria-controls": controls,
+        "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-orientation": "vertical",
+        "aria-valuemin": min,
+        "aria-valuemax": isFinite(max) ? max : Math.max(min, value),
+        "aria-valuenow": value,
+        "aria-valuetext": valueText
+      }
+    );
+  }
+);
+export {
+  ResizeSeparator
+};
+//# sourceMappingURL=ResizeSeparator.js.map

package/esm/layouts/split-layout/resize-separator/ResizeSeparator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/split-layout/resize-separator/ResizeSeparator.tsx"],
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport { type ComponentPropsWithoutRef, forwardRef, useRef } from 'react';\n\nimport * as styles from './ResizeSeparator.sty.js';\nimport { useFocusRing } from '../../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\n\n/**\n * @internal\n */\nexport interface ResizeSeparatorProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'onDrag' | 'onDragEnd' | 'onDragStart'\n> {\n  /**\n   * Id of the element whose size the separator controls.\n   */\n  controls: string;\n  /**\n   * Current size of the controlled element, in pixels.\n   */\n  value: number;\n  /**\n   * Smallest size the controlled element can take, in pixels.\n   */\n  min: number;\n  /**\n   * Largest size the controlled element can take, in pixels. `Infinity` before\n   * the container is measured.\n   */\n  max: number;\n  /**\n   * Human readable form of `value`.\n   */\n  valueText: string;\n  /**\n   * Called when the user starts dragging the separator.\n   */\n  onDragStart?: () => void;\n  /**\n   * Called while dragging, with the horizontal movement in pixels.\n   */\n  onDrag?: (movement: number) => void;\n  /**\n   * Called when the user stops dragging the separator.\n   */\n  onDragEnd?: () => void;\n}\n\n/**\n * Draggable and keyboard focusable separator between two resizable areas.\n *\n * Follows the Window Splitter ARIA pattern.\n * https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\n *\n * @internal\n */\nexport const ResizeSeparator = forwardRef<HTMLDivElement, ResizeSeparatorProps>(\n  (props, forwardedRef) => {\n    const {\n      controls,\n      value,\n      min,\n      max,\n      valueText,\n      onDrag,\n      onDragStart,\n      onDragEnd,\n      className,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([ref, forwardedRef]);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    useGesture(\n      {\n        // Wrapped rather than passed through: the gesture engine dispatches on\n        // key presence, not on the value, so handing it an absent optional\n        // callback throws mid-gesture and kills the drag.\n        onDragStart: () => {\n          onDragStart?.();\n        },\n        onDragEnd: () => {\n          onDragEnd?.();\n        },\n        onDrag: (state) => {\n          onDrag?.(state.movement[0]);\n        },\n      },\n      { target: ref },\n    );\n\n    return (\n      <div\n        {...rest}\n        {...focusProps}\n        role=\"separator\"\n        ref={mergedRefs}\n        className={clsx(styles.separator, focusClassName, className)}\n        tabIndex={0}\n        aria-controls={controls}\n        aria-label={ariaLabelledBy ? undefined : ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-orientation=\"vertical\"\n        aria-valuemin={min}\n        // An omitted `aria-valuemax` implies 100, which any pixel value above\n        // that would sit outside of. An unbounded panel therefore reports its\n        // current width as the maximum instead of dropping the attribute.\n        aria-valuemax={isFinite(max) ? max : Math.max(min, value)}\n        aria-valuenow={value}\n        aria-valuetext={valueText}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAsGM;AAtGN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAwC,YAAY,cAAc;AAElE,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAoDtB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,MAAM,OAAuB,IAAI;AACvC,UAAM,aAAa,aAAa,CAAC,KAAK,YAAY,CAAC;AAEnD,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB,CAAC;AAED;AAAA,MACE;AAAA;AAAA;AAAA;AAAA,QAIE,aAAa,MAAM;AACjB,wBAAc;AAAA,QAChB;AAAA,QACA,WAAW,MAAM;AACf,sBAAY;AAAA,QACd;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,mBAAS,MAAM,SAAS,CAAC,CAAC;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,IAAI;AAAA,IAChB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,WAAW,gBAAgB,SAAS;AAAA,QAC3D,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,cAAY,iBAAiB,SAAY;AAAA,QACzC,mBAAiB;AAAA,QACjB,oBAAiB;AAAA,QACjB,iBAAe;AAAA,QAIf,iBAAe,SAAS,GAAG,IAAI,MAAM,KAAK,IAAI,KAAK,KAAK;AAAA,QACxD,iBAAe;AAAA,QACf,kBAAgB;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;",
+  "names": []
+}

package/esm/layouts/split-layout/resize-separator/ResizeSeparator.sty.js

@@ -0,0 +1,13 @@
+import "../../../core/components/app-root/AppRoot.css";
+import "./ResizeSeparator.css";
+var handleFlexWidthVariable = "--_dt-split-handle-ew";
+var handleTrack = "_151k20o1-3-14-0";
+var inlineHandleTrack = "_151k20o2-3-14-0 _151k20o1-3-14-0";
+var separator = "_151k20o0-3-14-0";
+export {
+  handleFlexWidthVariable,
+  handleTrack,
+  inlineHandleTrack,
+  separator
+};
+//# sourceMappingURL=ResizeSeparator.sty.js.map

package/esm/layouts/split-layout/resize-separator/ResizeSeparator.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/split-layout/resize-separator/ResizeSeparator.css.ts"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './ResizeSeparator.css';\nexport var handleFlexWidthVariable = '--_dt-split-handle-ew';\nexport var handleTrack = '_151k20o1-3-14-0';\nexport var inlineHandleTrack = '_151k20o2-3-14-0 _151k20o1-3-14-0';\nexport var separator = '_151k20o0-3-14-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,cAAc;AAClB,IAAI,oBAAoB;AACxB,IAAI,YAAY;",
+  "names": []
+}

package/esm/layouts/{shared/resize-handle-styles.js → split-layout/resize-separator/resize-separator-styles.js}

@@ -3,8 +3,8 @@ import Colors from "@dynatrace/strato-design-tokens/colors";
 import Easings from "@dynatrace/strato-design-tokens/easings";
 import Spacings from "@dynatrace/strato-design-tokens/spacings";
 import Timings from "@dynatrace/strato-design-tokens/timings";
-import { vrResizeHandleOverrides } from "./visual-refresh-overrides.js";
-const resizeHandleStyles = {
+import { vrResizeSeparatorOverrides } from "../visual-refresh-overrides.js";
+const resizeSeparatorStyles = {
   backgroundColor: Colors.Border.Neutral.Accent,
   border: "none",
   borderRadius: Borders.Radius.Field.Default,
@@ -41,10 +41,10 @@ const resizeHandleStyles = {
       userSelect: "none",
       width: "100%"
     },
-    ...vrResizeHandleOverrides
+    ...vrResizeSeparatorOverrides
   }
 };
 export {
-  resizeHandleStyles
+  resizeSeparatorStyles
 };
-//# sourceMappingURL=resize-handle-styles.js.map
+//# sourceMappingURL=resize-separator-styles.js.map

package/esm/layouts/split-layout/resize-separator/resize-separator-styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/split-layout/resize-separator/resize-separator-styles.ts"],
+  "sourcesContent": ["import type { StyleRule } from '@vanilla-extract/css';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Easings from '@dynatrace/strato-design-tokens/easings';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport Timings from '@dynatrace/strato-design-tokens/timings';\n\nimport { vrResizeSeparatorOverrides } from '../visual-refresh-overrides.js';\n\n/**\n * @internal\n */\nexport const resizeSeparatorStyles = {\n  backgroundColor: Colors.Border.Neutral.Accent,\n  border: 'none',\n  borderRadius: Borders.Radius.Field.Default,\n  cursor: 'col-resize',\n  height: Spacings.Size36,\n  left: '3px',\n  margin: 0,\n  padding: 0,\n  touchAction: 'none',\n  transition: `height ${Timings.Base.Default} ${Easings.FastInSlowOut}`,\n  width: '2px',\n  selectors: {\n    '&:focus-visible': {\n      width: '100%',\n    },\n    // If we click the handle we don't want to apply the extra handling for the boxShadow\n    '&:hover&:focus-visible': {\n      width: '2px',\n    },\n    '&:focus-visible, &:hover': {\n      height: Spacings.Size48,\n      backgroundColor: Colors.Border.Neutral.AccentHover,\n    },\n    // The resizing ref is applied to the actual handle to manage the focus state by the ref.\n    // However, this would make only the handle resizable and not the whole separator, hence the after element.\n    '&:after': {\n      content: '\"\"',\n      display: 'block',\n      height: '100%',\n      left: '50%',\n      position: 'absolute',\n      top: 0,\n      transform: 'translateX(-50%)',\n      userSelect: 'none',\n      width: '100%',\n    },\n    ...vrResizeSeparatorOverrides,\n  },\n} satisfies StyleRule;\n"],
+  "mappings": "AAEA,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,aAAa;AACpB,OAAO,cAAc;AACrB,OAAO,aAAa;AAEpB,SAAS,kCAAkC;AAKpC,MAAM,wBAAwB;AAAA,EACnC,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACvC,QAAQ;AAAA,EACR,cAAc,QAAQ,OAAO,MAAM;AAAA,EACnC,QAAQ;AAAA,EACR,QAAQ,SAAS;AAAA,EACjB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY,UAAU,QAAQ,KAAK,OAAO,IAAI,QAAQ,aAAa;AAAA,EACnE,OAAO;AAAA,EACP,WAAW;AAAA,IACT,mBAAmB;AAAA,MACjB,OAAO;AAAA,IACT;AAAA;AAAA,IAEA,0BAA0B;AAAA,MACxB,OAAO;AAAA,IACT;AAAA,IACA,4BAA4B;AAAA,MAC1B,QAAQ,SAAS;AAAA,MACjB,iBAAiB,OAAO,OAAO,QAAQ;AAAA,IACzC;AAAA;AAAA;AAAA,IAGA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EACL;AACF;",
+  "names": []
+}

package/esm/layouts/split-layout/slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/slots.ts"],
-  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { type PanelWidth } from './width-utils.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\n/** @public */\nexport interface ResizablePanelProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId,\n    Pick<ComponentPropsWithoutRef<'div'>, 'id'> {\n  /** The minimum width of the panel. Accepts a pixel value or a percentage string. */\n  minWidth?: PanelWidth;\n  /** The maximum width of the panel. Accepts a pixel value or a percentage string. */\n  maxWidth?: PanelWidth;\n  /** The initial width of the panel. Accepts a pixel value or a percentage string. */\n  defaultWidth?: PanelWidth;\n  /**\n   * Whether the panel width can be resized by dragging.\n   * @defaultValue true\n   */\n  resizable?: boolean;\n  /**\n   * The position of the panel relative to the content.\n   * @defaultValue 'start'\n   */\n  position?: 'start' | 'end';\n  /** Callback triggered when the panel is resized, with the new width in pixels. */\n  onResize?: (width: number) => void;\n  /** Accessible name for the resize separator. Referenced by aria-label on the separator element. */\n  label?: string;\n  /**\n   * Controlled panel width in px. When provided, the panel renders this width\n   * except while the user is actively dragging the resize handle.\n   * @internal\n   */\n  width?: number;\n}\n\n/** @public */\nexport const PanelSlot = forwardRef<HTMLDivElement, ResizablePanelProps>(\n  (_props, _ref) => null,\n);\n\n/** @public */\nexport interface ContentProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {\n  /** The minimum width of the content area. Accepts a pixel value or a percentage string. */\n  minWidth?: PanelWidth;\n}\n\nexport const ContentSlot = forwardRef<HTMLDivElement, ContentProps>(\n  (_props, _ref) => null,\n);\n\n/** @internal */\nexport interface ResizeHandleProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n/**\n * Optional slot to render custom decorations inside the resize handle area.\n *\n * Note: The resize handle column is fixed to 8px to keep layout stable.\n * Content rendered here does not affect layout width; it may visually overflow.\n *\n * @internal\n */\nexport const ResizeHandleSlot = forwardRef<HTMLDivElement, ResizeHandleProps>(\n  (_props, _ref) => null,\n);\n\nexport interface ExtractedPanelSlot {\n  children?: ReactNode;\n  config: {\n    minWidth: PanelWidth;\n    maxWidth: PanelWidth;\n    defaultWidth: PanelWidth;\n    position: 'start' | 'end';\n    resizable: boolean;\n    onResize?: (width: number) => void;\n    label?: string;\n    width?: number;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ExtractedContentSlot {\n  children?: ReactNode;\n  config: {\n    minWidth: PanelWidth;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ExtractedResizeHandleSlot {\n  children?: ReactNode;\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction isPanelSlot(\n  element: ReactElement,\n): element is ReactElement<ResizablePanelProps> {\n  return element.type === PanelSlot;\n}\n\nfunction isContentSlot(\n  element: ReactElement,\n): element is ReactElement<ContentProps> {\n  return element.type === ContentSlot;\n}\n\nfunction isResizeHandleSlot(\n  element: ReactElement,\n): element is ReactElement<ResizeHandleProps> {\n  return element.type === ResizeHandleSlot;\n}\n\n/**\n * Extracts only props and children from the slots, to ensure a stable slot component to render in the root\n */\nexport function extractSlotsProps(children: ReactNode): {\n  panel: ExtractedPanelSlot;\n  content: ExtractedContentSlot | null;\n  resizeHandle: ExtractedResizeHandleSlot | null;\n} {\n  let panel: ExtractedPanelSlot | null = null;\n  let content: ExtractedContentSlot | null = null;\n  let resizeHandle: ExtractedResizeHandleSlot | null = null;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isPanelSlot(child)) {\n      if (panel) {\n        throw new Error('SplitLayout: only one Panel slot is allowed');\n      }\n\n      const {\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        position,\n        resizable,\n        children,\n        onResize,\n        label,\n        width,\n        ...rest\n      } = child.props;\n\n      panel = {\n        children,\n        config: {\n          minWidth: minWidth ?? 200,\n          maxWidth: maxWidth ?? Infinity,\n          defaultWidth: defaultWidth ?? 200,\n          position: position ?? 'start',\n          resizable: resizable ?? true,\n          onResize,\n          label,\n          width,\n        },\n        domProps: rest,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n    } else if (isContentSlot(child)) {\n      if (content) {\n        throw new Error('SplitLayout: only one Content slot is allowed');\n      }\n\n      const { children, minWidth, ...rest } = child.props;\n\n      content = {\n        children,\n        config: {\n          minWidth: minWidth ?? 250,\n        },\n        domProps: rest,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n    } else if (isResizeHandleSlot(child)) {\n      if (resizeHandle) {\n        throw new Error('SplitLayout: only one ResizeHandle slot is allowed');\n      }\n\n      const { children, ...rest } = child.props;\n\n      resizeHandle = {\n        children,\n        domProps: rest,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n    }\n  });\n\n  if (!panel) {\n    throw new Error('Panel slot is required');\n  }\n\n  return { panel, content, resizeHandle };\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AA+CA,MAAM,YAAY;AAAA,EACvB,CAAC,QAAQ,SAAS;AACpB;AAcO,MAAM,cAAc;AAAA,EACzB,CAAC,QAAQ,SAAS;AACpB;AAkBO,MAAM,mBAAmB;AAAA,EAC9B,CAAC,QAAQ,SAAS;AACpB;AAiCA,SAAS,YACP,SAC8C;AAC9C,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,mBACP,SAC4C;AAC5C,SAAO,QAAQ,SAAS;AAC1B;AAKO,SAAS,kBAAkB,UAIhC;AACA,MAAI,QAAmC;AACvC,MAAI,UAAuC;AAC3C,MAAI,eAAiD;AAErD,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B;AAAA,IACF;AAEA,QAAI,YAAY,KAAK,GAAG;AACtB,UAAI,OAAO;AACT,cAAM,IAAI,MAAM,6CAA6C;AAAA,MAC/D;AAEA,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,cAAQ;AAAA,QACN,UAAAA;AAAA,QACA,QAAQ;AAAA,UACN,UAAU,YAAY;AAAA,UACtB,UAAU,YAAY;AAAA,UACtB,cAAc,gBAAgB;AAAA,UAC9B,UAAU,YAAY;AAAA,UACtB,WAAW,aAAa;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU;AAAA,QACV,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AAAA,IACF,WAAW,cAAc,KAAK,GAAG;AAC/B,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,+CAA+C;AAAA,MACjE;AAEA,YAAM,EAAE,UAAAA,WAAU,UAAU,GAAG,KAAK,IAAI,MAAM;AAE9C,gBAAU;AAAA,QACR,UAAAA;AAAA,QACA,QAAQ;AAAA,UACN,UAAU,YAAY;AAAA,QACxB;AAAA,QACA,UAAU;AAAA,QACV,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AAAA,IACF,WAAW,mBAAmB,KAAK,GAAG;AACpC,UAAI,cAAc;AAChB,cAAM,IAAI,MAAM,oDAAoD;AAAA,MACtE;AAEA,YAAM,EAAE,UAAAA,WAAU,GAAG,KAAK,IAAI,MAAM;AAEpC,qBAAe;AAAA,QACb,UAAAA;AAAA,QACA,UAAU;AAAA,QACV,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,SAAO,EAAE,OAAO,SAAS,aAAa;AACxC;",
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { type PanelWidth } from './width-utils.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\n/** @public */\nexport interface ResizablePanelProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId,\n    Pick<ComponentPropsWithoutRef<'div'>, 'id' | 'role'> {\n  /** The minimum width of the panel. Accepts a pixel value or a percentage string. */\n  minWidth?: PanelWidth;\n  /** The maximum width of the panel. Accepts a pixel value or a percentage string. */\n  maxWidth?: PanelWidth;\n  /** The initial width of the panel. Accepts a pixel value or a percentage string. */\n  defaultWidth?: PanelWidth;\n  /**\n   * Whether the panel width can be resized by dragging.\n   * @defaultValue true\n   */\n  resizable?: boolean;\n  /**\n   * The position of the panel relative to the content.\n   * @defaultValue 'start'\n   */\n  position?: 'start' | 'end';\n  /** Callback triggered when the panel is resized, with the new width in pixels. */\n  onResize?: (width: number) => void;\n  /** Accessible name for the resize separator. Referenced by aria-label on the separator element. */\n  label?: string;\n  /**\n   * Controlled panel width in px. When provided, the panel renders this width\n   * except while the user is actively dragging the resize handle.\n   * @internal\n   */\n  width?: number;\n}\n\n/** @public */\nexport const PanelSlot = forwardRef<HTMLDivElement, ResizablePanelProps>(\n  (_props, _ref) => null,\n);\n\n/** @public */\nexport interface ContentProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {\n  /** The minimum width of the content area. Accepts a pixel value or a percentage string. */\n  minWidth?: PanelWidth;\n}\n\nexport const ContentSlot = forwardRef<HTMLDivElement, ContentProps>(\n  (_props, _ref) => null,\n);\n\n/** @internal */\nexport interface ResizeHandleProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n/**\n * Optional slot to render custom decorations inside the resize handle area.\n *\n * Note: The resize handle column is fixed to 8px to keep layout stable.\n * Content rendered here does not affect layout width; it may visually overflow.\n *\n * @internal\n */\nexport const ResizeHandleSlot = forwardRef<HTMLDivElement, ResizeHandleProps>(\n  (_props, _ref) => null,\n);\n\nexport interface ExtractedPanelSlot {\n  children?: ReactNode;\n  config: {\n    minWidth: PanelWidth;\n    maxWidth: PanelWidth;\n    defaultWidth: PanelWidth;\n    position: 'start' | 'end';\n    resizable: boolean;\n    onResize?: (width: number) => void;\n    label?: string;\n    width?: number;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The extracted `Content` slot. `PageLayout`'s regions reuse it and render the\n * content column as a `<main>` rather than a `<div>`, which is why the ref\n * element is a parameter.\n */\nexport interface ExtractedContentSlot<\n  TElement extends HTMLElement = HTMLElement,\n> {\n  children?: ReactNode;\n  config: {\n    /** Width this content column keeps for itself. */\n    minWidth: PanelWidth;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<TElement>;\n}\n\nexport interface ExtractedResizeHandleSlot {\n  children?: ReactNode;\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction isPanelSlot(\n  element: ReactElement,\n): element is ReactElement<ResizablePanelProps> {\n  return element.type === PanelSlot;\n}\n\nfunction isContentSlot(\n  element: ReactElement,\n): element is ReactElement<ContentProps> {\n  return element.type === ContentSlot;\n}\n\nfunction isResizeHandleSlot(\n  element: ReactElement,\n): element is ReactElement<ResizeHandleProps> {\n  return element.type === ResizeHandleSlot;\n}\n\n/**\n * Extracts only props and children from the slots, to ensure a stable slot component to render in the root\n */\nexport function extractSlotsProps(children: ReactNode): {\n  panel: ExtractedPanelSlot;\n  content: ExtractedContentSlot<HTMLDivElement> | null;\n  resizeHandle: ExtractedResizeHandleSlot | null;\n} {\n  let panel: ExtractedPanelSlot | null = null;\n  let content: ExtractedContentSlot<HTMLDivElement> | null = null;\n  let resizeHandle: ExtractedResizeHandleSlot | null = null;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isPanelSlot(child)) {\n      if (panel) {\n        throw new Error('SplitLayout: only one Panel slot is allowed');\n      }\n\n      const {\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        position,\n        resizable,\n        children,\n        onResize,\n        label,\n        width,\n        ...rest\n      } = child.props;\n\n      panel = {\n        children,\n        config: {\n          minWidth: minWidth ?? 200,\n          maxWidth: maxWidth ?? Infinity,\n          defaultWidth: defaultWidth ?? 200,\n          position: position ?? 'start',\n          resizable: resizable ?? true,\n          onResize,\n          label,\n          width,\n        },\n        domProps: rest,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n    } else if (isContentSlot(child)) {\n      if (content) {\n        throw new Error('SplitLayout: only one Content slot is allowed');\n      }\n\n      const { children, minWidth, ...rest } = child.props;\n\n      content = {\n        children,\n        config: {\n          minWidth: minWidth ?? 250,\n        },\n        domProps: rest,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n    } else if (isResizeHandleSlot(child)) {\n      if (resizeHandle) {\n        throw new Error('SplitLayout: only one ResizeHandle slot is allowed');\n      }\n\n      const { children, ...rest } = child.props;\n\n      resizeHandle = {\n        children,\n        domProps: rest,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n    }\n  });\n\n  if (!panel) {\n    throw new Error('Panel slot is required');\n  }\n\n  return { panel, content, resizeHandle };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AAgDA,MAAM,YAAY;AAAA,EACvB,CAAC,QAAQ,SAAS;AACpB;AAeO,MAAM,cAAc;AAAA,EACzB,CAAC,QAAQ,SAAS;AACpB;AAmBO,MAAM,mBAAmB;AAAA,EAC9B,CAAC,QAAQ,SAAS;AACpB;AAyCA,SAAS,YACP,SAC8C;AAC9C,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,mBACP,SAC4C;AAC5C,SAAO,QAAQ,SAAS;AAC1B;AAKO,SAAS,kBAAkB,UAIhC;AACA,MAAI,QAAmC;AACvC,MAAI,UAAuD;AAC3D,MAAI,eAAiD;AAErD,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B;AAAA,IACF;AAEA,QAAI,YAAY,KAAK,GAAG;AACtB,UAAI,OAAO;AACT,cAAM,IAAI,MAAM,6CAA6C;AAAA,MAC/D;AAEA,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,cAAQ;AAAA,QACN,UAAAA;AAAA,QACA,QAAQ;AAAA,UACN,UAAU,YAAY;AAAA,UACtB,UAAU,YAAY;AAAA,UACtB,cAAc,gBAAgB;AAAA,UAC9B,UAAU,YAAY;AAAA,UACtB,WAAW,aAAa;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU;AAAA,QACV,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AAAA,IACF,WAAW,cAAc,KAAK,GAAG;AAC/B,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,+CAA+C;AAAA,MACjE;AAEA,YAAM,EAAE,UAAAA,WAAU,UAAU,GAAG,KAAK,IAAI,MAAM;AAE9C,gBAAU;AAAA,QACR,UAAAA;AAAA,QACA,QAAQ;AAAA,UACN,UAAU,YAAY;AAAA,QACxB;AAAA,QACA,UAAU;AAAA,QACV,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AAAA,IACF,WAAW,mBAAmB,KAAK,GAAG;AACpC,UAAI,cAAc;AAChB,cAAM,IAAI,MAAM,oDAAoD;AAAA,MACtE;AAEA,YAAM,EAAE,UAAAA,WAAU,GAAG,KAAK,IAAI,MAAM;AAEpC,qBAAe;AAAA,QACb,UAAAA;AAAA,QACA,UAAU;AAAA,QACV,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,SAAO,EAAE,OAAO,SAAS,aAAa;AACxC;",
   "names": ["children"]
 }

package/esm/layouts/split-layout/usePanelDrag.js

@@ -0,0 +1,43 @@
+import { useRef } from "react";
+import {
+  resolvePanelSizing
+} from "./panel-sizing.js";
+function usePanelDrag(options) {
+  const { containerRef, constraints, panelWidthPx, direction, paint, commit } = options;
+  const dragStartPx = useRef(null);
+  const draggedPx = useRef(0);
+  const resolve = (widthPx, containerWidth) => {
+    return resolvePanelSizing(
+      { draggedWidth: widthPx },
+      containerWidth,
+      constraints
+    );
+  };
+  return {
+    onDragStart: () => {
+      const containerWidth = containerRef.current?.offsetWidth ?? 0;
+      draggedPx.current = resolve(panelWidthPx, containerWidth).panel.width;
+      dragStartPx.current = draggedPx.current;
+    },
+    onDrag: (movement) => {
+      const containerWidth = containerRef.current?.offsetWidth ?? 0;
+      if (dragStartPx.current === null || containerWidth === 0) {
+        return;
+      }
+      const sizing = resolve(
+        dragStartPx.current + movement * direction,
+        containerWidth
+      );
+      draggedPx.current = sizing.panel.width;
+      paint(sizing);
+    },
+    onDragEnd: () => {
+      dragStartPx.current = null;
+      commit(draggedPx.current);
+    }
+  };
+}
+export {
+  usePanelDrag
+};
+//# sourceMappingURL=usePanelDrag.js.map

package/esm/layouts/split-layout/usePanelDrag.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/split-layout/usePanelDrag.ts"],
+  "sourcesContent": ["import { useRef, type RefObject } from 'react';\n\nimport {\n  resolvePanelSizing,\n  type PanelSizing,\n  type PanelSizingConstraints,\n} from './panel-sizing.js';\n\n/** @internal */\nexport interface PanelDragActions {\n  onDragStart: () => void;\n  onDrag: (movement: number) => void;\n  onDragEnd: () => void;\n}\n\n/** @internal */\nexport interface PanelDragOptions {\n  /** Element whose width the panel and its sibling content are clamped into. */\n  containerRef: RefObject<HTMLElement | null>;\n  constraints: PanelSizingConstraints;\n  /** Width the panel is painted with, in px, when a drag starts. */\n  panelWidthPx: number;\n  /**\n   * `1` while widening the panel means dragging to the right, which is the case\n   * for a panel at the start of its container. `-1` for a panel at the end.\n   */\n  direction: 1 | -1;\n  /**\n   * Paints the resolved geometry directly, without going through React, so the\n   * panel keeps up with the pointer.\n   */\n  paint: (sizing: PanelSizing) => void;\n  /** Records the width the drag settled on, in px. */\n  commit: (widthPx: number) => void;\n}\n\n/**\n * Drag choreography of a resize separator, shared by every layout that offers\n * one: a drag latches the width it started from, re-clamps the accumulated\n * movement against the live container on every move, and only reports the\n * settled width once the gesture ends (APPDEV-19606).\n *\n * Callers own where the geometry is painted and where the settled width goes,\n * never the gesture bookkeeping.\n *\n * @internal\n */\nexport function usePanelDrag(options: PanelDragOptions): PanelDragActions {\n  const { containerRef, constraints, panelWidthPx, direction, paint, commit } =\n    options;\n\n  const dragStartPx = useRef<number | null>(null);\n  const draggedPx = useRef(0);\n\n  const resolve = (widthPx: number, containerWidth: number) => {\n    return resolvePanelSizing(\n      { draggedWidth: widthPx },\n      containerWidth,\n      constraints,\n    );\n  };\n\n  return {\n    onDragStart: () => {\n      // A drag starts from what is on screen and ignores a controlled width\n      // until it ends.\n      const containerWidth = containerRef.current?.offsetWidth ?? 0;\n      draggedPx.current = resolve(panelWidthPx, containerWidth).panel.width;\n      dragStartPx.current = draggedPx.current;\n    },\n    onDrag: (movement: number) => {\n      const containerWidth = containerRef.current?.offsetWidth ?? 0;\n      if (dragStartPx.current === null || containerWidth === 0) {\n        return;\n      }\n\n      const sizing = resolve(\n        dragStartPx.current + movement * direction,\n        containerWidth,\n      );\n      draggedPx.current = sizing.panel.width;\n      paint(sizing);\n    },\n    onDragEnd: () => {\n      dragStartPx.current = null;\n      commit(draggedPx.current);\n    },\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,cAA8B;AAEvC;AAAA,EACE;AAAA,OAGK;AAyCA,SAAS,aAAa,SAA6C;AACxE,QAAM,EAAE,cAAc,aAAa,cAAc,WAAW,OAAO,OAAO,IACxE;AAEF,QAAM,cAAc,OAAsB,IAAI;AAC9C,QAAM,YAAY,OAAO,CAAC;AAE1B,QAAM,UAAU,CAAC,SAAiB,mBAA2B;AAC3D,WAAO;AAAA,MACL,EAAE,cAAc,QAAQ;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,aAAa,MAAM;AAGjB,YAAM,iBAAiB,aAAa,SAAS,eAAe;AAC5D,gBAAU,UAAU,QAAQ,cAAc,cAAc,EAAE,MAAM;AAChE,kBAAY,UAAU,UAAU;AAAA,IAClC;AAAA,IACA,QAAQ,CAAC,aAAqB;AAC5B,YAAM,iBAAiB,aAAa,SAAS,eAAe;AAC5D,UAAI,YAAY,YAAY,QAAQ,mBAAmB,GAAG;AACxD;AAAA,MACF;AAEA,YAAM,SAAS;AAAA,QACb,YAAY,UAAU,WAAW;AAAA,QACjC;AAAA,MACF;AACA,gBAAU,UAAU,OAAO,MAAM;AACjC,YAAM,MAAM;AAAA,IACd;AAAA,IACA,WAAW,MAAM;AACf,kBAAY,UAAU;AACtB,aAAO,UAAU,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;",
+  "names": []
+}