@motionstudies/web 0.1.0-alpha.13 → 0.1.0-alpha.14

package/components/AirportHeroCard.d.ts

@@ -52,7 +52,9 @@ export interface AirportHeroCardProps {
     readonly selectedFlightId?: string;
     readonly initialDirection?: 'departures' | 'arrivals';
     readonly className?: string;
+    /** Compact panels retain the same controls and evidence in less vertical space. */
+    readonly density?: 'comfortable' | 'compact';
 }
 /** 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 declare function AirportHeroCard({ airport, departures, arrivals, note, study, horizon, maxRows, dateLabel, formatTime, labels, loading, error, onRetry, onSelectFlight, selectedFlightId, initialDirection, className, density }: AirportHeroCardProps): import("react").JSX.Element;
 export {};

package/components/AirportHeroCard.js

@@ -11,7 +11,7 @@ const defaultLabels = {
     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 = '' }) {
+export function AirportHeroCard({ airport, departures, arrivals, note, study, horizon, maxRows = 8, dateLabel, formatTime = formatServiceTime, labels, loading = false, error, onRetry, onSelectFlight, selectedFlightId, initialDirection = 'departures', className = '', density }) {
     const [direction, setDirection] = useState(initialDirection);
     const titleId = useId();
     const boardId = useId();
@@ -20,7 +20,7 @@ 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] }), 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 })] })
+    return _jsxs("section", { className: `ms-airport-hero ${className}`, "data-density": density, "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 },

package/components/airport-hero-card.css

@@ -40,3 +40,29 @@
 .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; }
+
+/* Shared compact presentation, responsive to card width rather than the window. */
+.ms-airport-hero[data-density='compact'] { padding: 12px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__identity { padding: 8px 0; gap: 12px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__code { font-size: 40px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__identity h2 { font-size: 20px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__clock-value { font-size: 28px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__directions { margin-bottom: 8px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__directions button { padding: 6px 0 8px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__window { margin-bottom: 8px; }
+.ms-airport-hero[data-density='compact'] .ms-split-flap-board { padding: 6px 8px 8px; }
+.ms-airport-hero[data-density='compact'] .ms-split-flap-board__table { border-spacing: 0 4px; }
+.ms-airport-hero[data-density='compact'] .ms-split-flap-board__select { min-height: 28px; }
+.ms-airport-hero[data-density='compact'] .ms-flap { font-size: 13px; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__note { margin-top: 8px; font-size: 10px; line-height: 1.4; }
+.ms-airport-hero[data-density='compact'] .ms-airport-hero__note a { color: inherit; }
+@container (min-width: 441px) {
+  .ms-airport-hero[data-density='compact'] .ms-airport-hero__identity { grid-template-columns: auto minmax(0, 1fr) auto; }
+  .ms-airport-hero[data-density='compact'] .ms-airport-hero__clock { grid-column: auto; display: block; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid #797c6155; text-align: right; }
+}
+@container (max-width: 440px) {
+  .ms-airport-hero[data-density='compact'] .ms-airport-hero__identity h2 { font-size: 16px; }
+}
+@media (pointer: coarse) {
+  .ms-airport-hero[data-density='compact'] .ms-split-flap-board__select { min-height: 44px; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionstudies/web",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.14",
   "private": false,
   "type": "module",
   "description": "Browser controls and loaders for Motion Studies.",
@@ -152,7 +152,8 @@
       "types": "./components/NetworkVehicleHeroCard.d.ts",
       "import": "./components/NetworkVehicleHeroCard.js",
       "default": "./components/NetworkVehicleHeroCard.js"
-    }
+    },
+    "./study-layout.css": "./study-layout.css"
   },
   "files": [
     "**/*.js",
@@ -167,7 +168,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@motionstudies/core": "0.1.0-alpha.13"
+    "@motionstudies/core": "0.1.0-alpha.14"
   },
   "peerDependencies": {
     "react": "^19.2.8",

package/study-layout.css

@@ -0,0 +1,65 @@
+/* Opt-in overlay layout. Clearances describe the edition's surrounding controls. */
+.ms-study-layout {
+  --ms-layout-gap: 12px;
+  --ms-layout-gutter: clamp(16px, 3vw, 48px);
+  --ms-layout-top: 180px;
+  --ms-layout-bottom: 160px;
+  --ms-layout-end: 72px;
+  --ms-layer-panel: 6;
+  --ms-control-size: 36px;
+  --ms-control-radius: 2px;
+  --ms-control-border: var(--line, #c1ccff33);
+  --ms-control-surface: var(--panel, #070716ee);
+  --ms-control-ink: var(--ink, #f8f7ff);
+  --ms-control-accent: var(--cyan, #8dfaff);
+}
+
+.ms-study-layout .ms-study-panel {
+  --ms-panel-top: max(var(--ms-layout-top, 180px), env(safe-area-inset-top));
+  --ms-panel-bottom: max(var(--ms-layout-bottom, 160px), env(safe-area-inset-bottom));
+  --ms-panel-start: max(var(--ms-layout-gutter, 16px), env(safe-area-inset-left));
+  --ms-panel-end: max(var(--ms-layout-end, 72px), env(safe-area-inset-right));
+  position: absolute;
+  z-index: var(--ms-layer-panel, 6);
+  inset-block-start: var(--ms-panel-top);
+  inset-inline-start: var(--ms-panel-start);
+  box-sizing: border-box;
+  inline-size: min(var(--ms-panel-width, 560px), max(0px, calc(100% - var(--ms-panel-start) - var(--ms-panel-end))));
+  max-block-size: max(0px, calc(100% - var(--ms-panel-top) - var(--ms-panel-bottom)));
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--ms-layout-gap, 12px);
+}
+
+[data-ms-chrome='hidden'] .ms-study-panel {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ms-control {
+  box-sizing: border-box;
+  min-inline-size: var(--ms-control-size, 36px);
+  min-block-size: var(--ms-control-size, 36px);
+  padding: 6px 10px;
+  border: 1px solid var(--ms-control-border, #c1ccff33);
+  border-radius: var(--ms-control-radius, 2px);
+  background: var(--ms-control-surface, #070716ee);
+  color: var(--ms-control-ink, #f8f7ff);
+  font: inherit;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+.ms-control:focus-visible {
+  outline: 2px solid var(--ms-control-accent, #8dfaff);
+  outline-offset: 2px;
+}
+.ms-control[aria-pressed='true'] { border-color: var(--ms-control-accent, #8dfaff); }
+.ms-control:disabled { opacity: .5; cursor: default; }
+.ms-control-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
+.ms-control-strip { display: flex; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 4px; }
+.ms-control-strip > * { flex-shrink: 0; }
+.ms-panel-dismiss { position: sticky; inset-block-start: 0; float: inline-end; z-index: 2; margin: 0 0 8px 8px; }
+@media (pointer: coarse) {
+  .ms-study-layout { --ms-control-size: 44px; }
+}