npm - sheer-ui - Versions diffs - 0.4.2 → 0.5.0 - Mend

sheer-ui 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1531) hide show

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

@@ -1,821 +0,0 @@
-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,
-	);
-}