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

package/README.md

@@ -25,8 +25,51 @@ Build release candidates with `npm run build:packages`. Distribution manifests a
 
 Source workspace manifests always stay private. `npm run check:release` builds public candidates, tests their packed consumer and records the tested tarball hashes; `npm run release:dry-run` inspects the publication without writing to npm. The manual main-branch `release.yml` workflow publishes those same tarballs with public access and provenance. See [release instructions](https://github.com/emmettl/motionstudies/blob/main/docs/RELEASING.md) for bootstrap-token and trusted-publisher setup. All four shared packages are MIT-licensed; each distribution includes `LICENSE`.
 
+## Selection labels
+
+`NationalNetworkScene` gives the selected station first label priority, followed by the selected route's terminal stops (including branches), then intermediate stops. Selected services use their own endpoints. Priority precedes retained labels and ordinary rank/tier admission; clearing selection restores edition ranking. This is built in for every consumer, including geographic and diagram layouts. Supply complete enabled infrastructure as `referenceSnapshot` to preserve endpoints through timetable gaps; its stop indexes need not match the active snapshot. See the [edition behaviour contract](https://github.com/emmettl/motionstudies/blob/main/docs/EDITIONS.md#selection-and-station-labels).
+
 ## Button help
 
 `mountMotionStudy` installs one shared tooltip surface. Independent consumers such as the lab can render `ButtonTooltips` from `@motionstudies/web/components/ButtonTooltips` once instead. Put concise, action-oriented help in each button’s `data-tooltip`; icon buttons fall back to their `aria-label`. An empty `data-tooltip` opts out. Avoid native `title` attributes on these buttons, which can also appear during touch interaction.
 
 Help appears after a short mouse hover or on keyboard focus when the primary pointer is fine and supports hover. Touch input suppresses it, including on hybrid devices. Escape, activation, scrolling and blur dismiss it. The tooltip stays inside the viewport, can itself be hovered, and temporarily extends `aria-describedby` without replacing existing descriptions. Copy and translations stay in the edition; rendering and input handling stay in this package. The Controls specimen and packed-consumer tests exercise this contract.
+
+## Airport heroes and split-flap boards
+
+`AirportHeroCard` provides an airport identity header and switchable departure/arrival boards. `SplitFlapBoard` is the underlying transport-neutral widget, also suitable for rail stations. Both use scoped package styles, semantic tables, full accessible cell values, keyboard-operable selection, contained horizontal scrolling and reduced-motion support. Only changed characters remount for the flap animation.
+
+```tsx
+import { AirportHeroCard } from '@motionstudies/web/components/AirportHeroCard'
+import '@motionstudies/web/airport-hero-card.css'
+
+<AirportHeroCard
+  key={airport.id}
+  airport={airport}
+  departures={departures}
+  arrivals={arrivals}
+  study={{ time, windowStart: metadata.windowStart, windowEnd: metadata.windowEnd }}
+  dateLabel={metadata.serviceDate}
+  note="Observed study · inferred directions; times are observations."
+  onSelectFlight={selectAirTrack}
+  selectedFlightId={selectedAirTrackId}
+/>
+```
+
+Entries have a stable `id`, a `service` label, and optional numeric `time`, `place`, `stand`, `status` and `tone` (`neutral`, `accent` or `warning`). Movement times and `study.time`, `windowStart`, and `windowEnd` must use the same study-relative seconds and service date. Do not parse display strings or normalize numeric times at midnight: an event after 24:00 retains its value above 86,400. `formatTime` optionally controls display formatting; the default uses the study's `formatServiceTime` helper. The header clock is derived directly from `study.time`, with no independent wall clock.
+
+The card sorts movements chronologically and shows up to eight rows per direction inside the intersection of the study bounds and a rolling window: ten minutes behind the playback clock and sixty minutes ahead, with inclusive endpoints. Override this with `horizon={{ lookBehindSeconds: 600, lookAheadSeconds: 3600 }}` and `maxRows`. Playback, backward seeking, changed study bounds and updated movement times all recalculate the rows. An out-of-study or invalid clock shows no movements; rows with missing or non-finite times are excluded because they cannot be placed in the window. Other unknown fields render as a dash. Labels include `studyTime`, `boardWindow` and `outsideWindow` for localization. Filtering does not infer operational statuses or clear the consumer's map selection when a row leaves the window.
+
+Consumers still own time coordinates, source interpretation and data loading. Supply movements for the displayed horizon, not just aircraft active at the current second, and use the selected study's bounds rather than an individual progressive chunk's bounds. Do not turn an approach-envelope association into a confirmed departure/arrival: unclassified tracks should remain outside these direction lists. Current `AirTrack` data does not supply scheduled times, routes or gates; leave those fields absent, use observation times only when clearly labelled, and explain any inference in the required `note`.
+
+Pass `labels` for edition translations, `loading`, or a localized `error` and `onRetry` for data states. The selected direction is local to each card; key the card by airport ID to reset it on selection changes. The Airports lab specimen exercises synthetic timetables, playback, scrubbing, study-window changes, incomplete observations, French labels, long destinations, updates and recovery. Edition adoption happens through their independently pinned package releases; adding this export does not update deployed studies.
+
+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.
+
+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.
+
+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.

package/components/AirportHeroCard.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { type MovementBoardStudy, type MovementBoardHorizon } from '@motionstudies/core/domain/movement-board';
+import { type SplitFlapRow } from './SplitFlapBoard.tsx';
+export interface AirportBoardEntry {
+    readonly id: string;
+    /** Movement time in the same seconds as the study clock. Untimed rows are omitted. */
+    readonly time?: number;
+    readonly service: string;
+    readonly place?: string;
+    readonly stand?: string;
+    readonly status?: string;
+    readonly tone?: SplitFlapRow['tone'];
+}
+declare const defaultLabels: {
+    airport: string;
+    departures: string;
+    arrivals: string;
+    time: string;
+    service: string;
+    destination: string;
+    origin: string;
+    stand: string;
+    status: string;
+    emptyDepartures: string;
+    emptyArrivals: string;
+    loading: string;
+    retry: string;
+    studyTime: string;
+    boardWindow: string;
+    outsideWindow: string;
+};
+export interface AirportHeroCardProps {
+    readonly airport: {
+        readonly iata: string;
+        readonly name: string;
+        readonly city: string;
+    };
+    readonly departures: readonly AirportBoardEntry[];
+    readonly arrivals: readonly AirportBoardEntry[];
+    /** Explain the source, study date and whether directions/times are inferred. */
+    readonly note: ReactNode;
+    readonly study: MovementBoardStudy;
+    readonly horizon?: MovementBoardHorizon;
+    readonly maxRows?: number;
+    readonly dateLabel?: string;
+    readonly formatTime?: (seconds: number) => string;
+    readonly labels?: Partial<typeof defaultLabels>;
+    readonly loading?: boolean;
+    readonly error?: string;
+    readonly onRetry?: () => void;
+    readonly onSelectFlight?: (id: string) => void;
+    readonly selectedFlightId?: string;
+    readonly initialDirection?: 'departures' | 'arrivals';
+    readonly className?: string;
+}
+/** Shared airport selection hero. Supply a key={airport.id} to reset direction on airport changes. */
+export declare function AirportHeroCard({ airport, departures, arrivals, note, study, horizon, maxRows, dateLabel, formatTime, labels, loading, error, onRetry, onSelectFlight, selectedFlightId, initialDirection, className }: AirportHeroCardProps): import("react").JSX.Element;
+export {};

package/components/AirportHeroCard.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, 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';
+import { SplitFlapBoard } from './SplitFlapBoard.js';
+const defaultLabels = {
+    airport: 'Airport', departures: 'Departures', arrivals: 'Arrivals',
+    time: 'Time', service: 'Flight', destination: 'To', origin: 'From', stand: 'Gate', status: 'Remarks',
+    emptyDepartures: 'No departures in this window.', emptyArrivals: 'No arrivals in this window.',
+    loading: 'Loading airport movements…', retry: 'Retry',
+    studyTime: 'Study time', boardWindow: 'Board window', outsideWindow: 'Outside study window',
+};
+/** Shared airport selection hero. Supply a key={airport.id} to reset direction on airport changes. */
+export function AirportHeroCard({ airport, departures, arrivals, note, study, horizon, maxRows = 8, dateLabel, formatTime = formatServiceTime, labels, loading = false, error, onRetry, onSelectFlight, selectedFlightId, initialDirection = 'departures', className = '' }) {
+    const [direction, setDirection] = useState(initialDirection);
+    const titleId = useId();
+    const boardId = useId();
+    const copy = { ...defaultLabels, ...labels };
+    const window = movementBoardWindow(study, horizon);
+    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 })] })
+                    : _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: 'stand', label: copy.stand, characters: 3 },
+                            { key: 'status', label: copy.status, characters: 10 },
+                        ], 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/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/airport-hero-card.css

@@ -0,0 +1,21 @@
+@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__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__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 button:focus-visible { outline: 2px solid var(--airport-accent); outline-offset: 4px; }
+.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; } }

package/components/split-flap-board.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionstudies/web",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "private": false,
   "type": "module",
   "description": "Browser controls and loaders for Motion Studies.",
@@ -20,6 +20,18 @@
     "tag": "next"
   },
   "exports": {
+    "./components/SplitFlapBoard": {
+      "types": "./components/SplitFlapBoard.d.ts",
+      "import": "./components/SplitFlapBoard.js",
+      "default": "./components/SplitFlapBoard.js"
+    },
+    "./components/AirportHeroCard": {
+      "types": "./components/AirportHeroCard.d.ts",
+      "import": "./components/AirportHeroCard.js",
+      "default": "./components/AirportHeroCard.js"
+    },
+    "./split-flap-board.css": "./components/split-flap-board.css",
+    "./airport-hero-card.css": "./components/airport-hero-card.css",
     "./components/MobilePicker": {
       "types": "./components/MobilePicker.d.ts",
       "import": "./components/MobilePicker.js",
@@ -92,7 +104,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@motionstudies/core": "0.1.0-alpha.3"
+    "@motionstudies/core": "0.1.0-alpha.5"
   },
   "peerDependencies": {
     "react": "^19.2.8",