@zag-js/splitter 1.4.1 → 1.5.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { getRelativePoint, raf, trackPointerMove, dataAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
-import { setRafTimeout, createSplitProps, ensure } from '@zag-js/utils';
+import { trackPointerMove, queryAll, dataAttr, getEventKey, getEventPoint } from '@zag-js/dom-query';
+import { prev, next, ensure, isEqual, setRafTimeout, ensureProps, createSplitProps } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -19,17 +19,17 @@ var getCursor = (state, x) => {
   if (state.isAtMax) cursor = x ? "w-resize" : "n-resize";
   return cursor;
 };
-var getPanelStyle = (panels, id) => {
-  const flexGrow = panels.find((panel) => panel.id === id)?.size ?? "0";
-  return { flexBasis: 0, flexGrow, flexShrink: 1, overflow: "hidden" };
+var getResizeTriggerEls = (ctx) => {
+  return queryAll(getRootEl(ctx), `[role=separator][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
 };
-var setupGlobalCursor = (ctx, state, x) => {
+var setupGlobalCursor = (ctx, state, x, nonce) => {
   const styleEl = ctx.getById(getGlobalCursorId(ctx));
   const textContent = `* { cursor: ${getCursor(state, x)} !important; }`;
   if (styleEl) {
     styleEl.textContent = textContent;
   } else {
     const style = ctx.getDoc().createElement("style");
+    if (nonce) style.nonce = nonce;
     style.id = getGlobalCursorId(ctx);
     style.textContent = textContent;
     ctx.getDoc().head.appendChild(style);
@@ -39,170 +39,255 @@ var removeGlobalCursor = (ctx) => {
   const styleEl = ctx.getById(getGlobalCursorId(ctx));
   styleEl?.remove();
 };
-
-// src/splitter.utils.ts
-function validateSize(key, size) {
-  if (Math.floor(size) > 100) {
-    throw new Error(`Total ${key} of panels cannot be greater than 100`);
-  }
-}
-function getNormalizedPanels(sizes) {
-  let numOfPanelsWithoutSize = 0;
-  let totalSize = 0;
+function calculateAriaValues({
+  size,
+  panels,
+  pivotIndices
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
   let totalMinSize = 0;
-  const panels = sizes.map((panel) => {
-    const minSize = panel.minSize ?? 0;
-    const maxSize = panel.maxSize ?? 100;
-    totalMinSize += minSize;
-    if (panel.size == null) {
-      numOfPanelsWithoutSize++;
+  let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  ensure(firstIndex, "No pivot index found");
+  panels.forEach((panel, index) => {
+    const { maxSize = 100, minSize = 0 } = panel;
+    if (index === firstIndex) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
     } else {
-      totalSize += panel.size;
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
     }
-    return {
-      ...panel,
-      minSize,
-      maxSize
-    };
   });
-  validateSize("minSize", totalMinSize);
-  validateSize("size", totalSize);
-  let end = 0;
-  let remainingSize = 0;
-  const result = panels.map((panel) => {
-    let start = end;
-    if (panel.size != null) {
-      end += panel.size;
-      remainingSize = panel.size - panel.minSize;
-      return {
-        ...panel,
-        start,
-        end,
-        remainingSize
-      };
-    }
-    const size = (100 - totalSize) / numOfPanelsWithoutSize;
-    end += size;
-    remainingSize = size - panel.minSize;
-    return { ...panel, size, start, end, remainingSize };
-  });
-  return result;
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = size[firstIndex];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
 }
-function getHandlePanels(panels, id) {
-  const [beforeId, afterId] = id?.split(":") ?? [];
-  if (!beforeId || !afterId) return;
+function getAriaValue(size, panels, handleId) {
+  const [beforeId, afterId] = handleId.split(":");
   const beforeIndex = panels.findIndex((panel) => panel.id === beforeId);
   const afterIndex = panels.findIndex((panel) => panel.id === afterId);
-  if (beforeIndex === -1 || afterIndex === -1) return;
-  const before = panels[beforeIndex];
-  const after = panels[afterIndex];
+  const { valueMax, valueMin, valueNow } = calculateAriaValues({
+    size,
+    panels,
+    pivotIndices: [beforeIndex, afterIndex]
+  });
   return {
-    before: {
-      ...before,
-      index: beforeIndex
-    },
-    after: {
-      ...after,
-      index: afterIndex
-    }
+    beforeId,
+    afterId,
+    valueMax: Math.round(valueMax),
+    valueMin: Math.round(valueMin),
+    valueNow: valueNow != null ? Math.round(valueNow) : void 0
   };
 }
-function getHandleBounds(panels, id) {
-  const handlePanels = getHandlePanels(panels, id);
-  if (!handlePanels) return;
-  const { before, after } = handlePanels;
-  return {
-    min: Math.max(before.start + before.minSize, after.end - after.maxSize),
-    max: Math.min(after.end - after.minSize, before.maxSize + before.start)
-  };
+
+// src/utils/fuzzy.ts
+var PRECISION = 10;
+function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
+  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
+    return 0;
+  } else {
+    return actual > expected ? 1 : -1;
+  }
 }
-function getPanelBounds(panels, id) {
-  const bounds = getHandleBounds(panels, id);
-  const handlePanels = getHandlePanels(panels, id);
-  if (!bounds || !handlePanels) return;
-  const { before, after } = handlePanels;
-  const beforeMin = Math.abs(before.start - bounds.min);
-  const afterMin = after.size + (before.size - beforeMin);
-  const beforeMax = Math.abs(before.start - bounds.max);
-  const afterMax = after.size - (beforeMax - before.size);
-  return {
-    before: {
-      index: before.index,
-      min: beforeMin,
-      max: beforeMax,
-      isAtMin: beforeMin === before.size,
-      isAtMax: beforeMax === before.size,
-      up(step) {
-        return Math.min(before.size + step, beforeMax);
-      },
-      down(step) {
-        return Math.max(before.size - step, beforeMin);
-      }
-    },
-    after: {
-      index: after.index,
-      min: afterMin,
-      max: afterMax,
-      isAtMin: afterMin === after.size,
-      isAtMax: afterMax === after.size,
-      up(step) {
-        return Math.min(after.size + step, afterMin);
-      },
-      down(step) {
-        return Math.max(after.size - step, afterMax);
-      }
+function fuzzyNumbersEqual(actual, expected, fractionDigits = PRECISION) {
+  if (actual == null || expected == null) return false;
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
+function fuzzySizeEqual(actual, expected, fractionDigits) {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+  for (let index = 0; index < actual.length; index++) {
+    const actualSize = actual[index];
+    const expectedSize = expected[index];
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
     }
+  }
+  return true;
+}
+function getPanelById(panels, id) {
+  const panel = panels.find((panel2) => panel2.id === id);
+  ensure(panel, `Panel data not found for id "${id}"`);
+  return panel;
+}
+function findPanelDataIndex(panels, panel) {
+  return panels.findIndex((prevPanel) => prevPanel === panel || prevPanel.id === panel.id);
+}
+function findPanelIndex(panels, id) {
+  return panels.findIndex((panel) => panel.id === id);
+}
+function panelDataHelper(panels, panel, sizes) {
+  const index = findPanelIndex(panels, panel.id);
+  const pivotIndices = index === panels.length - 1 ? [index - 1, index] : [index, index + 1];
+  const panelSize = sizes[index];
+  return { ...panel, panelSize, pivotIndices };
+}
+function sortPanels(panels) {
+  return panels.sort((panelA, panelB) => {
+    const orderA = panelA.order;
+    const orderB = panelB.order;
+    if (orderA == null && orderB == null) {
+      return 0;
+    } else if (orderA == null) {
+      return -1;
+    } else if (orderB == null) {
+      return 1;
+    } else {
+      return orderA - orderB;
+    }
+  });
+}
+function getPanelLayout(panels) {
+  return panels.map((panel) => panel.id).sort().join(":");
+}
+function serializePanels(panels) {
+  const keys = panels.map((panel) => panel.id);
+  const sortedKeys = keys.sort();
+  const serialized = sortedKeys.map((key) => {
+    const panel = panels.find((panel2) => panel2.id === key);
+    return JSON.stringify(panel);
+  });
+  return serialized.join(",");
+}
+function getPanelFlexBoxStyle({
+  defaultSize,
+  dragState,
+  sizes,
+  panels,
+  panelIndex,
+  precision = 3
+}) {
+  const size = sizes[panelIndex];
+  let flexGrow;
+  if (size == null) {
+    flexGrow = defaultSize != void 0 ? defaultSize.toPrecision(precision) : "1";
+  } else if (panels.length === 1) {
+    flexGrow = "1";
+  } else {
+    flexGrow = size.toPrecision(precision);
+  }
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+    // Without this, Panel sizes may be unintentionally overridden by their content
+    overflow: "hidden",
+    // Disable pointer events inside of a panel during resize
+    // This avoid edge cases like nested iframes
+    pointerEvents: dragState !== null ? "none" : void 0
   };
 }
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
+function getUnsafeDefaultSize({ panels, size: sizes }) {
+  const finalSizes = Array(panels.length);
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+  for (let index = 0; index < panels.length; index++) {
+    const panel = panels[index];
+    ensure(panel, `Panel data not found for index ${index}`);
+    const defaultSize = sizes[index];
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+      finalSizes[index] = defaultSize;
+      remainingSize -= defaultSize;
+    }
+  }
+  for (let index = 0; index < panels.length; index++) {
+    const panel = panels[index];
+    ensure(panel, `Panel data not found for index ${index}`);
+    const defaultSize = sizes[index];
+    if (defaultSize != null) {
+      continue;
+    }
+    const numRemainingPanels = panels.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+    numPanelsWithSizes++;
+    finalSizes[index] = size;
+    remainingSize -= size;
+  }
+  return finalSizes;
 }
 
 // src/splitter.connect.ts
 function connect(service, normalize) {
   const { state, send, prop, computed, context, scope } = service;
-  const horizontal = computed("isHorizontal");
-  const focused = state.hasTag("focus");
+  const horizontal = computed("horizontal");
   const dragging = state.matches("dragging");
-  const panels = computed("panels");
-  const activeResizeId = context.get("activeResizeId");
-  function getResizeTriggerState(props2) {
-    const { id, disabled } = props2;
-    const ids = id.split(":");
-    const panelIds = ids.map((id2) => getPanelId(scope, id2));
-    const panels2 = getHandleBounds(computed("panels"), id);
-    return {
-      disabled: !!disabled,
-      focused: activeResizeId === id && focused,
-      panelIds,
-      min: panels2?.min,
-      max: panels2?.max,
-      value: 0
-    };
-  }
+  const getPanelStyle = (id) => {
+    const panels = prop("panels");
+    const panelIndex = panels.findIndex((panel) => panel.id === id);
+    const defaultSize = context.initial("size")[panelIndex];
+    const dragState = context.get("dragState");
+    return getPanelFlexBoxStyle({
+      defaultSize,
+      dragState,
+      sizes: context.get("size"),
+      panels,
+      panelIndex
+    });
+  };
   return {
-    focused,
     dragging,
-    getResizeTriggerState,
-    bounds: getHandleBounds(computed("panels"), activeResizeId),
-    setToMinSize(id) {
-      const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SIZE.SET", id, size: panel?.minSize, src: "setToMinSize" });
+    getItems() {
+      return prop("panels").flatMap((panel, index, arr) => {
+        const nextPanel = arr[index + 1];
+        if (panel && nextPanel) {
+          return [
+            { type: "panel", id: panel.id },
+            { type: "handle", id: `${panel.id}:${nextPanel.id}` }
+          ];
+        }
+        return [{ type: "panel", id: panel.id }];
+      });
+    },
+    getSizes() {
+      return context.get("size");
     },
-    setToMaxSize(id) {
-      const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SIZE.SET", id, size: panel?.maxSize, src: "setToMaxSize" });
+    setSizes(size) {
+      send({ type: "SIZE.SET", size });
     },
-    setSize(id, size) {
-      send({ type: "SIZE.SET", id, size });
+    collapsePanel(id) {
+      send({ type: "PANEL.COLLAPSE", id });
     },
-    setSizes(sizes) {
-      send({ type: "SIZES.SET", sizes });
+    expandPanel(id, minSize) {
+      send({ type: "PANEL.EXPAND", id, minSize });
     },
-    getSize(id) {
-      const panel = panels.find((panel2) => panel2.id === id);
-      ensure(panel, `Panel with id ${id} not found`);
-      return panel.size;
+    resizePanel(id, unsafePanelSize) {
+      send({ type: "PANEL.RESIZE", id, size: unsafePanelSize });
+    },
+    getPanelSize(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = getPanelById(panels, id);
+      const { panelSize } = panelDataHelper(panels, panelData, size);
+      ensure(panelSize, `Panel size not found for panel "${panelData.id}"`);
+      return panelSize;
+    },
+    isPanelCollapsed(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = getPanelById(panels, id);
+      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels, panelData, size);
+      ensure(panelSize, `Panel size not found for panel "${panelData.id}"`);
+      return collapsible === true && fuzzyNumbersEqual(panelSize, collapsedSize);
+    },
+    isPanelExpanded(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = getPanelById(panels, id);
+      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels, panelData, size);
+      ensure(panelSize, `Panel size not found for panel "${panelData.id}"`);
+      return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
+    },
+    getLayout() {
+      return getPanelLayout(prop("panels"));
     },
     getRootProps() {
       return normalize.element({
@@ -225,44 +310,51 @@ function connect(service, normalize) {
         ...parts.panel.attrs,
         "data-orientation": prop("orientation"),
         dir: prop("dir"),
+        "data-id": id,
+        "data-index": findPanelIndex(prop("panels"), id),
         id: getPanelId(scope, id),
         "data-ownedby": getRootId(scope),
-        style: getPanelStyle(panels, id)
+        style: getPanelStyle(id)
       });
     },
     getResizeTriggerProps(props2) {
-      const { id, disabled, step = 1 } = props2;
-      const triggerState = getResizeTriggerState(props2);
+      const { id, disabled } = props2;
+      const aria = getAriaValue(context.get("size"), prop("panels"), id);
+      const dragging2 = context.get("dragState")?.resizeTriggerId === id;
+      const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
       return normalize.element({
         ...parts.resizeTrigger.attrs,
         dir: prop("dir"),
         id: getResizeTriggerId(scope, id),
         role: "separator",
+        "data-id": id,
         "data-ownedby": getRootId(scope),
         tabIndex: disabled ? void 0 : 0,
-        "aria-valuenow": triggerState.value,
-        "aria-valuemin": triggerState.min,
-        "aria-valuemax": triggerState.max,
+        "aria-valuenow": aria.valueNow,
+        "aria-valuemin": aria.valueMin,
+        "aria-valuemax": aria.valueMax,
         "data-orientation": prop("orientation"),
         "aria-orientation": prop("orientation"),
-        "aria-controls": triggerState.panelIds.join(" "),
-        "data-focus": dataAttr(triggerState.focused),
+        "aria-controls": `${getPanelId(scope, aria.beforeId)} ${getPanelId(scope, aria.afterId)}`,
+        "data-focus": dataAttr(focused),
         "data-disabled": dataAttr(disabled),
         style: {
           touchAction: "none",
           userSelect: "none",
           WebkitUserSelect: "none",
           flex: "0 0 auto",
-          pointerEvents: dragging && !triggerState.focused ? "none" : void 0,
+          pointerEvents: dragging2 && !focused ? "none" : void 0,
           cursor: horizontal ? "col-resize" : "row-resize",
           [horizontal ? "minHeight" : "minWidth"]: "0"
         },
         onPointerDown(event) {
+          if (event.button !== 0) return;
           if (disabled) {
             event.preventDefault();
             return;
           }
-          send({ type: "POINTER_DOWN", id });
+          const point = getEventPoint(event);
+          send({ type: "POINTER_DOWN", id, point });
           event.currentTarget.setPointerCapture(event.pointerId);
           event.preventDefault();
           event.stopPropagation();
@@ -282,40 +374,49 @@ function connect(service, normalize) {
           send({ type: "POINTER_LEAVE", id });
         },
         onBlur() {
+          if (disabled) return;
           send({ type: "BLUR" });
         },
         onFocus() {
-          send({ type: "FOCUS", id });
-        },
-        onDoubleClick() {
           if (disabled) return;
-          send({ type: "DOUBLE_CLICK", id });
+          send({ type: "FOCUS", id });
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
-          const moveStep = getEventStep(event) * step;
+          const keyboardResizeBy = prop("keyboardResizeBy");
+          let delta = 0;
+          if (event.shiftKey) {
+            delta = 10;
+          } else if (keyboardResizeBy != null) {
+            delta = keyboardResizeBy;
+          } else {
+            delta = 1;
+          }
           const keyMap = {
             Enter() {
-              send({ type: "ENTER" });
+              send({ type: "ENTER", id });
             },
             ArrowUp() {
-              send({ type: "ARROW_UP", step: moveStep });
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? 0 : delta });
             },
             ArrowDown() {
-              send({ type: "ARROW_DOWN", step: moveStep });
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? 0 : delta });
             },
             ArrowLeft() {
-              send({ type: "ARROW_LEFT", step: moveStep });
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? -delta : 0 });
             },
             ArrowRight() {
-              send({ type: "ARROW_RIGHT", step: moveStep });
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? delta : 0 });
             },
             Home() {
-              send({ type: "HOME" });
+              send({ type: "KEYBOARD_MOVE", id, delta: -100 });
             },
             End() {
-              send({ type: "END" });
+              send({ type: "KEYBOARD_MOVE", id, delta: 100 });
+            },
+            F6() {
+              send({ type: "FOCUS.CYCLE", id, shiftKey: event.shiftKey });
             }
           };
           const key = getEventKey(event, {
@@ -332,81 +433,295 @@ function connect(service, normalize) {
     }
   };
 }
+function resizePanel({ panels, index, size }) {
+  const panel = panels[index];
+  ensure(panel, `Panel data not found for index ${index}`);
+  let { collapsedSize = 0, collapsible, maxSize = 100, minSize = 0 } = panel;
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      const halfwayPoint = (collapsedSize + minSize) / 2;
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+        size = collapsedSize;
+      } else {
+        size = minSize;
+      }
+    } else {
+      size = minSize;
+    }
+  }
+  size = Math.min(maxSize, size);
+  size = parseFloat(size.toFixed(PRECISION));
+  return size;
+}
+
+// src/utils/resize-by-delta.ts
+function resizeByDelta(props2) {
+  let { delta, initialSize, panels, pivotIndices, prevSize, trigger } = props2;
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return initialSize;
+  }
+  const nextSize = [...initialSize];
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  ensure(firstPivotIndex, "Invalid first pivot index");
+  ensure(secondPivotIndex, "Invalid second pivot index");
+  let deltaApplied = 0;
+  {
+    if (trigger === "keyboard") {
+      {
+        const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const panel = panels[index];
+        ensure(panel, `Panel data not found for index ${index}`);
+        const { collapsedSize = 0, collapsible, minSize = 0 } = panel;
+        if (collapsible) {
+          const prevSize2 = initialSize[index];
+          ensure(prevSize2, `Previous size not found for panel index ${index}`);
+          if (fuzzyNumbersEqual(prevSize2, collapsedSize)) {
+            const localDelta = minSize - prevSize2;
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+            }
+          }
+        }
+      }
+      {
+        const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        const panel = panels[index];
+        ensure(panel, `No panel data found for index ${index}`);
+        const { collapsedSize = 0, collapsible, minSize = 0 } = panel;
+        if (collapsible) {
+          const prevSize2 = initialSize[index];
+          ensure(prevSize2, `Previous size not found for panel index ${index}`);
+          if (fuzzyNumbersEqual(prevSize2, minSize)) {
+            const localDelta = prevSize2 - collapsedSize;
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+            }
+          }
+        }
+      }
+    }
+  }
+  {
+    const increment = delta < 0 ? 1 : -1;
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    let maxAvailableDelta = 0;
+    while (true) {
+      const prevSize2 = initialSize[index];
+      ensure(prevSize2, `Previous size not found for panel index ${index}`);
+      const maxSafeSize = resizePanel({
+        panels,
+        index,
+        size: 100
+      });
+      const delta2 = maxSafeSize - prevSize2;
+      maxAvailableDelta += delta2;
+      index += increment;
+      if (index < 0 || index >= panels.length) {
+        break;
+      }
+    }
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+  }
+  {
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+    let index = pivotIndex;
+    while (index >= 0 && index < panels.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+      const prevSize2 = initialSize[index];
+      ensure(prevSize2, `Previous size not found for panel index ${index}`);
+      const unsafeSize = prevSize2 - deltaRemaining;
+      const safeSize = resizePanel({ panels, index, size: unsafeSize });
+      if (!fuzzyNumbersEqual(prevSize2, safeSize)) {
+        deltaApplied += prevSize2 - safeSize;
+        nextSize[index] = safeSize;
+        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), void 0, {
+          numeric: true
+        }) >= 0) {
+          break;
+        }
+      }
+      if (delta < 0) {
+        index--;
+      } else {
+        index++;
+      }
+    }
+  }
+  if (fuzzySizeEqual(prevSize, nextSize)) {
+    return prevSize;
+  }
+  {
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    const prevSize2 = initialSize[pivotIndex];
+    ensure(prevSize2, `Previous size not found for panel index ${pivotIndex}`);
+    const unsafeSize = prevSize2 + deltaApplied;
+    const safeSize = resizePanel({ panels, index: pivotIndex, size: unsafeSize });
+    nextSize[pivotIndex] = safeSize;
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+      const pivotIndex2 = delta < 0 ? secondPivotIndex : firstPivotIndex;
+      let index = pivotIndex2;
+      while (index >= 0 && index < panels.length) {
+        const prevSize3 = nextSize[index];
+        ensure(prevSize3, `Previous size not found for panel index ${index}`);
+        const unsafeSize2 = prevSize3 + deltaRemaining;
+        const safeSize2 = resizePanel({ panels, index, size: unsafeSize2 });
+        if (!fuzzyNumbersEqual(prevSize3, safeSize2)) {
+          deltaRemaining -= safeSize2 - prevSize3;
+          nextSize[index] = safeSize2;
+        }
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+          break;
+        }
+        if (delta > 0) {
+          index--;
+        } else {
+          index++;
+        }
+      }
+    }
+  }
+  const totalSize = nextSize.reduce((total, size) => size + total, 0);
+  if (!fuzzyNumbersEqual(totalSize, 100)) {
+    return prevSize;
+  }
+  return nextSize;
+}
+function validateSizes({ size: prevSize, panels }) {
+  const nextSize = [...prevSize];
+  const nextSizeTotalSize = nextSize.reduce((accumulated, current) => accumulated + current, 0);
+  if (nextSize.length !== panels.length) {
+    throw Error(`Invalid ${panels.length} panel size: ${nextSize.map((size) => `${size}%`).join(", ")}`);
+  } else if (!fuzzyNumbersEqual(nextSizeTotalSize, 100) && nextSize.length > 0) {
+    for (let index = 0; index < panels.length; index++) {
+      const unsafeSize = nextSize[index];
+      ensure(unsafeSize, `No size data found for index ${index}`);
+      const safeSize = 100 / nextSizeTotalSize * unsafeSize;
+      nextSize[index] = safeSize;
+    }
+  }
+  let remainingSize = 0;
+  for (let index = 0; index < panels.length; index++) {
+    const unsafeSize = nextSize[index];
+    ensure(unsafeSize, `No size data found for index ${index}`);
+    const safeSize = resizePanel({ panels, index, size: unsafeSize });
+    if (unsafeSize != safeSize) {
+      remainingSize += unsafeSize - safeSize;
+      nextSize[index] = safeSize;
+    }
+  }
+  if (!fuzzyNumbersEqual(remainingSize, 0)) {
+    for (let index = 0; index < panels.length; index++) {
+      const prevSize2 = nextSize[index];
+      ensure(prevSize2, `No size data found for index ${index}`);
+      const unsafeSize = prevSize2 + remainingSize;
+      const safeSize = resizePanel({ panels, index, size: unsafeSize });
+      if (prevSize2 !== safeSize) {
+        remainingSize -= safeSize - prevSize2;
+        nextSize[index] = safeSize;
+        if (fuzzyNumbersEqual(remainingSize, 0)) {
+          break;
+        }
+      }
+    }
+  }
+  return nextSize;
+}
+
+// src/splitter.machine.ts
 var machine = createMachine({
   props({ props: props2 }) {
+    ensureProps(props2, ["panels"]);
     return {
       orientation: "horizontal",
       defaultSize: [],
-      ...props2
+      dir: "ltr",
+      ...props2,
+      panels: sortPanels(props2.panels)
     };
   },
   initialState() {
     return "idle";
   },
-  context({ prop, bindable, getContext }) {
+  context({ prop, bindable, getContext, getRefs }) {
     return {
-      activeResizeId: bindable(() => ({
-        defaultValue: null
-      })),
       size: bindable(() => ({
-        defaultValue: prop("defaultSize"),
         value: prop("size"),
-        hash(a) {
-          return a.map((panel) => `${panel.id}:${panel.size}`).join(",");
+        defaultValue: prop("defaultSize"),
+        isEqual(a, b) {
+          return b != null && fuzzySizeEqual(a, b);
         },
         onChange(value) {
-          const context = getContext();
-          prop("onSizeChange")?.({
+          const ctx = getContext();
+          const refs = getRefs();
+          const sizesBeforeCollapse = refs.get("panelSizeBeforeCollapse");
+          const expandToSizes = Object.fromEntries(sizesBeforeCollapse.entries());
+          const resizeTriggerId = ctx.get("dragState")?.resizeTriggerId ?? null;
+          const layout = getPanelLayout(prop("panels"));
+          prop("onResize")?.({
             size: value,
-            activeHandleId: context.get("activeResizeId")
+            layout,
+            resizeTriggerId,
+            expandToSizes
           });
         }
       })),
-      activeResizeState: bindable(() => ({
-        defaultValue: { isAtMin: false, isAtMax: false }
+      dragState: bindable(() => ({
+        defaultValue: null
+      })),
+      keyboardState: bindable(() => ({
+        defaultValue: null
       }))
     };
   },
-  refs({ context }) {
+  watch({ track, action, prop }) {
+    track([() => serializePanels(prop("panels"))], () => {
+      action(["syncSize"]);
+    });
+  },
+  refs() {
     return {
-      previousPanels: getNormalizedPanels(context.get("size"))
+      panelSizeBeforeCollapse: /* @__PURE__ */ new Map(),
+      prevDelta: 0,
+      panelIdToLastNotifiedSizeMap: /* @__PURE__ */ new Map()
     };
   },
-  watch({ track, action, context }) {
-    track([() => context.hash("size")], () => {
-      action(["setActiveResizeState"]);
-    });
-  },
   computed: {
-    isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
-    panels: ({ context }) => getNormalizedPanels(context.get("size"))
+    horizontal({ prop }) {
+      return prop("orientation") === "horizontal";
+    }
   },
   on: {
     "SIZE.SET": {
-      actions: ["setPanelSize"]
+      actions: ["setSize"]
+    },
+    "PANEL.COLLAPSE": {
+      actions: ["collapsePanel"]
+    },
+    "PANEL.EXPAND": {
+      actions: ["expandPanel"]
     },
-    "SIZES.SET": {
-      actions: ["setPanelSizes"]
+    "PANEL.RESIZE": {
+      actions: ["resizePanel"]
     }
   },
+  entry: ["syncSize"],
   states: {
     idle: {
-      entry: ["clearActiveHandleId"],
+      entry: ["clearDraggingState", "clearKeyboardState"],
       on: {
         POINTER_OVER: {
           target: "hover:temp",
-          actions: ["setActiveHandleId"]
+          actions: ["setKeyboardState"]
         },
         FOCUS: {
           target: "focused",
-          actions: ["setActiveHandleId"]
+          actions: ["setKeyboardState"]
         },
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setActiveHandleId"]
-        },
-        DOUBLE_CLICK: {
-          actions: ["resetStartPanel", "setPreviousPanels"]
+          actions: ["setDraggingState"]
         }
       }
     },
@@ -418,7 +733,7 @@ var machine = createMachine({
         },
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setActiveHandleId"]
+          actions: ["setDraggingState"]
         },
         POINTER_LEAVE: {
           target: "idle"
@@ -429,7 +744,8 @@ var machine = createMachine({
       tags: ["focus"],
       on: {
         POINTER_DOWN: {
-          target: "dragging"
+          target: "dragging",
+          actions: ["setDraggingState"]
         },
         POINTER_LEAVE: {
           target: "idle"
@@ -442,52 +758,32 @@ var machine = createMachine({
         BLUR: {
           target: "idle"
         },
+        ENTER: {
+          actions: ["collapseOrExpandPanel"]
+        },
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setActiveHandleId"]
-        },
-        ARROW_LEFT: {
-          guard: "isHorizontal",
-          actions: ["shrinkStartPanel", "setPreviousPanels"]
-        },
-        ARROW_RIGHT: {
-          guard: "isHorizontal",
-          actions: ["expandStartPanel", "setPreviousPanels"]
+          actions: ["setDraggingState"]
         },
-        ARROW_UP: {
-          guard: "isVertical",
-          actions: ["shrinkStartPanel", "setPreviousPanels"]
+        KEYBOARD_MOVE: {
+          actions: ["setKeyboardValue"]
         },
-        ARROW_DOWN: {
-          guard: "isVertical",
-          actions: ["expandStartPanel", "setPreviousPanels"]
-        },
-        ENTER: [
-          {
-            guard: "isStartPanelAtMax",
-            actions: ["setStartPanelToMin", "setPreviousPanels"]
-          },
-          { actions: ["setStartPanelToMax", "setPreviousPanels"] }
-        ],
-        HOME: {
-          actions: ["setStartPanelToMin", "setPreviousPanels"]
-        },
-        END: {
-          actions: ["setStartPanelToMax", "setPreviousPanels"]
+        "FOCUS.CYCLE": {
+          actions: ["focusNextResizeTrigger"]
         }
       }
     },
     dragging: {
       tags: ["focus"],
-      entry: ["focusResizeHandle"],
       effects: ["trackPointerMove"],
+      entry: ["invokeOnResizeStart"],
       on: {
         POINTER_MOVE: {
-          actions: ["setPointerValue", "setGlobalCursor", "invokeOnResize"]
+          actions: ["setPointerValue", "setGlobalCursor"]
         },
         POINTER_UP: {
-          target: "focused",
-          actions: ["setPreviousPanels", "clearGlobalCursor", "blurResizeHandle", "invokeOnResizeEnd"]
+          target: "idle",
+          actions: ["invokeOnResizeEnd", "clearGlobalCursor"]
         }
       }
     }
@@ -511,178 +807,310 @@ var machine = createMachine({
         });
       }
     },
-    guards: {
-      isStartPanelAtMin: ({ context }) => context.get("activeResizeState").isAtMin,
-      isStartPanelAtMax: ({ context }) => context.get("activeResizeState").isAtMax,
-      isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
-      isVertical: ({ prop }) => prop("orientation") !== "horizontal"
-    },
     actions: {
-      setGlobalCursor({ context, scope, computed }) {
-        const activeState = context.get("activeResizeState");
-        const isHorizontal = computed("isHorizontal");
-        setupGlobalCursor(scope, activeState, isHorizontal);
-      },
-      clearGlobalCursor({ scope }) {
-        removeGlobalCursor(scope);
+      setSize(params) {
+        const { context, event, prop } = params;
+        const unsafeSize = event.size;
+        const prevSize = context.get("size");
+        const panels = prop("panels");
+        const safeSize = validateSizes({
+          size: unsafeSize,
+          panels
+        });
+        if (!isEqual(prevSize, safeSize)) {
+          setSize(params, safeSize);
+        }
       },
-      invokeOnResize({ context, prop }) {
-        prop("onSizeChange")?.({
-          size: Array.from(context.get("size")),
-          activeHandleId: context.get("activeResizeId")
+      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,
+          panels
         });
+        if (!isEqual(prevSize, nextSize)) {
+          context.set("size", nextSize);
+        }
       },
-      invokeOnResizeEnd({ context, prop }) {
-        prop("onSizeChangeEnd")?.({
-          size: Array.from(context.get("size")),
-          activeHandleId: context.get("activeResizeId")
+      setDraggingState({ context, event, prop, scope }) {
+        const orientation = prop("orientation");
+        const size = context.get("size");
+        const resizeTriggerId = event.id;
+        const panelGroupEl = getRootEl(scope);
+        if (!panelGroupEl) return;
+        const handleElement = getResizeTriggerEl(scope, resizeTriggerId);
+        ensure(handleElement, `Drag handle element not found for id "${resizeTriggerId}"`);
+        const initialCursorPosition = orientation === "horizontal" ? event.point.x : event.point.y;
+        context.set("dragState", {
+          resizeTriggerId: event.id,
+          resizeTriggerRect: handleElement.getBoundingClientRect(),
+          initialCursorPosition,
+          initialSize: size
         });
       },
-      setActiveHandleId({ context, event }) {
-        context.set("activeResizeId", event.id);
+      clearDraggingState({ context }) {
+        context.set("dragState", null);
       },
-      clearActiveHandleId({ context }) {
-        context.set("activeResizeId", null);
+      setKeyboardState({ context, event }) {
+        context.set("keyboardState", {
+          resizeTriggerId: event.id
+        });
       },
-      setPanelSize({ context, event }) {
-        const { id, size } = event;
-        context.set(
-          "size",
-          (prev) => prev.map((panel) => {
-            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
-            return panel.id === id ? { ...panel, size: panelSize } : panel;
-          })
-        );
+      clearKeyboardState({ context }) {
+        context.set("keyboardState", null);
       },
-      setPanelSizes({ context, event }) {
-        context.set("size", event.sizes);
+      collapsePanel(params) {
+        const { context, prop, event, refs } = params;
+        const prevSize = context.get("size");
+        const panels = prop("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}"`);
+          if (!fuzzyNumbersEqual(panelSize, collapsedSize)) {
+            refs.get("panelSizeBeforeCollapse").set(panel.id, panelSize);
+            const isLastPanel = findPanelDataIndex(panels, panel) === panels.length - 1;
+            const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
+            const nextSize = resizeByDelta({
+              delta,
+              initialSize: prevSize,
+              panels,
+              pivotIndices,
+              prevSize,
+              trigger: "imperative-api"
+            });
+            if (!isEqual(prevSize, nextSize)) {
+              setSize(params, nextSize);
+            }
+          }
+        }
       },
-      setStartPanelToMin({ context, computed }) {
-        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
-        if (!bounds) return;
-        const { before, after } = bounds;
-        context.set("size", (prev) => {
-          const next = prev.slice();
-          next[before.index].size = before.min;
-          next[after.index].size = after.min;
-          return next;
-        });
+      expandPanel(params) {
+        const { context, prop, event, refs } = params;
+        const panels = prop("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}"`);
+        if (panel.collapsible) {
+          const {
+            collapsedSize = 0,
+            panelSize = 0,
+            minSize: minSizeFromProps = 0,
+            pivotIndices
+          } = panelDataHelper(panels, panel, prevSize);
+          const minSize = event.minSize ?? minSizeFromProps;
+          if (fuzzyNumbersEqual(panelSize, collapsedSize)) {
+            const prevPanelSize = refs.get("panelSizeBeforeCollapse").get(panel.id);
+            const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
+            const isLastPanel = findPanelDataIndex(panels, panel) === panels.length - 1;
+            const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+            const nextSize = resizeByDelta({
+              delta,
+              initialSize: prevSize,
+              panels,
+              pivotIndices,
+              prevSize,
+              trigger: "imperative-api"
+            });
+            if (!isEqual(prevSize, nextSize)) {
+              setSize(params, nextSize);
+            }
+          }
+        }
       },
-      setStartPanelToMax({ context, computed }) {
-        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
-        if (!bounds) return;
-        const { before, after } = bounds;
-        context.set("size", (prev) => {
-          const next = prev.slice();
-          next[before.index].size = before.max;
-          next[after.index].size = after.max;
-          return next;
+      resizePanel(params) {
+        const { context, prop, event } = params;
+        const prevSize = context.get("size");
+        const panels = prop("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}"`);
+        const isLastPanel = findPanelDataIndex(panels, panel) === panels.length - 1;
+        const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
+        const nextSize = resizeByDelta({
+          delta,
+          initialSize: prevSize,
+          panels,
+          pivotIndices,
+          prevSize,
+          trigger: "imperative-api"
         });
+        if (!isEqual(prevSize, nextSize)) {
+          setSize(params, nextSize);
+        }
       },
-      expandStartPanel({ context, event, computed }) {
-        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
-        if (!bounds) return;
-        const { before, after } = bounds;
-        context.set("size", (prev) => {
-          const next = prev.slice();
-          next[before.index].size = before.up(event.step);
-          next[after.index].size = after.down(event.step);
-          return next;
+      setPointerValue(params) {
+        const { context, event, prop, scope } = params;
+        const dragState = context.get("dragState");
+        if (!dragState) return;
+        const { resizeTriggerId, initialSize, initialCursorPosition } = dragState;
+        const panels = prop("panels");
+        const panelGroupElement = getRootEl(scope);
+        ensure(panelGroupElement, `Panel group element not found`);
+        const pivotIndices = resizeTriggerId.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();
+        const groupSizeInPixels = horizontal ? groupRect.width : groupRect.height;
+        const offsetPixels = cursorPosition - initialCursorPosition;
+        const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
+        const prevSize = context.get("size");
+        const nextSize = resizeByDelta({
+          delta: offsetPercentage,
+          initialSize: initialSize ?? prevSize,
+          panels,
+          pivotIndices,
+          prevSize,
+          trigger: "mouse-or-touch"
         });
+        if (!isEqual(prevSize, nextSize)) {
+          setSize(params, nextSize);
+        }
       },
-      shrinkStartPanel({ context, event, computed }) {
-        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
-        if (!bounds) return;
-        const { before, after } = bounds;
-        context.set("size", (prev) => {
-          const next = prev.slice();
-          next[before.index].size = before.down(event.step);
-          next[after.index].size = after.up(event.step);
-          return next;
+      setKeyboardValue(params) {
+        const { context, event, prop } = params;
+        const panelDataArray = prop("panels");
+        const resizeTriggerId = event.id;
+        const delta = event.delta;
+        const pivotIndices = resizeTriggerId.split(":").map((id) => panelDataArray.findIndex((panelData) => panelData.id === id));
+        const prevSize = context.get("size");
+        const nextSize = resizeByDelta({
+          delta,
+          initialSize: prevSize,
+          panels: panelDataArray,
+          pivotIndices,
+          prevSize,
+          trigger: "keyboard"
         });
+        if (!isEqual(prevSize, nextSize)) {
+          setSize(params, nextSize);
+        }
       },
-      resetStartPanel({ context, computed }) {
-        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
-        if (!bounds) return;
-        const { before, after } = bounds;
-        const initialSize = context.initial("size");
-        context.set("size", (prev) => {
-          const next = prev.slice();
-          next[before.index].size = initialSize[before.index].size;
-          next[after.index].size = initialSize[after.index].size;
-          return next;
+      invokeOnResizeEnd({ context, prop }) {
+        queueMicrotask(() => {
+          const dragState = context.get("dragState");
+          prop("onResizeEnd")?.({
+            size: context.get("size"),
+            resizeTriggerId: dragState?.resizeTriggerId ?? null
+          });
         });
       },
-      focusResizeHandle({ scope, context }) {
-        raf(() => {
-          const activeId = context.get("activeResizeId");
-          if (!activeId) return;
-          getResizeTriggerEl(scope, activeId)?.focus({ preventScroll: true });
+      invokeOnResizeStart({ prop }) {
+        queueMicrotask(() => {
+          prop("onResizeStart")?.();
         });
       },
-      blurResizeHandle({ scope, context }) {
-        raf(() => {
-          const activeId = context.get("activeResizeId");
-          if (!activeId) return;
-          getResizeTriggerEl(scope, activeId)?.blur();
-        });
+      collapseOrExpandPanel(params) {
+        const { context, prop } = params;
+        const panelDataArray = prop("panels");
+        const sizes = context.get("size");
+        const resizeTriggerId = context.get("keyboardState")?.resizeTriggerId;
+        const [idBefore, idAfter] = resizeTriggerId?.split(":") ?? [];
+        const index = panelDataArray.findIndex((panelData2) => panelData2.id === idBefore);
+        if (index === -1) return;
+        const panelData = panelDataArray[index];
+        ensure(panelData, `No panel data found for index ${index}`);
+        const size = sizes[index];
+        const { collapsedSize = 0, collapsible, minSize = 0 } = panelData;
+        if (size != null && collapsible) {
+          const pivotIndices = [idBefore, idAfter].map(
+            (id) => panelDataArray.findIndex((panelData2) => panelData2.id === id)
+          );
+          const nextSize = resizeByDelta({
+            delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
+            initialSize: context.initial("size"),
+            panels: panelDataArray,
+            pivotIndices,
+            prevSize: sizes,
+            trigger: "keyboard"
+          });
+          if (!isEqual(sizes, nextSize)) {
+            setSize(params, nextSize);
+          }
+        }
       },
-      setPreviousPanels({ refs, computed }) {
-        refs.set("previousPanels", computed("panels").slice());
+      setGlobalCursor({ context, scope, prop }) {
+        const dragState = context.get("dragState");
+        if (!dragState) return;
+        const panels = prop("panels");
+        const horizontal = prop("orientation") === "horizontal";
+        const [idBefore] = dragState.resizeTriggerId.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 isAtMin = fuzzyNumbersEqual(aria.valueNow, aria.valueMin) || fuzzyNumbersEqual(aria.valueNow, panel.collapsedSize);
+        const isAtMax = fuzzyNumbersEqual(aria.valueNow, aria.valueMax);
+        const cursorState = { isAtMin, isAtMax };
+        setupGlobalCursor(scope, cursorState, horizontal, prop("nonce"));
       },
-      setActiveResizeState({ context, computed }) {
-        const panels = getPanelBounds(computed("panels"), context.get("activeResizeId"));
-        if (!panels) return;
-        const { before } = panels;
-        context.set("activeResizeState", {
-          isAtMin: before.isAtMin,
-          isAtMax: before.isAtMax
-        });
+      clearGlobalCursor({ scope }) {
+        removeGlobalCursor(scope);
       },
-      setPointerValue({ context, event, prop, scope, computed }) {
-        const panels = getHandlePanels(computed("panels"), context.get("activeResizeId"));
-        const bounds = getHandleBounds(computed("panels"), context.get("activeResizeId"));
-        if (!panels || !bounds) return;
-        const rootEl = getRootEl(scope);
-        if (!rootEl) return;
-        const relativePoint = getRelativePoint(event.point, rootEl);
-        const percentValue = relativePoint.getPercentValue({
-          dir: prop("dir"),
-          orientation: prop("orientation")
-        });
-        let pointValue = percentValue * 100;
-        context.set("activeResizeState", {
-          isAtMin: pointValue < bounds.min,
-          isAtMax: pointValue > bounds.max
-        });
-        pointValue = clamp(pointValue, bounds.min, bounds.max);
-        const { before, after } = panels;
-        const offset = pointValue - before.end;
-        context.set("size", (prev) => {
-          const next = prev.slice();
-          next[before.index].size = before.size + offset;
-          next[after.index].size = after.size - offset;
-          return next;
-        });
+      focusNextResizeTrigger({ event, scope }) {
+        const resizeTriggers = getResizeTriggerEls(scope);
+        const index = resizeTriggers.findIndex((el) => el.dataset.id === event.id);
+        const handleEl = event.shiftKey ? prev(resizeTriggers, index) : next(resizeTriggers, index);
+        handleEl?.focus();
       }
     }
   }
 });
+function setSize(params, sizes) {
+  const { refs, prop, context } = params;
+  const panelsArray = prop("panels");
+  const onCollapse = prop("onCollapse");
+  const onExpand = prop("onExpand");
+  const panelIdToLastNotifiedSizeMap = refs.get("panelIdToLastNotifiedSizeMap");
+  context.set("size", sizes);
+  sizes.forEach((size, index) => {
+    const panelData = panelsArray[index];
+    ensure(panelData, `Panel data not found for index ${index}`);
+    const { collapsedSize = 0, collapsible, id: panelId } = panelData;
+    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)) {
+          onExpand?.({ panelId, size });
+        }
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual(size, collapsedSize)) {
+          onCollapse?.({ panelId, size });
+        }
+      }
+    }
+  });
+}
 var props = createProps()([
   "dir",
   "getRootNode",
   "id",
   "ids",
-  "onSizeChange",
-  "onSizeChangeEnd",
+  "onResize",
+  "onResizeStart",
+  "onResizeEnd",
+  "onCollapse",
+  "onExpand",
   "orientation",
   "size",
-  "defaultSize"
+  "defaultSize",
+  "panels",
+  "keyboardResizeBy",
+  "nonce"
 ]);
 var splitProps = createSplitProps(props);
-var panelProps = createProps()(["id", "snapSize"]);
+var panelProps = createProps()(["id"]);
 var splitPanelProps = createSplitProps(panelProps);
-var resizeTriggerProps = createProps()(["disabled", "id", "step"]);
+var resizeTriggerProps = createProps()(["disabled", "id"]);
 var splitResizeTriggerProps = createSplitProps(resizeTriggerProps);
 
-export { anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
+export { anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };