@gtkx/animated 1.3.0

package/dist/with-animated.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMergedRef } from "@gtkx/react/internal";
+import { addFluidObserver, getFluidValue, hasFluidValue, raf, removeFluidObserver, useForceUpdate, } from "@react-spring/shared";
+import { useLayoutEffect, useRef } from "react";
+import { didApplyAnimatedValues } from "./apply-animated-values.js";
+import { trackReducedMotion } from "./reduced-motion.js";
+const STYLE_PROP = "style";
+const cache = new WeakMap();
+const getDisplayName = (component) => {
+    const { displayName, name } = component;
+    if (typeof displayName === "string" && displayName !== "") {
+        return displayName;
+    }
+    return typeof name === "string" && name !== "" ? name : "Anonymous";
+};
+const isFluidProp = (value) => hasFluidValue(value) || isFluidArray(value);
+const isBlock = (value) => typeof value === "object" && value !== null && Object.getPrototypeOf(value) === Object.prototype;
+function isFluidArray(value) {
+    return Array.isArray(value) && value.some((item) => isFluidProp(item));
+}
+function isFluidStyle(value) {
+    return isBlock(value) && Object.values(value).some((item) => hasFluidValue(item) || isFluidStyle(item));
+}
+function resolveStyle(style) {
+    const resolved = {};
+    for (const name in style) {
+        const value = style[name];
+        const next = isFluidStyle(value) ? resolveStyle(value) : getFluidValue(value);
+        resolved[name] = next;
+    }
+    return resolved;
+}
+function resolveValue(value) {
+    return isFluidArray(value) ? value.map((item) => resolveValue(item)) : getFluidValue(value);
+}
+const isFluidNamed = (name, value) => isFluidProp(value) || (name === STYLE_PROP && isFluidStyle(value));
+const resolveNamed = (name, value) => name === STYLE_PROP && isFluidStyle(value) ? resolveStyle(value) : resolveValue(value);
+const resolveProps = (props, isAnimatedOnly) => {
+    const resolved = {};
+    for (const name in props) {
+        const value = props[name];
+        if (isFluidNamed(name, value)) {
+            resolved[name] = resolveNamed(name, value);
+        }
+        else if (!isAnimatedOnly) {
+            resolved[name] = value;
+        }
+    }
+    return resolved;
+};
+function collectEach(items, dependencies) {
+    for (const item of items) {
+        collectDependencies(item, dependencies);
+    }
+}
+function collectDependencies(value, dependencies) {
+    if (hasFluidValue(value)) {
+        dependencies.add(value);
+    }
+    else if (isFluidArray(value)) {
+        collectEach(value, dependencies);
+    }
+    else if (isFluidStyle(value)) {
+        collectEach(Object.values(value), dependencies);
+    }
+}
+const collectNamed = (name, value, dependencies) => {
+    if (isFluidNamed(name, value)) {
+        collectDependencies(value, dependencies);
+    }
+};
+const getDependencies = (props) => {
+    const dependencies = new Set();
+    for (const name in props) {
+        collectNamed(name, props[name], dependencies);
+    }
+    return dependencies;
+};
+const getFluidNames = (props) => {
+    const names = new Set();
+    for (const name in props) {
+        if (isFluidNamed(name, props[name])) {
+            names.add(name);
+        }
+    }
+    return names;
+};
+const observe = (observer) => {
+    for (const dependency of observer.dependencies) {
+        addFluidObserver(dependency, observer);
+    }
+};
+const unobserve = (observer) => {
+    for (const dependency of observer.dependencies) {
+        removeFluidObserver(dependency, observer);
+    }
+    raf.cancel(observer.update);
+};
+const useObserver = (observer) => {
+    const observerRef = useRef(null);
+    useLayoutEffect(() => {
+        observerRef.current = observer;
+        observe(observer);
+        return () => {
+            if (observerRef.current === null) {
+                return;
+            }
+            unobserve(observerRef.current);
+            observerRef.current = null;
+        };
+    });
+};
+const collectStaticReplacements = (props, previous, current, values) => {
+    for (const name of previous) {
+        const value = props[name];
+        if (value !== undefined && !current.has(name)) {
+            values[name] = value;
+        }
+    }
+};
+const useCommitSync = (instanceRef, props) => {
+    const fluidNamesRef = useRef(new Set());
+    useLayoutEffect(() => {
+        const previous = fluidNamesRef.current;
+        const current = getFluidNames(props);
+        fluidNamesRef.current = current;
+        trackReducedMotion();
+        const instance = instanceRef.current;
+        if (instance === null) {
+            return;
+        }
+        const values = resolveProps(props, true);
+        collectStaticReplacements(props, previous, current, values);
+        didApplyAnimatedValues(instance, values);
+    });
+};
+const useAnimatedUpdate = (instanceRef, props) => {
+    const forceUpdate = useForceUpdate();
+    return () => {
+        const instance = instanceRef.current;
+        const isApplied = instance !== null && didApplyAnimatedValues(instance, resolveProps(props, true));
+        if (!isApplied) {
+            forceUpdate();
+        }
+    };
+};
+const createAnimatedComponent = (Component) => {
+    const Animated = ({ ref: givenRef, ...props }) => {
+        const instanceRef = useRef(null);
+        const ref = useMergedRef(givenRef, instanceRef);
+        const update = useAnimatedUpdate(instanceRef, props);
+        useObserver(new PropsObserver(update, getDependencies(props)));
+        useCommitSync(instanceRef, props);
+        return _jsx(Component, { ...resolveProps(props, false), ref: ref });
+    };
+    Animated.displayName = `Animated(${getDisplayName(Component)})`;
+    return Animated;
+};
+function withAnimated(component) {
+    let cached = cache.get(component);
+    if (cached === undefined) {
+        cached = createAnimatedComponent(component);
+        cache.set(component, cached);
+    }
+    return cached;
+}
+class PropsObserver {
+    update;
+    dependencies;
+    constructor(update, dependencies) {
+        this.update = update;
+        this.dependencies = dependencies;
+    }
+    eventObserved(event) {
+        if (event.type === "change") {
+            raf.write(this.update);
+        }
+    }
+}
+export { withAnimated };
+//# sourceMappingURL=with-animated.js.map

package/dist/with-animated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-animated.js","sourceRoot":"","sources":["../src/with-animated.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Lookup } from \"@react-spring/types\";\nimport { useMergedRef } from \"@gtkx/react/internal\";\nimport {\n    addFluidObserver,\n    type FluidEvent,\n    type FluidValue,\n    getFluidValue,\n    hasFluidValue,\n    raf,\n    removeFluidObserver,\n    useForceUpdate,\n} from \"@react-spring/shared\";\nimport { type ElementType, type ReactNode, type Ref, type RefObject, useLayoutEffect, useRef } from \"react\";\nimport type { AnimatedComponent } from \"./types.js\";\nimport { didApplyAnimatedValues } from \"./apply-animated-values.js\";\nimport { trackReducedMotion } from \"./reduced-motion.js\";\n\ntype AnimatedInput = { ref?: Ref<object> | undefined; [key: string]: unknown };\ntype Wrappable = Exclude<ElementType, string>;\ntype ObserverRef = { current: PropsObserver | null };\n\nconst STYLE_PROP = \"style\";\nconst cache: WeakMap<object, AnimatedComponent<Wrappable>> = new WeakMap();\n\nconst getDisplayName = (component: Wrappable): string => {\n    const { displayName, name } = component as { displayName?: unknown; name?: unknown };\n\n    if (typeof displayName === \"string\" && displayName !== \"\") {\n        return displayName;\n    }\n\n    return typeof name === \"string\" && name !== \"\" ? name : \"Anonymous\";\n};\n\nconst isFluidProp = (value: unknown): boolean => hasFluidValue(value) || isFluidArray(value);\n\nconst isBlock = (value: unknown): value is Lookup =>\n    typeof value === \"object\" && value !== null && Object.getPrototypeOf(value) === Object.prototype;\n\nfunction isFluidArray(value: unknown): value is unknown[] {\n    return Array.isArray(value) && value.some((item) => isFluidProp(item));\n}\n\nfunction isFluidStyle(value: unknown): value is Lookup {\n    return isBlock(value) && Object.values(value).some((item) => hasFluidValue(item) || isFluidStyle(item));\n}\n\nfunction resolveStyle(style: Lookup): Lookup {\n    const resolved: Lookup = {};\n\n    for (const name in style) {\n        const value: unknown = style[name];\n        const next: unknown = isFluidStyle(value) ? resolveStyle(value) : getFluidValue(value);\n        resolved[name] = next;\n    }\n\n    return resolved;\n}\n\nfunction resolveValue(value: unknown): unknown {\n    return isFluidArray(value) ? value.map((item) => resolveValue(item)) : getFluidValue(value);\n}\n\nconst isFluidNamed = (name: string, value: unknown): boolean =>\n    isFluidProp(value) || (name === STYLE_PROP && isFluidStyle(value));\n\nconst resolveNamed = (name: string, value: unknown): unknown =>\n    name === STYLE_PROP && isFluidStyle(value) ? resolveStyle(value) : resolveValue(value);\n\nconst resolveProps = (props: Lookup, isAnimatedOnly: boolean): Lookup => {\n    const resolved: Lookup = {};\n\n    for (const name in props) {\n        const value: unknown = props[name];\n\n        if (isFluidNamed(name, value)) {\n            resolved[name] = resolveNamed(name, value);\n        } else if (!isAnimatedOnly) {\n            resolved[name] = value;\n        }\n    }\n\n    return resolved;\n};\n\nfunction collectEach(items: unknown[], dependencies: Set<FluidValue>): void {\n    for (const item of items) {\n        collectDependencies(item, dependencies);\n    }\n}\n\nfunction collectDependencies(value: unknown, dependencies: Set<FluidValue>): void {\n    if (hasFluidValue(value)) {\n        dependencies.add(value);\n    } else if (isFluidArray(value)) {\n        collectEach(value, dependencies);\n    } else if (isFluidStyle(value)) {\n        collectEach(Object.values(value), dependencies);\n    }\n}\n\nconst collectNamed = (name: string, value: unknown, dependencies: Set<FluidValue>): void => {\n    if (isFluidNamed(name, value)) {\n        collectDependencies(value, dependencies);\n    }\n};\n\nconst getDependencies = (props: Lookup): Set<FluidValue> => {\n    const dependencies: Set<FluidValue> = new Set();\n\n    for (const name in props) {\n        collectNamed(name, props[name], dependencies);\n    }\n\n    return dependencies;\n};\n\nconst getFluidNames = (props: Lookup): Set<string> => {\n    const names: Set<string> = new Set();\n\n    for (const name in props) {\n        if (isFluidNamed(name, props[name])) {\n            names.add(name);\n        }\n    }\n\n    return names;\n};\n\nconst observe = (observer: PropsObserver): void => {\n    for (const dependency of observer.dependencies) {\n        addFluidObserver(dependency, observer);\n    }\n};\n\nconst unobserve = (observer: PropsObserver): void => {\n    for (const dependency of observer.dependencies) {\n        removeFluidObserver(dependency, observer);\n    }\n\n    raf.cancel(observer.update);\n};\n\nconst useObserver = (observer: PropsObserver): void => {\n    const observerRef: ObserverRef = useRef<PropsObserver | null>(null);\n\n    useLayoutEffect(() => {\n        observerRef.current = observer;\n        observe(observer);\n\n        return () => {\n            if (observerRef.current === null) {\n                return;\n            }\n\n            unobserve(observerRef.current);\n            observerRef.current = null;\n        };\n    });\n};\n\nconst collectStaticReplacements = (\n    props: Lookup,\n    previous: Set<string>,\n    current: Set<string>,\n    values: Lookup,\n): void => {\n    for (const name of previous) {\n        const value: unknown = props[name];\n\n        if (value !== undefined && !current.has(name)) {\n            values[name] = value;\n        }\n    }\n};\n\nconst useCommitSync = (instanceRef: RefObject<object | null>, props: Lookup): void => {\n    const fluidNamesRef = useRef<Set<string>>(new Set());\n\n    useLayoutEffect(() => {\n        const previous = fluidNamesRef.current;\n        const current = getFluidNames(props);\n        fluidNamesRef.current = current;\n        trackReducedMotion();\n        const instance = instanceRef.current;\n\n        if (instance === null) {\n            return;\n        }\n\n        const values = resolveProps(props, true);\n        collectStaticReplacements(props, previous, current, values);\n        didApplyAnimatedValues(instance, values);\n    });\n};\n\nconst useAnimatedUpdate = (instanceRef: RefObject<object | null>, props: Lookup): (() => void) => {\n    const forceUpdate = useForceUpdate();\n\n    return () => {\n        const instance = instanceRef.current;\n        const isApplied = instance !== null && didApplyAnimatedValues(instance, resolveProps(props, true));\n\n        if (!isApplied) {\n            forceUpdate();\n        }\n    };\n};\n\nconst createAnimatedComponent = (Component: Wrappable): AnimatedComponent<Wrappable> => {\n    const Animated = ({ ref: givenRef, ...props }: AnimatedInput): ReactNode => {\n        const instanceRef = useRef<object | null>(null);\n        const ref = useMergedRef(givenRef, instanceRef);\n        const update = useAnimatedUpdate(instanceRef, props);\n        useObserver(new PropsObserver(update, getDependencies(props)));\n        useCommitSync(instanceRef, props);\n\n        return <Component {...resolveProps(props, false)} ref={ref} />;\n    };\n\n    Animated.displayName = `Animated(${getDisplayName(Component)})`;\n\n    return Animated as AnimatedComponent<Wrappable>;\n};\n\nfunction withAnimated<T extends Wrappable>(component: T): AnimatedComponent<T> {\n    let cached = cache.get(component);\n\n    if (cached === undefined) {\n        cached = createAnimatedComponent(component);\n        cache.set(component, cached);\n    }\n\n    return cached as AnimatedComponent<T>;\n}\n\nclass PropsObserver {\n    readonly update: () => void;\n\n    readonly dependencies: Set<FluidValue>;\n\n    constructor(update: () => void, dependencies: Set<FluidValue>) {\n        this.update = update;\n        this.dependencies = dependencies;\n    }\n\n    eventObserved(event: FluidEvent): void {\n        if (event.type === \"change\") {\n            raf.write(this.update);\n        }\n    }\n}\n\nexport { withAnimated };\n"]}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@gtkx/animated",
+  "version": "1.3.0",
+  "description": "React Spring animations for GTKX: animated widget components driven by the GTK frame clock",
+  "keywords": [
+    "gtkx",
+    "gtk",
+    "gtk4",
+    "react",
+    "react-spring",
+    "animation",
+    "spring",
+    "linux",
+    "desktop"
+  ],
+  "homepage": "https://gtkx.dev",
+  "bugs": {
+    "url": "https://github.com/gtkx-org/gtkx/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gtkx-org/gtkx.git",
+    "directory": "packages/animated"
+  },
+  "license": "MPL-2.0",
+  "author": "Eugenio Depalo <eugeniodepalo@gmail.com>",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": [
+    "./src/index.ts",
+    "./dist/index.js",
+    "./src/bootstrap.ts",
+    "./dist/bootstrap.js"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "nx": {
+    "targets": {
+      "lint": {
+        "options": {
+          "cwd": ".",
+          "command": "eslint {projectRoot}"
+        }
+      }
+    }
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "dependencies": {
+    "@react-spring/core": "^10.1.2",
+    "@react-spring/shared": "^10.1.2",
+    "@react-spring/types": "^10.1.2",
+    "@gtkx/react": "1.3.0",
+    "@gtkx/runtime": "1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.11",
+    "@gtkx/config": "1.3.0",
+    "@gtkx/testing": "1.3.0",
+    "@gtkx/vitest": "1.3.0"
+  },
+  "scripts": {
+    "release": "tsx ../../scripts/release-package.ts"
+  }
+}

package/src/animated.ts

@@ -0,0 +1,62 @@
+import type { ElementType } from "react";
+import * as elements from "@gtkx/jsx";
+import type { AnimatedComponent, AnimatedElements } from "./types.js";
+import { withAnimated } from "./with-animated.js";
+
+type Wrappable = Exclude<ElementType, string>;
+/**
+ * The `animated` entrypoint: callable to wrap any component, and exposing every generated widget
+ * component as a property, so `animated.GtkLabel` is the animated form of `GtkLabel`.
+ */
+type Animated = (<T extends Exclude<ElementType, string>>(component: T) => AnimatedComponent<T>) & AnimatedElements;
+
+/**
+ * Wraps a component so that its props accept springs and interpolations: `animated(GtkLabel)` is
+ * `GtkLabel` with every prop also taking a `SpringValue` or an `Interpolation`. Animated values are
+ * written to the widget on each frame without a React render. The wrapper of a given component is
+ * created once and reused, so repeated lookups render the same component.
+ *
+ * Every widget component of the generated `@gtkx/jsx` store is also available as a property:
+ * `animated.GtkLabel` is `animated(GtkLabel)` without the import. Elements whose `ref` does not
+ * expose a `Gtk.Widget` subclass, such as `GtkAdjustment`, are wrapped through the call form.
+ */
+const animated: Animated = new Proxy(wrapComponent, {
+    get(target, property, receiver): unknown {
+        const component = componentFor(property);
+
+        return component === null ? Reflect.get(target, property, receiver) : withAnimated(component);
+    },
+    getOwnPropertyDescriptor(target, property): PropertyDescriptor | undefined {
+        const component = componentFor(property);
+
+        if (component === null) {
+            return Reflect.getOwnPropertyDescriptor(target, property);
+        }
+
+        return { configurable: true, enumerable: true, writable: false, value: withAnimated(component) };
+    },
+    has(target, property): boolean {
+        return componentFor(property) !== null || Reflect.has(target, property);
+    },
+    ownKeys(target): (string | symbol)[] {
+        const names = Object.keys(elements).filter((name) => componentFor(name) !== null);
+
+        return [...new Set([...Reflect.ownKeys(target), ...names])];
+    },
+}) as Animated;
+
+function componentFor(property: string | symbol): Wrappable | null {
+    const value: unknown = Reflect.get(elements, property);
+
+    return isComponent(value) ? value : null;
+}
+
+function isComponent(value: unknown): value is Wrappable {
+    return typeof value === "function";
+}
+
+function wrapComponent<T extends Wrappable>(component: T): AnimatedComponent<T> {
+    return withAnimated(component);
+}
+
+export { animated, type Animated };

package/src/apply-animated-values.ts

@@ -0,0 +1,116 @@
+import type { Lookup } from "@react-spring/types";
+import * as Gtk from "@gtkx/gi/gtk";
+import { applyStyle, applyWrite } from "@gtkx/react/internal";
+import { coerceObjectProperty } from "@gtkx/runtime";
+
+const setterCache: WeakMap<object, Map<string, boolean>> = new WeakMap();
+
+const hasSetterInChain = (prototype: object | null, name: string): boolean => {
+    for (let current = prototype; current !== null; current = Object.getPrototypeOf(current) as object | null) {
+        const descriptor = Object.getOwnPropertyDescriptor(current, name);
+
+        if (descriptor !== undefined) {
+            return descriptor.set !== undefined;
+        }
+    }
+
+    return false;
+};
+
+const hasSetter = (instance: object, name: string): boolean => {
+    const prototype = Object.getPrototypeOf(instance) as object | null;
+
+    if (prototype === null) {
+        return false;
+    }
+
+    let known = setterCache.get(prototype);
+
+    if (known === undefined) {
+        known = new Map();
+        setterCache.set(prototype, known);
+    }
+
+    let isWritable = known.get(name);
+
+    if (isWritable === undefined) {
+        isWritable = hasSetterInChain(prototype, name);
+        known.set(name, isWritable);
+    }
+
+    return isWritable;
+};
+
+const isText = (value: unknown): value is string | number => typeof value === "string" || typeof value === "number";
+
+const getText = (value: unknown): string | null => {
+    if (isText(value)) {
+        return String(value);
+    }
+
+    if (!Array.isArray(value)) {
+        return null;
+    }
+
+    const texts = value.map((item) => getText(item));
+
+    return texts.every((item) => item !== null) ? texts.join("") : null;
+};
+
+const didApplyText = (instance: object, value: unknown): boolean => {
+    const text = getText(value);
+
+    if (text === null || !(instance instanceof Gtk.Label)) {
+        return false;
+    }
+
+    applyWrite(() => {
+        instance.setLabel(text);
+    });
+
+    return true;
+};
+
+const didApplyStyle = (instance: object, value: unknown): boolean => {
+    if (!(instance instanceof Gtk.Widget)) {
+        return false;
+    }
+
+    applyStyle(instance, value);
+
+    return true;
+};
+
+const didApplyValue = (instance: object, name: string, value: unknown): boolean => {
+    if (name === "children") {
+        return didApplyText(instance, value);
+    }
+
+    if (name === "style") {
+        return didApplyStyle(instance, value);
+    }
+
+    if (!hasSetter(instance, name)) {
+        return false;
+    }
+
+    applyWrite(() => {
+        Reflect.set(instance, name, coerceObjectProperty(instance, name, value));
+    });
+
+    return true;
+};
+
+const didApplyAnimatedValues = (instance: object, values: Lookup): boolean => {
+    let isApplied = true;
+
+    for (const name in values) {
+        if (!didApplyValue(instance, name, values[name])) {
+            isApplied = false;
+        }
+    }
+
+    return isApplied;
+};
+
+export { didApplyAnimatedValues };

package/src/bootstrap.ts

@@ -0,0 +1,12 @@
+import { Globals } from "@react-spring/core";
+import { colors, createStringInterpolator } from "@react-spring/shared";
+import { trackReducedMotion } from "./reduced-motion.js";
+import { requestFrame } from "./request-frame.js";
+
+Globals.assign({
+    colors,
+    createStringInterpolator,
+    requestAnimationFrame: requestFrame,
+});
+
+trackReducedMotion();

package/src/index.ts

@@ -0,0 +1,110 @@
+import "./bootstrap.js";
+
+export { animated, type Animated } from "./animated.js";
+export { useReducedMotion } from "./reduced-motion.js";
+export type {
+    AnimatedComponent,
+    AnimatedElements,
+    AnimatedItems,
+    AnimatedProp,
+    AnimatedProps,
+    AnimatedStyle,
+} from "./types.js";
+export {
+    BailSignal,
+    config,
+    Controller,
+    createInterpolator,
+    easings,
+    FrameValue,
+    Globals,
+    inferTo,
+    Interpolation,
+    Spring,
+    SpringContext,
+    SpringRef,
+    SpringValue,
+    to,
+    Trail,
+    Transition,
+    update,
+    useChain,
+    useSpring,
+    useSpringRef,
+    useSprings,
+    useSpringValue,
+    useTrail,
+    useTransition,
+} from "@react-spring/core";
+export type {
+    AnimationConfig,
+    AnimationProps,
+    AnimationResult,
+    AsyncResult,
+    Change,
+    ControllerFlushFn,
+    ControllerProps,
+    ControllerUpdate,
+    EventProp,
+    ForwardProps,
+    GoalProp,
+    GoalValue,
+    GoalValues,
+    InferTo,
+    InlineToProps,
+    Interpolated,
+    Interpolator,
+    ItemKeys,
+    LoopProp,
+    MatchProp,
+    OnChange,
+    OnPause,
+    OnProps,
+    OnResolve,
+    OnRest,
+    OnResume,
+    OnStart,
+    PickAnimated,
+    ReservedEventProps,
+    ReservedProps,
+    SpringChain,
+    SpringComponentProps,
+    SpringConfig,
+    SpringProps,
+    SpringsUpdate,
+    SpringTo,
+    SpringToFn,
+    SpringUpdate,
+    SpringUpdateFn,
+    SpringValues,
+    Springify,
+    ToProps,
+    ToValues,
+    TrailComponentProps,
+    TransitionComponentProps,
+    TransitionFn,
+    TransitionFrom,
+    TransitionKey,
+    TransitionRenderFn,
+    TransitionState,
+    TransitionTo,
+    TransitionValues,
+    UseSpringProps,
+    UseSpringsProps,
+    UseTrailProps,
+    UseTransitionProps,
+    VelocityProp,
+} from "@react-spring/core";
+export type { FluidValue } from "@react-spring/shared";
+export type {
+    Animatable,
+    EasingFunction,
+    ExtrapolateType,
+    InterpolatorArgs,
+    InterpolatorConfig,
+    InterpolatorFactory,
+    InterpolatorFn,
+    Lookup,
+    OneOrMore,
+    UnknownProps,
+} from "@react-spring/types";

package/src/reduced-motion.ts

@@ -0,0 +1,82 @@
+import * as Gtk from "@gtkx/gi/gtk";
+import { Globals } from "@react-spring/core";
+import { useSyncExternalStore } from "react";
+
+type Listener = () => void;
+type Tracker = { settings: Gtk.Settings | null; isReduced: boolean | null };
+
+const REDUCED_MOTION_MINOR = 22;
+const tracker: Tracker = { settings: null, isReduced: null };
+const listeners: Set<Listener> = new Set();
+
+const hasReducedMotionSetting = (): boolean => Gtk.checkVersion(4, REDUCED_MOTION_MINOR, 0) === null;
+
+const isReduceMotionPreferred = (settings: Gtk.Settings): boolean =>
+    hasReducedMotionSetting() && settings.gtkInterfaceReducedMotion === Gtk.ReducedMotion.REDUCE;
+
+const sync = (): void => {
+    const { settings } = tracker;
+
+    if (settings === null) {
+        return;
+    }
+
+    const isReduced = !settings.gtkEnableAnimations || isReduceMotionPreferred(settings);
+    Globals.assign({ skipAnimation: !settings.gtkEnableAnimations });
+
+    if (isReduced === tracker.isReduced) {
+        return;
+    }
+
+    tracker.isReduced = isReduced;
+
+    for (const listener of listeners) {
+        listener();
+    }
+};
+
+const watch = (settings: Gtk.Settings): void => {
+    tracker.settings = settings;
+    settings.on("notify::gtk-enable-animations", sync);
+
+    if (hasReducedMotionSetting()) {
+        settings.on("notify::gtk-interface-reduced-motion", sync);
+    }
+
+    sync();
+};
+
+const trackReducedMotion = (): boolean | null => {
+    if (tracker.settings === null) {
+        const settings = Gtk.Settings.getDefault();
+
+        if (settings === null) {
+            return null;
+        }
+
+        watch(settings);
+    }
+
+    return tracker.isReduced;
+};
+
+const subscribe = (listener: Listener): (() => void) => {
+    listeners.add(listener);
+
+    return () => {
+        listeners.delete(listener);
+    };
+};
+
+/**
+ * Reports whether the desktop asks for less motion: `true` while GTK's `gtk-enable-animations`
+ * setting is off, which is when every spring already jumps straight to its target, and also while
+ * the `gtk-interface-reduced-motion` setting of GTK 4.22 asks to reduce motion, the preference
+ * behind the `prefers-reduced-motion` media query, which leaves springs running so that components
+ * can trade a slide for a fade themselves. Returns `null` until a display is open.
+ *
+ * @returns `true` when motion should be reduced, `false` when it should not, `null` when unknown.
+ */
+const useReducedMotion = (): boolean | null => useSyncExternalStore(subscribe, trackReducedMotion);
+
+export { trackReducedMotion, useReducedMotion };