@sweberdev/lagrangian-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Seya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# @sweberdev/lagrangian-react
+
+React hooks for [Lagrangian](https://packages.sweber.dev/lagrangian): physical springs, draggable elements with inertia and a 2D physics world with gravity and collisions. Elements are styled directly, so nothing re-renders on every frame.
+
+```sh
+pnpm add @sweberdev/lagrangian @sweberdev/lagrangian-react
+```
+
+| Hook | What it does |
+|---|---|
+| `useSpringProps(props, options)` | ref that springs the element to `{ x, y, scale, rotate, opacity, --custom }` whenever they change |
+| `useSpring(target, options)` | a physical value following `target` with momentum |
+| `useValue(value)` | the current number, re-rendering on change (for readouts) |
+| `usePhysicsValue(initial)` | a physical value that lives as long as the component |
+| `useDraggable(options)` | ref and handle for a draggable, throwable element |
+| `useWorld(options)` | ref for the container and the running `World` |
+| `useBody(world, options)` | ref for an element that follows a body in the world |
+
+```tsx
+import { useBody, useWorld } from "@sweberdev/lagrangian-react";
+
+function Ball({ world }) {
+  const [ref] = useBody<HTMLDivElement>(world, { x: 100, y: 40, radius: 24, restitution: 0.7 });
+  return <div ref={ref} className="absolute left-0 top-0 size-12 rounded-full bg-black" />;
+}
+
+export function Playground() {
+  const [ref, world] = useWorld<HTMLDivElement>();
+  return (
+    <div ref={ref} className="relative h-96 overflow-hidden">
+      <Ball world={world} />
+    </div>
+  );
+}
+```
+
+Docs: [packages.sweber.dev/lagrangian/docs](https://packages.sweber.dev/lagrangian/docs). MIT © Seya Weber

package/dist/index.cjs

@@ -0,0 +1,161 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  useBody: () => useBody,
+  useDraggable: () => useDraggable,
+  usePhysicsValue: () => usePhysicsValue,
+  useSpring: () => useSpring,
+  useSpringProps: () => useSpringProps,
+  useValue: () => useValue,
+  useWorld: () => useWorld
+});
+module.exports = __toCommonJS(index_exports);
+var import_lagrangian = require("@sweberdev/lagrangian");
+var import_react = require("react");
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react.useEffect : import_react.useLayoutEffect;
+function useLatest(current) {
+  const ref = (0, import_react.useRef)(current);
+  useIsoLayoutEffect(() => {
+    ref.current = current;
+  });
+  return ref;
+}
+function useAttach(attach) {
+  const cleanup = (0, import_react.useRef)(null);
+  const latest = useLatest(attach);
+  return (0, import_react.useCallback)(
+    (element) => {
+      cleanup.current?.();
+      cleanup.current = null;
+      if (!element) return;
+      const detach = latest.current(element);
+      cleanup.current = detach;
+      return () => {
+        if (cleanup.current === detach) {
+          detach();
+          cleanup.current = null;
+        }
+      };
+    },
+    [latest]
+  );
+}
+function usePhysicsValue(initial = 0) {
+  const [v] = (0, import_react.useState)(() => (0, import_lagrangian.value)(initial));
+  (0, import_react.useEffect)(() => () => v.stop(), [v]);
+  return v;
+}
+function useSpring(target, options = {}) {
+  const v = usePhysicsValue(target);
+  const latest = useLatest(options);
+  (0, import_react.useEffect)(() => {
+    v.to(target, latest.current);
+  }, [v, target, latest]);
+  return v;
+}
+function useValue(v) {
+  return (0, import_react.useSyncExternalStore)(
+    (notify) => v.on(notify),
+    () => v.get(),
+    () => v.get()
+  );
+}
+function useSpringProps(props, options = {}) {
+  const ref = (0, import_react.useRef)(null);
+  const latest = useLatest(options);
+  const key = JSON.stringify(props);
+  useIsoLayoutEffect(() => {
+    if (!ref.current) return;
+    const animation = (0, import_lagrangian.animate)(ref.current, props, latest.current);
+    return () => animation.stop();
+  }, [key, latest]);
+  return ref;
+}
+function useDraggable(options = {}) {
+  const [handle, setHandle] = (0, import_react.useState)(null);
+  const latest = useLatest(options);
+  const ref = useAttach((element) => {
+    const current = latest.current;
+    const drag = (0, import_lagrangian.draggable)(element, {
+      ...current,
+      bounds: () => {
+        const b = latest.current.bounds;
+        return (typeof b === "function" ? b() : b) ?? {};
+      },
+      onStart: (info) => latest.current.onStart?.(info),
+      onMove: (info) => latest.current.onMove?.(info),
+      onEnd: (info) => latest.current.onEnd?.(info)
+    });
+    setHandle(drag);
+    return () => {
+      drag.destroy();
+      setHandle(null);
+    };
+  });
+  return [ref, handle];
+}
+function useWorld(options = {}) {
+  const latest = useLatest(options);
+  const [world] = (0, import_react.useState)(
+    () => new import_lagrangian.World({
+      ...options,
+      onFrame: (w) => latest.current.onFrame?.(w),
+      onCollide: (a, b, speed) => latest.current.onCollide?.(a, b, speed)
+    })
+  );
+  const ref = useAttach((element) => {
+    world.setBounds(element);
+    world.start();
+    const unbind = latest.current.interactive !== false ? world.bindPointer(element) : () => {
+    };
+    return () => {
+      unbind();
+      world.stop();
+    };
+  });
+  return [ref, world];
+}
+function useBody(world, options) {
+  const [body, setBody] = (0, import_react.useState)(null);
+  const latest = useLatest(options);
+  const ref = useAttach((element) => {
+    const added = world.add({ ...latest.current, element });
+    setBody(added);
+    return () => {
+      world.remove(added);
+      setBody(null);
+    };
+  });
+  return [ref, body];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBody,
+  useDraggable,
+  usePhysicsValue,
+  useSpring,
+  useSpringProps,
+  useValue,
+  useWorld
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import {\n  type AnimateOptions,\n  animate,\n  type Body,\n  type BodyOptions,\n  type Draggable,\n  type DraggableOptions,\n  draggable,\n  type PhysicsValue,\n  type Props,\n  type SpringOptions,\n  value,\n  World,\n  type WorldOptions,\n} from \"@sweberdev/lagrangian\";\nimport {\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Keeps the latest value in a ref so callbacks never go stale. */\nfunction useLatest<T>(current: T) {\n  const ref = useRef(current);\n  useIsoLayoutEffect(() => {\n    ref.current = current;\n  });\n  return ref;\n}\n\n/**\n * A ref callback with cleanup that works in React 18 (called with null) and 19 (cleanup return).\n */\nfunction useAttach<T extends Element>(attach: (element: T) => () => void): RefCallback<T> {\n  const cleanup = useRef<(() => void) | null>(null);\n  const latest = useLatest(attach);\n  return useCallback(\n    (element: T | null) => {\n      cleanup.current?.();\n      cleanup.current = null;\n      if (!element) return;\n      const detach = latest.current(element);\n      cleanup.current = detach;\n      return () => {\n        if (cleanup.current === detach) {\n          detach();\n          cleanup.current = null;\n        }\n      };\n    },\n    [latest],\n  );\n}\n\n/** A physical value that lives as long as the component. */\nexport function usePhysicsValue(initial = 0): PhysicsValue {\n  const [v] = useState(() => value(initial));\n  useEffect(() => () => v.stop(), [v]);\n  return v;\n}\n\n/**\n * A value that springs to `target` whenever it changes, keeping its momentum when the target\n * changes mid-flight. Read it with `useValue` or subscribe with `value.on`.\n */\nexport function useSpring(target: number, options: SpringOptions = {}): PhysicsValue {\n  const v = usePhysicsValue(target);\n  const latest = useLatest(options);\n  useEffect(() => {\n    v.to(target, latest.current);\n  }, [v, target, latest]);\n  return v;\n}\n\n/** Re-renders with the current number. Fine for readouts; style elements with `useSpringProps`. */\nexport function useValue(v: PhysicsValue): number {\n  return useSyncExternalStore(\n    (notify) => v.on(notify),\n    () => v.get(),\n    () => v.get(),\n  );\n}\n\n/**\n * Springs an element to `props` whenever they change, without re-rendering on every frame.\n *\n * ```tsx\n * const ref = useSpringProps<HTMLDivElement>({ x: open ? 240 : 0 }, { bounce: 0.3 })\n * return <div ref={ref} />\n * ```\n */\nexport function useSpringProps<T extends Element>(props: Props, options: AnimateOptions = {}) {\n  const ref = useRef<T>(null);\n  const latest = useLatest(options);\n  const key = JSON.stringify(props);\n  useIsoLayoutEffect(() => {\n    if (!ref.current) return;\n    const animation = animate(ref.current, props, latest.current);\n    return () => animation.stop();\n  }, [key, latest]);\n  return ref;\n}\n\n/** Makes the element draggable and throwable. Returns a ref callback and the drag handle. */\nexport function useDraggable<T extends HTMLElement>(\n  options: DraggableOptions = {},\n): [RefCallback<T>, Draggable | null] {\n  const [handle, setHandle] = useState<Draggable | null>(null);\n  const latest = useLatest(options);\n  const ref = useAttach<T>((element) => {\n    // Read options when events fire, so callbacks and snap points can change between renders.\n    const current = latest.current;\n    const drag = draggable(element, {\n      ...current,\n      bounds: () => {\n        const b = latest.current.bounds;\n        return (typeof b === \"function\" ? b() : b) ?? {};\n      },\n      onStart: (info) => latest.current.onStart?.(info),\n      onMove: (info) => latest.current.onMove?.(info),\n      onEnd: (info) => latest.current.onEnd?.(info),\n    });\n    setHandle(drag);\n    return () => {\n      drag.destroy();\n      setHandle(null);\n    };\n  });\n  return [ref, handle];\n}\n\n/**\n * A running physics world whose walls are the container element. Bodies inside can be\n * grabbed and thrown unless `interactive` is false.\n */\nexport function useWorld<T extends HTMLElement>(\n  options: Omit<WorldOptions, \"bounds\"> & { interactive?: boolean } = {},\n): [RefCallback<T>, World] {\n  const latest = useLatest(options);\n  const [world] = useState(\n    () =>\n      new World({\n        ...options,\n        onFrame: (w) => latest.current.onFrame?.(w),\n        onCollide: (a, b, speed) => latest.current.onCollide?.(a, b, speed),\n      }),\n  );\n  const ref = useAttach<T>((element) => {\n    world.setBounds(element);\n    world.start();\n    const unbind = latest.current.interactive !== false ? world.bindPointer(element) : () => {};\n    return () => {\n      unbind();\n      world.stop();\n    };\n  });\n  return [ref, world];\n}\n\n/** Adds a body to the world that the element follows. Position the element absolutely at 0,0. */\nexport function useBody<T extends HTMLElement>(\n  world: World,\n  options: Omit<BodyOptions, \"element\">,\n): [RefCallback<T>, Body | null] {\n  const [body, setBody] = useState<Body | null>(null);\n  const latest = useLatest(options);\n  const ref = useAttach<T>((element) => {\n    const added = world.add({ ...latest.current, element });\n    setBody(added);\n    return () => {\n      world.remove(added);\n      setBody(null);\n    };\n  });\n  return [ref, body];\n}\n\nexport type {\n  AnimateOptions,\n  Body,\n  BodyOptions,\n  Draggable,\n  DraggableOptions,\n  PhysicsValue,\n  Props,\n  SpringOptions,\n  WorldOptions,\n};\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { RefCallback } from 'react';
+import { World, BodyOptions, Body, DraggableOptions, Draggable, PhysicsValue, SpringOptions, Props, AnimateOptions, WorldOptions } from '@sweberdev/lagrangian';
+export { AnimateOptions, Body, BodyOptions, Draggable, DraggableOptions, PhysicsValue, Props, SpringOptions, WorldOptions } from '@sweberdev/lagrangian';
+
+/** A physical value that lives as long as the component. */
+declare function usePhysicsValue(initial?: number): PhysicsValue;
+/**
+ * A value that springs to `target` whenever it changes, keeping its momentum when the target
+ * changes mid-flight. Read it with `useValue` or subscribe with `value.on`.
+ */
+declare function useSpring(target: number, options?: SpringOptions): PhysicsValue;
+/** Re-renders with the current number. Fine for readouts; style elements with `useSpringProps`. */
+declare function useValue(v: PhysicsValue): number;
+/**
+ * Springs an element to `props` whenever they change, without re-rendering on every frame.
+ *
+ * ```tsx
+ * const ref = useSpringProps<HTMLDivElement>({ x: open ? 240 : 0 }, { bounce: 0.3 })
+ * return <div ref={ref} />
+ * ```
+ */
+declare function useSpringProps<T extends Element>(props: Props, options?: AnimateOptions): react.RefObject<T | null>;
+/** Makes the element draggable and throwable. Returns a ref callback and the drag handle. */
+declare function useDraggable<T extends HTMLElement>(options?: DraggableOptions): [RefCallback<T>, Draggable | null];
+/**
+ * A running physics world whose walls are the container element. Bodies inside can be
+ * grabbed and thrown unless `interactive` is false.
+ */
+declare function useWorld<T extends HTMLElement>(options?: Omit<WorldOptions, "bounds"> & {
+    interactive?: boolean;
+}): [RefCallback<T>, World];
+/** Adds a body to the world that the element follows. Position the element absolutely at 0,0. */
+declare function useBody<T extends HTMLElement>(world: World, options: Omit<BodyOptions, "element">): [RefCallback<T>, Body | null];
+
+export { useBody, useDraggable, usePhysicsValue, useSpring, useSpringProps, useValue, useWorld };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { RefCallback } from 'react';
+import { World, BodyOptions, Body, DraggableOptions, Draggable, PhysicsValue, SpringOptions, Props, AnimateOptions, WorldOptions } from '@sweberdev/lagrangian';
+export { AnimateOptions, Body, BodyOptions, Draggable, DraggableOptions, PhysicsValue, Props, SpringOptions, WorldOptions } from '@sweberdev/lagrangian';
+
+/** A physical value that lives as long as the component. */
+declare function usePhysicsValue(initial?: number): PhysicsValue;
+/**
+ * A value that springs to `target` whenever it changes, keeping its momentum when the target
+ * changes mid-flight. Read it with `useValue` or subscribe with `value.on`.
+ */
+declare function useSpring(target: number, options?: SpringOptions): PhysicsValue;
+/** Re-renders with the current number. Fine for readouts; style elements with `useSpringProps`. */
+declare function useValue(v: PhysicsValue): number;
+/**
+ * Springs an element to `props` whenever they change, without re-rendering on every frame.
+ *
+ * ```tsx
+ * const ref = useSpringProps<HTMLDivElement>({ x: open ? 240 : 0 }, { bounce: 0.3 })
+ * return <div ref={ref} />
+ * ```
+ */
+declare function useSpringProps<T extends Element>(props: Props, options?: AnimateOptions): react.RefObject<T | null>;
+/** Makes the element draggable and throwable. Returns a ref callback and the drag handle. */
+declare function useDraggable<T extends HTMLElement>(options?: DraggableOptions): [RefCallback<T>, Draggable | null];
+/**
+ * A running physics world whose walls are the container element. Bodies inside can be
+ * grabbed and thrown unless `interactive` is false.
+ */
+declare function useWorld<T extends HTMLElement>(options?: Omit<WorldOptions, "bounds"> & {
+    interactive?: boolean;
+}): [RefCallback<T>, World];
+/** Adds a body to the world that the element follows. Position the element absolutely at 0,0. */
+declare function useBody<T extends HTMLElement>(world: World, options: Omit<BodyOptions, "element">): [RefCallback<T>, Body | null];
+
+export { useBody, useDraggable, usePhysicsValue, useSpring, useSpringProps, useValue, useWorld };

package/dist/index.js

@@ -0,0 +1,143 @@
+"use client";
+
+// src/index.tsx
+import {
+  animate,
+  draggable,
+  value,
+  World
+} from "@sweberdev/lagrangian";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useLatest(current) {
+  const ref = useRef(current);
+  useIsoLayoutEffect(() => {
+    ref.current = current;
+  });
+  return ref;
+}
+function useAttach(attach) {
+  const cleanup = useRef(null);
+  const latest = useLatest(attach);
+  return useCallback(
+    (element) => {
+      cleanup.current?.();
+      cleanup.current = null;
+      if (!element) return;
+      const detach = latest.current(element);
+      cleanup.current = detach;
+      return () => {
+        if (cleanup.current === detach) {
+          detach();
+          cleanup.current = null;
+        }
+      };
+    },
+    [latest]
+  );
+}
+function usePhysicsValue(initial = 0) {
+  const [v] = useState(() => value(initial));
+  useEffect(() => () => v.stop(), [v]);
+  return v;
+}
+function useSpring(target, options = {}) {
+  const v = usePhysicsValue(target);
+  const latest = useLatest(options);
+  useEffect(() => {
+    v.to(target, latest.current);
+  }, [v, target, latest]);
+  return v;
+}
+function useValue(v) {
+  return useSyncExternalStore(
+    (notify) => v.on(notify),
+    () => v.get(),
+    () => v.get()
+  );
+}
+function useSpringProps(props, options = {}) {
+  const ref = useRef(null);
+  const latest = useLatest(options);
+  const key = JSON.stringify(props);
+  useIsoLayoutEffect(() => {
+    if (!ref.current) return;
+    const animation = animate(ref.current, props, latest.current);
+    return () => animation.stop();
+  }, [key, latest]);
+  return ref;
+}
+function useDraggable(options = {}) {
+  const [handle, setHandle] = useState(null);
+  const latest = useLatest(options);
+  const ref = useAttach((element) => {
+    const current = latest.current;
+    const drag = draggable(element, {
+      ...current,
+      bounds: () => {
+        const b = latest.current.bounds;
+        return (typeof b === "function" ? b() : b) ?? {};
+      },
+      onStart: (info) => latest.current.onStart?.(info),
+      onMove: (info) => latest.current.onMove?.(info),
+      onEnd: (info) => latest.current.onEnd?.(info)
+    });
+    setHandle(drag);
+    return () => {
+      drag.destroy();
+      setHandle(null);
+    };
+  });
+  return [ref, handle];
+}
+function useWorld(options = {}) {
+  const latest = useLatest(options);
+  const [world] = useState(
+    () => new World({
+      ...options,
+      onFrame: (w) => latest.current.onFrame?.(w),
+      onCollide: (a, b, speed) => latest.current.onCollide?.(a, b, speed)
+    })
+  );
+  const ref = useAttach((element) => {
+    world.setBounds(element);
+    world.start();
+    const unbind = latest.current.interactive !== false ? world.bindPointer(element) : () => {
+    };
+    return () => {
+      unbind();
+      world.stop();
+    };
+  });
+  return [ref, world];
+}
+function useBody(world, options) {
+  const [body, setBody] = useState(null);
+  const latest = useLatest(options);
+  const ref = useAttach((element) => {
+    const added = world.add({ ...latest.current, element });
+    setBody(added);
+    return () => {
+      world.remove(added);
+      setBody(null);
+    };
+  });
+  return [ref, body];
+}
+export {
+  useBody,
+  useDraggable,
+  usePhysicsValue,
+  useSpring,
+  useSpringProps,
+  useValue,
+  useWorld
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import {\n  type AnimateOptions,\n  animate,\n  type Body,\n  type BodyOptions,\n  type Draggable,\n  type DraggableOptions,\n  draggable,\n  type PhysicsValue,\n  type Props,\n  type SpringOptions,\n  value,\n  World,\n  type WorldOptions,\n} from \"@sweberdev/lagrangian\";\nimport {\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Keeps the latest value in a ref so callbacks never go stale. */\nfunction useLatest<T>(current: T) {\n  const ref = useRef(current);\n  useIsoLayoutEffect(() => {\n    ref.current = current;\n  });\n  return ref;\n}\n\n/**\n * A ref callback with cleanup that works in React 18 (called with null) and 19 (cleanup return).\n */\nfunction useAttach<T extends Element>(attach: (element: T) => () => void): RefCallback<T> {\n  const cleanup = useRef<(() => void) | null>(null);\n  const latest = useLatest(attach);\n  return useCallback(\n    (element: T | null) => {\n      cleanup.current?.();\n      cleanup.current = null;\n      if (!element) return;\n      const detach = latest.current(element);\n      cleanup.current = detach;\n      return () => {\n        if (cleanup.current === detach) {\n          detach();\n          cleanup.current = null;\n        }\n      };\n    },\n    [latest],\n  );\n}\n\n/** A physical value that lives as long as the component. */\nexport function usePhysicsValue(initial = 0): PhysicsValue {\n  const [v] = useState(() => value(initial));\n  useEffect(() => () => v.stop(), [v]);\n  return v;\n}\n\n/**\n * A value that springs to `target` whenever it changes, keeping its momentum when the target\n * changes mid-flight. Read it with `useValue` or subscribe with `value.on`.\n */\nexport function useSpring(target: number, options: SpringOptions = {}): PhysicsValue {\n  const v = usePhysicsValue(target);\n  const latest = useLatest(options);\n  useEffect(() => {\n    v.to(target, latest.current);\n  }, [v, target, latest]);\n  return v;\n}\n\n/** Re-renders with the current number. Fine for readouts; style elements with `useSpringProps`. */\nexport function useValue(v: PhysicsValue): number {\n  return useSyncExternalStore(\n    (notify) => v.on(notify),\n    () => v.get(),\n    () => v.get(),\n  );\n}\n\n/**\n * Springs an element to `props` whenever they change, without re-rendering on every frame.\n *\n * ```tsx\n * const ref = useSpringProps<HTMLDivElement>({ x: open ? 240 : 0 }, { bounce: 0.3 })\n * return <div ref={ref} />\n * ```\n */\nexport function useSpringProps<T extends Element>(props: Props, options: AnimateOptions = {}) {\n  const ref = useRef<T>(null);\n  const latest = useLatest(options);\n  const key = JSON.stringify(props);\n  useIsoLayoutEffect(() => {\n    if (!ref.current) return;\n    const animation = animate(ref.current, props, latest.current);\n    return () => animation.stop();\n  }, [key, latest]);\n  return ref;\n}\n\n/** Makes the element draggable and throwable. Returns a ref callback and the drag handle. */\nexport function useDraggable<T extends HTMLElement>(\n  options: DraggableOptions = {},\n): [RefCallback<T>, Draggable | null] {\n  const [handle, setHandle] = useState<Draggable | null>(null);\n  const latest = useLatest(options);\n  const ref = useAttach<T>((element) => {\n    // Read options when events fire, so callbacks and snap points can change between renders.\n    const current = latest.current;\n    const drag = draggable(element, {\n      ...current,\n      bounds: () => {\n        const b = latest.current.bounds;\n        return (typeof b === \"function\" ? b() : b) ?? {};\n      },\n      onStart: (info) => latest.current.onStart?.(info),\n      onMove: (info) => latest.current.onMove?.(info),\n      onEnd: (info) => latest.current.onEnd?.(info),\n    });\n    setHandle(drag);\n    return () => {\n      drag.destroy();\n      setHandle(null);\n    };\n  });\n  return [ref, handle];\n}\n\n/**\n * A running physics world whose walls are the container element. Bodies inside can be\n * grabbed and thrown unless `interactive` is false.\n */\nexport function useWorld<T extends HTMLElement>(\n  options: Omit<WorldOptions, \"bounds\"> & { interactive?: boolean } = {},\n): [RefCallback<T>, World] {\n  const latest = useLatest(options);\n  const [world] = useState(\n    () =>\n      new World({\n        ...options,\n        onFrame: (w) => latest.current.onFrame?.(w),\n        onCollide: (a, b, speed) => latest.current.onCollide?.(a, b, speed),\n      }),\n  );\n  const ref = useAttach<T>((element) => {\n    world.setBounds(element);\n    world.start();\n    const unbind = latest.current.interactive !== false ? world.bindPointer(element) : () => {};\n    return () => {\n      unbind();\n      world.stop();\n    };\n  });\n  return [ref, world];\n}\n\n/** Adds a body to the world that the element follows. Position the element absolutely at 0,0. */\nexport function useBody<T extends HTMLElement>(\n  world: World,\n  options: Omit<BodyOptions, \"element\">,\n): [RefCallback<T>, Body | null] {\n  const [body, setBody] = useState<Body | null>(null);\n  const latest = useLatest(options);\n  const ref = useAttach<T>((element) => {\n    const added = world.add({ ...latest.current, element });\n    setBody(added);\n    return () => {\n      world.remove(added);\n      setBody(null);\n    };\n  });\n  return [ref, body];\n}\n\nexport type {\n  AnimateOptions,\n  Body,\n  BodyOptions,\n  Draggable,\n  DraggableOptions,\n  PhysicsValue,\n  Props,\n  SpringOptions,\n  WorldOptions,\n};\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@sweberdev/lagrangian-react",
+  "version": "0.1.0",
+  "description": "React hooks for Lagrangian: physical springs, draggable elements with inertia and a 2D physics world with gravity and collisions.",
+  "license": "MIT",
+  "author": "Seya Weber (https://github.com/sxwxbxr)",
+  "homepage": "https://packages.sweber.dev/lagrangian/docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Weber-Development/lagrangian.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Weber-Development/lagrangian/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "animation",
+    "physics",
+    "spring",
+    "drag",
+    "gesture",
+    "inertia",
+    "gravity",
+    "collision"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@sweberdev/lagrangian": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.1.0",
+    "jsdom": "^27.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
+    "vitest": "^5.0.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,194 @@
+import {
+  type AnimateOptions,
+  animate,
+  type Body,
+  type BodyOptions,
+  type Draggable,
+  type DraggableOptions,
+  draggable,
+  type PhysicsValue,
+  type Props,
+  type SpringOptions,
+  value,
+  World,
+  type WorldOptions,
+} from "@sweberdev/lagrangian";
+import {
+  type RefCallback,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+/** Keeps the latest value in a ref so callbacks never go stale. */
+function useLatest<T>(current: T) {
+  const ref = useRef(current);
+  useIsoLayoutEffect(() => {
+    ref.current = current;
+  });
+  return ref;
+}
+
+/**
+ * A ref callback with cleanup that works in React 18 (called with null) and 19 (cleanup return).
+ */
+function useAttach<T extends Element>(attach: (element: T) => () => void): RefCallback<T> {
+  const cleanup = useRef<(() => void) | null>(null);
+  const latest = useLatest(attach);
+  return useCallback(
+    (element: T | null) => {
+      cleanup.current?.();
+      cleanup.current = null;
+      if (!element) return;
+      const detach = latest.current(element);
+      cleanup.current = detach;
+      return () => {
+        if (cleanup.current === detach) {
+          detach();
+          cleanup.current = null;
+        }
+      };
+    },
+    [latest],
+  );
+}
+
+/** A physical value that lives as long as the component. */
+export function usePhysicsValue(initial = 0): PhysicsValue {
+  const [v] = useState(() => value(initial));
+  useEffect(() => () => v.stop(), [v]);
+  return v;
+}
+
+/**
+ * A value that springs to `target` whenever it changes, keeping its momentum when the target
+ * changes mid-flight. Read it with `useValue` or subscribe with `value.on`.
+ */
+export function useSpring(target: number, options: SpringOptions = {}): PhysicsValue {
+  const v = usePhysicsValue(target);
+  const latest = useLatest(options);
+  useEffect(() => {
+    v.to(target, latest.current);
+  }, [v, target, latest]);
+  return v;
+}
+
+/** Re-renders with the current number. Fine for readouts; style elements with `useSpringProps`. */
+export function useValue(v: PhysicsValue): number {
+  return useSyncExternalStore(
+    (notify) => v.on(notify),
+    () => v.get(),
+    () => v.get(),
+  );
+}
+
+/**
+ * Springs an element to `props` whenever they change, without re-rendering on every frame.
+ *
+ * ```tsx
+ * const ref = useSpringProps<HTMLDivElement>({ x: open ? 240 : 0 }, { bounce: 0.3 })
+ * return <div ref={ref} />
+ * ```
+ */
+export function useSpringProps<T extends Element>(props: Props, options: AnimateOptions = {}) {
+  const ref = useRef<T>(null);
+  const latest = useLatest(options);
+  const key = JSON.stringify(props);
+  useIsoLayoutEffect(() => {
+    if (!ref.current) return;
+    const animation = animate(ref.current, props, latest.current);
+    return () => animation.stop();
+  }, [key, latest]);
+  return ref;
+}
+
+/** Makes the element draggable and throwable. Returns a ref callback and the drag handle. */
+export function useDraggable<T extends HTMLElement>(
+  options: DraggableOptions = {},
+): [RefCallback<T>, Draggable | null] {
+  const [handle, setHandle] = useState<Draggable | null>(null);
+  const latest = useLatest(options);
+  const ref = useAttach<T>((element) => {
+    // Read options when events fire, so callbacks and snap points can change between renders.
+    const current = latest.current;
+    const drag = draggable(element, {
+      ...current,
+      bounds: () => {
+        const b = latest.current.bounds;
+        return (typeof b === "function" ? b() : b) ?? {};
+      },
+      onStart: (info) => latest.current.onStart?.(info),
+      onMove: (info) => latest.current.onMove?.(info),
+      onEnd: (info) => latest.current.onEnd?.(info),
+    });
+    setHandle(drag);
+    return () => {
+      drag.destroy();
+      setHandle(null);
+    };
+  });
+  return [ref, handle];
+}
+
+/**
+ * A running physics world whose walls are the container element. Bodies inside can be
+ * grabbed and thrown unless `interactive` is false.
+ */
+export function useWorld<T extends HTMLElement>(
+  options: Omit<WorldOptions, "bounds"> & { interactive?: boolean } = {},
+): [RefCallback<T>, World] {
+  const latest = useLatest(options);
+  const [world] = useState(
+    () =>
+      new World({
+        ...options,
+        onFrame: (w) => latest.current.onFrame?.(w),
+        onCollide: (a, b, speed) => latest.current.onCollide?.(a, b, speed),
+      }),
+  );
+  const ref = useAttach<T>((element) => {
+    world.setBounds(element);
+    world.start();
+    const unbind = latest.current.interactive !== false ? world.bindPointer(element) : () => {};
+    return () => {
+      unbind();
+      world.stop();
+    };
+  });
+  return [ref, world];
+}
+
+/** Adds a body to the world that the element follows. Position the element absolutely at 0,0. */
+export function useBody<T extends HTMLElement>(
+  world: World,
+  options: Omit<BodyOptions, "element">,
+): [RefCallback<T>, Body | null] {
+  const [body, setBody] = useState<Body | null>(null);
+  const latest = useLatest(options);
+  const ref = useAttach<T>((element) => {
+    const added = world.add({ ...latest.current, element });
+    setBody(added);
+    return () => {
+      world.remove(added);
+      setBody(null);
+    };
+  });
+  return [ref, body];
+}
+
+export type {
+  AnimateOptions,
+  Body,
+  BodyOptions,
+  Draggable,
+  DraggableOptions,
+  PhysicsValue,
+  Props,
+  SpringOptions,
+  WorldOptions,
+};