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

package/src/automation/indicator-tank-atmospheric/indicator-tank-atmospheric.stories.ts

@@ -0,0 +1,94 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  ObcIndicatorTankAtmospheric,
+  IndicatorTankAtmosphericVariant,
+  IndicatorTankAtmosphericValue,
+} from './indicator-tank-atmospheric.js';
+import './indicator-tank-atmospheric.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+const meta = {
+  title: 'Automation/Indicators/Indicator Tank Atmospheric',
+  component: 'obc-indicator-tank-atmospheric',
+  tags: ['autodocs', '6.0'],
+  args: {
+    direction: IndicatorDirection.vertical,
+    variant: IndicatorTankAtmosphericVariant.bar,
+    value: IndicatorTankAtmosphericValue.regular,
+    level: 40,
+    data: [60, 52, 58, 45, 50, 42, 44, 40],
+    hasIcon: false,
+  },
+  argTypes: {
+    direction: {
+      control: 'radio',
+      options: Object.values(IndicatorDirection),
+    },
+    variant: {
+      control: 'radio',
+      options: Object.values(IndicatorTankAtmosphericVariant),
+    },
+    value: {
+      control: 'radio',
+      options: Object.values(IndicatorTankAtmosphericValue),
+    },
+    level: {control: {type: 'range', min: 0, max: 100}},
+  },
+  render: (args) => html`
+    <obc-indicator-tank-atmospheric
+      .direction=${args.direction}
+      .variant=${args.variant}
+      .value=${args.value}
+      .level=${args.level}
+      .data=${args.data}
+      .hasIcon=${args.hasIcon}
+    ></obc-indicator-tank-atmospheric>
+  `,
+} satisfies Meta<Partial<ObcIndicatorTankAtmospheric>>;
+
+export default meta;
+type Story = StoryObj<Partial<ObcIndicatorTankAtmospheric>>;
+
+export const Default: Story = {};
+
+export const BarHorizontal: Story = {
+  args: {direction: IndicatorDirection.horizontal},
+};
+
+export const TrendVertical: Story = {
+  args: {variant: IndicatorTankAtmosphericVariant.trend},
+};
+
+export const TrendHorizontal: Story = {
+  args: {
+    variant: IndicatorTankAtmosphericVariant.trend,
+    direction: IndicatorDirection.horizontal,
+  },
+};
+
+export const Enhanced: Story = {
+  args: {value: IndicatorTankAtmosphericValue.enhanced},
+};
+
+export const Medium: Story = {
+  args: {value: IndicatorTankAtmosphericValue.medium},
+};
+
+export const TrendEnhanced: Story = {
+  args: {
+    variant: IndicatorTankAtmosphericVariant.trend,
+    value: IndicatorTankAtmosphericValue.enhanced,
+  },
+};
+
+export const TrendMedium: Story = {
+  args: {
+    variant: IndicatorTankAtmosphericVariant.trend,
+    value: IndicatorTankAtmosphericValue.medium,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {hasIcon: true},
+};

package/src/automation/indicator-tank-atmospheric/indicator-tank-atmospheric.ts

@@ -0,0 +1,138 @@
+import {LitElement, html, unsafeCSS, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import componentStyle from './indicator-tank-atmospheric.css?inline';
+import {customElement} from '../../decorator.js';
+import '../../icons/icon-tank.js';
+import {
+  IndicatorDirection,
+  LinearIndicatorScheme,
+  Rect,
+  renderLinearBar,
+  renderTrendGraph,
+} from '../indicator-shared/linear-indicator.js';
+
+export enum IndicatorTankAtmosphericVariant {
+  bar = 'bar',
+  trend = 'trend',
+}
+
+export enum IndicatorTankAtmosphericValue {
+  regular = 'regular',
+  enhanced = 'enhanced',
+  medium = 'medium',
+}
+
+const HORIZONTAL_BAR: Rect = {x: 8, y: 11, width: 32, height: 26};
+const VERTICAL_BAR: Rect = {x: 11, y: 8, width: 26, height: 32};
+const HORIZONTAL_TREND: Rect = {x: 8, y: 10, width: 32, height: 28};
+const VERTICAL_TREND: Rect = {x: 10, y: 8, width: 28, height: 32};
+
+const FRAME_PATH =
+  'M20.5 32.5L4.21259 32.5C3.70663 32.5 3.45364 32.5 3.09178 32.3531C2.84817 32.2542 2.44102 31.9492 2.27758 31.7433C2.0348 31.4373 1.98325 31.2615 1.88017 30.9098C1.29286 28.906 0.5 24.6852 0.5 16.5C0.5 8.31487 1.29286 4.09402 1.88016 2.09025C1.98325 1.73854 2.0348 1.56268 2.27758 1.25676C2.44102 1.0508 2.84817 0.745859 3.09178 0.646944C3.45364 0.500011 3.70662 0.500011 4.21259 0.500011L20.5 0.50001L36.7874 0.500011C37.2934 0.500011 37.5464 0.500011 37.9082 0.646943C38.1518 0.745859 38.559 1.0508 38.7224 1.25675C38.9652 1.56268 39.0167 1.73854 39.1198 2.09025C39.7071 4.09402 40.5 8.31487 40.5 16.5C40.5 24.6851 39.7071 28.906 39.1198 30.9098C39.0167 31.2615 38.9652 31.4373 38.7224 31.7433C38.559 31.9492 38.1518 32.2542 37.9082 32.3531C37.5464 32.5 37.2934 32.5 36.7874 32.5H20.5Z';
+
+/**
+ * Compact 48×48 atmospheric tank level indicator.
+ *
+ * ## Features / Variants
+ * - `variant`: `bar` (bottom-up percentage fill) or `trend` (history graph
+ *   with a current-value micro-bar)
+ * - `direction`: `vertical` or `horizontal` tank outline
+ * - `value`: color scheme — `regular`, `enhanced` or `medium`
+ * - `level`: current tank level 0–100 (%), drives the fill and micro-bar
+ * - `data`: history samples 0–100 (%) drawn as the trend graph
+ * - `hasIcon`: centered icon overlay (bar variant only)
+ *
+ * ## Usage Guidelines
+ * Use as an at-a-glance level indicator in dashboards and lists. For a
+ * full-featured tank cell with readouts, badges and setpoints, use
+ * `obc-automation-tank` instead.
+ *
+ * ## Best Practices / Constraints
+ * - `level` and `data` values are clamped to 0–100; values outside that
+ *   range are pinned to the nearest bound.
+ * - The `trend` variant needs at least two `data` samples to draw a line;
+ *   with fewer it shows only the current-value micro-bar.
+ * - The `icon` slot renders only in the `bar` variant; it is ignored in
+ *   `trend`.
+ * - Display-only: the root SVG is `aria-hidden`; convey tank level to
+ *   assistive tech through adjacent text if it is not otherwise available.
+ *
+ * ## Slots
+ * | Slot   | Condition                     | Purpose                        |
+ * | ------ | ----------------------------- | ------------------------------ |
+ * | `icon` | `hasIcon` and `variant='bar'` | Icon overlay (`obi-*` element) |
+ *
+ * @slot icon - Centered icon overlay, defaults to `obi-tank`
+ */
+@customElement('obc-indicator-tank-atmospheric')
+export class ObcIndicatorTankAtmospheric extends LitElement {
+  @property({type: String, reflect: true}) direction: IndicatorDirection =
+    IndicatorDirection.vertical;
+  @property({type: String, reflect: true})
+  variant: IndicatorTankAtmosphericVariant =
+    IndicatorTankAtmosphericVariant.bar;
+  @property({type: String, reflect: true})
+  value: IndicatorTankAtmosphericValue = IndicatorTankAtmosphericValue.regular;
+  /** Current level, 0-100 (%) */
+  @property({type: Number}) level = 0;
+  /** History samples, 0-100 (%) each, oldest first */
+  @property({type: Array}) data: number[] = [];
+  @property({type: Boolean}) hasIcon = false;
+
+  private get scheme(): LinearIndicatorScheme {
+    switch (this.value) {
+      case IndicatorTankAtmosphericValue.enhanced:
+        return LinearIndicatorScheme.enhanced;
+      case IndicatorTankAtmosphericValue.medium:
+        return LinearIndicatorScheme.categorical;
+      default:
+        return LinearIndicatorScheme.regular;
+    }
+  }
+
+  override render() {
+    const horizontal = this.direction === IndicatorDirection.horizontal;
+    const trend = this.variant === IndicatorTankAtmosphericVariant.trend;
+    const barRect = horizontal
+      ? trend
+        ? HORIZONTAL_TREND
+        : HORIZONTAL_BAR
+      : trend
+        ? VERTICAL_TREND
+        : VERTICAL_BAR;
+    const frameTransform = horizontal
+      ? 'translate(3.5 7.5)'
+      : 'rotate(90 24 24) translate(3.5 7.5)';
+    const showIcon =
+      this.hasIcon && this.variant === IndicatorTankAtmosphericVariant.bar;
+    return html`
+      <svg viewBox="0 0 48 48" aria-hidden="true">
+        <g transform=${frameTransform}>
+          <path class="frame" d=${FRAME_PATH} />
+        </g>
+        ${this.variant === IndicatorTankAtmosphericVariant.trend
+          ? renderTrendGraph(
+              barRect,
+              this.data,
+              this.level,
+              this.scheme,
+              'tank'
+            )
+          : renderLinearBar(barRect, this.level, this.scheme, 'tank')}
+      </svg>
+      ${showIcon
+        ? html`<div class="icon-wrapper">
+            <slot name="icon"><obi-tank usecsscolor></obi-tank></slot>
+          </div>`
+        : nothing}
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-tank-atmospheric': ObcIndicatorTankAtmospheric;
+  }
+}

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

@@ -262,7 +262,7 @@ export class ObcCompass extends LitElement {
   /** @availableWhen priority==enhanced */
   @property({type: Array, attribute: false})
   priorityElements: CompassPriorityElement[] = [CompassPriorityElement.hdg];
-  /** Show compass NSEW labels and north arrow. */
+  /** Show compass NSEW labels. The north arrow is always shown, independent of this flag. */
   @property({type: Boolean}) showLabels: boolean = false;
   /** When true, labels and north arrow are placed inside the outer ring. */
   @property({type: Boolean}) tickmarksInside: boolean = false;
@@ -424,7 +424,7 @@ export class ObcCompass 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/current/current.stories.ts

@@ -38,6 +38,21 @@ const meta: Meta<typeof ObcCurrent> = {
       control: 'select',
       options: topVessels,
     },
+    hasPattern: {control: 'boolean'},
+    waveLength: {
+      control: {type: 'range', min: 0.25, max: 3, step: 0.05},
+      description:
+        'Wavelength multiplier on the design band spacing (1 = design).',
+    },
+    waveHeight: {
+      control: {type: 'range', min: 0, max: 1, step: 0.05},
+      description: 'Peak opacity the pattern bands fade up to.',
+    },
+    waveSpeed: {
+      control: {type: 'range', min: -2, max: 2, step: 0.1},
+      description:
+        'Pattern drift in wavelengths per second, with the flow (0 = static).',
+    },
   },
 } satisfies Meta<ObcCurrent>;
 
@@ -59,3 +74,21 @@ export const VesselEnhanced: Story = {
 export const DirectionEnhanced: Story = {
   args: {type: CurrentType.direction, priority: Priority.enhanced},
 };
+
+export const WithoutPattern: Story = {
+  args: {hasPattern: false},
+};
+
+/** Denser, softer waves: half the design wavelength at reduced intensity. */
+export const WaveTuned: Story = {
+  args: {waveLength: 0.5, waveHeight: 0.6},
+};
+
+/**
+ * The pattern drifts with the flow at `waveSpeed` wavelengths per second
+ * (excluded from visual tests because it animates continuously).
+ */
+export const AnimatedWaves: Story = {
+  tags: ['skip-test'],
+  args: {waveSpeed: 0.4},
+};

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>
   `;
 }