@motionstudies/web 0.1.0-alpha.0 → 0.1.0-alpha.10

package/components/split-flap-board.css

@@ -0,0 +1,45 @@
+.ms-split-flap-board {
+  --board-ink: #eee9d7;
+  --board-accent: var(--airport-accent, #edc96b);
+  color: var(--board-ink);
+  background: #111311;
+  padding: 10px 14px 18px;
+  border: 1px solid #383a32;
+  border-radius: 5px;
+  box-shadow: inset 0 2px 10px #0008, 0 2px 0 #ffffff08;
+  min-width: 0;
+}
+.ms-split-flap-board *, .ms-airport-hero * { box-sizing: border-box; }
+.ms-split-flap-board__scroll { position: relative; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #656454 #171917; padding: 4px 1px 8px; }
+.ms-split-flap-board__table { border-collapse: separate; border-spacing: 0 7px; width: 100%; text-align: left; }
+.ms-split-flap-board__table th { color: #aaa996; font: 500 10px/1.5 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .14em; padding: 0 12px 3px 0; }
+.ms-split-flap-board__table td { padding: 0 12px 0 0; }
+.ms-split-flap-board__table :is(th, td):last-child { padding-right: 0; }
+.ms-flap-text { position: relative; display: inline-block; vertical-align: middle; }
+.ms-flap-text__tiles { display: flex; gap: 2px; white-space: pre; }
+.ms-flap { position: relative; display: block; width: .72em; height: 1.65em; perspective: 100px; font: 600 15px/1.65 ui-monospace, 'SFMono-Regular', Consolas, monospace; }
+.ms-flap__face { position: relative; display: block; height: 100%; text-align: center; background: linear-gradient(#30332e 49%, #1d201c 50%); border-radius: 2px; box-shadow: inset 0 1px #ffffff16, 0 1px 2px #000; animation: ms-flap-turn 135ms ease-in-out 5 backwards; animation-delay: calc(var(--flap-delay) * .75); }
+.ms-flap__drum { position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ms-flap-reveal 675ms step-end both; animation-delay: calc(var(--flap-delay) * .75); }
+.ms-flap__drum::before { content: 'A'; animation: ms-flap-characters 1440ms step-end both; animation-delay: calc(var(--flap-phase) * .75); }
+.ms-split-flap-board[data-loading] .ms-flap__face { animation: ms-flap-turn 240ms ease-in-out infinite; animation-delay: var(--flap-motion-phase); }
+.ms-split-flap-board[data-loading] .ms-flap__drum { animation: none; }
+.ms-split-flap-board[data-loading] .ms-flap__drum::before { animation-duration: 1920ms; animation-delay: var(--flap-phase); animation-iteration-count: infinite; }
+.ms-flap::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #080a08; box-shadow: 0 1px #ffffff09; pointer-events: none; }
+.ms-split-flap-board__table [data-tone='accent'] td:last-child { color: var(--board-accent); }
+.ms-split-flap-board__table [data-tone='warning'] td:last-child { color: #ffb185; }
+.ms-split-flap-board__table [data-selected] .ms-flap__face { box-shadow: inset 0 -2px var(--board-accent); }
+.ms-split-flap-board__select { display: block; padding: 0; border: 0; border-radius: 2px; color: inherit; background: none; cursor: pointer; }
+.ms-split-flap-board__select:hover { color: var(--board-accent); }
+.ms-split-flap-board :focus-visible { outline: 2px solid var(--board-accent); outline-offset: 3px; }
+.ms-split-flap-board__loading { margin: 8px 0 0; color: #bbbbaa; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
+.ms-board-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+@keyframes ms-flap-turn { 0% { transform: rotateX(-80deg); } 65%, 100% { transform: rotateX(0); } }
+@keyframes ms-flap-reveal { 0% { visibility: visible; } 100% { visibility: hidden; } }
+@keyframes ms-flap-characters {
+  0% { content: 'A'; } 12.5% { content: 'E'; } 25% { content: 'K'; } 37.5% { content: 'N'; }
+  50% { content: 'R'; } 62.5% { content: 'S'; } 75% { content: '2'; } 87.5%, 100% { content: '7'; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ms-split-flap-board .ms-flap .ms-flap__face, .ms-split-flap-board .ms-flap .ms-flap__drum, .ms-split-flap-board .ms-flap .ms-flap__drum::before { animation: none; }
+  .ms-split-flap-board .ms-flap__drum { display: none; }
+}

package/components/transport-hero-cards.css

@@ -0,0 +1,39 @@
+@import './dot-matrix-board.css';
+@import './split-flap-board.css';
+@import './sbb-departure-board.css';
+
+.ms-bus-stop-hero, .ms-rail-station-hero { box-sizing: border-box; min-width: 0; container-type: inline-size; padding: clamp(12px, 4%, 24px); font-family: ui-sans-serif, system-ui, sans-serif; }
+.ms-bus-stop-hero *, .ms-rail-station-hero * { box-sizing: border-box; }
+.ms-bus-stop-hero { color: #e8ebe2; background: #2b3532; border: 1px solid #56645d; border-radius: 6px; }
+.ms-bus-stop-hero__identity { display: flex; align-items: center; gap: 18px; padding: 4px 0 24px; }
+.ms-bus-stop-hero__identity > div { min-width: 0; }
+.ms-bus-stop-hero__identity p { margin: 0; color: #b9c7be; font-size: 12px; line-height: 1.6; }
+.ms-bus-stop-hero__identity h2 { margin: 4px 0; font-size: clamp(24px, 5cqi, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; overflow-wrap: anywhere; }
+.ms-bus-stop-hero__symbol { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 58px; background: #dfe7d9; color: #2b3532; border-radius: 2px; }
+.ms-bus-stop-hero__symbol svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 2; }
+.ms-bus-stop-hero__code { margin-left: auto; text-align: right; flex-shrink: 0; }
+.ms-bus-stop-hero__code span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
+.ms-bus-stop-hero__code strong { font-size: 28px; line-height: 1.2; font-weight: 500; }
+.ms-rail-station-hero { color: #f3f0e3; background: linear-gradient(120deg, #1d272c, #11191d); border: 1px solid #425057; border-top: 4px solid #d0b874; border-radius: 3px; }
+.ms-rail-station-hero__masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; color: #c9c8b9; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
+.ms-rail-station-hero__masthead strong { padding: 4px 7px; border: 1px solid #5a605b; font: 500 12px/1.2 ui-monospace, monospace; }
+.ms-rail-station-hero__identity { display: flex; align-items: center; gap: 18px; padding: 20px 0 24px; }
+.ms-rail-station-hero__identity > span { flex-shrink: 0; width: 42px; color: #e4d7b2; }
+.ms-rail-station-hero__identity svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 3; }
+.ms-rail-station-hero__identity h2 { margin: 0; font-size: clamp(25px, 5cqi, 42px); line-height: 1.1; letter-spacing: -.035em; font-weight: 500; overflow-wrap: anywhere; }
+.ms-rail-station-hero[data-presentation='sbb'] { background: #0c1730; border-color: #405375; border-top: 4px solid #eb001b; }
+.ms-rail-station-hero[data-presentation='sbb'] .ms-rail-station-hero__identity > span { width: 44px; height: 40px; padding: 5px; color: #fff; background: #d70019; }
+.ms-rail-station-hero[data-presentation='sbb'] .ms-rail-station-hero__masthead { color: #b7c6e0; }
+.ms-transport-hero__note { margin-top: 16px; color: #b8c0b9; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
+.ms-transport-hero__error { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; min-height: 140px; padding: 24px; background: #111713; color: #ece8d6; }
+.ms-transport-hero__error button { min-height: 40px; padding: 8px 16px; font: inherit; background: #29352c; color: inherit; border: 1px solid #627465; border-radius: 3px; cursor: pointer; }
+.ms-transport-hero__error button:focus-visible { outline: 2px solid #f6cd46; outline-offset: 3px; }
+.ms-transport-hero__flap { overflow: auto; min-width: 0; }
+.ms-transport-hero__flap-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 0; font: 12px/1.5 ui-monospace, monospace; color: #d8d6c1; }
+@container (max-width: 440px) {
+  .ms-bus-stop-hero__identity, .ms-rail-station-hero__identity { gap: 12px; }
+  .ms-bus-stop-hero__symbol { width: 36px; height: 46px; }
+  .ms-rail-station-hero__identity > span { width: 32px; }
+  .ms-bus-stop-hero__code strong { font-size: 20px; }
+  .ms-rail-station-hero .ms-dot-matrix-board { padding: 12px 8px; }
+}

package/mount-motion-study.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { ButtonTooltips } from './components/ButtonTooltips.js';
 import { applyVisualTheme } from './visual-theme.js';
 export function mountMotionStudy(edition, application) {
     const root = document.getElementById('root');
@@ -9,5 +10,5 @@ export function mountMotionStudy(edition, application) {
     document.documentElement.classList.add('motion-study');
     document.documentElement.dataset.edition = edition.id;
     applyVisualTheme(edition.theme);
-    createRoot(root).render(_jsx(StrictMode, { children: application }));
+    createRoot(root).render(_jsxs(StrictMode, { children: [application, _jsx(ButtonTooltips, {})] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionstudies/web",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.10",
   "private": false,
   "type": "module",
   "description": "Browser controls and loaders for Motion Studies.",
@@ -20,6 +20,28 @@
     "tag": "next"
   },
   "exports": {
+    "./use-now-clock": {
+      "types": "./use-now-clock.d.ts",
+      "import": "./use-now-clock.js",
+      "default": "./use-now-clock.js"
+    },
+    "./use-browser-location": {
+      "types": "./use-browser-location.d.ts",
+      "import": "./use-browser-location.js",
+      "default": "./use-browser-location.js"
+    },
+    "./components/SplitFlapBoard": {
+      "types": "./components/SplitFlapBoard.d.ts",
+      "import": "./components/SplitFlapBoard.js",
+      "default": "./components/SplitFlapBoard.js"
+    },
+    "./components/AirportHeroCard": {
+      "types": "./components/AirportHeroCard.d.ts",
+      "import": "./components/AirportHeroCard.js",
+      "default": "./components/AirportHeroCard.js"
+    },
+    "./split-flap-board.css": "./components/split-flap-board.css",
+    "./airport-hero-card.css": "./components/airport-hero-card.css",
     "./components/MobilePicker": {
       "types": "./components/MobilePicker.d.ts",
       "import": "./components/MobilePicker.js",
@@ -72,7 +94,49 @@
     },
     "./tokens.css": "./tokens.css",
     "./shell.css": "./shell.css",
-    "./mobile-picker.css": "./components/mobile-picker.css"
+    "./mobile-picker.css": "./components/mobile-picker.css",
+    "./components/ButtonTooltips": {
+      "types": "./components/ButtonTooltips.d.ts",
+      "import": "./components/ButtonTooltips.js",
+      "default": "./components/ButtonTooltips.js"
+    },
+    "./use-airport-feed": {
+      "types": "./use-airport-feed.d.ts",
+      "import": "./use-airport-feed.js",
+      "default": "./use-airport-feed.js"
+    },
+    "./components/AirportBoard": {
+      "types": "./components/AirportBoard.d.ts",
+      "import": "./components/AirportBoard.js",
+      "default": "./components/AirportBoard.js"
+    },
+    "./components/DotMatrixBoard": {
+      "types": "./components/DotMatrixBoard.d.ts",
+      "import": "./components/DotMatrixBoard.js",
+      "default": "./components/DotMatrixBoard.js"
+    },
+    "./dot-matrix-board.css": "./components/dot-matrix-board.css",
+    "./components/BusStopHeroCard": {
+      "types": "./components/BusStopHeroCard.d.ts",
+      "import": "./components/BusStopHeroCard.js",
+      "default": "./components/BusStopHeroCard.js"
+    },
+    "./components/RailStationHeroCard": {
+      "types": "./components/RailStationHeroCard.d.ts",
+      "import": "./components/RailStationHeroCard.js",
+      "default": "./components/RailStationHeroCard.js"
+    },
+    "./transport-hero-cards.css": "./components/transport-hero-cards.css",
+    "./use-json-asset": {
+      "types": "./use-json-asset.d.ts",
+      "import": "./use-json-asset.js",
+      "default": "./use-json-asset.js"
+    },
+    "./use-transition-value": {
+      "types": "./use-transition-value.d.ts",
+      "import": "./use-transition-value.js",
+      "default": "./use-transition-value.js"
+    }
   },
   "files": [
     "**/*.js",
@@ -87,7 +151,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@motionstudies/core": "0.1.0-alpha.0"
+    "@motionstudies/core": "0.1.0-alpha.10"
   },
   "peerDependencies": {
     "react": "^19.2.8",

package/use-airport-feed.d.ts

@@ -0,0 +1,9 @@
+import { type AirportFeedResponse } from '@motionstudies/core/domain/live-airport';
+export interface AirportFeedState {
+    readonly available: boolean;
+    readonly checking: boolean;
+    readonly loading: boolean;
+    readonly response?: AirportFeedResponse;
+}
+/** Fetch capabilities without paid work; poll boards only while Now is selected. */
+export declare function useAirportFeed(baseUrl: string, edition: string, airport: string, enabled: boolean): AirportFeedState;

package/use-airport-feed.js

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { isAirportFeedResponse } from '@motionstudies/core/domain/live-airport';
+/** Fetch capabilities without paid work; poll boards only while Now is selected. */
+export function useAirportFeed(baseUrl, edition, airport, enabled) {
+    const source = `${baseUrl.replace(/\/$/, '')}/api/airports/v1/${encodeURIComponent(edition)}`;
+    const identity = `${source}/${airport}/${enabled}`;
+    const empty = { available: false, checking: true, loading: false };
+    const [stored, setStored] = useState({ ...empty, identity });
+    const state = stored.identity === identity ? stored : empty;
+    useEffect(() => {
+        const controller = new AbortController();
+        let timer, failures = 0;
+        const update = (patch) => {
+            if (!controller.signal.aborted)
+                setStored((old) => ({ ...(old.identity === identity ? old : empty), ...patch, identity }));
+        };
+        update(empty);
+        const tick = async () => {
+            let delay = 60_000;
+            if (document.hidden) {
+                timer = window.setTimeout(() => void tick(), delay);
+                return;
+            }
+            try {
+                const options = { cache: 'no-store', signal: AbortSignal.any([controller.signal, AbortSignal.timeout(20_000)]) };
+                const capabilitiesResponse = await fetch(`${source}/capabilities`, options);
+                if (!capabilitiesResponse.ok)
+                    throw new Error('Capabilities unavailable');
+                const capabilities = await capabilitiesResponse.json();
+                if (capabilities.version !== 1 || typeof capabilities.enabled !== 'boolean' || !Array.isArray(capabilities.airports))
+                    throw new Error('Invalid capabilities');
+                const available = capabilities.enabled && capabilities.airports.includes(airport);
+                update({ available, checking: false });
+                if (!available) {
+                    update({ loading: false, response: { version: 1, status: 'disabled', reason: 'disabled', retryAfterSeconds: 60 } });
+                }
+                else if (enabled) {
+                    update({ loading: true });
+                    const r = await fetch(`${source}/${encodeURIComponent(airport)}/board`, options);
+                    const response = await r.json();
+                    if (!isAirportFeedResponse(response))
+                        throw new Error('Invalid board');
+                    if (response.snapshot && (response.snapshot.airport.iata !== airport || response.snapshot.fetchedAt > Date.now() / 1000 + 60))
+                        throw new Error('Mismatched board');
+                    update({ response, loading: false, available: response.status !== 'disabled' });
+                    // Check capabilities every minute even when the upstream circuit is paused.
+                }
+                failures = 0;
+            }
+            catch {
+                failures += 1;
+                delay = Math.min(300_000, 30_000 * 2 ** Math.min(failures, 4));
+                if (!controller.signal.aborted)
+                    setStored((old) => {
+                        const snapshot = old.identity === identity ? old.response?.snapshot : undefined;
+                        return { identity, available: old.identity === identity && old.available, checking: false, loading: false,
+                            response: { version: 1, status: snapshot && snapshot.expiresAt > Date.now() / 1000 ? 'stale' : 'unavailable', reason: 'provider', retryAfterSeconds: delay / 1000,
+                                ...(snapshot && snapshot.expiresAt > Date.now() / 1000 ? { snapshot } : {}) } };
+                    });
+            }
+            finally {
+                if (!controller.signal.aborted)
+                    timer = window.setTimeout(() => void tick(), delay);
+            }
+        };
+        void tick();
+        return () => { controller.abort(); window.clearTimeout(timer); };
+        // empty is deliberately reconstructed only when the source effect restarts.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [identity, source, airport, enabled]);
+    return state;
+}

package/use-browser-location.d.ts

@@ -0,0 +1,13 @@
+export interface BrowserLocation {
+    readonly longitude: number;
+    readonly latitude: number;
+    readonly accuracy: number;
+}
+export type BrowserLocationStatus = 'idle' | 'locating' | 'ready' | 'denied' | 'timeout' | 'unavailable';
+/** One explicit request, kept in memory. Clearing or unmounting ignores late replies. */
+export declare function useBrowserLocation(): {
+    location: BrowserLocation | undefined;
+    status: BrowserLocationStatus;
+    locate: () => void;
+    clear: () => void;
+};

package/use-browser-location.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/** One explicit request, kept in memory. Clearing or unmounting ignores late replies. */
+export function useBrowserLocation() {
+    const [location, setLocation] = useState();
+    const [status, setStatus] = useState('idle');
+    const request = useRef(0);
+    useEffect(() => () => { request.current += 1; }, []);
+    const clear = useCallback(() => {
+        request.current += 1;
+        setLocation(undefined);
+        setStatus('idle');
+    }, []);
+    const locate = useCallback(() => {
+        const id = ++request.current;
+        setLocation(undefined);
+        if (!navigator.geolocation) {
+            setStatus('unavailable');
+            return;
+        }
+        setStatus('locating');
+        navigator.geolocation.getCurrentPosition(({ coords }) => {
+            if (request.current !== id)
+                return;
+            if (!Number.isFinite(coords.longitude) || !Number.isFinite(coords.latitude) ||
+                Math.abs(coords.longitude) > 180 || Math.abs(coords.latitude) > 90 ||
+                !Number.isFinite(coords.accuracy) || coords.accuracy < 0) {
+                setStatus('unavailable');
+                return;
+            }
+            setLocation({ longitude: coords.longitude, latitude: coords.latitude, accuracy: coords.accuracy });
+            setStatus('ready');
+        }, (error) => {
+            if (request.current !== id)
+                return;
+            setStatus(error.code === 1 ? 'denied' : error.code === 3 ? 'timeout' : 'unavailable');
+        }, { enableHighAccuracy: false, maximumAge: 0, timeout: 10_000 });
+    }, []);
+    return { location, status, locate, clear };
+}

package/use-json-asset.d.ts

@@ -0,0 +1,9 @@
+/** A single optional asset, cached until its URL/parser changes or retry is called.
+ * Keep parse stable. Source compatibility and schema checks belong in that parser. */
+export declare function useJsonAsset<T>(url: string | undefined, enabled?: boolean, parse?: (value: unknown) => T, optional?: boolean): {
+    data: T | undefined;
+    error: boolean;
+    unavailable: boolean;
+    loading: boolean;
+    retry: () => void;
+};

package/use-json-asset.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+const identity = (value) => value;
+/** A single optional asset, cached until its URL/parser changes or retry is called.
+ * Keep parse stable. Source compatibility and schema checks belong in that parser. */
+export function useJsonAsset(url, enabled = true, parse = identity, optional = false) {
+    const [attempt, setAttempt] = useState(0);
+    const [stored, setStored] = useState({ url, parse, attempt });
+    const state = stored.url === url && stored.parse === parse && stored.attempt === attempt
+        ? stored : { url, parse, attempt };
+    if (stored !== state)
+        setStored(state);
+    const { data, error, unavailable } = state;
+    useEffect(() => {
+        if (!enabled || !url || data !== undefined || unavailable)
+            return;
+        const controller = new AbortController();
+        const save = (result) => {
+            if (!controller.signal.aborted)
+                setStored(current => current.url === url && current.parse === parse && current.attempt === attempt
+                    ? { ...current, ...result } : current);
+        };
+        void (async () => {
+            try {
+                const response = await fetch(url, { signal: controller.signal });
+                if (optional && response.status === 404) {
+                    save({ unavailable: true, error: false });
+                    return;
+                }
+                if (!response.ok)
+                    throw new Error(`Asset returned ${response.status}`);
+                const next = parse(await response.json());
+                if (next === undefined)
+                    throw new Error('Asset parser returned no data');
+                save({ data: next, error: false });
+            }
+            catch {
+                save({ error: true });
+            }
+        })();
+        return () => controller.abort();
+    }, [url, enabled, parse, optional, attempt, data, unavailable]);
+    const retry = useCallback(() => setAttempt(value => value + 1), []);
+    return { data, error: Boolean(error), unavailable: Boolean(unavailable),
+        loading: Boolean(enabled && url && data === undefined && !error && !unavailable), retry };
+}

package/use-now-clock.d.ts

@@ -0,0 +1,11 @@
+/** The consumer maps an instant into its own service date, timezone and data window.
+ * The consumer may explicitly choose a representative timetable for the present.
+ * Return null when its data cannot meaningfully represent that instant.
+ */
+export declare function useNowClock(resolveTime: (instant: Date) => number | null): {
+    active: boolean;
+    time: number | null;
+    unavailable: boolean;
+    start: () => void;
+    stop: () => void;
+};

package/use-now-clock.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+/** The consumer maps an instant into its own service date, timezone and data window.
+ * The consumer may explicitly choose a representative timetable for the present.
+ * Return null when its data cannot meaningfully represent that instant.
+ */
+export function useNowClock(resolveTime) {
+    const [active, setActive] = useState(false);
+    const [time, setTime] = useState(null);
+    const [unavailable, setUnavailable] = useState(false);
+    const running = useRef(false);
+    const resolver = useRef(resolveTime);
+    useLayoutEffect(() => { resolver.current = resolveTime; }, [resolveTime]);
+    const update = useCallback(() => {
+        const next = resolver.current(new Date());
+        if (next === null || !Number.isFinite(next)) {
+            running.current = false;
+            setActive(false);
+            setUnavailable(true);
+            return false;
+        }
+        setTime(next);
+        return true;
+    }, []);
+    const start = useCallback(() => {
+        setUnavailable(false);
+        running.current = update();
+        setActive(running.current);
+    }, [update]);
+    const stop = useCallback(() => {
+        running.current = false;
+        setActive(false);
+    }, []);
+    useEffect(() => {
+        if (!active)
+            return;
+        let frame;
+        const tick = () => {
+            if (running.current && update())
+                frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, [active, update]);
+    return { active, time, unavailable, start, stop };
+}

package/use-transition-value.d.ts

@@ -0,0 +1,12 @@
+export declare const smoothTransition: (progress: number) => number;
+export declare const cosineTransition: (progress: number) => number;
+/** Animate a scalar from its current value; interruptions reverse from the last frame.
+ * Reduced-motion changes settle immediately, including during an active transition. */
+export declare function useTransitionValue(target: number, { durationMs, easing, steps, }?: {
+    readonly durationMs?: number;
+    readonly easing?: (progress: number) => number;
+    readonly steps?: number;
+}): {
+    value: number;
+    transitioning: boolean;
+};

package/use-transition-value.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+export const smoothTransition = (progress) => progress * progress * (3 - 2 * progress);
+export const cosineTransition = (progress) => 0.5 - Math.cos(progress * Math.PI) / 2;
+/** Animate a scalar from its current value; interruptions reverse from the last frame.
+ * Reduced-motion changes settle immediately, including during an active transition. */
+export function useTransitionValue(target, { durationMs = 1600, easing = smoothTransition, steps, } = {}) {
+    const current = useRef(target);
+    const [value, setValue] = useState(target);
+    const [transitioning, setTransitioning] = useState(false);
+    useEffect(() => {
+        const from = current.current;
+        const motion = matchMedia('(prefers-reduced-motion: reduce)');
+        let frame = 0;
+        const finish = () => {
+            cancelAnimationFrame(frame);
+            current.current = target;
+            setValue(target);
+            setTransitioning(false);
+        };
+        if (!Number.isFinite(target) || !Number.isFinite(from))
+            return;
+        if (motion.matches || from === target || !(durationMs > 0) || !Number.isFinite(durationMs)) {
+            finish();
+            return;
+        }
+        const started = performance.now();
+        setTransitioning(true);
+        const tick = (now) => {
+            const progress = Math.min(1, (now - started) / durationMs);
+            const eased = easing(progress);
+            const fraction = steps && Number.isFinite(steps) && steps > 0 ? Math.round(eased * steps) / steps : eased;
+            current.current = from + (target - from) * fraction;
+            setValue(current.current);
+            if (progress < 1)
+                frame = requestAnimationFrame(tick);
+            else
+                finish();
+        };
+        frame = requestAnimationFrame(tick);
+        const changed = () => { if (motion.matches)
+            finish(); };
+        motion.addEventListener('change', changed);
+        return () => { cancelAnimationFrame(frame); motion.removeEventListener('change', changed); };
+    }, [target, durationMs, easing, steps]);
+    return { value, transitioning };
+}