@base-works/aviation (0.1.0)
Installation
@base-works:registry=https://git.muddlab.com/api/packages/ahmadsholehin/npm/npm install @base-works/[email protected]"@base-works/aviation": "0.1.0"About this package
@base-works/aviation
Canonical BaseWorks L3 components for aviation applications, published as a versioned package in the private BaseWorks Gitea npm registry.
FlightTrajectoryLayer
FlightTrajectoryLayer is an experimental L3 composition exported from
@base-works/aviation/mapbox. It adapts timestamped flight samples into the L2
CurveRibbonLayer and InstancedSymbolLayer; it does not implement shaders,
own a renderer, fetch flights, or run a simulation clock. Applications provide
UTC time and controlled selection. Both constituent layers select the same
flight record. Defaults live in DEFAULT_FLIGHT_TRAJECTORY_APPEARANCE.
Run Aviation Storybook on port 6007 and open FlightTrajectoryLayer / Synthetic Arrivals. The graphics stories use the existing Mapbox example's ignored local token file, including for the local synthetic basemap. See graphics composition for the API, shipping reuse proof and graphics verification commands.
RunwayLayer
RunwayLayer is the first real aviation consumer of @base-works/mapbox. It
renders domain-owned runway polygons and labels through declarative Mapbox
layers, registers selection and hover with the shared interaction manager, and
uses runtime-scoped IDs so multiple maps and layer instances do not collide.
Map components use the dedicated @base-works/aviation/mapbox entry point so
panel-only consumers do not load the Mapbox runtime.
Render it as a child of BaseMap:
import { RunwayLayer } from "@base-works/aviation/mapbox";
<BaseMap mapStyle={style} initialViewState={viewState}>
<RunwayLayer
runways={runways}
selectedRunwayId={selectedRunwayId}
onRunwayClick={(runway) => setSelectedRunwayId(runway.id)}
/>
</BaseMap>;
The component accepts longitude/latitude polygon coordinates, controlled
selection/highlighting, interaction callbacks and optional map-presentation
values. It deliberately accepts no native map, Three runtime, application store
or event bus. Invalid polygons, hidden runways and non-finite/out-of-range
coordinates are omitted. Its Storybook example uses a local style and synthetic
data, so no Mapbox token is required.
The story reuses the Mapbox browser example's ignored PUBLIC_MAPBOX_TOKEN when
one is configured. Without it, the story falls back to a local synthetic style
and disables labels because that style deliberately has no hosted glyph
endpoint. Labels are enabled by default for normal application styles and can
be disabled with showLabels={false}.
Usable runway defaults are centralized in the exported
DEFAULT_RUNWAY_LAYER_APPEARANCE. Unlike DOM components, Mapbox paint values
cannot consume Spectrum CSS variables directly; an application can supply a
coherent appearance object when adapting the domain map palette.
ArrivalSequenceViewer
ArrivalSequenceViewer is an experimental, read/select arrival-sequence board
derived from an ATC flight-strip mockup. It preserves the caller's input order,
displays a deterministic reference clock, and emits selection/view changes. It
does not fetch data, know about Stack or Supabase, persist changes, or perform
operational resequencing.
The first version deliberately treats the following as provisional pending review with ATC users:
- the operational meaning and calculation of TTL/TTG;
- green/amber state meanings;
- All/Batch behavior; and
- ordering/resequencing rules.
Callers currently provide ttlTtgMinutes, neutral nominal/attention states,
an optional batchId, and entries in authoritative display order. These public
types remain experimental and must not be marked stable before domain review.
Local commands
From the BaseWorks repository root:
pnpm --filter @base-works/aviation build
pnpm --filter @base-works/aviation test
pnpm --filter @base-works/aviation storybook
pnpm --filter @base-works/aviation storybook:build
The derivative-shaped fixture links both @base-works/aviation and
@base-works/ui. Its composition test drives the L3 reference clock with the L2
TimeSlider, without either package importing project or Stack source. It also
builds a production Vite consumer from both packages' dist output, verifies
Spectrum macro transformation into one CSS asset, and proves a central theme
override is included.
Appearance contract
The component must be rendered beneath BaseWorksThemeScope. It has polished
light/dark/compact defaults, uses Spectrum tokens and forced system colours, and
keeps nominal/attention states distinguishable by shape. It accepts no colour,
spacing, theme-object, or height prop: the consuming layout owns available
height. Application-wide appearance changes use the public semantic tokens in
the BaseWorks theme contract,
not edits to this package or private Spectrum selectors.
The supported default narrow boundary is 224 px. Callsigns ellipsize before AT
WP or TTL/TTG values are allowed to overflow, and the header and strips share an
internal three-column recipe. The recipe, type hierarchy, and truncation rules
belong to the component; only its available width/height and documented semantic
tokens belong to the consuming application. Storybook includes 224, 240, 250,
320, and 360 px examples, while pnpm --filter @base-works/aviation test:visual
checks the inspected default baselines and layout invariants.
The component's build-time declarations live in
ArrivalSequenceViewer.styles.ts; its .tsx file remains focused on domain
behavior, accessibility, and composition. This is the BaseWorks convention for
private recipes large enough to obscure component logic.
Composition patterns
The package catalogue ships two known-good, source-backed arrangements:
aviation.arrival-management-workspaceconnects application-owned reference time toTimeSlider,ArrivalSequenceViewer, the primary operational view, and static workspace regions;aviation.runway-mapcomposesBaseMapandRunwayLayerwhile keeping runway data, selection and hosted-resource credentials in the application.
Retrieve them through base-works patterns <query> and
base-works pattern <id>. The records point to the exact Storybook symbols that
exercise the wiring; they do not generate or render an application.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @base-works/contracts | ^0.1.0 |
| @base-works/mapbox | ^0.1.0 |
| @base-works/ui | ^0.1.0 |
Development Dependencies
| ID | Version |
|---|---|
| @playwright/test | ^1.58.0 |
| @react-spectrum/s2 | ^1.5.1 |
| @storybook/addon-a11y | ^10.2.0 |
| @storybook/react-vite | ^10.2.0 |
| @testing-library/react | ^16.3.0 |
| @types/react | ^19.2.0 |
| @types/react-dom | ^19.2.0 |
| @vitejs/plugin-react | ^6.0.4 |
| axe-core | ^4.11.0 |
| jsdom | ^29.1.1 |
| mapbox-gl | ^3.27.0 |
| react | ^19.2.8 |
| react-dom | ^19.2.8 |
| react-map-gl | ^8.1.2 |
| storybook | ^10.2.0 |
| unplugin-parcel-macros | ^0.2.0 |
| vite | ^8.1.5 |
Peer Dependencies
| ID | Version |
|---|---|
| @react-spectrum/s2 | ^1.5.1 |
| mapbox-gl | ^3.27.0 |
| react | ^19.2.8 |
| react-dom | ^19.2.8 |
| react-map-gl | ^8.1.2 |