ropav 0.4.0 → 0.5.0

package/dist/components/splitter/splitter-handle.js

@@ -0,0 +1,209 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { useMove } from "../../composables/use-move.js";
+import { useNumberFormatter } from "../../composables/use-number-formatter.js";
+import { useSplitterContext } from "./splitter.context.js";
+import { child, computed, createIf, createSlot, defineVaporComponent, next, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
+//#region src/components/splitter/splitter-handle.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span aria-hidden=true data-slot=splitter-handle-grip>");
+var t1 = template("<div data-slot=splitter-handle role=separator><!><span aria-hidden=true data-slot=splitter-handle-target></span>", 1);
+var splitter_handle_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "splitter-handle",
+	props: {
+		class: {},
+		id: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		resetOnDoubleClick: {
+			type: Boolean,
+			default: true
+		},
+		showGrip: { type: Boolean },
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { isDisabled: groupIsDisabled, keyboardLargeStep, keyboardStep, orientation, rootEl, slots, state } = useSplitterContext();
+		const generatedId = useId$1();
+		const handleKey = computed(() => props.id ?? generatedId.value);
+		const element = shallowRef(null);
+		const isDisabled = computed(() => props.isDisabled ?? groupIsDisabled.value);
+		const isVertical = computed(() => orientation.value === "vertical");
+		watch([element, handleKey], ([current], _previous, onCleanup) => {
+			if (!current) return;
+			onCleanup(state.registerHandle(handleKey.value, {
+				element: () => element.value,
+				size: () => (isVertical.value ? element.value?.offsetHeight : element.value?.offsetWidth) ?? 0
+			}));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const states = useInteractionStates();
+		const isDragging = computed(() => state.resizingHandle.value === handleKey.value);
+		/** The delta accumulated since the drag opened; the state measures from its own snapshot. */
+		let total = 0;
+		/** Resolved once per gesture — reading it per `pointermove` would force a style recalc a frame. */
+		let isReversed = false;
+		const readDirection = () => {
+			const root = rootEl.value;
+			isReversed = !isVertical.value && !!root && getComputedStyle(root).direction === "rtl";
+		};
+		const { handlers: moveHandlers } = useMove({
+			onMove: ({ deltaX, deltaY, pointerType, shiftKey }) => {
+				let delta = isVertical.value ? deltaY : deltaX;
+				if (pointerType === "keyboard") delta *= shiftKey ? keyboardLargeStep.value : keyboardStep.value;
+				if (isReversed) delta = -delta;
+				if (delta === 0) return;
+				total += delta;
+				state.resize(handleKey.value, total);
+			},
+			onMoveEnd: () => {
+				total = 0;
+				state.endResize();
+			},
+			onMoveStart: () => {
+				total = 0;
+				readDirection();
+				state.startResize(handleKey.value);
+			}
+		});
+		const range = computed(() => state.handleRange(handleKey.value));
+		const percentFormatter = useNumberFormatter(() => ({ style: "percent" }));
+		const share = (pixels) => {
+			const available = state.availableSize.value;
+			return available > 0 ? Math.round(pixels / available * 100) : 0;
+		};
+		const valueNow = computed(() => range.value ? share(range.value.now) : 0);
+		const valueMin = computed(() => range.value ? Math.min(share(range.value.min), valueNow.value) : 0);
+		const valueMax = computed(() => range.value ? Math.max(share(range.value.max), valueNow.value) : 100);
+		const valueText = computed(() => percentFormatter.value.format(valueNow.value / 100));
+		const beforeId = computed(() => {
+			const pair = state.neighbours(handleKey.value);
+			if (!pair) return void 0;
+			return state.getPanel(state.panelKeys.value[pair.before])?.id();
+		});
+		/**
+		* `useMove` consumes every arrow key it knows before the consumer sees one, so the cross-axis
+		* arrows have to be kept away from it — otherwise a vertical splitter would swallow Left and Right
+		* and break horizontal scrolling inside its panels.
+		*/
+		const isAxisKey = (key) => isVertical.value ? key === "ArrowUp" || key === "ArrowDown" || key === "Up" || key === "Down" : key === "ArrowLeft" || key === "ArrowRight" || key === "Left" || key === "Right";
+		/** The panel `Enter` acts on: the one before the handle when it can shut, else the one after. */
+		const collapsibleNeighbour = () => {
+			const pair = state.neighbours(handleKey.value);
+			if (!pair) return null;
+			const keys = state.panelKeys.value;
+			for (const index of [pair.before, pair.after]) {
+				const key = keys[index];
+				if (key != null && state.getPanel(key)?.isCollapsible()) return key;
+			}
+			return null;
+		};
+		const jump = (delta) => {
+			state.startResize(handleKey.value);
+			state.resize(handleKey.value, delta);
+			state.endResize();
+		};
+		const onKeydown = (event) => {
+			if (isDisabled.value) return;
+			if (event.key === "Enter") {
+				const target = collapsibleNeighbour();
+				if (target == null) return;
+				event.preventDefault();
+				state.toggleCollapse(target);
+				return;
+			}
+			if (event.key === "Home" || event.key === "End") {
+				event.preventDefault();
+				jump(event.key === "Home" ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
+				return;
+			}
+			if (event.key === "Escape" && isDragging.value) {
+				event.preventDefault();
+				state.cancelResize();
+				return;
+			}
+			if (!isAxisKey(event.key)) return;
+			readDirection();
+			moveHandlers.onKeydown(event);
+		};
+		/**
+		* Reset rather than arithmetic: dropping the stored sizes lets the panels' declared defaults take
+		* over, and the solver refills the container by construction. A collapsed neighbour is reopened on
+		* the way, which is why this and `Enter` are separate gestures — one returns a panel to where the
+		* user left it, the other to where the author put it.
+		*/
+		const onDblclick = () => {
+			if (isDisabled.value || !props.resetOnDoubleClick) return;
+			const pair = state.neighbours(handleKey.value);
+			if (!pair) return;
+			const keys = state.panelKeys.value;
+			state.reset([keys[pair.before], keys[pair.after]]);
+		};
+		const onPointerdown = (event) => {
+			if (isDisabled.value) return;
+			states.onPointerdown(event);
+			moveHandlers.onPointerdown(event);
+		};
+		const n6 = t1();
+		const n5 = child(n6);
+		const n3 = next(n5);
+		renderEffect(() => {
+			const _isDisabled = isDisabled.value;
+			const _props = props;
+			const _dataAttr = unref(dataAttr);
+			const _states = unref(states);
+			setProp(n6, "id", unref(generatedId));
+			setAttr(n6, "aria-controls", beforeId.value);
+			setAttr(n6, "aria-disabled", _isDisabled || void 0);
+			setAttr(n6, "aria-label", _props.ariaLabel ?? "Resize panel");
+			setAttr(n6, "aria-labelledby", _props.ariaLabelledby);
+			setAttr(n6, "aria-orientation", isVertical.value ? "horizontal" : "vertical");
+			setAttr(n6, "aria-valuemax", valueMax.value);
+			setAttr(n6, "aria-valuemin", valueMin.value);
+			setAttr(n6, "aria-valuenow", valueNow.value);
+			setAttr(n6, "aria-valuetext", valueText.value);
+			setClass(n6, unref(composeSlotClassName)(unref(slots).handle, _props.class));
+			setAttr(n6, "data-disabled", _dataAttr(_isDisabled));
+			setAttr(n6, "data-dragging", _dataAttr(isDragging.value));
+			setAttr(n6, "data-focus-visible", _dataAttr(_states.isFocusVisible.value));
+			setAttr(n6, "data-focused", _dataAttr(_states.isFocused.value));
+			setAttr(n6, "data-hovered", _dataAttr(_states.isHovered.value));
+			setAttr(n6, "data-orientation", unref(orientation));
+			setProp(n6, "tabindex", _isDisabled ? -1 : 0);
+		});
+		setInsertionState(n6, n5);
+		createIf(() => props.showGrip, () => {
+			const n2 = t0();
+			renderEffect(() => setClass(n2, unref(composeSlotClassName)(unref(slots).handleGrip)));
+			return n2;
+		});
+		renderEffect(() => setClass(n3, unref(composeSlotClassName)(unref(slots).handleTarget)));
+		setInsertionState(n6, 2);
+		createSlot("default", {
+			isDisabled: () => isDisabled.value,
+			isDragging: () => isDragging.value,
+			isFocusVisible: () => unref(states).isFocusVisible.value,
+			isFocused: () => unref(states).isFocused.value,
+			isHovered: () => unref(states).isHovered.value,
+			orientation: () => unref(orientation)
+		});
+		on(n6, "blur", (e) => unref(states).onBlur(e));
+		on(n6, "dblclick", onDblclick);
+		on(n6, "focus", (e) => unref(states).onFocus(e));
+		on(n6, "keydown", onKeydown);
+		on(n6, "pointerdown", onPointerdown);
+		on(n6, "pointerenter", (e) => unref(states).onPointerenter(e));
+		on(n6, "pointerleave", (e) => unref(states).onPointerleave(e));
+		setStaticTemplateRef(n6, element, null, "element");
+		return n6;
+	}
+});
+//#endregion
+export { splitter_handle_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/splitter/splitter-panel.d.ts

@@ -0,0 +1,21 @@
+import type { SplitterPanelProps, SplitterPanelSlotProps } from "./splitter.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SplitterPanelProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SplitterPanelSlotProps) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/splitter/splitter-panel.js

@@ -0,0 +1,70 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { useSplitterContext } from "./splitter.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, unref, watch } from "vue";
+//#region src/components/splitter/splitter-panel.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=splitter-panel>", 1);
+var splitter_panel_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "splitter-panel",
+	props: {
+		class: {},
+		id: {},
+		size: {},
+		defaultSize: {},
+		minSize: {},
+		maxSize: {},
+		isCollapsible: {
+			type: Boolean,
+			default: void 0
+		},
+		collapsedSize: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { orientation, slots, state } = useSplitterContext();
+		const generatedId = useId$1();
+		const panelKey = computed(() => props.id ?? generatedId.value);
+		const element = shallowRef(null);
+		watch([element, panelKey], ([current], _previous, onCleanup) => {
+			if (!current) return;
+			onCleanup(state.registerPanel(panelKey.value, {
+				collapsedSize: () => props.collapsedSize,
+				defaultSize: () => props.defaultSize,
+				element: () => element.value,
+				id: () => generatedId.value,
+				isCollapsible: () => Boolean(props.isCollapsible),
+				maxSize: () => props.maxSize,
+				minSize: () => props.minSize,
+				size: () => props.size
+			}));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const size = computed(() => state.getPanelSize(panelKey.value));
+		const isCollapsed = computed(() => state.isCollapsed(panelKey.value));
+		const style = computed(() => state.layout.value.length > 0 ? { flex: `0 0 ${size.value}px` } : void 0);
+		const n1 = t0();
+		renderEffect(() => {
+			const _isCollapsed = isCollapsed.value;
+			setProp(n1, "id", unref(generatedId));
+			setClass(n1, unref(composeSlotClassName)(unref(slots).panel, props.class));
+			setAttr(n1, "data-collapsed", unref(dataAttr)(_isCollapsed));
+			setAttr(n1, "data-orientation", unref(orientation));
+			setProp(n1, "inert", _isCollapsed || void 0);
+			setStyle(n1, style.value);
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isCollapsed: () => isCollapsed.value,
+			isCollapsible: () => Boolean(props.isCollapsible),
+			orientation: () => unref(orientation),
+			size: () => size.value
+		});
+		setStaticTemplateRef(n1, element, null, "element");
+		return n1;
+	}
+});
+//#endregion
+export { splitter_panel_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/splitter/splitter-root.d.ts

@@ -0,0 +1,31 @@
+import type { CollectionKey } from "../../composables/use-collection.js";
+import type { SplitterRootProps, SplitterSlotProps } from "./splitter.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SplitterRootProps & {
+        onCollapse?: ((key: CollectionKey) => any) | undefined;
+        onExpand?: ((key: CollectionKey) => any) | undefined;
+        onResize?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+        onResizeEnd?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+        onResizeStart?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+        "onUpdate:sizes"?: ((sizes: import("../../utils/flex-sizing.js").FlexSize[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        measure: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SplitterSlotProps) => unknown;
+    };
+    emit: ((evt: "collapse", key: CollectionKey) => void) & ((evt: "expand", key: CollectionKey) => void) & ((evt: "resize", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeEnd", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "resizeStart", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void) & ((evt: "update:sizes", sizes: import("../../utils/flex-sizing.js").FlexSize[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/splitter/splitter-root.js

@@ -0,0 +1,152 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { provideSplitterContext } from "./splitter.context.js";
+import { useSplitterState } from "./splitter.state.js";
+import { readSplitterLayout, writeSplitterLayout } from "./splitter.storage.js";
+import { computed, createSlot, defineVaporComponent, onMounted, onUnmounted, renderEffect, setAttr, setClass, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
+import { splitterVariants } from "@ropav/styles";
+//#region src/components/splitter/splitter-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=splitter role=group>", 1);
+var splitter_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "splitter-root",
+	props: {
+		class: {},
+		orientation: {},
+		sizes: {},
+		defaultSizes: {},
+		autoSaveId: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		keyboardStep: {},
+		keyboardLargeStep: {},
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	emits: [
+		"update:sizes",
+		"resizeStart",
+		"resize",
+		"resizeEnd",
+		"collapse",
+		"expand"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const element = shallowRef(null);
+		const state = useSplitterState({
+			defaultSizes: () => props.defaultSizes,
+			isDisabled: () => props.isDisabled,
+			onCollapse: (key) => {
+				emit("collapse", key);
+				schedulePersist();
+			},
+			onExpand: (key) => {
+				emit("expand", key);
+				schedulePersist();
+			},
+			onResizeEnd: (sizes) => emit("resizeEnd", sizes),
+			onResizeStart: (sizes) => emit("resizeStart", sizes),
+			onSizesChange: (sizes) => {
+				emit("update:sizes", sizes);
+				emit("resize", sizes);
+				schedulePersist();
+			},
+			orientation: () => props.orientation,
+			sizes: () => props.sizes
+		});
+		const orientation = computed(() => state.orientation.value);
+		/**
+		* `clientWidth`/`clientHeight` rather than a bounding rect: it already excludes the scrollbar, and
+		* a splitter laid out inside something hidden reports zero, which is what the state's guard wants.
+		*/
+		const measure = () => {
+			const root = element.value;
+			if (!root) return;
+			state.setAvailableSize(orientation.value === "vertical" ? root.clientHeight : root.clientWidth);
+		};
+		let observer;
+		onMounted(() => {
+			measure();
+			if (typeof ResizeObserver === "undefined" || !element.value) return;
+			observer = new ResizeObserver(measure);
+			observer.observe(element.value, { box: "border-box" });
+		});
+		let pending;
+		const persist = () => {
+			if (!props.autoSaveId) return;
+			writeSplitterLayout(props.autoSaveId, orientation.value, state.panelKeys.value, state.sizes.value, state.isCollapsed);
+		};
+		const schedulePersist = () => {
+			if (!props.autoSaveId || isRestoring) return;
+			if (pending) clearTimeout(pending);
+			pending = setTimeout(function write() {
+				if (state.resizingHandle.value != null) {
+					pending = setTimeout(write, 150);
+					return;
+				}
+				pending = void 0;
+				persist();
+			}, 150);
+		};
+		let isRestoring = false;
+		const stop = watch(() => state.panelKeys.value, (keys) => {
+			if (!props.autoSaveId || keys.length === 0) return;
+			stop();
+			const restored = readSplitterLayout(props.autoSaveId, orientation.value, keys);
+			if (!restored) return;
+			isRestoring = true;
+			state.setSizes(restored.sizes);
+			for (const key of restored.collapsed) state.collapse(key);
+			isRestoring = false;
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const flush = () => {
+			if (!pending) return;
+			clearTimeout(pending);
+			pending = void 0;
+			persist();
+		};
+		onUnmounted(() => {
+			observer?.disconnect();
+			flush();
+		});
+		const styles = computed(() => splitterVariants({ orientation: orientation.value }));
+		provideSplitterContext({
+			isDisabled: state.isDisabled,
+			keyboardLargeStep: computed(() => props.keyboardLargeStep ?? 50),
+			keyboardStep: computed(() => props.keyboardStep ?? 10),
+			orientation,
+			rootEl: computed(() => element.value),
+			slots: styles,
+			state
+		});
+		__expose({ measure });
+		const n1 = t0();
+		renderEffect(() => {
+			const _props = props;
+			const _dataAttr = unref(dataAttr);
+			const _state = unref(state);
+			setAttr(n1, "aria-label", _props.ariaLabel);
+			setAttr(n1, "aria-labelledby", _props.ariaLabelledby);
+			setClass(n1, styles.value.base({ class: _props.class }));
+			setAttr(n1, "data-disabled", _dataAttr(_state.isDisabled.value));
+			setAttr(n1, "data-dragging", _dataAttr(_state.resizingHandle.value != null));
+			setAttr(n1, "data-orientation", orientation.value);
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isDisabled: () => unref(state).isDisabled.value,
+			isDragging: () => unref(state).resizingHandle.value != null,
+			layout: () => unref(state).layout.value,
+			orientation: () => orientation.value
+		});
+		setStaticTemplateRef(n1, element, null, "element");
+		return n1;
+	}
+});
+//#endregion
+export { splitter_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/splitter/splitter.context.d.ts

@@ -0,0 +1,15 @@
+import type { SplitterOrientation, SplitterState } from "./splitter.state.js";
+import type { splitterVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface SplitterContext {
+    slots: ComputedRef<ReturnType<typeof splitterVariants>>;
+    state: SplitterState;
+    /** Handed down rather than re-read, so a nested splitter cannot inherit the outer axis. */
+    orientation: ComputedRef<SplitterOrientation>;
+    isDisabled: ComputedRef<boolean>;
+    keyboardStep: ComputedRef<number>;
+    keyboardLargeStep: ComputedRef<number>;
+    /** The root element. The RTL check is read off it, and the measurement is taken from it. */
+    rootEl: ComputedRef<HTMLElement | null>;
+}
+export declare const useSplitterContext: () => SplitterContext, provideSplitterContext: (value: SplitterContext) => SplitterContext;

package/dist/components/splitter/splitter.context.js

@@ -0,0 +1,5 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/splitter/splitter.context.ts
+var [useSplitterContext, provideSplitterContext] = createContext({ name: "SplitterContext" });
+//#endregion
+export { provideSplitterContext, useSplitterContext };

package/dist/components/splitter/splitter.state.d.ts

@@ -0,0 +1,87 @@
+import type { CollectionKey } from "../../composables/use-collection.js";
+import type { FlexSize } from "../../utils/flex-sizing.js";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/** A panel size: pixels as a number or a `px` string, a percentage, or a fraction of what is left. */
+export type SplitterSize = FlexSize;
+export type SplitterOrientation = "horizontal" | "vertical";
+/**
+ * What a panel tells the splitter about itself.
+ *
+ * Held as getters rather than values, so a panel registers once and the splitter always reads its
+ * current props. Nothing has to re-register when a `minSize` changes.
+ */
+export interface SplitterPanelMeta {
+    element: () => HTMLElement | null;
+    /** The panel's DOM id, which the handle beside it points `aria-controls` at. */
+    id: () => string;
+    size: () => SplitterSize | null | undefined;
+    defaultSize: () => SplitterSize | null | undefined;
+    minSize: () => SplitterSize | null | undefined;
+    maxSize: () => SplitterSize | null | undefined;
+    isCollapsible: () => boolean;
+    collapsedSize: () => SplitterSize | null | undefined;
+}
+export interface SplitterHandleMeta {
+    element: () => HTMLElement | null;
+    size: () => number;
+}
+export interface UseSplitterStateOptions {
+    orientation: MaybeRefOrGetter<SplitterOrientation | undefined>;
+    isDisabled: MaybeRefOrGetter<boolean | undefined>;
+    /** Declared sizes in panel order. Set, the splitter never writes its own state. */
+    sizes: MaybeRefOrGetter<SplitterSize[] | undefined>;
+    defaultSizes: MaybeRefOrGetter<SplitterSize[] | undefined>;
+    onSizesChange?: (sizes: SplitterSize[]) => void;
+    /** A gesture opened. Fires on the first movement, not on the press before it. */
+    onResizeStart?: (sizes: SplitterSize[]) => void;
+    /** A gesture closed, let go of or cancelled. Reports where the panels actually landed. */
+    onResizeEnd?: (sizes: SplitterSize[]) => void;
+    onCollapse?: (key: CollectionKey) => void;
+    onExpand?: (key: CollectionKey) => void;
+}
+export interface SplitterState {
+    orientation: ComputedRef<SplitterOrientation>;
+    isDisabled: ComputedRef<boolean>;
+    panelKeys: ComputedRef<CollectionKey[]>;
+    registerPanel: (key: CollectionKey, meta: SplitterPanelMeta) => () => void;
+    registerHandle: (key: CollectionKey, meta: SplitterHandleMeta) => () => void;
+    getPanel: (key: CollectionKey) => SplitterPanelMeta | undefined;
+    /** The panels a handle divides, as indexes into `panelKeys`. */
+    neighbours: (handleKey: CollectionKey) => {
+        before: number;
+        after: number;
+    } | null;
+    /** What the panels divide: the container less every handle. Zero until the root measures. */
+    availableSize: ComputedRef<number>;
+    setAvailableSize: (size: number) => void;
+    /** Every panel's resolved size in pixels, in panel order. Empty while unmeasured. */
+    layout: ComputedRef<number[]>;
+    getPanelSize: (key: CollectionKey) => number;
+    isCollapsed: (key: CollectionKey) => boolean;
+    /**
+     * Where the edge sits and how far it could travel, in pixels, measured on the panel before it.
+     * The ends come from running the cascade rather than from that panel's own bounds, so they
+     * report what the handle can actually reach given every neighbour's constraints.
+     */
+    handleRange: (handleKey: CollectionKey) => {
+        now: number;
+        min: number;
+        max: number;
+    } | null;
+    resizingHandle: ComputedRef<CollectionKey | null>;
+    startResize: (handleKey: CollectionKey) => void;
+    /** Apply a pixel delta measured from the snapshot `startResize` took. */
+    resize: (handleKey: CollectionKey, totalDelta: number) => void;
+    endResize: () => void;
+    /** Put the panels back where the drag opened, reported like any other move. */
+    cancelResize: () => void;
+    collapse: (key: CollectionKey) => void;
+    expand: (key: CollectionKey) => void;
+    toggleCollapse: (key: CollectionKey) => void;
+    /** Drop the stored sizes for these panels, so their declared defaults take over again. */
+    reset: (keys: CollectionKey[]) => void;
+    /** Declared sizes in panel order — what `v-model:sizes` carries and what is persisted. */
+    sizes: ComputedRef<SplitterSize[]>;
+    setSizes: (sizes: SplitterSize[]) => void;
+}
+export declare const useSplitterState: (options: UseSplitterStateOptions) => SplitterState;