@sprawlify/primitives 0.0.1

package/dist/machines/splitter/index.mjs

@@ -0,0 +1,1103 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { S as queryAll, T as trackPointerMove, lt as getEventKey, ut as getEventPoint, vn as dataAttr, yt as isLeftClick } from "../../dom-query-DFCRhyj1.mjs";
+import { Dt as prev, dt as isEqual, n as ensureProps, s as setRafTimeout, t as ensure, u as createSplitProps, wt as next } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine } from "../../core-DCFNMTZF.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/splitter/splitter.anatomy.ts
+const anatomy = createAnatomy("splitter").parts("root", "panel", "resizeTrigger", "resizeTriggerIndicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/splitter/splitter.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
+const getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:resize-trigger:${id}`;
+const getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`;
+const getGlobalCursorId = (ctx) => `splitter:${ctx.id}:global-cursor`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getResizeTriggerEl = (ctx, id) => ctx.getById(getResizeTriggerId(ctx, id));
+const getCursor = (state, x) => {
+	let cursor = x ? "col-resize" : "row-resize";
+	if (state.isAtMin) cursor = x ? "e-resize" : "s-resize";
+	if (state.isAtMax) cursor = x ? "w-resize" : "n-resize";
+	return cursor;
+};
+const getResizeTriggerEls = (ctx) => {
+	return queryAll(getRootEl(ctx), `[role=separator][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
+};
+const 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);
+	}
+};
+const removeGlobalCursor = (ctx) => {
+	ctx.getById(getGlobalCursorId(ctx))?.remove();
+};
+
+//#endregion
+//#region src/machines/splitter/utils/aria.ts
+function calculateAriaValues({ size, panels, pivotIndices }) {
+	let currentMinSize = 0;
+	let currentMaxSize = 100;
+	let totalMinSize = 0;
+	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 {
+			totalMinSize += minSize;
+			totalMaxSize += maxSize;
+		}
+	});
+	return {
+		valueMax: Math.min(currentMaxSize, 100 - totalMinSize),
+		valueMin: Math.max(currentMinSize, 100 - totalMaxSize),
+		valueNow: size[firstIndex]
+	};
+}
+function getAriaValue(size, panels, handleId) {
+	const [beforeId, afterId] = handleId.split(":");
+	const { valueMax, valueMin, valueNow } = calculateAriaValues({
+		size,
+		panels,
+		pivotIndices: [panels.findIndex((panel) => panel.id === beforeId), panels.findIndex((panel) => panel.id === afterId)]
+	});
+	return {
+		beforeId,
+		afterId,
+		valueMax: Math.round(valueMax),
+		valueMin: Math.round(valueMin),
+		valueNow: valueNow != null ? Math.round(valueNow) : void 0
+	};
+}
+
+//#endregion
+//#region src/machines/splitter/utils/fuzzy.ts
+const PRECISION = 10;
+function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
+	if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) return 0;
+	else return actual > expected ? 1 : -1;
+}
+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;
+}
+
+//#endregion
+//#region src/machines/splitter/utils/panel.ts
+function getPanelById(panels, id) {
+	const panel = panels.find((panel$1) => panel$1.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) {
+	return panels.map((panel) => panel.id).sort().map((key) => {
+		const panel = panels.find((panel$1) => panel$1.id === key);
+		return JSON.stringify(panel);
+	}).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,
+		overflow: "hidden",
+		pointerEvents: dragState !== null ? "none" : void 0
+	};
+}
+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}`);
+		if (sizes[index] != null) continue;
+		const numRemainingPanels = panels.length - numPanelsWithSizes;
+		const size = remainingSize / numRemainingPanels;
+		numPanelsWithSizes++;
+		finalSizes[index] = size;
+		remainingSize -= size;
+	}
+	return finalSizes;
+}
+
+//#endregion
+//#region src/machines/splitter/splitter.connect.ts
+function connect(service, normalize) {
+	const { state, send, prop, computed, context, scope } = service;
+	const horizontal = computed("horizontal");
+	const dragging = state.matches("dragging");
+	const orientation = prop("orientation");
+	const getPanelStyle = (id) => {
+		const panels = prop("panels");
+		const panelIndex = panels.findIndex((panel) => panel.id === id);
+		const defaultSize = context.initial("size")[panelIndex];
+		return getPanelFlexBoxStyle({
+			defaultSize,
+			dragState: context.get("dragState"),
+			sizes: context.get("size"),
+			panels,
+			panelIndex
+		});
+	};
+	const getResizeTriggerState = (props$1) => {
+		const { id, disabled } = props$1;
+		const dragging$1 = context.get("dragState")?.resizeTriggerId === id;
+		return {
+			dragging: dragging$1,
+			focused: dragging$1 || context.get("keyboardState")?.resizeTriggerId === id,
+			disabled: !!disabled
+		};
+	};
+	return {
+		dragging,
+		orientation,
+		getPanels() {
+			return prop("panels");
+		},
+		getPanelById(id) {
+			return getPanelById(prop("panels"), id);
+		},
+		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");
+		},
+		setSizes(size) {
+			send({
+				type: "SIZE.SET",
+				size
+			});
+		},
+		resetSizes() {
+			send({
+				type: "SIZE.SET",
+				size: context.initial("size")
+			});
+		},
+		collapsePanel(id) {
+			send({
+				type: "PANEL.COLLAPSE",
+				id
+			});
+		},
+		expandPanel(id, minSize) {
+			send({
+				type: "PANEL.EXPAND",
+				id,
+				minSize
+			});
+		},
+		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({
+				...parts.root.attrs,
+				"data-orientation": orientation,
+				"data-dragging": dataAttr(dragging),
+				id: getRootId(scope),
+				dir: prop("dir"),
+				style: {
+					display: "flex",
+					flexDirection: horizontal ? "row" : "column",
+					height: "100%",
+					width: "100%",
+					overflow: "hidden"
+				}
+			});
+		},
+		getPanelProps(props$1) {
+			const { id } = props$1;
+			return normalize.element({
+				...parts.panel.attrs,
+				"data-orientation": orientation,
+				"data-dragging": dataAttr(dragging),
+				dir: prop("dir"),
+				"data-id": id,
+				"data-index": findPanelIndex(prop("panels"), id),
+				id: getPanelId(scope, id),
+				"data-ownedby": getRootId(scope),
+				style: getPanelStyle(id)
+			});
+		},
+		getResizeTriggerState,
+		getResizeTriggerIndicator(props$1) {
+			const triggerState = getResizeTriggerState(props$1);
+			return normalize.element({
+				...parts.resizeTriggerIndicator.attrs,
+				"data-orientation": orientation,
+				"data-focus": dataAttr(triggerState.focused),
+				"data-dragging": dataAttr(triggerState.dragging),
+				"data-disabled": dataAttr(triggerState.disabled),
+				"data-ownedby": getRootId(scope)
+			});
+		},
+		getResizeTriggerProps(props$1) {
+			const { id } = props$1;
+			const triggerState = getResizeTriggerState(props$1);
+			const aria = getAriaValue(context.get("size"), prop("panels"), id);
+			return normalize.element({
+				...parts.resizeTrigger.attrs,
+				dir: prop("dir"),
+				id: getResizeTriggerId(scope, id),
+				role: "separator",
+				"data-id": id,
+				"data-ownedby": getRootId(scope),
+				tabIndex: triggerState.disabled ? void 0 : 0,
+				"aria-valuenow": aria.valueNow,
+				"aria-valuemin": aria.valueMin,
+				"aria-valuemax": aria.valueMax,
+				"data-orientation": orientation,
+				"aria-orientation": orientation,
+				"aria-controls": `${getPanelId(scope, aria.beforeId)} ${getPanelId(scope, aria.afterId)}`,
+				"data-focus": dataAttr(triggerState.focused),
+				"data-dragging": dataAttr(triggerState.dragging),
+				"data-disabled": dataAttr(triggerState.disabled),
+				style: {
+					touchAction: "none",
+					userSelect: "none",
+					WebkitUserSelect: "none",
+					flex: "0 0 auto",
+					pointerEvents: triggerState.disabled ? "none" : triggerState.dragging && !triggerState.focused ? "none" : void 0,
+					cursor: triggerState.disabled ? void 0 : horizontal ? "col-resize" : "row-resize",
+					[horizontal ? "minHeight" : "minWidth"]: "0"
+				},
+				onPointerDown(event) {
+					if (!isLeftClick(event)) return;
+					if (triggerState.disabled) {
+						event.preventDefault();
+						return;
+					}
+					send({
+						type: "POINTER_DOWN",
+						id,
+						point: getEventPoint(event)
+					});
+					event.currentTarget.setPointerCapture(event.pointerId);
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onPointerUp(event) {
+					if (triggerState.disabled) return;
+					if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+				},
+				onPointerOver() {
+					if (triggerState.disabled) return;
+					send({
+						type: "POINTER_OVER",
+						id
+					});
+				},
+				onPointerLeave() {
+					if (triggerState.disabled) return;
+					send({
+						type: "POINTER_LEAVE",
+						id
+					});
+				},
+				onBlur() {
+					if (triggerState.disabled) return;
+					send({ type: "BLUR" });
+				},
+				onFocus() {
+					if (triggerState.disabled) return;
+					send({
+						type: "FOCUS",
+						id
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (triggerState.disabled) return;
+					const keyboardResizeBy = prop("keyboardResizeBy");
+					let delta = 0;
+					if (event.shiftKey) delta = 10;
+					else if (keyboardResizeBy != null) delta = keyboardResizeBy;
+					else delta = 1;
+					const exec = {
+						Enter() {
+							send({
+								type: "ENTER",
+								id
+							});
+						},
+						ArrowUp() {
+							send({
+								type: "KEYBOARD_MOVE",
+								id,
+								delta: horizontal ? 0 : -delta
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "KEYBOARD_MOVE",
+								id,
+								delta: horizontal ? 0 : delta
+							});
+						},
+						ArrowLeft() {
+							send({
+								type: "KEYBOARD_MOVE",
+								id,
+								delta: horizontal ? -delta : 0
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "KEYBOARD_MOVE",
+								id,
+								delta: horizontal ? delta : 0
+							});
+						},
+						Home() {
+							send({
+								type: "KEYBOARD_MOVE",
+								id,
+								delta: -100
+							});
+						},
+						End() {
+							send({
+								type: "KEYBOARD_MOVE",
+								id,
+								delta: 100
+							});
+						},
+						F6() {
+							send({
+								type: "FOCUS.CYCLE",
+								id,
+								shiftKey: event.shiftKey
+							});
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/splitter/utils/resize-panel.ts
+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;
+}
+
+//#endregion
+//#region src/machines/splitter/utils/resize-by-delta.ts
+function resizeByDelta(props$1) {
+	let { delta, initialSize, panels, pivotIndices, prevSize, trigger } = props$1;
+	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 prevSize$1 = initialSize[index];
+				ensure(prevSize$1, () => `Previous size not found for panel index ${index}`);
+				if (fuzzyNumbersEqual(prevSize$1, collapsedSize)) {
+					const localDelta = minSize - prevSize$1;
+					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 prevSize$1 = initialSize[index];
+				ensure(prevSize$1, () => `Previous size not found for panel index ${index}`);
+				if (fuzzyNumbersEqual(prevSize$1, minSize)) {
+					const localDelta = prevSize$1 - 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$1 = initialSize[index];
+			ensure(prevSize$1, () => `Previous size not found for panel index ${index}`);
+			const delta$1 = resizePanel({
+				panels,
+				index,
+				size: 100
+			}) - prevSize$1;
+			maxAvailableDelta += delta$1;
+			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;
+	}
+	{
+		let index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+		while (index >= 0 && index < panels.length) {
+			const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+			const prevSize$1 = initialSize[index];
+			ensure(prevSize$1, () => `Previous size not found for panel index ${index}`);
+			const unsafeSize = prevSize$1 - deltaRemaining;
+			const safeSize = resizePanel({
+				panels,
+				index,
+				size: unsafeSize
+			});
+			if (!fuzzyNumbersEqual(prevSize$1, safeSize)) {
+				deltaApplied += prevSize$1 - 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 prevSize$1 = initialSize[pivotIndex];
+		ensure(prevSize$1, () => `Previous size not found for panel index ${pivotIndex}`);
+		const unsafeSize = prevSize$1 + deltaApplied;
+		const safeSize = resizePanel({
+			panels,
+			index: pivotIndex,
+			size: unsafeSize
+		});
+		nextSize[pivotIndex] = safeSize;
+		if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+			let deltaRemaining = unsafeSize - safeSize;
+			let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+			while (index >= 0 && index < panels.length) {
+				const prevSize$2 = nextSize[index];
+				ensure(prevSize$2, () => `Previous size not found for panel index ${index}`);
+				const unsafeSize$1 = prevSize$2 + deltaRemaining;
+				const safeSize$1 = resizePanel({
+					panels,
+					index,
+					size: unsafeSize$1
+				});
+				if (!fuzzyNumbersEqual(prevSize$2, safeSize$1)) {
+					deltaRemaining -= safeSize$1 - prevSize$2;
+					nextSize[index] = safeSize$1;
+				}
+				if (fuzzyNumbersEqual(deltaRemaining, 0)) break;
+				if (delta > 0) index--;
+				else index++;
+			}
+		}
+	}
+	if (!fuzzyNumbersEqual(nextSize.reduce((total, size) => size + total, 0), 100)) return prevSize;
+	return nextSize;
+}
+
+//#endregion
+//#region src/machines/splitter/utils/validate-sizes.ts
+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}`);
+		nextSize[index] = 100 / nextSizeTotalSize * unsafeSize;
+	}
+	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 prevSize$1 = nextSize[index];
+		ensure(prevSize$1, () => `No size data found for index ${index}`);
+		const unsafeSize = prevSize$1 + remainingSize;
+		const safeSize = resizePanel({
+			panels,
+			index,
+			size: unsafeSize
+		});
+		if (prevSize$1 !== safeSize) {
+			remainingSize -= safeSize - prevSize$1;
+			nextSize[index] = safeSize;
+			if (fuzzyNumbersEqual(remainingSize, 0)) break;
+		}
+	}
+	return nextSize;
+}
+
+//#endregion
+//#region src/machines/splitter/splitter.machine.ts
+const machine = createMachine({
+	props({ props: props$1 }) {
+		ensureProps(props$1, ["panels"]);
+		return {
+			orientation: "horizontal",
+			defaultSize: [],
+			dir: "ltr",
+			...props$1,
+			panels: sortPanels(props$1.panels)
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable, getContext, getRefs }) {
+		return {
+			size: bindable(() => ({
+				value: prop("size"),
+				defaultValue: prop("defaultSize"),
+				isEqual(a, b) {
+					return b != null && fuzzySizeEqual(a, b);
+				},
+				onChange(value) {
+					const ctx = getContext();
+					const sizesBeforeCollapse = getRefs().get("panelSizeBeforeCollapse");
+					const expandToSizes = Object.fromEntries(sizesBeforeCollapse.entries());
+					const resizeTriggerId = ctx.get("dragState")?.resizeTriggerId ?? null;
+					const layout = getPanelLayout(prop("panels"));
+					prop("onResize")?.({
+						size: value,
+						layout,
+						resizeTriggerId,
+						expandToSizes
+					});
+				}
+			})),
+			dragState: bindable(() => ({ defaultValue: null })),
+			keyboardState: bindable(() => ({ defaultValue: null }))
+		};
+	},
+	watch({ track, action, prop }) {
+		track([() => serializePanels(prop("panels"))], () => {
+			action(["syncSize"]);
+		});
+	},
+	refs() {
+		return {
+			panelSizeBeforeCollapse: /* @__PURE__ */ new Map(),
+			prevDelta: 0,
+			panelIdToLastNotifiedSizeMap: /* @__PURE__ */ new Map()
+		};
+	},
+	computed: { horizontal({ prop }) {
+		return prop("orientation") === "horizontal";
+	} },
+	on: {
+		"SIZE.SET": { actions: ["setSize"] },
+		"PANEL.COLLAPSE": { actions: ["collapsePanel"] },
+		"PANEL.EXPAND": { actions: ["expandPanel"] },
+		"PANEL.RESIZE": { actions: ["resizePanel"] }
+	},
+	entry: ["syncSize"],
+	exit: ["clearGlobalCursor"],
+	states: {
+		idle: {
+			entry: ["clearDraggingState", "clearKeyboardState"],
+			on: {
+				POINTER_OVER: {
+					target: "hover:temp",
+					actions: ["setKeyboardState"]
+				},
+				FOCUS: {
+					target: "focused",
+					actions: ["setKeyboardState"]
+				},
+				POINTER_DOWN: {
+					target: "dragging",
+					actions: ["setDraggingState"]
+				}
+			}
+		},
+		"hover:temp": {
+			effects: ["waitForHoverDelay"],
+			on: {
+				HOVER_DELAY: { target: "hover" },
+				POINTER_DOWN: {
+					target: "dragging",
+					actions: ["setDraggingState"]
+				},
+				POINTER_LEAVE: { target: "idle" }
+			}
+		},
+		hover: {
+			tags: ["focus"],
+			on: {
+				POINTER_DOWN: {
+					target: "dragging",
+					actions: ["setDraggingState"]
+				},
+				POINTER_LEAVE: { target: "idle" }
+			}
+		},
+		focused: {
+			tags: ["focus"],
+			on: {
+				BLUR: { target: "idle" },
+				ENTER: { actions: ["collapseOrExpandPanel"] },
+				POINTER_DOWN: {
+					target: "dragging",
+					actions: ["setDraggingState"]
+				},
+				KEYBOARD_MOVE: { actions: [
+					"invokeOnResizeStart",
+					"setKeyboardValue",
+					"invokeOnResizeEnd"
+				] },
+				"FOCUS.CYCLE": { actions: ["focusNextResizeTrigger"] }
+			}
+		},
+		dragging: {
+			tags: ["focus"],
+			effects: ["trackPointerMove"],
+			entry: ["invokeOnResizeStart"],
+			on: {
+				POINTER_MOVE: { actions: ["setPointerValue", "setGlobalCursor"] },
+				POINTER_UP: {
+					target: "idle",
+					actions: ["invokeOnResizeEnd", "clearGlobalCursor"]
+				}
+			}
+		}
+	},
+	implementations: {
+		effects: {
+			waitForHoverDelay: ({ send }) => {
+				return setRafTimeout(() => {
+					send({ type: "HOVER_DELAY" });
+				}, 250);
+			},
+			trackPointerMove: ({ scope, send }) => {
+				return trackPointerMove(scope.getDoc(), {
+					onPointerMove(info) {
+						send({
+							type: "POINTER_MOVE",
+							point: info.point
+						});
+					},
+					onPointerUp() {
+						send({ type: "POINTER_UP" });
+					}
+				});
+			}
+		},
+		actions: {
+			setSize(params) {
+				const { context, event, prop } = params;
+				const unsafeSize = event.size;
+				const prevSize = context.get("size");
+				const safeSize = validateSizes({
+					size: unsafeSize,
+					panels: prop("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,
+					panels
+				});
+				if (!isEqual(prevSize, nextSize)) context.set("size", nextSize);
+			},
+			setDraggingState({ context, event, prop, scope }) {
+				const orientation = prop("orientation");
+				const size = context.get("size");
+				const resizeTriggerId = event.id;
+				if (!getRootEl(scope)) 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
+				});
+			},
+			clearDraggingState({ context }) {
+				context.set("dragState", null);
+			},
+			setKeyboardState({ context, event }) {
+				context.set("keyboardState", { resizeTriggerId: event.id });
+			},
+			clearKeyboardState({ context }) {
+				context.set("keyboardState", null);
+			},
+			collapsePanel(params) {
+				const { context, prop, event, refs } = params;
+				const prevSize = context.get("size");
+				const panels = prop("panels");
+				const panel = panels.find((panel$1) => panel$1.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 nextSize = resizeByDelta({
+							delta: findPanelDataIndex(panels, panel) === panels.length - 1 ? panelSize - collapsedSize : collapsedSize - panelSize,
+							initialSize: prevSize,
+							panels,
+							pivotIndices,
+							prevSize,
+							trigger: "imperative-api"
+						});
+						if (!isEqual(prevSize, nextSize)) setSize(params, nextSize);
+					}
+				}
+			},
+			expandPanel(params) {
+				const { context, prop, event, refs } = params;
+				const panels = prop("panels");
+				const prevSize = context.get("size");
+				const panel = panels.find((panel$1) => panel$1.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 nextSize = resizeByDelta({
+							delta: findPanelDataIndex(panels, panel) === panels.length - 1 ? panelSize - baseSize : baseSize - panelSize,
+							initialSize: prevSize,
+							panels,
+							pivotIndices,
+							prevSize,
+							trigger: "imperative-api"
+						});
+						if (!isEqual(prevSize, nextSize)) setSize(params, nextSize);
+					}
+				}
+			},
+			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 nextSize = resizeByDelta({
+					delta: findPanelDataIndex(panels, panel) === panels.length - 1 ? panelSize - unsafePanelSize : unsafePanelSize - panelSize,
+					initialSize: prevSize,
+					panels,
+					pivotIndices,
+					prevSize,
+					trigger: "imperative-api"
+				});
+				if (!isEqual(prevSize, nextSize)) setSize(params, nextSize);
+			},
+			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 offsetPercentage = (cursorPosition - initialCursorPosition) / 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);
+			},
+			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);
+			},
+			invokeOnResizeEnd({ context, prop }) {
+				queueMicrotask(() => {
+					const dragState = context.get("dragState");
+					prop("onResizeEnd")?.({
+						size: context.get("size"),
+						resizeTriggerId: dragState?.resizeTriggerId ?? null
+					});
+				});
+			},
+			invokeOnResizeStart({ prop }) {
+				queueMicrotask(() => {
+					prop("onResizeStart")?.();
+				});
+			},
+			collapseOrExpandPanel(params) {
+				const { context, prop } = params;
+				const panelDataArray = prop("panels");
+				const sizes = context.get("size");
+				const [idBefore, idAfter] = (context.get("keyboardState")?.resizeTriggerId)?.split(":") ?? [];
+				const index = panelDataArray.findIndex((panelData$1) => panelData$1.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((panelData$1) => panelData$1.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);
+				}
+			},
+			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 panel = panels[panels.findIndex((panel$1) => panel$1.id === idBefore)];
+				const aria = getAriaValue(context.get("size"), panels, dragState.resizeTriggerId);
+				const cursorState = {
+					isAtMin: fuzzyNumbersEqual(aria.valueNow, aria.valueMin) || fuzzyNumbersEqual(aria.valueNow, panel.collapsedSize),
+					isAtMax: fuzzyNumbersEqual(aria.valueNow, aria.valueMax)
+				};
+				setupGlobalCursor(scope, cursorState, horizontal, prop("nonce"));
+			},
+			clearGlobalCursor({ scope }) {
+				removeGlobalCursor(scope);
+			},
+			focusNextResizeTrigger({ event, scope }) {
+				const resizeTriggers = getResizeTriggerEls(scope);
+				const index = resizeTriggers.findIndex((el) => el.dataset.id === event.id);
+				(event.shiftKey ? prev(resizeTriggers, index) : next(resizeTriggers, index))?.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
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/machines/splitter/splitter.props.ts
+const props = createProps()([
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"onResize",
+	"onResizeStart",
+	"onResizeEnd",
+	"onCollapse",
+	"onExpand",
+	"orientation",
+	"size",
+	"defaultSize",
+	"panels",
+	"keyboardResizeBy",
+	"nonce"
+]);
+const splitProps = createSplitProps(props);
+const panelProps = createProps()(["id"]);
+const splitPanelProps = createSplitProps(panelProps);
+const resizeTriggerProps = createProps()(["disabled", "id"]);
+const splitResizeTriggerProps = createSplitProps(resizeTriggerProps);
+
+//#endregion
+export { anatomy, connect, getPanelLayout as layout, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };