@motionstudies/web 0.1.0-alpha.0

package/use-local-performance.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+export function useLocalPerformance(enabled) {
+    const [sample, setSample] = useState();
+    useEffect(() => {
+        if (!enabled)
+            return;
+        let animationFrame = 0;
+        let frames = 0;
+        let slowFrames = 0;
+        let previous = performance.now();
+        let windowStart = previous;
+        const measure = (now) => {
+            const frameDuration = now - previous;
+            previous = now;
+            frames += 1;
+            if (frameDuration > 34)
+                slowFrames += 1;
+            const elapsed = now - windowStart;
+            if (elapsed >= 1_000) {
+                setSample({
+                    fps: Math.round((frames * 1_000) / elapsed),
+                    slowFramePercent: Math.round((slowFrames / frames) * 100),
+                });
+                frames = 0;
+                slowFrames = 0;
+                windowStart = now;
+            }
+            animationFrame = requestAnimationFrame(measure);
+        };
+        animationFrame = requestAnimationFrame(measure);
+        return () => cancelAnimationFrame(animationFrame);
+    }, [enabled]);
+    return sample;
+}

package/use-observed-operations.d.ts

@@ -0,0 +1,8 @@
+import type { TransitOperationsSnapshot } from '@motionstudies/core/domain/operations';
+export interface ObservedOperationsState {
+    readonly snapshot?: TransitOperationsSnapshot;
+    readonly loading: boolean;
+    readonly error: boolean;
+}
+/** Poll after each response settles, retaining only the current source's data. */
+export declare function useObservedOperations(endpoint: string, enabled: boolean, refreshMilliseconds?: number): ObservedOperationsState;

package/use-observed-operations.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+/** Poll after each response settles, retaining only the current source's data. */
+export function useObservedOperations(endpoint, enabled, refreshMilliseconds = 30_000) {
+    if (!Number.isFinite(refreshMilliseconds) || refreshMilliseconds <= 0) {
+        throw new Error('Observation refresh interval must be positive');
+    }
+    const [stored, setStored] = useState({ endpoint, loading: false, error: false });
+    const state = stored.endpoint === endpoint ? stored : { endpoint, loading: false, error: false };
+    if (stored.endpoint !== endpoint)
+        setStored(state);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const controller = new AbortController();
+        let refresh;
+        function update(patch) {
+            if (!controller.signal.aborted) {
+                setStored((current) => current.endpoint === endpoint ? { ...current, ...patch } : current);
+            }
+        }
+        const load = async () => {
+            update({ loading: true });
+            try {
+                const response = await fetch(endpoint, { cache: 'no-store', signal: controller.signal });
+                if (!response.ok)
+                    throw new Error(`Observed operations returned ${response.status}`);
+                const snapshot = await response.json();
+                update({ snapshot, error: false });
+            }
+            catch {
+                update({ error: true });
+            }
+            finally {
+                update({ loading: false });
+                if (!controller.signal.aborted)
+                    refresh = window.setTimeout(() => void load(), refreshMilliseconds);
+            }
+        };
+        void load();
+        return () => {
+            controller.abort();
+            window.clearTimeout(refresh);
+        };
+    }, [enabled, endpoint, refreshMilliseconds]);
+    return { snapshot: state.snapshot, loading: enabled && state.loading, error: state.error };
+}

package/use-progressive-air-day.d.ts

@@ -0,0 +1,10 @@
+import { type AirDayManifest } from '@motionstudies/core/domain/air-day';
+import type { DataUrlResolver } from './data-url.ts';
+export declare function useProgressiveAirDay(manifestFile: string, active: boolean, time: number, resolveAssetUrl: DataUrlResolver): {
+    manifest: AirDayManifest | undefined;
+    chunkReady: boolean;
+    loading: boolean;
+    unavailable: boolean;
+    error: boolean;
+    snapshot: import("@motionstudies/core/domain/air").AirSnapshot | undefined;
+};

package/use-progressive-air-day.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { adjacentAirDayChunks, airDayChunkForTime, airSnapshotForDayChunk, } from '@motionstudies/core/domain/air-day';
+import { useProgressiveChunks } from './use-progressive-chunks.js';
+const adapter = {
+    chunkForTime: airDayChunkForTime,
+    adjacentChunks: adjacentAirDayChunks,
+    readChunk: (response) => response.json(),
+};
+export function useProgressiveAirDay(manifestFile, active, time, resolveAssetUrl) {
+    const { chunk, ...state } = useProgressiveChunks(manifestFile, active, time, resolveAssetUrl, adapter);
+    const snapshot = useMemo(() => state.manifest ? airSnapshotForDayChunk(state.manifest, chunk) : undefined, [state.manifest, chunk]);
+    return { ...state, snapshot };
+}

package/use-progressive-chunks.d.ts

@@ -0,0 +1,24 @@
+import type { DataUrlResolver } from './data-url.ts';
+interface ChunkDescriptor {
+    readonly id: string;
+    readonly path: string;
+}
+interface ChunkManifest<Descriptor extends ChunkDescriptor> {
+    readonly chunks: readonly Descriptor[];
+}
+export interface ProgressiveChunkAdapter<Manifest, Descriptor, Chunk> {
+    readonly chunkForTime: (manifest: Manifest, time: number) => Descriptor;
+    readonly adjacentChunks: (manifest: Manifest, current: Descriptor) => readonly Descriptor[];
+    readonly readChunk: (response: Response, descriptor: Descriptor) => Promise<Chunk>;
+    readonly optional?: boolean;
+}
+/** Internal lifecycle shared by the network, aircraft and road loaders. */
+export declare function useProgressiveChunks<Descriptor extends ChunkDescriptor, Manifest extends ChunkManifest<Descriptor>, Chunk>(manifestFile: string, active: boolean, time: number, resolveAssetUrl: DataUrlResolver, adapter: ProgressiveChunkAdapter<Manifest, Descriptor, Chunk>): {
+    manifest: Manifest | undefined;
+    chunk: Chunk | undefined;
+    chunkReady: boolean;
+    loading: boolean;
+    unavailable: boolean;
+    error: boolean;
+};
+export {};

package/use-progressive-chunks.js

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useState } from 'react';
+/** Internal lifecycle shared by the network, aircraft and road loaders. */
+export function useProgressiveChunks(manifestFile, active, time, resolveAssetUrl, adapter) {
+    const key = resolveAssetUrl(manifestFile);
+    const [stored, setStored] = useState({ key, chunks: {} });
+    // Reset during render so no effect (or consumer) sees another source's data.
+    // Late responses are also rejected below, independently of fetch cancellation.
+    const state = stored.key === key ? stored : { key, chunks: {} };
+    if (stored.key !== key)
+        setStored(state);
+    const { manifest, chunks, manifestError, unavailable, failedChunk } = state;
+    const descriptor = useMemo(() => manifest?.chunks.length ? adapter.chunkForTime(manifest, time) : undefined, [adapter, manifest, time]);
+    const chunk = descriptor ? chunks[descriptor.id] : undefined;
+    const chunkReady = chunk !== undefined;
+    const error = Boolean(manifestError || (descriptor && failedChunk === descriptor.id));
+    useEffect(() => {
+        if (!active || manifest || unavailable)
+            return;
+        const controller = new AbortController();
+        void (async () => {
+            try {
+                const response = await fetch(key, { signal: controller.signal });
+                if (adapter.optional && response.status === 404) {
+                    if (!controller.signal.aborted) {
+                        setStored((current) => current.key === key ? { ...current, unavailable: true } : current);
+                    }
+                    return;
+                }
+                if (!response.ok)
+                    throw new Error(`Day manifest returned ${response.status}`);
+                const next = await response.json();
+                if (!Array.isArray(next.chunks) || !next.chunks.length) {
+                    throw new Error('Day manifest has no chunks');
+                }
+                if (!controller.signal.aborted) {
+                    setStored((current) => current.key === key
+                        ? { ...current, manifest: next, manifestError: false }
+                        : current);
+                }
+            }
+            catch {
+                if (!controller.signal.aborted) {
+                    setStored((current) => current.key === key ? { ...current, manifestError: true } : current);
+                }
+            }
+        })();
+        return () => controller.abort();
+    }, [active, adapter, key, manifest, unavailable]);
+    useEffect(() => {
+        if (!active || !manifest || !descriptor)
+            return;
+        const currentMissing = chunks[descriptor.id] === undefined;
+        const targets = currentMissing
+            ? [descriptor]
+            : adapter.adjacentChunks(manifest, descriptor).filter((candidate) => chunks[candidate.id] === undefined);
+        if (!targets.length)
+            return;
+        const controller = new AbortController();
+        // Keep successful prefetches even when a neighbouring chunk fails.
+        for (const candidate of targets) {
+            void (async () => {
+                try {
+                    const response = await fetch(resolveAssetUrl(candidate.path), { signal: controller.signal });
+                    if (!response.ok)
+                        throw new Error(`Day chunk returned ${response.status}`);
+                    const next = await adapter.readChunk(response, candidate);
+                    if (!controller.signal.aborted) {
+                        setStored((current) => current.key === key
+                            ? { ...current, chunks: { ...current.chunks, [candidate.id]: next },
+                                failedChunk: current.failedChunk === candidate.id ? undefined : current.failedChunk }
+                            : current);
+                    }
+                }
+                catch {
+                    if (!controller.signal.aborted && currentMissing) {
+                        setStored((current) => current.key === key ? { ...current, failedChunk: candidate.id } : current);
+                    }
+                }
+            })();
+        }
+        return () => controller.abort();
+    }, [active, adapter, chunks, descriptor, key, manifest, resolveAssetUrl]);
+    return {
+        manifest,
+        chunk,
+        chunkReady,
+        loading: active && !unavailable && !error && (!manifest || !chunkReady),
+        unavailable: Boolean(unavailable),
+        error,
+    };
+}

package/use-progressive-network-day.d.ts

@@ -0,0 +1,11 @@
+import type { NetworkDayChunk, NetworkDayChunkDescriptor, NetworkDayManifest } from '@motionstudies/core/domain/network';
+import type { DataUrlResolver } from './data-url.ts';
+export declare function verifiedNetworkDayChunk(response: Response, descriptor: NetworkDayChunkDescriptor): Promise<NetworkDayChunk>;
+export declare function useProgressiveNetworkDay(manifestFile: string, active: boolean, time: number, resolveAssetUrl: DataUrlResolver): {
+    manifest: NetworkDayManifest | undefined;
+    chunkReady: boolean;
+    loading: boolean;
+    unavailable: boolean;
+    error: boolean;
+    network: import("@motionstudies/core/domain/network").NetworkSnapshot | undefined;
+};

package/use-progressive-network-day.js

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { adjacentDayChunks, dayChunkForTime, networkSnapshotForDayChunk, } from '@motionstudies/core/domain/network-day';
+import { useProgressiveChunks } from './use-progressive-chunks.js';
+export async function verifiedNetworkDayChunk(response, descriptor) {
+    const bytes = await response.arrayBuffer();
+    if (descriptor.bytes !== undefined && bytes.byteLength !== descriptor.bytes) {
+        throw new Error(`Network day chunk ${descriptor.id} has an unexpected size`);
+    }
+    if (descriptor.sha256) {
+        const digest = await crypto.subtle.digest('SHA-256', bytes);
+        const actual = [...new Uint8Array(digest)]
+            .map((value) => value.toString(16).padStart(2, '0'))
+            .join('');
+        if (actual !== descriptor.sha256) {
+            throw new Error(`Network day chunk ${descriptor.id} failed its integrity check`);
+        }
+    }
+    return JSON.parse(new TextDecoder().decode(bytes));
+}
+const adapter = {
+    chunkForTime: dayChunkForTime,
+    adjacentChunks: adjacentDayChunks,
+    readChunk: verifiedNetworkDayChunk,
+};
+export function useProgressiveNetworkDay(manifestFile, active, time, resolveAssetUrl) {
+    const { chunk, ...state } = useProgressiveChunks(manifestFile, active, time, resolveAssetUrl, adapter);
+    const network = useMemo(() => state.manifest ? networkSnapshotForDayChunk(state.manifest, chunk) : undefined, [state.manifest, chunk]);
+    return { ...state, network };
+}

package/use-progressive-road-study.d.ts

@@ -0,0 +1,10 @@
+import { type NationalRoadStudyManifest } from '@motionstudies/core/domain/road-day';
+import type { DataUrlResolver } from './data-url.ts';
+export declare function useProgressiveRoadStudy(manifestFile: string, active: boolean, time: number, resolveAssetUrl: DataUrlResolver): {
+    manifest: NationalRoadStudyManifest | undefined;
+    chunkReady: boolean;
+    loading: boolean;
+    unavailable: boolean;
+    error: boolean;
+    snapshot: import("@motionstudies/core/domain/road-day").NationalRoadStudySnapshot | undefined;
+};

package/use-progressive-road-study.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { adjacentRoadChunks, roadChunkForTime, roadSnapshotForChunk, } from '@motionstudies/core/domain/road-day';
+import { useProgressiveChunks } from './use-progressive-chunks.js';
+const adapter = {
+    chunkForTime: roadChunkForTime,
+    adjacentChunks: adjacentRoadChunks,
+    readChunk: (response) => response.json(),
+    optional: true,
+};
+export function useProgressiveRoadStudy(manifestFile, active, time, resolveAssetUrl) {
+    const { chunk, ...state } = useProgressiveChunks(manifestFile, active, time, resolveAssetUrl, adapter);
+    const snapshot = useMemo(() => state.manifest ? roadSnapshotForChunk(state.manifest, chunk) : undefined, [state.manifest, chunk]);
+    return { ...state, snapshot };
+}

package/visual-theme.d.ts

@@ -0,0 +1,2 @@
+import type { VisualTheme } from '@motionstudies/core/theme';
+export declare function applyVisualTheme(theme: VisualTheme, root?: HTMLElement): void;

package/visual-theme.js

@@ -0,0 +1,12 @@
+export function applyVisualTheme(theme, root = document.documentElement) {
+    root.style.setProperty('--background', theme.background);
+    root.style.setProperty('--ink', theme.ink);
+    root.style.setProperty('--muted', theme.muted);
+    root.style.setProperty('--line', theme.line);
+    root.style.setProperty('--cyan', theme.primary);
+    root.style.setProperty('--pink', theme.secondary);
+    root.style.setProperty('--panel', theme.panel);
+    root.style.setProperty('--air', theme.air);
+    root.style.setProperty('--road-light', theme.roadLight);
+    root.style.setProperty('--road-heavy', theme.roadHeavy);
+}