@motionstudies/web 0.1.0-alpha.3 → 0.1.0-alpha.31

package/components/DotMatrixBoard.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { matrixPath } from './dot-matrix-font.js';
+function bounded(value, fallback, min, max) {
+    return Number.isFinite(value) ? Math.max(min, Math.min(max, Math.floor(value))) : fallback;
+}
+function MatrixText({ value, characters, align = 'left', preserveCase = false }) {
+    const patternId = useId();
+    const letters = Array.from(preserveCase ? value : value.toLocaleUpperCase());
+    const visible = letters.length > characters ? [...letters.slice(0, characters - 1), '…'] : letters;
+    const text = visible.join('');
+    const path = matrixPath(text);
+    const offset = align === 'right' ? (characters - visible.length) * 6 : 0;
+    return _jsxs("span", { className: "ms-matrix-text", title: value, children: [_jsx("span", { className: "ms-matrix-sr-only", children: value }), _jsxs("svg", { "aria-hidden": "true", viewBox: `0 0 ${characters * 6} 7`, preserveAspectRatio: align === 'right' ? 'xMaxYMid meet' : 'xMinYMid meet', children: [_jsx("defs", { children: _jsx("pattern", { id: patternId, width: "1", height: "1", patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: ".5", cy: ".5", r: ".36" }) }) }), _jsx("rect", { width: "100%", height: "7", fill: `url(#${patternId})`, className: "ms-matrix-text__unlit" }), path === undefined
+                        ? _jsx("text", { x: align === 'right' ? characters * 6 : 0, y: "6.2", textAnchor: align === 'right' ? 'end' : 'start', fontSize: "7", fontFamily: "ui-monospace, monospace", textLength: Math.max(1, visible.length * 6 - 1), lengthAdjust: "spacingAndGlyphs", fill: "currentColor", children: text })
+                        : _jsx("path", { transform: `translate(${offset},0)`, d: path, fill: "currentColor" })] })] });
+}
+/** The consumer owns row order, arrival estimates and freshness, as with SplitFlapBoard. */
+export function DotMatrixBoard({ label, columns, rows, lineCount = 6, minRowHeight = 34, loading = false, loadingMessage = 'Loading departures…', emptyMessage = 'No departures.', onSelectRow, selectedRowId, selectionColumn, className = '', style, variant = 'bus', heading, headingColumnSpan = 1, footerLabel, clockLabel }) {
+    const screen = useRef(null);
+    const boardId = useId();
+    const [size, setSize] = useState({ width: 640, height: 244 });
+    useEffect(() => {
+        const element = screen.current;
+        if (!element)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            const width = Math.floor(entry.contentRect.width);
+            const height = Math.floor(entry.contentRect.height);
+            setSize((previous) => previous.width === width && previous.height === height ? previous : { width, height });
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const count = lineCount === 'auto'
+        ? bounded(size.height / bounded(minRowHeight, 34, 20, 120), 6, 1, 30)
+        : bounded(lineCount, 6, 1, 30);
+    const rowHeight = size.height / count;
+    const weights = columns.map((column) => bounded(column.characters, 12, 1, 80));
+    const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+    const characterWidth = Math.min(15, Math.max(7, rowHeight * .45), Math.max(9, (size.width - columns.length * 16) / Math.max(1, totalWeight)));
+    const minimums = columns.map((column) => bounded(column.minCharacters ?? 3, 3, 1, 40) * characterWidth + 16);
+    const totalMinimum = minimums.reduce((sum, width) => sum + width, 0);
+    const widths = columns.map((_, index) => size.width < totalMinimum
+        ? size.width * minimums[index] / totalMinimum
+        : minimums[index] + (size.width - totalMinimum) * weights[index] / totalWeight);
+    const empty = !loading && rows.length === 0;
+    const message = loading ? loadingMessage : empty ? emptyMessage : '';
+    const rail = variant === 'uk-rail';
+    const span = bounded(headingColumnSpan, 1, 1, Math.max(1, columns.length));
+    const capacity = (width) => bounded((width - 16) / characterWidth, 1, 1, 80);
+    const slots = [];
+    if (!loading && !empty) {
+        for (const row of rows) {
+            if (slots.length >= count)
+                break;
+            // Keep a departure and its detail together unless the board has only one slot.
+            if (row.note && count > 1 && slots.length === count - 1)
+                break;
+            slots.push({ row });
+            if (row.note && slots.length < count)
+                slots.push({ row, detail: true });
+        }
+    }
+    while (slots.length < count)
+        slots.push({});
+    return _jsxs("div", { className: `ms-dot-matrix-board ${className}`, style: { ...style, '--matrix-text-height': `${Math.max(0, Math.min(26, rowHeight - 8))}px` }, "data-variant": variant, "data-lines": count, "data-loading": loading || undefined, children: [_jsx("div", { className: "ms-dot-matrix-board__head", "aria-hidden": "true", children: columns.map((column, index) => {
+                    if (heading && index > 0 && index < span)
+                        return null;
+                    const width = heading && index === 0 ? widths.slice(0, span).reduce((sum, value) => sum + value, 0) : widths[index];
+                    const value = heading && index === 0 ? heading : column.label;
+                    return _jsx("span", { className: heading && index === 0 ? 'ms-dot-matrix-board__heading' : undefined, style: { width: `${size.width ? width / size.width * 100 : 0}%`, textAlign: column.align }, children: rail ? _jsx(MatrixText, { value: value, characters: capacity(width), align: column.align, preserveCase: true }) : value }, column.key);
+                }) }), _jsxs("div", { className: "ms-dot-matrix-board__screen", ref: screen, children: [_jsxs("table", { "aria-busy": loading, children: [_jsx("caption", { className: "ms-matrix-sr-only", children: label }), _jsx("colgroup", { children: columns.map((column, index) => _jsx("col", { style: { width: `${size.width ? widths[index] / size.width * 100 : 0}%` } }, column.key)) }), _jsx("thead", { className: "ms-matrix-sr-only", children: _jsx("tr", { children: columns.map((column) => _jsx("th", { scope: "col", children: column.label }, column.key)) }) }), _jsx("tbody", { children: slots.map(({ row, detail }, index) => {
+                                    const noteId = `${boardId}-note-${index}`;
+                                    if (detail && row)
+                                        return _jsx("tr", { className: "ms-dot-matrix-board__detail", "aria-hidden": "true", style: { height: `${100 / count}%` }, children: _jsx("td", { colSpan: columns.length, children: _jsx(MatrixText, { value: row.note, characters: capacity(size.width), preserveCase: rail }) }) }, `${row.id}-detail`);
+                                    return _jsx("tr", { "aria-hidden": !row || undefined, "data-tone": row?.tone, "data-selected": row && row.id === selectedRowId || undefined, style: { height: `${100 / count}%` }, children: columns.map((column, columnIndex) => {
+                                            const text = _jsx(MatrixText, { value: row ? row.cells[column.key] || '—' : '', characters: capacity(widths[columnIndex]), align: column.align, preserveCase: rail });
+                                            const selection = selectionColumn ? column.key === selectionColumn : columnIndex === 0;
+                                            return _jsxs("td", { children: [row && onSelectRow && selection
+                                                        ? _jsx("button", { type: "button", "aria-pressed": row.id === selectedRowId, "aria-describedby": row.note ? noteId : undefined, onClick: () => onSelectRow(row.id), children: text }) : text, row?.note && selection && _jsx("span", { className: "ms-matrix-sr-only", id: noteId, children: row.note })] }, column.key);
+                                        }) }, row?.id ?? `blank-${index}`);
+                                }) })] }), message && _jsx("div", { className: "ms-dot-matrix-board__message", role: "status", children: message })] }), (footerLabel || clockLabel) && _jsxs("div", { className: "ms-dot-matrix-board__footer", children: [footerLabel && _jsx(MatrixText, { value: footerLabel, characters: capacity(size.width * .6), preserveCase: rail }), clockLabel && _jsx("div", { className: "ms-dot-matrix-board__clock", children: _jsx(MatrixText, { value: clockLabel, characters: Math.max(1, Array.from(clockLabel).length), align: "right", preserveCase: rail }) })] })] });
+}

package/components/LazyButtonTooltips.d.ts

@@ -0,0 +1,2 @@
+/** Button help in its own Suspense boundary, so the application never waits for it. */
+export declare function LazyButtonTooltips(): import("react").JSX.Element;

package/components/LazyButtonTooltips.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+// Desktop button help is not needed for the first view; keep it out of the opening bundle.
+const ButtonTooltips = lazy(() => import('./ButtonTooltips.js').then((module) => ({ default: module.ButtonTooltips })));
+/** Button help in its own Suspense boundary, so the application never waits for it. */
+export function LazyButtonTooltips() {
+    return _jsx(Suspense, { fallback: null, children: _jsx(ButtonTooltips, {}) });
+}

package/components/NetworkVehicleHeroCard.d.ts

@@ -0,0 +1,13 @@
+import { type NetworkSnapshot, type NetworkTrain } from '@motionstudies/core/domain/network';
+import { type VehicleHeroCardProps } from './VehicleHeroCard.tsx';
+export interface NetworkVehicleHeroCardProps extends Omit<VehicleHeroCardProps, 'vehicle' | 'stops'> {
+    readonly snapshot: NetworkSnapshot;
+    readonly train: NetworkTrain;
+    readonly time: number;
+    /** Hide clock values for frequency-based or otherwise approximate motion. */
+    readonly showTimes?: boolean;
+    readonly atStopLabel?: string;
+    readonly formatTime?: (time: number) => string;
+}
+/** Resolve the selected ID against the current chunk; never reuse stale stop indexes. */
+export declare function NetworkVehicleHeroCard({ snapshot, train, time, showTimes, atStopLabel, formatTime, ...props }: NetworkVehicleHeroCardProps): import("react").JSX.Element;

package/components/NetworkVehicleHeroCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { formatServiceTime } from '@motionstudies/core/domain/network';
+import { vehicleCalls } from '@motionstudies/core/domain/vehicle-calls';
+import { VehicleHeroCard } from './VehicleHeroCard.js';
+/** Resolve the selected ID against the current chunk; never reuse stale stop indexes. */
+export function NetworkVehicleHeroCard({ snapshot, train, time, showTimes = true, atStopLabel = 'At stop', formatTime = (value) => formatServiceTime(value).slice(0, 5), ...props }) {
+    const current = useMemo(() => snapshot.trains.find(entry => entry.id === train.id), [snapshot, train.id]);
+    const calls = current ? vehicleCalls(snapshot, current, time) : [];
+    const identity = current ?? train;
+    return _jsx(VehicleHeroCard, { ...props, vehicle: { service: identity.route || identity.shortName,
+            destination: identity.headsign.trim() || undefined }, labels: { ...props.labels, ...(calls[0]?.atStop ? { nextStop: atStopLabel } : {}) }, stops: calls.map(call => ({ ...call, time: showTimes ? formatTime(call.time) : undefined })) });
+}

package/components/RailStationHeroCard.d.ts

@@ -0,0 +1,46 @@
+import type { DotMatrixRow } from './DotMatrixBoard.tsx';
+import { type TransportHeroOptions } from './TransportHeroBoard.tsx';
+export interface RailDeparture {
+    readonly id: string;
+    /** Consumer-formatted scheduled departure time. */
+    readonly time?: string;
+    readonly destination: string;
+    readonly platform?: string;
+    readonly platformSector?: string;
+    readonly service?: string;
+    readonly serviceCategory?: 'intercity' | 'international' | 'regional' | 'suburban';
+    /** Consumer-formatted expected time or status, e.g. "17:08" or "Cancelled". */
+    readonly expected?: string;
+    readonly via?: string;
+    readonly serviceNote?: string;
+    readonly tone?: DotMatrixRow['tone'];
+}
+declare const defaultLabels: {
+    station: string;
+    departures: string;
+    service: string;
+    time: string;
+    destination: string;
+    platform: string;
+    expected: string;
+    via: string;
+    loading: string;
+    empty: string;
+    retry: string;
+    detail: string;
+};
+export interface RailStationHeroCardProps extends Omit<TransportHeroOptions, 'presentation'> {
+    readonly presentation?: TransportHeroOptions['presentation'] | 'sbb';
+    readonly station: {
+        readonly name: string;
+        readonly code?: string;
+        readonly locality?: string;
+    };
+    readonly departures: readonly RailDeparture[];
+    readonly labels?: Partial<typeof defaultLabels>;
+    readonly onSelectDeparture?: (id: string) => void;
+    readonly selectedDepartureId?: string;
+}
+/** Station identity with time, destination, platform, expected status and service details. */
+export declare function RailStationHeroCard({ station, departures, labels, presentation, lineCount, boardHeight, minRowHeight, clockLabel, footerLabel, note, loading, error, onRetry, onSelectDeparture, selectedDepartureId, className }: RailStationHeroCardProps): import("react").JSX.Element;
+export {};

package/components/RailStationHeroCard.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { TransportHeroBoard } from './TransportHeroBoard.js';
+import { SbbDepartureBoard } from './SbbDepartureBoard.js';
+const defaultLabels = { station: 'Rail station', departures: 'Departures', service: 'Train', time: 'Time', destination: 'Destination', platform: 'Plat', expected: 'Expt',
+    via: 'via', loading: 'Loading rail departures…', empty: 'No trains expected.', retry: 'Retry', detail: 'Information' };
+/** Station identity with time, destination, platform, expected status and service details. */
+export function RailStationHeroCard({ station, departures, labels, presentation = 'uk-rail', lineCount = 8, boardHeight = 400, minRowHeight, clockLabel, footerLabel, note, loading, error, onRetry, onSelectDeparture, selectedDepartureId, className = '' }) {
+    const titleId = useId();
+    const sbb = presentation === 'sbb';
+    const copy = { ...defaultLabels, ...(sbb ? { platform: 'Platform' } : {}), ...labels };
+    return _jsxs("section", { className: `ms-rail-station-hero ${className}`, "data-presentation": presentation, "aria-labelledby": titleId, children: [_jsxs("div", { className: "ms-rail-station-hero__masthead", children: [_jsxs("span", { children: [copy.station, station.locality ? ` / ${station.locality}` : ''] }), station.code && _jsx("strong", { children: station.code })] }), _jsxs("div", { className: "ms-rail-station-hero__identity", children: [_jsx("span", { "aria-hidden": "true", children: sbb ? _jsxs("svg", { viewBox: "0 0 40 32", children: [_jsx("rect", { x: "10", y: "3", width: "20", height: "22", rx: "4" }), _jsx("path", { d: "M10 15h20M15 25l-4 5m14-5 4 5" }), _jsx("circle", { cx: "15", cy: "20", r: "1" }), _jsx("circle", { cx: "25", cy: "20", r: "1" })] }) : _jsx("svg", { viewBox: "0 0 40 32", children: _jsx("path", { d: "M3 10h31L23 3M37 22H6l11 7M10 16h20" }) }) }), _jsx("h2", { id: titleId, children: station.name })] }), sbb ? error ? _jsxs("div", { className: "ms-transport-hero__error", role: "status", children: [error, onRetry && _jsx("button", { type: "button", onClick: onRetry, children: copy.retry })] })
+                : _jsx(SbbDepartureBoard, { label: `${station.name} ${copy.departures}`, departures: departures, labels: copy, lineCount: lineCount, height: boardHeight, minRowHeight: minRowHeight, loading: loading, clockLabel: clockLabel, footerLabel: footerLabel, onSelectDeparture: onSelectDeparture, selectedDepartureId: selectedDepartureId })
+                : _jsx(TransportHeroBoard, { label: `${station.name} ${copy.departures}`, presentation: presentation, boardHeight: boardHeight, heading: copy.departures, headingColumnSpan: 2, columns: [{ key: 'time', label: copy.time, characters: 5, minCharacters: 5 },
+                        { key: 'destination', label: copy.destination, characters: 24, minCharacters: 5 },
+                        { key: 'platform', label: copy.platform, characters: 3, minCharacters: 2, align: 'right' },
+                        { key: 'expected', label: copy.expected, characters: 9, minCharacters: 9, align: 'right' }], rows: departures.map((entry) => ({ id: entry.id, tone: entry.tone,
+                        note: [entry.via ? `${copy.via} ${entry.via}` : '', entry.serviceNote].filter(Boolean).join(' · ') || undefined,
+                        cells: { time: entry.time, destination: entry.destination, platform: entry.platform, expected: entry.expected } })), lineCount: lineCount, minRowHeight: minRowHeight, clockLabel: clockLabel, footerLabel: footerLabel, loading: loading, loadingMessage: copy.loading, emptyMessage: copy.empty, error: error, onRetry: onRetry, retryLabel: copy.retry, detailLabel: copy.detail, onSelectRow: onSelectDeparture, selectedRowId: selectedDepartureId, selectionColumn: "destination" }), _jsx("div", { className: "ms-transport-hero__note", children: note })] });
+}

package/components/SbbDepartureBoard.d.ts

@@ -0,0 +1,26 @@
+import type { RailDeparture } from './RailStationHeroCard.tsx';
+interface SbbDepartureBoardProps {
+    readonly label: string;
+    readonly departures: readonly RailDeparture[];
+    readonly labels: {
+        departures: string;
+        service: string;
+        time: string;
+        destination: string;
+        platform: string;
+        via: string;
+        loading: string;
+        empty: string;
+    };
+    readonly lineCount: number | 'auto';
+    readonly height: number;
+    readonly minRowHeight?: number;
+    readonly loading?: boolean;
+    readonly clockLabel?: string;
+    readonly footerLabel?: string;
+    readonly onSelectDeparture?: (id: string) => void;
+    readonly selectedDepartureId?: string;
+}
+/** A typographic station board; the surrounding rail hero owns identity and errors. */
+export declare function SbbDepartureBoard({ label, departures, labels, lineCount, height, minRowHeight, loading, clockLabel, footerLabel, onSelectDeparture, selectedDepartureId }: SbbDepartureBoardProps): import("react").JSX.Element;
+export {};

package/components/SbbDepartureBoard.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/** A typographic station board; the surrounding rail hero owns identity and errors. */
+export function SbbDepartureBoard({ label, departures, labels, lineCount, height, minRowHeight = 64, loading, clockLabel, footerLabel, onSelectDeparture, selectedDepartureId }) {
+    const body = useRef(null);
+    const [availableHeight, setAvailableHeight] = useState(300);
+    useEffect(() => {
+        const element = body.current;
+        if (!element)
+            return;
+        const observer = new ResizeObserver(([entry]) => setAvailableHeight(Math.floor(entry.contentRect.height)));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const targetHeight = Number.isFinite(minRowHeight) ? Math.max(32, Math.min(120, minRowHeight)) : 64;
+    const requested = lineCount === 'auto' ? Math.floor(availableHeight / targetHeight) : lineCount;
+    const count = Number.isFinite(requested) ? Math.max(1, Math.min(30, Math.floor(requested))) : 6;
+    const rowHeight = availableHeight / count;
+    const message = loading ? labels.loading : departures.length === 0 ? labels.empty : undefined;
+    return _jsxs("div", { className: "ms-sbb-board", "data-lines": count, style: { height: Number.isFinite(height) ? Math.max(140, height) : 400,
+            '--sbb-row-count': count, '--sbb-font-size': `${Math.max(8, Math.min(24, rowHeight * .38))}px`,
+            '--sbb-detail-size': `${Math.max(7, Math.min(13, rowHeight * .22))}px` }, children: [_jsxs("div", { className: "ms-sbb-board__title", children: [_jsx("strong", { children: labels.departures }), clockLabel && _jsx("span", { className: "ms-sbb-board__clock", children: clockLabel })] }), _jsxs("div", { className: "ms-sbb-board__table", role: "table", "aria-label": label, "aria-busy": loading || false, children: [_jsx("div", { role: "rowgroup", children: _jsx("div", { className: "ms-sbb-board__columns", role: "row", children: [labels.service, labels.time, labels.destination, labels.platform].map((text, index) => _jsx("div", { role: "columnheader", children: text }, index)) }) }), _jsxs("div", { className: "ms-sbb-board__body", ref: body, children: [_jsx("div", { className: "ms-sbb-board__rows", role: "rowgroup", children: Array.from({ length: count }, (_, index) => {
+                                    const entry = message ? undefined : departures[index];
+                                    const details = entry ? [entry.via ? `${labels.via} ${entry.via}` : '', entry.serviceNote].filter(Boolean).join(' · ') : '';
+                                    return _jsxs("div", { className: "ms-sbb-board__row", role: "row", "aria-hidden": !entry || undefined, "data-tone": entry?.tone, "data-selected": entry && selectedDepartureId === entry.id || undefined, children: [_jsx("div", { role: "cell", children: _jsx("span", { className: "ms-sbb-board__service", "data-category": entry?.serviceCategory, title: entry?.service, children: entry ? entry.service || '—' : '' }) }), _jsxs("div", { role: "cell", children: [_jsx("span", { className: "ms-sbb-board__time", children: entry ? entry.time || '—' : '' }), entry?.expected && _jsx("span", { className: "ms-sbb-board__expected", title: entry.expected, children: entry.expected })] }), _jsx("div", { role: "cell", children: entry && onSelectDeparture
+                                                    ? _jsxs("button", { type: "button", "aria-pressed": selectedDepartureId === entry.id, onClick: () => onSelectDeparture(entry.id), title: entry.destination, children: [_jsx("span", { className: "ms-sbb-board__destination", children: entry.destination }), details && _jsx("span", { className: "ms-sbb-board__details", title: details, children: details })] })
+                                                    : _jsxs(_Fragment, { children: [_jsx("span", { className: "ms-sbb-board__destination", title: entry?.destination, children: entry?.destination }), details && _jsx("span", { className: "ms-sbb-board__details", title: details, children: details })] }) }), _jsxs("div", { role: "cell", children: [_jsx("strong", { className: "ms-sbb-board__platform", title: entry?.platform, children: entry ? entry.platform || '—' : '' }), entry?.platformSector && _jsx("span", { className: "ms-sbb-board__sector", title: entry.platformSector, children: entry.platformSector })] })] }, entry?.id ?? `blank-${index}`);
+                                }) }), message && _jsx("div", { className: "ms-sbb-board__message", role: "status", children: message })] })] }), footerLabel && _jsx("div", { className: "ms-sbb-board__footer", children: footerLabel })] });
+}

package/components/SplitFlapBoard.d.ts

@@ -0,0 +1,25 @@
+export interface SplitFlapColumn {
+    readonly key: string;
+    readonly label: string;
+    /** Fixed number of flaps. Full values remain available to assistive technology. */
+    readonly characters: number;
+}
+export interface SplitFlapRow {
+    readonly id: string;
+    readonly cells: Readonly<Record<string, string | undefined>>;
+    readonly tone?: 'neutral' | 'accent' | 'warning';
+}
+export interface SplitFlapBoardProps {
+    readonly label: string;
+    readonly columns: readonly SplitFlapColumn[];
+    readonly rows: readonly SplitFlapRow[];
+    readonly emptyMessage?: string;
+    readonly loading?: boolean;
+    readonly loadingMessage?: string;
+    readonly loadingRows?: number;
+    readonly onSelectRow?: (id: string) => void;
+    readonly selectedRowId?: string;
+    readonly selectionColumn?: string;
+}
+/** Transport-neutral display: consumers own ordering, time formatting and data provenance. */
+export declare function SplitFlapBoard({ label, columns, rows, emptyMessage, loading, loadingMessage, loadingRows, onSelectRow, selectedRowId, selectionColumn }: SplitFlapBoardProps): import("react").JSX.Element;

package/components/SplitFlapBoard.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+function flapCount(characters) {
+    return Math.max(1, Math.min(40, Math.floor(characters) || 1));
+}
+/** Keep the message in the widest display column, wrapping without losing localized text. */
+function emptyBoardRows(message, columns) {
+    const column = columns.reduce((widest, next) => !widest || flapCount(next.characters) > flapCount(widest.characters) ? next : widest, undefined);
+    if (!column)
+        return [];
+    const width = flapCount(column.characters);
+    const lines = [];
+    let line = [];
+    for (const word of message.toLocaleUpperCase().trim().split(/\s+/u)) {
+        const letters = Array.from(word);
+        if (line.length && line.length + 1 + letters.length > width) {
+            lines.push(line.join(''));
+            line = [];
+        }
+        while (letters.length > width)
+            lines.push(letters.splice(0, width).join(''));
+        if (line.length && letters.length)
+            line.push(' ');
+        line.push(...letters);
+    }
+    if (line.length)
+        lines.push(line.join(''));
+    return lines.map((text, index) => ({ id: `empty-${index}`, cells: { [column.key]: text } }));
+}
+function FlapText({ value, characters, offset = 0 }) {
+    const count = flapCount(characters);
+    const letters = Array.from(value.toLocaleUpperCase());
+    const visible = letters.length > count ? [...letters.slice(0, count - 1), '…'] : letters;
+    return _jsxs("span", { className: "ms-flap-text", title: value, children: [_jsx("span", { className: "ms-board-sr-only", children: value }), _jsx("span", { className: "ms-flap-text__tiles", "aria-hidden": "true", children: Array.from({ length: count }, (_, index) => {
+                    const character = visible[index] ?? ' ';
+                    const phase = index + offset;
+                    return _jsx("span", { className: "ms-flap", style: {
+                            '--flap-delay': `${Math.min(phase * 18, 360)}ms`,
+                            '--flap-phase': `${-(phase % 8) * 240}ms`,
+                            '--flap-motion-phase': `${-((phase * 37) % 240)}ms`,
+                        }, children: _jsxs("span", { className: "ms-flap__face", children: [character === ' ' ? '\u00a0' : character, _jsx("span", { className: "ms-flap__drum" })] }) }, `${index}:${character}`);
+                }) })] });
+}
+/** Transport-neutral display: consumers own ordering, time formatting and data provenance. */
+export function SplitFlapBoard({ label, columns, rows, emptyMessage = 'No movements in this window.', loading = false, loadingMessage = 'Loading movements…', loadingRows = 5, onSelectRow, selectedRowId, selectionColumn }) {
+    const hintId = useId();
+    const empty = !loading && rows.length === 0;
+    const displayedRows = loading
+        ? Array.from({ length: Number.isFinite(loadingRows) ? Math.max(1, Math.min(20, Math.floor(loadingRows))) : 5 }, (_, index) => ({ id: `loading-${index}`, cells: {} }))
+        : empty ? emptyBoardRows(emptyMessage, columns) : rows;
+    return _jsxs("div", { className: "ms-split-flap-board", "data-loading": loading || undefined, "data-empty": empty || undefined, children: [_jsx("span", { className: "ms-board-sr-only", id: hintId, children: "Scroll horizontally to read all columns." }), _jsx("div", { className: "ms-split-flap-board__scroll", role: "region", "aria-label": label, "aria-describedby": hintId, "aria-busy": loading, tabIndex: 0, children: _jsxs("table", { className: "ms-split-flap-board__table", children: [_jsx("caption", { className: "ms-board-sr-only", children: label }), _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => _jsx("th", { scope: "col", children: column.label }, column.key)) }) }), _jsx("tbody", { "aria-hidden": loading || empty || undefined, children: displayedRows.map((row, rowIndex) => _jsx("tr", { "data-tone": row.tone ?? 'neutral', "data-selected": !loading && !empty && row.id === selectedRowId || undefined, children: columns.map((column, index) => {
+                                    const text = _jsx(FlapText, { value: loading ? ' ' : row.cells[column.key] || (empty ? ' ' : '—'), characters: column.characters, offset: rowIndex * 3 + index * 2 });
+                                    return _jsx("td", { children: !loading && !empty && onSelectRow && (selectionColumn ? column.key === selectionColumn : index === 0)
+                                            ? _jsx("button", { className: "ms-split-flap-board__select", type: "button", "aria-pressed": row.id === selectedRowId, onClick: () => onSelectRow(row.id), children: text })
+                                            : text }, column.key);
+                                }) }, row.id)) })] }) }), loading ? _jsx("p", { className: "ms-split-flap-board__loading", role: "status", children: loadingMessage })
+                : empty && _jsx("span", { className: "ms-board-sr-only", role: "status", children: emptyMessage })] });
+}

package/components/StudyTimeline.d.ts

@@ -0,0 +1,25 @@
+import { type TimelineBin } from '@motionstudies/core/timeline';
+export interface StudyTimelineProps {
+    bins: readonly TimelineBin[];
+    windowStart: number;
+    windowEnd: number;
+    time: number;
+    onSeek: (time: number) => void;
+    label: string;
+    ariaLabel?: string;
+    description?: string;
+    variant?: 'bars' | 'line';
+    step?: number;
+    maximum?: number;
+    disabled?: boolean;
+    formatTime?: (time: number) => string;
+    formatValue?: (value: number) => string;
+    missingLabel?: string;
+    emptyLabel?: string;
+    scaleLabel?: string;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
+    className?: string;
+}
+/** Controlled chart and scrubber. Playback, loading and date/timezone policy belong to the study. */
+export declare function StudyTimeline({ bins, windowStart, windowEnd, time, onSeek, label, ariaLabel, description, variant, step, maximum, disabled, formatTime, formatValue, missingLabel, emptyLabel, scaleLabel, onScrubStart, onScrubEnd, className }: StudyTimelineProps): import("react").JSX.Element;

package/components/StudyTimeline.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import { TimelineScrubber } from './TimelineScrubber.js';
+import { createTimelineModel, formatTimelineTime, timelineBinAt, timelinePosition, timelineTime } from '@motionstudies/core/timeline';
+const formatCount = (value) => value.toLocaleString();
+/** Controlled chart and scrubber. Playback, loading and date/timezone policy belong to the study. */
+export function StudyTimeline({ bins, windowStart, windowEnd, time, onSeek, label, ariaLabel = label, description, variant = 'bars', step = 1, maximum, disabled = false, formatTime = formatTimelineTime, formatValue = formatCount, missingLabel = 'No observation', emptyLabel = 'No observations in this window', scaleLabel = 'Scale', onScrubStart, onScrubEnd, className = '' }) {
+    const id = useId(), [hover, setHover] = useState();
+    const model = useMemo(() => createTimelineModel(bins, { start: windowStart, end: windowEnd }, maximum), [bins, windowStart, windowEnd, maximum]);
+    const value = Number(timelineTime(timelinePosition(time, model.window), model.window, step).toPrecision(12)), position = timelinePosition(value, model.window);
+    const active = timelineBinAt(model, value), inspected = timelineBinAt(model, hover ?? value);
+    const reading = (amount) => amount == null ? missingLabel : formatValue(amount);
+    return _jsxs("div", { className: `ms-study-timeline ${className}`, "data-variant": variant, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "ms-study-timeline__heading", children: [_jsx("span", { id: `${id}-label`, children: label }), _jsxs("span", { className: "ms-study-timeline__reading", children: [formatTime(hover ?? value), " \u00B7 ", reading(inspected?.value)] })] }), _jsx(TimelineScrubber, { className: "ms-study-timeline__plot", windowStart: windowStart, windowEnd: windowEnd, time: value, onSeek: onSeek, step: step, disabled: disabled, ariaLabel: ariaLabel, describedBy: description ? `${id}-description` : undefined, ariaValueText: `${formatTime(value)} · ${reading(active?.value)}`, onScrubStart: onScrubStart, onScrubEnd: onScrubEnd, onInspect: setHover, children: _jsxs("div", { className: "ms-study-timeline__graph", "aria-hidden": "true", children: [_jsx("svg", { viewBox: "0 0 1000 100", preserveAspectRatio: "none", focusable: "false", children: variant === 'bars' ? model.bars.filter(bar => bar.value !== null && bar.value > 0).map(bar => _jsx("rect", { x: bar.x * 1000, y: (1 - bar.height) * 100, width: bar.width * 1000 * .8, height: bar.height * 100 }, bar.start)) : model.lines.map((line, i) => line.length === 1 ? _jsx("line", { x1: line[0].x * 1000 - 1, x2: line[0].x * 1000 + 1, y1: line[0].y * 100, y2: line[0].y * 100 }, i) : _jsx("polyline", { points: line.map(p => `${p.x * 1000},${p.y * 100}`).join(' ') }, i)) }), _jsx("span", { className: "ms-study-timeline__cursor", style: { left: `${position * 100}%` } }), !model.bars.some(bar => bar.value !== null) && _jsx("span", { className: "ms-study-timeline__empty", children: emptyLabel })] }) }), _jsx("div", { className: "ms-study-timeline__ticks", "aria-hidden": "true", children: [0, .25, .5, .75, 1].map(fraction => _jsx("span", { children: formatTime(windowStart + fraction * (windowEnd - windowStart)) }, fraction)) }), _jsxs("div", { className: "ms-study-timeline__footnote", children: [description && _jsx("span", { id: `${id}-description`, children: description }), _jsxs("span", { children: [scaleLabel, " 0\u2013", formatValue(model.maximum)] })] })] });
+}

package/components/TimelineScrubber.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export interface TimelineScrubberProps {
+    windowStart: number;
+    windowEnd: number;
+    time: number;
+    onSeek: (time: number) => void;
+    ariaLabel: string;
+    ariaValueText?: string;
+    describedBy?: string;
+    step?: number;
+    disabled?: boolean;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
+    onInspect?: (time: number | undefined) => void;
+    children?: ReactNode;
+    className?: string;
+}
+/** Shared visible rail and native range interaction; the caller owns the clock. */
+export declare function TimelineScrubber({ windowStart, windowEnd, time, onSeek, ariaLabel, ariaValueText, describedBy, step, disabled, onScrubStart, onScrubEnd, onInspect, children, className }: TimelineScrubberProps): import("react").JSX.Element;

package/components/TimelineScrubber.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { timelinePosition, timelineTime } from '@motionstudies/core/timeline';
+/** Shared visible rail and native range interaction; the caller owns the clock. */
+export function TimelineScrubber({ windowStart, windowEnd, time, onSeek, ariaLabel, ariaValueText, describedBy, step = 1, disabled = false, onScrubStart, onScrubEnd, onInspect, children, className = '' }) {
+    const id = useId(), scrubbing = useRef(false);
+    const window = { start: windowStart, end: windowEnd };
+    const position = timelinePosition(time, window);
+    const value = Number.isFinite(time) ? Math.max(windowStart, Math.min(windowEnd, time)) : windowStart;
+    if (!Number.isFinite(step) || step <= 0)
+        throw new Error('Timeline step must be positive');
+    const begin = () => { if (!disabled && !scrubbing.current) {
+        scrubbing.current = true;
+        onScrubStart?.();
+    } };
+    const finish = () => { if (scrubbing.current) {
+        scrubbing.current = false;
+        onScrubEnd?.();
+    } };
+    return _jsxs("div", { className: `ms-timeline-scrubber ${className}`, "data-disabled": disabled || undefined, style: { '--ms-timeline-position': `${position * 100}%` }, children: [children, _jsxs("div", { className: "ms-timeline-scrubber__rail", "aria-hidden": "true", children: [_jsx("span", { className: "ms-timeline-scrubber__fill" }), _jsx("span", { className: "ms-timeline-scrubber__thumb" })] }), _jsx("input", { id: id, type: "range", "aria-label": ariaLabel, "aria-valuetext": ariaValueText, "aria-describedby": describedBy, min: windowStart, max: windowEnd, step: step, value: value, disabled: disabled, onChange: event => onSeek(Number(event.target.value)), onPointerDown: event => { if (!disabled) {
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    begin();
+                } }, onPointerUp: finish, onPointerCancel: finish, onLostPointerCapture: finish, onBlur: () => { finish(); onInspect?.(undefined); }, onKeyDown: event => { if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key))
+                    begin(); }, onKeyUp: finish, onPointerMove: event => { if (disabled || event.pointerType === 'touch' || !onInspect)
+                    return; const box = event.currentTarget.getBoundingClientRect(); onInspect(timelineTime((event.clientX - box.left - 22) / Math.max(1, box.width - 44), window, step)); }, onPointerLeave: () => onInspect?.(undefined) })] });
+}

package/components/TransportHeroBoard.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { type DotMatrixBoardProps } from './DotMatrixBoard.tsx';
+/** Shared display options; each transport card supplies its own identity and columns. */
+export interface TransportHeroOptions {
+    readonly presentation?: 'dot-matrix' | 'uk-rail' | 'split-flap';
+    readonly lineCount?: number | 'auto';
+    readonly boardHeight?: number;
+    readonly minRowHeight?: number;
+    readonly clockLabel?: string;
+    readonly footerLabel?: string;
+    /** Source/freshness explanation owned by the consumer. */
+    readonly note: ReactNode;
+    readonly loading?: boolean;
+    readonly error?: string;
+    readonly onRetry?: () => void;
+    readonly className?: string;
+}
+interface TransportHeroBoardProps extends Omit<DotMatrixBoardProps, 'style' | 'className'> {
+    readonly presentation: NonNullable<TransportHeroOptions['presentation']>;
+    readonly boardHeight: number;
+    readonly error?: string;
+    readonly onRetry?: () => void;
+    readonly retryLabel: string;
+    readonly detailLabel: string;
+}
+/** Internal adapter: error handling and presentation switching shared by rail and bus. */
+export declare function TransportHeroBoard({ presentation, boardHeight, error, onRetry, retryLabel, detailLabel, ...board }: TransportHeroBoardProps): import("react").JSX.Element;
+export {};

package/components/TransportHeroBoard.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DotMatrixBoard } from './DotMatrixBoard.js';
+import { SplitFlapBoard } from './SplitFlapBoard.js';
+/** Internal adapter: error handling and presentation switching shared by rail and bus. */
+export function TransportHeroBoard({ presentation, boardHeight, error, onRetry, retryLabel, detailLabel, ...board }) {
+    const height = Number.isFinite(boardHeight) ? Math.max(140, boardHeight) : 360;
+    if (error)
+        return _jsxs("div", { className: "ms-transport-hero__error", role: "status", children: [error, onRetry && _jsx("button", { type: "button", onClick: onRetry, children: retryLabel })] });
+    if (presentation !== 'split-flap')
+        return _jsx(DotMatrixBoard, { ...board, variant: presentation === 'uk-rail' ? 'uk-rail' : 'bus', style: { height } });
+    const count = board.lineCount === 'auto' ? Math.floor((height - 60) / (board.minRowHeight ?? 34)) : board.lineCount ?? 6;
+    const limit = Number.isFinite(count) ? Math.max(1, Math.min(30, Math.floor(count))) : 6;
+    const hasDetails = board.rows.some((row) => row.note);
+    return _jsxs("div", { className: "ms-transport-hero__flap", style: { height }, children: [_jsx(SplitFlapBoard, { ...board, columns: hasDetails ? [...board.columns, { key: '__detail', label: detailLabel, characters: 32 }] : board.columns, rows: board.rows.slice(0, limit).map((row) => ({ ...row, cells: { ...row.cells, __detail: row.note } })), loadingRows: limit }), (board.footerLabel || board.clockLabel) && _jsxs("div", { className: "ms-transport-hero__flap-footer", children: [_jsx("span", { children: board.footerLabel }), _jsx("span", { children: board.clockLabel })] })] });
+}

package/components/VehicleHeroCard.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+export type VehicleHeroPresentation = 'uk-bus' | 'uk-rail' | 'yellow-bus' | 'sbb';
+export interface VehicleCallingPoint {
+    readonly id: string;
+    readonly name: string;
+    /** Consumer-formatted arrival time or estimate. Omit when unknown. */
+    readonly time?: string;
+    readonly platform?: string;
+    readonly detail?: string;
+    /** Set only for a confirmed destination, never just the end of a data chunk. */
+    readonly isDestination?: boolean;
+}
+declare const defaultLabels: {
+    bus: string;
+    rail: string;
+    destination: string;
+    destinationUnknown: string;
+    nextStop: string;
+    callingAt: string;
+    terminus: string;
+    platform: string;
+    loading: string;
+    empty: string;
+    retry: string;
+};
+export interface VehicleHeroCardProps {
+    readonly vehicle: {
+        readonly service: string;
+        readonly destination?: string;
+        readonly operator?: string;
+        readonly description?: string;
+    };
+    /** Remaining calls in journey order, starting with the next stop. The consumer owns playback/filtering. */
+    readonly stops: readonly VehicleCallingPoint[];
+    readonly presentation?: VehicleHeroPresentation;
+    /** Explicit source/freshness explanation. */
+    readonly note: ReactNode;
+    readonly status?: string;
+    readonly statusTone?: 'neutral' | 'warning';
+    readonly clockLabel?: string;
+    readonly labels?: Partial<typeof defaultLabels>;
+    readonly loading?: boolean;
+    readonly error?: string;
+    readonly onRetry?: () => void;
+    readonly onSelectStop?: (id: string) => void;
+    readonly selectedStopId?: string;
+    readonly className?: string;
+}
+/** An onboard view of one vehicle; no destination, timing or operational status is inferred. */
+export declare function VehicleHeroCard({ vehicle, stops, presentation, note, status, statusTone, clockLabel, labels, loading, error, onRetry, onSelectStop, selectedStopId, className }: VehicleHeroCardProps): import("react").JSX.Element;
+export {};

package/components/VehicleHeroCard.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+const defaultLabels = {
+    bus: 'Bus', rail: 'Train', destination: 'Destination', destinationUnknown: 'Destination unavailable',
+    nextStop: 'Next stop', callingAt: 'Then calling at', terminus: 'Destination', platform: 'Platform',
+    loading: 'Loading upcoming stops…', empty: 'No upcoming stops available.', retry: 'Retry',
+};
+/** An onboard view of one vehicle; no destination, timing or operational status is inferred. */
+export function VehicleHeroCard({ vehicle, stops, presentation = 'uk-rail', note, status, statusTone = 'neutral', clockLabel, labels, loading, error, onRetry, onSelectStop, selectedStopId, className = '' }) {
+    const titleId = useId();
+    const copy = { ...defaultLabels, ...labels };
+    const bus = presentation === 'uk-bus' || presentation === 'yellow-bus';
+    const [next, ...following] = stops;
+    const stopContent = (stop) => _jsxs(_Fragment, { children: [_jsxs("span", { className: "ms-vehicle-hero__stop-name", children: [stop.name, stop.isDestination && _jsx("small", { children: copy.terminus }), stop.detail && _jsx("span", { className: "ms-vehicle-hero__detail", children: stop.detail })] }), (stop.time || stop.platform) && _jsxs("span", { className: "ms-vehicle-hero__timing", children: [stop.time && _jsx("strong", { children: stop.time }), stop.platform && _jsxs("small", { children: [copy.platform, " ", stop.platform] })] })] });
+    const renderStop = (stop) => onSelectStop
+        ? _jsx("button", { type: "button", className: "ms-vehicle-hero__stop", "aria-pressed": selectedStopId === stop.id, onClick: () => onSelectStop(stop.id), children: stopContent(stop) })
+        : _jsx("div", { className: "ms-vehicle-hero__stop", children: stopContent(stop) });
+    return _jsxs("section", { className: `ms-vehicle-hero ${className}`, "data-presentation": presentation, "aria-labelledby": titleId, "aria-busy": loading || undefined, children: [_jsxs("div", { className: "ms-vehicle-hero__masthead", children: [_jsxs("span", { children: [bus ? copy.bus : copy.rail, vehicle.operator ? ` · ${vehicle.operator}` : ''] }), clockLabel && _jsx("span", { children: clockLabel })] }), _jsxs("div", { className: "ms-vehicle-hero__identity", children: [_jsx("strong", { className: "ms-vehicle-hero__service", children: vehicle.service }), _jsxs("div", { children: [_jsx("p", { className: "ms-vehicle-hero__eyebrow", children: copy.destination }), _jsx("h2", { id: titleId, children: vehicle.destination || copy.destinationUnknown }), vehicle.description && _jsx("p", { className: "ms-vehicle-hero__description", children: vehicle.description })] })] }), status && _jsx("div", { className: "ms-vehicle-hero__status", "data-tone": statusTone, children: status }), error ? _jsxs("div", { className: "ms-vehicle-hero__message", role: "status", children: [error, onRetry && _jsx("button", { type: "button", onClick: onRetry, children: copy.retry })] })
+                : loading ? _jsx("div", { className: "ms-vehicle-hero__message", role: "status", children: copy.loading })
+                    : next ? _jsxs("div", { className: "ms-vehicle-hero__journey", children: [_jsxs("div", { className: "ms-vehicle-hero__next", children: [_jsx("p", { className: "ms-vehicle-hero__eyebrow", children: copy.nextStop }), renderStop(next)] }), following.length > 0 && _jsxs("div", { className: "ms-vehicle-hero__following", children: [_jsx("p", { className: "ms-vehicle-hero__eyebrow", children: copy.callingAt }), _jsx("ol", { children: following.map((stop) => _jsx("li", { "data-terminus": stop.isDestination || undefined, children: renderStop(stop) }, stop.id)) })] })] }) : _jsx("div", { className: "ms-vehicle-hero__message", role: "status", children: copy.empty }), _jsx("div", { className: "ms-vehicle-hero__note", children: note })] });
+}