@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.111 → 2.0.0-next.112

package/src/navigation-instruments/current/current.ts

@@ -18,8 +18,14 @@ export enum CurrentType {
 
 const CURRENT_PATTERN_SCALE_VESSEL = 1.39;
 const CURRENT_PATTERN_SCALE_DIRECTION = 2.0;
-/** Chevron-tip anchor radius for the peripheral icon (vessel type), from Figma. */
-const CURRENT_ICON_PERIPHERY_RADIUS = 116;
+/**
+ * Chevron-tip anchor radius for the peripheral icon (vessel type): the tip
+ * sits on the track band's inner edge (112), so the 48-unit glyph box fills
+ * the band (112–160) exactly, per the OpenBridge 6.1 design.
+ */
+const CURRENT_ICON_PERIPHERY_RADIUS = innerRingRadiusFor(
+  WatchCircleType.double
+);
 /** Scale of the centered 24-unit chevron glyph (direction type), from Figma (168/24). */
 const CURRENT_DIRECTION_ICON_SCALE = 7;
 
@@ -56,6 +62,9 @@ export function clampCurrentSpeed(value: number | null): number | null {
  *   the enhanced (blue) palette.
  * - **Vessel image**: configurable silhouette rotating with
  *   `vesselHeadingDeg` (vessel type).
+ * - **Pattern toggle & wave tuning**: `hasPattern` switches the band pattern
+ *   off; `waveLength`, `waveHeight` and `waveSpeed` tune the band spacing,
+ *   intensity and drift motion.
  *
  * ## Usage Guidelines
  *
@@ -89,6 +98,28 @@ export class ObcCurrent extends LitElement {
   @property({type: Number}) currentFromDirection: number | null = null;
   /** Color priority: `Priority.enhanced` uses the blue/enhanced palette (default: `Priority.regular`). */
   @property({type: String}) priority: Priority = Priority.regular;
+  /**
+   * Show the force-graphics band pattern behind the watch face.
+   * @availableWhen currentFromDirection!=null
+   */
+  @property({type: Boolean, attribute: false}) hasPattern = true;
+  /**
+   * Wavelength of the pattern bands as a multiplier on the design spacing
+   * (1 = design, 0.5 = twice as dense).
+   * @availableWhen hasPattern==true && currentFromDirection!=null
+   */
+  @property({type: Number}) waveLength = 1;
+  /**
+   * Wave intensity: the peak opacity the pattern bands fade up to (0–1).
+   * @availableWhen hasPattern==true && currentFromDirection!=null
+   */
+  @property({type: Number}) waveHeight = 1;
+  /**
+   * Drift speed of the pattern in wavelengths per second, moving with the
+   * flow (negative drifts against it); 0 keeps the pattern static.
+   * @availableWhen hasPattern==true && currentFromDirection!=null
+   */
+  @property({type: Number}) waveSpeed = 0;
   /**
    * The image of the vessel.
    * @availableWhen type==vessel
@@ -148,7 +179,7 @@ export class ObcCurrent extends LitElement {
   }
 
   private renderForcePattern(watchCircleType: WatchCircleType) {
-    if (this.currentFromDirection == null) {
+    if (!this.hasPattern || this.currentFromDirection == null) {
       return nothing;
     }
     return html`
@@ -162,6 +193,9 @@ export class ObcCurrent extends LitElement {
           color: this.enhanced
             ? 'var(--instrument-enhanced-tertiary-color)'
             : undefined,
+          waveLength: this.waveLength,
+          waveHeight: this.waveHeight,
+          waveSpeed: this.waveSpeed,
         })}
       </svg>
     `;

package/src/navigation-instruments/heading/heading.stories.ts

@@ -128,12 +128,14 @@ export const WithVectorArrows: Story = {
 
 /**
  * Below the label-reserve cap (~200px for the NSWE + north-arrow decor) the
- * frame reports `labelsHidden` and the instrument drops the labels and the
- * north arrow instead of letting them clip — the same graceful degradation
- * the tick-label instruments use (issue #1021).
+ * frame reports `labelsHidden` and the instrument drops the labels instead
+ * of letting them clip — the same graceful degradation the tick-label
+ * instruments use (issue #1021). The north arrow stays visible on even the
+ * smallest face: below the small-scale threshold it renders as a compact
+ * triangle at the ring that scales with the face, so it never clips.
  */
 export const SmallContainerDegraded: Story = {
-  name: 'Small Container (160px, Labels + Arrow Hidden Past Cap)',
+  name: 'Small Container (160px, Labels Hidden Past Cap)',
   args: {
     width: 160,
   },

package/src/navigation-instruments/heading/heading.ts

@@ -309,7 +309,7 @@ export class ObcHeading extends LitElement {
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
           .crosshairCenterCutout=${this.hasCenterReadouts}
-          .northArrow=${!frame.labelsHidden}
+          .northArrow=${true}
           .angleSetpoint=${this.headingSetpoint ?? undefined}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}

package/src/navigation-instruments/pitch-roll-heave/pitch-roll-heave.ts

@@ -351,9 +351,16 @@ export class ObcPitchRollHeave extends LitElement {
    * `obc-watch` renders its crosshair after the bands, i.e. on top of them.
    * Drawing it here puts it under the watch layer, so the bands and the heave
    * column mask it naturally.
+   *
+   * In `single-scale` nothing frames the segment above the vessel (the other
+   * three arms end under the pitch band, roll band and heave column), so the
+   * vertical arm stops at the centre instead of continuing upward. In
+   * `dual-scale` the top roll band gives it a natural endpoint, so the full
+   * arm is kept.
    */
   private renderCrosshair(): SVGTemplateResult {
     const r = OUTER_RING_RADIUS;
+    const yTop = this.isDualScale ? -r : 0;
     return svg`
       <line
         x1=${-r} y1="0" x2=${r} y2="0"
@@ -361,7 +368,7 @@ export class ObcPitchRollHeave extends LitElement {
         vector-effect="non-scaling-stroke"
       />
       <line
-        x1="0" y1=${-r} x2="0" y2=${r}
+        x1="0" y1=${yTop} x2="0" y2=${r}
         stroke="var(--instrument-frame-tertiary-color)"
         vector-effect="non-scaling-stroke"
       />

package/src/navigation-instruments/rate-of-turn/rate-of-turn.stories.ts

@@ -131,7 +131,7 @@ export const WithTrackBar: Story = {
     hasReadout: true,
     rateOfTurnDegreesPerMinute: 45,
     rotPosition: RotPosition.innerCircle,
-    watchCircleType: WatchCircleType.double,
+    watchCircleType: WatchCircleType.triple,
   },
 };
 
@@ -142,7 +142,7 @@ export const WithTrackBarEnhanced: Story = {
     hasReadout: true,
     rateOfTurnDegreesPerMinute: 45,
     rotPosition: RotPosition.innerCircle,
-    watchCircleType: WatchCircleType.double,
+    watchCircleType: WatchCircleType.triple,
     priority: Priority.enhanced,
   },
 };
@@ -154,7 +154,7 @@ export const WithTrackBarPortStarboard: Story = {
     hasReadout: true,
     rateOfTurnDegreesPerMinute: 45,
     rotPosition: RotPosition.innerCircle,
-    watchCircleType: WatchCircleType.double,
+    watchCircleType: WatchCircleType.triple,
     rotPortStarboard: true,
   },
 };

package/src/navigation-instruments/rate-of-turn/rate-of-turn.ts

@@ -35,7 +35,8 @@ export {RotType, RotPosition};
  * - **Track bar** (`hasTrackBar`): A bar in the ring band growing from the
  *   twelve o'clock position to the measured rate of turn, with a needle
  *   marker at its end and sector tickmarks (pairs with
- *   `watchCircleType="double"` for the banded face).
+ *   `watchCircleType="double"` for the banded face, or `"triple"` when the
+ *   ROT dots sit on the inner circle).
  * - **Center readout** (`hasReadout`): A centered readout showing the
  *   measured rate of turn (label `ROT`, unit `DEG/min` by default).
  * - **Color priority**: Uses `priority` to select regular or enhanced color
@@ -91,7 +92,9 @@ export class ObcRateOfTurn extends LitElement {
    * When `true`, shows a bar in the ring band from the twelve o'clock
    * position to the measured rate of turn, with a needle marker at its end
    * and sector tickmarks. Pairs with `watchCircleType="double"` for the
-   * banded face. Driven by `rateOfTurnDegreesPerMinute` only.
+   * banded face — or `"triple"` when `rotPosition` is `innerCircle`, so the
+   * dots get their inner track too. Driven by `rateOfTurnDegreesPerMinute`
+   * only.
    */
   @property({type: Boolean}) hasTrackBar: boolean = false;
   /**

package/src/navigation-instruments/top-view-propulsion/top-view-propulsion.ts

@@ -15,10 +15,12 @@ import {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';
 import '../watch/watch.js';
 import {
   OUTER_RING_RADIUS,
+  WatchCircleType,
   type WatchBarArea,
   type WatchNeedle,
 } from '../watch/watch.js';
 import {
+  BAND_INNER_RADIUS,
   LANE_DIVIDER_RADIUS,
   LANE_DIVIDER_WIDTH,
   PRIMARY_SUBBAND_INNER_RADIUS,
@@ -411,6 +413,21 @@ export class ObcTopViewPropulsion extends LitElement {
     ></path>`;
   }
 
+  /**
+   * Thin outline on the track band's inner edge, always shown per the
+   * design's track face. Drawn on the overlay because the watch paints its
+   * band bars over the ring circles, which would swallow a watch-side line.
+   */
+  private renderInnerRingLine() {
+    return svg`<circle
+      r=${BAND_INNER_RADIUS}
+      fill="none"
+      stroke="var(--instrument-frame-tertiary-color)"
+      stroke-width="1"
+      vector-effect="non-scaling-stroke"
+    ></circle>`;
+  }
+
   private renderPropeller() {
     return svg`<g transform="scale(${PROPELLER_SCALE}) translate(-80 -80)">${
       propellerImages[this.propeller]
@@ -448,6 +465,7 @@ export class ObcTopViewPropulsion extends LitElement {
         <obc-watch
           .touching=${this.touching}
           .arcFrame=${frame}
+          .watchCircleType=${WatchCircleType.double}
           .tickmarks=${shownTickmarks}
           .state=${this.state}
           .priority=${this.priority}
@@ -465,8 +483,8 @@ export class ObcTopViewPropulsion extends LitElement {
           .tickmarkStyle=${this.tickmarkStyle}
         ></obc-watch>
         <svg viewBox=${frame.viewBox} xmlns="http://www.w3.org/2000/svg">
-          ${this.renderLoadingArc()} ${this.renderSecondaryArc()}
-          ${this.renderPropeller()}
+          ${this.renderInnerRingLine()} ${this.renderLoadingArc()}
+          ${this.renderSecondaryArc()} ${this.renderPropeller()}
         </svg>
       </div>
     `;

package/src/navigation-instruments/watch/environment.ts

@@ -70,6 +70,16 @@ const WIND_ICON_SCALE = 2;
 const WIND_ICON_TIP_X = 12;
 const WIND_ICON_TIP_Y = 22.4453;
 
+/**
+ * Radial overhang of the rendered (2×, 48-unit) wind icon box past the tip
+ * anchor toward the watch center: the glyph tip sits at y=22.4453 of the
+ * 24-unit box, so the scaled box extends `(24 − 22.4453) × 2 ≈ 3.11` units
+ * inside the anchor radius. Add it to a desired box inner-edge radius to get
+ * the `windSymbolRadius` that makes the box start exactly there.
+ */
+export const WIND_ICON_TIP_TO_BOX_INNER =
+  (24 - WIND_ICON_TIP_Y) * WIND_ICON_SCALE;
+
 const windIconCache = new Map<string, SVGTemplateResult>();
 
 function getWindIconSvg(bucket: number): SVGTemplateResult | null {

package/src/navigation-instruments/watch/force-pattern.spec.ts

@@ -96,4 +96,46 @@ describe('renderCurrentForcePattern', () => {
     );
     expect(flat).toContain(String(-(256 * 1.39) / 2 + 104 * 1.39));
   });
+
+  it('honors wave tuning: length scales the tile, height caps opacity, speed drifts', () => {
+    const flat = flatten(
+      renderCurrentForcePattern({
+        fromDirectionDeg: 0,
+        radius: 112,
+        patternScale: 2.0,
+        waveLength: 0.75,
+        waveHeight: 0.6,
+        waveSpeed: 0.4,
+      })
+    );
+    expect(flat).toContain(`width=${48 * 2.0 * 0.75}`);
+    expect(flat).toContain('stop-opacity=0.6');
+    expect(flat).toContain('animateTransform');
+    expect(flat).toContain('dur="2.5s"');
+  });
+
+  it('is static at full intensity without wave options', () => {
+    const flat = flatten(
+      renderCurrentForcePattern({
+        fromDirectionDeg: 0,
+        radius: 112,
+        patternScale: 1.39,
+      })
+    );
+    expect(flat).not.toContain('animateTransform');
+    expect(flat).toContain('stop-opacity=1');
+  });
+
+  it('falls back to full intensity for a non-finite waveHeight', () => {
+    const flat = flatten(
+      renderCurrentForcePattern({
+        fromDirectionDeg: 0,
+        radius: 112,
+        patternScale: 1.39,
+        waveHeight: Number.NaN,
+      })
+    );
+    expect(flat).toContain('stop-opacity=1');
+    expect(flat).not.toContain('NaN');
+  });
 });

package/src/navigation-instruments/watch/force-pattern.ts

@@ -1,4 +1,4 @@
-import {svg, SVGTemplateResult} from 'lit';
+import {nothing, svg, SVGTemplateResult} from 'lit';
 
 /**
  * Options for the force-graphics pattern underlays (wind streaks / current
@@ -19,6 +19,22 @@ export interface ForcePatternOptions {
   color?: string;
 }
 
+/** Wave tuning for the current band pattern, on top of the shared options. */
+export interface CurrentForcePatternOptions extends ForcePatternOptions {
+  /**
+   * Wavelength as a multiplier on the design band spacing (1 = design,
+   * 0.5 = twice as dense). Non-finite or non-positive values fall back to 1.
+   */
+  waveLength?: number;
+  /** Wave intensity: peak opacity the band gradient fades up to (0–1). */
+  waveHeight?: number;
+  /**
+   * Drift speed in wavelengths per second, moving with the flow (negative
+   * drifts against it). 0 / undefined keeps the pattern static.
+   */
+  waveSpeed?: number;
+}
+
 const DESIGN_PATTERN_SQUARE = 256;
 const WIND_TILE = 24;
 /**
@@ -64,21 +80,39 @@ export function renderWindForcePattern(
 /**
  * Current force-graphics: soft-edged gradient bands (48-unit sawtooth,
  * transparent → opaque), perpendicular to the flow, clipped to a circle and
- * rotated by the from-direction.
+ * rotated by the from-direction. `waveLength` stretches the band spacing,
+ * `waveHeight` scales the gradient's peak opacity, and a non-zero `waveSpeed`
+ * drifts the field with the flow (one wavelength per `1/waveSpeed` seconds)
+ * via a declarative SMIL loop.
  */
 export function renderCurrentForcePattern(
-  options: ForcePatternOptions
+  options: CurrentForcePatternOptions
 ): SVGTemplateResult {
   const {fromDirectionDeg, radius, patternScale} = options;
   const color = options.color ?? DEFAULT_COLOR;
-  const tile = CURRENT_TILE * patternScale;
+  const lengthScale =
+    Number.isFinite(options.waveLength) && options.waveLength! > 0
+      ? options.waveLength!
+      : 1;
+  const intensity = Number.isFinite(options.waveHeight)
+    ? Math.max(0, Math.min(1, options.waveHeight!))
+    : 1;
+  const speed = Number.isFinite(options.waveSpeed) ? options.waveSpeed! : 0;
+  const tile = CURRENT_TILE * patternScale * lengthScale;
   const side = DESIGN_PATTERN_SQUARE * patternScale;
-  const phase = CURRENT_TILE_PHASE_OFFSET * patternScale;
+  const phase = CURRENT_TILE_PHASE_OFFSET * patternScale * lengthScale;
+  // The pattern is anchored in the rect's user space, so translating the
+  // wrapper group drifts the whole band field; the rect is one tile taller on
+  // each end to stay covering the clip disc across the loop.
+  const drift =
+    speed !== 0
+      ? svg`<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 ${tile * Math.sign(speed)}" dur="${1 / Math.abs(speed)}s" repeatCount="indefinite"/>`
+      : nothing;
   return svg`
     <defs>
       <linearGradient id="current-force-band-gradient" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
         <stop stop-color=${color} stop-opacity="0"/>
-        <stop offset="1" stop-color=${color}/>
+        <stop offset="1" stop-color=${color} stop-opacity=${intensity}/>
       </linearGradient>
       <pattern id="current-force-pattern" patternUnits="userSpaceOnUse" x=${-side / 2 + phase} y=${-side / 2 + phase} width=${tile} height=${tile} viewBox="0 0 48 48" preserveAspectRatio="none">
         <rect width="48" height="48" fill="url(#current-force-band-gradient)"/>
@@ -86,7 +120,10 @@ export function renderCurrentForcePattern(
       <clipPath id="current-force-clip"><circle cx="0" cy="0" r=${radius}/></clipPath>
     </defs>
     <g clip-path="url(#current-force-clip)" transform="rotate(${fromDirectionDeg})">
-      <rect x=${-side / 2} y=${-side / 2} width=${side} height=${side} fill="url(#current-force-pattern)"/>
+      <g>
+        ${drift}
+        <rect x=${-side / 2} y=${-side / 2 - tile} width=${side} height=${side + 2 * tile} fill="url(#current-force-pattern)"/>
+      </g>
     </g>
   `;
 }

package/src/navigation-instruments/watch/watch.ts

@@ -55,6 +55,7 @@ import {
   renderCurrent,
   renderCurrentCentered,
   renderWind,
+  WIND_ICON_TIP_TO_BOX_INNER,
 } from './environment.js';
 import {customElement} from '../../decorator.js';
 import {type ZoomToFitArcFrame} from '../../svghelpers/arc-frame.js';
@@ -130,6 +131,17 @@ export function innerRingRadiusFor(type: WatchCircleType): number {
 
 const RADIAL_SETPOINT_INWARD_ADJUST = 4;
 
+/**
+ * Default anchors for the wind/current icons outside the outer ring (the
+ * compass layout): the 48-unit icon box sits 4 units off the ring, spanning
+ * 188–236 (OpenBridge 6.1 compass, node 19846-157200). The current chevron
+ * anchors by its tip at the box inner edge; the wind anchor adds the glyph's
+ * inward overhang so its box starts at the same edge.
+ */
+const CURRENT_ICON_OUTSIDE_RADIUS = OUTER_RING_RADIUS + 4;
+const WIND_ICON_OUTSIDE_RADIUS =
+  CURRENT_ICON_OUTSIDE_RADIUS + WIND_ICON_TIP_TO_BOX_INNER;
+
 /**
  * `<obc-watch>` - Core SVG renderer for circular/radial watch-based instruments.
  *
@@ -966,10 +978,13 @@ export class ObcWatch extends LitElement {
       : nothing;
 
     // Compute label positions once – used for both rendering and crosshair
-    // knockout. NSWE labels and the north arrow are px-fixed outside decor,
-    // so they follow the same labelsHidden degradation as tick label texts.
+    // knockout. NSWE labels are px-fixed outside decor, so they follow the
+    // same labelsHidden degradation as tick label texts. The north arrow is
+    // exempt: below the small-scale threshold it renders as a compact
+    // triangle at the ring that scales with the face, so it stays visible
+    // on the smallest faces without clipping.
     const showNsweLabels = this.showLabels && !this._labelsHidden;
-    const showNorthArrow = this.northArrow && !this._labelsHidden;
+    const showNorthArrow = this.northArrow;
     const insideLabels = this.tickmarksInside && showNsweLabels;
     const includeNorth = !this.northArrow;
     const labelPositions = showNsweLabels
@@ -1006,7 +1021,7 @@ export class ObcWatch extends LitElement {
         ? svg`<g transform="scale(${this.scaleWindIcon})">${renderWind({
             windKnots: this.windKnots,
             fromDirectionDeg: this.windFromDirectionDeg,
-            radius: this.windSymbolRadius ?? 192,
+            radius: this.windSymbolRadius ?? WIND_ICON_OUTSIDE_RADIUS,
             color: this.windColor,
           })}</g>`
         : nothing;
@@ -1022,7 +1037,7 @@ export class ObcWatch extends LitElement {
           : renderCurrent({
               current: this.current,
               fromDirectionDeg: this.currentFromDirectionDeg,
-              radius: this.currentSymbolRadius ?? 192,
+              radius: this.currentSymbolRadius ?? CURRENT_ICON_OUTSIDE_RADIUS,
               color: this.currentColor,
             })
         : nothing;

package/src/navigation-instruments/wind/wind.spec.ts

@@ -3,8 +3,10 @@ import {resolveWindArrowPlacement, WindVariant} from './wind.js';
 
 describe('resolveWindArrowPlacement', () => {
   it('matches the OpenBridge 6.1 design values (effective tip = radius × scale)', () => {
+    // Large: 48-unit icon box fills the double-face track band (112–160);
+    // tip anchor = 112 + inward overhang 3.1094 of the 2× glyph.
     expect(resolveWindArrowPlacement(WindVariant.large)).toEqual({
-      windSymbolRadius: 119,
+      windSymbolRadius: 112 + (24 - 22.4453) * 2,
       scaleWindIcon: 1.0,
     });
     expect(resolveWindArrowPlacement(WindVariant.medium)).toEqual({

package/src/navigation-instruments/wind/wind.ts

@@ -7,6 +7,7 @@ import {
   WatchCircleType,
   innerRingRadiusFor,
 } from '../watch/watch.js';
+import {WIND_ICON_TIP_TO_BOX_INNER} from '../watch/environment.js';
 import {renderWindForcePattern} from '../watch/force-pattern.js';
 import {Priority} from '../types.js';
 import {customElement} from '../../decorator.js';
@@ -320,8 +321,11 @@ function resolveHistogramMaxRadius(variant: ResolvedWindVariant): number {
  * `scaleWindIcon` scales the arrow glyph — and, because the scale group wraps
  * the translated glyph, the effective tip radius is `radius × scale`.
  *
- * Values measured from the OpenBridge 6.1 Figma (node 6552-102891):
- * large tip ≈119 (inner-ring edge), medium ≈93, small ≈8 (touching center).
+ * Large places the 48-unit icon box exactly inside the double-face track
+ * band (112–160), per the OpenBridge 6.1 design (the icon box spans the
+ * band, node 19663-140867); the tip anchor is the box inner edge plus the
+ * glyph's inward overhang. Medium ≈93 and small ≈8 (touching center) are
+ * measured from the Figma variants (node 6552-102891).
  */
 export function resolveWindArrowPlacement(variant: ResolvedWindVariant): {
   windSymbolRadius: number;
@@ -329,7 +333,12 @@ export function resolveWindArrowPlacement(variant: ResolvedWindVariant): {
 } {
   switch (variant) {
     case WindVariant.large:
-      return {windSymbolRadius: 119, scaleWindIcon: 1.0};
+      return {
+        windSymbolRadius:
+          innerRingRadiusFor(WatchCircleType.double) +
+          WIND_ICON_TIP_TO_BOX_INNER,
+        scaleWindIcon: 1.0,
+      };
     case WindVariant.medium:
       return {windSymbolRadius: 62, scaleWindIcon: 1.5};
     case WindVariant.small: