@sveltery/recharts 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sveltery contributors
+
+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

@@ -1,3 +1,25 @@
-# Temporary Holding Version
+# @sveltery/recharts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Composable SVG charts for Svelte 5, ported from [recharts](https://github.com/recharts/recharts) 3.8.0. Recharts' framework-free core (the Redux store and its slices, the selectors, scales, stacks, tick math and animation timing) is copied from upstream with its tests. The chart components are being rewritten in Svelte. The chart shells are done: `BarChart`, `LineChart`, `AreaChart`, `ComposedChart`, `PieChart`, `RadarChart` and `RadialBarChart` render recharts' wrapper, surface and layers, and `ResponsiveContainer`, `Cell`, `Surface` and `Layer` are exported. The Cartesian parts are ported: `XAxis`, `YAxis`, `CartesianAxis`, `CartesianGrid`, `Bar`, `Line`, `Area`, `Tooltip`, `Legend`, `Text`, `Label`, `LabelList` and the `Rectangle`, `Curve`, `Dot` and `Symbols` shapes. So are the polar parts: `Pie`, `Radar`, `RadialBar`, `PolarGrid`, `PolarAngleAxis`, `PolarRadiusAxis`, the `Sector`, `Polygon`, `Trapezoid` and `Cross` shapes, the sector tooltip cursor of radial layouts, and the cross cursor that ScatterChart will draw. `ScatterChart`, `Scatter`, `ErrorBar`, `ReferenceLine` and `Brush` are not ported yet.
+
+[`differences.md`](differences.md) lists every place the port differs from recharts and why.
+
+## Updating from upstream
+
+`node scripts/sync-upstream.mjs <recharts checkout>` copies the framework-free files listed in `scripts/upstream.mjs` into `src` at their upstream paths, along with the React-free upstream specs into `test`. Each relative import gains `.js`, and imports from `react` point to `src/react.ts`, which gives React's types Svelte and DOM meanings. For a module that is bound to React, the script keeps only its types and the values that `scripts/upstream.mjs` names in `EXTRACTED_VALUES`, such as pure functions and `default*Props` constants. It skips the upstream modules listed in `REPLACED`, which a hand-written Svelte module replaces. It then applies the patches in `patches/` and writes the list of files it owns to `scripts/vendored.txt`. It refuses to overwrite a file that exists but is not in that list, so a generated path never replaces a hand-written one.
+
+Add `--check` to compare the committed files with a fresh copy instead of writing them. The checkout must be at recharts commit `a1044db` (tag `v3.8.0`).
+
+Components write recharts' React prop bags to the DOM through `attrs()`, which uses the tables react-dom itself uses (attribute aliases, unitless styles, boolean attributes, event names). `node scripts/react-dom-tables.mjs <react-dom/cjs/react-dom-client.development.js>` regenerates them into `src/util/reactDomTables.ts` from react-dom 19.2.3, the version shadcn/ui pins. Add `--check` to compare instead of writing.
+
+The upstream specs run with `pnpm test` from the repository root.
+
+## The shadcn chart gallery
+
+`node scripts/convert-shadcn-charts.mjs <shadcn>/apps/v4/registry/new-york-v4/charts <routes dir>` converts shadcn's chart gallery into Svelte pages on this package. Each `chart-*.tsx` becomes `<routes dir>/chart-*/+page.svelte`. Element and render-function props become snippets, `useState` and `useMemo` become `$state` and `$derived`, a `useCallback` render function becomes a snippet at the top of the page, and JSX text keeps Babel's whitespace rules. A spread onto a DOM element goes through `attrs()`, which writes React prop names as react-dom would. The pages import card, chart and select helpers from `--helpers` (default `<routes dir>/shadcn`), and the script writes one component per lucide icon into its `icons` folder. `--match <regex>` picks the charts (default area, bar, line, pie, radar, radial and tooltip), `--only <name>` converts one, and `--check` compares instead of writing. The test app keeps the converted pages in `tests/app/src/routes/chart/recharts`, where they are compared with shadcn's own rendering.
+
+`--docs` writes the docs site's examples instead. Each `chart-*.tsx` becomes `<output dir>/Chart*.svelte`, with `--suffix` appended to the name. Imports point at the docs registry (`$registry/bases/base/ui/*`), a lucide icon in markup becomes an `IconPlaceholder`, and an icon used as a value, such as a chart config's `icon`, becomes a component in `<output dir>/icons`. A file with more than one function keeps the exported one as the component and turns the others into snippets. The docs site keeps the gallery in `apps/docs/examples/charts` and shadcn's chart page examples in `apps/docs/examples/charts` (`chart-example*`) and `apps/docs/examples/base` (`--suffix Example`), and upstream's `registry/bases/base/examples/chart-example.tsx` as `apps/docs/examples/base/ChartExample.svelte`.
+
+## License
+
+MIT. See `THIRD_PARTY_NOTICES.md` for the upstream license.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,25 @@
+# Third-party notices
+
+This package is a port of [recharts](https://github.com/recharts/recharts) 3.8.0 under the MIT License below. The files listed in `scripts/vendored.txt` (under `src/` and `test/`) and `types.d.ts` are copied from it with `scripts/sync-upstream.mjs`, which applies the changes in `patches/`. For modules that use React, the script copies only their types and pure functions.
+
+The MIT License (MIT)
+
+Copyright (c) 2015-present recharts
+
+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/dist/animation/AnimationManager.d.ts

@@ -0,0 +1,22 @@
+import { TimeoutController } from './timeoutController.js';
+import { StartAnimationFunction } from './configUpdate.js';
+export type ReactSmoothStyle = string | Record<string, unknown>;
+/**
+ * Represents a single item in the ReactSmoothQueue.
+ * The item can be:
+ * - A number representing a delay in milliseconds.
+ * - An object representing a style change
+ * - A StartAnimationFunction that starts eased transition and calls different render
+ *      because of course in Recharts we have to have three ways to do everything
+ * - An arbitrary function to be executed
+ */
+export type ReactSmoothQueueItem = number | ReactSmoothStyle | StartAnimationFunction | (() => void);
+export type ReactSmoothQueue = ReadonlyArray<ReactSmoothQueueItem>;
+export type HandleChangeFn = (currentStyle: ReactSmoothStyle) => null | void;
+export type AnimationManager = {
+    stop: () => void;
+    start: (style: ReactSmoothQueue) => void;
+    subscribe: (handleChange: (style: ReactSmoothStyle) => void) => () => void;
+    getTimeoutController(): TimeoutController;
+};
+export declare function createAnimateManager(timeoutController: TimeoutController): AnimationManager;

package/dist/animation/AnimationManager.js

@@ -0,0 +1,56 @@
+export function createAnimateManager(timeoutController) {
+    let currStyle;
+    let handleChange = () => null;
+    let shouldStop = false;
+    let cancelTimeout = null;
+    const setStyle = (_style) => {
+        if (shouldStop) {
+            return;
+        }
+        if (Array.isArray(_style)) {
+            if (!_style.length) {
+                return;
+            }
+            const styles = _style;
+            const [curr, ...restStyles] = styles;
+            if (typeof curr === 'number') {
+                cancelTimeout = timeoutController.setTimeout(setStyle.bind(null, restStyles), curr);
+                return;
+            }
+            setStyle(curr);
+            cancelTimeout = timeoutController.setTimeout(setStyle.bind(null, restStyles));
+            return;
+        }
+        if (typeof _style === 'string') {
+            currStyle = _style;
+            handleChange(currStyle);
+        }
+        if (typeof _style === 'object') {
+            currStyle = _style;
+            handleChange(currStyle);
+        }
+        if (typeof _style === 'function') {
+            _style();
+        }
+    };
+    return {
+        stop: () => {
+            shouldStop = true;
+        },
+        start: (style) => {
+            shouldStop = false;
+            if (cancelTimeout) {
+                cancelTimeout();
+                cancelTimeout = null;
+            }
+            setStyle(style);
+        },
+        subscribe: (_handleChange) => {
+            handleChange = _handleChange;
+            return () => {
+                handleChange = () => null;
+            };
+        },
+        getTimeoutController: () => timeoutController,
+    };
+}

package/dist/animation/JavascriptAnimate.d.ts

@@ -0,0 +1,24 @@
+import * as React from '../react.js';
+import { EasingInput } from './easing.js';
+import { AnimationManager } from './AnimationManager.js';
+export type JavascriptAnimateProps = {
+    animationId: string;
+    animationManager?: AnimationManager;
+    duration?: number;
+    begin?: number;
+    easing?: EasingInput;
+    isActive?: boolean | 'auto';
+    canBegin?: boolean;
+    onAnimationStart?: () => void;
+    onAnimationEnd?: () => void;
+    children: (time: number) => React.ReactNode;
+};
+export declare const defaultJavascriptAnimateProps: {
+    readonly begin: 0;
+    readonly duration: 1000;
+    readonly easing: "ease";
+    readonly isActive: true;
+    readonly canBegin: true;
+    readonly onAnimationEnd: () => void;
+    readonly onAnimationStart: () => void;
+};

package/dist/animation/JavascriptAnimate.js

@@ -0,0 +1,9 @@
+export const defaultJavascriptAnimateProps = {
+    begin: 0,
+    duration: 1000,
+    easing: 'ease',
+    isActive: true,
+    canBegin: true,
+    onAnimationEnd: () => { },
+    onAnimationStart: () => { },
+};

package/dist/animation/JavascriptAnimate.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import { Global } from '../util/Global.js';
+  import { usePrefersReducedMotion } from '../util/usePrefersReducedMotion.js';
+  import { rechartsProps } from '../util/svelteProps.js';
+  import configUpdate from './configUpdate.js';
+  import { configEasing } from './easing.js';
+  import { defaultJavascriptAnimateProps, type JavascriptAnimateProps } from './JavascriptAnimate.js';
+  import { useAnimationManager } from './useAnimationManager.svelte.js';
+
+  type Props = Omit<JavascriptAnimateProps, 'children'> & { children: Snippet<[number]> };
+  type TimeAsObject = { t: number };
+
+  let outsideProps: Props = $props();
+  const resolved = rechartsProps<Props, typeof defaultJavascriptAnimateProps>(() => outsideProps, defaultJavascriptAnimateProps);
+
+  const from: TimeAsObject = { t: 0 };
+  const to: TimeAsObject = { t: 1 };
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const isActive = $derived(resolved.isActive === 'auto' ? !Global.isSsr && !prefersReducedMotion.current : resolved.isActive);
+  const animationManager = useAnimationManager(
+    () => resolved.animationId,
+    () => resolved.animationManager,
+  );
+
+  let style = $state.raw<TimeAsObject>(untrack(() => isActive) ? from : to);
+  let stopJSAnimation: (() => void) | null = null;
+
+  $effect(() => {
+    if (!isActive) {
+      style = to;
+    }
+  });
+
+  $effect(() => {
+    if (!isActive || !resolved.canBegin) return;
+    const { duration, easing, begin, onAnimationStart, onAnimationEnd } = resolved;
+    const manager = animationManager.current;
+    untrack(() => {
+      const startAnimation = configUpdate<TimeAsObject>(
+        from,
+        to,
+        configEasing(easing),
+        duration,
+        (next) => {
+          style = next;
+        },
+        manager.getTimeoutController(),
+      );
+      const onAnimationActive = () => {
+        stopJSAnimation = startAnimation();
+      };
+      manager.start([onAnimationStart, begin, onAnimationActive, duration, onAnimationEnd]);
+    });
+    return () => {
+      manager.stop();
+      stopJSAnimation?.();
+      onAnimationEnd();
+    };
+  });
+</script>
+
+{@render outsideProps.children(style.t)}

package/dist/animation/JavascriptAnimate.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+import { type JavascriptAnimateProps } from './JavascriptAnimate.js';
+type Props = Omit<JavascriptAnimateProps, 'children'> & {
+    children: Snippet<[number]>;
+};
+declare const JavascriptAnimate: import("svelte").Component<Props, {}, "">;
+type JavascriptAnimate = ReturnType<typeof JavascriptAnimate>;
+export default JavascriptAnimate;

package/dist/animation/configUpdate.d.ts

@@ -0,0 +1,11 @@
+import { EasingFunction } from './easing.js';
+import { TimeoutController } from './timeoutController.js';
+export declare const alpha: (begin: number, end: number, k: number) => number;
+export type FrameId = number;
+export type RequestAnimationFrameCallback = (time: number) => void;
+export type RequestAnimationFrameDi = (callback: RequestAnimationFrameCallback) => FrameId;
+export type CancelAnimationFrameDi = (handle: FrameId) => void;
+export type CancelAnimationFunction = () => void;
+export type StartAnimationFunction = () => CancelAnimationFunction;
+declare const _default: <T extends Record<string, number>>(from: T, to: T, easing: EasingFunction | null, duration: number, render: (currentStyle: T) => void, timeoutController: TimeoutController) => StartAnimationFunction;
+export default _default;

package/dist/animation/configUpdate.js

@@ -0,0 +1,138 @@
+import { getIntersectionKeys, mapObject } from './util.js';
+export const alpha = (begin, end, k) => begin + (end - begin) * k;
+const needContinue = ({ from, to }) => from !== to;
+/*
+ * @description: cal new from value and velocity in each stepper
+ * @return: { [styleProperty]: { from, to, velocity } }
+ */
+const calStepperVals = (easing, preVals, steps) => {
+    const nextStepVals = mapObject((key, val) => {
+        if (needContinue(val)) {
+            const [newX, newV] = easing(val.from, val.to, val.velocity);
+            return {
+                ...val,
+                from: newX,
+                velocity: newV,
+            };
+        }
+        return val;
+    }, preVals);
+    if (steps < 1) {
+        return mapObject((key, val) => {
+            if (needContinue(val) && nextStepVals[key] != null) {
+                return {
+                    ...val,
+                    velocity: alpha(val.velocity, nextStepVals[key].velocity, steps),
+                    from: alpha(val.from, nextStepVals[key].from, steps),
+                };
+            }
+            return val;
+        }, preVals);
+    }
+    return calStepperVals(easing, nextStepVals, steps - 1);
+};
+function createStepperUpdate(from, to, easing, interKeys, render, timeoutController) {
+    let preTime;
+    let stepperStyle = interKeys.reduce((res, key) => ({
+        ...res,
+        [key]: {
+            from: from[key],
+            velocity: 0,
+            to: to[key],
+        },
+    }), {});
+    const getCurrStyle = () => mapObject((key, val) => val.from, stepperStyle);
+    const shouldStopAnimation = () => !Object.values(stepperStyle).filter(needContinue).length;
+    let stopAnimation = null;
+    const stepperUpdate = (now) => {
+        if (!preTime) {
+            preTime = now;
+        }
+        const deltaTime = now - preTime;
+        const steps = deltaTime / easing.dt;
+        stepperStyle = calStepperVals(easing, stepperStyle, steps);
+        // get union set and add compatible prefix
+        render({
+            ...from,
+            ...to,
+            ...getCurrStyle(),
+        });
+        preTime = now;
+        if (!shouldStopAnimation()) {
+            stopAnimation = timeoutController.setTimeout(stepperUpdate);
+        }
+    };
+    // return start animation method
+    return () => {
+        stopAnimation = timeoutController.setTimeout(stepperUpdate);
+        // return stop animation method
+        return () => {
+            stopAnimation?.();
+        };
+    };
+}
+function createTimingUpdate(from, to, easing, duration, interKeys, render, timeoutController) {
+    let stopAnimation = null;
+    const timingStyle = interKeys.reduce((res, key) => {
+        const fromElement = from[key];
+        const toElement = to[key];
+        if (fromElement == null || toElement == null) {
+            return res;
+        }
+        return {
+            ...res,
+            [key]: [fromElement, toElement],
+        };
+    }, {});
+    let beginTime;
+    const timingUpdate = (now) => {
+        if (!beginTime) {
+            beginTime = now;
+        }
+        const t = (now - beginTime) / duration;
+        const currStyle = mapObject((key, val) => alpha(...val, easing(t)), timingStyle);
+        // get union set and add compatible prefix
+        render({
+            ...from,
+            ...to,
+            ...currStyle,
+        });
+        if (t < 1) {
+            stopAnimation = timeoutController.setTimeout(timingUpdate);
+        }
+        else {
+            const finalStyle = mapObject((key, val) => alpha(...val, easing(1)), timingStyle);
+            render({
+                ...from,
+                ...to,
+                ...finalStyle,
+            });
+        }
+    };
+    // return start animation method
+    return () => {
+        stopAnimation = timeoutController.setTimeout(timingUpdate);
+        // return stop animation method
+        return () => {
+            stopAnimation?.();
+        };
+    };
+}
+// configure update function
+// eslint-disable-next-line import/no-default-export
+export default (from, to, easing, duration, render, timeoutController) => {
+    const interKeys = getIntersectionKeys(from, to);
+    if (easing == null) {
+        // no animation, just set to final state
+        return () => {
+            render({
+                ...from,
+                ...to,
+            });
+            return () => { };
+        };
+    }
+    return easing.isStepper === true
+        ? createStepperUpdate(from, to, easing, interKeys, render, timeoutController)
+        : createTimingUpdate(from, to, easing, duration, interKeys, render, timeoutController);
+};

package/dist/animation/createDefaultAnimationManager.d.ts

@@ -0,0 +1,2 @@
+import { AnimationManager } from './AnimationManager.js';
+export declare function createDefaultAnimationManager(): AnimationManager;

package/dist/animation/createDefaultAnimationManager.js

@@ -0,0 +1,5 @@
+import { createAnimateManager } from './AnimationManager.js';
+import { RequestAnimationFrameTimeoutController } from './timeoutController.js';
+export function createDefaultAnimationManager() {
+    return createAnimateManager(new RequestAnimationFrameTimeoutController());
+}

package/dist/animation/easing.d.ts

@@ -0,0 +1,24 @@
+export declare const ACCURACY = 0.0001;
+type CubicBezierTemplate = `cubic-bezier(${number},${number},${number},${number})`;
+type NamedBezier = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | CubicBezierTemplate;
+type BezierInput = [NamedBezier] | [number, number, number, number];
+export type BezierEasingFunction = {
+    isStepper: false;
+    (t: number): number;
+};
+export declare const configBezier: (...args: BezierInput) => BezierEasingFunction;
+type SpringInput = {
+    stiff?: number;
+    damping?: number;
+    dt?: number;
+};
+export type SpringEasingFunction = {
+    isStepper: true;
+    dt: number;
+    (currX: number, destX: number, currV: number): [number, number];
+};
+export declare const configSpring: (config?: SpringInput) => SpringEasingFunction;
+export type EasingFunction = BezierEasingFunction | SpringEasingFunction;
+export type EasingInput = NamedBezier | 'spring' | EasingFunction;
+export declare const configEasing: (easing: EasingInput) => EasingFunction | null;
+export {};

package/dist/animation/easing.js

@@ -0,0 +1,123 @@
+export const ACCURACY = 1e-4;
+const cubicBezierFactor = (c1, c2) => [0, 3 * c1, 3 * c2 - 6 * c1, 3 * c1 - 3 * c2 + 1];
+const evaluatePolynomial = (params, t) => params.map((param, i) => param * t ** i).reduce((pre, curr) => pre + curr);
+const cubicBezier = (c1, c2) => (t) => {
+    const params = cubicBezierFactor(c1, c2);
+    return evaluatePolynomial(params, t);
+};
+const derivativeCubicBezier = (c1, c2) => (t) => {
+    const params = cubicBezierFactor(c1, c2);
+    const newParams = [...params.map((param, i) => param * i).slice(1), 0];
+    return evaluatePolynomial(newParams, t);
+};
+const parseCubicBezier = (easing) => {
+    const easingParts = easing.split('(');
+    if (easingParts.length !== 2 || easingParts[0] !== 'cubic-bezier') {
+        return null;
+    }
+    const numbers = easingParts[1]?.split(')')[0]?.split(',');
+    if (numbers == null || numbers.length !== 4) {
+        return null;
+    }
+    const coords = numbers.map((x) => parseFloat(x));
+    return [coords[0], coords[1], coords[2], coords[3]];
+};
+const getBezierCoordinates = (...args) => {
+    if (args.length === 1) {
+        switch (args[0]) {
+            case 'linear':
+                return [0.0, 0.0, 1.0, 1.0];
+            case 'ease':
+                return [0.25, 0.1, 0.25, 1.0];
+            case 'ease-in':
+                return [0.42, 0.0, 1.0, 1.0];
+            case 'ease-out':
+                return [0.42, 0.0, 0.58, 1.0];
+            case 'ease-in-out':
+                return [0.0, 0.0, 0.58, 1.0];
+            default: {
+                const easing = parseCubicBezier(args[0]);
+                if (easing) {
+                    return easing;
+                }
+            }
+        }
+    }
+    if (args.length === 4) {
+        return args;
+    }
+    // Fallback for invalid inputs. The previous implementation was buggy and would lead to NaN.
+    // Returning linear easing is a safe default.
+    return [0.0, 0.0, 1.0, 1.0];
+};
+const createBezierEasing = (x1, y1, x2, y2) => {
+    const curveX = cubicBezier(x1, x2);
+    const curveY = cubicBezier(y1, y2);
+    const derCurveX = derivativeCubicBezier(x1, x2);
+    const rangeValue = (value) => {
+        if (value > 1) {
+            return 1;
+        }
+        if (value < 0) {
+            return 0;
+        }
+        return value;
+    };
+    const bezier = (_t) => {
+        const t = _t > 1 ? 1 : _t;
+        let x = t;
+        for (let i = 0; i < 8; ++i) {
+            const evalT = curveX(x) - t;
+            const derVal = derCurveX(x);
+            if (Math.abs(evalT - t) < ACCURACY || derVal < ACCURACY) {
+                return curveY(x);
+            }
+            x = rangeValue(x - evalT / derVal);
+        }
+        return curveY(x);
+    };
+    bezier.isStepper = false;
+    return bezier;
+};
+// calculate cubic-bezier using Newton's method
+export const configBezier = (...args) => {
+    return createBezierEasing(...getBezierCoordinates(...args));
+};
+export const configSpring = (config = {}) => {
+    const { stiff = 100, damping = 8, dt = 17 } = config;
+    const stepper = (currX, destX, currV) => {
+        const FSpring = -(currX - destX) * stiff;
+        const FDamping = currV * damping;
+        const newV = currV + ((FSpring - FDamping) * dt) / 1000;
+        const newX = (currV * dt) / 1000 + currX;
+        if (Math.abs(newX - destX) < ACCURACY && Math.abs(newV) < ACCURACY) {
+            return [destX, 0];
+        }
+        return [newX, newV];
+    };
+    stepper.isStepper = true;
+    stepper.dt = dt;
+    return stepper;
+};
+export const configEasing = (easing) => {
+    if (typeof easing === 'string') {
+        switch (easing) {
+            case 'ease':
+            case 'ease-in-out':
+            case 'ease-out':
+            case 'ease-in':
+            case 'linear':
+                return configBezier(easing);
+            case 'spring':
+                return configSpring();
+            default:
+                if (easing.split('(')[0] === 'cubic-bezier') {
+                    return configBezier(easing);
+                }
+        }
+    }
+    if (typeof easing === 'function') {
+        return easing;
+    }
+    return null;
+};

package/dist/animation/timeoutController.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Callback type for the timeout function.
+ * Receives current time in milliseconds as an argument.
+ */
+export type CallbackType = (now: number) => void;
+/**
+ * A function that, when called, cancels the timeout.
+ */
+export type CancelableTimeout = () => void;
+export interface TimeoutController {
+    /**
+     * Sets a timeout that executes a callback after a specified delay.
+     * Allows setting multiple timeouts and provides a way to cancel them independently.
+     * @param callback - The function to execute after the delay. Receives the current time in milliseconds as an argument.
+     * @param delay (optional) - The time in milliseconds to wait before executing the callback. Defaults to 0.
+     */
+    setTimeout(callback: CallbackType, delay?: number): CancelableTimeout;
+}
+export declare class RequestAnimationFrameTimeoutController implements TimeoutController {
+    setTimeout(callback: CallbackType, delay?: number): CancelableTimeout;
+}

package/dist/animation/timeoutController.js

@@ -0,0 +1,22 @@
+export class RequestAnimationFrameTimeoutController {
+    setTimeout(callback, delay = 0) {
+        const startTime = performance.now();
+        let requestId = null;
+        const executeCallback = (now) => {
+            if (now - startTime >= delay) {
+                callback(now);
+                // tests fail without the extra if, even when five lines below it's not needed
+                // TODO finish transition to the mocked timeout controller and then remove this condition
+            }
+            else if (typeof requestAnimationFrame === 'function') {
+                requestId = requestAnimationFrame(executeCallback);
+            }
+        };
+        requestId = requestAnimationFrame(executeCallback);
+        return () => {
+            if (requestId != null) {
+                cancelAnimationFrame(requestId);
+            }
+        };
+    }
+}

package/dist/animation/useAnimationManager.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Box, Getter } from '../state/hooks.svelte.js';
+import type { AnimationManager } from './AnimationManager.js';
+export type AnimationManagerFactory = (animationId: string) => AnimationManager;
+export declare const getAnimationManagerContext: () => AnimationManagerFactory, setAnimationManagerContext: (context: AnimationManagerFactory) => AnimationManagerFactory, hasAnimationManagerContext: () => boolean;
+/** Must be called during component initialisation. A new manager is made when the animation id or the manager prop changes. */
+export declare function useAnimationManager(animationId: Getter<string>, animationManagerFromProps: Getter<AnimationManager | undefined>): Box<AnimationManager>;

package/dist/animation/useAnimationManager.svelte.js

@@ -0,0 +1,13 @@
+import { createContext } from 'svelte';
+import { createDefaultAnimationManager } from './createDefaultAnimationManager.js';
+export const [getAnimationManagerContext, setAnimationManagerContext, hasAnimationManagerContext] = createContext();
+/** Must be called during component initialisation. A new manager is made when the animation id or the manager prop changes. */
+export function useAnimationManager(animationId, animationManagerFromProps) {
+    const contextAnimationManager = hasAnimationManagerContext() ? getAnimationManagerContext() : createDefaultAnimationManager;
+    const manager = $derived(animationManagerFromProps() ?? contextAnimationManager(animationId()));
+    return {
+        get current() {
+            return manager;
+        },
+    };
+}