@octanejs/base-ui 0.1.1

package/src/utils/slider/getMidpoint.ts

@@ -0,0 +1,14 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/getMidpoint.ts. The `Coords`
+// type (`@floating-ui/utils`) is inlined.
+export interface Coords {
+	x: number;
+	y: number;
+}
+
+export function getMidpoint(element: Element): Coords {
+	const rect = element.getBoundingClientRect();
+	return {
+		x: (rect.left + rect.right) / 2,
+		y: (rect.top + rect.bottom) / 2,
+	};
+}

package/src/utils/slider/getPushedThumbValues.ts

@@ -0,0 +1,73 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/getPushedThumbValues.ts.
+import { clamp } from '../clamp';
+
+interface GetPushedThumbValuesParams {
+	values: readonly number[];
+	index: number;
+	nextValue: number;
+	min: number;
+	max: number;
+	step: number;
+	minStepsBetweenValues: number;
+	initialValues?: readonly number[] | undefined;
+}
+
+/**
+ * Returns a new array of slider values where attempting to move the thumb at `index`
+ * beyond its neighbours "pushes" them while respecting `minStepsBetweenValues`.
+ */
+export function getPushedThumbValues({
+	values,
+	index,
+	nextValue,
+	min,
+	max,
+	step,
+	minStepsBetweenValues,
+	initialValues,
+}: GetPushedThumbValuesParams): number[] {
+	if (values.length === 0) {
+		return [];
+	}
+
+	const nextValues = values.slice();
+	const minValueDifference = step * minStepsBetweenValues;
+	const lastIndex = nextValues.length - 1;
+	const baseInitialValues = initialValues ?? values;
+
+	const indexMin = min + index * minValueDifference;
+	const indexMax = max - (lastIndex - index) * minValueDifference;
+	nextValues[index] = clamp(nextValue, indexMin, indexMax);
+
+	for (let i = index + 1; i <= lastIndex; i += 1) {
+		const minAllowed = nextValues[i - 1] + minValueDifference;
+		const maxAllowed = max - (lastIndex - i) * minValueDifference;
+		const initialValue = baseInitialValues[i] ?? nextValues[i];
+		let candidate = Math.max(nextValues[i], minAllowed);
+
+		if (initialValue < candidate) {
+			candidate = Math.max(initialValue, minAllowed);
+		}
+
+		nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
+	}
+
+	for (let i = index - 1; i >= 0; i -= 1) {
+		const maxAllowed = nextValues[i + 1] - minValueDifference;
+		const minAllowed = min + i * minValueDifference;
+		const initialValue = baseInitialValues[i] ?? nextValues[i];
+		let candidate = Math.min(nextValues[i], maxAllowed);
+
+		if (initialValue > candidate) {
+			candidate = Math.min(initialValue, maxAllowed);
+		}
+
+		nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
+	}
+
+	for (let i = 0; i <= lastIndex; i += 1) {
+		nextValues[i] = Number(nextValues[i].toFixed(12));
+	}
+
+	return nextValues;
+}

package/src/utils/slider/getSliderValue.ts

@@ -0,0 +1,27 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/getSliderValue.ts.
+import { clamp } from '../clamp';
+import { replaceArrayItemAtIndex } from './replaceArrayItemAtIndex';
+
+export function getSliderValue(
+	valueInput: number,
+	index: number,
+	min: number,
+	max: number,
+	range: boolean,
+	values: readonly number[],
+) {
+	let newValue: number | number[] = valueInput;
+
+	newValue = clamp(newValue, min, max);
+
+	if (range) {
+		newValue = replaceArrayItemAtIndex(
+			values,
+			index,
+			// Bound the new value to the thumb's neighbours.
+			clamp(newValue, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity),
+		);
+	}
+
+	return newValue;
+}

package/src/utils/slider/replaceArrayItemAtIndex.ts

@@ -0,0 +1,8 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/replaceArrayItemAtIndex.ts.
+import { asc } from './asc';
+
+export function replaceArrayItemAtIndex(array: readonly number[], index: number, newValue: number) {
+	const output = array.slice();
+	output[index] = newValue;
+	return output.sort(asc);
+}

package/src/utils/slider/resolveThumbCollision.ts

@@ -0,0 +1,178 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/resolveThumbCollision.ts. The
+// `behavior` type (`SliderRootContext['thumbCollisionBehavior']`) is inlined to avoid a cycle.
+import { clamp } from '../clamp';
+import { getPushedThumbValues } from './getPushedThumbValues';
+
+export type ThumbCollisionBehavior = 'push' | 'swap' | 'none';
+
+export interface ResolveThumbCollisionParams {
+	behavior: ThumbCollisionBehavior;
+	values: readonly number[];
+	currentValues?: readonly number[] | null | undefined;
+	initialValues?: readonly number[] | null | undefined;
+	pressedIndex: number;
+	nextValue: number;
+	min: number;
+	max: number;
+	step: number;
+	minStepsBetweenValues: number;
+}
+
+export interface ResolveThumbCollisionResult {
+	value: number | number[];
+	thumbIndex: number;
+	didSwap: boolean;
+}
+
+export function resolveThumbCollision({
+	behavior,
+	values,
+	currentValues,
+	initialValues,
+	pressedIndex,
+	nextValue,
+	min,
+	max,
+	step,
+	minStepsBetweenValues,
+}: ResolveThumbCollisionParams): ResolveThumbCollisionResult {
+	const activeValues = currentValues ?? values;
+	const baselineValues = initialValues ?? values;
+	const range = activeValues.length > 1;
+
+	if (!range) {
+		return {
+			value: nextValue,
+			thumbIndex: 0,
+			didSwap: false,
+		};
+	}
+
+	const minValueDifference = step * minStepsBetweenValues;
+
+	switch (behavior) {
+		case 'swap': {
+			const pressedInitialValue = activeValues[pressedIndex];
+			const epsilon = 1e-7;
+			const candidateValues = activeValues.slice();
+			const previousNeighbor = candidateValues[pressedIndex - 1];
+			const nextNeighbor = candidateValues[pressedIndex + 1];
+
+			const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
+			const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
+
+			const constrainedValue = clamp(nextValue, lowerBound, upperBound);
+			const pressedValueAfterClamp = Number(constrainedValue.toFixed(12));
+			candidateValues[pressedIndex] = pressedValueAfterClamp;
+
+			const movingForward = nextValue > pressedInitialValue;
+			const movingBackward = nextValue < pressedInitialValue;
+
+			const shouldSwapForward =
+				movingForward && nextNeighbor != null && nextValue >= nextNeighbor - epsilon;
+			const shouldSwapBackward =
+				movingBackward && previousNeighbor != null && nextValue <= previousNeighbor + epsilon;
+
+			if (!shouldSwapForward && !shouldSwapBackward) {
+				return {
+					value: candidateValues,
+					thumbIndex: pressedIndex,
+					didSwap: false,
+				};
+			}
+
+			const targetIndex = shouldSwapForward ? pressedIndex + 1 : pressedIndex - 1;
+
+			const initialValuesForPush = candidateValues.map((_, index) => {
+				if (index === pressedIndex) {
+					return pressedValueAfterClamp;
+				}
+
+				const baseline = baselineValues[index];
+				if (baseline != null) {
+					return baseline;
+				}
+
+				return activeValues[index];
+			});
+
+			let nextValueForTarget = nextValue;
+			if (shouldSwapForward) {
+				nextValueForTarget = Math.max(nextValue, candidateValues[targetIndex]);
+			} else {
+				nextValueForTarget = Math.min(nextValue, candidateValues[targetIndex]);
+			}
+
+			const adjustedValues = getPushedThumbValues({
+				values: candidateValues,
+				index: targetIndex,
+				nextValue: nextValueForTarget,
+				min,
+				max,
+				step,
+				minStepsBetweenValues,
+				initialValues: initialValuesForPush,
+			});
+
+			const neighborIndex = shouldSwapForward ? targetIndex - 1 : targetIndex + 1;
+
+			if (neighborIndex >= 0 && neighborIndex < adjustedValues.length) {
+				const previousValue = adjustedValues[neighborIndex - 1];
+				const nextValueAfter = adjustedValues[neighborIndex + 1];
+
+				let neighborLowerBound = previousValue != null ? previousValue + minValueDifference : min;
+				neighborLowerBound = Math.max(neighborLowerBound, min + neighborIndex * minValueDifference);
+
+				let neighborUpperBound = nextValueAfter != null ? nextValueAfter - minValueDifference : max;
+				neighborUpperBound = Math.min(
+					neighborUpperBound,
+					max - (adjustedValues.length - 1 - neighborIndex) * minValueDifference,
+				);
+
+				const restoredValue = clamp(pressedValueAfterClamp, neighborLowerBound, neighborUpperBound);
+				adjustedValues[neighborIndex] = Number(restoredValue.toFixed(12));
+			}
+
+			return {
+				value: adjustedValues,
+				thumbIndex: targetIndex,
+				didSwap: true,
+			};
+		}
+		case 'push': {
+			const nextValues = getPushedThumbValues({
+				values: activeValues,
+				index: pressedIndex,
+				nextValue,
+				min,
+				max,
+				step,
+				minStepsBetweenValues,
+			});
+
+			return {
+				value: nextValues,
+				thumbIndex: pressedIndex,
+				didSwap: false,
+			};
+		}
+		case 'none':
+		default: {
+			const candidateValues = activeValues.slice();
+			const previousNeighbor = candidateValues[pressedIndex - 1];
+			const nextNeighbor = candidateValues[pressedIndex + 1];
+
+			const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
+			const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
+
+			const constrainedValue = clamp(nextValue, lowerBound, upperBound);
+			candidateValues[pressedIndex] = Number(constrainedValue.toFixed(12));
+
+			return {
+				value: candidateValues,
+				thumbIndex: pressedIndex,
+				didSwap: false,
+			};
+		}
+	}
+}

package/src/utils/slider/roundValueToStep.ts

@@ -0,0 +1,22 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/roundValueToStep.ts.
+export function getDecimalPrecision(num: number) {
+	if (num === 0) {
+		return 0;
+	}
+
+	// This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+	// When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+	if (Math.abs(num) < 1) {
+		const parts = num.toExponential().split('e-');
+		const matissaDecimalPart = parts[0].split('.')[1];
+		return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+	}
+
+	const decimalPart = num.toString().split('.')[1];
+	return decimalPart ? decimalPart.length : 0;
+}
+
+export function roundValueToStep(value: number, step: number, min: number) {
+	const nearest = Math.round((value - min) / step) * step + min;
+	return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
+}

package/src/utils/slider/validateMinimumDistance.ts

@@ -0,0 +1,22 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/validateMinimumDistance.ts.
+export function validateMinimumDistance(
+	values: number | readonly number[],
+	step: number,
+	minStepsBetweenValues: number,
+) {
+	if (!Array.isArray(values)) {
+		return true;
+	}
+
+	const distances = values.reduce((acc: number[], val, index, vals) => {
+		if (index === vals.length - 1) {
+			return acc;
+		}
+
+		acc.push(Math.abs(val - vals[index + 1]));
+
+		return acc;
+	}, []);
+
+	return Math.min(...distances) >= step * minStepsBetweenValues;
+}

package/src/utils/slider/valueArrayToPercentages.ts

@@ -0,0 +1,11 @@
+// Ported verbatim from .base-ui/packages/react/src/slider/utils/valueArrayToPercentages.ts.
+import { clamp } from '../clamp';
+import { valueToPercent } from '../valueToPercent';
+
+export function valueArrayToPercentages(values: number[], min: number, max: number) {
+	const output = [];
+	for (let i = 0; i < values.length; i += 1) {
+		output.push(clamp(valueToPercent(values[i], min, max), 0, 100));
+	}
+	return output;
+}

package/src/utils/stringifyLocale.ts

@@ -0,0 +1,10 @@
+// Ported verbatim from .base-ui/packages/react/src/utils/stringifyLocale.ts.
+export function stringifyLocale(locale?: Intl.LocalesArgument): string {
+	if (Array.isArray(locale)) {
+		return locale.map((value) => stringifyLocale(value)).join(',');
+	}
+	if (locale == null) {
+		return '';
+	}
+	return String(locale);
+}

package/src/utils/useAnimationFrame.ts

@@ -0,0 +1,59 @@
+// Ported from .base-ui/packages/utils/src/useAnimationFrame.ts. `AnimationFrame` is a
+// module-level rAF scheduler (request returns an id; cancel takes it); `useAnimationFrame`
+// is a per-instance frame that cancels its pending callback on unmount. Base UI's Scheduler
+// batches many callbacks into one rAF for perf — the observable behavior (run-next-frame,
+// cancelable) is identical, so this delegates straight to requestAnimationFrame.
+//
+// SLOT: `useAnimationFrame` is a plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useLayoutEffect, useMemo, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+
+export const AnimationFrame = {
+	request(fn: FrameRequestCallback): number {
+		return requestAnimationFrame(fn);
+	},
+	cancel(id: number | null): void {
+		if (id != null) {
+			cancelAnimationFrame(id);
+		}
+	},
+};
+
+export interface Frame {
+	request: (fn: FrameRequestCallback) => number;
+	cancel: () => void;
+}
+
+export function useAnimationFrame(...args: any[]): Frame {
+	const [, slotArg] = splitSlot(['_', ...args]);
+	const slot = slotArg ?? S('useAnimationFrame');
+	const idRef = useRef<number | null>(null, subSlot(slot, 'id'));
+
+	const frame = useMemo<Frame>(
+		() => ({
+			request(fn: FrameRequestCallback): number {
+				if (idRef.current != null) {
+					cancelAnimationFrame(idRef.current);
+				}
+				idRef.current = requestAnimationFrame((ts) => {
+					idRef.current = null;
+					fn(ts);
+				});
+				return idRef.current;
+			},
+			cancel(): void {
+				if (idRef.current != null) {
+					cancelAnimationFrame(idRef.current);
+					idRef.current = null;
+				}
+			},
+		}),
+		[],
+		subSlot(slot, 'frame'),
+	);
+
+	useLayoutEffect(() => () => frame.cancel(), [], subSlot(slot, 'e:clean'));
+
+	return frame;
+}

package/src/utils/useAnimationsFinished.ts

@@ -0,0 +1,100 @@
+// Ported from .base-ui/packages/react/src/internals/useAnimationsFinished.ts. Returns a
+// stable function that runs a callback once all CSS animations/transitions on the element
+// have finished (or immediately if there are none / no element). octane: `ReactDOM.flushSync`
+// → octane `flushSync`.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { flushSync } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { useAnimationFrame } from './useAnimationFrame';
+import { useStableCallback } from './useStableCallback';
+import { resolveRef } from './resolveRef';
+
+const STARTING_STYLE_ATTRIBUTE = 'data-starting-style';
+
+export function useAnimationsFinished(
+	...args: any[]
+): (fnToExecute: () => void, signal?: AbortSignal | null) => void {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useAnimationsFinished');
+	const elementOrRef = user[0] as { current: HTMLElement | null } | HTMLElement | null;
+	const waitForStartingStyleRemoved = (user[1] as boolean | undefined) ?? false;
+	const treatAbortedAsFinished = (user[2] as boolean | undefined) ?? true;
+
+	const frame = useAnimationFrame(subSlot(slot, 'frame'));
+
+	return useStableCallback(
+		(fnToExecute: () => void, signal: AbortSignal | null = null) => {
+			frame.cancel();
+
+			const element = resolveRef(elementOrRef as any) as HTMLElement | null;
+			if (element == null) {
+				return;
+			}
+			const resolvedElement = element;
+
+			const done = () => {
+				// Synchronously flush so the browser doesn't paint an intermediate frame.
+				flushSync(fnToExecute);
+			};
+
+			if (
+				typeof resolvedElement.getAnimations !== 'function' ||
+				(globalThis as any).BASE_UI_ANIMATIONS_DISABLED
+			) {
+				fnToExecute();
+				return;
+			}
+
+			function exec() {
+				Promise.all(resolvedElement.getAnimations().map((animation) => animation.finished))
+					.then(() => {
+						if (!signal?.aborted) {
+							done();
+						}
+					})
+					.catch(() => {
+						if (treatAbortedAsFinished) {
+							if (!signal?.aborted) {
+								done();
+							}
+							return;
+						}
+						const currentAnimations = resolvedElement.getAnimations();
+						if (
+							!signal?.aborted &&
+							currentAnimations.length > 0 &&
+							currentAnimations.some(
+								(animation) => animation.pending || animation.playState !== 'finished',
+							)
+						) {
+							exec();
+						}
+					});
+			}
+
+			if (waitForStartingStyleRemoved) {
+				if (!resolvedElement.hasAttribute(STARTING_STYLE_ATTRIBUTE)) {
+					frame.request(exec);
+					return;
+				}
+				const attributeObserver = new MutationObserver(() => {
+					if (!resolvedElement.hasAttribute(STARTING_STYLE_ATTRIBUTE)) {
+						attributeObserver.disconnect();
+						exec();
+					}
+				});
+				attributeObserver.observe(resolvedElement, {
+					attributes: true,
+					attributeFilter: [STARTING_STYLE_ATTRIBUTE],
+				});
+				signal?.addEventListener('abort', () => attributeObserver.disconnect(), { once: true });
+				return;
+			}
+
+			frame.request(exec);
+		},
+		subSlot(slot, 'cb'),
+	);
+}

package/src/utils/useBaseUiId.ts

@@ -0,0 +1,19 @@
+// Ported from .base-ui/packages/react/src/internals/useBaseUiId.ts (v1.6.0), which
+// wraps @base-ui/utils/useId with the 'base-ui' prefix. Base UI's util calls
+// React.useId() unconditionally, then returns `idOverride ?? `base-ui-${reactId}``.
+// octane's useId is always available and SSR-stable, so React's mount-guard/global
+// fallback dance collapses away — a caller-supplied id wins; otherwise the generated
+// id is `base-ui-<octaneId>`.
+//
+// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
+import { useId as octaneUseId } from 'octane';
+
+import { S, splitSlot } from '../internal';
+
+export function useBaseUiId(...args: any[]): string | undefined {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useBaseUiId');
+	const idOverride = user[0] as string | undefined;
+	const id = octaneUseId(slot);
+	return idOverride ?? `base-ui-${id}`;
+}