@hina-ui/vue 1.7.5 → 1.7.7

package/dist/shared/primitives/slider/index.ts

@@ -0,0 +1,183 @@
+export function clamp(
+  value: number,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+) {
+  return Math.min(max, Math.max(min, value))
+}
+
+export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {
+  const nextValues = [...prevValues]
+  nextValues[atIndex] = nextValue
+  return nextValues.sort((a, b) => a - b)
+}
+
+export function convertValueToPercentage(value: number, min: number, max: number) {
+  const maxSteps = max - min
+  const percentPerStep = 100 / maxSteps
+  const percentage = percentPerStep * (value - min)
+  return clamp(percentage, 0, 100)
+}
+
+export function getLabel(index: number, totalValues: number) {
+  if (totalValues > 2) return `Value ${index + 1} of ${totalValues}`
+  if (totalValues === 2) return ['Minimum', 'Maximum'][index]
+  return undefined
+}
+
+export function getClosestValueIndex(values: number[], nextValue: number) {
+  if (values.length === 1) return 0
+  const distances = values.map(value => Math.abs(value - nextValue))
+  const closestDistance = Math.min(...distances)
+  return distances.indexOf(closestDistance)
+}
+
+export function linearScale(input: readonly [number, number], output: readonly [number, number]) {
+  return (value: number) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0]
+    const ratio = (output[1] - output[0]) / (input[1] - input[0])
+    return output[0] + ratio * (value - input[0])
+  }
+}
+
+export function getThumbInBoundsOffset(width: number, left: number, direction: number) {
+  const halfWidth = width / 2
+  const halfPercent = 50
+  const offset = linearScale([0, halfPercent], [0, halfWidth])
+  return (halfWidth - offset(left) * direction) * direction
+}
+
+function getStepsBetweenValues(values: number[]) {
+  return values.slice(0, -1).map((value, index) => values[index + 1]! - value)
+}
+
+export function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values)
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)
+    return actualMinStepsBetweenValues >= minStepsBetweenValues
+  }
+  return true
+}
+
+export function getDecimalCount(value: number) {
+  return (String(value).split('.')[1] || '').length
+}
+
+export function roundValue(value: number, decimalCount: number) {
+  const rounder = 10 ** decimalCount
+  return Math.round(value * rounder) / rounder
+}
+
+export const PAGE_KEYS = ['PageUp', 'PageDown']
+export const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+export const BACK_KEYS: Record<string, string[]> = {
+  'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
+  'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],
+  'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
+  'from-top': ['Home', 'PageUp', 'ArrowUp', 'ArrowLeft'],
+}
+
+export function resolveSliderUpdate(
+  values: number[],
+  value: number,
+  atIndex: number,
+  options: { min: number; max: number; step: number; minStepsBetweenThumbs: number },
+) {
+  const { min, max, step, minStepsBetweenThumbs } = options
+  const snapped = roundValue(Math.round((value - min) / step) * step + min, getDecimalCount(step))
+  const nextValue = clamp(snapped, min, max)
+  const nextValues = getNextSortedValues(values, nextValue, atIndex)
+  if (!hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) return undefined
+  return { values: nextValues, index: nextValues.indexOf(nextValue) }
+}
+
+export function sliderStepAmount(event: { key: string; shiftKey: boolean }, step: number) {
+  const skip = PAGE_KEYS.includes(event.key) || (event.shiftKey && ARROW_KEYS.includes(event.key))
+  return step * (skip ? 10 : 1)
+}
+
+export type SliderOrientation = 'horizontal' | 'vertical'
+export type SliderThumbAlignment = 'contain' | 'overflow'
+
+export function sliderOrientationState(
+  orientation: SliderOrientation,
+  dir: 'ltr' | 'rtl' | undefined,
+  inverted: boolean,
+  alignment: SliderThumbAlignment,
+) {
+  if (orientation === 'horizontal') {
+    const fromLeft = (dir !== 'rtl' && !inverted) || (dir !== 'ltr' && inverted)
+    return {
+      startEdge: fromLeft ? 'left' : 'right',
+      endEdge: fromLeft ? 'right' : 'left',
+      direction: fromLeft ? 1 : -1,
+      size: 'width',
+      increasing: fromLeft,
+      slideDirection: fromLeft ? 'from-left' : 'from-right',
+      thumbTransform:
+        !fromLeft && alignment === 'overflow' ? 'translateX(50%)' : 'translateX(-50%)',
+    } as const
+  }
+  const fromBottom = !inverted
+  return {
+    startEdge: fromBottom ? 'bottom' : 'top',
+    endEdge: fromBottom ? 'top' : 'bottom',
+    direction: fromBottom ? 1 : -1,
+    size: 'height',
+    increasing: !fromBottom,
+    slideDirection: fromBottom ? 'from-bottom' : 'from-top',
+    thumbTransform:
+      !fromBottom && alignment === 'overflow' ? 'translateY(-50%)' : 'translateY(50%)',
+  } as const
+}
+
+export function sliderStepDirection(slideDirection: string, key: string) {
+  return BACK_KEYS[slideDirection]!.includes(key) ? -1 : 1
+}
+
+export function createSlideGeometry(axis: 'x' | 'y') {
+  let offset: number | undefined
+  let rect: DOMRect | undefined
+  return {
+    value(
+      event: { clientX: number; clientY: number },
+      slideStart: boolean,
+      options: {
+        element: HTMLElement
+        thumb: HTMLElement
+        contain: boolean
+        output: [number, number]
+      },
+    ) {
+      const { element, thumb, contain, output } = options
+      const bounds = rect || element.getBoundingClientRect()
+      const thumbSize = contain ? (axis === 'x' ? thumb.clientWidth : thumb.clientHeight) : 0
+      const client = axis === 'x' ? event.clientX : event.clientY
+      if (!offset && !slideStart && contain) {
+        const thumbRect = thumb.getBoundingClientRect()
+        offset = client - (axis === 'x' ? thumbRect.left : thumbRect.top)
+      }
+      const start = axis === 'x' ? bounds.left : bounds.top
+      const length = axis === 'x' ? bounds.width : bounds.height
+      const scale = linearScale([0, length - thumbSize], output)
+      rect = bounds
+      const position = slideStart ? client - start - thumbSize / 2 : client - start - (offset ?? 0)
+      return scale(position)
+    },
+    reset() {
+      rect = undefined
+      offset = undefined
+    },
+  }
+}
+
+export function sliderThumbOffset(
+  alignment: SliderThumbAlignment,
+  size: number,
+  percent: number,
+  direction: number,
+) {
+  if (alignment === 'overflow' || !size) return 0
+  return getThumbInBoundsOffset(size, percent, direction)
+}

package/dist/shared/primitives/splitter/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/splitter/arrays.ts

@@ -0,0 +1,6 @@
+export function areEqual<T>(arrayA: T[], arrayB: T[]): boolean {
+  if (arrayA.length !== arrayB.length) return false
+  for (let index = 0; index < arrayA.length; index++)
+    if (arrayA[index] !== arrayB[index]) return false
+  return true
+}

package/dist/shared/primitives/splitter/assert.ts

@@ -0,0 +1,9 @@
+export function assert(
+  expectedCondition: unknown,
+  message = 'Assertion failed!',
+): asserts expectedCondition {
+  if (!expectedCondition) {
+    console.error(message)
+    throw new Error(message)
+  }
+}

package/dist/shared/primitives/splitter/calculate.ts

@@ -0,0 +1,139 @@
+import { assert } from './assert'
+import { getPanelGroupElement, getResizeHandleElement } from './dom'
+import { getResizeEventCursorPosition, isKeyDown } from './events'
+import type { Direction, DragState, PanelData, ResizeEvent } from './types'
+
+function calculateDragOffsetPercentage(
+  event: ResizeEvent,
+  dragHandleId: string,
+  direction: Direction,
+  initialDragState: DragState,
+  panelGroupElement: ParentNode,
+): number {
+  const isHorizontal = direction === 'horizontal'
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement)
+  assert(handleElement)
+  const groupId = handleElement.getAttribute('data-panel-group-id')
+  assert(groupId)
+  const { initialCursorPosition } = initialDragState
+  const cursorPosition = getResizeEventCursorPosition(direction, event)
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement)
+  assert(groupElement)
+  const groupRect = groupElement.getBoundingClientRect()
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height
+  const offsetPixels = cursorPosition - initialCursorPosition
+  const offsetPercentage = (offsetPixels / groupSizeInPixels) * 100
+  return offsetPercentage
+}
+
+export function calculateDeltaPercentage(
+  event: ResizeEvent,
+  dragHandleId: string,
+  direction: Direction,
+  initialDragState: DragState | null,
+  keyboardResizeBy: number | null,
+  panelGroupElement: ParentNode,
+): number {
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === 'horizontal'
+    let delta = 0
+    if (event.shiftKey) delta = 100
+    else delta = keyboardResizeBy ?? 10
+    let movement = 0
+    switch (event.key) {
+      case 'ArrowDown':
+        movement = isHorizontal ? 0 : delta
+        break
+      case 'ArrowLeft':
+        movement = isHorizontal ? -delta : 0
+        break
+      case 'ArrowRight':
+        movement = isHorizontal ? delta : 0
+        break
+      case 'ArrowUp':
+        movement = isHorizontal ? 0 : -delta
+        break
+      case 'End':
+        movement = 100
+        break
+      case 'Home':
+        movement = -100
+        break
+    }
+    return movement
+  } else {
+    if (initialDragState == null) return 0
+    return calculateDragOffsetPercentage(
+      event,
+      dragHandleId,
+      direction,
+      initialDragState,
+      panelGroupElement,
+    )
+  }
+}
+
+export function calculateAriaValues({
+  layout,
+  panelsArray,
+  pivotIndices,
+}: {
+  layout: number[]
+  panelsArray: PanelData[]
+  pivotIndices: number[]
+}) {
+  let currentMinSize = 0
+  let currentMaxSize = 100
+  let totalMinSize = 0
+  let totalMaxSize = 0
+  const firstIndex = pivotIndices[0]
+  assert(firstIndex != null)
+  panelsArray.forEach((panelData, index) => {
+    const { constraints } = panelData
+    const { maxSize = 100, minSize = 0 } = constraints
+    if (index === firstIndex) {
+      currentMinSize = minSize
+      currentMaxSize = maxSize
+    } else {
+      totalMinSize += minSize
+      totalMaxSize += maxSize
+    }
+  })
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize)
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize)
+  const valueNow = layout[firstIndex]
+  return { valueMax, valueMin, valueNow }
+}
+
+export function calculateUnsafeDefaultLayout({
+  panelDataArray,
+}: {
+  panelDataArray: PanelData[]
+}): number[] {
+  const layout = Array.from<number>({ length: panelDataArray.length })
+  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints)
+  let numPanelsWithSizes = 0
+  let remainingSize = 100
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index]
+    assert(panelConstraints)
+    const { defaultSize } = panelConstraints
+    if (defaultSize != null) {
+      numPanelsWithSizes++
+      layout[index] = defaultSize
+      remainingSize -= defaultSize
+    }
+  }
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index]
+    assert(panelConstraints)
+    const { defaultSize } = panelConstraints
+    if (defaultSize != null) continue
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes
+    const size = remainingSize / numRemainingPanels
+    numPanelsWithSizes++
+    layout[index] = size
+    remainingSize -= size
+  }
+  return layout
+}

package/dist/shared/primitives/splitter/callPanelCallbacks.ts

@@ -0,0 +1,40 @@
+import { assert } from './assert'
+import { fuzzyNumbersEqual } from './compare'
+import type { PanelData } from './types'
+
+export function callPanelCallbacks(
+  panelsArray: PanelData[],
+  layout: number[],
+  panelIdToLastNotifiedSizeMap: Record<string, number>,
+  groupSizeInPixels: number | null,
+) {
+  layout.forEach((size, index) => {
+    const panelData = panelsArray[index]
+    assert(panelData)
+    const { callbacks, constraints, id: panelId } = panelData
+    const { collapsedSize = 0, collapsible, sizeUnit } = constraints
+    let displaySize = size
+    if (sizeUnit === 'px' && groupSizeInPixels != null)
+      displaySize = (size / 100) * groupSizeInPixels
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId]
+    if (lastNotifiedSize == null || !fuzzyNumbersEqual(displaySize, lastNotifiedSize)) {
+      panelIdToLastNotifiedSizeMap[panelId] = displaySize
+      const { onCollapse, onExpand, onResize } = callbacks
+      if (onResize) onResize(displaySize, lastNotifiedSize)
+      if (collapsible && (onCollapse || onExpand)) {
+        if (
+          onExpand &&
+          (lastNotifiedSize == null || fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          !fuzzyNumbersEqual(displaySize, collapsedSize)
+        )
+          onExpand()
+        if (
+          onCollapse &&
+          (lastNotifiedSize == null || !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          fuzzyNumbersEqual(displaySize, collapsedSize)
+        )
+          onCollapse()
+      }
+    }
+  })
+}

package/dist/shared/primitives/splitter/compare.ts

@@ -0,0 +1,13 @@
+import { PRECISION } from './constants'
+
+export function fuzzyCompareNumbers(actual: number, expected: number, fractionDigits = PRECISION) {
+  actual = Number.parseFloat(actual.toFixed(fractionDigits))
+  expected = Number.parseFloat(expected.toFixed(fractionDigits))
+  const delta = actual - expected
+  if (delta === 0) return 0
+  else return delta > 0 ? 1 : -1
+}
+
+export function fuzzyNumbersEqual(actual: number, expected: number, fractionDigits?: number) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0
+}

package/dist/shared/primitives/splitter/constants.ts

@@ -0,0 +1 @@
+export const PRECISION = 10

package/dist/shared/primitives/splitter/debounce.ts

@@ -0,0 +1,10 @@
+export function debounce<T extends unknown[]>(callback: (...args: T) => void, durationMs = 10) {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+  const callable = (...args: T) => {
+    if (timeoutId !== null) clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      callback(...args)
+    }, durationMs)
+  }
+  return callable
+}

package/dist/shared/primitives/splitter/dom.ts

@@ -0,0 +1,64 @@
+const isBrowser = typeof document !== 'undefined'
+
+export function getPanelGroupElement(
+  id: string,
+  rootElement: ParentNode | HTMLElement = document,
+): HTMLElement | null {
+  if (!isBrowser) return null
+  if (rootElement instanceof HTMLElement && rootElement?.dataset?.panelGroupId === id)
+    return rootElement
+  const element = rootElement.querySelector<HTMLElement>(
+    `[data-panel-group][data-panel-group-id="${id}"]`,
+  )
+  if (element) return element
+  return null
+}
+
+export function getResizeHandleElement(
+  id: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement | null {
+  if (!isBrowser) return null
+  const element = scope.querySelector<HTMLElement>(`[data-panel-resize-handle-id="${id}"]`)
+  if (element) return element
+  return null
+}
+
+export function getResizeHandleElementIndex(
+  groupId: string,
+  id: string,
+  scope: ParentNode | HTMLElement = document,
+): number | null {
+  if (!isBrowser) return null
+  const handles = getResizeHandleElementsForGroup(groupId, scope)
+  const index = handles.findIndex(
+    handle => handle.getAttribute('data-panel-resize-handle-id') === id,
+  )
+  return index ?? null
+}
+
+export function getResizeHandleElementsForGroup(
+  groupId: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement[] {
+  if (!isBrowser) return []
+  return Array.from(
+    scope.querySelectorAll<HTMLElement>(
+      `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`,
+    ),
+  )
+}
+
+export function getResizeHandlePanelIds(
+  groupId: string,
+  handleId: string,
+  panelsArray: { id: string }[],
+  scope: ParentNode | HTMLElement = document,
+): [idBefore: string | null, idAfter: string | null] {
+  const handle = getResizeHandleElement(handleId, scope)
+  const handles = getResizeHandleElementsForGroup(groupId, scope)
+  const index = handle ? handles.indexOf(handle) : -1
+  const idBefore = panelsArray[index]?.id ?? null
+  const idAfter = panelsArray[index + 1]?.id ?? null
+  return [idBefore, idAfter]
+}

package/dist/shared/primitives/splitter/events.ts

@@ -0,0 +1,29 @@
+import type { Direction, ResizeEvent } from './types'
+
+export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
+  return event.type === 'keydown'
+}
+
+export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
+  return event.type.startsWith('mouse')
+}
+
+export function isTouchEvent(event: ResizeEvent): event is TouchEvent {
+  return event.type.startsWith('touch')
+}
+
+export function getResizeEventCoordinates(event: ResizeEvent) {
+  if (isMouseEvent(event)) {
+    return { x: event.clientX, y: event.clientY }
+  } else if (isTouchEvent(event)) {
+    const touch = event.touches[0]
+    if (touch && touch.clientX && touch.clientY) return { x: touch.clientX, y: touch.clientY }
+  }
+  return { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY }
+}
+
+export function getResizeEventCursorPosition(direction: Direction, event: ResizeEvent): number {
+  const isHorizontal = direction === 'horizontal'
+  const { x, y } = getResizeEventCoordinates(event)
+  return isHorizontal ? x : y
+}

package/dist/shared/primitives/splitter/flags.ts

@@ -0,0 +1,4 @@
+export const EXCEEDED_HORIZONTAL_MIN = 0b0001
+export const EXCEEDED_HORIZONTAL_MAX = 0b0010
+export const EXCEEDED_VERTICAL_MIN = 0b0100
+export const EXCEEDED_VERTICAL_MAX = 0b1000

package/dist/shared/primitives/splitter/layout.ts

@@ -0,0 +1,153 @@
+import { assert } from './assert'
+import { fuzzyCompareNumbers, fuzzyNumbersEqual } from './compare'
+import { resizePanel } from './resizePanel'
+import type { PanelConstraints } from './types'
+
+export function compareLayouts(a: number[], b: number[]) {
+  if (a.length !== b.length) return false
+  else for (let index = 0; index < a.length; index++) if (a[index] !== b[index]) return false
+  return true
+}
+
+export function adjustLayoutByDelta({
+  delta,
+  layout: prevLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  trigger,
+}: {
+  delta: number
+  layout: number[]
+  panelConstraints: PanelConstraints[]
+  pivotIndices: number[]
+  trigger: 'imperative-api' | 'keyboard' | 'mouse-or-touch'
+}): number[] {
+  if (fuzzyNumbersEqual(delta, 0)) return prevLayout
+  const nextLayout = [...prevLayout]
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices
+  assert(firstPivotIndex != null)
+  assert(secondPivotIndex != null)
+  let deltaApplied = 0
+  if (trigger === 'keyboard') {
+    {
+      const index = delta < 0 ? secondPivotIndex : firstPivotIndex
+      const panelConstraints = panelConstraintsArray[index]
+      assert(panelConstraints)
+      if (panelConstraints.collapsible) {
+        const prevSize = prevLayout[index]
+        assert(prevSize != null)
+        const constraints = panelConstraintsArray[index]
+        assert(constraints)
+        const { collapsedSize = 0, minSize = 0 } = constraints
+        if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+          const localDelta = minSize - prevSize
+          if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0)
+            delta = delta < 0 ? 0 - localDelta : localDelta
+        }
+      }
+    }
+    {
+      const index = delta < 0 ? firstPivotIndex : secondPivotIndex
+      const panelConstraints = panelConstraintsArray[index]
+      assert(panelConstraints)
+      const { collapsible } = panelConstraints
+      if (collapsible) {
+        const prevSize = prevLayout[index]
+        assert(prevSize != null)
+        const constraints = panelConstraintsArray[index]
+        assert(constraints)
+        const { collapsedSize = 0, minSize = 0 } = constraints
+        if (fuzzyNumbersEqual(prevSize, minSize)) {
+          const localDelta = prevSize - 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 prevSize = prevLayout[index]
+      assert(prevSize != null)
+      const maxSafeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: 100,
+      })
+      const available = maxSafeSize - prevSize
+      maxAvailableDelta += available
+      index += increment
+      if (index < 0 || index >= panelConstraintsArray.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 < panelConstraintsArray.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied)
+      const prevSize = prevLayout[index]
+      assert(prevSize != null)
+      const unsafeSize = prevSize - deltaRemaining
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: unsafeSize,
+      })
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize
+        nextLayout[index] = safeSize
+        if (
+          deltaApplied
+            .toPrecision(3)
+            .localeCompare(Math.abs(delta).toPrecision(3), undefined, { numeric: true }) >= 0
+        )
+          break
+      }
+      if (delta < 0) index--
+      else index++
+    }
+  }
+  if (fuzzyNumbersEqual(deltaApplied, 0)) return prevLayout
+  {
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex
+    const prevSize = prevLayout[pivotIndex]
+    assert(prevSize != null)
+    const unsafeSize = prevSize + deltaApplied
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize,
+    })
+    nextLayout[pivotIndex] = safeSize
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize
+      const remainingPivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex
+      let index = remainingPivotIndex
+      while (index >= 0 && index < panelConstraintsArray.length) {
+        const size = nextLayout[index]
+        assert(size != null)
+        const unsafe = size + deltaRemaining
+        const safe = resizePanel({
+          panelConstraints: panelConstraintsArray,
+          panelIndex: index,
+          size: unsafe,
+        })
+        if (!fuzzyNumbersEqual(size, safe)) {
+          deltaRemaining -= safe - size
+          nextLayout[index] = safe
+        }
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) break
+        if (delta > 0) index--
+        else index++
+      }
+    }
+  }
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0)
+  if (!fuzzyNumbersEqual(totalSize, 100)) return prevLayout
+  return nextLayout
+}