@zag-js/splitter 1.39.1 → 1.41.0

package/dist/splitter.machine.mjs

@@ -2,7 +2,7 @@ import "./chunk-QZ7TP4HQ.mjs";
 
 // src/splitter.machine.ts
 import { createMachine } from "@zag-js/core";
-import { observeChildren, trackPointerMove } from "@zag-js/dom-query";
+import { observeChildren, resizeObserverBorderBox, trackPointerMove } from "@zag-js/dom-query";
 import { ensure, ensureProps, isEqual, next, prev, setRafTimeout } from "@zag-js/utils";
 import * as dom from "./splitter.dom.mjs";
 import { getAriaValue } from "./utils/aria.mjs";
@@ -11,12 +11,13 @@ import {
   findPanelDataIndex,
   getPanelById,
   getPanelLayout,
-  getUnsafeDefaultSize,
   panelDataHelper,
   serializePanels,
   sortPanels
 } from "./utils/panel.mjs";
+import { preserveFixedPanelSizes } from "./utils/preserve-fixed-panel-sizes.mjs";
 import { resizeByDelta } from "./utils/resize-by-delta.mjs";
+import { getGroupSize, normalizePanels, resolvePanelSizes } from "./utils/size.mjs";
 import { validateSizes } from "./utils/validate-sizes.mjs";
 var machine = createMachine({
   props({ props }) {
@@ -34,15 +35,18 @@ var machine = createMachine({
   },
   context({ prop, bindable, getContext, getRefs }) {
     return {
+      panels: bindable(() => ({
+        defaultValue: normalizePanels(prop("panels"), null, prop("orientation"))
+      })),
       size: bindable(() => ({
-        value: prop("size"),
-        defaultValue: prop("defaultSize"),
+        defaultValue: [],
         isEqual(a, b) {
           return b != null && fuzzySizeEqual(a, b);
         },
         onChange(value) {
           const ctx = getContext();
           const refs = getRefs();
+          if (refs.get("suppressOnResize")) return;
           const sizesBeforeCollapse = refs.get("panelSizeBeforeCollapse");
           const expandToSizes = Object.fromEntries(sizesBeforeCollapse.entries());
           const resizeTriggerId = ctx.get("dragState")?.resizeTriggerId ?? null;
@@ -64,15 +68,27 @@ var machine = createMachine({
     };
   },
   watch({ track, action, prop }) {
-    track([() => serializePanels(prop("panels"))], () => {
-      action(["syncSize"]);
-    });
+    track(
+      [
+        () => serializePanels(prop("panels")),
+        () => JSON.stringify(prop("size") ?? []),
+        () => JSON.stringify(prop("defaultSize") ?? [])
+      ],
+      () => {
+        action(["syncSize"]);
+      }
+    );
   },
   refs() {
     return {
       panelSizeBeforeCollapse: /* @__PURE__ */ new Map(),
       prevDelta: 0,
-      panelIdToLastNotifiedSizeMap: /* @__PURE__ */ new Map()
+      panelIdToLastNotifiedSizeMap: /* @__PURE__ */ new Map(),
+      initialSize: null,
+      prevInitialLayout: null,
+      prevGroupSize: null,
+      lastRequestedSize: null,
+      suppressOnResize: false
     };
   },
   computed: {
@@ -84,6 +100,9 @@ var machine = createMachine({
     "SIZE.SET": {
       actions: ["setSize"]
     },
+    "SIZE.RESET": {
+      actions: ["resetSize"]
+    },
     "PANEL.COLLAPSE": {
       actions: ["collapsePanel"]
     },
@@ -92,11 +111,14 @@ var machine = createMachine({
     },
     "PANEL.RESIZE": {
       actions: ["resizePanel"]
+    },
+    "ROOT.RESIZE": {
+      actions: ["syncSize"]
     }
   },
   entry: ["syncSize"],
   exit: ["clearGlobalCursor"],
-  effects: ["trackResizeHandles"],
+  effects: ["trackResizeHandles", "trackRootResize"],
   states: {
     idle: {
       entry: ["clearDraggingState", "clearKeyboardState"],
@@ -171,14 +193,27 @@ var machine = createMachine({
         POINTER_MOVE: {
           actions: ["setPointerValue", "setGlobalCursor"]
         },
-        POINTER_UP: {
-          target: "idle",
-          actions: ["invokeOnResizeEnd", "clearGlobalCursor"]
-        }
+        POINTER_UP: [
+          {
+            guard: "isResizeTriggerFocused",
+            target: "focused",
+            actions: ["invokeOnResizeEnd", "setKeyboardState", "clearDraggingState", "clearGlobalCursor"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnResizeEnd", "clearGlobalCursor"]
+          }
+        ]
       }
     }
   },
   implementations: {
+    guards: {
+      isResizeTriggerFocused({ context, scope }) {
+        const dragState = context.get("dragState");
+        return scope.isActiveElement(dom.getResizeTriggerEl(scope, dragState?.resizeTriggerId));
+      }
+    },
     effects: {
       trackResizeHandles: ({ prop, scope, send }) => {
         const registry = prop("registry");
@@ -211,6 +246,13 @@ var machine = createMachine({
           observeCleanup?.();
         };
       },
+      trackRootResize: ({ scope, send }) => {
+        const rootEl = dom.getRootEl(scope);
+        if (!rootEl) return;
+        return resizeObserverBorderBox.observe(rootEl, () => {
+          send({ type: "ROOT.RESIZE" });
+        });
+      },
       waitForHoverDelay: ({ send }) => {
         return setRafTimeout(() => {
           send({ type: "HOVER_DELAY" });
@@ -230,40 +272,85 @@ var machine = createMachine({
     },
     actions: {
       setSize(params) {
-        const { context, event, prop } = params;
+        const { context, event, prop, scope } = params;
         const unsafeSize = event.size;
         const prevSize = context.get("size");
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const safeSize = validateSizes({
-          size: unsafeSize,
+          size: resolvePanelSizes({
+            sizes: unsafeSize,
+            panels: prop("panels"),
+            rootEl: dom.getRootEl(scope),
+            orientation: prop("orientation")
+          }),
           panels
         });
         if (!isEqual(prevSize, safeSize)) {
           setSize(params, safeSize);
         }
       },
-      syncSize({ context, prop }) {
-        const panels = prop("panels");
-        let prevSize = context.get("size");
-        let unsafeSize = null;
-        if (prevSize.length === 0) {
-          unsafeSize = getUnsafeDefaultSize({
-            panels,
-            size: context.initial("size")
-          });
-        }
-        const nextSize = validateSizes({
-          size: unsafeSize ?? prevSize,
+      resetSize(params) {
+        const { refs, context, prop, scope } = params;
+        const initialSize = refs.get("initialSize");
+        const nextSize = initialSize ?? validateSizes({
+          size: resolvePanelSizes({
+            sizes: prop("size") ?? prop("defaultSize"),
+            panels: prop("panels"),
+            rootEl: dom.getRootEl(scope),
+            orientation: prop("orientation")
+          }),
+          panels: context.get("panels")
+        });
+        setSize(params, nextSize);
+      },
+      syncSize(params) {
+        const { context, scope, prop, refs } = params;
+        const rootEl = dom.getRootEl(scope);
+        if (!rootEl) return;
+        const orientation = prop("orientation");
+        const nextGroupSize = getGroupSize(rootEl, orientation);
+        if (nextGroupSize <= 0) return;
+        const panels = normalizePanels(prop("panels"), rootEl, prop("orientation"));
+        context.set("panels", panels);
+        const sizeSpec = prop("size") ?? prop("defaultSize");
+        const initialLayout = `${getPanelLayout(prop("panels"))}:${JSON.stringify(prop("size") ?? [])}:${JSON.stringify(prop("defaultSize") ?? [])}`;
+        const prevGroupSize = refs.get("prevGroupSize");
+        const currentSize = context.get("size");
+        const nextResolvedSize = resolvePanelSizes({
+          sizes: sizeSpec,
+          panels: prop("panels"),
+          rootEl,
+          orientation
+        });
+        const canPreserveLayout = prevGroupSize != null && prevGroupSize !== nextGroupSize && currentSize.length === panels.length;
+        const nextSize = canPreserveLayout ? preserveFixedPanelSizes({
+          panels,
+          prevLayout: currentSize,
+          prevGroupSize,
+          nextGroupSize
+        }) : nextResolvedSize;
+        const safeSize = validateSizes({
+          size: nextSize,
           panels
         });
-        if (!isEqual(prevSize, nextSize)) {
-          context.set("size", nextSize);
+        if (refs.get("prevInitialLayout") !== initialLayout) {
+          refs.set("initialSize", safeSize);
+          refs.set("prevInitialLayout", initialLayout);
+        }
+        const prevSize = context.get("size");
+        if (!isEqual(prevSize, safeSize)) {
+          refs.set("suppressOnResize", prop("size") != null || prevSize.length === 0);
+          context.set("size", safeSize);
+          refs.set("suppressOnResize", false);
         }
+        refs.set("prevGroupSize", nextGroupSize);
       },
       setDraggingState({ context, event, prop, scope }) {
         const orientation = prop("orientation");
         const size = context.get("size");
         const resizeTriggerId = event.id;
+        const resolvedResizeTriggerId = dom.resolveResizeTriggerId(scope, resizeTriggerId);
+        if (!resolvedResizeTriggerId) return;
         const panelGroupEl = dom.getRootEl(scope);
         if (!panelGroupEl) return;
         const handleElement = dom.getResizeTriggerEl(scope, resizeTriggerId);
@@ -271,6 +358,7 @@ var machine = createMachine({
         const initialCursorPosition = orientation === "horizontal" ? event.point.x : event.point.y;
         context.set("dragState", {
           resizeTriggerId: event.id,
+          resolvedResizeTriggerId,
           resizeTriggerRect: handleElement.getBoundingClientRect(),
           initialCursorPosition,
           initialSize: size
@@ -279,23 +367,26 @@ var machine = createMachine({
       clearDraggingState({ context }) {
         context.set("dragState", null);
       },
-      setKeyboardState({ context, event }) {
+      setKeyboardState({ context, event, scope }) {
+        const id = event.id ?? context.get("dragState")?.resizeTriggerId;
+        if (id == null) return;
         context.set("keyboardState", {
-          resizeTriggerId: event.id
+          resizeTriggerId: id,
+          resolvedResizeTriggerId: dom.resolveResizeTriggerId(scope, id)
         });
       },
       clearKeyboardState({ context }) {
         context.set("keyboardState", null);
       },
       collapsePanel(params) {
-        const { context, prop, event, refs } = params;
+        const { context, event, refs } = params;
         const prevSize = context.get("size");
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const panel = panels.find((panel2) => panel2.id === event.id);
         ensure(panel, () => `Panel data not found for id "${event.id}"`);
         if (panel.collapsible) {
           const { collapsedSize = 0, panelSize, pivotIndices } = panelDataHelper(panels, panel, prevSize);
-          ensure(panelSize, () => `Panel size not found for panel "${panel.id}"`);
+          ensure(panelSize != null, () => `Panel size not found for panel "${panel.id}"`);
           if (!fuzzyNumbersEqual(panelSize, collapsedSize)) {
             refs.get("panelSizeBeforeCollapse").set(panel.id, panelSize);
             const isLastPanel = findPanelDataIndex(panels, panel) === panels.length - 1;
@@ -315,8 +406,8 @@ var machine = createMachine({
         }
       },
       expandPanel(params) {
-        const { context, prop, event, refs } = params;
-        const panels = prop("panels");
+        const { context, event, refs } = params;
+        const panels = context.get("panels");
         const prevSize = context.get("size");
         const panel = panels.find((panel2) => panel2.id === event.id);
         ensure(panel, () => `Panel data not found for id "${event.id}"`);
@@ -348,13 +439,13 @@ var machine = createMachine({
         }
       },
       resizePanel(params) {
-        const { context, prop, event } = params;
+        const { context, event } = params;
         const prevSize = context.get("size");
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const panel = getPanelById(panels, event.id);
         const unsafePanelSize = event.size;
         const { panelSize, pivotIndices } = panelDataHelper(panels, panel, prevSize);
-        ensure(panelSize, () => `Panel size not found for panel "${panel.id}"`);
+        ensure(panelSize != null, () => `Panel size not found for panel "${panel.id}"`);
         const isLastPanel = findPanelDataIndex(panels, panel) === panels.length - 1;
         const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
         const nextSize = resizeByDelta({
@@ -373,11 +464,11 @@ var machine = createMachine({
         const { context, event, prop, scope } = params;
         const dragState = context.get("dragState");
         if (!dragState) return;
-        const { resizeTriggerId, initialSize, initialCursorPosition } = dragState;
-        const panels = prop("panels");
+        const { resolvedResizeTriggerId, initialSize, initialCursorPosition } = dragState;
+        const panels = context.get("panels");
         const panelGroupElement = dom.getRootEl(scope);
         ensure(panelGroupElement, () => `Panel group element not found`);
-        const pivotIndices = resizeTriggerId.split(":").map((id) => panels.findIndex((panel) => panel.id === id));
+        const pivotIndices = resolvedResizeTriggerId.split(":").map((id) => panels.findIndex((panel) => panel.id === id));
         const horizontal = prop("orientation") === "horizontal";
         const cursorPosition = horizontal ? event.point.x : event.point.y;
         const groupRect = panelGroupElement.getBoundingClientRect();
@@ -398,9 +489,10 @@ var machine = createMachine({
         }
       },
       setKeyboardValue(params) {
-        const { context, event, prop } = params;
-        const panelDataArray = prop("panels");
-        const resizeTriggerId = event.id;
+        const { context, event } = params;
+        const panelDataArray = context.get("panels");
+        const resizeTriggerId = dom.resolveResizeTriggerId(params.scope, event.id);
+        if (!resizeTriggerId) return;
         const delta = event.delta;
         const pivotIndices = resizeTriggerId.split(":").map((id) => panelDataArray.findIndex((panelData) => panelData.id === id));
         const prevSize = context.get("size");
@@ -416,11 +508,11 @@ var machine = createMachine({
           setSize(params, nextSize);
         }
       },
-      invokeOnResizeEnd({ context, prop }) {
+      invokeOnResizeEnd({ context, prop, refs }) {
         queueMicrotask(() => {
           const dragState = context.get("dragState");
           prop("onResizeEnd")?.({
-            size: context.get("size"),
+            size: refs.get("lastRequestedSize") ?? context.get("size"),
             resizeTriggerId: dragState?.resizeTriggerId ?? null
           });
         });
@@ -431,10 +523,10 @@ var machine = createMachine({
         });
       },
       collapseOrExpandPanel(params) {
-        const { context, prop } = params;
-        const panelDataArray = prop("panels");
+        const { context, refs } = params;
+        const panelDataArray = context.get("panels");
         const sizes = context.get("size");
-        const resizeTriggerId = context.get("keyboardState")?.resizeTriggerId;
+        const resizeTriggerId = context.get("keyboardState")?.resolvedResizeTriggerId;
         const [idBefore, idAfter] = resizeTriggerId?.split(":") ?? [];
         const index = panelDataArray.findIndex((panelData2) => panelData2.id === idBefore);
         if (index === -1) return;
@@ -448,7 +540,7 @@ var machine = createMachine({
           );
           const nextSize = resizeByDelta({
             delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-            initialSize: context.initial("size"),
+            initialSize: refs.get("initialSize") ?? sizes,
             panels: panelDataArray,
             pivotIndices,
             prevSize: sizes,
@@ -459,18 +551,19 @@ var machine = createMachine({
           }
         }
       },
-      setGlobalCursor({ context, scope, prop }) {
+      setGlobalCursor(params) {
+        const { context, scope, prop } = params;
         const registry = prop("registry");
         if (registry) return;
         const dragState = context.get("dragState");
         if (!dragState) return;
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const horizontal = prop("orientation") === "horizontal";
-        const [idBefore] = dragState.resizeTriggerId.split(":");
+        const [idBefore] = dragState.resolvedResizeTriggerId.split(":");
         const indexBefore = panels.findIndex((panel2) => panel2.id === idBefore);
         const panel = panels[indexBefore];
         const size = context.get("size");
-        const aria = getAriaValue(size, panels, dragState.resizeTriggerId);
+        const aria = getAriaValue(size, panels, dragState.resolvedResizeTriggerId);
         const isAtMin = fuzzyNumbersEqual(aria.valueNow, aria.valueMin) || fuzzyNumbersEqual(aria.valueNow, panel.collapsedSize);
         const isAtMax = fuzzyNumbersEqual(aria.valueNow, aria.valueMax);
         const cursorState = { isAtMin, isAtMax };
@@ -490,21 +583,36 @@ var machine = createMachine({
 });
 function setSize(params, sizes) {
   const { refs, prop, context } = params;
-  const panelsArray = prop("panels");
+  const panelsArray = context.get("panels");
   const onCollapse = prop("onCollapse");
   const onExpand = prop("onExpand");
+  const onResize = prop("onResize");
   const onResizeStart = prop("onResizeStart");
   const onResizeEnd = prop("onResizeEnd");
   const panelIdToLastNotifiedSizeMap = refs.get("panelIdToLastNotifiedSizeMap");
   const dragState = context.get("dragState");
   const keyboardState = context.get("keyboardState");
   const isProgrammatic = dragState === null && keyboardState === null;
+  refs.set("lastRequestedSize", sizes);
   if (isProgrammatic && onResizeStart) {
     queueMicrotask(() => {
       onResizeStart();
     });
   }
-  context.set("size", sizes);
+  if (prop("size") == null) {
+    context.set("size", sizes);
+  } else if (onResize) {
+    const sizesBeforeCollapse = refs.get("panelSizeBeforeCollapse");
+    const expandToSizes = Object.fromEntries(sizesBeforeCollapse.entries());
+    const resizeTriggerId = dragState?.resizeTriggerId ?? null;
+    const layout = getPanelLayout(prop("panels"));
+    onResize({
+      size: sizes,
+      layout,
+      resizeTriggerId,
+      expandToSizes
+    });
+  }
   sizes.forEach((size, index) => {
     const panelData = panelsArray[index];
     ensure(panelData, () => `Panel data not found for index ${index}`);
@@ -512,11 +620,11 @@ function setSize(params, sizes) {
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap.get(panelId);
     if (lastNotifiedSize == null || size !== lastNotifiedSize) {
       panelIdToLastNotifiedSizeMap.set(panelId, size);
-      if (collapsible && (onCollapse || onExpand)) {
-        if ((lastNotifiedSize == null || fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual(size, collapsedSize)) {
+      if (collapsible && lastNotifiedSize != null && (onCollapse || onExpand)) {
+        if (fuzzyNumbersEqual(lastNotifiedSize, collapsedSize) && !fuzzyNumbersEqual(size, collapsedSize)) {
           onExpand?.({ panelId, size });
         }
-        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual(size, collapsedSize)) {
+        if (!fuzzyNumbersEqual(lastNotifiedSize, collapsedSize) && fuzzyNumbersEqual(size, collapsedSize)) {
           onCollapse?.({ panelId, size });
         }
       }

package/dist/splitter.types.d.mts

@@ -4,7 +4,9 @@ import { SplitterRegistry } from './utils/registry.mjs';
 
 type ResizeEvent = PointerEvent | KeyboardEvent;
 type PanelId = string;
-type ResizeTriggerId = `${PanelId}:${PanelId}`;
+type ResizeTriggerId = `${PanelId}:${PanelId}` | `${PanelId}:` | `:${PanelId}`;
+type PanelSize = number | string;
+type PanelResizeBehavior = "preserve-relative-size" | "preserve-pixel-size";
 interface PanelData {
     /**
      * The id of the panel.
@@ -17,20 +19,29 @@ interface PanelData {
     /**
      * The minimum size of the panel.
      */
-    minSize?: number | undefined;
+    minSize?: PanelSize | undefined;
     /**
      * The maximum size of the panel.
      */
-    maxSize?: number | undefined;
+    maxSize?: PanelSize | undefined;
     /**
      * Whether the panel is collapsible.
      */
     collapsible?: boolean | undefined;
+    /**
+     * How the panel should behave when the parent group is resized.
+     */
+    resizeBehavior?: PanelResizeBehavior | undefined;
     /**
      * The size of the panel when collapsed.
      */
-    collapsedSize?: number | undefined;
+    collapsedSize?: PanelSize | undefined;
 }
+type NormalizedPanelData = Omit<PanelData, "minSize" | "maxSize" | "collapsedSize"> & {
+    minSize?: number | undefined;
+    maxSize?: number | undefined;
+    collapsedSize?: number | undefined;
+};
 interface CursorState {
     isAtMin: boolean;
     isAtMax: boolean;
@@ -64,12 +75,12 @@ interface SplitterProps extends DirectionProperty, CommonProperties {
     /**
      * The controlled size data of the panels
      */
-    size?: number[] | undefined;
+    size?: PanelSize[] | undefined;
     /**
      * The initial size of the panels when rendered.
      * Use when you don't need to control the size of the panels.
      */
-    defaultSize?: number[] | undefined;
+    defaultSize?: PanelSize[] | undefined;
     /**
      * The size constraints of the panels.
      */
@@ -115,22 +126,30 @@ interface SplitterProps extends DirectionProperty, CommonProperties {
 type PropsWithDefault = "orientation" | "panels";
 interface DragState {
     resizeTriggerId: string;
+    resolvedResizeTriggerId: `${PanelId}:${PanelId}`;
     resizeTriggerRect: DOMRect;
     initialCursorPosition: number;
     initialSize: number[];
 }
 interface KeyboardState {
     resizeTriggerId: string;
+    resolvedResizeTriggerId: `${PanelId}:${PanelId}` | null;
 }
 interface Context {
     dragState: DragState | null;
     keyboardState: KeyboardState | null;
     size: number[];
+    panels: NormalizedPanelData[];
 }
 interface Refs {
     panelSizeBeforeCollapse: Map<string, number>;
     panelIdToLastNotifiedSizeMap: Map<string, number>;
     prevDelta: number;
+    initialSize: number[] | null;
+    prevInitialLayout: string | null;
+    prevGroupSize: number | null;
+    lastRequestedSize: number[] | null;
+    suppressOnResize: boolean;
 }
 interface SplitterSchema {
     state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
@@ -185,7 +204,7 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
     /**
      * Sets the sizes of the panels.
      */
-    setSizes: (size: number[]) => void;
+    setSizes: (size: PanelSize[]) => void;
     /**
      * Returns the items of the splitter.
      */
@@ -240,4 +259,4 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
     getResizeTriggerIndicator: (props: ResizeTriggerProps) => T["element"];
 }
 
-export type { CursorState, DragState, ElementIds, ExpandCollapseDetails, KeyboardState, PanelData, PanelId, PanelItem, PanelProps, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterApi, SplitterItem, SplitterMachine, SplitterProps, SplitterSchema, SplitterService };
+export type { CursorState, DragState, ElementIds, ExpandCollapseDetails, KeyboardState, NormalizedPanelData, PanelData, PanelId, PanelItem, PanelProps, PanelResizeBehavior, PanelSize, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterApi, SplitterItem, SplitterMachine, SplitterProps, SplitterSchema, SplitterService };

package/dist/splitter.types.d.ts

@@ -4,7 +4,9 @@ import { SplitterRegistry } from './utils/registry.js';
 
 type ResizeEvent = PointerEvent | KeyboardEvent;
 type PanelId = string;
-type ResizeTriggerId = `${PanelId}:${PanelId}`;
+type ResizeTriggerId = `${PanelId}:${PanelId}` | `${PanelId}:` | `:${PanelId}`;
+type PanelSize = number | string;
+type PanelResizeBehavior = "preserve-relative-size" | "preserve-pixel-size";
 interface PanelData {
     /**
      * The id of the panel.
@@ -17,20 +19,29 @@ interface PanelData {
     /**
      * The minimum size of the panel.
      */
-    minSize?: number | undefined;
+    minSize?: PanelSize | undefined;
     /**
      * The maximum size of the panel.
      */
-    maxSize?: number | undefined;
+    maxSize?: PanelSize | undefined;
     /**
      * Whether the panel is collapsible.
      */
     collapsible?: boolean | undefined;
+    /**
+     * How the panel should behave when the parent group is resized.
+     */
+    resizeBehavior?: PanelResizeBehavior | undefined;
     /**
      * The size of the panel when collapsed.
      */
-    collapsedSize?: number | undefined;
+    collapsedSize?: PanelSize | undefined;
 }
+type NormalizedPanelData = Omit<PanelData, "minSize" | "maxSize" | "collapsedSize"> & {
+    minSize?: number | undefined;
+    maxSize?: number | undefined;
+    collapsedSize?: number | undefined;
+};
 interface CursorState {
     isAtMin: boolean;
     isAtMax: boolean;
@@ -64,12 +75,12 @@ interface SplitterProps extends DirectionProperty, CommonProperties {
     /**
      * The controlled size data of the panels
      */
-    size?: number[] | undefined;
+    size?: PanelSize[] | undefined;
     /**
      * The initial size of the panels when rendered.
      * Use when you don't need to control the size of the panels.
      */
-    defaultSize?: number[] | undefined;
+    defaultSize?: PanelSize[] | undefined;
     /**
      * The size constraints of the panels.
      */
@@ -115,22 +126,30 @@ interface SplitterProps extends DirectionProperty, CommonProperties {
 type PropsWithDefault = "orientation" | "panels";
 interface DragState {
     resizeTriggerId: string;
+    resolvedResizeTriggerId: `${PanelId}:${PanelId}`;
     resizeTriggerRect: DOMRect;
     initialCursorPosition: number;
     initialSize: number[];
 }
 interface KeyboardState {
     resizeTriggerId: string;
+    resolvedResizeTriggerId: `${PanelId}:${PanelId}` | null;
 }
 interface Context {
     dragState: DragState | null;
     keyboardState: KeyboardState | null;
     size: number[];
+    panels: NormalizedPanelData[];
 }
 interface Refs {
     panelSizeBeforeCollapse: Map<string, number>;
     panelIdToLastNotifiedSizeMap: Map<string, number>;
     prevDelta: number;
+    initialSize: number[] | null;
+    prevInitialLayout: string | null;
+    prevGroupSize: number | null;
+    lastRequestedSize: number[] | null;
+    suppressOnResize: boolean;
 }
 interface SplitterSchema {
     state: "idle" | "hover:temp" | "hover" | "dragging" | "focused";
@@ -185,7 +204,7 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
     /**
      * Sets the sizes of the panels.
      */
-    setSizes: (size: number[]) => void;
+    setSizes: (size: PanelSize[]) => void;
     /**
      * Returns the items of the splitter.
      */
@@ -240,4 +259,4 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
     getResizeTriggerIndicator: (props: ResizeTriggerProps) => T["element"];
 }
 
-export type { CursorState, DragState, ElementIds, ExpandCollapseDetails, KeyboardState, PanelData, PanelId, PanelItem, PanelProps, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterApi, SplitterItem, SplitterMachine, SplitterProps, SplitterSchema, SplitterService };
+export type { CursorState, DragState, ElementIds, ExpandCollapseDetails, KeyboardState, NormalizedPanelData, PanelData, PanelId, PanelItem, PanelProps, PanelResizeBehavior, PanelSize, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterApi, SplitterItem, SplitterMachine, SplitterProps, SplitterSchema, SplitterService };