sheer-ui 0.0.0

package/src/lib/internal/paneforge/paneforge.svelte.ts

@@ -0,0 +1,821 @@
+import { createContext, getAbortSignal, onMount, tick, untrack } from 'svelte';
+import { on } from 'svelte/events';
+import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements';
+import {
+	type ReadableBoxedValues,
+	type RefAttachment,
+	type WithRefProps,
+	attachRef,
+	DOMContext,
+} from '../tools/index.js';
+import {
+	callPaneCallbacks,
+	findPaneDataIndex,
+	getDeltaPercentage,
+	getPivotIndices,
+	getResizeEventCursorPosition,
+	getResizeHandleElementIndex,
+	getResizeHandleElementsForGroup,
+	getResizeHandlePaneIds,
+	getUnsafeDefaultLayout,
+	paneDataHelper,
+	updateResizeHandleAriaValues,
+	validatePaneGroupLayout,
+} from './internal/helpers.js';
+import { isKeyDown, isMouseEvent, isTouchEvent } from './internal/utils/is.js';
+import { adjustLayoutByDelta } from './internal/utils/adjust-layout.js';
+import { arraysAreEqual as areArraysEqual } from '../arrays.js';
+import { areNumbersAlmostEqual } from './internal/utils/compare.js';
+import { computePaneFlexBoxStyle, getCursorStyle, resetGlobalCursorStyle, setGlobalCursorStyle } from './internal/utils/style.js';
+import type {
+	Direction,
+	DragState,
+	PaneOnCollapse,
+	PaneOnExpand,
+	PaneOnResize,
+	PaneResizeHandleOnDragging,
+	PaneTransitionState,
+	ResizeEvent,
+	ResizeHandler,
+} from './internal/types.js';
+import { type PaneGroupStorage, initializeStorage, loadPaneGroupState, updateStorageValues } from './internal/utils/storage.js';
+
+export const defaultStorage: PaneGroupStorage = {
+	getItem: (name: string) => {
+		initializeStorage(defaultStorage);
+		return defaultStorage.getItem(name);
+	},
+	setItem: (name: string, value: string) => {
+		initializeStorage(defaultStorage);
+		defaultStorage.setItem(name, value);
+	},
+};
+
+const [getPaneGroupContext, setPaneGroupContext] = createContext<PaneGroupState>();
+
+interface PaneGroupStateOpts
+	extends WithRefProps,
+		ReadableBoxedValues<{
+			autoSaveId: string | null;
+			direction: Direction;
+			keyboardResizeBy: number | null;
+			onLayout: (layout: number[]) => void | null;
+			storage: PaneGroupStorage;
+		}> {}
+
+export class PaneGroupState {
+	static create(opts: PaneGroupStateOpts) {
+		return setPaneGroupContext(new PaneGroupState(opts));
+	}
+
+	readonly opts: PaneGroupStateOpts;
+	readonly attachment: RefAttachment<HTMLElement>;
+	readonly domContext: DOMContext;
+	dragState = $state.raw<DragState | null>(null);
+	layout = $state.raw<number[]>([]);
+	panesArray = $state.raw<PaneState[]>([]);
+	panesArrayChanged = $state<boolean>(false);
+	// Written on every resize event; nothing derives from it, so keep it non-reactive.
+	paneIdToLastNotifiedSizeMap: Record<string, number> = {};
+	paneSizeBeforeCollapseMap = new Map<string, number>();
+	prevDelta = 0;
+
+	constructor(opts: PaneGroupStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+		this.domContext = new DOMContext(this.opts.ref);
+
+		$effect(() => {
+			const groupId = this.opts.id.current;
+			const layout = this.layout;
+			const panesArray = this.panesArray;
+
+			return untrack(() => {
+				return updateResizeHandleAriaValues({
+					groupId,
+					layout,
+					panesArray,
+					domContext: this.domContext,
+				});
+			});
+		});
+
+		// Track id + panesArray so handles added after initial mount get their keydown
+		// listeners — mirrors the effect deps in react-resizable-panels'
+		// useWindowSplitterPanelGroupBehavior. Layout is deliberately left untracked:
+		// the handlers read it live, and tracking it would re-attach listeners on
+		// every drag frame.
+		$effect(() => {
+			void this.opts.id.current;
+			void this.panesArray;
+
+			return untrack(() => {
+				return this.#setResizeHandlerEventListeners();
+			});
+		});
+
+		$effect(() => {
+			const autoSaveId = this.opts.autoSaveId.current;
+			const layout = this.layout;
+			const storage = this.opts.storage.current;
+
+			untrack(() => {
+				if (!autoSaveId) return;
+				updateStorageValues({
+					autoSaveId,
+					layout,
+					storage,
+					panesArray: this.panesArray,
+					paneSizeBeforeCollapse: this.paneSizeBeforeCollapseMap,
+				});
+			});
+		});
+
+		$effect(() => {
+			const panesArrayChanged = this.panesArrayChanged;
+
+			untrack(() => {
+				if (!panesArrayChanged) return;
+				this.panesArrayChanged = false;
+				const prevLayout = this.layout;
+
+				let unsafeLayout: number[] | null = null;
+
+				if (this.opts.autoSaveId.current) {
+					const state = loadPaneGroupState(this.opts.autoSaveId.current, this.panesArray, this.opts.storage.current);
+					if (state) {
+						this.paneSizeBeforeCollapseMap = new Map(Object.entries(state.expandToSizes));
+						unsafeLayout = state.layout;
+					}
+				}
+
+				if (unsafeLayout == null) {
+					unsafeLayout = getUnsafeDefaultLayout({
+						panesArray: this.panesArray,
+					});
+				}
+
+				const nextLayout = validatePaneGroupLayout({
+					layout: unsafeLayout,
+					paneConstraints: this.panesArray.map((paneData) => paneData.constraints),
+				});
+
+				if (areArraysEqual(prevLayout, nextLayout)) return;
+
+				this.layout = nextLayout;
+				this.opts.onLayout.current?.(nextLayout);
+
+				callPaneCallbacks(this.panesArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+			});
+		});
+	}
+
+	setLayout = (newLayout: number[]) => {
+		this.layout = newLayout;
+	};
+
+	registerResizeHandle = (dragHandleId: string) => {
+		return (event: ResizeEvent) => {
+			event.preventDefault();
+
+			const direction = this.opts.direction.current;
+			const dragState = this.dragState;
+			const groupId = this.opts.id.current;
+			const keyboardResizeBy = this.opts.keyboardResizeBy.current;
+
+			const prevLayout = this.layout;
+			const paneDataArray = this.panesArray;
+
+			const { initialLayout } = dragState ?? {};
+			const doc = this.domContext.getDocument();
+
+			const pivotIndices = getPivotIndices({
+				groupId,
+				dragHandleId,
+				domContext: this.domContext,
+			});
+			if (!pivotIndices) return;
+
+			let delta = getDeltaPercentage({
+				event: event,
+				dir: direction,
+				initialDragState: dragState,
+				keyboardResizeBy,
+			});
+			if (delta === 0) return;
+
+			// support RTL
+			const isHorizontal = direction === 'horizontal';
+			if (doc.dir === 'rtl' && isHorizontal) {
+				delta = -delta;
+			}
+
+			const paneConstraints = paneDataArray.map((paneData) => paneData.constraints);
+
+			const nextLayout = adjustLayoutByDelta({
+				delta,
+				layout: initialLayout ?? prevLayout,
+				paneConstraints,
+				pivotIndices,
+				trigger: isKeyDown(event) ? 'keyboard' : 'mouse-or-touch',
+			});
+			const layoutChanged = !areArraysEqual(prevLayout, nextLayout);
+
+			// Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
+			// Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
+			if (isMouseEvent(event) || isTouchEvent(event)) {
+				// Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
+				// In this case, Pane sizes might not change–
+				// but updating cursor in this scenario would cause a flicker.
+				const prevDelta = this.prevDelta;
+				if (prevDelta !== delta) {
+					this.prevDelta = delta;
+
+					if (!layoutChanged) {
+						// If the pointer has moved too far to resize the pane any further,
+						// update the cursor style for a visual clue.
+						// This mimics VS Code behavior.
+
+						if (isHorizontal) {
+							setGlobalCursorStyle(delta < 0 ? 'horizontal-min' : 'horizontal-max', doc);
+						} else {
+							setGlobalCursorStyle(delta < 0 ? 'vertical-min' : 'vertical-max', doc);
+						}
+					} else {
+						setGlobalCursorStyle(isHorizontal ? 'horizontal' : 'vertical', doc);
+					}
+				}
+			}
+			if (layoutChanged) {
+				this.setLayout(nextLayout);
+				this.opts.onLayout.current?.(nextLayout);
+				callPaneCallbacks(paneDataArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+			}
+		};
+	};
+
+	resizePane = (paneState: PaneState, unsafePaneSize: number) => {
+		const prevLayout = this.layout;
+		const panesArray = this.panesArray;
+
+		const paneConstraintsArr = panesArray.map((paneData) => paneData.constraints);
+
+		const { paneSize, pivotIndices } = paneDataHelper(panesArray, paneState, prevLayout);
+
+		if (paneSize == null || !pivotIndices) return;
+
+		const isLastPane = findPaneDataIndex(panesArray, paneState) === panesArray.length - 1;
+
+		const delta = isLastPane ? paneSize - unsafePaneSize : unsafePaneSize - paneSize;
+
+		const nextLayout = adjustLayoutByDelta({
+			delta,
+			layout: prevLayout,
+			paneConstraints: paneConstraintsArr,
+			pivotIndices,
+			trigger: 'imperative-api',
+		});
+
+		if (areArraysEqual(prevLayout, nextLayout)) return;
+
+		this.setLayout(nextLayout);
+
+		this.opts.onLayout.current?.(nextLayout);
+
+		callPaneCallbacks(panesArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+	};
+
+	startDragging = (dragHandleId: string, e: ResizeEvent) => {
+		const direction = this.opts.direction.current;
+		const layout = this.layout;
+		const groupElement = this.opts.ref.current;
+		if (!groupElement) return false;
+		const groupRect = groupElement.getBoundingClientRect();
+		const groupSizeInPixels = direction === 'horizontal' ? groupRect.width : groupRect.height;
+		if (groupSizeInPixels <= 0) return false;
+
+		const initialCursorPosition = getResizeEventCursorPosition(direction, e);
+		if (initialCursorPosition == null) return false;
+
+		this.dragState = {
+			dragHandleId,
+			groupSizeInPixels,
+			initialCursorPosition,
+			initialLayout: layout,
+		};
+		return true;
+	};
+
+	stopDragging = () => {
+		resetGlobalCursorStyle();
+		this.dragState = null;
+	};
+
+	isPaneCollapsed = (pane: PaneState) => {
+		const paneDataArray = this.panesArray;
+		const layout = this.layout;
+		const { collapsedSize = 0, collapsible, paneSize } = paneDataHelper(paneDataArray, pane, layout);
+
+		// On init the value may be undefined, so we need to check for that
+		if (typeof paneSize !== 'number' || typeof collapsedSize !== 'number') return false;
+
+		return collapsible === true && areNumbersAlmostEqual(paneSize, collapsedSize);
+	};
+
+	expandPane = (pane: PaneState) => {
+		const prevLayout = this.layout;
+		const paneDataArray = this.panesArray;
+
+		if (!pane.constraints.collapsible) return;
+		const paneConstraintsArray = paneDataArray.map((paneData) => paneData.constraints);
+
+		const {
+			collapsedSize = 0,
+			paneSize,
+			minSize = 0,
+			pivotIndices,
+		} = paneDataHelper(paneDataArray, pane, prevLayout);
+
+		if (paneSize !== collapsedSize || !pivotIndices) return;
+		// restore this pane to the size it was before it was collapsed, if possible.
+		const prevPaneSize = this.paneSizeBeforeCollapseMap.get(pane.opts.id.current);
+		const baseSize = prevPaneSize != null && prevPaneSize >= minSize ? prevPaneSize : minSize;
+
+		const isLastPane = findPaneDataIndex(paneDataArray, pane) === paneDataArray.length - 1;
+		const delta = isLastPane ? paneSize - baseSize : baseSize - paneSize;
+
+		const nextLayout = adjustLayoutByDelta({
+			delta,
+			layout: prevLayout,
+			paneConstraints: paneConstraintsArray,
+			pivotIndices,
+			trigger: 'imperative-api',
+		});
+
+		if (areArraysEqual(prevLayout, nextLayout)) return;
+
+		this.setLayout(nextLayout);
+
+		this.opts.onLayout.current?.(nextLayout);
+
+		callPaneCallbacks(paneDataArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+	};
+
+	collapsePane = (pane: PaneState) => {
+		const prevLayout = this.layout;
+		const paneDataArray = this.panesArray;
+
+		if (!pane.constraints.collapsible) return;
+
+		const paneConstraintsArray = paneDataArray.map((paneData) => paneData.constraints);
+
+		const { collapsedSize = 0, paneSize, pivotIndices } = paneDataHelper(paneDataArray, pane, prevLayout);
+
+		if (paneSize == null || !pivotIndices) return;
+
+		if (paneSize === collapsedSize) return;
+
+		// Store the size before collapse, which is returned when `expand()` is called
+		this.paneSizeBeforeCollapseMap.set(pane.opts.id.current, paneSize);
+
+		const isLastPane = findPaneDataIndex(paneDataArray, pane) === paneDataArray.length - 1;
+		const delta = isLastPane ? paneSize - collapsedSize : collapsedSize - paneSize;
+
+		const nextLayout = adjustLayoutByDelta({
+			delta,
+			layout: prevLayout,
+			paneConstraints: paneConstraintsArray,
+			pivotIndices,
+			trigger: 'imperative-api',
+		});
+
+		if (areArraysEqual(prevLayout, nextLayout)) return;
+
+		this.layout = nextLayout;
+		this.opts.onLayout.current?.(nextLayout);
+
+		callPaneCallbacks(paneDataArray, nextLayout, this.paneIdToLastNotifiedSizeMap);
+	};
+
+	getPaneSize = (pane: PaneState) => {
+		return paneDataHelper(this.panesArray, pane, this.layout).paneSize;
+	};
+
+	getPaneStyle = (pane: PaneState, defaultSize: number | undefined) => {
+		const paneDataArray = this.panesArray;
+		const layout = this.layout;
+		const dragState = this.dragState;
+
+		const paneIndex = findPaneDataIndex(paneDataArray, pane);
+		return computePaneFlexBoxStyle({
+			defaultSize,
+			dragState,
+			layout,
+			panesArray: paneDataArray,
+			paneIndex,
+		});
+	};
+
+	isPaneExpanded = (pane: PaneState) => {
+		const { collapsedSize = 0, collapsible, paneSize } = paneDataHelper(this.panesArray, pane, this.layout);
+		return !collapsible || (paneSize != null && paneSize > collapsedSize);
+	};
+
+	registerPane = (pane: PaneState) => {
+		const newPaneDataArray = [...this.panesArray, pane];
+		newPaneDataArray.sort((paneA, paneB) => {
+			const orderA = paneA.opts.order.current;
+			const orderB = paneB.opts.order.current;
+
+			if (orderA == null && orderB == null) {
+				return 0;
+			} else if (orderA == null) {
+				return -1;
+			} else if (orderB == null) {
+				return 1;
+			} else {
+				return orderA - orderB;
+			}
+		});
+		this.panesArray = newPaneDataArray;
+		this.panesArrayChanged = true;
+
+		return () => {
+			const paneDataArray = [...this.panesArray];
+			const index = findPaneDataIndex(this.panesArray, pane);
+
+			if (index < 0) return;
+			paneDataArray.splice(index, 1);
+			this.panesArray = paneDataArray;
+			delete this.paneIdToLastNotifiedSizeMap[pane.opts.id.current];
+			this.panesArrayChanged = true;
+		};
+	};
+
+	#setResizeHandlerEventListeners = () => {
+		const groupId = this.opts.id.current;
+		const handles = getResizeHandleElementsForGroup(groupId, this.domContext);
+		const paneDataArray = this.panesArray;
+
+		const unsubHandlers = handles.map((handle) => {
+			const handleId = handle.getAttribute('data-pane-resizer-id');
+			if (!handleId) return () => {};
+
+			const [idBefore, idAfter] = getResizeHandlePaneIds({
+				groupId,
+				handleId,
+				panesArray: paneDataArray,
+				domContext: this.domContext,
+			});
+
+			if (idBefore == null || idAfter == null) return () => {};
+
+			const onKeydown = (e: KeyboardEvent) => {
+				if (e.defaultPrevented || e.key !== 'Enter') return;
+
+				e.preventDefault();
+				const paneDataArray = this.panesArray;
+				const index = paneDataArray.findIndex((paneData) => paneData.opts.id.current === idBefore);
+
+				if (index < 0) return;
+
+				const paneData = paneDataArray[index];
+				if (!paneData) return;
+				const layout = this.layout;
+
+				const size = layout[index];
+
+				const { collapsedSize = 0, collapsible, minSize = 0 } = paneData.constraints;
+
+				if (!(size != null && collapsible)) return;
+
+				const pivotIndices = getPivotIndices({
+					groupId,
+					dragHandleId: handleId,
+					domContext: this.domContext,
+				});
+				if (!pivotIndices) return;
+
+				const nextLayout = adjustLayoutByDelta({
+					delta: areNumbersAlmostEqual(size, collapsedSize) ? minSize - size : collapsedSize - size,
+					layout,
+					paneConstraints: paneDataArray.map((paneData) => paneData.constraints),
+					pivotIndices,
+					trigger: 'keyboard',
+				});
+
+				if (layout !== nextLayout) {
+					this.layout = nextLayout;
+				}
+			};
+
+			const unsubListener = on(handle, 'keydown', onKeydown);
+
+			return () => {
+				unsubListener();
+			};
+		});
+
+		return () => {
+			for (const unsub of unsubHandlers) {
+				unsub();
+			}
+		};
+	};
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'data-pane-group': '',
+				'data-direction': this.opts.direction.current,
+				'data-pane-group-id': this.opts.id.current,
+				style: {
+					display: 'flex',
+					flexDirection: this.opts.direction.current === 'horizontal' ? 'row' : 'column',
+					height: '100%',
+					overflow: 'hidden',
+					width: '100%',
+				},
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface PaneResizerStateOpts
+	extends WithRefProps,
+		ReadableBoxedValues<{
+			onDraggingChange: PaneResizeHandleOnDragging;
+			disabled: boolean;
+			tabIndex: number;
+		}> {}
+
+const resizeKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];
+
+export class PaneResizerState {
+	static create(opts: PaneResizerStateOpts) {
+		return new PaneResizerState(opts, getPaneGroupContext());
+	}
+	readonly opts: PaneResizerStateOpts;
+	readonly #group: PaneGroupState;
+	readonly attachment: RefAttachment<HTMLElement>;
+	readonly domContext: DOMContext;
+
+	readonly #isDragging = $derived.by(() => this.#group.dragState?.dragHandleId === this.opts.id.current);
+	#isFocused = $state(false);
+	readonly resizeHandler: ResizeHandler | null = $derived.by(() =>
+		this.opts.disabled.current ? null : this.#group.registerResizeHandle(this.opts.id.current),
+	);
+
+	constructor(opts: PaneResizerStateOpts, group: PaneGroupState) {
+		this.opts = opts;
+		this.#group = group;
+		this.attachment = attachRef(this.opts.ref);
+		this.domContext = new DOMContext(this.opts.ref);
+
+		$effect(() => {
+			const node = this.opts.ref.current;
+			if (!node) return;
+			const disabled = this.opts.disabled.current;
+			const resizeHandler = this.resizeHandler;
+			const isDragging = this.#isDragging;
+			if (disabled || resizeHandler === null || !isDragging) return;
+
+			const stopDraggingAndBlur = () => {
+				node.blur();
+				this.#group.stopDragging();
+				this.opts.onDraggingChange.current(false);
+			};
+			const domBody = this.domContext.getDocument().body;
+			const domWindow = this.domContext.getWindow();
+
+			const signal = getAbortSignal();
+			on(domBody, 'contextmenu', stopDraggingAndBlur, { signal });
+			on(domBody, 'mousemove', resizeHandler, { signal });
+			on(domBody, 'touchmove', resizeHandler, { passive: false, signal });
+			on(domBody, 'mouseleave', resizeHandler, { signal });
+			on(domWindow, 'mouseup', stopDraggingAndBlur, { signal });
+			on(domWindow, 'touchend', stopDraggingAndBlur, { signal });
+		});
+	}
+
+	#startDragging = (e: MouseEvent | TouchEvent) => {
+		e.preventDefault();
+
+		if (this.opts.disabled.current) return;
+		if (!this.#group.startDragging(this.opts.id.current, e)) return;
+		this.opts.onDraggingChange.current(true);
+	};
+
+	#stopDraggingAndBlur = () => {
+		const node = this.opts.ref.current;
+		if (!node) return;
+		node.blur();
+		this.#group.stopDragging();
+		this.opts.onDraggingChange.current(false);
+	};
+
+	#onkeydown: KeyboardEventHandler<HTMLElement> = (e) => {
+		if (this.opts.disabled.current || !this.resizeHandler || e.defaultPrevented) return;
+
+		if (resizeKeys.includes(e.key)) {
+			e.preventDefault();
+			this.resizeHandler(e);
+			return;
+		}
+
+		if (e.key !== 'F6') return;
+
+		e.preventDefault();
+
+		const handles = getResizeHandleElementsForGroup(this.#group.opts.id.current, this.domContext);
+		const index = getResizeHandleElementIndex({
+			groupId: this.#group.opts.id.current,
+			id: this.opts.id.current,
+			domContext: this.domContext,
+		});
+
+		if (index === null) return;
+
+		let nextIndex = 0;
+
+		if (e.shiftKey) {
+			// Moving backwards
+			if (index > 0) {
+				nextIndex = index - 1;
+			} else {
+				nextIndex = handles.length - 1;
+			}
+		} else {
+			// Moving forwards
+			if (index + 1 < handles.length) {
+				nextIndex = index + 1;
+			} else {
+				nextIndex = 0;
+			}
+		}
+
+		const nextHandle = handles[nextIndex]!;
+		nextHandle.focus();
+	};
+
+	#onblur: FocusEventHandler<HTMLElement> = () => {
+		this.#isFocused = false;
+	};
+
+	#onfocus: FocusEventHandler<HTMLElement> = () => {
+		this.#isFocused = true;
+	};
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: 'separator',
+				'data-direction': this.#group.opts.direction.current,
+				'data-pane-group-id': this.#group.opts.id.current,
+				'data-active': this.#isDragging ? 'pointer' : this.#isFocused ? 'keyboard' : undefined,
+				'data-enabled': !this.opts.disabled.current,
+				'data-pane-resizer-id': this.opts.id.current,
+				'data-pane-resizer': '',
+				tabIndex: this.opts.tabIndex.current,
+				style: {
+					cursor: getCursorStyle(this.#group.opts.direction.current),
+					touchAction: 'none',
+					userSelect: 'none',
+					'-webkit-user-select': 'none',
+					'-webkit-touch-callout': 'none',
+				},
+				onkeydown: this.#onkeydown,
+				onblur: this.#onblur,
+				onfocus: this.#onfocus,
+				onmousedown: this.#startDragging,
+				onmouseup: this.#stopDraggingAndBlur,
+				ontouchcancel: this.#stopDraggingAndBlur,
+				ontouchend: this.#stopDraggingAndBlur,
+				ontouchstart: this.#startDragging,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface PaneStateOpts
+	extends WithRefProps,
+		ReadableBoxedValues<{
+			collapsedSize: number | undefined;
+			collapsible: boolean | undefined;
+			defaultSize: number | undefined;
+			maxSize: number | undefined;
+			minSize: number | undefined;
+			order: number | undefined;
+			onCollapse: PaneOnCollapse;
+			onExpand: PaneOnExpand;
+			onResize: PaneOnResize;
+		}> {}
+
+export class PaneState {
+	static create(opts: PaneStateOpts) {
+		return new PaneState(opts, getPaneGroupContext());
+	}
+
+	readonly opts: PaneStateOpts;
+	readonly group: PaneGroupState;
+	readonly attachment: RefAttachment<HTMLElement>;
+	readonly domContext: DOMContext;
+
+	#paneTransitionState: PaneTransitionState = $state('');
+	readonly callbacks = $derived.by(() => ({
+		onCollapse: this.opts.onCollapse.current,
+		onExpand: this.opts.onExpand.current,
+		onResize: this.opts.onResize.current,
+	}));
+
+	readonly constraints = $derived.by(() => ({
+		collapsedSize: this.opts.collapsedSize.current,
+		collapsible: this.opts.collapsible.current,
+		defaultSize: this.opts.defaultSize.current,
+		maxSize: this.opts.maxSize.current,
+		minSize: this.opts.minSize.current,
+	}));
+
+	#handleTransition = (state: PaneTransitionState) => {
+		this.#paneTransitionState = state;
+		tick().then(() => {
+			if (this.opts.ref.current) {
+				const element = this.opts.ref.current;
+				const computedStyle = getComputedStyle(element);
+
+				const hasTransition = computedStyle.transitionDuration !== '0s';
+
+				if (!hasTransition) {
+					this.#paneTransitionState = '';
+					return;
+				}
+				const handleTransitionEnd = (event: TransitionEvent) => {
+					// Only handle width/flex transitions
+					if (event.propertyName === 'flex-grow') {
+						this.#paneTransitionState = '';
+						element.removeEventListener('transitionend', handleTransitionEnd);
+					}
+				};
+
+				// Always add the listener - if there's no transition, it won't fire
+				element.addEventListener('transitionend', handleTransitionEnd);
+			} else {
+				this.#paneTransitionState = '';
+			}
+		});
+	};
+
+	readonly pane = {
+		collapse: () => {
+			this.#handleTransition('collapsing');
+			this.group.collapsePane(this);
+		},
+		expand: () => {
+			this.#handleTransition('expanding');
+			this.group.expandPane(this);
+		},
+		getSize: () => this.group.getPaneSize(this),
+		isCollapsed: () => this.group.isPaneCollapsed(this),
+		isExpanded: () => this.group.isPaneExpanded(this),
+		resize: (size: number) => this.group.resizePane(this, size),
+		getId: () => this.opts.id.current,
+	};
+
+	constructor(opts: PaneStateOpts, group: PaneGroupState) {
+		this.opts = opts;
+		this.group = group;
+		this.attachment = attachRef(this.opts.ref);
+		this.domContext = new DOMContext(this.opts.ref);
+
+		onMount(() => {
+			return this.group.registerPane(this);
+		});
+
+		// constraints is a fresh plain object per recompute, so reading it is enough
+		// to re-run whenever any constraint option changes.
+		$effect(() => {
+			void this.constraints;
+			this.group.panesArrayChanged = true;
+		});
+	}
+
+	readonly #isCollapsed = $derived.by(() => this.group.isPaneCollapsed(this));
+	readonly #paneState = $derived.by(() => (this.#paneTransitionState !== '' ? this.#paneTransitionState : this.#isCollapsed ? 'collapsed' : 'expanded'));
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				style: this.group.getPaneStyle(this, this.opts.defaultSize.current),
+				'data-pane': '',
+				'data-pane-id': this.opts.id.current,
+				'data-pane-group-id': this.group.opts.id.current,
+				'data-collapsed': this.#isCollapsed ? '' : undefined,
+				'data-expanded': this.#isCollapsed ? undefined : '',
+				'data-pane-state': this.#paneState,
+				...this.attachment,
+			}) as const,
+	);
+}