diff --git a/.github/instructions/building-blocks.instructions.md b/.github/instructions/building-blocks.instructions.md
index 25a70dc64..ef8e44a13 100644
--- a/.github/instructions/building-blocks.instructions.md
+++ b/.github/instructions/building-blocks.instructions.md
@@ -115,6 +115,23 @@ When working with building block components in this directory:
- Height defines the visual size and coordinate system scale
- Padding (top/bottom or left/right) is typically added outside the main drawing area
+12. **`instrument-linear` shared helpers** (consumed by `obc-heave`, `obc-draft-trim`):
+ - `resolveLinearAdvice(advice, trendMin, trendMax)` resolves each advice zone's
+ hinted/regular/triggered state against a trend band.
+ - `verticalScaleTickmarks(range)` returns the tick configuration for a scale
+ spanning `±range` around a zero reference: a full-width line at zero, plus a
+ primary and a secondary ladder whose intervals step with the range — `1`/`0.5`
+ for a range of 5 or less, `5`/`1` above that.
+ - `linearTickInterval(height, range, minSpacing)` picks a 1-2-5 tick step by
+ on-screen spacing, for scales whose height is dictated by a surrounding layout.
+ - `watchfaceLinear`'s `options.maskId` overrides the container clip-mask id.
+ **Ids are document-scoped**, so any component rendering more than one gauge in
+ a single shadow root MUST give each a distinct id — otherwise every gauge
+ resolves to the first one's mask.
+ - **Scale space is positive-up.** A quantity measured downward (a draught) has to
+ be negated, and so do its advice bounds — which additionally swap, since
+ negating an interval reverses it: `{min, max}` → `{min: -max, max: -min}`.
+
### `packages/openbridge-webcomponents/src/svghelpers/**`
When working with SVG helper utilities:
diff --git a/.github/instructions/watch-radial-instruments.instructions.md b/.github/instructions/watch-radial-instruments.instructions.md
index da94be8ad..f8f830bbd 100644
--- a/.github/instructions/watch-radial-instruments.instructions.md
+++ b/.github/instructions/watch-radial-instruments.instructions.md
@@ -1,5 +1,5 @@
---
-applyTo: "packages/openbridge-webcomponents/src/navigation-instruments/watch/**,packages/openbridge-webcomponents/src/navigation-instruments/compass/**,packages/openbridge-webcomponents/src/navigation-instruments/heading/**,packages/openbridge-webcomponents/src/navigation-instruments/rudder/**,packages/openbridge-webcomponents/src/navigation-instruments/wind/**,packages/openbridge-webcomponents/src/navigation-instruments/roll/**,packages/openbridge-webcomponents/src/navigation-instruments/speed-gauge/**,packages/openbridge-webcomponents/src/navigation-instruments/gauge-radial/**,packages/openbridge-webcomponents/src/navigation-instruments/rot-sector/**,packages/openbridge-webcomponents/src/navigation-instruments/azimuth-thruster/**,packages/openbridge-webcomponents/src/building-blocks/instrument-radial/**"
+applyTo: "packages/openbridge-webcomponents/src/navigation-instruments/watch/**,packages/openbridge-webcomponents/src/navigation-instruments/compass/**,packages/openbridge-webcomponents/src/navigation-instruments/compass-sector/**,packages/openbridge-webcomponents/src/navigation-instruments/heading/**,packages/openbridge-webcomponents/src/navigation-instruments/rudder/**,packages/openbridge-webcomponents/src/navigation-instruments/wind/**,packages/openbridge-webcomponents/src/navigation-instruments/pitch/**,packages/openbridge-webcomponents/src/navigation-instruments/roll/**,packages/openbridge-webcomponents/src/navigation-instruments/pitch-roll/**,packages/openbridge-webcomponents/src/navigation-instruments/pitch-roll-heave/**,packages/openbridge-webcomponents/src/building-blocks/single-axis-inclinometer/**,packages/openbridge-webcomponents/src/navigation-instruments/speed-gauge/**,packages/openbridge-webcomponents/src/navigation-instruments/gauge-radial/**,packages/openbridge-webcomponents/src/navigation-instruments/rot-sector/**,packages/openbridge-webcomponents/src/navigation-instruments/rate-of-turn/**,packages/openbridge-webcomponents/src/navigation-instruments/course-arrows/**,packages/openbridge-webcomponents/src/navigation-instruments/readout/**,packages/openbridge-webcomponents/src/navigation-instruments/watch-flat/**,packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/**,packages/openbridge-webcomponents/src/navigation-instruments/rot-linear/**,packages/openbridge-webcomponents/src/navigation-instruments/azimuth-thruster/**,packages/openbridge-webcomponents/src/building-blocks/instrument-radial/**"
---
# GitHub Copilot Custom Instructions
@@ -96,6 +96,46 @@ When adding new features or fixing bugs:
3. Navigation instruments should only handle: property declarations, domain-specific overlays, and value-to-angle mapping
4. Avoid duplicating rendering logic across instruments
+### Shared sibling modules
+
+- **`course-arrows/course-arrows.ts`** — HDG/COG arrow art
+ (`HdgArrowStyle`: arrowHead, needle, vector, beamLine;
+ `CogArrowStyle`: arrowHead, needle, vector, velocityVector), consumed by
+ compass, heading and — via the deprecated `compass/arrow.ts` shim, which
+ also carries the zoom `radiusOffset` — compass-sector. The new-style art is
+ generated from Figma into `course-arrows-art.ts`; do not hand-edit its path
+ data.
+- **`readout/center-readout.ts`** — the center / below-strip readout cluster
+ (`renderCenterReadouts()`, `resolveCompassCenterReadouts()`,
+ `centerReadoutStyles`), consumed by compass, heading, compass-sector,
+ pitch-roll, pitch-roll-heave, rate-of-turn, compass-flat and rot-linear. It
+ reuses the existing `obc-readout` API only (closest match; no new typography
+ knobs). Two arrangements via `CenterReadoutArrangement`:
+ `primarySecondary` (default — first entry, one divider, then the rest side by
+ side) and `stacked` (a divider between every entry, used by
+ pitch-roll-heave's Pitch/Roll/Heave column). **The default must stay
+ `primarySecondary`** — every other consumer depends on it.
+- **Arc tick ladder** — `tickmark.ts`'s `arcTickmarks()` emits the `secondary`
+ ladder that runs along an arc band (default interval 5°),
+ skipping the arc centre (which carries its own `main` mark) and the ends
+ (the rounded end cap already reads as a boundary). Shared by the
+ inclinometer family: `single-axis-inclinometer` (pitch, roll), `pitch-roll`
+ (both the full-watch and zoomed paths) and `pitch-roll-heave`. The zoomed
+ paths must pass the **clamped** half-extent, not the requested one, so ticks
+ never fall outside the band that is actually drawn.
+- **`building-blocks/instrument-linear/instrument-linear.ts`** —
+ `linearTickInterval(height, range, minSpacing = 16)` picks a 1-2-5 tick step
+ whose on-screen spacing clears `minSpacing`, so a linear scale whose height
+ is dictated by a surrounding layout keeps a readable density. It reproduces
+ the intervals `obc-heave` hard-codes at its natural 336-unit height, which is
+ what fixes the constant; `obc-heave` itself still uses its literals so its
+ baselines do not move.
+- **Track-bar recipe** — `obc-rate-of-turn`'s `hasTrackBar` composes existing
+ `obc-watch` inputs only: `barAreas` (band fill) + `needles` (marker at the
+ bar end) + sector `tickmarks` on the `double` face. `renderBars` applies
+ its area cut mask only when `areas` exist, so band bars render reliably on
+ full-circle faces.
+
---
## Layering & Stacking Pattern
@@ -418,19 +458,22 @@ Common instrument CSS variables used in `watch.ts` and helpers:
## Component Quick Reference
-| Component | Uses | Key Features |
-| ------------------- | --------------------- | ------------------------------------------------------- |
-| `obc-watch` | Helper modules | Core renderer - ALL circular rendering logic |
-| `instrument-radial` | `obc-watch` | Generic building block with configurable `getAngle()` |
-| `compass` | `obc-watch` + overlay | Full compass: HDG/COG arrows, ROT, vessel, wind/current |
-| `heading` | `obc-watch` + overlay | Simplified compass: HDG/COG arrows only |
-| `rudder` | `obc-watch` + overlay | Half-circle: 40% top clipped, needle variant |
-| `speed-gauge` | `obc-watch` + overlay | Speed arc: custom angle mapping, full needle |
-| `wind` | `obc-watch` + overlay | Wind rose with histogram |
-| `roll` | `obc-watch` | Roll indicator with vessel |
-| `gauge-radial` | `instrument-radial` | Thin wrapper adding `enhanced` prop |
-| `rot-sector` | `instrument-radial` | Rate of turn sector gauge |
-| `azimuth-thruster` | `obc-watch` + overlay | Thruster with angle setpoint and thrust bar |
+| Component | Uses | Key Features |
+| ------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `obc-watch` | Helper modules | Core renderer - ALL circular rendering logic |
+| `instrument-radial` | `obc-watch` | Generic building block with configurable `getAngle()` |
+| `compass` | `obc-watch` + overlay | Full compass: HDG/COG arrow styles, ROT, vessel, wind/current, center readouts |
+| `heading` | `obc-watch` + overlay | Simplified compass: HDG/COG arrow styles, optional vessel, center readouts |
+| `rate-of-turn` | `obc-watch` | ROT dots/bar, track bar (barAreas+needles), center readout |
+| `rudder` | `obc-watch` + overlay | Half-circle: 40% top clipped, needle variant |
+| `speed-gauge` | `obc-watch` + overlay | Speed arc: custom angle mapping, full needle |
+| `wind` | `obc-watch` + overlay | Wind rose with histogram |
+| `pitch` / `roll` | `single-axis-inclinometer` → `obc-watch` | Single-axis inclinometer: side arc scale, single/dual scale, optional center readout |
+| `pitch-roll` | `obc-watch` | Pitch + roll on one face; 4 arcs, optional zoomed sub-watches |
+| `pitch-roll-heave` | `obc-watch` + `watchfaceLinear` | Pitch arc + roll arc + linear heave column in the band slot; single/dual scale, optional stacked readouts |
+| `gauge-radial` | `instrument-radial` | Thin wrapper adding `enhanced` prop |
+| `rot-sector` | `instrument-radial` | Rate of turn sector gauge |
+| `azimuth-thruster` | `obc-watch` + overlay | Thruster with angle setpoint and thrust bar |
---
@@ -527,7 +570,8 @@ All frame/viewBox geometry is centralized in `computeRadialFrame()`:
`PADDING` comment there), pitch/roll/pitch-roll (labels inside ⇒ no
reserve; the pitch-roll composite has a coupled `buildFrame` contract),
wind-propulsion and velocity-projection-plot (explicit `padding`
- override path, unchanged by design).
+ override path, unchanged by design). pitch-roll-heave follows pitch-roll
+ here: same `buildFrame` contract, same coupled zoom math.
- Compass/heading's old empirical `72 + delta(clientSize)` padding was
replaced by the analytic reserve (north arrow 16px always +
NSWE labels 16px while `showLabels`); past the reserve cap both the
@@ -560,13 +604,62 @@ Labels follow the design model with three placements:
- **Internal** — labels inside the ring (`tickmarksInside`).
- **Max-min** — labels at the arc ends (`endLabelsMaxMin`), e.g. the 180° gauge.
-> **Validated combinations:** pitch/roll use `zoomToFitArc` + `shiftArcFrameToOuterEdge`;
+> **Validated combinations:** pitch/roll/pitch-roll-heave use `zoomToFitArc` + `shiftArcFrameToOuterEdge`;
> `gauge-radial` uses per-sector `clip*` and `endLabelsMaxMin` on the 180° sector.
> Pairings like `clip*` + `zoomToFitArc` or `endLabelsMaxMin` + `zoomToFitArc` are not
> currently validated.
---
+## `obc-pitch-roll-heave` geometry contract
+
+The heave column is **not** independently sized — its dimensions fall out of the
+arc geometry, and the whole layout is determined by the two half-extents
+`θp` (`pitchArcAngle`, default 30) and `θr` (`rollArcAngle`, default 45):
+
+```text
+column width = bandOuterRadius - bandInnerRadius (= band thickness, 72 un-zoomed)
+column height = 2 · capRadius · sin(θp) (= 184 un-zoomed)
+```
+
+`capRadius` is the radius of the pitch arc's outer edge **about its own
+origin** — un-zoomed that equals the outer ring, but under zoom the arc sits on
+a shifted sub-watch, so the two differ. Measuring the height against it is what
+keeps the column's top and bottom edges level with the pitch arc's end caps.
+
+Everything else follows:
+
+| Feature | Angular span | At the defaults |
+| ------------------------------- | ---------------------------- | --------------- |
+| pitch arc | `[90−θp, 90+θp]` | 60°–120° |
+| roll arc | `[180−θr, 180+θr]` | 135°–225° |
+| heave column at the ring radius | `[270−θp, 270+θp]` | 240°–300° |
+| both diagonal gaps | `90 − θp − θr` each | 15° |
+| complement ring | `[270+θp, 90−θp]` through 0° | 300°→60° |
+
+`θr` is clamped to `90 − θp` so the arcs cannot meet. **If you change the height
+rule, the complement ring's endpoints move with it** — the ring starts exactly
+where the column's top edge crosses the outer ring, which only coincides with
+`270+θp` because of the `sin(θp)` term.
+
+Two clearance passes run **only** under zoom, after the frames are built and
+left untouched (band thickness, position and zoom level are preserved):
+
+1. pitch vs roll at the diagonal — ratio-preserving bisection, identical to
+ `obc-pitch-roll`;
+2. roll vs the heave column (`single-scale`) — shortens the roll arc alone,
+ using point-to-**rectangle** distance rather than the corner-to-corner
+ `signedDist` used between two arcs, because a corner can clear a rectangle
+ on one axis alone.
+
+`dual-scale` instead clamps the centred column's **height only** (never its
+width, which reads as a match for the band thickness) to keep
+`HEAVE_CENTRE_GAP_PX` clear of the surrounding band. All three rules are
+no-ops at the un-zoomed defaults, which is what reproduces the design exactly —
+verify that before retuning any of the constants.
+
+---
+
## Checklist for Adding New Features
- [ ] Is the feature visual/rendering? → Add to `watch.ts`
diff --git a/AGENTS.md b/AGENTS.md
index 0a6678283..89e0554db 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -154,6 +154,7 @@ Syntax:
- **Enum / string inequality:** `@availableWhen state!=overlapped` — handy for "all values except one".
- **Set membership:** `@availableWhen type in [LargeSideFlip, BottomFlip, TopFlip]` — use the **enum member identifier names**, not the string values.
- **Non-empty string:** `@availableWhen label!=''` — for `string` props (default `''`) that gate another prop by being non-empty.
+- **Empty / non-empty array:** `@availableWhen centerReadouts==[]` (available only while the array is empty) or `@availableWhen advices!=[]` — for `Array` props whose emptiness gates another prop.
- **Defined / non-null:** `@availableWhen courseArrowPx!=undefined` (for `X | undefined`) or `@availableWhen headingSetpoint!=null` (for `X | null`).
- **Combine:** join with `&&` (all required) or `||` (any sufficient). Always use `==`/`!=` (never a single `=`).
@@ -216,7 +217,7 @@ Agents that support glob-scoped instructions should apply them automatically.
| `circular-charts.instructions.md` | `bars-graphs/**`, `charthelpers/**` | Circular chart components (donut, pie, polar, radial-bar) |
| `external-scale.instructions.md` | `external-scale/**`, `bar-vertical/**`, `bar-horizontal/**`, `gauge-vertical/**`, `gauge-horizontal/**` | External scale renderer and bar/gauge wrappers |
| `line-area-charts.instructions.md` | `chart-line/**`, `line-graph/**`, `area-graph/**`, `gauge-trend/**` | Line/area charts and composite gauge-trend component |
-| `watch-radial-instruments.instructions.md` | `watch/**`, `compass/**`, `heading/**`, `rudder/**`, `wind/**`, `roll/**`, `speed-gauge/**`, `gauge-radial/**`, `rot-sector/**`, `azimuth-thruster/**`, `instrument-radial/**` | Circular watch-based instruments and radial gauges |
+| `watch-radial-instruments.instructions.md` | `watch/**`, `compass/**`, `compass-sector/**`, `heading/**`, `rudder/**`, `wind/**`, `roll/**`, `pitch-roll/**`, `speed-gauge/**`, `gauge-radial/**`, `rot-sector/**`, `rate-of-turn/**`, `course-arrows/**`, `readout/**`, `watch-flat/**`, `compass-flat/**`, `rot-linear/**`, `azimuth-thruster/**`, `instrument-radial/**` | Watch-based instruments (radial core + linear strip counterparts), radial gauges, shared arrow/readout modules |
| `setpoint.instructions.md` | `svghelpers/setpoint*.ts`, `building-blocks/setpoint/**` | Setpoint design layer, mixin/bundle, confirm animation |
| `automation-components.instructions.md` | `automation/**` | Automation devices, valves, lines, tanks, badges |
| `ui-components.instructions.md` | `components/**` | General UI components (buttons, cards, inputs, feedback) |
@@ -371,7 +372,7 @@ Required modifications after pasting:
3. **Respect glob-scoped instructions** (§ 4) — read the matching `.instructions.md` file when touching files in its scope.
4. **Accessibility is required for interactive components.** Every new or modified component in `src/components/**` or `src/automation/**` must support full keyboard navigation and meet WCAG 2.1 AA. Read [`.github/instructions/a11y.instructions.md`](.github/instructions/a11y.instructions.md) for the activation-key table, ARIA rules, focus handling, and testing checklist before writing or changing an interactive component.
5. **Do not edit auto-generated packages** (`-react`, `-vue`, `-ng`, `-svelte`). Run `npm run wrappers` instead.
-6. **Run `npm run analyze`** after adding or renaming a `@customElement` to keep `custom-elements.json` in sync.
+6. **Run `npm run analyze`** after adding or renaming a `@customElement` to keep `custom-elements.json` in sync. Storybook resolves story args to element properties through the manifest, so run it **before** testing the stories of a newly created component — without it the args silently never reach the element.
Never hand-edit `custom-elements.json` — it is auto-generated and git-ignored. Fix manifest inaccuracies at the source (`@slot`/`@fires`/property JSDoc); see § 3 "Slots and events are manifest-critical" and run `npm run lint:slots`.
7. **Run `npm run lint`** after code changes to catch issues early.
8. **Insert `TODO(designer)`** for any documentation detail whose purpose is unclear from code alone.
@@ -381,9 +382,9 @@ Required modifications after pasting:
```bash
npx vitest run --project storybook 'component-name'
```
-12. **Update baselines for a single component:**
+12. **Update baselines for a single component** — the filter must come **before** `--update`; written after the flag, the name is consumed as the flag's value and the FULL suite runs in update mode, silently rewriting unrelated flaky baselines:
```bash
- npx vitest run --project storybook --update 'component-name'
+ npx vitest run --project storybook 'component-name' --update
```
13. **Always verify after updating baselines** — re-run the test without `--update` to confirm the new baselines are stable:
```bash
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/ar/chart-object-vessel-button/chart-object-vessel-button.stories.ts/cross-line-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/ar/chart-object-vessel-button/chart-object-vessel-button.stories.ts/cross-line-auto.png
index d7b0d343b..5903fd11c 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/ar/chart-object-vessel-button/chart-object-vessel-button.stories.ts/cross-line-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/ar/chart-object-vessel-button/chart-object-vessel-button.stories.ts/cross-line-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-flat/compass-flat.stories.ts/with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-flat/compass-flat.stories.ts/with-readout-auto.png
new file mode 100644
index 000000000..df522ab9b
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-flat/compass-flat.stories.ts/with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/map-graphics-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/map-graphics-auto.png
new file mode 100644
index 000000000..cc24936fc
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/map-graphics-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-center-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-center-readout-auto.png
new file mode 100644
index 000000000..636c992b7
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-center-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-cog-arrow-styles-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-cog-arrow-styles-auto.png
new file mode 100644
index 000000000..2e526a117
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-cog-arrow-styles-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-hdg-arrow-styles-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-hdg-arrow-styles-auto.png
new file mode 100644
index 000000000..31160d39b
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-hdg-arrow-styles-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-primary-secondary-readouts-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-primary-secondary-readouts-auto.png
new file mode 100644
index 000000000..1e4d8011d
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-primary-secondary-readouts-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-three-readouts-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-three-readouts-auto.png
new file mode 100644
index 000000000..b72d56a9f
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-three-readouts-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-two-primary-readouts-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-two-primary-readouts-auto.png
new file mode 100644
index 000000000..b461c0e87
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass/compass.stories.ts/with-two-primary-readouts-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/advice-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/advice-auto.png
new file mode 100644
index 000000000..739d9a8a0
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/advice-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/default-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/default-auto.png
new file mode 100644
index 000000000..672cc190c
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/default-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/enhanced-auto.png
new file mode 100644
index 000000000..55c324980
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/even-keel-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/even-keel-auto.png
new file mode 100644
index 000000000..57a7f12c7
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/even-keel-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/trim-by-bow-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/trim-by-bow-auto.png
new file mode 100644
index 000000000..13649df9d
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/draft-trim/draft-trim.stories.ts/trim-by-bow-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-center-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-center-readout-auto.png
new file mode 100644
index 000000000..e7027d728
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-center-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-vector-arrows-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-vector-arrows-auto.png
new file mode 100644
index 000000000..d32f7e24b
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-vector-arrows-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-vessel-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-vessel-auto.png
new file mode 100644
index 000000000..72538dfbf
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heading/heading.stories.ts/with-vessel-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-advice-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-advice-auto.png
new file mode 100644
index 000000000..e9727d7a0
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-advice-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-auto.png
new file mode 100644
index 000000000..ab5475649
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-enhanced-auto.png
new file mode 100644
index 000000000..d7499e0e3
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/heave/heave.stories.ts/bar-enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/advice-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/advice-auto.png
new file mode 100644
index 000000000..a23cc3087
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/advice-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/dual-scale-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/dual-scale-auto.png
new file mode 100644
index 000000000..8c10f396e
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/dual-scale-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/dual-scale-enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/dual-scale-enhanced-auto.png
new file mode 100644
index 000000000..7d0775114
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/dual-scale-enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/enhanced-auto.png
new file mode 100644
index 000000000..793fa839d
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/primary-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/primary-auto.png
new file mode 100644
index 000000000..a002304e9
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/primary-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/with-readout-auto.png
new file mode 100644
index 000000000..24513cd72
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/with-readout-enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/with-readout-enhanced-auto.png
new file mode 100644
index 000000000..811d4b74c
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/with-readout-enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-auto.png
new file mode 100644
index 000000000..e6e0213ec
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-dual-scale-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-dual-scale-auto.png
new file mode 100644
index 000000000..3edc72ddd
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-dual-scale-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-narrow-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-narrow-auto.png
new file mode 100644
index 000000000..62a55af7d
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll-heave/pitch-roll-heave.stories.ts/zoomed-in-narrow-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/primary-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/primary-auto.png
index 334ac9134..662362428 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/primary-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/primary-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/rov-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/rov-auto.png
index 15e4b41a3..0503d3c16 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/rov-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/rov-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/scaled-fore-image-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/scaled-fore-image-auto.png
index 1be7881a8..2046a8858 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/scaled-fore-image-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/scaled-fore-image-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/with-readout-auto.png
index d1d453878..4b94e4693 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/with-readout-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-auto.png
index ececd497e..84da2d25b 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-narrow-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-narrow-auto.png
index 2fb7522f3..193cff95d 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-narrow-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-narrow-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-rectangular-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-rectangular-auto.png
index e36c06540..63fca8c39 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-rectangular-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-rectangular-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-with-readout-auto.png
index 3cff3adbe..3eb7016b2 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-with-readout-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch-roll/pitch-roll.stories.ts/zoomed-in-with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/dual-scale-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/dual-scale-auto.png
index 0acee1e44..3be8f2fc3 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/dual-scale-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/dual-scale-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/enhanced-auto.png
index f8718bb75..84486b6fd 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/enhanced-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/primary-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/primary-auto.png
index 1dd5c77f3..46754edd0 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/primary-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/primary-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/with-readout-auto.png
index 19fe98ea3..19be156ac 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/with-readout-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-auto.png
index 9a303a332..70b53bfd6 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-narrow-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-narrow-auto.png
index 43282eda7..9658a58ee 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-narrow-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/pitch/pitch.stories.ts/zoomed-in-narrow-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-readout-auto.png
new file mode 100644
index 000000000..c3468da87
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-auto.png
new file mode 100644
index 000000000..ddf849dc1
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-enhanced-auto.png
new file mode 100644
index 000000000..ebf2b6617
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-port-starboard-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-port-starboard-auto.png
new file mode 100644
index 000000000..2e10b1193
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts/with-track-bar-port-starboard-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/dual-scale-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/dual-scale-auto.png
index 5caff2991..349d8f011 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/dual-scale-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/dual-scale-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/enhanced-auto.png
index b2407e1db..65487bf05 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/enhanced-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/primary-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/primary-auto.png
index 4c7d4c45e..714c6c3ba 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/primary-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/primary-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/rov-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/rov-auto.png
index a71f07ef2..f38f05884 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/rov-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/rov-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/with-readout-auto.png
index 7711f2281..5794d7d60 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/with-readout-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-auto.png
index 40473e639..ddfb7b6fc 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-narrow-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-narrow-auto.png
index c3844b6d9..0a2f54791 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-narrow-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/roll/roll.stories.ts/zoomed-in-narrow-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/default-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/default-auto.png
new file mode 100644
index 000000000..024f4d96c
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/default-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/enhanced-auto.png
new file mode 100644
index 000000000..48faaa17a
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/port-starboard-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/port-starboard-auto.png
new file mode 100644
index 000000000..f33dc3d67
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/port-starboard-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/port-starboard-port-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/port-starboard-port-auto.png
new file mode 100644
index 000000000..7873c996a
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/port-starboard-port-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/with-readout-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/with-readout-auto.png
new file mode 100644
index 000000000..78a4f6740
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/with-readout-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/with-readout-enhanced-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/with-readout-enhanced-auto.png
new file mode 100644
index 000000000..b510b6f57
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/rot-linear/rot-linear.stories.ts/with-readout-enhanced-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-compass-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-compass-auto.png
new file mode 100644
index 000000000..4c27ea6da
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-compass-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-framed-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-framed-auto.png
new file mode 100644
index 000000000..33a3bc157
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-framed-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-standalone-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-standalone-auto.png
new file mode 100644
index 000000000..76c63521e
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-arrows-standalone-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-compass-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-compass-auto.png
new file mode 100644
index 000000000..ea063b870
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-compass-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-framed-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-framed-auto.png
new file mode 100644
index 000000000..da626f922
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-framed-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-standalone-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-standalone-auto.png
new file mode 100644
index 000000000..6dc819eb6
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/along-athwart-bars-standalone-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/bars-max-clamped-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/bars-max-clamped-auto.png
new file mode 100644
index 000000000..b0ba2f5d9
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/bars-max-clamped-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-compass-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-compass-auto.png
new file mode 100644
index 000000000..cfef545c0
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-compass-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-framed-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-framed-auto.png
new file mode 100644
index 000000000..53986ec3a
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-framed-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-standalone-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-standalone-auto.png
new file mode 100644
index 000000000..642fbaa2c
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/long-lat-arrows-standalone-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/negative-speeds-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/negative-speeds-auto.png
new file mode 100644
index 000000000..6eeb5ae86
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/negative-speeds-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/partial-axes--undefined-hidden--auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/partial-axes--undefined-hidden--auto.png
new file mode 100644
index 000000000..9804c6904
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/partial-axes--undefined-hidden--auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/zero-speed-tinted-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/zero-speed-tinted-auto.png
new file mode 100644
index 000000000..2174b1775
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/speed-directions/speed-directions.stories.ts/zero-speed-tinted-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-at-setpoint-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-at-setpoint-auto.png
new file mode 100644
index 000000000..f13c7c341
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-at-setpoint-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-negative-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-negative-auto.png
new file mode 100644
index 000000000..7ce09b1ed
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-negative-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-off-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-off-auto.png
new file mode 100644
index 000000000..5acb91bc0
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-off-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-regular-priority-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-regular-priority-auto.png
new file mode 100644
index 000000000..048f1412b
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/pitch-rpm-regular-priority-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-at-setpoint-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-at-setpoint-auto.png
new file mode 100644
index 000000000..ad9991a25
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-at-setpoint-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-input-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-input-auto.png
new file mode 100644
index 000000000..64c8a11c6
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-input-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-loading-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-loading-auto.png
new file mode 100644
index 000000000..5cb10d9ff
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-loading-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-negative-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-negative-auto.png
new file mode 100644
index 000000000..5e17a6ab5
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-negative-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-not-at-setpoint-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-not-at-setpoint-auto.png
new file mode 100644
index 000000000..3da9cfae7
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-not-at-setpoint-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-off-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-off-auto.png
new file mode 100644
index 000000000..06ed9c9ad
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-off-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-ready-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-ready-auto.png
new file mode 100644
index 000000000..9e27a0d6b
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-ready-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-regular-priority-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-regular-priority-auto.png
new file mode 100644
index 000000000..41aa6b21e
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/power-regular-priority-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/propellers-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/propellers-auto.png
new file mode 100644
index 000000000..b7eaf67ac
Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/top-view-propulsion/top-view-propulsion.stories.ts/propellers-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/auto-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/auto-auto.png
index 65e5cfb7e..d383615e0 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/auto-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/auto-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/large-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/large-auto.png
index 73f08d3a4..82b86bdfc 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/large-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/large-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/medium-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/medium-auto.png
index a33dd4d0f..20b3a297d 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/medium-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/medium-auto.png differ
diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/primary-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/primary-auto.png
index 73f08d3a4..82b86bdfc 100644
Binary files a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/primary-auto.png and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/wind/wind.stories.ts/primary-auto.png differ
diff --git a/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/advice.ts b/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/advice.ts
index a24018e87..73c15fca0 100644
--- a/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/advice.ts
+++ b/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/advice.ts
@@ -23,6 +23,30 @@ export interface LinearAdvice {
hinted: boolean;
}
+/**
+ * Resolves the display state of each advice zone against a trend band: an
+ * advice the band reaches into is `triggered`, otherwise it is `hinted` or
+ * `regular` as configured.
+ *
+ * Shared by the vertical draught-style scales (`obc-heave`, `obc-draft-trim`),
+ * which each evaluate their own trend band against the same advice list.
+ */
+export function resolveLinearAdvice(
+ advice: LinearAdvice[],
+ trendMin: number,
+ trendMax: number
+): LinearAdviceRaw[] {
+ return advice.map((a) => {
+ const isActive = trendMax >= a.min && trendMin <= a.max;
+ const state = isActive
+ ? AdviceState.triggered
+ : a.hinted
+ ? AdviceState.hinted
+ : AdviceState.regular;
+ return {...a, min: a.min, max: a.max, state} satisfies LinearAdviceRaw;
+ });
+}
+
function adviceMask({
height,
minValue,
diff --git a/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/instrument-linear.spec.ts b/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/instrument-linear.spec.ts
new file mode 100644
index 000000000..461b59eaf
--- /dev/null
+++ b/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/instrument-linear.spec.ts
@@ -0,0 +1,45 @@
+import {describe, it, expect} from 'vitest';
+import {linearTickInterval} from './instrument-linear.js';
+
+describe('linearTickInterval', () => {
+ // The default minSpacing of 16 is load-bearing: it is chosen so the helper
+ // independently reproduces the intervals `obc-heave` hard-codes at its
+ // natural 336-unit height, while giving the shorter 184-unit gauge inside
+ // `obc-pitch-roll-heave` the sparser ladder the design calls for.
+ it('reproduces the obc-heave secondary intervals at its natural height', () => {
+ expect(linearTickInterval(336, 10)).toBe(1);
+ expect(linearTickInterval(336, 5)).toBe(0.5);
+ });
+
+ it('thins the ladder on the compact pitch-roll-heave gauge', () => {
+ expect(linearTickInterval(184, 10)).toBe(2);
+ expect(linearTickInterval(184, 5)).toBe(1);
+ });
+
+ it('never returns a step whose spacing falls below minSpacing', () => {
+ for (const height of [64, 92, 120, 184, 240, 336, 512]) {
+ for (const range of [0.5, 1, 2, 5, 10, 25, 100]) {
+ const step = linearTickInterval(height, range);
+ expect(step).toBeGreaterThan(0);
+ expect((step * height) / (2 * range)).toBeGreaterThanOrEqual(16);
+ }
+ }
+ });
+
+ it('picks the smallest qualifying step on the 1-2-5 ladder', () => {
+ for (const height of [64, 184, 336]) {
+ for (const range of [1, 5, 10, 60]) {
+ const step = linearTickInterval(height, range);
+ const smaller = step / (step.toString().startsWith('5') ? 2.5 : 2);
+ expect((smaller * height) / (2 * range)).toBeLessThan(16);
+ }
+ }
+ });
+
+ it('returns 0 for degenerate inputs', () => {
+ expect(linearTickInterval(0, 10)).toBe(0);
+ expect(linearTickInterval(184, 0)).toBe(0);
+ expect(linearTickInterval(Number.NaN, 10)).toBe(0);
+ expect(linearTickInterval(184, Number.POSITIVE_INFINITY)).toBe(0);
+ });
+});
diff --git a/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/instrument-linear.ts b/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/instrument-linear.ts
index ee4de51ed..c504d2b8d 100644
--- a/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/instrument-linear.ts
+++ b/packages/openbridge-webcomponents/src/building-blocks/instrument-linear/instrument-linear.ts
@@ -63,6 +63,12 @@ export function watchfaceLinear(
hideContainer: boolean;
off: boolean;
priority: Priority;
+ /**
+ * Id for the container clip mask. Only needs setting when a document holds
+ * more than one gauge — ids are document-scoped, so two gauges in the same
+ * shadow root would otherwise both resolve to the first one's mask.
+ */
+ maskId?: string;
},
tickmarks: {
/** Array of values where full-width main tickmarks are drawn. */
@@ -102,7 +108,7 @@ export function watchfaceLinear(
);
const tickmarksSvg: SVGTemplateResult[] = [];
- const maskId = 'boxMask';
+ const maskId = options.maskId ?? 'boxMask';
const mask = options.hideContainer
? nothing
: svg`
@@ -193,6 +199,67 @@ export function watchfaceLinear(
return all;
}
+/**
+ * Tickmark configuration for a vertical draught-style scale spanning `±range`
+ * around a zero reference line: a full-width line at zero, plus a primary and
+ * a secondary ladder whose intervals step with the range — `1` / `0.5` for a
+ * range of 5 or less, `5` / `1` above that.
+ *
+ * Shared by `obc-heave` and `obc-draft-trim`, which render the same scale
+ * against different references (the heave datum, the waterline).
+ */
+export function verticalScaleTickmarks(range: number): {
+ mainTickmarks: number[];
+ primaryTickmarkInterval: number;
+ secondaryTickmarkInterval: number;
+} {
+ return {
+ mainTickmarks: [0],
+ primaryTickmarkInterval: range <= 5 ? 1 : 5,
+ secondaryTickmarkInterval: range <= 5 ? 0.5 : 1,
+ };
+}
+
+/**
+ * Smallest "nice" tick step (1-2-5 decade ladder) whose on-screen spacing on a
+ * `height`-tall, `±range` gauge is at least `minSpacing` SVG units.
+ *
+ * Lets a linear scale keep a readable tick density when its height is dictated
+ * by a surrounding layout rather than chosen for the scale. The default
+ * `minSpacing` of 16 reproduces the intervals `obc-heave` uses at its natural
+ * 336-unit height (1 at ±10, 0.5 at ±5) and matches the ~15-unit spacing of the
+ * 5° ladder on the radial inclinometer arcs, so a linear and a radial scale
+ * read at the same density side by side.
+ *
+ * Returns 0 when the inputs cannot produce a ladder, which the tickmark
+ * generators treat as "no ticks".
+ */
+export function linearTickInterval(
+ height: number,
+ range: number,
+ minSpacing = 16
+): number {
+ if (
+ !Number.isFinite(height) ||
+ !Number.isFinite(range) ||
+ !Number.isFinite(minSpacing) ||
+ height <= 0 ||
+ range <= 0 ||
+ minSpacing <= 0
+ ) {
+ return 0;
+ }
+ const unitsPerValue = height / (2 * range);
+ const needed = minSpacing / unitsPerValue;
+ const decade = Math.pow(10, Math.floor(Math.log10(needed)));
+ for (const step of [1, 2, 5, 10]) {
+ if (decade * step >= needed) {
+ return decade * step;
+ }
+ }
+ return decade * 10;
+}
+
export function valueToY(
value: number,
minValue: number,
diff --git a/packages/openbridge-webcomponents/src/building-blocks/single-axis-inclinometer/single-axis-inclinometer.ts b/packages/openbridge-webcomponents/src/building-blocks/single-axis-inclinometer/single-axis-inclinometer.ts
index a4856a293..fe4b9f7a1 100644
--- a/packages/openbridge-webcomponents/src/building-blocks/single-axis-inclinometer/single-axis-inclinometer.ts
+++ b/packages/openbridge-webcomponents/src/building-blocks/single-axis-inclinometer/single-axis-inclinometer.ts
@@ -10,7 +10,10 @@ import {
} from '../../navigation-instruments/watch/watch.js';
import {renderInstrumentReadout} from '../../navigation-instruments/readout/instrument-readout.js';
import {Priority} from '../../navigation-instruments/types.js';
-import {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';
+import {
+ arcTickmarks,
+ TickmarkType,
+} from '../../navigation-instruments/watch/tickmark.js';
import {
AdviceState,
AdviceType,
@@ -233,6 +236,7 @@ export class SingleAxisInclinometer extends LitElement {
// keeps the zoomed `arcFrame` correct.
protected renderScale(areas: WatchArea[], opposite: boolean) {
const centerAngle = this.centerAngle;
+ const arcAngle = normalizeArcAngle(this.arcAngle, 45);
return html`
`;
diff --git a/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.css b/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.css
index 8750e1d90..cf5d44dd3 100644
--- a/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.css
+++ b/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.css
@@ -19,6 +19,29 @@
:host {
display: grid;
place-items: center;
+ grid-template-rows: 100%;
+ grid-template-columns: 100%;
width: 100%;
height: 100%;
}
+
+.with-readout {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+}
+
+.with-readout .container {
+ flex: 0 1 auto;
+ min-height: 0;
+ height: auto;
+ aspect-ratio: 3 / 1;
+}
+
+.flat-readout {
+ flex: 0 0 auto;
+}
diff --git a/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.stories.ts b/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.stories.ts
index 203bb8e87..45f5cb669 100644
--- a/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.stories.ts
+++ b/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.stories.ts
@@ -56,6 +56,10 @@ const meta: Meta = {
},
rotMaxValue: {control: {type: 'range', min: 1, max: 60, step: 1}},
rotArcExtent: {control: {type: 'range', min: 10, max: 180, step: 5}},
+ hasReadout: {control: 'boolean'},
+ label: {control: 'text'},
+ unit: {control: 'text'},
+ fractionDigits: {control: 'number'},
},
decorators: [widthDecorator],
} satisfies Meta;
@@ -65,6 +69,13 @@ type Story = StoryObj;
export const Primary: Story = {};
+export const WithReadout: Story = {
+ tags: ['6.1'],
+ args: {
+ hasReadout: true,
+ },
+};
+
export const WithFOVIndicator: Story = {
args: {
FOVIndicator: true,
diff --git a/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.ts b/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.ts
index f6e4d098f..3405b668d 100644
--- a/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.ts
+++ b/packages/openbridge-webcomponents/src/navigation-instruments/compass-flat/compass-flat.ts
@@ -1,5 +1,11 @@
import {LitElement, html, svg, SVGTemplateResult, unsafeCSS} from 'lit';
import componentStyle from './compass-flat.css?inline';
+import instrumentReadoutStyle from '../readout/instrument-readout.css?inline';
+import {
+ centerReadoutStyles,
+ renderCenterReadouts,
+} from '../readout/center-readout.js';
+import {ReadoutSize} from '../readout/readout.js';
import {property, state} from 'lit/decorators.js';
import {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat.js';
import '../watch-flat/watch-flat.js';
@@ -55,6 +61,8 @@ export interface Label {
* - **Rate of turn**: Animated linear ROT indicator (spinning dots or
* horizontal bar) via `rotType`. When enabled, a bottom bar is added to
* the strip to house the indicator.
+ * - **Readout**: `hasReadout` shows a centered heading readout below the
+ * strip (label `HDG`, unit `DEG` by default).
* - **Color priority**: Per-element priority for HDG, COG, and ROT via
* `priorityElements`.
*
@@ -113,21 +121,57 @@ export class ObcCompassFlat extends LitElement {
@property({type: Boolean}) rotPortStarboard: boolean = false;
/** @availableWhen rotType!=undefined */
@property({type: Number}) rotAtZeroDeadband: number = ROT_ZERO_DEADBAND_DEG;
+ /**
+ * When `true`, shows a centered `` below the strip displaying
+ * the heading (label `HDG`, unit `DEG`). The value color follows the HDG
+ * entry in `priorityElements`.
+ */
+ @property({type: Boolean}) hasReadout: boolean = false;
+ /**
+ * Readout label. Default `HDG`.
+ * @availableWhen hasReadout==true
+ */
+ @property({type: String}) label = 'HDG';
+ /**
+ * Readout unit. Default `DEG`.
+ * @availableWhen hasReadout==true
+ */
+ @property({type: String}) unit = 'DEG';
+ /**
+ * Number of fraction digits shown in the readout. Default `0`.
+ * @availableWhen hasReadout==true
+ */
+ @property({type: Number}) fractionDigits = 0;
- @state() private containerWidth = 0;
- @state() private maxContainerWidth = 0;
+ @state() private hostWidth = 0;
+ @state() private hostHeight = 0;
private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
- // Made by chatGPT so that the text is inside the wrapper
- this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;
- this.containerWidth = Math.min(
- entry.contentRect.width,
- this.maxContainerWidth
- );
+ this.hostWidth = entry.contentRect.width;
+ this.hostHeight = entry.contentRect.height;
}
});
+ /** Vertical space reserved for the readout block below the strip. */
+ private static readonly READOUT_RESERVE_PX = 56;
+
+ private get stripHeight(): number {
+ return (
+ this.hostHeight -
+ (this.hasReadout ? ObcCompassFlat.READOUT_RESERVE_PX : 0)
+ );
+ }
+
+ // Made by chatGPT so that the text is inside the wrapper
+ private get maxContainerWidth(): number {
+ return -125.36 + 3.79 * this.stripHeight;
+ }
+
+ private get containerWidth(): number {
+ return Math.min(this.hostWidth, this.maxContainerWidth);
+ }
+
override connectedCallback() {
super.connectedCallback();
this.resizeObserver.observe(this);
@@ -323,7 +367,7 @@ export class ObcCompassFlat extends LitElement {
: -128;
const viewBox = `-192 ${arrowViewBoxY} 384 128`;
- return html`
+ const strip = html`