npm - sheer-ui - Versions diffs - 0.0.0 - Mend

sheer-ui 0.0.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 (635) hide show

package/src/lib/internal/native-dialog-controller.svelte.ts ADDED Viewed

@@ -0,0 +1,102 @@
+import type { EscapeBehaviorType } from './escape-layer/types.js';
+import type { InteractOutsideBehaviorType } from './dismissible-layer/types.js';
+import { getTabbableCandidates } from './tabbable.js';
+import { createSettleRunner } from './animations-settled.svelte.js';
+import type { Getter } from './tools/index.js';
+import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+import { on } from 'svelte/events';
+import { getAbortSignal } from 'svelte';
+type NativeDialogControllerOptions = {
+	open: Getter<boolean>;
+	onClose: () => void;
+	outsideEvent?: 'pointerdown' | 'click';
+	onInteractOutside?: Getter<(event: PointerEvent) => void>;
+	interactOutsideBehavior?: Getter<InteractOutsideBehaviorType>;
+	onEscapeKeydown?: Getter<(event: KeyboardEvent) => void>;
+	escapeKeydownBehavior?: Getter<EscapeBehaviorType>;
+	trapFocus?: Getter<boolean>;
+};
+/**
+ * Bridges declarative open state to the native dialog top layer and centralizes native dismissal,
+ * veto, cleanup, and optional sequential-focus wrapping. Visual policy stays with each adapter.
+ */
+export function nativeDialogControllerAttachment(options: NativeDialogControllerOptions) {
+	const controller = ((node: HTMLDialogElement) => {
+		// Every dismissal routes through options.onClose() → root state → this effect, never
+		// node.close() directly: close() hides the dialog the same frame (`overlay` is
+		// Chromium-only and WebKit doesn't start display/top-layer transitions at all —
+		// bug 275184), so the exit ride is a data-[state=closed] keyframe animation played
+		// while the dialog is still open, and close() fires only once it settles.
+		const closeSettle = createSettleRunner({ subtree: false });
+		$effect(() => {
+			if (options.open()) {
+				closeSettle.cancel();
+				if (!node.open) node.showModal();
+			} else if (node.open) {
+				// An open flip re-runs this effect and cancels the runner first; node.open covers a
+				// UA-initiated close in the meantime.
+				closeSettle.run(node, () => {
+					if (node.open) node.close();
+				});
+			}
+		});
+		const signal = getAbortSignal();
+		on(node, 'close', options.onClose, { signal });
+		const handleInteractOutside = (event: PointerEvent) => {
+			if (event.target !== node) return;
+			const shim = new PointerEvent('pointerdown', { cancelable: true });
+			options.onInteractOutside?.()(shim);
+			if (shim.defaultPrevented || options.interactOutsideBehavior?.() === 'ignore') return;
+			options.onClose();
+		};
+		if (options.outsideEvent === 'pointerdown') on(node, 'pointerdown', handleInteractOutside, { signal });
+		else if (options.outsideEvent === 'click') on(node, 'click', handleInteractOutside, { signal });
+		on(
+			node,
+			'cancel',
+			(event) => {
+				// Always prevent the native instant close; a permitted Escape closes through state
+				// so the exit animation runs first.
+				event.preventDefault();
+				const shim = new KeyboardEvent('keydown', { key: 'Escape', cancelable: true });
+				options.onEscapeKeydown?.()(shim);
+				if (shim.defaultPrevented || options.escapeKeydownBehavior?.() === 'ignore') return;
+				options.onClose();
+			},
+			{ signal },
+		);
+		// Load-bearing, not redundant with showModal(): verified in Chromium 2026-07-27 —
+		// without this, Tab past the last tabbable parks focus on <body> for one step.
+		if (options.trapFocus) {
+			on(
+				node,
+				'keydown',
+				(event) => {
+					if (event.key !== 'Tab' || !options.trapFocus?.()) return;
+					const tabbables = getTabbableCandidates(node);
+					if (tabbables.length === 0) return;
+					const first = tabbables[0]!;
+					const last = tabbables[tabbables.length - 1]!;
+					const active = node.ownerDocument.activeElement;
+					if (!event.shiftKey && active === last) {
+						event.preventDefault();
+						first.focus();
+					} else if (event.shiftKey && active === first) {
+						event.preventDefault();
+						last.focus();
+					}
+				},
+				{ signal },
+			);
+		}
+	}) satisfies Attachment<HTMLDialogElement>;
+	return { [createAttachmentKey()]: controller };
+}

package/src/lib/internal/native-popover.svelte.ts ADDED Viewed

@@ -0,0 +1,173 @@
+import type { Getter } from './tools/index.js';
+import { on } from 'svelte/events';
+import { createSettleRunner, useOpenChangeComplete } from './animations-settled.svelte.js';
+/** Per-surface CSS anchor names; client-only (the lifecycle effect never runs in SSR). */
+let anchorSequence = 0;
+type NativePopoverAnchor = HTMLElement | string | null | undefined | object;
+/**
+ * The slice of a content state the lifecycle drives — popover, tooltip, and
+ * link-preview content states all expose this shape, so the hook takes the
+ * state itself instead of a getter per field.
+ *
+ * `manual` mode requires the two dismissal handlers; `auto` mode requires `dismiss`
+ * (the UA decides *when* to close, the state only has to follow).
+ */
+interface NativePopoverContentState {
+	readonly root: {
+		readonly opts: {
+			readonly open: { readonly current: boolean };
+			readonly onOpenChangeComplete: { readonly current: (open: boolean) => void };
+		};
+		readonly triggerNode: HTMLElement | null;
+	};
+	readonly opts: {
+		readonly ref: { readonly current: HTMLElement | null };
+	};
+	onEscapeKeydown?: (event: KeyboardEvent) => void;
+	onInteractOutside?: (event: PointerEvent) => void;
+	dismiss?: () => void;
+}
+const resolveNativePopoverAnchor = (anchor: NativePopoverAnchor, fallback: HTMLElement | null | undefined) =>
+	typeof anchor === 'string'
+		? document.querySelector<HTMLElement>(anchor)
+		: anchor instanceof HTMLElement
+			? anchor
+			: (fallback ?? null);
+/**
+ * Drives a native popover surface from a content state: open/close via
+ * showPopover()/hidePopover() (anchored to the trigger, or the `anchor` override) and
+ * onOpenChangeComplete once the surface's own animations settle.
+ *
+ * `mode: 'auto'` (Popover) hands dismissal to the UA — light dismiss and Escape run
+ * through the browser's top-layer stack, so stacked surfaces close one per Escape —
+ * and syncs UA-initiated closes back into state via the `toggle` event. `manual`
+ * (Tooltip, LinkPreview — they need `popover="hint"`, which Safari lacks as of
+ * 2026-07) keeps document-level Escape / outside-pointerdown listeners; those bypass
+ * bitsEscapeLayers, so a manual surface over a JS-stack menu still closes both on one
+ * Escape.
+ *
+ * Returns the anchored-surface prop bag (`popover`, `data-anchored`) — the JS half of
+ * the contract whose CSS half lives in ui.css under `[data-anchored]` — so surfaces
+ * merge it instead of restating it.
+ */
+export function useNativePopoverLifecycle(
+	state: NativePopoverContentState,
+	options: { anchor?: Getter<NativePopoverAnchor>; mode?: 'auto' | 'manual' } = {},
+) {
+	const mode = options.mode ?? 'manual';
+	const ref = () => state.opts.ref.current;
+	const open = () => state.root.opts.open.current;
+	// The surface's own animations gate the deferred hide; a long-running descendant
+	// animation (a chart entry inside a popover) must not hold the top layer.
+	const exitSettle = createSettleRunner({ subtree: false });
+	// Anchoring is entirely the source element, so the anchor is frozen at the
+	// last show; a reopen against a different trigger/customAnchor must re-show, not no-op.
+	let shownSource: HTMLElement | null = null;
+	// Explicit CSS anchor per surface: showPopover({source})'s implicit anchor is Chrome 137+
+	// only — without it, anchor() in the [data-anchored] rules has nothing to resolve against
+	// in Firefox and Safari, and the surface lands over its own trigger (which also swallowed
+	// the trigger's close click). anchor-name is a list, so a source that already carries one
+	// (a menu trigger sharing the element) keeps it.
+	const anchorName = `--bits-popover-anchor-${++anchorSequence}`;
+	const nameAnchor = (source: HTMLElement) => {
+		const existing = source.style.anchorName || '';
+		if (!existing || existing === 'none') source.style.anchorName = anchorName;
+		else if (!existing.split(',').some((n) => n.trim() === anchorName)) source.style.anchorName = `${existing}, ${anchorName}`;
+	};
+	const unnameAnchor = (source: HTMLElement) => {
+		const rest = (source.style.anchorName || '')
+			.split(',')
+			.map((n) => n.trim())
+			.filter((n) => n && n !== anchorName && n !== 'none');
+		if (rest.length) source.style.anchorName = rest.join(', ');
+		else source.style.removeProperty('anchor-name');
+	};
+	$effect(() => () => {
+		if (shownSource) unnameAnchor(shownSource);
+	});
+	$effect(() => {
+		const el = ref();
+		const isOpen = open();
+		if (!el?.isConnected || typeof el.showPopover !== 'function') return;
+		if (isOpen) {
+			exitSettle.cancel(); // a reopen mid-exit keeps the surface shown
+			const source = resolveNativePopoverAnchor(options.anchor?.(), state.root.triggerNode);
+			if (el.matches(':popover-open')) {
+				if (source === shownSource) return;
+				el.hidePopover(); // re-anchor: hide+show against the new source in one pass
+			}
+			if (shownSource && shownSource !== source) unnameAnchor(shownSource);
+			if (source) {
+				nameAnchor(source);
+				el.style.positionAnchor = anchorName;
+			} else {
+				el.style.removeProperty('position-anchor');
+			}
+			// The implicit source still matters where it works: in `auto` mode it makes the UA
+			// exempt the invoker from light dismiss (Chrome 137+).
+			source ? (el.showPopover as (options: { source: HTMLElement }) => void).call(el, { source }) : el.showPopover();
+			shownSource = source;
+			return;
+		}
+		if (!el.matches(':popover-open')) return; // the UA already hid it (light dismiss, Escape)
+		// The exiting surface is inert-adjacent but still in the tab order; hand focus back to
+		// the trigger now rather than letting Tab land inside a closing popover.
+		if (el.contains(el.ownerDocument.activeElement)) state.root.triggerNode?.focus();
+		// Hold the popover in the top layer while the [data-state=closed] exit runs, then hide.
+		// `overlay` transitions are Chrome-only, so an immediate hidePopover() snaps the exit
+		// in Firefox and Safari; the surfaces key their exit on data-state, not :popover-open.
+		exitSettle.run(el, () => {
+			if (!open() && el.matches(':popover-open')) el.hidePopover();
+		});
+	});
+	useOpenChangeComplete(open, ref, (isOpen) => state.root.opts.onOpenChangeComplete.current(isOpen));
+	if (mode === 'auto') {
+		// The UA closes the popover itself (light dismiss, Escape, another auto popover opening);
+		// `toggle` is where library state finds out and follows.
+		$effect(() => {
+			const el = ref();
+			if (!el) return;
+			return on(el, 'toggle', (event) => {
+				if ((event as ToggleEvent).newState === 'closed' && open()) state.dismiss?.();
+			});
+		});
+	} else {
+		$effect(() => {
+			if (!open()) return;
+			const offKey = on(document, 'keydown', (event) => {
+				if (event.key === 'Escape') state.onEscapeKeydown?.(event);
+			});
+			const offPointer = on(
+				document,
+				'pointerdown',
+				(event) => {
+					const target = event.target as Node | null;
+					// inside the popover or its trigger — not an outside interaction
+					if (ref()?.contains(target ?? null) || state.root.triggerNode?.contains(target ?? null)) return;
+					state.onInteractOutside?.(event);
+				},
+				{ capture: true },
+			);
+			return () => {
+				offKey();
+				offPointer();
+			};
+		});
+	}
+	return { popover: mode, 'data-anchored': '' } as const;
+}

package/src/lib/internal/open-cell.svelte.ts ADDED Viewed

@@ -0,0 +1,41 @@
+/**
+ * An overlay's open-state cell: pure signals, no effects. LIBRARY-INTERNAL — the
+ * class is deliberately absent from the package exports (state-flow hard rule:
+ * consumers never construct or hold library state; apps drive overlays via the
+ * `open` source prop and reconcile via onOpenChangeComplete). Roots construct it,
+ * and library blocks/wrappers (AlertModal, menubar-menu) may hand one to a root
+ * via its `state` prop. Reading and writing `open` is the whole API: the overlay's
+ * trigger/close/dismiss machinery and any markup, deriveds, or effects are all
+ * dependents of the same signal — there is no change callback and nothing to wire.
+ *
+ * An optional `source` makes `open` a writable derived: it re-derives whenever
+ * the source changes (a route param, `editing !== null`, an external machine's
+ * open), and direct writes — Escape, a Close button, `cell.open = false` —
+ * override it until the next source change.
+ *
+ * An optional `write` makes the cell delegate instead of own: direct writes
+ * are forwarded to it and the source stays authoritative, so an external
+ * machine (e.g. the alertModal store) hears a self-close the moment it
+ * happens rather than reconciling after the animation. Without it the cell
+ * owns the override — own-or-delegate.
+ */
+export class OpenCell {
+	readonly #source?: () => boolean;
+	readonly #write?: (open: boolean) => void;
+	#open: boolean = $derived.by(() => this.#source?.() ?? false);
+	constructor(source?: () => boolean, write?: (open: boolean) => void) {
+		this.#source = source;
+		this.#write = write;
+	}
+	get open(): boolean {
+		return this.#open;
+	}
+	set open(next: boolean) {
+		if (next === this.#open) return;
+		if (this.#write) this.#write(next);
+		else this.#open = next;
+	}
+}

package/src/lib/internal/paneforge/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export { default as PaneGroup } from './pane-group.svelte';
+export { default as Pane } from './pane.svelte';
+export { default as PaneResizer } from './pane-resizer.svelte';
+export type * from './types.js';
+export type { PaneGroupStorage } from './internal/utils/storage.js';

package/src/lib/internal/paneforge/internal/constants.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
2	+ export const PRECISION = 10;

package/src/lib/internal/paneforge/internal/helpers.ts ADDED Viewed

@@ -0,0 +1,354 @@
+import type { PaneState } from '../paneforge.svelte.js';
+import type { DOMContext } from '../../tools/index.js';
+import { BROWSER } from 'esm-env';
+import { isHTMLElement } from '../../tools/utils/dom.js';
+import type { Direction, DragState, PaneConstraints, ResizeEvent } from './types.js';
+import { calculateAriaValues } from './utils/aria.js';
+import { areNumbersAlmostEqual } from './utils/compare.js';
+import { isKeyDown, isMouseEvent, isTouchEvent } from './utils/is.js';
+import { resizePane } from './utils/resize.js';
+interface UpdateResizeHandleAriaValuesOpts {
+	groupId: string;
+	layout: number[];
+	panesArray: PaneState[];
+	domContext: DOMContext;
+}
+export function updateResizeHandleAriaValues({ groupId, layout, panesArray, domContext }: UpdateResizeHandleAriaValuesOpts) {
+	const resizeHandleElements = getResizeHandleElementsForGroup(groupId, domContext);
+	for (let index = 0; index < panesArray.length - 1; index++) {
+		const { valueMax, valueMin, valueNow } = calculateAriaValues({
+			layout,
+			panesArray: panesArray,
+			pivotIndices: [index, index + 1],
+		});
+		const resizeHandleEl = resizeHandleElements[index];
+		if (isHTMLElement(resizeHandleEl)) {
+			const paneData = panesArray[index]!;
+			resizeHandleEl.setAttribute('aria-controls', paneData.opts.id.current);
+			resizeHandleEl.setAttribute('aria-valuemax', `${Math.round(valueMax)}`);
+			resizeHandleEl.setAttribute('aria-valuemin', `${Math.round(valueMin)}`);
+			resizeHandleEl.setAttribute('aria-valuenow', valueNow != null ? `${Math.round(valueNow)}` : '');
+		}
+	}
+	return () => {
+		for (const el of resizeHandleElements) {
+			el.removeAttribute('aria-controls');
+			el.removeAttribute('aria-valuemax');
+			el.removeAttribute('aria-valuemin');
+			el.removeAttribute('aria-valuenow');
+		}
+	};
+}
+export function getResizeHandleElementsForGroup(groupId: string, domContext: DOMContext): HTMLElement[] {
+	if (!BROWSER) return [];
+	return Array.from(domContext.querySelectorAll(`[data-pane-resizer-id][data-pane-group-id="${groupId}"]`) as NodeListOf<HTMLElement>);
+}
+interface GetResizeHandleElementIndexOpts {
+	groupId: string;
+	id: string;
+	domContext: DOMContext;
+}
+export function getResizeHandleElementIndex({ groupId, id, domContext }: GetResizeHandleElementIndexOpts): number | null {
+	if (!BROWSER) return null;
+	const handles = getResizeHandleElementsForGroup(groupId, domContext);
+	const index = handles.findIndex((handle) => handle.getAttribute('data-pane-resizer-id') === id);
+	return index < 0 ? null : index;
+}
+type GetPivotIndicesOpts = {
+	groupId: string;
+	dragHandleId: string;
+	domContext: DOMContext;
+};
+export function getPivotIndices({
+	groupId,
+	dragHandleId,
+	domContext,
+}: GetPivotIndicesOpts): [indexBefore: number, indexAfter: number] | null {
+	const index = getResizeHandleElementIndex({
+		groupId,
+		id: dragHandleId,
+		domContext: domContext,
+	});
+	return index == null ? null : [index, index + 1];
+}
+export function paneDataHelper(panesArray: PaneState[], pane: PaneState, layout: number[]) {
+	const paneConstraintsArray = panesArray.map((paneData) => paneData.constraints);
+	const paneIndex = findPaneDataIndex(panesArray, pane);
+	const paneConstraints = paneConstraintsArray[paneIndex];
+	const isLastPane = paneIndex === panesArray.length - 1;
+	const pivotIndices: [number, number] | null =
+		paneIndex < 0 || panesArray.length < 2 ? null : isLastPane ? [paneIndex - 1, paneIndex] : [paneIndex, paneIndex + 1];
+	const paneSize = layout[paneIndex];
+	return {
+		...paneConstraints,
+		paneSize,
+		pivotIndices,
+	};
+}
+export function findPaneDataIndex(panesArray: readonly PaneState[], pane: PaneState) {
+	return panesArray.findIndex((prevPaneData) => prevPaneData.opts.id.current === pane.opts.id.current);
+}
+// Layout should be pre-converted into percentages
+export function callPaneCallbacks(panesArray: PaneState[], layout: number[], paneIdToLastNotifiedSizeMap: Record<string, number>) {
+	for (const [index, paneData] of panesArray.entries()) {
+		const size = layout[index];
+		if (size == null) continue;
+		const { collapsedSize = 0, collapsible } = paneData.constraints;
+		const lastNotifiedSize = paneIdToLastNotifiedSizeMap[paneData.opts.id.current];
+		// invert the logic from below
+		if (!(lastNotifiedSize == null || size !== lastNotifiedSize)) continue;
+		paneIdToLastNotifiedSizeMap[paneData.opts.id.current] = size;
+		const { onCollapse, onExpand, onResize } = paneData.callbacks;
+		onResize?.(size, lastNotifiedSize);
+		if (collapsible && (onCollapse || onExpand)) {
+			if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+				onExpand();
+			}
+			if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+				onCollapse();
+			}
+		}
+	}
+}
+export function getUnsafeDefaultLayout({ panesArray }: { panesArray: PaneState[] }): number[] {
+	const layout = Array<number>(panesArray.length);
+	let numPanesWithSizes = 0;
+	let remainingSize = 100;
+	// Distribute default sizes first
+	for (const [index, paneData] of panesArray.entries()) {
+		const { defaultSize } = paneData.constraints;
+		if (defaultSize != null) {
+			numPanesWithSizes++;
+			layout[index] = defaultSize;
+			remainingSize -= defaultSize;
+		}
+	}
+	// Remaining size should be distributed evenly between panes without default sizes
+	for (const [index, paneData] of panesArray.entries()) {
+		const { defaultSize } = paneData.constraints;
+		if (defaultSize != null) {
+			continue;
+		}
+		const numRemainingPanes = panesArray.length - numPanesWithSizes;
+		const size = remainingSize / numRemainingPanes;
+		numPanesWithSizes++;
+		layout[index] = size;
+		remainingSize -= size;
+	}
+	return layout;
+}
+// All units must be in percentages
+export function validatePaneGroupLayout({
+	layout: prevLayout,
+	paneConstraints,
+}: {
+	layout: number[];
+	paneConstraints: PaneConstraints[];
+}): number[] {
+	const nextLayout = [...prevLayout];
+	const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+	// Validate layout expectations
+	if (nextLayout.length !== paneConstraints.length) {
+		throw new Error(`Invalid ${paneConstraints.length} pane layout: ${nextLayout.map((size) => `${size}%`).join(', ')}`);
+	}
+	for (let index = 0; index < nextLayout.length; index++) {
+		if (nextLayout[index] == null || paneConstraints[index] == null) {
+			throw new Error(`Invalid pane layout entry at index ${index}.`);
+		}
+	}
+	if (!areNumbersAlmostEqual(nextLayoutTotalSize, 100)) {
+		for (const [index, unsafeSize] of nextLayout.entries()) {
+			const safeSize = (100 / nextLayoutTotalSize) * unsafeSize;
+			nextLayout[index] = safeSize;
+		}
+	}
+	let remainingSize = 0;
+	// First pass: Validate the proposed layout given each pane's constraints
+	for (const [index, unsafeSize] of nextLayout.entries()) {
+		const safeSize = resizePane({
+			paneConstraints,
+			paneIndex: index,
+			initialSize: unsafeSize,
+		});
+		if (unsafeSize !== safeSize) {
+			remainingSize += unsafeSize - safeSize;
+			nextLayout[index] = safeSize;
+		}
+	}
+	// If there is additional, left over space, assign it to any pane(s) that permits it
+	// (It's not worth taking multiple additional passes to evenly distribute)
+	if (!areNumbersAlmostEqual(remainingSize, 0)) {
+		for (const [index, prevSize] of nextLayout.entries()) {
+			const unsafeSize = prevSize + remainingSize;
+			const safeSize = resizePane({
+				paneConstraints,
+				paneIndex: index,
+				initialSize: unsafeSize,
+			});
+			if (prevSize !== safeSize) {
+				remainingSize -= safeSize - prevSize;
+				nextLayout[index] = safeSize;
+				// Once we've used up the remainder, bail
+				if (areNumbersAlmostEqual(remainingSize, 0)) {
+					break;
+				}
+			}
+		}
+	}
+	return nextLayout;
+}
+export function getResizeHandleElement(id: string, domContext: DOMContext): HTMLElement | null {
+	if (!BROWSER) return null;
+	const element = domContext.querySelector(`[data-pane-resizer-id="${id}"]`) as HTMLElement;
+	if (element) return element;
+	return null;
+}
+interface GetDragOffsetPercentageOpts {
+	event: ResizeEvent;
+	dir: Direction;
+	initialDragState: DragState;
+}
+export function getDragOffsetPercentage({ event, dir, initialDragState }: GetDragOffsetPercentageOpts): number {
+	const { groupSizeInPixels, initialCursorPosition } = initialDragState;
+	if (groupSizeInPixels <= 0) return 0;
+	const cursorPosition = getResizeEventCursorPosition(dir, event);
+	if (cursorPosition == null) return 0;
+	const offsetPixels = cursorPosition - initialCursorPosition;
+	const offsetPercentage = (offsetPixels / groupSizeInPixels) * 100;
+	return offsetPercentage;
+}
+interface GetDeltaPercentageOpts {
+	event: ResizeEvent;
+	dir: Direction;
+	initialDragState: DragState | null;
+	keyboardResizeBy: number | null;
+}
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
+export function getDeltaPercentage({ event, dir, initialDragState, keyboardResizeBy }: GetDeltaPercentageOpts): number {
+	if (isKeyDown(event)) {
+		const isHorizontal = dir === 'horizontal';
+		let delta = 0;
+		if (event.shiftKey) {
+			delta = 100;
+		} else if (keyboardResizeBy != null) {
+			delta = keyboardResizeBy;
+		} else {
+			delta = 10;
+		}
+		let movement = 0;
+		switch (event.key) {
+			case 'ArrowDown':
+				movement = isHorizontal ? 0 : delta;
+				break;
+			case 'ArrowLeft':
+				movement = isHorizontal ? -delta : 0;
+				break;
+			case 'ArrowRight':
+				movement = isHorizontal ? delta : 0;
+				break;
+			case 'ArrowUp':
+				movement = isHorizontal ? 0 : -delta;
+				break;
+			case 'End':
+				movement = 100;
+				break;
+			case 'Home':
+				movement = -100;
+				break;
+		}
+		return movement;
+	} else {
+		if (initialDragState == null) return 0;
+		return getDragOffsetPercentage({
+			event,
+			dir,
+			initialDragState,
+		});
+	}
+}
+export function getResizeEventCursorPosition(dir: Direction, e: ResizeEvent): number | null {
+	const point = isMouseEvent(e) ? e : isTouchEvent(e) ? e.touches[0] : null;
+	return point ? (dir === 'horizontal' ? point.clientX : point.clientY) : null;
+}
+interface GetResizeHandlePaneIdsOpts {
+	groupId: string;
+	handleId: string;
+	panesArray: PaneState[];
+	domContext: DOMContext;
+}
+export function getResizeHandlePaneIds({
+	groupId,
+	handleId,
+	panesArray,
+	domContext,
+}: GetResizeHandlePaneIdsOpts): [idBefore: string | null, idAfter: string | null] {
+	const handle = getResizeHandleElement(handleId, domContext);
+	const handles = getResizeHandleElementsForGroup(groupId, domContext);
+	const index = handle ? handles.indexOf(handle) : -1;
+	const idBefore: string | null = panesArray[index]?.opts.id.current ?? null;
+	const idAfter: string | null = panesArray[index + 1]?.opts.id.current ?? null;
+	return [idBefore, idAfter];
+}