solidjs-motion 0.1.0

package/dist/src/default-values.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Look up the canonical fallback value for a property key. Returns the table
+ * value if known, else `null` — which motion's `animate()` interprets as
+ * "read from computed style at animation start."
+ */
+export declare function getMotionDefault(key: string): number | null;

package/dist/src/index.d.ts

@@ -0,0 +1,16 @@
+export { animate, inView, isMotionValue, motionValue, scroll, spring } from 'motion';
+export { MotionConfig, MotionConfigContext, useMotionConfig } from './motion-config';
+export { MOTION_OPT_KEYS, type Motion, motion } from './motion-proxy';
+export { Presence, type PresenceProps, type UseAnimatePresenceOptions, type UseAnimatePresenceResult, useAnimatePresence, } from './presence';
+export { PresenceContext, usePresenceContext } from './presence-context';
+export { createDragControls } from './primitives/createDragControls';
+export { type CreateInViewOptions, type CreateInViewResult, createInView, } from './primitives/createInView';
+export { createMotion } from './primitives/createMotion';
+export { type CreatePanOptions, type CreatePanResult, createPan, type PanAxisPair, } from './primitives/createPan';
+export { type CreateScrollOptions, type CreateScrollResult, createScroll, } from './primitives/createScroll';
+export { createMotionValue, createMotionValueEvent, createSpring, createTemplate, createTime, createTransform, createVelocity, toSignal, } from './primitives/motion-value';
+export { createReducedMotion, shouldReduceMotion } from './reduced-motion';
+export { targetToStyle } from './style';
+export type * from './types';
+export { useMotion } from './use-motion';
+export { effectiveLabels, resolveVariant, useVariantContext, VariantContext } from './variants';

package/dist/src/motion-config.d.ts

@@ -0,0 +1,14 @@
+import { Context, JSX } from 'solid-js';
+import { MotionConfigContextValue, MotionConfigProps } from './types';
+export declare const MotionConfigContext: Context<MotionConfigContextValue>;
+export declare function useMotionConfig(): MotionConfigContextValue;
+/**
+ * Provider that flows reduced-motion mode, default transition, and CSP nonce
+ * to every descendant motion element.
+ *
+ * @example
+ * <MotionConfig reducedMotion="user" transition={{ duration: 0.4 }}>
+ *   <App />
+ * </MotionConfig>
+ */
+export declare function MotionConfig(props: MotionConfigProps): JSX.Element;

package/dist/src/motion-proxy.d.ts

@@ -0,0 +1,103 @@
+import { Component, JSX } from 'solid-js';
+import { MotionOptions, MotionStyle } from './types';
+/**
+ * The exhaustive list of keys that `motion.X` (and `motion.create`,
+ * landing next) route to `useMotion` rather than the underlying element.
+ * Anything not in this array falls through to `rest` and is spread onto
+ * the DOM element via Solid's reactive spread — keeping things like
+ * `class`, `onClick`, dynamic style, etc. reactive end-to-end.
+ *
+ * The `satisfies` clause ensures every entry IS a valid `MotionOptions`
+ * key (typos fail to compile). The `_ensureExhaustive` constant below
+ * asserts the converse — every `MotionOptions` key appears in this
+ * array — so adding a new option to types.ts without registering here
+ * fails to compile with the missing key surfaced in the error.
+ */
+/**
+ * Union of every `MotionOptions` key the proxy splits off from element
+ * attributes. Hardcoded as a literal union — NOT derived from
+ * `typeof MOTION_OPT_KEYS[number]` — so JSR's "slow types" rule can
+ * resolve the public type without inferring it from a const.
+ *
+ * Two compile-time exhaustiveness directions guarantee consistency
+ * between this type and the runtime `MOTION_OPT_KEYS` array:
+ *
+ *   1. `_MissingMotionOptKeys` (below) verifies the union covers every
+ *      key in `keyof MotionOptions`.
+ *   2. The `satisfies` clause on `MOTION_OPT_KEYS` verifies every array
+ *      entry IS a `MotionOptKey` (typo-proof at the runtime layer).
+ *
+ * If `MotionOptions` grows a new key, both `_MissingMotionOptKeys`
+ * AND `splitProps` at runtime break — the type check surfaces the
+ * specific missing key by name.
+ */
+export type MotionOptKey = "initial" | "animate" | "exit" | "hover" | "press" | "focus" | "inView" | "inViewOptions" | "drag" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragSnapToOrigin" | "dragControls" | "whileDrag" | "panThreshold" | "variants" | "custom" | "transition" | "onAnimationStart" | "onAnimationComplete" | "onAnimationCancel" | "onUpdate" | "onHoverStart" | "onHoverEnd" | "onPressStart" | "onPress" | "onPressCancel" | "onFocus" | "onBlur" | "onPanStart" | "onPan" | "onPanEnd" | "onViewportEnter" | "onViewportLeave" | "onDragStart" | "onDrag" | "onDragEnd" | "onDragTransitionEnd";
+/**
+ * Frozen list of `MotionOptKey`s — fed to `splitProps` at every
+ * tag-component render to separate motion options from element
+ * attributes. The `satisfies` clause checks every entry against
+ * `MotionOptKey` at compile time so typos / drift between the union
+ * and the array surface as errors.
+ */
+export declare const MOTION_OPT_KEYS: readonly MotionOptKey[];
+/**
+ * The shape of the `motion` proxy: every HTML/SVG intrinsic element name
+ * maps to a typed `Component` whose props are that element's native
+ * attribute set intersected with {@link MotionOptions}.
+ *
+ * The intersected `{ create: ... }` member adds the HOC entry point. The
+ * intersection's explicit `create` field wins over the mapped type's
+ * lookup (and there's no HTML/SVG tag named `create`), so `motion.create`
+ * is unambiguously typed as the HOC.
+ */
+export type Motion = {
+    [Tag in keyof JSX.IntrinsicElements]: Component<Omit<JSX.IntrinsicElements[Tag], "style"> & {
+        style?: MotionStyle;
+    } & MotionOptions>;
+} & {
+    /**
+     * Wrap a custom Component with motion's behavior. The wrapped Component
+     * must forward props (specifically `ref` and `style`) to a single DOM
+     * element root — either by spreading `{...props}` on its root or by
+     * explicitly setting `ref={props.ref}` and `style={props.style}`. Solid
+     * doesn't have `forwardRef`; the contract is enforced by convention and
+     * a dev-mode runtime warning if motion's ref never reaches the DOM.
+     *
+     * @example
+     * ```tsx
+     * function MyCard(props) {
+     *   return <div {...props}>{props.children}</div>
+     * }
+     * const Animated = motion.create(MyCard)
+     * <Animated animate={{ x: 100 }} hover={{ scale: 1.05 }} class="card" />
+     * ```
+     */
+    create: <P extends Record<string, any>>(Component: Component<P>) => Component<P & MotionOptions>;
+};
+/**
+ * `motion` — the indexable proxy. Every property access returns a cached
+ * motion-aware component for the given HTML/SVG tag. The reserved
+ * `motion.create` key returns the HOC entry point.
+ *
+ * @example HTML element
+ * ```tsx
+ * <motion.div animate={{ x: 100 }} hover={{ scale: 1.05 }}>
+ *   draggable card
+ * </motion.div>
+ * ```
+ *
+ * @example SVG element (handled transparently via <Dynamic>)
+ * ```tsx
+ * <motion.path d="M0 0 L100 100" animate={{ pathLength: 1 }} />
+ * ```
+ *
+ * @example Wrapping a custom Component via the HOC
+ * ```tsx
+ * const Animated = motion.create(MyCard)
+ * <Animated animate={{ scale: 1.05 }} class="my-card" />
+ * ```
+ *
+ * Non-string keys (Symbols, well-known properties) return `undefined` so
+ * debugging tools and `typeof` checks see a sane shape.
+ */
+export declare const motion: Motion;

package/dist/src/presence-context.d.ts

@@ -0,0 +1,4 @@
+import { Context } from 'solid-js';
+import { PresenceContextValue } from './types';
+export declare const PresenceContext: Context<PresenceContextValue>;
+export declare function usePresenceContext(): PresenceContextValue;

package/dist/src/presence.d.ts

@@ -0,0 +1,95 @@
+import { Component, JSX } from 'solid-js';
+export type PresenceProps = {
+    /**
+     * Exit/enter coordination.
+     * - `"sync"` (default) — exit and enter overlap (transition-group's
+     *   `parallel`). Best for list animations and independent items.
+     * - `"wait"` — old child fully exits before the new one enters
+     *   (transition-group's `out-in`). Single-child only; ignored (with a
+     *   dev-mode warning) when wrapping a list.
+     */
+    mode?: "sync" | "wait";
+    /**
+     * Animate children on first mount. Defaults to `true` (matches motion-
+     * react). Set `false` to suppress the entry animation for the very first
+     * child(ren); subsequent mounts mid-life still animate.
+     */
+    initial?: boolean;
+    /**
+     * List-path only — controls what transition-group does with an exiting
+     * element while its `exit` animation is playing. Forwarded directly to
+     * `@solid-primitives/transition-group`'s `createListTransition`.
+     *
+     * - `"move-to-end"` (default) — the exiting element is appended to the
+     *   end of the rendered array so its DOM position changes during exit.
+     *   Fine for grids/cascades; surprising for vertically-stacked toasts
+     *   because surviving siblings JUMP up while the dismissed item is
+     *   still fading out below them.
+     * - `"keep-index"` — the exiting element stays at its original index
+     *   until exit completes. Surviving siblings don't reflow until the
+     *   slot is released. Best default for notification stacks.
+     * - `"remove"` — no exit transition; the element is gone from the
+     *   rendered array immediately. Useful when the exit is purely visual
+     *   on the child (e.g., it self-animates via opacity transitions
+     *   instead of `exit`).
+     */
+    exitMethod?: "move-to-end" | "keep-index" | "remove";
+    children: JSX.Element;
+};
+/**
+ * Wraps a conditional or iterated JSX subtree and runs the descendants'
+ * `exit` targets before they unmount. Matches motion-react's
+ * `<AnimatePresence>` shape but with Solid's `<Show>` / `<For>` /
+ * `<Index>` patterns instead of conditional children.
+ *
+ * Nested motion children are first-class: when an ancestor unmounts,
+ * Presence walks the subtree from each resolved child and fires every
+ * registered `runExit` it finds in parallel — including motion children
+ * nested inside plain wrappers, or descendants whose `exit` label was
+ * cascaded down via `m.Provider`. Each motion descendant animates with
+ * its own variant/target; transition-group only releases the DOM once
+ * the combined `Promise.all` settles. Mirrors motion-react's behavior
+ * where a `<motion.div exit={...}>` inside an `<AnimatePresence>` boundary
+ * animates correctly regardless of depth.
+ *
+ * @example Single (conditional unmount)
+ * <Presence>
+ *   <Show when={open()}>
+ *     <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+ *       saved
+ *     </motion.div>
+ *   </Show>
+ * </Presence>
+ *
+ * @example List (items entering and exiting independently)
+ * <Presence>
+ *   <For each={items()}>
+ *     {(item) => (
+ *       <motion.li exit={{ opacity: 0, x: 20 }}>{item.text}</motion.li>
+ *     )}
+ *   </For>
+ * </Presence>
+ */
+export declare const Presence: Component<PresenceProps>;
+export type UseAnimatePresenceOptions = {
+    /** Same semantics as `<Presence initial>`. Defaults to `true`. */
+    initial?: boolean;
+};
+export type UseAnimatePresenceResult = {
+    /**
+     * Provider component to wrap your conditional rendering. Every motion
+     * descendant inside this Provider registers with the hook's internal
+     * registry and is reachable via `exit()`.
+     */
+    Provider: Component<{
+        children: JSX.Element;
+    }>;
+    /**
+     * Trigger exit on every motion child currently registered with this
+     * hook. Resolves when all exit animations have settled. Calling `exit()`
+     * does NOT unmount anything — the caller is responsible for flipping
+     * their mount signal once the promise resolves.
+     */
+    exit: () => Promise<void>;
+};
+export declare function useAnimatePresence(options?: UseAnimatePresenceOptions): UseAnimatePresenceResult;

package/dist/src/primitives/createDrag.d.ts

@@ -0,0 +1,16 @@
+import { MotionOptions } from '../types';
+import { SetActive } from './gesture-state';
+/**
+ * Bind pointer-driven drag to an element. Layers on top of createPan for the
+ * pointer session; adds transform writes, body styles, pointer capture, and
+ * state-machine activation.
+ *
+ * Drag is enabled when `opts.drag` is truthy (`true`, `"x"`, or `"y"`).
+ * createDrag always wires the pointer session — the enable check is per-
+ * gesture-start, so toggling `opts.drag` on/off doesn't churn listeners.
+ *
+ * Phase 2 Commit 6 — Stage 2 scope: VE bootstrap, translation, axis lock,
+ * body/pointer styles, callbacks, cleanup. Constraints + elastic resistance
+ * land in Stage 3; momentum + dragSnapToOrigin in Stage 4.
+ */
+export declare function createDrag(el: HTMLElement, getOpts: () => MotionOptions, setActive: SetActive): void;

package/dist/src/primitives/createDragControls.d.ts

@@ -0,0 +1,30 @@
+import { DragControls } from '../types';
+/**
+ * Symbol used to attach the registration method on the controls object.
+ * `createDrag` imports this symbol to find/register its handler. Userland
+ * code never touches it — exported only for library-internal use.
+ */
+export declare const DRAG_CONTROLS_REGISTER: unique symbol;
+/**
+ * Create a controls instance for imperatively starting a drag on a motion
+ * element from a different element (e.g., a drag-handle button).
+ *
+ * Pattern (Q9):
+ *
+ * @example
+ * function Card() {
+ *   const controls = createDragControls()
+ *   const m = useMotion({ drag: "y", dragControls: controls })
+ *   return (
+ *     <div {...m()}>
+ *       <button onPointerDown={(e) => controls.start(e)}>handle</button>
+ *       Card body
+ *     </div>
+ *   )
+ * }
+ *
+ * The handle's pointerdown fires `controls.start(event)`. createDrag is
+ * registered with the controls and translates the call into a pan-session
+ * synthesized from the handle's event, bypassing the threshold gate.
+ */
+export declare function createDragControls(): DragControls;

package/dist/src/primitives/createGestures.d.ts

@@ -0,0 +1,8 @@
+import { MotionElement, MotionOptions } from '../types';
+import { SetActive } from './gesture-state';
+/**
+ * Bind pointer-event-driven gestures (hover, press) to the motion element.
+ * Toggles the state machine's `whileHover` / `whilePress` flags and forwards
+ * events to the user's `MotionCallbacks`.
+ */
+export declare function createGestures(el: MotionElement, getOpts: () => MotionOptions, setActive: SetActive): void;

package/dist/src/primitives/createInView.d.ts

@@ -0,0 +1,51 @@
+import { Accessor } from 'solid-js';
+import { ViewportOptions } from '../types';
+export type CreateInViewOptions = ViewportOptions & {
+    /**
+     * Fires with the raw {@link IntersectionObserverEntry} on every
+     * visibility transition (enter AND leave). Convenience hook for callers
+     * who prefer event-driven access to the entry — the entry is also
+     * available reactively via the returned `view.entry()` accessor.
+     */
+    onChange?: (entry: IntersectionObserverEntry) => void;
+};
+/** Returned by {@link createInView}. Two Solid Accessors — call them to track. */
+export type CreateInViewResult = {
+    /** Solid Accessor; `true` while the element intersects the viewport per the configured threshold. */
+    isInView: Accessor<boolean>;
+    /** Solid Accessor; the most recent {@link IntersectionObserverEntry}, or `null` before any. */
+    entry: Accessor<IntersectionObserverEntry | null>;
+};
+/**
+ * Observe an element via {@link IntersectionObserver} and expose its
+ * in-view state as a pair of Solid Accessors.
+ *
+ * Pass a ref-style accessor that returns the element. The observer
+ * attaches once the accessor returns a non-null element and re-attaches
+ * if it changes. The observer is disconnected on owner disposal.
+ *
+ * Options can be a static object or a function form (matching `useMotion`
+ * and `createPan`'s convention). The function form is tracked inside the
+ * effect — option changes (e.g., switching `root`) re-attach the observer.
+ *
+ * @example Static options
+ * const [el, setEl] = createSignal<HTMLElement>()
+ * const view = createInView(el, { once: true })
+ * createEffect(() => {
+ *   if (view.isInView()) console.log("now in view")
+ * })
+ *
+ * @example Function-form options (reactive)
+ * const [root, setRoot] = createSignal<HTMLElement>()
+ * const view = createInView(el, () => ({ root, margin: "100px" }))
+ *
+ * @example Reading the raw entry reactively
+ * const view = createInView(el)
+ * createEffect(() => {
+ *   const e = view.entry()
+ *   if (e) console.log("ratio:", e.intersectionRatio)
+ * })
+ *
+ * <div ref={setEl}>watch me</div>
+ */
+export declare function createInView(ref: () => Element | null | undefined, options?: CreateInViewOptions | (() => CreateInViewOptions)): CreateInViewResult;

package/dist/src/primitives/createMotion.d.ts

@@ -0,0 +1,82 @@
+import { MotionValue } from 'motion';
+import { AnimateValue, MotionElement, MotionOptions, Target, Transition, VariantContextValue, VariantLabels, Variants } from '../types';
+import { ActiveStoreTuple } from './gesture-state';
+/**
+ * Detect whether an animate-value is a variant name (string or string[]) vs.
+ * an explicit target object. Returns the labels or undefined.
+ */
+export declare function asVariantLabels(value: AnimateValue | undefined): VariantLabels | undefined;
+/**
+ * Resolve a per-state animate value into a {@link Target}. Implements the
+ * Q4 sub-2 priority table:
+ *
+ * - explicit Target object → use as-is (parent context ignored)
+ * - variant name → look up in own variants only (no cascade)
+ * - undefined → fall back to parent context's variant name, then look up in
+ *   own variants
+ */
+export declare function resolveTarget(ownValue: AnimateValue | undefined, ownVariants: Variants | undefined, parentLabel: VariantLabels | undefined, custom: unknown): Target | null;
+/**
+ * Merge transition specs in priority order: MotionConfig default <
+ * user's `transition` < per-target `transition`. When reduced motion is
+ * active, returns `{ duration: 0 }` and drops everything else (Q11 sub-4).
+ */
+export declare function mergeTransition(configDefault: Transition | undefined, ownTransition: Transition | undefined, perTargetTransition: Transition | undefined, reduced: boolean): Transition;
+/**
+ * Apply a static target to an element's inline style before paint. Used on
+ * mount when no SSR style was emitted. The ref callback fires before the
+ * browser yields, so this avoids a frame of flicker.
+ */
+declare function applyStaticStyle(el: MotionElement, target: Target): void;
+export type CreateMotionConfig = {
+    /**
+     * When true, `createMotion` skips applying the initial style — the server
+     * already emitted it inline, and re-applying on hydration would shift the
+     * paint. Detected via the `data-motion-hydrated` marker in useMotion.
+     */
+    initialAppliedBySSR?: boolean;
+    /**
+     * Q4 — useMotion lifts the gesture-state active store one level up so its
+     * `myVariantCtx` can read the same flags it propagates to descendants.
+     * When omitted (standalone createMotion use), the state machine creates
+     * its own internal store.
+     */
+    activeStore?: ActiveStoreTuple;
+    /**
+     * Q4 follow-up — useMotion passes a shadowed parent context here so the
+     * controlling-variants check is applied uniformly. When omitted, createMotion
+     * falls back to `useVariantContext()` directly (the standalone path).
+     */
+    parentContext?: VariantContextValue;
+    /**
+     * MV-in-style Stage 2 — useMotion scrapes `MotionValue`-valued keys out of
+     * the user's `style` prop and passes them here. createMotion registers
+     * each as an external (user-owned) entry in the value registry and
+     * subscribes a writer that re-composes `el.style` from the registry
+     * snapshot on every change.
+     */
+    styleMotionValues?: Map<string, MotionValue<unknown>>;
+    /**
+     * MV-in-style Stage 4 — static transform-shortcut entries in the user's
+     * `style` (e.g., `style={{ x: 10, scale: mv }}`'s `x: 10`). useMotion scrapes
+     * these alongside MVs so createMotion can seed transient registry entries
+     * for them. Without this, the writer would drop the static keys on every
+     * recompose since they wouldn't appear in the registry.
+     *
+     * Map values are the resolved leaf (number or string) — no MVs, no
+     * keyframe arrays, no accessor functions. useMotion runs the
+     * `snapshotValue` reduction before passing them in.
+     */
+    styleStaticTransforms?: Map<string, number | string>;
+};
+/**
+ * The imperative primitive: bind an element to a reactive motion-options
+ * source. Caller is responsible for keeping the element alive (refs in a
+ * component, drag controls, etc.).
+ *
+ * Phase 1 scope: animate + initial + transition + lifecycle hooks +
+ * reduced-motion override + presence registration. Phase 2 layers gesture
+ * states (hover/press/focus/inView) and drag on top.
+ */
+export declare function createMotion(el: MotionElement, getOpts: () => MotionOptions, config?: CreateMotionConfig): void;
+export { applyStaticStyle };

package/dist/src/primitives/createPan.d.ts

@@ -0,0 +1,83 @@
+import { Accessor } from 'solid-js';
+import { MotionValueAccessor, PanInfo } from '../types';
+export type CreatePanOptions = {
+    /** Fires once after pointer movement crosses the threshold. */
+    onPanStart?: (event: PointerEvent, info: PanInfo) => void;
+    /** Fires on every pointermove after onPanStart, until pointerup/cancel. */
+    onPan?: (event: PointerEvent, info: PanInfo) => void;
+    /**
+     * Fires on pointerup OR pointercancel after onPanStart has fired.
+     * If the pointer was released before the threshold was crossed, onPanEnd
+     * is NOT fired (no pan ever happened).
+     */
+    onPanEnd?: (event: PointerEvent, info: PanInfo) => void;
+    /**
+     * Minimum cumulative offset (in px) before onPanStart fires. Distinguishes
+     * pan from click. Default: 3px (motion's default).
+     */
+    threshold?: number;
+};
+/** Per-axis pair of {@link MotionValueAccessor}s — `pan.point`, `pan.delta`, etc. */
+export type PanAxisPair = {
+    x: MotionValueAccessor<number>;
+    y: MotionValueAccessor<number>;
+};
+/**
+ * Returned by {@link createPan}. `isPanning` is a plain Accessor (booleans
+ * aren't animate-able). The four numeric pairs are MotionValueAccessors,
+ * each composable with `animate()`, `createTransform`, and `useMotion`.
+ */
+export type CreatePanResult = {
+    isPanning: Accessor<boolean>;
+    point: PanAxisPair;
+    delta: PanAxisPair;
+    offset: PanAxisPair;
+    velocity: PanAxisPair;
+};
+/**
+ * Observe pointer-driven pan gestures on an element.
+ *
+ * Returns `{ isPanning, point, delta, offset, velocity }`:
+ *
+ * - `pan.isPanning()` — Solid Accessor; `true` between onPanStart and onPanEnd.
+ * - `pan.point.x`, `pan.point.y` — current pointer position in client coords.
+ *   Each is a {@link MotionValueAccessor}: call `pan.point.x()` for a tracked
+ *   read, `pan.point.x.get()` for an untracked snapshot, and pass it directly
+ *   to `animate()`, `createTransform`, or `useMotion` targets.
+ * - `pan.delta.x/y` — delta since last pointermove.
+ * - `pan.offset.x/y` — cumulative offset since the current pointerdown.
+ * - `pan.velocity.x/y` — sliding-window velocity in px/sec.
+ *
+ * Fields update from `pointerdown` forward (including pre-threshold moves)
+ * — gate reads on `pan.isPanning()` if you only care about real pans.
+ *
+ * The `options` argument accepts either a static object or a function form
+ * (matching `useMotion`'s convention). The function form is read INSIDE
+ * each pointer-event handler, so reactive option changes apply on the next
+ * relevant event without re-attaching listeners.
+ *
+ * @example Static options
+ * const pan = createPan(el, {
+ *   onPanStart: (e, info) => console.log("start", info.point),
+ *   threshold: 3,
+ * })
+ *
+ * @example Reactive options (function form — signals tracked)
+ * const [threshold, setThreshold] = createSignal(3)
+ * const pan = createPan(el, () => ({
+ *   threshold: threshold(),
+ *   onPanStart: (e, info) => console.log(info),
+ * }))
+ *
+ * @example Composing pan.point.x with createTransform
+ * const pan = createPan(el)
+ * const rotation = createTransform(pan.point.x, [0, 300], [0, 90])
+ * <div ref={setEl} style={{ transform: `rotate(${rotation()}deg)` }} />
+ *
+ * @example Reading reactively in JSX
+ * const pan = createPan(el)
+ * <Show when={pan.isPanning()}>
+ *   Position: {pan.point.x()}, {pan.point.y()}
+ * </Show>
+ */
+export declare function createPan(ref: () => HTMLElement | null | undefined, options?: CreatePanOptions | (() => CreatePanOptions)): CreatePanResult;

package/dist/src/primitives/createScroll.d.ts

@@ -0,0 +1,40 @@
+import { MotionValueAccessor } from '../types';
+type ScrollOffset = any[];
+export type CreateScrollOptions = {
+    /** Accessor returning the scroll container element. Defaults to window. */
+    container?: () => Element | null;
+    /** Accessor returning the scroll target. Defaults to the container itself. */
+    target?: () => Element | null;
+    /** Primary scroll axis (both axes are still populated regardless). */
+    axis?: "x" | "y";
+    /** Intersection offsets controlling when progress reaches 0/1. */
+    offset?: ScrollOffset;
+};
+export type CreateScrollResult = {
+    /** Current scroll-x position in px. Callable: `scrollX()` for reactive read. */
+    scrollX: MotionValueAccessor<number>;
+    /** Current scroll-y position in px. Callable: `scrollY()` for reactive read. */
+    scrollY: MotionValueAccessor<number>;
+    /** Normalized scroll-x progress in `[0, 1]` (or `[0, n]` for multi-offset). */
+    scrollXProgress: MotionValueAccessor<number>;
+    /** Normalized scroll-y progress in `[0, 1]`. */
+    scrollYProgress: MotionValueAccessor<number>;
+};
+/**
+ * Bind four {@link MotionValueAccessor}s to a scroll source. Mirrors
+ * motion/react's `useScroll`; defaults to the window when no container is
+ * supplied. Each returned value is callable as a Solid Accessor AND has the
+ * full MotionValue surface, so it composes with `useMotion`'s target,
+ * `animate()`, `createTransform`, and direct JSX reactivity.
+ *
+ * @example
+ * const { scrollY, scrollYProgress } = createScroll()
+ * const opacity = createTransform(scrollYProgress, [0, 1], [1, 0])
+ *
+ * @example
+ * const [el, setEl] = createSignal<HTMLElement>()
+ * const { scrollY } = createScroll({ container: el })
+ * <div ref={setEl} style={{ overflow: "auto" }}>...</div>
+ */
+export declare function createScroll(options?: CreateScrollOptions): CreateScrollResult;
+export {};