@motionstudies/web 0.1.0-alpha.6 → 0.1.0-alpha.8

package/README.md

@@ -5,7 +5,7 @@ Shared packages for the Motion Studies transport instrument. The source workspac
 - `@motionstudies/core`: transport contracts, indexing, interpolation and visual theme contracts; no browser or Node dependencies.
 - `@motionstudies/three`: `NationalNetworkScene`, `HubPulseScene`, `StationFlowScene`, camera framing and label-mode contracts. React, React Three Fiber and Three.js are peers; rendering internals are not public subpaths.
 - `@motionstudies/web`: picker, button tooltips, theme application, mounting, progressive loaders, observed operations and recording. Import `tokens.css` and `mobile-picker.css` for isolated widgets. `shell.css` is an optional full-page study shell scoped to `.motion-study`; `mountMotionStudy` applies that class. Fonts and edition layouts belong to consumers.
-- `@motionstudies/data`: Node-only GTFS readers, network chunking, merging and station ranking. ZIP reading requires `unzip` on the host. Source selection, provenance overrides and compilation commands belong to each edition.
+- `@motionstudies/data`: Node-only GTFS readers, ADS-B heatmap compilation, air endpoint enrichment, network chunking, merging and station ranking. ZIP reading requires `unzip` on the host. Source selection, provenance overrides and compilation commands belong to each edition.
 
 ```tsx
 import { MobilePicker } from '@motionstudies/web/components/MobilePicker'
@@ -76,6 +76,86 @@ Pass `labels` for edition translations, `loading`, or a localized `error` and `o
 
 For a custom rail or transport board, import `SplitFlapBoard` from `@motionstudies/web/components/SplitFlapBoard` and `@motionstudies/web/split-flap-board.css`. Supply `columns` (`key`, `label`, `characters`) and `rows` (`id`, `cells`, optional `tone`). Cell text longer than its flap count is visually ellipsized, with the full value retained for assistive technology and hover. `onSelectRow`, `selectedRowId` and `selectionColumn` optionally make one cell per row selectable.
 
+For bus stops and local transport, `DotMatrixBoard` accepts the same rows, selection callbacks, loading state and empty/loading messages. It uses an amber 5 × 7 LED alphabet and its own scoped stylesheet; the flip-board stylesheet is not required. Consumers can switch components without remapping their data.
+
+```tsx
+import { DotMatrixBoard } from '@motionstudies/web/components/DotMatrixBoard'
+import '@motionstudies/web/dot-matrix-board.css'
+
+<DotMatrixBoard
+  label="Bus departures"
+  columns={[
+    { key: 'route', label: 'Route', characters: 4, minCharacters: 4 },
+    { key: 'destination', label: 'Destination', characters: 24 },
+    { key: 'time', label: 'Due', characters: 6, minCharacters: 6, align: 'right' },
+  ]}
+  rows={[{ id: 'bus-71', cells: { route: '71', destination: 'City Centre', time: '2 min' } }]}
+  lineCount="auto"
+  style={{ height: 360 }}
+/>
+```
+
+`lineCount` defaults to six display slots and accepts 1–30 (values outside that range are clamped; non-finite values use six). Fixed counts keep all slots and scale their contents to the available height, so dense boards need taller containers to remain readable. `"auto"` observes the actual container and fits 1–30 rows at a target `minRowHeight` of 34px. The default board height is 320px; use `style`, `className`, or `height: '100%'` inside a parent with a defined height. Unused slots stay blank; rows beyond the visible slots are omitted, without pagination or changes to consumer selection.
+
+For dot-matrix columns, `characters` is a width weight, while `minCharacters` reserves space before the remaining width is distributed. At very narrow widths all columns scale down. Long cell values are visually ellipsized, with their full original text available to assistive technology and on hover. Characters outside the bitmap alphabet (including accented names and non-Latin scripts) use SVG text as a visual fallback. `--matrix-ink` and `--matrix-unlit` customize the LEDs. Updates are immediate, with no flashing or scrolling animation. The **Bus boards** lab specimen exercises both presentations, height/width resizing, row counts, selection, long names, loading and empty states using synthetic timetable data.
+
+`variant="uk-rail"` gives the matrix a square black enclosure, mixed-case amber lettering, matrix column headings and horizontal display bands. Optional `heading` and `headingColumnSpan` replace the visual labels across the leading columns while preserving the individual accessible column headers. `footerLabel` and `clockLabel` add a matrix footer; the consumer owns clock formatting and updates. No live clock or pagination is inferred. `DotMatrixRow.note` adds a detail line and an accessible description on the selection button. Details consume one display slot and stay with their departure: if only one slot remains, the next departure with a detail waits until there is room for both. A one-line board still shows its first departure, retaining its full note for assistive technology.
+
+## Rail, bus and airport hero cards
+
+Hero cards have separate transport-specific APIs and visual identities, with shared display components underneath:
+
+| Card | Identity | Departure fields | Default display |
+| --- | --- | --- | --- |
+| `RailStationHeroCard` | Station name, optional code and locality | Scheduled time, destination, platform, expected time/status, via/service note | UK rail matrix |
+| `BusStopHeroCard` | Stop name, optional stop code and locality | Route, destination, due estimate, optional via | Bus dot matrix |
+| `AirportHeroCard` | IATA code, airport name and city | Flight, time, destination/origin, gate, remarks, direction tabs | Split flap |
+
+Import the new cards from `@motionstudies/web/components/RailStationHeroCard` or `@motionstudies/web/components/BusStopHeroCard`, plus `@motionstudies/web/transport-hero-cards.css` (which includes both board styles). Airport imports and study-window behavior remain as documented above.
+
+```tsx
+<RailStationHeroCard
+  station={{ name: 'Bristol Temple Meads', code: 'BRI', locality: 'Bristol' }}
+  departures={[{
+    id: 'train-1', time: '17:15', destination: 'Portsmouth Harbour',
+    platform: '9', expected: '17:22', via: 'Eastleigh',
+  }]}
+  lineCount="auto"
+  boardHeight={400}
+  clockLabel="16:49:26"
+  footerLabel="Study timetable"
+  note="Synthetic timetable. Example times, not a live service."
+/>
+
+<BusStopHeroCard
+  stop={{ name: 'Anchor Road', code: 'A1', locality: 'Bristol' }}
+  departures={[{ id: 'bus-1', route: '71', destination: 'City Centre', due: '2 min' }]}
+  lineCount={6}
+  note="Synthetic timetable. Example estimates, not a live service."
+/>
+```
+
+Rail and bus consumers supply already ordered and formatted departures, including their own filtering, timezones and freshness. Missing times, platforms and statuses stay unknown rather than becoming “On time”. Both cards accept `presentation` (`'uk-rail'`, `'dot-matrix'`, `'split-flap'`), `lineCount`, `boardHeight` in pixels, `minRowHeight`, `loading`, `error`, `onRetry`, localized `labels`, and controlled `onSelectDeparture`/`selectedDepartureId`. A required `note` explains the source. The matrix fits its container; the split-flap alternative contains scrolling and places any service details in an Information column. Fixed line counts represent physical matrix lines; in split-flap mode they limit departure rows. The **Transport heroes** lab compares all three cards, switches the new cards' presentations, and exercises details, row fitting, updates, long names and failure states.
+
+The rail card additionally accepts `presentation="sbb"`: a blue-and-white typographic departure board with service badges, scheduled time, destination/via information and prominent track numbers. This layout follows the information hierarchy in [SBB's general display guide](https://www.sbb.ch/en/travel-information/stations/services-station/station-customer-information/general-display-board.html). It uses ordinary text, including accented and non-Latin names. `RailDeparture.service` supplies a train label such as `IC 1`; optional `serviceCategory` (`'intercity'`, `'international'`, `'regional'`, `'suburban'`) selects the badge treatment. `platformSector` supplies a separate sector label when known. Expected times or disruption messages appear below the scheduled time; absence of a message does not manufacture an “On time” assertion.
+
+For this layout, `lineCount` counts departures with their inline detail, and `"auto"` fits rows using a default target height of 64px. Dense fixed counts reduce type size; long values remain in the accessible text and hover titles. Labels stay consumer-owned, including the added `service` column label. The lab's **SBB departure board** option selects a synthetic Zürich HB example with German, French, Italian and English labels. Both new board styles are included in `transport-hero-cards.css`.
+
+At compact widths the SBB layout stacks the service badge under the time, preserving destination space and the separate track column. Rail and bus hero padding follows the card width rather than the viewport. The lab includes a 240–980px width slider and Compact/Mobile/Panel/Wide presets, plus a 180–640px board-height control. The size regression suite covers seven card widths, four board heights, fixed and automatic line counts, long destinations, selection during updates, mobile viewports and loading/error states in Chromium and WebKit. Prefer `lineCount="auto"` for small panels; high fixed line counts deliberately trade text size for density.
+
+```tsx
+<RailStationHeroCard
+  presentation="sbb"
+  station={{ name: 'Zürich HB' }}
+  labels={{ station: 'Bahnhof', departures: 'Abfahrt', service: 'Zug', time: 'Zeit', destination: 'Nach', platform: 'Gleis' }}
+  departures={[{ id: 'example-1', service: 'IC 1', serviceCategory: 'intercity',
+    time: '09:02', destination: 'Genève-Aéroport', via: 'Bern · Lausanne', platform: '32', platformSector: 'ABCD' }]}
+  lineCount="auto"
+  boardHeight={430}
+  note="Synthetic timetable · Example data."
+/>
+```
+
 The shared board also accepts `loading`, a localized `loadingMessage`, and `loadingRows` (default five). While loading, its decorative rows cycle through staggered letters and digits; they are hidden from assistive technology and cannot be selected. A single status message announces loading. When data arrives, characters flip through a short sequence and settle into their actual values; later changes animate only the changed characters. These CSS animations have no JavaScript timers and stop looping when loading ends or the board is removed. Reduced-motion users get static blank loading flaps and immediate final text. `AirportHeroCard` uses this shared loading treatment automatically. Use **Reload board** in the Airports lab to preview the complete loading-to-ready transition.
 
 Empty messages also appear on the flaps, in the widest column (the destination/origin column in airport cards), with the other columns blank. Longer localized messages wrap across display rows instead of being truncated. They settle with the same animation as flight details, and one hidden status announces the complete message to assistive technology. This also applies when the study clock moves into a window with no movements.
@@ -83,3 +163,19 @@ Empty messages also appear on the flaps, in the widest column (the destination/o
 Rail and other transport consumers can share the same time filtering through `movementBoardWindow(study, horizon)` and `movementsForBoard(entries, window, maxRows)` from `@motionstudies/core/domain/movement-board`. Format the returned numeric times when mapping them into `SplitFlapBoard` cells. The lab's rail board follows the same study clock and horizon as its airport card.
 
 `@motionstudies/data/air-endpoints` provides offline `enrichAirEndpoints` for existing air manifests, chunks and opening snapshots. Supply cached same-date global ADSB.lol heatmaps, an OurAirports CSV and the service date's local UTC offset. It associates only unambiguous low-altitude endpoints near a reference airport; cruise-only traces and uncertain routes stay unknown. Optional `AirEndpoint` origin/destination fields carry airport identity, observed boundary time and `observed-endpoint` evidence. `airportBoardMovements` maps full manifest entries to board rows without confusing playback chunk boundaries with flight endpoints. Input hashes and source/licence attribution are recorded in fixture metadata. These fields describe inferred observations, never flight schedules, gates or live status.
+
+## Optional live airport feed
+
+`AirportBoard` from `@motionstudies/web/components/AirportBoard` adds Study/Now controls around an existing `AirportHeroCard` configuration. Pass `studyCard` with the usual card props and `live={{ baseUrl, edition, airport }}` for the shared service. Import `airport-hero-card.css`. `labels` localizes the wrapper's control and availability messages. The lower-level `useAirportFeed` hook and core `domain/live-airport` contract are also public exports.
+
+Live timestamps are Unix seconds and use the airport's timezone for display, independently of recorded service time. The wrapper does not pass live flight IDs to the recorded scene's selection callback. The recorded card remains mounted while hidden; the edition still owns playback and can pause its study when appropriate. Only Now mode fetches flight boards; checking capabilities does not query the paid provider. Stale results carry their retrieval time and disappear when expired. Source data never falls back to synthetic or recorded flights under a live label.
+
+See [service architecture and operations](../docs/LIVE-AIRPORTS.md). The Worker is deployed separately; npm publication and edition adoption remain explicit release steps.
+
+## Shared recorded air compilation
+
+`@motionstudies/data/adsb-heatmap` consolidates the offline heatmap pipeline previously copied between editions. `ingestAdsbHeatmaps` reads cached gzip slices, decodes observations, filters transport-scale tracks, splits flights, and writes either an opening snapshot or an indexed day with overlapping chunks. Source hashes, chunk hashes and ODbL attribution accompany the output. It makes no network requests.
+
+The same `decodeAdsbHeatmap` now powers `enrichAirEndpoints`; endpoint inference retains full coordinate precision, while playback compilation retains the existing five-decimal coordinates. `transportAirTracks` and `chunkAirSnapshot` are also available for consumers that assemble their own pipeline. All functions have public TypeScript declarations and work in the packed Node package.
+
+Editions supply geographic bounds, service date, explicit UTC offset, optional timezone, input files and output paths. Flight IDs and chunk overlap retain the existing contracts. The default splits known callsign changes and gaps over 30 minutes. Set `splitTracks: false` only when reproducing a legacy opening snapshot with one ID per aircraft. See [adoption and compatibility](../docs/AIR-DATA.md).

package/components/AirportBoard.d.ts

@@ -0,0 +1,27 @@
+import { type AirportHeroCardProps } from './AirportHeroCard.tsx';
+declare const defaults: {
+    study: string;
+    now: string;
+    checking: string;
+    unavailable: string;
+    returnToStudy: string;
+    loading: string;
+    updated: string;
+    stale: string;
+    localTime: string;
+    scheduled: string;
+    revised: string;
+    note: string;
+};
+export interface AirportBoardProps {
+    readonly studyCard: AirportHeroCardProps;
+    readonly live: {
+        readonly baseUrl: string;
+        readonly edition: string;
+        readonly airport: string;
+    };
+    readonly labels?: Partial<typeof defaults>;
+}
+/** Optional live enhancement. Keeps the study clock and recorded flight selection separate. */
+export declare function AirportBoard({ studyCard, live, labels }: AirportBoardProps): import("react").JSX.Element;
+export {};

package/components/AirportBoard.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AirportHeroCard } from './AirportHeroCard.js';
+import { useAirportFeed } from '../use-airport-feed.js';
+import { useNowClock } from '../use-now-clock.js';
+const defaults = {
+    study: 'Study', now: 'Now', checking: 'Checking live availability…', unavailable: 'Live updates unavailable.',
+    returnToStudy: 'Return to study', loading: 'Loading current airport board…', updated: 'Retrieved', stale: 'Updates delayed',
+    localTime: 'Local time', scheduled: 'Scheduled', revised: 'Revised', note: 'AeroDataBox · Scheduled or revised times as supplied. Revisions may be estimated or actual. All times local. Coverage may be incomplete.',
+};
+/** Optional live enhancement. Keeps the study clock and recorded flight selection separate. */
+export function AirportBoard({ studyCard, live, labels }) {
+    const copy = { ...defaults, ...labels };
+    const clock = useNowClock((instant) => Math.floor(instant.getTime() / 1000));
+    const feed = useAirportFeed(live.baseUrl, live.edition, live.airport, clock.active);
+    const [selected, setSelected] = useState();
+    const response = feed.response, snapshot = response?.snapshot;
+    const now = clock.time ?? snapshot?.fetchedAt ?? 0;
+    const usable = snapshot && snapshot.expiresAt > now && ['fresh', 'stale'].includes(response.status);
+    const stale = usable && (response?.status === 'stale' || now >= snapshot.freshUntil);
+    const timeZone = snapshot?.airport.timeZone ?? 'UTC';
+    const formatter = new Intl.DateTimeFormat(undefined, { timeZone, hour: '2-digit', minute: '2-digit', hourCycle: 'h23' });
+    const formatTime = (time) => formatter.format(new Date(time * 1000));
+    const dateLabel = new Intl.DateTimeFormat(undefined, { timeZone, day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(now * 1000));
+    function stop() { clock.stop(); setSelected(undefined); }
+    const selectedFlight = usable ? [...snapshot.departures, ...snapshot.arrivals].find((flight) => flight.id === selected) : undefined;
+    return _jsxs("div", { className: "ms-airport-board", children: [_jsxs("div", { className: "ms-airport-board__modes", role: "group", "aria-label": `${copy.study} / ${copy.now}`, children: [_jsx("button", { type: "button", "aria-pressed": !clock.active, onClick: stop, children: copy.study }), _jsx("button", { type: "button", "aria-pressed": clock.active, disabled: !clock.active && !feed.available, onClick: clock.start, children: copy.now }), !clock.active && _jsx("span", { children: feed.checking ? copy.checking : !feed.available ? copy.unavailable : null })] }), _jsx("div", { hidden: clock.active, children: _jsx(AirportHeroCard, { ...studyCard }) }), clock.active && _jsx(_Fragment, { children: usable ? _jsxs(_Fragment, { children: [_jsx(AirportHeroCard, { airport: snapshot.airport, study: { time: now, windowStart: snapshot.windowStart, windowEnd: snapshot.windowEnd }, departures: snapshot.departures.map((f) => ({ ...f, time: f.revisedTime ?? f.scheduledTime, stand: f.gate })), arrivals: snapshot.arrivals.map((f) => ({ ...f, time: f.revisedTime ?? f.scheduledTime, stand: f.gate })), formatTime: formatTime, dateLabel: dateLabel, labels: { ...studyCard.labels, studyTime: copy.localTime }, maxRows: studyCard.maxRows, horizon: studyCard.horizon, selectedFlightId: selected, onSelectFlight: setSelected, note: _jsxs(_Fragment, { children: [_jsxs("span", { role: "status", children: [stale ? `${copy.stale} · ` : '', copy.updated, " ", formatTime(snapshot.fetchedAt), " \u00B7 "] }), copy.note] }) }, snapshot.airport.iata), selectedFlight && _jsxs("p", { className: "ms-airport-board__detail", children: [selectedFlight.service, " \u00B7 ", selectedFlight.place ?? '—', " \u00B7 ", selectedFlight.status ?? '—', selectedFlight.scheduledTime !== undefined && _jsxs(_Fragment, { children: [" \u00B7 ", copy.scheduled, " ", formatTime(selectedFlight.scheduledTime)] }), selectedFlight.revisedTime !== undefined && _jsxs(_Fragment, { children: [" \u00B7 ", copy.revised, " ", formatTime(selectedFlight.revisedTime)] })] })] }) : _jsxs("div", { className: "ms-airport-board__unavailable", role: "status", children: [_jsx("p", { children: feed.loading || feed.checking ? copy.loading : copy.unavailable }), _jsx("button", { type: "button", onClick: stop, children: copy.returnToStudy })] }) })] });
+}

package/components/AirportHeroCard.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
 import { formatServiceTime } from '@motionstudies/core/domain/network';
 import { movementBoardWindow, movementsForBoard } from '@motionstudies/core/domain/movement-board';
@@ -20,12 +20,12 @@ export function AirportHeroCard({ airport, departures, arrivals, note, study, ho
     const entries = movementsForBoard(direction === 'departures' ? departures : arrivals, window, maxRows);
     const rows = entries.map((entry) => ({ id: entry.id, tone: entry.tone,
         cells: { time: formatTime(entry.time), service: entry.service, place: entry.place, stand: entry.stand, status: entry.status } }));
-    return _jsxs("section", { className: `ms-airport-hero ${className}`, "aria-labelledby": titleId, children: [_jsxs("div", { className: "ms-airport-hero__masthead", children: [_jsxs("span", { className: "ms-airport-hero__eyebrow", children: [_jsx("span", { "aria-hidden": "true", children: "\u2197" }), " ", copy.airport, " / ", airport.city] }), _jsxs("span", { className: "ms-airport-hero__clock", children: [dateLabel && _jsxs(_Fragment, { children: [dateLabel, " \u00B7 "] }), copy.studyTime, " ", Number.isFinite(study.time) ? formatTime(study.time) : '—'] })] }), _jsxs("div", { className: "ms-airport-hero__identity", children: [_jsx("strong", { className: "ms-airport-hero__code", children: airport.iata }), _jsx("h2", { id: titleId, children: airport.name }), _jsx("span", { className: "ms-airport-hero__runway", "aria-hidden": "true" })] }), _jsx("div", { className: "ms-airport-hero__directions", role: "group", "aria-label": `${copy.departures} / ${copy.arrivals}`, children: ['departures', 'arrivals'].map((value) => _jsxs("button", { type: "button", "aria-pressed": direction === value, "aria-controls": boardId, onClick: () => setDirection(value), children: [_jsx("span", { "aria-hidden": "true", children: value === 'departures' ? '↗' : '↘' }), " ", copy[value]] }, value)) }), _jsx("p", { className: "ms-airport-hero__window", children: window ? `${copy.boardWindow} ${formatTime(window.start)}–${formatTime(window.end)}` : copy.outsideWindow }), _jsx("div", { id: boardId, children: error ? _jsxs("div", { className: "ms-airport-hero__message", role: "status", children: [error, onRetry && _jsx("button", { type: "button", onClick: onRetry, children: copy.retry })] })
+    return _jsxs("section", { className: `ms-airport-hero ${className}`, "aria-labelledby": titleId, children: [_jsxs("div", { className: "ms-airport-hero__masthead", children: [_jsxs("span", { className: "ms-airport-hero__eyebrow", children: [_jsx("span", { "aria-hidden": "true", children: "\u2197" }), " ", copy.airport, " / ", airport.city] }), dateLabel && _jsx("span", { className: "ms-airport-hero__date", children: dateLabel })] }), _jsxs("div", { className: "ms-airport-hero__identity", children: [_jsx("strong", { className: "ms-airport-hero__code", children: airport.iata }), _jsx("h2", { id: titleId, children: airport.name }), _jsxs("div", { className: "ms-airport-hero__clock", children: [_jsx("span", { className: "ms-airport-hero__clock-label", children: copy.studyTime }), ' ', _jsx("strong", { className: "ms-airport-hero__clock-value", children: Number.isFinite(study.time) ? formatTime(study.time) : '—' })] })] }), _jsxs("div", { className: "ms-airport-hero__board-header", children: [_jsx("div", { className: "ms-airport-hero__directions", role: "group", "aria-label": `${copy.departures} / ${copy.arrivals}`, children: ['departures', 'arrivals'].map((value) => _jsxs("button", { type: "button", "aria-pressed": direction === value, "aria-controls": boardId, onClick: () => setDirection(value), children: [_jsx("span", { "aria-hidden": "true", children: value === 'departures' ? '↗' : '↘' }), " ", copy[value]] }, value)) }), _jsx("p", { className: "ms-airport-hero__window", children: window ? `${copy.boardWindow} ${formatTime(window.start)}–${formatTime(window.end)}` : copy.outsideWindow })] }), _jsx("div", { id: boardId, children: error ? _jsxs("div", { className: "ms-airport-hero__message", role: "status", children: [error, onRetry && _jsx("button", { type: "button", onClick: onRetry, children: copy.retry })] })
                     : _jsx(SplitFlapBoard, { label: `${airport.iata} ${copy[direction]}`, columns: [
                             { key: 'time', label: copy.time, characters: 5 },
                             { key: 'service', label: copy.service, characters: 7 },
-                            { key: 'place', label: direction === 'departures' ? copy.destination : copy.origin, characters: 16 },
+                            { key: 'place', label: direction === 'departures' ? copy.destination : copy.origin, characters: 18 },
                             { key: 'stand', label: copy.stand, characters: 3 },
-                            { key: 'status', label: copy.status, characters: 10 },
+                            { key: 'status', label: copy.status, characters: 11 },
                         ], rows: rows, loading: loading, loadingMessage: copy.loading, loadingRows: rows.length || Math.min(maxRows, 5), emptyMessage: direction === 'departures' ? copy.emptyDepartures : copy.emptyArrivals, selectionColumn: "service", onSelectRow: onSelectFlight, selectedRowId: selectedFlightId }) }), _jsx("div", { className: "ms-airport-hero__note", children: note })] });
 }

package/components/BusStopHeroCard.d.ts

@@ -0,0 +1,37 @@
+import type { DotMatrixRow } from './DotMatrixBoard.tsx';
+import { type TransportHeroOptions } from './TransportHeroBoard.tsx';
+export interface BusDeparture {
+    readonly id: string;
+    readonly route: string;
+    readonly destination: string;
+    /** Consumer-formatted estimate or scheduled time; missing values stay unknown. */
+    readonly due?: string;
+    readonly via?: string;
+    readonly tone?: DotMatrixRow['tone'];
+}
+declare const defaultLabels: {
+    departures: string;
+    route: string;
+    destination: string;
+    due: string;
+    stop: string;
+    via: string;
+    loading: string;
+    empty: string;
+    retry: string;
+    detail: string;
+};
+export interface BusStopHeroCardProps extends TransportHeroOptions {
+    readonly stop: {
+        readonly name: string;
+        readonly code?: string;
+        readonly locality?: string;
+    };
+    readonly departures: readonly BusDeparture[];
+    readonly labels?: Partial<typeof defaultLabels>;
+    readonly onSelectDeparture?: (id: string) => void;
+    readonly selectedDepartureId?: string;
+}
+/** Local stop identity and route-first arrival estimates. The consumer owns ordering. */
+export declare function BusStopHeroCard({ stop, departures, labels, presentation, lineCount, boardHeight, minRowHeight, clockLabel, footerLabel, note, loading, error, onRetry, onSelectDeparture, selectedDepartureId, className }: BusStopHeroCardProps): import("react").JSX.Element;
+export {};

package/components/BusStopHeroCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { TransportHeroBoard } from './TransportHeroBoard.js';
+const defaultLabels = { departures: 'Bus departures from', route: 'Route', destination: 'Destination', due: 'Due', stop: 'Stop',
+    via: 'via', loading: 'Loading bus departures…', empty: 'No buses expected.', retry: 'Retry', detail: 'Information' };
+/** Local stop identity and route-first arrival estimates. The consumer owns ordering. */
+export function BusStopHeroCard({ stop, departures, labels, presentation = 'dot-matrix', lineCount = 6, boardHeight = 360, minRowHeight, clockLabel, footerLabel, note, loading, error, onRetry, onSelectDeparture, selectedDepartureId, className = '' }) {
+    const titleId = useId();
+    const copy = { ...defaultLabels, ...labels };
+    return _jsxs("section", { className: `ms-bus-stop-hero ${className}`, "aria-labelledby": titleId, children: [_jsxs("div", { className: "ms-bus-stop-hero__identity", children: [_jsx("span", { className: "ms-bus-stop-hero__symbol", "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 32 32", children: [_jsx("rect", { x: "7", y: "4", width: "18", height: "23", rx: "4" }), _jsx("path", { d: "M7 17h18M11 8h10M10 27v3m12-3v3" }), _jsx("circle", { cx: "11", cy: "22", r: "1" }), _jsx("circle", { cx: "21", cy: "22", r: "1" })] }) }), _jsxs("div", { children: [_jsx("p", { children: copy.departures }), _jsx("h2", { id: titleId, children: stop.name }), stop.locality && _jsx("p", { children: stop.locality })] }), stop.code && _jsxs("div", { className: "ms-bus-stop-hero__code", children: [_jsx("span", { children: copy.stop }), _jsx("strong", { children: stop.code })] })] }), _jsx(TransportHeroBoard, { label: `${stop.name} bus departures`, presentation: presentation, boardHeight: boardHeight, columns: [{ key: 'route', label: copy.route, characters: 4, minCharacters: 4 },
+                    { key: 'destination', label: copy.destination, characters: 24, minCharacters: 5 },
+                    { key: 'due', label: copy.due, characters: 6, minCharacters: 6, align: 'right' }], rows: departures.map((entry) => ({ id: entry.id, tone: entry.tone, note: entry.via ? `${copy.via} ${entry.via}` : undefined,
+                    cells: { route: entry.route, destination: entry.destination, due: entry.due } })), 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: "route" }), _jsx("div", { className: "ms-transport-hero__note", children: note })] });
+}

package/components/DotMatrixBoard.d.ts

@@ -0,0 +1,31 @@
+import { type CSSProperties } from 'react';
+import type { SplitFlapBoardProps, SplitFlapColumn, SplitFlapRow } from './SplitFlapBoard.tsx';
+export interface DotMatrixColumn extends SplitFlapColumn {
+    /** Space reserved before distributing the remaining width by `characters`. */
+    readonly minCharacters?: number;
+    readonly align?: 'left' | 'right';
+}
+export interface DotMatrixRow extends SplitFlapRow {
+    /** Optional detail line; also included in the accessible departure description. */
+    readonly note?: string;
+}
+export interface DotMatrixBoardProps extends Omit<SplitFlapBoardProps, 'columns' | 'rows' | 'loadingRows'> {
+    readonly columns: readonly DotMatrixColumn[];
+    readonly rows: readonly DotMatrixRow[];
+    readonly variant?: 'bus' | 'uk-rail';
+    /** Optional matrix heading spanning the first `headingColumnSpan` columns. */
+    readonly heading?: string;
+    readonly headingColumnSpan?: number;
+    readonly footerLabel?: string;
+    /** Consumer-formatted clock, updated by the consumer; never inferred as live. */
+    readonly clockLabel?: string;
+    /** Fixed display slots, or fit as many rows as possible into the board height. */
+    readonly lineCount?: number | 'auto';
+    /** Target minimum row height in auto mode, in CSS pixels. Default 34. */
+    readonly minRowHeight?: number;
+    readonly className?: string;
+    /** Set height here, or through CSS, to fit a panel. Default height is 320px. */
+    readonly style?: CSSProperties;
+}
+/** The consumer owns row order, arrival estimates and freshness, as with SplitFlapBoard. */
+export declare function DotMatrixBoard({ label, columns, rows, lineCount, minRowHeight, loading, loadingMessage, emptyMessage, onSelectRow, selectedRowId, selectionColumn, className, style, variant, heading, headingColumnSpan, footerLabel, clockLabel }: DotMatrixBoardProps): import("react").JSX.Element;

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/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/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/airport-hero-card.css

@@ -1,21 +1,42 @@
 @import './split-flap-board.css';
 
-.ms-airport-hero { --airport-accent: #edc96b; color: #f0ecdd; background: linear-gradient(125deg, #292d27, #191d19 65%); border: 1px solid #4b4d40; border-radius: 12px; padding: clamp(16px, 3vw, 30px); box-shadow: 0 20px 60px #0003; font-family: ui-sans-serif, system-ui, sans-serif; min-width: 0; }
-.ms-airport-hero__masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
+.ms-airport-hero { --airport-accent: #edc96b; container-type: inline-size; color: #f0ecdd; background: linear-gradient(125deg, #292d27, #191d19 65%); border: 1px solid #4b4d40; border-radius: 12px; padding: clamp(16px, 3vw, 30px); box-shadow: 0 20px 60px #0003; font-family: ui-sans-serif, system-ui, sans-serif; min-width: 0; }
+.ms-airport-hero__masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
 .ms-airport-hero__eyebrow { color: var(--airport-accent); text-transform: uppercase; font-size: 10px; letter-spacing: .18em; }
 .ms-airport-hero__eyebrow > span { font-size: 18px; margin-right: 6px; }
-.ms-airport-hero__clock { color: #bebfac; font: 12px/1.5 ui-monospace, monospace; }
-.ms-airport-hero__window { color: #bebfac; font: 11px/1.5 ui-monospace, monospace; margin: 0 0 12px; }
-.ms-airport-hero__identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 22px 0 26px; }
-.ms-airport-hero__code { color: var(--airport-accent); font-size: clamp(54px, 8vw, 88px); font-weight: 650; line-height: .95; letter-spacing: -.065em; }
-.ms-airport-hero__identity h2 { flex: 1; min-width: 140px; max-width: 300px; color: #f0ecdd; font: 400 clamp(20px, 3vw, 27px)/1.15 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
-.ms-airport-hero__runway { margin-left: auto; width: 54px; height: 62px; border-inline: 1px solid #797c6166; transform: skewY(-20deg); background: repeating-linear-gradient(to bottom, #b5b79266 0 8px, transparent 8px 16px) center / 2px 100% no-repeat; }
-.ms-airport-hero__directions { display: flex; gap: 22px; border-bottom: 1px solid #4b4d40; margin-bottom: 16px; }
-.ms-airport-hero__directions button { padding: 10px 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #b8baaa; font: 500 13px/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
+.ms-airport-hero__date { color: #bebfac; font: 11px/1.5 ui-monospace, monospace; letter-spacing: .06em; }
+.ms-airport-hero__identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; padding: 18px 0 20px; }
+.ms-airport-hero__code { color: var(--airport-accent); font-size: clamp(54px, 10cqi, 82px); font-weight: 650; line-height: .95; letter-spacing: -.065em; }
+.ms-airport-hero__identity h2 { max-width: 300px; color: #f0ecdd; font: 400 clamp(20px, 3.3cqi, 27px)/1.15 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
+.ms-airport-hero__clock { padding-left: 24px; border-left: 1px solid #797c6155; text-align: right; }
+.ms-airport-hero__clock-label { display: block; color: #bebfac; font-size: 10px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
+.ms-airport-hero__clock-value { display: block; margin-top: 4px; color: #f0ecdd; font: 400 42px/1.1 ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.06em; white-space: nowrap; }
+.ms-airport-hero__board-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid #4b4d40; margin-bottom: 14px; }
+.ms-airport-hero__directions { display: flex; gap: 22px; }
+.ms-airport-hero__directions button { min-height: 44px; padding: 10px 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #b8baaa; font: 500 13px/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
 .ms-airport-hero__directions button[aria-pressed='true'] { color: var(--airport-accent); border-bottom-color: var(--airport-accent); }
 .ms-airport-hero__directions button:hover { color: #f0ecdd; }
+.ms-airport-hero__window { color: #bebfac; font: 11px/1.5 ui-monospace, monospace; font-variant-numeric: tabular-nums; margin: 8px 0; }
 .ms-airport-hero button:focus-visible { outline: 2px solid var(--airport-accent); outline-offset: 4px; }
+.ms-airport-hero .ms-flap { font-size: 17px; }
+.ms-airport-hero .ms-split-flap-board__table th { color: #c4c3b0; font-size: 11px; letter-spacing: .12em; padding-bottom: 5px; }
 .ms-airport-hero__message { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 30px 0; margin: 0; font-size: 14px; color: #c5c7b6; }
 .ms-airport-hero__message button { background: #30352a; border: 1px solid #666b50; border-radius: 4px; color: var(--airport-accent); padding: 6px 12px; font: inherit; cursor: pointer; }
 .ms-airport-hero__note { color: #b8baaa; font-size: 11px; line-height: 1.6; margin-top: 14px; }
-@media (max-width: 480px) { .ms-airport-hero__runway { display: none; } .ms-airport-hero__directions { gap: 18px; } }
+@container (max-width: 600px) {
+  .ms-airport-hero__identity { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
+  .ms-airport-hero__clock { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-left: 0; border-top: 1px solid #797c6155; text-align: left; }
+  .ms-airport-hero__clock-value { margin-top: 0; font-size: 32px; }
+}
+@container (max-width: 440px) {
+  .ms-airport-hero__board-header { gap: 4px; }
+  .ms-airport-hero__directions { width: 100%; gap: 20px; }
+  .ms-airport-hero__window { margin: 6px 0 10px; }
+}
+.ms-airport-board__modes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: #b8baaa; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
+.ms-airport-board__modes button, .ms-airport-board__unavailable button { min-height: 44px; padding: 8px 16px; border: 1px solid #4b4d40; border-radius: 6px; color: #f0ecdd; background: #1d211c; font: inherit; cursor: pointer; }
+.ms-airport-board__modes button[aria-pressed='true'] { border-color: #edc96b; color: #edc96b; }
+.ms-airport-board__modes button:disabled { opacity: .5; cursor: default; }
+.ms-airport-board__modes button:focus-visible, .ms-airport-board__unavailable button:focus-visible { outline: 2px solid #edc96b; outline-offset: 3px; }
+.ms-airport-board__unavailable { padding: 28px; border: 1px solid #4b4d40; border-radius: 12px; color: #f0ecdd; background: #1d211c; font: 14px/1.6 ui-sans-serif, system-ui, sans-serif; }
+.ms-airport-board__detail { color: #b8baaa; font: 13px/1.6 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }

package/components/dot-matrix-board.css

@@ -0,0 +1,49 @@
+.ms-dot-matrix-board {
+  --matrix-ink: #ffb340;
+  --matrix-unlit: #3c2b1260;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 320px;
+  min-width: 0;
+  min-height: 0;
+  padding: 16px;
+  color: var(--matrix-ink);
+  background: linear-gradient(115deg, #222523, #111412 60%);
+  border: 1px solid #3c403b;
+  border-radius: 5px;
+  box-shadow: inset 0 1px #ffffff12, 0 8px 24px #0003;
+}
+.ms-dot-matrix-board * { box-sizing: border-box; }
+.ms-dot-matrix-board__head { display: flex; flex: 0 0 28px; color: #c7c9c1; font: 500 12px/20px ui-sans-serif, system-ui, sans-serif; }
+.ms-dot-matrix-board__head > span { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-dot-matrix-board__screen { flex: 1; position: relative; min-height: 0; min-width: 0; background: #080b09; box-shadow: inset 0 2px 8px #000; overflow: hidden; }
+.ms-dot-matrix-board table { table-layout: fixed; width: 100%; height: 100%; border-collapse: collapse; text-align: left; }
+.ms-dot-matrix-board td { padding: 0 8px; border-bottom: 1px solid #b4ad7d12; overflow: hidden; }
+.ms-dot-matrix-board tr:last-child td { border-bottom: 0; }
+.ms-matrix-text { display: block; position: relative; width: 100%; }
+.ms-matrix-text svg { display: block; width: 100%; height: var(--matrix-text-height); filter: drop-shadow(0 0 2px #ff9e292e); }
+.ms-matrix-text__unlit { color: var(--matrix-unlit); }
+.ms-matrix-text pattern circle { fill: var(--matrix-unlit); }
+.ms-dot-matrix-board [data-tone='accent'] td:last-child { color: #ffd895; }
+.ms-dot-matrix-board [data-tone='warning'] td:last-child { color: #ff8060; }
+.ms-dot-matrix-board [data-selected] { background: #ffb34016; box-shadow: inset 2px 0 var(--matrix-ink); }
+.ms-dot-matrix-board button { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
+.ms-dot-matrix-board button:hover { color: #ffe2ac; }
+.ms-dot-matrix-board button:focus-visible { outline: 2px solid var(--matrix-ink); outline-offset: 3px; }
+.ms-dot-matrix-board__message { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; overflow: auto; text-align: center; color: var(--matrix-ink); font: 15px/1.6 ui-monospace, monospace; background: #080b09e8; }
+.ms-dot-matrix-board__footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: 0 0 38px; min-width: 0; padding: 8px; }
+.ms-dot-matrix-board__footer > .ms-matrix-text { width: 60%; min-width: 0; }
+.ms-dot-matrix-board__footer svg { height: 18px; }
+.ms-dot-matrix-board__clock { width: 34%; max-width: 160px; margin-left: auto; min-width: 0; }
+.ms-dot-matrix-board__clock svg { height: 22px; }
+.ms-dot-matrix-board__detail td { padding-left: 20px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] { --matrix-ink: #f6cd46; --matrix-unlit: #51400c60; border-radius: 2px; border: 1px solid #333431; background: #10120f; box-shadow: inset 0 0 0 5px #191b18, 0 12px 32px #0004; padding: 20px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__head { flex-basis: 42px; align-items: center; color: var(--matrix-ink); background: #0a0c08; border-bottom: 5px solid #10120f; }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__head svg { height: 18px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__heading svg { height: 24px; }
+.ms-dot-matrix-board[data-variant='uk-rail'] td { border-color: #10120f; border-bottom-width: 3px; background: #c7a53208; }
+.ms-dot-matrix-board[data-variant='uk-rail'] [data-tone] td:last-child { color: var(--matrix-ink); }
+.ms-dot-matrix-board[data-variant='uk-rail'] .ms-dot-matrix-board__footer { color: var(--matrix-ink); background: #0a0c08; border-top: 5px solid #10120f; }
+.ms-matrix-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

package/components/dot-matrix-font.d.ts

@@ -0,0 +1,2 @@
+/** Unsupported scripts retain their original text through the SVG text fallback. */
+export declare function matrixPath(value: string): string | undefined;

package/components/dot-matrix-font.js

@@ -0,0 +1,61 @@
+// Original 5 × 7 bitmap alphabet. Each integer is one row, most significant bit first.
+const glyphs = {
+    a: [0, 0, 14, 1, 15, 17, 15], b: [16, 16, 30, 17, 17, 17, 30],
+    c: [0, 0, 14, 16, 16, 17, 14], d: [1, 1, 15, 17, 17, 17, 15],
+    e: [0, 0, 14, 17, 31, 16, 14], f: [6, 9, 8, 28, 8, 8, 8],
+    g: [0, 15, 17, 17, 15, 1, 14], h: [16, 16, 30, 17, 17, 17, 17],
+    i: [4, 0, 12, 4, 4, 4, 14], j: [2, 0, 6, 2, 2, 18, 12],
+    k: [16, 16, 18, 20, 24, 20, 18], l: [12, 4, 4, 4, 4, 4, 14],
+    m: [0, 0, 26, 21, 21, 21, 21], n: [0, 0, 30, 17, 17, 17, 17],
+    o: [0, 0, 14, 17, 17, 17, 14], p: [0, 0, 30, 17, 30, 16, 16],
+    q: [0, 0, 15, 17, 15, 1, 1], r: [0, 0, 22, 25, 16, 16, 16],
+    s: [0, 0, 15, 16, 14, 1, 30], t: [8, 8, 28, 8, 8, 9, 6],
+    u: [0, 0, 17, 17, 17, 19, 13], v: [0, 0, 17, 17, 17, 10, 4],
+    w: [0, 0, 17, 17, 21, 21, 10], x: [0, 0, 17, 10, 4, 10, 17],
+    y: [0, 0, 17, 17, 15, 1, 14], z: [0, 0, 31, 2, 4, 8, 31],
+    '·': [0, 0, 0, 4, 0, 0, 0],
+    ' ': [0, 0, 0, 0, 0, 0, 0],
+    A: [14, 17, 17, 31, 17, 17, 17], B: [30, 17, 17, 30, 17, 17, 30],
+    C: [14, 17, 16, 16, 16, 17, 14], D: [30, 17, 17, 17, 17, 17, 30],
+    E: [31, 16, 16, 30, 16, 16, 31], F: [31, 16, 16, 30, 16, 16, 16],
+    G: [14, 17, 16, 23, 17, 17, 15], H: [17, 17, 17, 31, 17, 17, 17],
+    I: [14, 4, 4, 4, 4, 4, 14], J: [7, 2, 2, 2, 2, 18, 12],
+    K: [17, 18, 20, 24, 20, 18, 17], L: [16, 16, 16, 16, 16, 16, 31],
+    M: [17, 27, 21, 21, 17, 17, 17], N: [17, 25, 21, 19, 17, 17, 17],
+    O: [14, 17, 17, 17, 17, 17, 14], P: [30, 17, 17, 30, 16, 16, 16],
+    Q: [14, 17, 17, 17, 21, 18, 13], R: [30, 17, 17, 30, 20, 18, 17],
+    S: [15, 16, 16, 14, 1, 1, 30], T: [31, 4, 4, 4, 4, 4, 4],
+    U: [17, 17, 17, 17, 17, 17, 14], V: [17, 17, 17, 17, 17, 10, 4],
+    W: [17, 17, 17, 21, 21, 21, 10], X: [17, 17, 10, 4, 10, 17, 17],
+    Y: [17, 17, 10, 4, 4, 4, 4], Z: [31, 1, 2, 4, 8, 16, 31],
+    '0': [14, 17, 19, 21, 25, 17, 14], '1': [4, 12, 4, 4, 4, 4, 14],
+    '2': [14, 17, 1, 2, 4, 8, 31], '3': [30, 1, 1, 14, 1, 1, 30],
+    '4': [2, 6, 10, 18, 31, 2, 2], '5': [31, 16, 16, 30, 1, 1, 30],
+    '6': [14, 16, 16, 30, 17, 17, 14], '7': [31, 1, 2, 4, 8, 8, 8],
+    '8': [14, 17, 17, 14, 17, 17, 14], '9': [14, 17, 17, 15, 1, 1, 14],
+    '-': [0, 0, 0, 31, 0, 0, 0], '—': [0, 0, 0, 31, 0, 0, 0],
+    '.': [0, 0, 0, 0, 0, 12, 12], '…': [0, 0, 0, 0, 0, 0, 21],
+    ':': [0, 12, 12, 0, 12, 12, 0], '/': [1, 1, 2, 4, 8, 16, 16],
+    '+': [0, 4, 4, 31, 4, 4, 0], '&': [12, 18, 20, 8, 21, 18, 13],
+    "'": [4, 4, 8, 0, 0, 0, 0], '’': [4, 4, 8, 0, 0, 0, 0],
+    '(': [2, 4, 8, 8, 8, 4, 2], ')': [8, 4, 2, 2, 2, 4, 8],
+    '!': [4, 4, 4, 4, 4, 0, 4], '?': [14, 17, 1, 2, 4, 0, 4],
+};
+/** Unsupported scripts retain their original text through the SVG text fallback. */
+export function matrixPath(value) {
+    let path = '';
+    for (const [index, character] of Array.from(value).entries()) {
+        const glyph = glyphs[character];
+        if (!glyph)
+            return undefined;
+        glyph.forEach((bits, y) => {
+            for (let x = 0; x < 5; x++) {
+                if (bits & (1 << (4 - x))) {
+                    const cx = index * 6 + x + .5;
+                    path += `M${cx - .36},${y + .5}a.36,.36 0 1,0 .72,0a.36,.36 0 1,0 -.72,0`;
+                }
+            }
+        });
+    }
+    return path;
+}

package/components/sbb-departure-board.css

@@ -0,0 +1,49 @@
+.ms-sbb-board { --sbb-blue: #122b65; display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; background: var(--sbb-blue); color: #fff; border: 1px solid #5873a1; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; container-type: inline-size; }
+.ms-sbb-board__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; flex-shrink: 0; }
+.ms-sbb-board__title strong { font-size: clamp(20px, 4cqi, 30px); font-weight: 500; }
+.ms-sbb-board__clock { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ms-sbb-board__table { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.ms-sbb-board__columns, .ms-sbb-board__row { display: grid; grid-template-columns: minmax(58px, .9fr) minmax(62px, .9fr) minmax(0, 4fr) minmax(48px, .6fr); column-gap: 14px; padding: 0 20px; }
+.ms-sbb-board__columns { padding-bottom: 8px; font-size: 11px; color: #ccd8ef; border-bottom: 1px solid #7790b8; }
+.ms-sbb-board__columns > :last-child { text-align: right; }
+.ms-sbb-board__columns > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-sbb-board__body { flex: 1; min-height: 0; position: relative; }
+.ms-sbb-board__rows { display: grid; grid-template-rows: repeat(var(--sbb-row-count), minmax(0, 1fr)); height: 100%; }
+.ms-sbb-board__row { border-bottom: 1px solid #637fa655; align-items: center; font-size: var(--sbb-font-size); line-height: 1.15; min-height: 0; }
+.ms-sbb-board__row:nth-child(even) { background: #ffffff05; }
+.ms-sbb-board__row > [role='cell'] { min-width: 0; max-height: 100%; overflow: hidden; }
+.ms-sbb-board__row > [role='cell']:last-child { text-align: right; }
+.ms-sbb-board__service { display: inline-block; max-width: 100%; padding: .12em .25em; font-size: .78em; font-weight: 700; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
+.ms-sbb-board__service[data-category='intercity'], .ms-sbb-board__service[data-category='international'] { background: #fff; color: #c90016; font-style: italic; }
+.ms-sbb-board__service[data-category='regional'] { border: 1px solid #fff; }
+.ms-sbb-board__service[data-category='suburban'] { background: #fff; color: #122b65; }
+.ms-sbb-board__time { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ms-sbb-board__destination, .ms-sbb-board__details, .ms-sbb-board__expected, .ms-sbb-board__sector, .ms-sbb-board__platform { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ms-sbb-board__destination { font-weight: 600; }
+.ms-sbb-board__details { margin-top: .2em; color: #d6e0f4; font-size: var(--sbb-detail-size); font-weight: 400; }
+.ms-sbb-board__expected, .ms-sbb-board__sector { margin-top: .2em; font-size: var(--sbb-detail-size); font-weight: 400; }
+.ms-sbb-board__row[data-tone='warning'] .ms-sbb-board__expected { color: #ffdc69; font-weight: 700; }
+.ms-sbb-board__platform { font-size: 1.2em; font-weight: 600; }
+.ms-sbb-board button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
+.ms-sbb-board button:hover .ms-sbb-board__destination { text-decoration: underline; }
+.ms-sbb-board button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
+.ms-sbb-board__row[data-selected] { background: #ffffff20; box-shadow: inset 3px 0 #fff; }
+.ms-sbb-board__message { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; overflow: auto; background: var(--sbb-blue); font-size: 14px; line-height: 1.5; text-align: center; }
+.ms-sbb-board__footer { padding: 10px 20px; font-size: 11px; color: #d6e0f4; flex-shrink: 0; }
+@container (max-width: 480px) {
+  .ms-sbb-board__columns, .ms-sbb-board__row { grid-template-columns: 44px 46px minmax(0, 1fr) 36px; column-gap: 8px; padding-left: 10px; padding-right: 10px; }
+  .ms-sbb-board__title { padding: 12px 10px; }
+  .ms-sbb-board__clock { font-size: 14px; }
+  .ms-sbb-board__row { font-size: min(var(--sbb-font-size), 15px); }
+}
+@container (max-width: 360px) {
+  .ms-sbb-board__columns, .ms-sbb-board__row { grid-template-columns: 46px minmax(0, 1fr) 32px; grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 8px; }
+  .ms-sbb-board__columns > :nth-child(1), .ms-sbb-board__row > :nth-child(1) { grid-column: 1; grid-row: 2; align-self: start; }
+  .ms-sbb-board__columns > :nth-child(2), .ms-sbb-board__row > :nth-child(2) { grid-column: 1; grid-row: 1; align-self: end; }
+  .ms-sbb-board__columns > :nth-child(3), .ms-sbb-board__row > :nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
+  .ms-sbb-board__columns > :nth-child(4), .ms-sbb-board__row > :nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
+  .ms-sbb-board__columns { align-items: center; font-size: 10px; line-height: 1.2; }
+  .ms-sbb-board__service { font-size: .7em; }
+  .ms-sbb-board__expected { font-size: min(var(--sbb-detail-size), 10px); margin-top: 0; }
+  .ms-sbb-board__title { flex-wrap: wrap; gap: 4px 12px; }
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionstudies/web",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.8",
   "private": false,
   "type": "module",
   "description": "Browser controls and loaders for Motion Studies.",
@@ -99,7 +99,34 @@
       "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"
   },
   "files": [
     "**/*.js",
@@ -114,7 +141,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@motionstudies/core": "0.1.0-alpha.6"
+    "@motionstudies/core": "0.1.0-alpha.8"
   },
   "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;
+}