@anyknown/axis 0.0.0-stage → 0.1.0

package/dist/coordinator.js

@@ -0,0 +1,247 @@
+// One coordinator per window decides which instance owns a mouse drag. Nested instances therefore never
+// fight: a press is shared by every instance under the pointer until the movement passes the threshold, and
+// then exactly one of them takes the whole drag.
+import { dominantAxis, VELOCITY_WINDOW, velocityFromSamples } from "./math.js";
+const DRAG_THRESHOLD = 5;
+const CLICK_SUPPRESS_MS = 100;
+const EDITABLE = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
+const NO_DRAG = `${EDITABLE}, [data-axis-no-drag]`;
+const SCROLL_KEYS = new Set([
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "PageUp",
+    "PageDown",
+    "Home",
+    "End",
+    " ",
+]);
+/** True for a key press that scrolls: arrows, Page Up/Down, Home, End and Space, outside editable elements. */
+export function isScrollKey(event) {
+    if (!SCROLL_KEYS.has(event.key))
+        return false;
+    const target = event.target;
+    return !target?.closest?.(EDITABLE);
+}
+const coordinators = new WeakMap();
+/** Registers `client` with the coordinator of its window. Returns the function that unregisters it. */
+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);
+}
+/**
+ * Picks the owner for a drag that moved by `delta`. `chain` runs from the innermost instance outwards.
+ * First choice: the innermost instance that drags along the dominant axis and can still scroll that way.
+ * Otherwise the innermost one that drags along that axis at all (it is at its edge, but still owns the
+ * gesture so the click is not fired). Otherwise nobody, and the browser handles the movement natively.
+ */
+export function pickOwner(chain, delta) {
+    const axis = dominantAxis(delta);
+    const candidates = chain.filter((client) => client.accepts(axis));
+    return candidates.find((client) => client.canScroll(delta)) ?? candidates[0] ?? null;
+}
+// True when the press starts in content that keeps its own mouse behaviour (form fields, opt-outs).
+const blockedByContent = (path, outer) => {
+    for (const node of path) {
+        if (node === outer)
+            return false;
+        if (node.nodeType === 1 && node.matches(NO_DRAG))
+            return true;
+    }
+    return false;
+};
+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 };
+    // An instance destroyed by a listener while the coordinator works on it is no longer registered.
+    const alive = (client) => clients.get(client.el) === client;
+    const detach = () => {
+        win.removeEventListener("pointermove", onPointerMove);
+        win.removeEventListener("pointerup", onPointerUp);
+        win.removeEventListener("pointercancel", onPointerCancel);
+        win.removeEventListener("wheel", onUserScroll, passiveCapture);
+        win.removeEventListener("keydown", onUserScroll, capture);
+        win.removeEventListener("contextmenu", cancel, capture);
+        win.removeEventListener("blur", cancel);
+        win.document.removeEventListener("visibilitychange", onVisibilityChange);
+        session = null;
+    };
+    // Ends the session: the owner ends its drag, every other instance lets go of the press.
+    const close = (ended, velocity) => {
+        detach();
+        if (ended.owner && alive(ended.owner))
+            ended.owner.end(velocity);
+        for (const client of ended.chain)
+            if (client !== ended.owner && alive(client))
+                client.pass();
+    };
+    // The press ended without a pointerup the window saw: a context menu, the window losing focus or the
+    // tab being hidden, or a release over an iframe (the next move then has no button down).
+    const cancel = () => {
+        if (session)
+            close(session, null);
+    };
+    const onVisibilityChange = () => {
+        if (win.document.visibilityState === "hidden")
+            cancel();
+    };
+    // Wheel or keyboard scrolling anywhere, also outside the instances under the pointer, lets go of the holds.
+    const onUserScroll = (event) => {
+        if (event.type === "keydown" && !isScrollKey(event))
+            return;
+        if (session)
+            for (const client of session.chain)
+                client.interrupt();
+    };
+    const onPointerDown = (event) => {
+        // The click that follows a drag fires right after its pointerup, so it can no longer come now. Safari
+        // fires none when the press and the release hit different elements; it must not eat this press's click.
+        suppressClick = false;
+        win.clearTimeout(suppressTimer);
+        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 &&
+            !blockedByContent(path, 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(alive);
+        if (pressed.length === 0)
+            return;
+        session = {
+            pointerId: event.pointerId,
+            start: { x: event.clientX, y: event.clientY },
+            chain: pressed,
+            owner: null,
+            samples: [{ t: event.timeStamp, x: event.clientX, y: event.clientY }],
+        };
+        win.addEventListener("pointermove", onPointerMove);
+        win.addEventListener("pointerup", onPointerUp);
+        win.addEventListener("pointercancel", onPointerCancel);
+        win.addEventListener("wheel", onUserScroll, passiveCapture);
+        win.addEventListener("keydown", onUserScroll, capture);
+        win.addEventListener("contextmenu", cancel, capture);
+        win.addEventListener("blur", cancel);
+        win.document.addEventListener("visibilitychange", onVisibilityChange);
+    };
+    const onPointerMove = (event) => {
+        const current = session;
+        if (!current || event.pointerId !== current.pointerId)
+            return;
+        if (!(event.buttons & 1)) {
+            cancel();
+            return;
+        }
+        const { samples } = current;
+        samples.push({ t: event.timeStamp, x: event.clientX, y: event.clientY });
+        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;
+            const owner = pickOwner(current.chain, delta);
+            if (!owner) {
+                // Nobody drags this way: the browser handles the movement natively.
+                close(current, null);
+                return;
+            }
+            current.owner = owner;
+            for (const client of current.chain)
+                if (client !== owner)
+                    client.yield();
+            owner.start(current.pointerId);
+        }
+        // A listener may have destroyed the owner (which ends the session) since the last move.
+        if (session !== current || !current.owner)
+            return;
+        current.owner.move(delta);
+    };
+    const onPointerUp = (event) => {
+        const current = session;
+        if (!current || event.pointerId !== current.pointerId)
+            return;
+        current.samples.push({ t: event.timeStamp, x: event.clientX, y: event.clientY });
+        if (current.owner) {
+            suppressClick = true;
+            win.clearTimeout(suppressTimer);
+            suppressTimer = win.setTimeout(() => (suppressClick = false), CLICK_SUPPRESS_MS);
+        }
+        close(current, current.owner ? velocityFromSamples(current.samples) : null);
+    };
+    const onPointerCancel = (event) => {
+        if (session && event.pointerId === session.pointerId)
+            cancel();
+    };
+    // A drag that ends over a link or button must not activate it: swallow the one click that follows.
+    const onClick = (event) => {
+        if (!suppressClick)
+            return;
+        suppressClick = false;
+        win.clearTimeout(suppressTimer);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    // Native drag and drop of images and links would steal the pointer before the threshold is reached.
+    const onDragStart = (event) => {
+        if (session)
+            event.preventDefault();
+    };
+    return {
+        add(client) {
+            if (clients.size === 0) {
+                win.addEventListener("pointerdown", onPointerDown, capture);
+                win.addEventListener("click", onClick, capture);
+                win.addEventListener("dragstart", onDragStart, capture);
+            }
+            clients.set(client.el, client);
+            return () => {
+                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) {
+                        // The destroyed instance has cleaned up after itself; the others let go of the press.
+                        current.owner = null;
+                        close(current, null);
+                    }
+                }
+                if (clients.size === 0) {
+                    win.removeEventListener("pointerdown", onPointerDown, capture);
+                    win.removeEventListener("click", onClick, capture);
+                    win.removeEventListener("dragstart", onDragStart, capture);
+                    win.clearTimeout(suppressTimer);
+                    suppressClick = false;
+                    coordinators.delete(win);
+                }
+            };
+        },
+    };
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/math.d.ts

@@ -0,0 +1,90 @@
+/** A 2D vector, e.g. a position, a pointer delta or a velocity. */
+export interface Vector {
+    x: number;
+    y: number;
+}
+/** A pointer position sample: `t` in ms, `x`/`y` in px. */
+export interface Sample extends Vector {
+    t: number;
+}
+/** Only the samples from the last VELOCITY_WINDOW ms before release count towards the fling velocity. */
+export declare const VELOCITY_WINDOW = 100;
+/** Fling speed cap per axis in px/ms, so a jittery sample pair cannot launch the content to the far end. */
+export declare const MAX_VELOCITY = 5;
+/** Per-frame velocity multiplier for momentum. */
+export declare const DECAY = 0.95;
+/** Reference frame duration that DECAY is defined against. */
+export declare const FRAME_MS: number;
+/** Momentum stops below this speed in px/ms. */
+export declare const MIN_VELOCITY = 0.02;
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Velocity in px/ms over the last VELOCITY_WINDOW ms, measured up to the newest sample (the release).
+ * A pointer that stopped before release has no recent movement and yields ~0.
+ */
+export declare function velocityFromSamples(samples: readonly Sample[], window?: number): Vector;
+/** Advances a momentum step on one axis: the distance travelled in `dt` ms and the decayed velocity. */
+export declare function momentumStep(velocity: number, dt: number): {
+    distance: number;
+    velocity: number;
+};
+/** Total distance momentum travels on one axis from `velocity` (px/ms) until it decays to rest. */
+export declare function momentumDistance(velocity: number): number;
+/** The axis a pointer delta mostly moves along. Ties go to x. */
+export declare function dominantAxis(delta: Vector): "x" | "y";
+/** Converts a physical `scrollLeft` into a logical offset from the inline start (always >= 0). */
+export declare function toLogical(scrollLeft: number, rtl: boolean): number;
+/** Converts a logical horizontal offset back into a physical `scrollLeft`. */
+export declare function toPhysical(logical: number, rtl: boolean): number;
+/**
+ * Which axes a computed `scroll-snap-type` snaps. `inline` and `block` assume a horizontal writing mode.
+ */
+export declare function parseSnapType(value: string): {
+    x: boolean;
+    y: boolean;
+};
+export type SnapAlign = "start" | "center" | "end" | "none";
+/**
+ * Per-axis value of a computed `scroll-snap-align` (`"<block> <inline>"`, or one value for both).
+ * The inline value applies to x and the block value to y (horizontal writing mode).
+ */
+export declare function parseSnapAlign(value: string): {
+    x: SnapAlign;
+    y: SnapAlign;
+};
+/**
+ * One axis of a snapport, in viewport px. `start` is the physical low edge (left or top) of the padding box,
+ * `size` its length (clientWidth or clientHeight), and the paddings are physical too (left/right, top/bottom).
+ */
+export interface SnapAxis {
+    start: number;
+    size: number;
+    paddingStart: number;
+    paddingEnd: number;
+    /** The physical scroll offset (scrollLeft or scrollTop). */
+    scroll: number;
+    maxScroll: number;
+    /** True for x in RTL: logical start is the physical high edge and scrollLeft runs negative. */
+    rtl: boolean;
+}
+/** A snap area on one axis in viewport px, already including its scroll-margin. */
+export interface SnapItem {
+    start: number;
+    size: number;
+    align: SnapAlign;
+}
+/**
+ * Logical scroll offsets at which each item satisfies its snap alignment on one axis, clamped to the
+ * scroll range, sorted ascending and de-duplicated within 1px.
+ */
+export declare function snapPositions(axis: SnapAxis, items: readonly SnapItem[]): number[];
+/** The snap position closest to `target`, or `target` itself when there are none. */
+export declare function nearestSnap(positions: readonly number[], target: number): number;
+/** The first snap position past `current` in `direction` (1 = next, -1 = prev), or undefined. */
+export declare function adjacentSnap(positions: readonly number[], current: number, direction: 1 | -1): number | undefined;
+export declare const easeOutCubic: (t: number) => number;
+/**
+ * Duration in ms of an ease-out-cubic glide over `distance` on one axis. When the release velocity points
+ * the same way, the glide starts at that velocity (ease-out-cubic starts at 3 × average speed).
+ */
+export declare function glideDuration(distance: number, velocity?: number): number;

package/dist/math.js

@@ -0,0 +1,139 @@
+// Pure geometry and physics helpers. No DOM access here, so every function is unit-testable in node.
+/** Only the samples from the last VELOCITY_WINDOW ms before release count towards the fling velocity. */
+export const VELOCITY_WINDOW = 100;
+/** Fling speed cap per axis in px/ms, so a jittery sample pair cannot launch the content to the far end. */
+export const MAX_VELOCITY = 5;
+/** Per-frame velocity multiplier for momentum. */
+export const DECAY = 0.95;
+/** Reference frame duration that DECAY is defined against. */
+export const FRAME_MS = 1000 / 60;
+/** Momentum stops below this speed in px/ms. */
+export const MIN_VELOCITY = 0.02;
+export const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+ * Velocity in px/ms over the last VELOCITY_WINDOW ms, measured up to the newest sample (the release).
+ * A pointer that stopped before release has no recent movement and yields ~0.
+ */
+export function velocityFromSamples(samples, window = VELOCITY_WINDOW) {
+    const last = samples.at(-1);
+    if (!last)
+        return { x: 0, y: 0 };
+    let first = last;
+    for (let i = samples.length - 2; i >= 0; i--) {
+        const sample = samples[i];
+        if (last.t - sample.t > window)
+            break;
+        first = sample;
+    }
+    const dt = last.t - first.t;
+    if (dt <= 0)
+        return { x: 0, y: 0 };
+    return {
+        x: clamp((last.x - first.x) / dt, -MAX_VELOCITY, MAX_VELOCITY),
+        y: clamp((last.y - first.y) / dt, -MAX_VELOCITY, MAX_VELOCITY),
+    };
+}
+/** Advances a momentum step on one axis: the distance travelled in `dt` ms and the decayed velocity. */
+export function momentumStep(velocity, dt) {
+    return { distance: velocity * dt, velocity: velocity * DECAY ** (dt / FRAME_MS) };
+}
+/** Total distance momentum travels on one axis from `velocity` (px/ms) until it decays to rest. */
+export function momentumDistance(velocity) {
+    return (velocity * FRAME_MS) / (1 - DECAY);
+}
+/** The axis a pointer delta mostly moves along. Ties go to x. */
+export function dominantAxis(delta) {
+    return Math.abs(delta.x) >= Math.abs(delta.y) ? "x" : "y";
+}
+/** Converts a physical `scrollLeft` into a logical offset from the inline start (always >= 0). */
+export function toLogical(scrollLeft, rtl) {
+    // Modern browsers report RTL scrollLeft as 0 at the start, going negative towards the end.
+    return rtl ? -scrollLeft : scrollLeft;
+}
+/** Converts a logical horizontal offset back into a physical `scrollLeft`. */
+export function toPhysical(logical, rtl) {
+    return rtl ? -logical : logical;
+}
+/**
+ * Which axes a computed `scroll-snap-type` snaps. `inline` and `block` assume a horizontal writing mode.
+ */
+export function parseSnapType(value) {
+    const axis = value.trim().split(/\s+/)[0];
+    return {
+        x: axis === "x" || axis === "both" || axis === "inline",
+        y: axis === "y" || axis === "both" || axis === "block",
+    };
+}
+const toAlign = (value) => value === "start" || value === "center" || value === "end" ? value : "none";
+/**
+ * Per-axis value of a computed `scroll-snap-align` (`"<block> <inline>"`, or one value for both).
+ * The inline value applies to x and the block value to y (horizontal writing mode).
+ */
+export function parseSnapAlign(value) {
+    const [block, inline = block] = value.trim().split(/\s+/);
+    return { x: toAlign(inline), y: toAlign(block) };
+}
+/**
+ * Logical scroll offsets at which each item satisfies its snap alignment on one axis, clamped to the
+ * scroll range, sorted ascending and de-duplicated within 1px.
+ */
+export function snapPositions(axis, items) {
+    const { rtl } = axis;
+    const portLow = axis.start + axis.paddingStart;
+    const portHigh = axis.start + axis.size - axis.paddingEnd;
+    const positions = [];
+    for (const item of items) {
+        if (item.align === "none")
+            continue;
+        const high = item.start + item.size;
+        // start/end follow the inline direction, so in RTL "start" is the high (right) edge.
+        const delta = item.align === "center"
+            ? (item.start + high) / 2 - (portLow + portHigh) / 2
+            : (item.align === "start") !== rtl
+                ? item.start - portLow
+                : high - portHigh;
+        positions.push(clamp(toLogical(axis.scroll + delta, rtl), 0, axis.maxScroll));
+    }
+    positions.sort((a, b) => a - b);
+    const unique = [];
+    for (const position of positions) {
+        const previous = unique.at(-1);
+        if (previous === undefined || position - previous > 1)
+            unique.push(position);
+    }
+    return unique;
+}
+/** The snap position closest to `target`, or `target` itself when there are none. */
+export function nearestSnap(positions, target) {
+    let best = target;
+    let bestDistance = Infinity;
+    for (const position of positions) {
+        const distance = Math.abs(position - target);
+        if (distance < bestDistance) {
+            best = position;
+            bestDistance = distance;
+        }
+    }
+    return best;
+}
+/** The first snap position past `current` in `direction` (1 = next, -1 = prev), or undefined. */
+export function adjacentSnap(positions, current, direction) {
+    if (direction === 1)
+        return positions.find((position) => position > current + 1);
+    for (let i = positions.length - 1; i >= 0; i--)
+        if (positions[i] < current - 1)
+            return positions[i];
+    return undefined;
+}
+export const easeOutCubic = (t) => 1 - (1 - t) ** 3;
+/**
+ * Duration in ms of an ease-out-cubic glide over `distance` on one axis. When the release velocity points
+ * the same way, the glide starts at that velocity (ease-out-cubic starts at 3 × average speed).
+ */
+export function glideDuration(distance, velocity = 0) {
+    const d = Math.abs(distance);
+    if (velocity !== 0 && Math.sign(velocity) === Math.sign(distance)) {
+        return clamp((3 * d) / Math.abs(velocity), 180, 900);
+    }
+    return clamp(200 + d * 0.5, 200, 600);
+}

package/dist/react.d.ts

@@ -0,0 +1,22 @@
+import { type AxisInstance, type AxisOptions, type AxisScrollState } from "./axis.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;
+}
+/**
+ * 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>;
+export type { AxisMode, AxisName, AxisOptions, AxisPosition, AxisScrollState, AxisScrollToOptions, AxisState, } from "./axis.js";

package/dist/react.js

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { createAxis } from "./axis.js";
+const EMPTY_AXIS = { scroll: 0, maxScroll: 0, progress: 0, canScrollPrev: false, canScrollNext: false };
+const EMPTY_STATE = { x: EMPTY_AXIS, y: EMPTY_AXIS, isDragging: false, isMomentum: false };
+const noop = () => { };
+// useLayoutEffect, without React 18's warning during server rendering (where effects never run anyway).
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export function useAxis(options = {}, selector) {
+    const [element, setElement] = useState(null);
+    const [instance, setInstance] = useState(null);
+    const instanceRef = useRef(null);
+    const optionsRef = useRef(options);
+    // Declared before the instance effect, so a new instance is created with the options of the same render.
+    const { axis, momentum, wheel, cursor } = options;
+    useIsomorphicLayoutEffect(() => {
+        optionsRef.current = { axis, momentum, wheel, cursor };
+        instanceRef.current?.setOptions(optionsRef.current);
+    }, [axis, momentum, wheel, cursor]);
+    useIsomorphicLayoutEffect(() => {
+        if (!element)
+            return;
+        const created = createAxis(element, optionsRef.current);
+        instanceRef.current = created;
+        setInstance(created);
+        return () => {
+            created.destroy();
+            instanceRef.current = null;
+            setInstance(null);
+        };
+    }, [element]);
+    const subscribe = useCallback((listener) => instance?.subscribe(listener) ?? noop, [instance]);
+    // Memoised on the state object and the selector, so the snapshot is stable until either changes.
+    const memo = useRef(null);
+    const getSnapshot = useCallback(() => {
+        const current = instance?.getState() ?? EMPTY_STATE;
+        if (memo.current?.state !== current || memo.current.selector !== selector) {
+            memo.current = { state: current, selector, selected: selector ? selector(current) : current };
+        }
+        return memo.current.selected;
+    }, [instance, selector]);
+    const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    const api = useMemo(() => ({
+        scrollPrev: (target) => instanceRef.current?.scrollPrev(target),
+        scrollNext: (target) => instanceRef.current?.scrollNext(target),
+        scrollTo: (position, scrollOptions) => instanceRef.current?.scrollTo(position, scrollOptions),
+        refresh: () => instanceRef.current?.refresh(),
+    }), []);
+    return { ref: setElement, state, api };
+}

package/package.json

@@ -1,6 +1,84 @@
 {
-  "name": "@anyknown/axis",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@anyknown/axis",
+	"version": "0.1.0",
+	"description": "Headless scroll primitive for x, y and 2D panning: native scroll first, mouse drag as an enhancement",
+	"keywords": [
+		"carousel",
+		"drag-scroll",
+		"headless",
+		"kanban",
+		"pan",
+		"react",
+		"scroll",
+		"scroll-snap"
+	],
+	"bugs": {
+		"url": "https://github.com/anyknown-com/axis/issues"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/anyknown-com/axis.git"
+	},
+	"files": [
+		"dist",
+		"LICENSE"
+	],
+	"type": "module",
+	"sideEffects": false,
+	"types": "./dist/index.d.ts",
+	"typesVersions": {
+		"*": {
+			"react": [
+				"./dist/react.d.ts"
+			]
+		}
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./react": {
+			"types": "./dist/react.d.ts",
+			"default": "./dist/react.js"
+		}
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/esm-extensions.mjs",
+		"typecheck": "tsc --noEmit",
+		"lint": "oxlint src test playground",
+		"fmt": "oxfmt",
+		"fmt:check": "oxfmt --check",
+		"check": "pnpm typecheck && pnpm lint && pnpm fmt:check",
+		"test": "vitest run",
+		"dev": "vite --config playground/vite.config.ts",
+		"prepublishOnly": "pnpm check && pnpm test && pnpm build"
+	},
+	"devDependencies": {
+		"@types/node": "^26.4.0",
+		"@types/react": "^19.2.0",
+		"@types/react-dom": "^19.2.5",
+		"@vitest/browser-playwright": "^4.1.11",
+		"oxfmt": "^0.65.0",
+		"oxlint": "^1.80.0",
+		"playwright": "^1.55.0",
+		"react": "^19.2.8",
+		"react-dom": "^19.2.8",
+		"typescript": "^5.9.0",
+		"vite": "^8.2.2",
+		"vitest": "^4.1.11"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0 || ^19.0.0"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		}
+	},
+	"packageManager": "pnpm@10.30.3"
+}