@oicl/openbridge-webcomponents 0.0.20260407101310 → 0.0.20260407112816

package/dist/navigation-instruments/watch/tickmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"tickmark.js","sources":["../../../src/navigation-instruments/watch/tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n  angle: number;\n  type: TickmarkType;\n  text?: string;\n  color?: string;\n}\n\nexport enum TickmarkType {\n  zeroLineThick = 'zeroLineThick',\n  zeroLine = 'zeroLine',\n  main = 'main',\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n  textOnly = 'textOnly',\n}\n\nexport enum TickmarkStyle {\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(\n  style: TickmarkStyle,\n  tickmarkType?: TickmarkType\n): string {\n  if (style === TickmarkStyle.regular) {\n    return 'var(--instrument-tick-mark-tertiary-color)';\n  } else {\n    if (tickmarkType === TickmarkType.tertiary) {\n      return 'var(--instrument-tick-mark-secondary-color)';\n    }\n    return 'var(--instrument-tick-mark-primary-color)';\n  }\n}\n\nexport function tickmark(\n  angle: number,\n  {\n    size,\n    style,\n    scale,\n    text,\n    inside,\n    textRadius,\n    rotation,\n    maxDigits,\n    color,\n  }: {\n    size: TickmarkType;\n    style: TickmarkStyle;\n    scale: number;\n    text?: string;\n    inside: boolean;\n    textRadius: number;\n    rotation?: number;\n    maxDigits: number;\n    color?: string;\n  }\n): SVGTemplateResult | SVGTemplateResult[] {\n  // check if scale is not infinite\n  if (scale === Infinity || scale < 0) {\n    throw new Error('Tick scale is not valid');\n  }\n  let innerRadius: number;\n  let outerRadius: number;\n  textRadius = textRadius + (3 / scale + 3) * (inside ? -1 : 1);\n  const rad = (angle * Math.PI) / 180;\n  if (size === TickmarkType.primary) {\n    innerRadius = 328 / 2;\n    outerRadius = 368 / 2;\n  } else if (size === TickmarkType.secondary) {\n    innerRadius = 328 / 2;\n    outerRadius = 344 / 2;\n  } else if (size === TickmarkType.main || size === TickmarkType.zeroLine) {\n    innerRadius = 320 / 2;\n    outerRadius = 368 / 2;\n  } else if (size === TickmarkType.zeroLineThick) {\n    innerRadius = 224 / 2;\n    outerRadius = 368 / 2;\n  } else if (size === TickmarkType.tertiary) {\n    innerRadius = 328 / 2;\n    outerRadius = 336 / 2;\n  } else {\n    return [textSvg(text ?? '', angle, inside, scale, textRadius)];\n  }\n\n  // When inside, anchor ticks at the outer ring edge and grow inward,\n  // preserving the same gap from the ring edge as the outside case.\n  // Outside: gap = innerRadius - RING2 (320/2). E.g. secondary: 164 - 160 = 4px gap.\n  // Inside: mirror that gap from the outer ring (368/2).\n  if (inside) {\n    const outerRingRadius = 368 / 2;\n    const ring2Radius = 320 / 2;\n    const tickLength = outerRadius - innerRadius;\n    const gapFromRingEdge = Math.max(0, innerRadius - ring2Radius);\n    outerRadius = outerRingRadius - gapFromRingEdge;\n    innerRadius = outerRadius - tickLength;\n  }\n  const colorName = color ?? tickmarkColor(style, size);\n\n  const x1 = Math.sin(rad) * innerRadius;\n  const y1 = -Math.cos(rad) * innerRadius;\n  const x2 = Math.sin(rad) * outerRadius;\n  const y2 = -Math.cos(rad) * outerRadius;\n  const strokeWidth =\n    size === TickmarkType.zeroLine || size === TickmarkType.zeroLineThick\n      ? 4\n      : 1;\n  const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    if (rotation === undefined) {\n      return [tick, textSvg(text, angle, inside, scale, textRadius)];\n    } else {\n      const newRadius =\n        textRadius + ((4 / scale + 5) * (inside ? -1 : 1) * maxDigits) / 2;\n      const textX = Math.sin(rad) * newRadius;\n      const textY = -Math.cos(rad) * newRadius;\n      return [\n        tick,\n        svg`<text x=${textX} y=${textY} class=\"label rotate ${inside ? 'inside' : ''}\" transform=\"rotate(${-rotation})\" transform-origin=\"${textX} ${textY}\">${text}</text>`,\n      ];\n    }\n  }\n  return tick;\n}\n\nfunction textSvg(\n  text: string,\n  angle: number,\n  inside: boolean,\n  scale: number,\n  textRadius: number\n) {\n  let positionClass;\n  if (angle === 0) {\n    positionClass = 'top';\n  } else if (angle < 180 && angle > 0) {\n    positionClass = 'right';\n  } else if (angle === 180) {\n    positionClass = 'bottom';\n  } else {\n    positionClass = 'left';\n  }\n  const rad = (angle * Math.PI) / 180;\n  const insideGain = inside ? -1 : 1;\n  const yOffset = (7 / scale) * insideGain;\n  const xOffset = (6 / scale) * insideGain;\n\n  let textX = Math.sin(rad) * (textRadius + xOffset);\n  if (angle > 180) {\n    textX += (4 / scale) * insideGain;\n  } else if (angle < 180 && angle > 0) {\n    textX -= (4 / scale) * insideGain;\n  }\n  const textY = -Math.cos(rad) * (textRadius + yOffset);\n  return svg`<text x=${textX} y=${textY} class=\"label ${positionClass} ${inside ? 'inside' : ''}\">${text}</text>`;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":"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"}
+{"version":3,"file":"tickmark.js","sources":["../../../src/navigation-instruments/watch/tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n  angle: number;\n  type: TickmarkType;\n  text?: string;\n  color?: string;\n}\n\nexport enum TickmarkType {\n  zeroLineThick = 'zeroLineThick',\n  zeroLine = 'zeroLine',\n  main = 'main',\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n  textOnly = 'textOnly',\n}\n\nexport enum TickmarkStyle {\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(\n  style: TickmarkStyle,\n  tickmarkType?: TickmarkType\n): string {\n  if (style === TickmarkStyle.regular) {\n    return 'var(--instrument-tick-mark-tertiary-color)';\n  } else {\n    if (tickmarkType === TickmarkType.tertiary) {\n      return 'var(--instrument-tick-mark-secondary-color)';\n    }\n    return 'var(--instrument-tick-mark-primary-color)';\n  }\n}\n\nexport function tickmark(\n  angle: number,\n  {\n    size,\n    style,\n    scale,\n    text,\n    inside,\n    textRadius,\n    rotation,\n    maxDigits,\n    color,\n    radiusOffset = 0,\n  }: {\n    size: TickmarkType;\n    style: TickmarkStyle;\n    scale: number;\n    text?: string;\n    inside: boolean;\n    textRadius: number;\n    rotation?: number;\n    maxDigits: number;\n    color?: string;\n    radiusOffset?: number;\n  }\n): SVGTemplateResult | SVGTemplateResult[] {\n  // check if scale is not infinite\n  if (scale === Infinity || scale < 0) {\n    throw new Error('Tick scale is not valid');\n  }\n  const rOff = radiusOffset;\n  let innerRadius: number;\n  let outerRadius: number;\n  textRadius = textRadius + (3 / scale + 3) * (inside ? -1 : 1);\n  const rad = (angle * Math.PI) / 180;\n  if (size === TickmarkType.primary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.secondary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 344 / 2 + rOff;\n  } else if (size === TickmarkType.main || size === TickmarkType.zeroLine) {\n    innerRadius = 320 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.zeroLineThick) {\n    innerRadius = 224 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.tertiary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 336 / 2 + rOff;\n  } else {\n    return [textSvg(text ?? '', angle, inside, scale, textRadius)];\n  }\n\n  // When inside, anchor ticks at the outer ring edge and grow inward,\n  // preserving the same gap from the ring edge as the outside case.\n  // Outside: gap = innerRadius - RING2 (320/2). E.g. secondary: 164 - 160 = 4px gap.\n  // Inside: mirror that gap from the outer ring (368/2).\n  if (inside) {\n    const outerRingRadius = 368 / 2 + rOff;\n    const ring2Radius = 320 / 2 + rOff;\n    const tickLength = outerRadius - innerRadius;\n    const gapFromRingEdge = Math.max(0, innerRadius - ring2Radius);\n    outerRadius = outerRingRadius - gapFromRingEdge;\n    innerRadius = outerRadius - tickLength;\n  }\n  const colorName = color ?? tickmarkColor(style, size);\n\n  const x1 = Math.sin(rad) * innerRadius;\n  const y1 = -Math.cos(rad) * innerRadius;\n  const x2 = Math.sin(rad) * outerRadius;\n  const y2 = -Math.cos(rad) * outerRadius;\n  const strokeWidth =\n    size === TickmarkType.zeroLine || size === TickmarkType.zeroLineThick\n      ? 4\n      : 1;\n  const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    if (rotation === undefined) {\n      return [tick, textSvg(text, angle, inside, scale, textRadius)];\n    } else {\n      const newRadius =\n        textRadius + ((4 / scale + 5) * (inside ? -1 : 1) * maxDigits) / 2;\n      const textX = Math.sin(rad) * newRadius;\n      const textY = -Math.cos(rad) * newRadius;\n      return [\n        tick,\n        svg`<text x=${textX} y=${textY} class=\"label rotate ${inside ? 'inside' : ''}\" transform=\"rotate(${-rotation})\" transform-origin=\"${textX} ${textY}\">${text}</text>`,\n      ];\n    }\n  }\n  return tick;\n}\n\nfunction textSvg(\n  text: string,\n  angle: number,\n  inside: boolean,\n  scale: number,\n  textRadius: number\n) {\n  let positionClass;\n  if (angle === 0) {\n    positionClass = 'top';\n  } else if (angle < 180 && angle > 0) {\n    positionClass = 'right';\n  } else if (angle === 180) {\n    positionClass = 'bottom';\n  } else {\n    positionClass = 'left';\n  }\n  const rad = (angle * Math.PI) / 180;\n  const insideGain = inside ? -1 : 1;\n  const yOffset = (7 / scale) * insideGain;\n  const xOffset = (6 / scale) * insideGain;\n\n  let textX = Math.sin(rad) * (textRadius + xOffset);\n  if (angle > 180) {\n    textX += (4 / scale) * insideGain;\n  } else if (angle < 180 && angle > 0) {\n    textX -= (4 / scale) * insideGain;\n  }\n  const textY = -Math.cos(rad) * (textRadius + yOffset);\n  return svg`<text x=${textX} y=${textY} class=\"label ${positionClass} ${inside ? 'inside' : ''}\">${text}</text>`;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":"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"}

package/dist/navigation-instruments/watch/watch.d.ts

@@ -2,8 +2,11 @@ import { LitElement, PropertyValues } from 'lit';
 import { InstrumentState, Priority } from '../types.js';
 import { AngleAdviceRaw } from './advice.js';
 import { Tickmark, TickmarkStyle } from './tickmark.js';
+import { RotType, RotPosition } from '../rate-of-turn/rot-renderer.js';
 import { VesselImage, VesselImageSize } from './vessel.js';
+import { ZoomToFitArcFrame } from '../../svghelpers/arc-frame.js';
 export { TickmarkStyle };
+export { RotType, RotPosition };
 export { VesselImage, VesselImageSize };
 export declare enum WatchCircleType {
     single = "single",
@@ -33,6 +36,7 @@ export interface WatchVessel {
     vesselImage: VesselImage;
 }
 export declare const OUTER_RING_RADIUS: number;
+export declare function innerRingRadiusFor(type: WatchCircleType): number;
 /**
  * `<obc-watch>` - Core SVG renderer for circular/radial watch-based instruments.
  *
@@ -88,6 +92,13 @@ export declare const OUTER_RING_RADIUS: number;
  * @property {boolean} atAngleSetpoint - Whether value matches setpoint (within deadband)
  * @property {number} angleSetpointAtZeroDeadband - Deadband for zero detection (default 0.5°)
  * @property {boolean} setpointOverride - Override to derive setpoint color from priority regardless of state
+ * @property {RotType|undefined} rotType - ROT visualization type: `'dots'` (spinning dots) or `'bar'` (arc bar with clipped dots). Undefined hides the ROT layer.
+ * @property {RotPosition} rotPosition - Track on which ROT elements are placed: `'scale'` (on the outer ring) or `'innerCircle'` (default, inside the inner ring)
+ * @property {number} rotStartAngle - Start angle of the ROT bar arc in degrees (0° = 12 o'clock, clockwise). Only used when `rotType` is `'bar'`.
+ * @property {number} rotEndAngle - End angle of the ROT bar arc in degrees. The bar is hidden when the difference from `rotStartAngle` is less than 0.1°.
+ * @property {Priority|undefined} rotPriority - Override priority for ROT color derivation. When set, ROT colors use this instead of the main `priority`. Useful when the ROT element has independent priority (e.g. compass per-element priority).
+ * @property {number} rotationsPerMinute - Spin speed of the ROT dot ring in rotations per minute. Sign controls direction (positive = clockwise).
+ * @property {ZoomToFitArcFrame|undefined} arcFrame - Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation.
  */
 export declare class ObcWatch extends LitElement {
     private _setpointId;
@@ -96,6 +107,7 @@ export declare class ObcWatch extends LitElement {
     priority: Priority;
     watchCircleType: WatchCircleType;
     northArrow: boolean;
+    northArrowInside: boolean | undefined;
     angleSetpoint: number | undefined;
     newAngleSetpoint: number | undefined;
     atAngleSetpoint: boolean;
@@ -137,17 +149,34 @@ export declare class ObcWatch extends LitElement {
     clipBottom: number;
     scaleWindIcon: number;
     rotation: number | undefined;
+    zoomToFitArc: boolean;
+    arcFrame: ZoomToFitArcFrame | undefined;
+    tickFadeAngle: number;
+    rotType: RotType | undefined;
+    rotPosition: RotPosition;
+    rotStartAngle: number;
+    rotEndAngle: number;
+    rotPriority: Priority | undefined;
+    set rotationsPerMinute(value: number);
+    get rotationsPerMinute(): number;
+    private _rotationsPerMinute;
+    private _rotController?;
     private _resizeController;
     willUpdate(changed: PropertyValues): void;
     disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
     private get innerRingRadius();
+    private _rOff;
     private watchCircle;
+    private _renderTickFadeDefs;
     private renderCrosshair;
     private renderBars;
     private renderNeedles;
     private getScale;
     private getPadding;
     render(): import('lit-html').TemplateResult<1>;
+    private getRotColors;
+    private renderRot;
     private renderSetpoint;
     private renderVesselImage;
     private renderStarboardPortIndicator;

package/dist/navigation-instruments/watch/watch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/watch/watch.js

@@ -1,18 +1,21 @@
 import { unsafeCSS, LitElement, svg, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { circle } from "../../svghelpers/circle.js";
-import { getSetpointAnimationDurationMs, deriveRadialSetpointConfig, drawSetpointMarker, cssSafeAngle, SETPOINT_ANIMATION_CSS_VAR, SETPOINT_ANIMATION_DURATION_DEFAULT, getSetpointOutwardOffset, SetpointVisualState, RADIAL_SETPOINT_RADIUS } from "../../svghelpers/setpoint.js";
+import { getSetpointAnimationDurationMs, deriveRadialSetpointConfig, RADIAL_SETPOINT_RADIUS, drawSetpointMarker, cssSafeAngle, SETPOINT_ANIMATION_CSS_VAR, SETPOINT_ANIMATION_DURATION_DEFAULT, getSetpointOutwardOffset, SetpointVisualState } from "../../svghelpers/setpoint.js";
 import { roundedArch } from "../../svghelpers/roundedArch.js";
 import { InstrumentState, Priority } from "../types.js";
 import compentStyle from "./watch.css.js";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { renderAdvice, adviceMask } from "./advice.js";
 import { TickmarkStyle, tickmark } from "./tickmark.js";
+import { RotPosition, RotType, shortestAngularDeltaDeg, renderRotBarStatic, renderRotBarDots, renderRotDots } from "../rate-of-turn/rot-renderer.js";
+import { disposeRotController, RateOfTurnController } from "../rate-of-turn/rate-of-turn.controller.js";
 import { getLabelPositions, renderLabels, renderNorthArrow } from "./label.js";
 import { VesselImageSize, vesselImages } from "./vessel.js";
 import { VesselImage } from "./vessel.js";
 import { renderWind, renderCurrent } from "./environment.js";
 import { customElement } from "../../decorator.js";
+import { computeZoomToFitArcFrame } from "../../svghelpers/arc-frame.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -35,6 +38,20 @@ const RING2_RADIUS = 320 / 2;
 const RING3_RADIUS = 224 / 2;
 const RING3B_RADIUS = 272 / 2;
 const RING4_RADIUS = 176 / 2;
+function innerRingRadiusFor(type) {
+  switch (type) {
+    case "single":
+      return RING2_RADIUS;
+    case "double":
+      return RING3_RADIUS;
+    case "doubleThin":
+      return RING3B_RADIUS;
+    case "triple":
+      return RING4_RADIUS;
+    default:
+      throw new Error(`Unknown WatchCircleType: ${type}`);
+  }
+}
 const RADIAL_SETPOINT_INWARD_ADJUST = 4;
 let ObcWatch = class extends LitElement {
   constructor() {
@@ -72,7 +89,23 @@ let ObcWatch = class extends LitElement {
     this.clipTop = 0;
     this.clipBottom = 0;
     this.scaleWindIcon = 1;
+    this.zoomToFitArc = false;
+    this.tickFadeAngle = 0;
+    this.rotPosition = RotPosition.innerCircle;
+    this.rotStartAngle = 0;
+    this.rotEndAngle = 0;
+    this._rotationsPerMinute = 0;
     this._resizeController = new ResizeController(this, {});
+    this._rOff = 0;
+  }
+  set rotationsPerMinute(value) {
+    this._rotationsPerMinute = value;
+    if (this._rotController) {
+      this._rotController.rotationsPerMinute = value;
+    }
+  }
+  get rotationsPerMinute() {
+    return this._rotationsPerMinute;
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -91,18 +124,26 @@ let ObcWatch = class extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     clearTimeout(this._animationTimer);
+    this._rotController = disposeRotController(this, this._rotController);
   }
-  get innerRingRadius() {
-    if (this.watchCircleType === "single") {
-      return RING2_RADIUS;
-    } else if (this.watchCircleType === "double") {
-      return RING3_RADIUS;
-    } else if (this.watchCircleType === "doubleThin") {
-      return RING3B_RADIUS;
-    } else if (this.watchCircleType === "triple") {
-      return RING4_RADIUS;
+  updated(changed) {
+    super.updated(changed);
+    const el = this.rotType ? this.renderRoot.querySelector("#rot-spinner") : null;
+    if (!el) {
+      this._rotController = disposeRotController(this, this._rotController);
+      return;
+    }
+    if (!this._rotController || this._rotController.el !== el) {
+      this._rotController = disposeRotController(this, this._rotController);
+      this._rotController = new RateOfTurnController(
+        this,
+        el,
+        this._rotationsPerMinute
+      );
     }
-    throw new Error(`Invalid watch circle type: ${this.watchCircleType}`);
+  }
+  get innerRingRadius() {
+    return innerRingRadiusFor(this.watchCircleType);
   }
   watchCircle() {
     const rings = [];
@@ -111,14 +152,14 @@ let ObcWatch = class extends LitElement {
         <circle
           cx="0"
           cy="0"
-          r="172"
+          r="${172 + this._rOff}"
           stroke="var(--instrument-frame-primary-color)"
           fill="none"
           stroke-width="24"
         />`);
       if (this.watchCircleType !== "single") {
-        const r1 = RING2_RADIUS;
-        const r2 = this.watchCircleType === "doubleThin" ? RING3B_RADIUS : RING3_RADIUS;
+        const r1 = RING2_RADIUS + this._rOff;
+        const r2 = (this.watchCircleType === "doubleThin" ? RING3B_RADIUS : RING3_RADIUS) + this._rOff;
         const r = (r1 + r2) / 2;
         const strokeWidth = r1 - r2;
         rings.push(
@@ -130,8 +171,8 @@ let ObcWatch = class extends LitElement {
         );
       }
       if (this.watchCircleType === "triple") {
-        const r1 = RING3_RADIUS;
-        const r2 = RING4_RADIUS;
+        const r1 = RING3_RADIUS + this._rOff;
+        const r2 = RING4_RADIUS + this._rOff;
         const r = (r1 + r2) / 2;
         const strokeWidth = r1 - r2;
         rings.push(
@@ -139,24 +180,35 @@ let ObcWatch = class extends LitElement {
         );
       }
     }
+    const maskSize = Math.max(200, OUTER_RING_RADIUS + this._rOff + 50);
     let result = rings;
     if (this.areas.length > 0) {
       const areas = this.areas.map((area) => {
         const svgPath = roundedArch({
           startAngle: area.startAngle,
           endAngle: area.endAngle,
-          R: OUTER_RING_RADIUS,
-          r: this.innerRingRadius,
+          R: OUTER_RING_RADIUS + this._rOff,
+          r: this.innerRingRadius + this._rOff,
           roundOutsideCut: area.roundOutsideCut,
           roundInsideCut: area.roundInsideCut
         });
         return svgPath;
       });
       const mask = svg`<mask id="cutMask">
-        <rect x="-200" y="-200" width="400" height="400" fill="black" />
+        <rect x="${-maskSize}" y="${-maskSize}" width="${maskSize * 2}" height="${maskSize * 2}" fill="black" />
         ${areas.map((area) => svg`<path d=${area} fill="white" vector-effect="non-scaling-stroke" stroke="white" stroke-width="1"/>`)}
       </mask>`;
-      result = [mask, svg`<g mask="url(#cutMask)">${rings}</g>`];
+      const rotClip = svg`<clipPath id="rot-arc-clip">${this.areas.map(
+        (area) => svg`<path d=${roundedArch({
+          startAngle: area.startAngle,
+          endAngle: area.endAngle,
+          R: OUTER_RING_RADIUS + this._rOff + 20,
+          r: 0,
+          roundOutsideCut: area.roundOutsideCut,
+          roundInsideCut: area.roundInsideCut
+        })} />`
+      )}</clipPath>`;
+      result = [mask, rotClip, svg`<g mask="url(#cutMask)">${rings}</g>`];
       areas.forEach((area) => {
         result.push(
           svg`<path d=${area} fill="none" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>`
@@ -166,7 +218,7 @@ let ObcWatch = class extends LitElement {
       if (this.state !== InstrumentState.off) {
         result.push(
           circle("outerRing", {
-            radius: 368 / 2,
+            radius: OUTER_RING_RADIUS + this._rOff,
             strokeWidth: 1,
             strokeColor: "var(--instrument-frame-tertiary-color)",
             strokePosition: "center",
@@ -175,7 +227,7 @@ let ObcWatch = class extends LitElement {
         );
         result.push(svg`
           ${circle("innerRing", {
-          radius: this.innerRingRadius,
+          radius: this.innerRingRadius + this._rOff,
           strokeWidth: 1,
           strokeColor: "var(--instrument-frame-tertiary-color)",
           strokePosition: "center",
@@ -185,7 +237,7 @@ let ObcWatch = class extends LitElement {
       } else {
         result.push(svg`
           ${circle("innerRing", {
-          radius: OUTER_RING_RADIUS,
+          radius: OUTER_RING_RADIUS + this._rOff,
           strokeWidth: 1,
           strokeColor: "var(--instrument-frame-tertiary-color)",
           strokePosition: "center",
@@ -196,6 +248,49 @@ let ObcWatch = class extends LitElement {
     }
     return result;
   }
+  _renderTickFadeDefs() {
+    if (this.tickFadeAngle <= 0 || this.areas.length === 0) return nothing;
+    const area = this.areas[0];
+    const arcSpan = area.endAngle - area.startAngle;
+    const fade = Math.min(this.tickFadeAngle, arcSpan / 4);
+    if (fade < 0.5) return nothing;
+    const { startAngle, endAngle } = area;
+    const R = OUTER_RING_RADIUS + this._rOff + 200;
+    const toRad = (deg) => deg * Math.PI / 180;
+    const px = (deg) => R * Math.sin(toRad(deg));
+    const py = (deg) => -R * Math.cos(toRad(deg));
+    const pieSlice = (a, b) => {
+      const x1 = px(a), y1 = py(a);
+      const x2 = px(b), y2 = py(b);
+      const largeArc = b - a > 180 ? 1 : 0;
+      return `M 0 0 L ${x1} ${y1} A ${R} ${R} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+    };
+    const Rm = (OUTER_RING_RADIUS + this.innerRingRadius) / 2 + this._rOff;
+    const gx = (deg) => Rm * Math.sin(toRad(deg));
+    const gy = (deg) => -Rm * Math.cos(toRad(deg));
+    return svg`
+      <defs>
+        <linearGradient id="tickFadeL" gradientUnits="userSpaceOnUse"
+          x1="${gx(startAngle)}" y1="${gy(startAngle)}"
+          x2="${gx(startAngle + fade)}" y2="${gy(startAngle + fade)}">
+          <stop offset="0" stop-color="black" />
+          <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="tickFadeR" gradientUnits="userSpaceOnUse"
+          x1="${gx(endAngle - fade)}" y1="${gy(endAngle - fade)}"
+          x2="${gx(endAngle)}" y2="${gy(endAngle)}">
+          <stop offset="0" stop-color="white" />
+          <stop offset="1" stop-color="black" />
+        </linearGradient>
+        <mask id="tickFadeMask" maskUnits="userSpaceOnUse"
+          x="${-R}" y="${-R}" width="${R * 2}" height="${R * 2}">
+          <path d="${pieSlice(startAngle + fade, endAngle - fade)}" fill="white" />
+          <path d="${pieSlice(startAngle, startAngle + fade)}" fill="url(#tickFadeL)" />
+          <path d="${pieSlice(endAngle - fade, endAngle)}" fill="url(#tickFadeR)" />
+        </mask>
+      </defs>
+    `;
+  }
   renderCrosshair(radius, labelKnockouts) {
     const hasMask = labelKnockouts && labelKnockouts.positions.length > 0;
     const labelRadius = hasMask ? Math.max(
@@ -264,18 +359,19 @@ let ObcWatch = class extends LitElement {
       const startAngle = Math.min(bar.startAngle, bar.endAngle);
       const endAngle = Math.max(bar.startAngle, bar.endAngle);
       const arc = roundedArch({
-        r: RING3_RADIUS,
-        R: RING2_RADIUS,
+        r: RING3_RADIUS + this._rOff,
+        R: RING2_RADIUS + this._rOff,
         startAngle,
         endAngle,
         roundInsideCut: false,
         roundOutsideCut: false
       });
+      const barMaskR = RING2_RADIUS + this._rOff + 40;
       const mask = svg`<mask id="barMask-${index}">
-        <rect x="-200" y="-200" width="400" height="400" fill="black" />
+        <rect x="${-barMaskR}" y="${-barMaskR}" width="${barMaskR * 2}" height="${barMaskR * 2}" fill="black" />
         <path d=${roundedArch({
         r: 1,
-        R: 200,
+        R: barMaskR,
         startAngle,
         endAngle,
         roundInsideCut: false,
@@ -305,7 +401,7 @@ let ObcWatch = class extends LitElement {
       return svg`
         <rect 
           transform="rotate(${needle.angle})" 
-          x="-4" y="-160" width="8" height="48" rx="4" 
+          x="-4" y="${-(RING2_RADIUS + this._rOff)}" width="8" height="48" rx="4" 
           fill=${needle.fillColor} 
           stroke=${needle.strokeColor}
           stroke-width="1"
@@ -342,13 +438,39 @@ let ObcWatch = class extends LitElement {
     return 24;
   }
   render() {
-    const width = (176 + this.getPadding()) * 2;
-    const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
-    const top = -width / 2 + width * this.clipTop / 100;
+    let width;
+    let height;
+    let viewBox;
+    if (this.arcFrame) {
+      this._rOff = this.arcFrame.radiusOffset;
+      width = this.arcFrame.width;
+      height = this.arcFrame.height;
+      viewBox = this.arcFrame.viewBox;
+    } else if (this.zoomToFitArc && this.areas.length > 0) {
+      const ext = this.getPadding();
+      const targetSize = (176 + ext) * 2;
+      const frame = computeZoomToFitArcFrame({
+        areas: this.areas,
+        outerRadius: OUTER_RING_RADIUS,
+        innerRadius: this.innerRingRadius,
+        extension: ext,
+        targetSize
+      });
+      this._rOff = frame.radiusOffset;
+      width = frame.width;
+      height = frame.height;
+      viewBox = frame.viewBox;
+    } else {
+      this._rOff = 0;
+      width = (176 + this.getPadding()) * 2;
+      height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
+      const top = -width / 2 + width * this.clipTop / 100;
+      viewBox = `-${width / 2} ${top} ${width} ${height}`;
+    }
+    const rOff = this._rOff;
     const scale = this.getScale({ width, height });
-    const viewBox = `-${width / 2} ${top} ${width} ${height}`;
     const angleSetpoint = this.renderSetpoint();
-    const textRadius = this.tickmarksInside ? this.innerRingRadius : OUTER_RING_RADIUS;
+    const textRadius = (this.tickmarksInside ? this.innerRingRadius : OUTER_RING_RADIUS) + rOff;
     const maxDigits = Math.max(
       ...this.tickmarks.map((t) => t.text?.length ?? 0)
     );
@@ -362,29 +484,30 @@ let ObcWatch = class extends LitElement {
         textRadius,
         rotation: this.rotation,
         maxDigits,
-        color: t.color
+        color: t.color,
+        radiusOffset: rOff
       })
     );
-    const advices = this.advices ? this.advices.map((a) => renderAdvice(a)) : nothing;
+    const advices = this.advices ? this.advices.map((a) => renderAdvice(a, rOff)) : nothing;
     const insideLabels = this.tickmarksInside && this.showLabels;
     const includeNorth = !this.northArrow;
     const labelPositions = this.showLabels ? getLabelPositions({
       scale,
       inside: this.tickmarksInside,
-      innerRadius: this.innerRingRadius,
+      innerRadius: this.innerRingRadius + rOff,
       includeNorth
     }) : void 0;
     const labels = labelPositions ? renderLabels({
       scale,
       rotation: this.rotation,
       inside: this.tickmarksInside,
-      innerRadius: this.innerRingRadius,
+      innerRadius: this.innerRingRadius + rOff,
       includeNorth
     }) : nothing;
     const northArrowEl = this.northArrow ? renderNorthArrow({
       scale,
       rotation: this.rotation,
-      inside: this.tickmarksInside
+      inside: this.northArrowInside ?? this.tickmarksInside
     }) : nothing;
     const wind = this.wind != null && this.windFromDirectionDeg != null ? svg`<g transform="scale(${this.scaleWindIcon})">${renderWind({
       wind: this.wind,
@@ -408,20 +531,76 @@ let ObcWatch = class extends LitElement {
       >
         ${this.watchCircle()} ${this.renderBars()}
         ${this.crosshairEnabled ? this.renderCrosshair(
-      184,
+      OUTER_RING_RADIUS + rOff,
       insideLabels && labelPositions ? {
         positions: labelPositions,
         rotation: this.rotation,
         scale,
-        innerRingRadius: this.innerRingRadius
+        innerRingRadius: this.innerRingRadius + rOff
       } : void 0
     ) : nothing}
         ${northArrowEl} ${this.renderStarboardPortIndicator()} ${current}
-        ${wind} ${tickmarks} ${advices} ${angleSetpoint} ${labels}
+        ${this._renderTickFadeDefs()} ${wind}
+        ${this.tickFadeAngle > 0 && this.areas.length > 0 ? svg`<g mask="url(#tickFadeMask)">${tickmarks}</g>` : tickmarks}
+        ${this.areas.length > 0 ? svg`<g clip-path="url(#rot-arc-clip)">${this.renderRot()}</g>` : this.renderRot()}
+        ${advices} ${angleSetpoint}
+        ${this.tickFadeAngle > 0 && this.areas.length > 0 ? svg`<g mask="url(#tickFadeMask)">${labels}</g>` : labels}
         ${this.renderVesselImage()} ${this.renderNeedles()}
       </svg>
     `;
   }
+  getRotColors() {
+    const p = this.rotPriority ?? this.priority;
+    const isEnhanced = p === Priority.enhanced;
+    const isInner = this.rotPosition === RotPosition.innerCircle;
+    if (isInner) {
+      return {
+        dotColor: isEnhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)",
+        barBgColor: isEnhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)",
+        endDotFill: "var(--border-silhouette-color)",
+        endDotStroke: isEnhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)"
+      };
+    }
+    return {
+      dotColor: isEnhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)",
+      barBgColor: isEnhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)",
+      endDotFill: isEnhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--border-silhouette-color)",
+      endDotStroke: isEnhanced ? "var(--instrument-frame-primary-color)" : "var(--instrument-regular-secondary-color)"
+    };
+  }
+  renderRot() {
+    if (!this.rotType) return nothing;
+    const { dotColor, barBgColor, endDotFill, endDotStroke } = this.getRotColors();
+    const rOff = this._rOff;
+    if (this.rotType === RotType.bar) {
+      const hasBar = shortestAngularDeltaDeg(this.rotStartAngle, this.rotEndAngle) >= 0.1;
+      return svg`
+        ${renderRotBarStatic({
+        startAngle: this.rotStartAngle,
+        endAngle: this.rotEndAngle,
+        color: dotColor,
+        barColor: barBgColor,
+        position: this.rotPosition,
+        endDotFill,
+        endDotStroke,
+        maskId: "rot-bar-mask",
+        radiusOffset: rOff
+      })}
+        ${hasBar ? svg`<g clip-path="url(#rot-bar-mask)">
+              <g id="rot-spinner">
+                ${renderRotBarDots(dotColor, this.rotPosition, rOff)}
+              </g>
+            </g>` : nothing}
+      `;
+    }
+    const p = this.rotPriority ?? this.priority;
+    const dotsColor = p === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
+    return svg`
+      <g id="rot-spinner">
+        ${renderRotDots(dotsColor, this.rotPosition, rOff)}
+      </g>
+    `;
+  }
   renderSetpoint() {
     if (this.angleSetpoint === void 0) {
       return nothing;
@@ -438,7 +617,7 @@ let ObcWatch = class extends LitElement {
     });
     const { visualState, colorMode, disabled, hasNewSetpoint } = derived;
     const outwardOffset = getSetpointOutwardOffset(visualState);
-    const radius = RADIAL_SETPOINT_RADIUS + outwardOffset - RADIAL_SETPOINT_INWARD_ADJUST;
+    const radius = RADIAL_SETPOINT_RADIUS + this._rOff + outwardOffset - RADIAL_SETPOINT_INWARD_ADJUST;
     const opacity = hasNewSetpoint ? 0.75 : 1;
     const originalMarker = drawSetpointMarker({
       visualState,
@@ -471,7 +650,7 @@ let ObcWatch = class extends LitElement {
       const focusOutwardOffset = getSetpointOutwardOffset(
         SetpointVisualState.focus
       );
-      const focusRadius = RADIAL_SETPOINT_RADIUS + focusOutwardOffset - RADIAL_SETPOINT_INWARD_ADJUST;
+      const focusRadius = RADIAL_SETPOINT_RADIUS + this._rOff + focusOutwardOffset - RADIAL_SETPOINT_INWARD_ADJUST;
       const newMarker = drawSetpointMarker({
         visualState: SetpointVisualState.focus,
         colorMode,
@@ -550,6 +729,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcWatch.prototype, "northArrow", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "northArrowInside", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcWatch.prototype, "angleSetpoint", 2);
@@ -646,15 +828,45 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcWatch.prototype, "rotation", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "zoomToFitArc", 2);
+__decorateClass([
+  property({ attribute: false })
+], ObcWatch.prototype, "arcFrame", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "tickFadeAngle", 2);
+__decorateClass([
+  property({ type: String })
+], ObcWatch.prototype, "rotType", 2);
+__decorateClass([
+  property({ type: String })
+], ObcWatch.prototype, "rotPosition", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "rotStartAngle", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "rotEndAngle", 2);
+__decorateClass([
+  property({ type: String })
+], ObcWatch.prototype, "rotPriority", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "rotationsPerMinute", 1);
 ObcWatch = __decorateClass([
   customElement("obc-watch")
 ], ObcWatch);
 export {
   OUTER_RING_RADIUS,
   ObcWatch,
+  RotPosition,
+  RotType,
   TickmarkStyle,
   VesselImage,
   VesselImageSize,
-  WatchCircleType
+  WatchCircleType,
+  innerRingRadiusFor
 };
 //# sourceMappingURL=watch.js.map