@anyknown/axis 0.1.0 → 0.2.1

package/dist/axis/create-wheel.js

@@ -0,0 +1,57 @@
+import { adjacentSnap, clamp, nearestSnap, wheelDeltaYPx } from "../utils/index.js";
+import { EDGE, ZERO } from "./constants.js";
+export function createWheel(core, snap, driver) {
+    const { el, rtl, scrollRange, position, writePosition, options, motion, setMotion, isDestroyed } = core;
+    let direction = 1;
+    let attached = false;
+    const settleOnNextSnapInWheelDirection = () => {
+        if (isDestroyed())
+            return;
+        if (!snap.snapAxes().x) {
+            driver.settle();
+            return;
+        }
+        const current = position().x;
+        const positions = core.snapPoints().x;
+        const target = adjacentSnap(positions, current - 2 * direction, direction) ?? nearestSnap(positions, current);
+        driver.glideTo({ x: target }, ZERO, "glide");
+    };
+    const onWheel = (event) => {
+        if (options().axis !== "x" || event.ctrlKey || event.shiftKey)
+            return;
+        if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))
+            return;
+        if (motion() === "pressed" || motion() === "dragging")
+            return;
+        const delta = wheelDeltaYPx(event, el.clientWidth);
+        const isRtlNow = rtl();
+        const max = scrollRange();
+        const current = position(isRtlNow, max).x;
+        const leavesPageScrollingAtEdge = delta > 0 ? current >= max.x - EDGE : current <= EDGE;
+        if (leavesPageScrollingAtEdge)
+            return;
+        event.preventDefault();
+        driver.stop();
+        snap.suspend();
+        direction = delta > 0 ? 1 : -1;
+        writePosition({ x: clamp(current + delta, 0, max.x) }, isRtlNow);
+        if (motion() !== "wheel")
+            setMotion("wheel");
+        if (isDestroyed())
+            return;
+        driver.afterWheelPause(settleOnNextSnapInWheelDirection);
+    };
+    const sync = () => {
+        const { wheel, axis } = options();
+        const wanted = wheel && axis === "x";
+        if (wanted === attached)
+            return;
+        attached = wanted;
+        if (wanted)
+            el.addEventListener("wheel", onWheel, { passive: false });
+        else
+            el.removeEventListener("wheel", onWheel);
+    };
+    const remove = () => el.removeEventListener("wheel", onWheel);
+    return { sync, remove };
+}

package/dist/axis/drags-along.d.ts

@@ -0,0 +1,2 @@
+import type { AxisMode, AxisName } from "./types.js";
+export declare const dragsAlong: (mode: AxisMode, axis: AxisName) => boolean;

package/dist/axis/drags-along.js

@@ -0,0 +1 @@
+export const dragsAlong = (mode, axis) => mode === "both" || mode === axis;

package/dist/axis/index.d.ts

@@ -0,0 +1,2 @@
+export { createAxis } from "./create-axis.js";
+export type { AxisInstance, AxisMode, AxisName, AxisOptions, AxisPosition, AxisScrollState, AxisScrollToOptions, AxisState, } from "./types.js";

package/dist/axis/index.js

@@ -0,0 +1 @@
+export { createAxis } from "./create-axis.js";

package/dist/axis/merge-options.d.ts

@@ -0,0 +1,2 @@
+import type { AxisOptions } from "./types.js";
+export declare function mergeOptions(base: Required<AxisOptions>, patch: AxisOptions): Required<AxisOptions>;

package/dist/axis/merge-options.js

@@ -0,0 +1,9 @@
+import { DEFAULTS } from "./constants.js";
+export function mergeOptions(base, patch) {
+    const next = { ...base };
+    for (const key of Object.keys(DEFAULTS)) {
+        if (patch[key] !== undefined)
+            next[key] = patch[key];
+    }
+    return next;
+}

package/dist/axis/next-axis-state.d.ts

@@ -0,0 +1,2 @@
+import type { AxisState } from "./types.js";
+export declare function nextAxisState(scroll: number, max: number, previous: AxisState): AxisState;

package/dist/axis/next-axis-state.js

@@ -0,0 +1,14 @@
+import { EDGE } from "./constants.js";
+export function nextAxisState(scroll, max, previous) {
+    const next = {
+        scroll,
+        maxScroll: max,
+        progress: max > 0 ? scroll / max : 0,
+        canScrollPrev: scroll > EDGE,
+        canScrollNext: scroll < max - EDGE,
+    };
+    for (const key of Object.keys(next))
+        if (next[key] !== previous[key])
+            return next;
+    return previous;
+}

package/dist/axis/resolve-axis.d.ts

@@ -0,0 +1,2 @@
+import type { AxisMode, AxisName } from "./types.js";
+export declare function resolveAxis(method: string, axis: AxisName | undefined, mode: AxisMode): AxisName;

package/dist/axis/resolve-axis.js

@@ -0,0 +1,8 @@
+export function resolveAxis(method, axis, mode) {
+    if (axis)
+        return axis;
+    if (mode === "both") {
+        throw new Error(`axis: ${method}() needs an axis ("x" or "y") when the instance uses axis: "both"`);
+    }
+    return mode;
+}

package/dist/{axis.d.ts → axis/types.d.ts}

@@ -1,3 +1,4 @@
+import type { Vector } from "../utils/index.js";
 /** The direction(s) a mouse drag scrolls: horizontal, vertical, or free 2D panning. */
 export type AxisMode = "x" | "y" | "both";
 /** A single scroll axis. */
@@ -15,6 +16,12 @@ export interface AxisOptions {
      * @default true
      */
     momentum?: boolean;
+    /**
+     * The farthest a momentum glide may travel after one release, in px. A faster fling is slowed down to land
+     * within it, so one gesture never moves more than this.
+     * @default Infinity
+     */
+    maxGlide?: number;
     /**
      * Translate vertical mouse-wheel scrolling into horizontal scrolling. Only used with `axis: "x"`; at either
      * end the wheel is left alone, so the page keeps scrolling.
@@ -87,12 +94,53 @@ export interface AxisInstance {
     /** Removes every listener and observer and restores every inline style that axis changed. */
     destroy(): void;
 }
-/**
- * Enhances a scroll container (`overflow: auto`) with mouse drag-scrolling, momentum, snap-aware release,
- * optional wheel translation and an observable scroll state.
- *
- * Native scrolling stays the source of truth: touch, trackpad, keyboard and scrollbar input are untouched,
- * and only a primary-button mouse drag is taken over (by writing `scrollLeft` / `scrollTop`). Nested instances
- * share the drag: the innermost instance that can scroll in the drag's direction takes it.
- */
-export declare function createAxis(el: HTMLElement, options?: AxisOptions): AxisInstance;
+export type Motion = "idle" | "pressed" | "dragging" | "momentum" | "glide" | "wheel";
+export type Glide = "momentum" | "glide";
+export interface Geometry {
+    rtl(): boolean;
+    scrollRange(): Vector;
+    position(rtl?: boolean, range?: Vector): Vector;
+    writePosition(position: AxisPosition, rtl?: boolean): void;
+}
+export interface AxisCore extends Geometry {
+    el: HTMLElement;
+    win: Window;
+    options(): Required<AxisOptions>;
+    motion(): Motion;
+    setMotion(next: Motion): void;
+    isDestroyed(): boolean;
+    snapPoints(): Record<AxisName, number[]>;
+}
+export interface StyleOverrides {
+    override(prop: string, value: string, important?: boolean): void;
+    restore(prop: string): void;
+    restoreAll(): void;
+}
+export interface SnapSuspension {
+    suspend(): void;
+    resume(): void;
+    snapAxes(): {
+        x: boolean;
+        y: boolean;
+    };
+    isSuspended(): boolean;
+}
+export interface Hold {
+    holdCurrent(): void;
+    release(): void;
+    reset(): void;
+    yieldDrag(glideHoldsAtItsEnd: boolean): void;
+    holdIfYielded(): void;
+    follow(axis: AxisName): void;
+    undoAutoscroll(): void;
+}
+export interface ScrollDriver {
+    stop(): void;
+    settle(): void;
+    interrupt(): void;
+    jump(target: AxisPosition): void;
+    glideTo(target: AxisPosition, velocity: Vector, kind: Glide): void;
+    fling(scrollVelocity: Vector): void;
+    afterWheelPause(settle: () => void): void;
+    glideTarget(): Vector;
+}

package/dist/axis/types.js

@@ -0,0 +1 @@
+export {};

package/dist/coordinator/constants.d.ts

@@ -0,0 +1,5 @@
+import type { Coordinator } from "./types.js";
+export declare const DRAG_THRESHOLD = 5;
+export declare const CLICK_SUPPRESS_MS = 100;
+export declare const NO_DRAG = "input, textarea, select, [contenteditable]:not([contenteditable='false']), [data-axis-no-drag]";
+export declare const coordinators: WeakMap<Window, Coordinator>;

package/dist/coordinator/constants.js

@@ -0,0 +1,5 @@
+import { EDITABLE } from "../utils/index.js";
+export const DRAG_THRESHOLD = 5;
+export const CLICK_SUPPRESS_MS = 100;
+export const NO_DRAG = `${EDITABLE}, [data-axis-no-drag]`;
+export const coordinators = new WeakMap();

package/dist/coordinator/create-coordinator.d.ts

@@ -0,0 +1,2 @@
+import type { Coordinator } from "./types.js";
+export declare function createCoordinator(win: Window): Coordinator;

package/dist/coordinator/create-coordinator.js

@@ -0,0 +1,191 @@
+import { composedPathMatches, isScrollKey, pointerSample, VELOCITY_WINDOW, velocityFromSamples, } from "../utils/index.js";
+import { CLICK_SUPPRESS_MS, coordinators, DRAG_THRESHOLD, NO_DRAG } from "./constants.js";
+import { pickOwner } from "./pick-owner.js";
+export function createCoordinator(win) {
+    const clients = new Map();
+    let session = null;
+    let suppressClick = false;
+    let suppressTimer = 0;
+    const capture = { capture: true };
+    const passiveCapture = { capture: true, passive: true };
+    const stillRegistered = (client) => clients.get(client.el) === client;
+    const forgetSuppressedClick = () => {
+        suppressClick = false;
+        win.clearTimeout(suppressTimer);
+    };
+    const detach = () => {
+        win.removeEventListener("pointermove", onPointerMove);
+        win.removeEventListener("pointerup", onPointerUp);
+        win.removeEventListener("pointercancel", onPointerCancel);
+        win.removeEventListener("wheel", releaseHoldsOnUserScroll, passiveCapture);
+        win.removeEventListener("keydown", releaseHoldsOnUserScroll, capture);
+        win.removeEventListener("contextmenu", cancelPress, capture);
+        win.removeEventListener("blur", cancelPress);
+        win.document.removeEventListener("visibilitychange", cancelPressWhenHidden);
+        session = null;
+    };
+    const endSession = (ended, pointerVelocity) => {
+        detach();
+        if (ended.owner && stillRegistered(ended.owner))
+            ended.owner.end(pointerVelocity);
+        for (const client of ended.chain) {
+            if (client !== ended.owner && stillRegistered(client))
+                client.pass();
+        }
+    };
+    const cancelPress = () => {
+        if (session)
+            endSession(session, null);
+    };
+    const cancelPressWhenHidden = () => {
+        if (win.document.visibilityState === "hidden")
+            cancelPress();
+    };
+    const releaseHoldsOnUserScroll = (event) => {
+        if (event.type === "keydown" && !isScrollKey(event))
+            return;
+        if (session)
+            for (const client of session.chain)
+                client.interrupt();
+    };
+    const attach = () => {
+        win.addEventListener("pointermove", onPointerMove);
+        win.addEventListener("pointerup", onPointerUp);
+        win.addEventListener("pointercancel", onPointerCancel);
+        win.addEventListener("wheel", releaseHoldsOnUserScroll, passiveCapture);
+        win.addEventListener("keydown", releaseHoldsOnUserScroll, capture);
+        win.addEventListener("contextmenu", cancelPress, capture);
+        win.addEventListener("blur", cancelPress);
+        win.document.addEventListener("visibilitychange", cancelPressWhenHidden);
+    };
+    const onPointerDown = (event) => {
+        forgetSuppressedClick();
+        if (session)
+            return;
+        const path = event.composedPath();
+        const chain = [];
+        for (const node of path) {
+            const client = clients.get(node);
+            if (client)
+                chain.push(client);
+        }
+        if (chain.length === 0)
+            return;
+        const draggable = event.pointerType === "mouse" &&
+            event.button === 0 &&
+            !composedPathMatches(path, NO_DRAG, chain.at(-1).el) &&
+            !chain.some((client) => client.onScrollbar(event));
+        if (!draggable) {
+            for (const client of chain)
+                client.interrupt();
+            return;
+        }
+        for (const client of chain)
+            client.press();
+        const pressed = chain.filter(stillRegistered);
+        if (pressed.length === 0)
+            return;
+        session = {
+            pointerId: event.pointerId,
+            start: { x: event.clientX, y: event.clientY },
+            chain: pressed,
+            owner: null,
+            samples: [pointerSample(event)],
+        };
+        attach();
+    };
+    const handOver = (current, delta) => {
+        const owner = pickOwner(current.chain, delta);
+        if (!owner) {
+            endSession(current, null);
+            return;
+        }
+        current.owner = owner;
+        for (const client of current.chain)
+            if (client !== owner)
+                client.yield();
+        owner.start(current.pointerId);
+    };
+    const onPointerMove = (event) => {
+        const current = session;
+        if (!current || event.pointerId !== current.pointerId)
+            return;
+        const releasedOutsideWindow = !(event.buttons & 1);
+        if (releasedOutsideWindow) {
+            cancelPress();
+            return;
+        }
+        const { samples } = current;
+        samples.push(pointerSample(event));
+        while (samples.length > 2 && event.timeStamp - samples[0].t > VELOCITY_WINDOW * 2)
+            samples.shift();
+        const delta = { x: event.clientX - current.start.x, y: event.clientY - current.start.y };
+        if (!current.owner) {
+            if (Math.hypot(delta.x, delta.y) <= DRAG_THRESHOLD)
+                return;
+            handOver(current, delta);
+        }
+        const endedByListener = session !== current;
+        if (endedByListener || !current.owner)
+            return;
+        current.owner.move(delta);
+    };
+    const onPointerUp = (event) => {
+        const current = session;
+        if (!current || event.pointerId !== current.pointerId)
+            return;
+        current.samples.push(pointerSample(event));
+        if (current.owner) {
+            suppressClick = true;
+            win.clearTimeout(suppressTimer);
+            suppressTimer = win.setTimeout(() => (suppressClick = false), CLICK_SUPPRESS_MS);
+        }
+        endSession(current, current.owner ? velocityFromSamples(current.samples) : null);
+    };
+    const onPointerCancel = (event) => {
+        if (session && event.pointerId === session.pointerId)
+            cancelPress();
+    };
+    const swallowClickAfterDrag = (event) => {
+        if (!suppressClick)
+            return;
+        forgetSuppressedClick();
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const preventNativeDragAndDrop = (event) => {
+        if (session)
+            event.preventDefault();
+    };
+    const remove = (client) => {
+        if (clients.get(client.el) !== client)
+            return;
+        clients.delete(client.el);
+        if (session) {
+            const current = session;
+            current.chain = current.chain.filter((other) => other !== client);
+            if (current.owner === client || current.chain.length === 0) {
+                current.owner = null;
+                endSession(current, null);
+            }
+        }
+        if (clients.size === 0) {
+            win.removeEventListener("pointerdown", onPointerDown, capture);
+            win.removeEventListener("click", swallowClickAfterDrag, capture);
+            win.removeEventListener("dragstart", preventNativeDragAndDrop, capture);
+            forgetSuppressedClick();
+            coordinators.delete(win);
+        }
+    };
+    return {
+        add(client) {
+            if (clients.size === 0) {
+                win.addEventListener("pointerdown", onPointerDown, capture);
+                win.addEventListener("click", swallowClickAfterDrag, capture);
+                win.addEventListener("dragstart", preventNativeDragAndDrop, capture);
+            }
+            clients.set(client.el, client);
+            return () => remove(client);
+        },
+    };
+}

package/dist/coordinator/index.d.ts

@@ -0,0 +1,2 @@
+export { register } from "./register.js";
+export type { DragClient } from "./types.js";

package/dist/coordinator/index.js

@@ -0,0 +1 @@
+export { register } from "./register.js";

package/dist/coordinator/pick-owner.d.ts

@@ -0,0 +1,3 @@
+import { type Vector } from "../utils/index.js";
+import type { DragClient } from "./types.js";
+export declare function pickOwner(innermostFirst: readonly DragClient[], delta: Vector): DragClient | null;

package/dist/coordinator/pick-owner.js

@@ -0,0 +1,7 @@
+import { dominantAxis } from "../utils/index.js";
+export function pickOwner(innermostFirst, delta) {
+    const axis = dominantAxis(delta);
+    const dragsAlongAxis = innermostFirst.filter((client) => client.accepts(axis));
+    const canStillScroll = dragsAlongAxis.find((client) => client.canScroll(delta));
+    return canStillScroll ?? dragsAlongAxis[0] ?? null;
+}

package/dist/coordinator/register.d.ts

@@ -0,0 +1,2 @@
+import type { DragClient } from "./types.js";
+export declare function register(client: DragClient): () => void;

package/dist/coordinator/register.js

@@ -0,0 +1,11 @@
+import { coordinators } from "./constants.js";
+import { createCoordinator } from "./create-coordinator.js";
+export function register(client) {
+    const win = client.el.ownerDocument.defaultView ?? window;
+    let coordinator = coordinators.get(win);
+    if (!coordinator) {
+        coordinator = createCoordinator(win);
+        coordinators.set(win, coordinator);
+    }
+    return coordinator.add(client);
+}

package/dist/coordinator/types.d.ts

@@ -0,0 +1,24 @@
+import type { Sample, Vector } from "../utils/index.js";
+export interface DragClient {
+    readonly el: HTMLElement;
+    onScrollbar(event: PointerEvent): boolean;
+    accepts(axis: "x" | "y"): boolean;
+    canScroll(delta: Vector): boolean;
+    press(): void;
+    yield(): void;
+    start(pointerId: number): void;
+    move(delta: Vector): void;
+    pass(): void;
+    end(pointerVelocity: Vector | null): void;
+    interrupt(): void;
+}
+export interface Session {
+    pointerId: number;
+    start: Vector;
+    chain: DragClient[];
+    owner: DragClient | null;
+    samples: Sample[];
+}
+export interface Coordinator {
+    add(client: DragClient): () => void;
+}

package/dist/coordinator/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { createAxis } from "./axis.js";
-export type { AxisInstance, AxisMode, AxisName, AxisOptions, AxisPosition, AxisScrollState, AxisScrollToOptions, AxisState, } from "./axis.js";
+export { createAxis } from "./axis/index.js";
+export type { AxisInstance, AxisMode, AxisName, AxisOptions, AxisPosition, AxisScrollState, AxisScrollToOptions, AxisState, } from "./axis/index.js";

package/dist/index.js

@@ -1 +1 @@
-export { createAxis } from "./axis.js";
+export { createAxis } from "./axis/index.js";

package/dist/react/constants.d.ts

@@ -0,0 +1,3 @@
+import type { AxisScrollState } from "../axis/index.js";
+export declare const EMPTY_STATE: AxisScrollState;
+export declare const NOOP: () => void;

package/dist/react/constants.js

@@ -0,0 +1,8 @@
+const EMPTY_AXIS = { scroll: 0, maxScroll: 0, progress: 0, canScrollPrev: false, canScrollNext: false };
+export const EMPTY_STATE = {
+    x: EMPTY_AXIS,
+    y: EMPTY_AXIS,
+    isDragging: false,
+    isMomentum: false,
+};
+export const NOOP = () => { };

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export type { AxisApi, UseAxisResult } from "./types.js";
+export { useAxis } from "./use-axis.js";
+export type { AxisMode, AxisName, AxisOptions, AxisPosition, AxisScrollState, AxisScrollToOptions, AxisState, } from "../axis/index.js";

package/dist/react/index.js

@@ -0,0 +1 @@
+export { useAxis } from "./use-axis.js";

package/dist/react/types.d.ts

@@ -0,0 +1,12 @@
+import type { AxisInstance, AxisScrollState } from "../axis/index.js";
+/** Imperative scroll controls returned by {@link useAxis}. Safe to call before the element mounts (no-op). */
+export type AxisApi = Pick<AxisInstance, "scrollPrev" | "scrollNext" | "scrollTo" | "refresh">;
+/** What {@link useAxis} returns. */
+export interface UseAxisResult<T extends HTMLElement = HTMLElement, S = AxisScrollState> {
+    /** Callback ref for the scroll container. Stable. */
+    ref: (element: T | null) => void;
+    /** The scroll state of both axes, or what the selector picked from it. Re-renders only when it changes. */
+    state: S;
+    /** Stable scroll controls. */
+    api: AxisApi;
+}

package/dist/react/types.js

@@ -0,0 +1 @@
+export {};

package/dist/react/use-applied-options.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+import type { AxisInstance, AxisOptions } from "../axis/index.js";
+export declare function useAppliedOptions(options: AxisOptions, instanceRef: RefObject<AxisInstance | null>): RefObject<AxisOptions>;

package/dist/react/use-applied-options.js

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+export function useAppliedOptions(options, instanceRef) {
+    const optionsRef = useRef(options);
+    const { axis, momentum, wheel, cursor } = options;
+    useIsomorphicLayoutEffect(() => {
+        optionsRef.current = { axis, momentum, wheel, cursor };
+        instanceRef.current?.setOptions(optionsRef.current);
+    }, [axis, momentum, wheel, cursor]);
+    return optionsRef;
+}

package/dist/react/use-axis-instance.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+import { type AxisInstance, type AxisOptions } from "../axis/index.js";
+export declare function useAxisInstance(element: HTMLElement | null, optionsRef: RefObject<AxisOptions>, instanceRef: RefObject<AxisInstance | null>): AxisInstance | null;

package/dist/react/use-axis-instance.js

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { createAxis } from "../axis/index.js";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+export function useAxisInstance(element, optionsRef, instanceRef) {
+    const [instance, setInstance] = useState(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!element)
+            return;
+        const created = createAxis(element, optionsRef.current);
+        instanceRef.current = created;
+        setInstance(created);
+        return () => {
+            created.destroy();
+            instanceRef.current = null;
+            setInstance(null);
+        };
+    }, [element]);
+    return instance;
+}

package/dist/react/use-axis.d.ts

@@ -0,0 +1,11 @@
+import type { AxisOptions, AxisScrollState } from "../axis/index.js";
+import type { UseAxisResult } from "./types.js";
+/**
+ * Binds axis to an element through a callback ref. The instance is created when the element mounts and
+ * destroyed when it unmounts or changes. Option changes are applied without re-creating the instance.
+ *
+ * With a `selector`, `state` is `selector(state)` and the component re-renders only when that result changes
+ * (compared with `Object.is`).
+ */
+export declare function useAxis<T extends HTMLElement = HTMLElement>(options?: AxisOptions): UseAxisResult<T>;
+export declare function useAxis<S>(options: AxisOptions | undefined, selector: (state: AxisScrollState) => S): UseAxisResult<HTMLElement, S>;

package/dist/react/use-axis.js

@@ -0,0 +1,14 @@
+import { useRef, useState } from "react";
+import { useAppliedOptions } from "./use-applied-options.js";
+import { useAxisInstance } from "./use-axis-instance.js";
+import { useSelectedState } from "./use-selected-state.js";
+import { useStableApi } from "./use-stable-api.js";
+export function useAxis(options = {}, selector) {
+    const [element, setElement] = useState(null);
+    const instanceRef = useRef(null);
+    const optionsRef = useAppliedOptions(options, instanceRef);
+    const instance = useAxisInstance(element, optionsRef, instanceRef);
+    const state = useSelectedState(instance, selector);
+    const api = useStableApi(instanceRef);
+    return { ref: setElement, state, api };
+}

package/dist/react/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/react/use-isomorphic-layout-effect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from "react";
+export const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/dist/react/use-selected-state.d.ts

@@ -0,0 +1,4 @@
+import type { AxisInstance, AxisScrollState } from "../axis/index.js";
+type Selector = ((state: AxisScrollState) => unknown) | undefined;
+export declare function useSelectedState(instance: AxisInstance | null, selector: Selector): unknown;
+export {};

package/dist/react/use-selected-state.js

@@ -0,0 +1,14 @@
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import { EMPTY_STATE, NOOP } from "./constants.js";
+export function useSelectedState(instance, selector) {
+    const subscribe = useCallback((listener) => instance?.subscribe(listener) ?? NOOP, [instance]);
+    const snapshotMemo = useRef(null);
+    const getSnapshot = useCallback(() => {
+        const current = instance?.getState() ?? EMPTY_STATE;
+        if (snapshotMemo.current?.state !== current || snapshotMemo.current.selector !== selector) {
+            snapshotMemo.current = { state: current, selector, selected: selector ? selector(current) : current };
+        }
+        return snapshotMemo.current.selected;
+    }, [instance, selector]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

package/dist/react/use-stable-api.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from "react";
+import type { AxisInstance } from "../axis/index.js";
+import type { AxisApi } from "./types.js";
+export declare const useStableApi: (instanceRef: RefObject<AxisInstance | null>) => AxisApi;