@oicl/openbridge-webcomponents 0.0.20260407101310 → 0.0.20260407112816

package/dist/navigation-instruments/rate-of-turn/rate-of-turn.d.ts

@@ -1,12 +1,46 @@
 import { LitElement } from 'lit';
+import { WatchCircleType, RotType, RotPosition } from '../watch/watch.js';
+import { Priority } from '../types.js';
 import '../watch/watch.js';
+export { RotType, RotPosition };
+/**
+ * `<obc-rate-of-turn>` — Standalone rate-of-turn indicator rendered on a circular watch face.
+ *
+ * Wraps `<obc-watch>` to display a spinning-dot or arc-bar ROT visualization
+ * without any additional instrument overlays. Useful for isolating the ROT
+ * indicator in layouts where heading/compass elements are handled separately.
+ *
+ * ## Features
+ *
+ * - **Dot mode** (`rotType="dots"`): Five evenly-spaced dots spin at the
+ *   configured `rotationsPerMinute`.
+ * - **Bar mode** (`rotType="bar"`): A banana-shaped arc from `barStartAngle`
+ *   to `barEndAngle` with clipped spinning dots inside.
+ * - **Track position**: Place the indicator on the outer scale ring
+ *   (`rotPosition="scale"`) or the inner circle
+ *   (`rotPosition="innerCircle"`).
+ * - **Color priority**: Uses `priority` to select regular or enhanced color
+ *   palette.
+ *
+ * ## Usage Guidelines
+ *
+ * - Set `rotationsPerMinute` to the current sensor value; sign controls
+ *   spin direction (positive = clockwise).
+ * - In bar mode, `barStartAngle` and `barEndAngle` define the static arc
+ *   span (0° = 12 o'clock, clockwise).
+ * - Change `watchCircleType` to match the surrounding instrument ring style
+ *   (e.g. `triple` for compass contexts).
+ *
+ * @element obc-rate-of-turn
+ */
 export declare class ObcRateOfTurn extends LitElement {
-    set rotationsPerMinute(value: number);
-    get rotationsPerMinute(): number;
-    _rotationsPerMinute: number;
-    private spinner;
-    private rateOfTurnController?;
-    firstUpdated(): void;
+    rotationsPerMinute: number;
+    rotType: RotType;
+    rotPosition: RotPosition;
+    priority: Priority;
+    barStartAngle: number;
+    barEndAngle: number;
+    watchCircleType: WatchCircleType;
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/navigation-instruments/rate-of-turn/rate-of-turn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rate-of-turn.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rate-of-turn/rate-of-turn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,mBAAmB,CAAC;AAK3B,qBACa,aAAc,SAAQ,UAAU;IAC3C,IACI,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAKnC;IACD,IAAI,kBAAkB,IANQ,MAAM,CAQnC;IACD,mBAAmB,SAAK;IAGxB,OAAO,CAAC,OAAO,CAAe;IAE9B,OAAO,CAAC,oBAAoB,CAAC,CAAuB;IAE3C,YAAY;IAQrB,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,aAAa,CAAC;KACnC;CACF"}
+{"version":3,"file":"rate-of-turn.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rate-of-turn/rate-of-turn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAC,eAAe,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAExE,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,OAAO,EAAC,OAAO,EAAE,WAAW,EAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,aAAc,SAAQ,UAAU;IACjB,kBAAkB,EAAE,MAAM,CAAK;IAE/B,OAAO,EAAE,OAAO,CAAgB;IAChC,WAAW,EAAE,WAAW,CAAqB;IAC7C,QAAQ,EAAE,QAAQ,CAAoB;IACtC,aAAa,EAAE,MAAM,CAAK;IAC1B,WAAW,EAAE,MAAM,CAAM;IACzB,eAAe,EAAE,eAAe,CACjC;IAEzB,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,aAAa,CAAC;KACnC;CACF"}

package/dist/navigation-instruments/rate-of-turn/rate-of-turn.js

@@ -1,8 +1,9 @@
 import { css, LitElement, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { WatchCircleType } from "../watch/watch.js";
-import { RateOfTurnController } from "./rate-of-turn.controller.js";
 import { customElement } from "../../decorator.js";
+import { Priority } from "../types.js";
+import { RotType, RotPosition } from "./rot-renderer.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,50 +17,25 @@ var __decorateClass = (decorators, target, key, kind) => {
 let ObcRateOfTurn = class extends LitElement {
   constructor() {
     super(...arguments);
-    this._rotationsPerMinute = 1;
-  }
-  set rotationsPerMinute(value) {
-    this._rotationsPerMinute = value;
-    if (this.rateOfTurnController) {
-      this.rateOfTurnController.rotationsPerMinute = value;
-    }
-  }
-  get rotationsPerMinute() {
-    return this._rotationsPerMinute;
-  }
-  firstUpdated() {
-    this.rateOfTurnController = new RateOfTurnController(
-      this,
-      this.spinner,
-      this.rotationsPerMinute
-    );
+    this.rotationsPerMinute = 1;
+    this.rotType = RotType.dots;
+    this.rotPosition = RotPosition.scale;
+    this.priority = Priority.regular;
+    this.barStartAngle = 0;
+    this.barEndAngle = 30;
+    this.watchCircleType = WatchCircleType.single;
   }
   render() {
     return html`<div class="container">
-      <obc-watch .watchCircleType=${WatchCircleType.single}></obc-watch>
-      <svg id="spinner" viewBox="-200 -200 400 400">
-        <g transform="translate(-256, -256)">
-          <path
-          d="M263.998 84C263.998 88.4183 260.416 92 255.998 92C251.58 92 247.998 88.4183 247.998 84C247.998 79.5817 251.58 76 255.998 76C260.416 76 263.998 79.5817 263.998 84Z"
-          fill="var(--instrument-enhanced-secondary-color)"
-        />
-        <path
-          d="M94.8884 195.241C99.0904 196.606 101.39 201.119 100.025 205.321C98.6594 209.523 94.1461 211.823 89.9441 210.458C85.7421 209.092 83.4424 204.579 84.8078 200.377C86.1731 196.175 90.6863 193.875 94.8884 195.241Z"
-          fill="var(--instrument-enhanced-secondary-color)"
-        />
-        <path
-          d="M148.427 390.449C151.024 386.874 156.027 386.082 159.601 388.679C163.176 391.276 163.968 396.279 161.371 399.853C158.774 403.428 153.771 404.22 150.197 401.623C146.622 399.026 145.83 394.023 148.427 390.449Z"
-          fill="var(--instrument-enhanced-secondary-color)"
-        />
-        <path
-          d="M350.625 399.853C348.028 396.279 348.82 391.276 352.395 388.679C355.969 386.082 360.972 386.874 363.569 390.449C366.166 394.023 365.374 399.026 361.799 401.623C358.225 404.22 353.222 403.428 350.625 399.853Z"
-          fill="var(--instrument-enhanced-secondary-color)"
-        />
-        <path
-          d="M422.052 210.458C417.85 211.823 413.336 209.523 411.971 205.321C410.606 201.119 412.905 196.606 417.107 195.241C421.309 193.875 425.823 196.175 427.188 200.377C428.553 204.579 426.254 209.092 422.052 210.458Z"
-          fill="var(--instrument-enhanced-secondary-color)"
-        />
-      </svg>
+      <obc-watch
+        .watchCircleType=${this.watchCircleType}
+        .priority=${this.priority}
+        .rotType=${this.rotType}
+        .rotPosition=${this.rotPosition}
+        .rotStartAngle=${this.barStartAngle}
+        .rotEndAngle=${this.barEndAngle}
+        .rotationsPerMinute=${this.rotationsPerMinute}
+      ></obc-watch>
     </div>`;
   }
 };
@@ -84,14 +60,31 @@ ObcRateOfTurn.styles = css`
   `;
 __decorateClass([
   property({ type: Number })
-], ObcRateOfTurn.prototype, "rotationsPerMinute", 1);
+], ObcRateOfTurn.prototype, "rotationsPerMinute", 2);
+__decorateClass([
+  property({ type: String })
+], ObcRateOfTurn.prototype, "rotType", 2);
+__decorateClass([
+  property({ type: String })
+], ObcRateOfTurn.prototype, "rotPosition", 2);
+__decorateClass([
+  property({ type: String })
+], ObcRateOfTurn.prototype, "priority", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcRateOfTurn.prototype, "barStartAngle", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcRateOfTurn.prototype, "barEndAngle", 2);
 __decorateClass([
-  query("#spinner")
-], ObcRateOfTurn.prototype, "spinner", 2);
+  property({ type: String })
+], ObcRateOfTurn.prototype, "watchCircleType", 2);
 ObcRateOfTurn = __decorateClass([
   customElement("obc-rate-of-turn")
 ], ObcRateOfTurn);
 export {
-  ObcRateOfTurn
+  ObcRateOfTurn,
+  RotPosition,
+  RotType
 };
 //# sourceMappingURL=rate-of-turn.js.map

package/dist/navigation-instruments/rate-of-turn/rate-of-turn.js.map

@@ -1 +1 @@
-{"version":3,"file":"rate-of-turn.js","sources":["../../../src/navigation-instruments/rate-of-turn/rate-of-turn.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {WatchCircleType} from '../watch/watch.js';\nimport {RateOfTurnController} from './rate-of-turn.controller.js';\nimport {customElement} from '../../decorator.js';\n\n@customElement('obc-rate-of-turn')\nexport class ObcRateOfTurn extends LitElement {\n  @property({type: Number})\n  set rotationsPerMinute(value: number) {\n    this._rotationsPerMinute = value;\n    if (this.rateOfTurnController) {\n      this.rateOfTurnController.rotationsPerMinute = value;\n    }\n  }\n  get rotationsPerMinute() {\n    return this._rotationsPerMinute;\n  }\n  _rotationsPerMinute = 1;\n\n  @query('#spinner')\n  private spinner!: HTMLElement;\n\n  private rateOfTurnController?: RateOfTurnController;\n\n  override firstUpdated() {\n    this.rateOfTurnController = new RateOfTurnController(\n      this,\n      this.spinner,\n      this.rotationsPerMinute\n    );\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n\n  override render() {\n    return html`<div class=\"container\">\n      <obc-watch .watchCircleType=${WatchCircleType.single}></obc-watch>\n      <svg id=\"spinner\" viewBox=\"-200 -200 400 400\">\n        <g transform=\"translate(-256, -256)\">\n          <path\n          d=\"M263.998 84C263.998 88.4183 260.416 92 255.998 92C251.58 92 247.998 88.4183 247.998 84C247.998 79.5817 251.58 76 255.998 76C260.416 76 263.998 79.5817 263.998 84Z\"\n          fill=\"var(--instrument-enhanced-secondary-color)\"\n        />\n        <path\n          d=\"M94.8884 195.241C99.0904 196.606 101.39 201.119 100.025 205.321C98.6594 209.523 94.1461 211.823 89.9441 210.458C85.7421 209.092 83.4424 204.579 84.8078 200.377C86.1731 196.175 90.6863 193.875 94.8884 195.241Z\"\n          fill=\"var(--instrument-enhanced-secondary-color)\"\n        />\n        <path\n          d=\"M148.427 390.449C151.024 386.874 156.027 386.082 159.601 388.679C163.176 391.276 163.968 396.279 161.371 399.853C158.774 403.428 153.771 404.22 150.197 401.623C146.622 399.026 145.83 394.023 148.427 390.449Z\"\n          fill=\"var(--instrument-enhanced-secondary-color)\"\n        />\n        <path\n          d=\"M350.625 399.853C348.028 396.279 348.82 391.276 352.395 388.679C355.969 386.082 360.972 386.874 363.569 390.449C366.166 394.023 365.374 399.026 361.799 401.623C358.225 404.22 353.222 403.428 350.625 399.853Z\"\n          fill=\"var(--instrument-enhanced-secondary-color)\"\n        />\n        <path\n          d=\"M422.052 210.458C417.85 211.823 413.336 209.523 411.971 205.321C410.606 201.119 412.905 196.606 417.107 195.241C421.309 193.875 425.823 196.175 427.188 200.377C428.553 204.579 426.254 209.092 422.052 210.458Z\"\n          fill=\"var(--instrument-enhanced-secondary-color)\"\n        />\n      </svg>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rate-of-turn': ObcRateOfTurn;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAQO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,sBAAsB;AAAA,EAAA;AAAA,EATtB,IAAI,mBAAmB,OAAe;AACpC,SAAK,sBAAsB;AAC3B,QAAI,KAAK,sBAAsB;AAC7B,WAAK,qBAAqB,qBAAqB;AAAA,IACjD;AAAA,EACF;AAAA,EACA,IAAI,qBAAqB;AACvB,WAAO,KAAK;AAAA,EACd;AAAA,EAQS,eAAe;AACtB,SAAK,uBAAuB,IAAI;AAAA,MAC9B;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EAsBS,SAAS;AAChB,WAAO;AAAA,oCACyB,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBxD;AACF;AA1Ea,cA0BK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxBrB,gBAAA;AAAA,EADH,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,cAEP,WAAA,sBAAA,CAAA;AAYI,gBAAA;AAAA,EADP,MAAM,UAAU;AAAA,GAbN,cAcH,WAAA,WAAA,CAAA;AAdG,gBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,aAAA;"}
+{"version":3,"file":"rate-of-turn.js","sources":["../../../src/navigation-instruments/rate-of-turn/rate-of-turn.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {WatchCircleType, RotType, RotPosition} from '../watch/watch.js';\nimport {customElement} from '../../decorator.js';\nimport {Priority} from '../types.js';\n\nexport {RotType, RotPosition};\n\n/**\n * `<obc-rate-of-turn>` — Standalone rate-of-turn indicator rendered on a circular watch face.\n *\n * Wraps `<obc-watch>` to display a spinning-dot or arc-bar ROT visualization\n * without any additional instrument overlays. Useful for isolating the ROT\n * indicator in layouts where heading/compass elements are handled separately.\n *\n * ## Features\n *\n * - **Dot mode** (`rotType=\"dots\"`): Five evenly-spaced dots spin at the\n *   configured `rotationsPerMinute`.\n * - **Bar mode** (`rotType=\"bar\"`): A banana-shaped arc from `barStartAngle`\n *   to `barEndAngle` with clipped spinning dots inside.\n * - **Track position**: Place the indicator on the outer scale ring\n *   (`rotPosition=\"scale\"`) or the inner circle\n *   (`rotPosition=\"innerCircle\"`).\n * - **Color priority**: Uses `priority` to select regular or enhanced color\n *   palette.\n *\n * ## Usage Guidelines\n *\n * - Set `rotationsPerMinute` to the current sensor value; sign controls\n *   spin direction (positive = clockwise).\n * - In bar mode, `barStartAngle` and `barEndAngle` define the static arc\n *   span (0° = 12 o'clock, clockwise).\n * - Change `watchCircleType` to match the surrounding instrument ring style\n *   (e.g. `triple` for compass contexts).\n *\n * @element obc-rate-of-turn\n */\n@customElement('obc-rate-of-turn')\nexport class ObcRateOfTurn extends LitElement {\n  @property({type: Number}) rotationsPerMinute: number = 1;\n\n  @property({type: String}) rotType: RotType = RotType.dots;\n  @property({type: String}) rotPosition: RotPosition = RotPosition.scale;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: Number}) barStartAngle: number = 0;\n  @property({type: Number}) barEndAngle: number = 30;\n  @property({type: String}) watchCircleType: WatchCircleType =\n    WatchCircleType.single;\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n\n  override render() {\n    return html`<div class=\"container\">\n      <obc-watch\n        .watchCircleType=${this.watchCircleType}\n        .priority=${this.priority}\n        .rotType=${this.rotType}\n        .rotPosition=${this.rotPosition}\n        .rotStartAngle=${this.barStartAngle}\n        .rotEndAngle=${this.barEndAngle}\n        .rotationsPerMinute=${this.rotationsPerMinute}\n      ></obc-watch>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rate-of-turn': ObcRateOfTurn;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwCO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,qBAA6B;AAE7B,SAAA,UAAmB,QAAQ;AAC3B,SAAA,cAA2B,YAAY;AACvC,SAAA,WAAqB,SAAS;AAC9B,SAAA,gBAAwB;AACxB,SAAA,cAAsB;AACtB,SAAA,kBACxB,gBAAgB;AAAA,EAAA;AAAA,EAsBT,SAAS;AAChB,WAAO;AAAA;AAAA,2BAEgB,KAAK,eAAe;AAAA,oBAC3B,KAAK,QAAQ;AAAA,mBACd,KAAK,OAAO;AAAA,uBACR,KAAK,WAAW;AAAA,yBACd,KAAK,aAAa;AAAA,uBACpB,KAAK,WAAW;AAAA,8BACT,KAAK,kBAAkB;AAAA;AAAA;AAAA,EAGnD;AACF;AA5Ca,cAWK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAVC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,cACe,WAAA,sBAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,cAGe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,cAIe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,cAKe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,cAMe,WAAA,iBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,cAOe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GARb,cAQe,WAAA,mBAAA,CAAA;AARf,gBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,aAAA;"}

package/dist/navigation-instruments/rate-of-turn/rot-renderer.d.ts

@@ -0,0 +1,63 @@
+import { SVGTemplateResult } from 'lit';
+export declare enum RotType {
+    dots = "dots",
+    bar = "bar"
+}
+export declare enum RotPosition {
+    scale = "scale",
+    innerCircle = "innerCircle"
+}
+export declare function renderRotDots(color: string, position: RotPosition, radiusOffset?: number): SVGTemplateResult;
+export declare function shortestAngularDeltaDeg(startAngle: number, endAngle: number): number;
+export interface RotBarConfig {
+    startAngle: number;
+    endAngle: number;
+    color: string;
+    barColor: string;
+    position: RotPosition;
+    endDotFill?: string;
+    endDotStroke?: string;
+    maskId?: string;
+    radiusOffset?: number;
+}
+export declare function renderRotBarStatic(config: RotBarConfig): SVGTemplateResult;
+export declare function renderRotBarDots(color: string, position: RotPosition, radiusOffset?: number): SVGTemplateResult;
+/**
+ * Angular spacing between dots in degrees — same as radial (360 / 5 = 72).
+ * In linear mode this is converted to pixels via `dotSpacing = 72 * translationScale`.
+ */
+export declare const LINEAR_DOT_ANGLE_SPACING: number;
+export declare enum LinearRotPosition {
+    track = "track",
+    scale = "scale"
+}
+export declare function renderLinearRotDots(color: string, trackY: number, dotSpacing: number, visibleWidth: number): SVGTemplateResult;
+export interface LinearRotBarConfig {
+    startX: number;
+    endX: number;
+    color: string;
+    barColor: string;
+    trackY: number;
+    endDotFill?: string;
+    endDotStroke?: string;
+    maskId?: string;
+}
+/**
+ * Render the static horizontal bar, end-dot, and `<clipPath>` for a linear
+ * ROT indicator. Analogous to `renderRotBarStatic` for radial instruments.
+ *
+ * The bar is a rounded capsule from `startX` to `endX` at vertical
+ * position `trackY`. A ring-shaped end-dot sits at `endX`. The clip
+ * region is padded at the end side so spinning bar-dots snap in/out
+ * cleanly (same rationale as the angular padding in the radial version).
+ *
+ * Returns empty SVG when the bar span is less than 1 px.
+ */
+export declare function renderLinearRotBarStatic(config: LinearRotBarConfig): SVGTemplateResult;
+/**
+ * Render filled dots along a horizontal track, intended to be placed
+ * inside a `<g clip-path="…">` that clips to the bar shape.
+ * Analogous to `renderRotBarDots` for radial instruments.
+ */
+export declare function renderLinearRotBarDots(color: string, trackY: number, dotSpacing: number, visibleWidth: number): SVGTemplateResult;
+//# sourceMappingURL=rot-renderer.d.ts.map

package/dist/navigation-instruments/rate-of-turn/rot-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rot-renderer.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rate-of-turn/rot-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAM,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAE3C,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,WAAW,gBAAgB;CAC5B;AAoCD,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,WAAW,EACrB,YAAY,SAAI,GACf,iBAAiB,CAMnB;AA8CD,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,MAAM,CAGR;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,iBAAiB,CAgD1E;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,WAAW,EACrB,YAAY,SAAI,GACf,iBAAiB,CASnB;AAMD;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAkB,CAAC;AAIxD,oBAAY,iBAAiB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAkCD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,iBAAiB,CAQnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,kBAAkB,GACzB,iBAAiB,CAuCnB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,iBAAiB,CAQnB"}

package/dist/navigation-instruments/rate-of-turn/rot-renderer.js

@@ -0,0 +1,211 @@
+import { svg } from "lit";
+var RotType = /* @__PURE__ */ ((RotType2) => {
+  RotType2["dots"] = "dots";
+  RotType2["bar"] = "bar";
+  return RotType2;
+})(RotType || {});
+var RotPosition = /* @__PURE__ */ ((RotPosition2) => {
+  RotPosition2["scale"] = "scale";
+  RotPosition2["innerCircle"] = "innerCircle";
+  return RotPosition2;
+})(RotPosition || {});
+const DOT_COUNT = 5;
+const DOT_ANGLES = Array.from(
+  { length: DOT_COUNT },
+  (_, i) => 360 / DOT_COUNT * i
+);
+const SCALE_RADIUS = 172;
+const INNER_CIRCLE_RADIUS = 100;
+const BAR_HALF_THICKNESS = 8;
+const DOT_RADIUS = BAR_HALF_THICKNESS;
+const BAR_DOT_RADIUS = BAR_HALF_THICKNESS * 0.75;
+const BAR_DOT_STROKE = BAR_HALF_THICKNESS * 0.5;
+const BAR_DOT_INNER_RADIUS = BAR_DOT_RADIUS - BAR_DOT_STROKE / 2;
+function getTrackRadius(position, radiusOffset = 0) {
+  const base = position === "scale" ? SCALE_RADIUS : INNER_CIRCLE_RADIUS;
+  return base + radiusOffset;
+}
+function dotOnTrack(angle, radius) {
+  const rad = angle * Math.PI / 180;
+  return {
+    cx: Math.sin(rad) * radius,
+    cy: -Math.cos(rad) * radius
+  };
+}
+function renderRotDots(color, position, radiusOffset = 0) {
+  const radius = getTrackRadius(position, radiusOffset);
+  return svg`${DOT_ANGLES.map((angle) => {
+    const { cx, cy } = dotOnTrack(angle, radius);
+    return svg`<circle cx="${cx}" cy="${cy}" r="${DOT_RADIUS}" fill="${color}" />`;
+  })}`;
+}
+function rotBarPath(startAngle, endAngle, trackRadius) {
+  const R = trackRadius + BAR_HALF_THICKNESS;
+  const r = trackRadius - BAR_HALF_THICKNESS;
+  const a1 = startAngle * Math.PI / 180;
+  const a2 = endAngle * Math.PI / 180;
+  const outerStartX = Math.sin(a1) * R;
+  const outerStartY = -Math.cos(a1) * R;
+  const innerStartX = Math.sin(a1) * r;
+  const innerStartY = -Math.cos(a1) * r;
+  const outerEndX = Math.sin(a2) * R;
+  const outerEndY = -Math.cos(a2) * R;
+  const innerEndX = Math.sin(a2) * r;
+  const innerEndY = -Math.cos(a2) * r;
+  const cwSpan = ((a2 - a1) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
+  let outerSweep;
+  let innerSweep;
+  if (cwSpan <= Math.PI) {
+    outerSweep = 1;
+    innerSweep = 0;
+  } else {
+    outerSweep = 0;
+    innerSweep = 1;
+  }
+  return [
+    `M ${outerStartX} ${outerStartY}`,
+    `A ${R} ${R} 0 0 ${outerSweep} ${outerEndX} ${outerEndY}`,
+    `L ${innerEndX} ${innerEndY}`,
+    `A ${r} ${r} 0 0 ${innerSweep} ${innerStartX} ${innerStartY}`,
+    `Z`
+  ].join(" ");
+}
+function shortestAngularDeltaDeg(startAngle, endAngle) {
+  const cw = ((endAngle - startAngle) % 360 + 360) % 360;
+  return cw <= 180 ? cw : 360 - cw;
+}
+function renderRotBarStatic(config) {
+  const {
+    startAngle,
+    endAngle,
+    color,
+    barColor,
+    position,
+    endDotFill = "var(--instrument-frame-primary-color)",
+    endDotStroke = color,
+    maskId = "rot-bar-mask",
+    radiusOffset = 0
+  } = config;
+  if (shortestAngularDeltaDeg(startAngle, endAngle) < 0.1) {
+    return svg``;
+  }
+  const trackRadius = getTrackRadius(position, radiusOffset);
+  const arcPath = rotBarPath(startAngle, endAngle, trackRadius);
+  const { cx: endCx, cy: endCy } = dotOnTrack(endAngle, trackRadius);
+  const dotAngularPad = Math.asin(BAR_DOT_INNER_RADIUS / trackRadius) * 180 / Math.PI;
+  const cwSpan = ((endAngle - startAngle) % 360 + 360) % 360;
+  const isCW = cwSpan <= 180;
+  const clipPath = rotBarPath(
+    startAngle,
+    endAngle + (isCW ? dotAngularPad : -dotAngularPad),
+    trackRadius
+  );
+  return svg`
+    <defs>
+      <clipPath id="${maskId}">
+        <path d="${clipPath}" />
+      </clipPath>
+    </defs>
+    <path d="${arcPath}" fill="${barColor}" />
+    <circle
+      cx="${endCx}" cy="${endCy}" r="${BAR_DOT_RADIUS}"
+      fill="${endDotFill}"
+      stroke="${endDotStroke}"
+      stroke-width="${BAR_DOT_STROKE}"
+    />
+  `;
+}
+function renderRotBarDots(color, position, radiusOffset = 0) {
+  const radius = getTrackRadius(position, radiusOffset);
+  return svg`
+    ${DOT_ANGLES.map((angle) => {
+    const { cx, cy } = dotOnTrack(angle, radius);
+    return svg`<circle cx="${cx}" cy="${cy}" r="${BAR_DOT_INNER_RADIUS}" fill="${color}" />`;
+  })}
+  `;
+}
+const LINEAR_DOT_ANGLE_SPACING = 360 / DOT_COUNT;
+const LINEAR_DOT_RADIUS = BAR_HALF_THICKNESS / 2;
+var LinearRotPosition = /* @__PURE__ */ ((LinearRotPosition2) => {
+  LinearRotPosition2["track"] = "track";
+  LinearRotPosition2["scale"] = "scale";
+  return LinearRotPosition2;
+})(LinearRotPosition || {});
+function linearDotStrip(color, trackY, dotSpacing, visibleWidth, r) {
+  if (dotSpacing <= 0) return svg``;
+  const cyclePx = DOT_COUNT * dotSpacing;
+  const halfRange = visibleWidth / 2 + cyclePx;
+  const firstIdx = Math.floor(-halfRange / dotSpacing);
+  const lastIdx = Math.ceil(halfRange / dotSpacing);
+  const dots = [];
+  for (let i = firstIdx; i <= lastIdx; i++) {
+    dots.push(
+      svg`<circle cx="${i * dotSpacing}" cy="${trackY}" r="${r}" fill="${color}" />`
+    );
+  }
+  return svg`${dots}`;
+}
+function renderLinearRotDots(color, trackY, dotSpacing, visibleWidth) {
+  return linearDotStrip(
+    color,
+    trackY,
+    dotSpacing,
+    visibleWidth,
+    LINEAR_DOT_RADIUS
+  );
+}
+function renderLinearRotBarStatic(config) {
+  const {
+    startX,
+    endX,
+    color,
+    barColor,
+    trackY,
+    endDotFill = "var(--instrument-frame-primary-color)",
+    endDotStroke = color,
+    maskId = "rot-bar-mask-linear"
+  } = config;
+  if (Math.abs(endX - startX) < 1) return svg``;
+  const h = BAR_HALF_THICKNESS;
+  const top = trackY - h;
+  const bot = trackY + h;
+  const isEndRight = endX >= startX;
+  const flatX = startX;
+  const roundX = endX;
+  const barPath = isEndRight ? `M ${flatX} ${top} L ${roundX} ${top} A ${h} ${h} 0 0 1 ${roundX} ${bot} L ${flatX} ${bot} Z` : `M ${flatX} ${top} L ${roundX} ${top} A ${h} ${h} 0 0 0 ${roundX} ${bot} L ${flatX} ${bot} Z`;
+  return svg`
+    <defs>
+      <clipPath id="${maskId}">
+        <path d="${barPath}" />
+      </clipPath>
+    </defs>
+    <path d="${barPath}" fill="${barColor}" />
+    <circle
+      cx="${endX}" cy="${trackY}" r="${BAR_DOT_RADIUS}"
+      fill="${endDotFill}" stroke="${endDotStroke}"
+      stroke-width="${BAR_DOT_STROKE}" />
+  `;
+}
+function renderLinearRotBarDots(color, trackY, dotSpacing, visibleWidth) {
+  return linearDotStrip(
+    color,
+    trackY,
+    dotSpacing,
+    visibleWidth,
+    LINEAR_DOT_RADIUS
+  );
+}
+export {
+  LINEAR_DOT_ANGLE_SPACING,
+  LinearRotPosition,
+  RotPosition,
+  RotType,
+  renderLinearRotBarDots,
+  renderLinearRotBarStatic,
+  renderLinearRotDots,
+  renderRotBarDots,
+  renderRotBarStatic,
+  renderRotDots,
+  shortestAngularDeltaDeg
+};
+//# sourceMappingURL=rot-renderer.js.map

package/dist/navigation-instruments/rate-of-turn/rot-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rot-renderer.js","sources":["../../../src/navigation-instruments/rate-of-turn/rot-renderer.ts"],"sourcesContent":["/**\n * Rate-of-turn SVG renderer — pure functions for ROT dot and bar overlays.\n *\n * This module provides side-effect-free rendering functions that return\n * `SVGTemplateResult` fragments for compositing into radial instrument SVGs.\n * All geometry is derived from a small set of constants (`BAR_HALF_THICKNESS`,\n * `DOT_COUNT`, and per-position track radii) so dimensions can be tuned from\n * a single place.\n *\n * ## Exported Functions\n *\n * - `renderRotDots(color, position)` — Five evenly-spaced filled dots on the\n *   track circle. Intended to be wrapped in a spinning `<g>` by the caller.\n * - `renderRotBarStatic(config)` — The static \"banana\" arc bar, end-dot, and\n *   `<clipPath>` definition. The clip region is angularly padded at the end\n *   side so spinning dots snap cleanly in/out.\n * - `renderRotBarDots(color, position)` — Smaller dots sized to fit inside\n *   the bar, rendered inside the caller's clip-path group.\n * - `shortestAngularDeltaDeg(startAngle, endAngle)` — Wraparound-safe\n *   minimal angular distance (0–180°) used for zero-span thresholds.\n *\n * ## Coordinate System\n *\n * All functions assume a centered SVG coordinate system (0, 0 at center)\n * with 0° at 12 o'clock and angles increasing clockwise. The caller\n * (typically `<obc-watch>`) is responsible for viewBox, rotation, and\n * animation via `RateOfTurnController`.\n *\n * ## Future Extensions\n *\n * The internal path builder (`rotBarPath`) accepts an arbitrary track radius,\n * enabling future use on compass sectors with different radii and on flat\n * (linear) compass layouts where the arc would be \"straightened\" into a\n * horizontal bar.\n */\nimport {svg, SVGTemplateResult} from 'lit';\n\nexport enum RotType {\n  dots = 'dots',\n  bar = 'bar',\n}\n\nexport enum RotPosition {\n  scale = 'scale',\n  innerCircle = 'innerCircle',\n}\n\n// TODO: RotStyle.port / RotStyle.starboard for port/starboard coloring\n\nconst DOT_COUNT = 5;\nconst DOT_ANGLES = Array.from(\n  {length: DOT_COUNT},\n  (_, i) => (360 / DOT_COUNT) * i\n);\n\n// Midpoints of watch ring pairs — cannot import from watch.ts (circular dep)\n// SCALE_RADIUS = (OUTER_RING_RADIUS + RING2_RADIUS) / 2 = (184 + 160) / 2\n// INNER_CIRCLE_RADIUS = (RING3_RADIUS + RING4_RADIUS) / 2 = (112 + 88) / 2\nconst SCALE_RADIUS = 172;\nconst INNER_CIRCLE_RADIUS = 100;\n\nconst BAR_HALF_THICKNESS = 8;\nconst DOT_RADIUS = BAR_HALF_THICKNESS;\nconst BAR_DOT_RADIUS = BAR_HALF_THICKNESS * 0.75;\nconst BAR_DOT_STROKE = BAR_HALF_THICKNESS * 0.5;\nconst BAR_DOT_INNER_RADIUS = BAR_DOT_RADIUS - BAR_DOT_STROKE / 2;\n\nfunction getTrackRadius(position: RotPosition, radiusOffset = 0): number {\n  const base =\n    position === RotPosition.scale ? SCALE_RADIUS : INNER_CIRCLE_RADIUS;\n  return base + radiusOffset;\n}\n\nfunction dotOnTrack(angle: number, radius: number): {cx: number; cy: number} {\n  const rad = (angle * Math.PI) / 180;\n  return {\n    cx: Math.sin(rad) * radius,\n    cy: -Math.cos(rad) * radius,\n  };\n}\n\nexport function renderRotDots(\n  color: string,\n  position: RotPosition,\n  radiusOffset = 0\n): SVGTemplateResult {\n  const radius = getTrackRadius(position, radiusOffset);\n  return svg`${DOT_ANGLES.map((angle) => {\n    const {cx, cy} = dotOnTrack(angle, radius);\n    return svg`<circle cx=\"${cx}\" cy=\"${cy}\" r=\"${DOT_RADIUS}\" fill=\"${color}\" />`;\n  })}`;\n}\n\nfunction rotBarPath(\n  startAngle: number,\n  endAngle: number,\n  trackRadius: number\n): string {\n  const R = trackRadius + BAR_HALF_THICKNESS;\n  const r = trackRadius - BAR_HALF_THICKNESS;\n\n  const a1 = (startAngle * Math.PI) / 180;\n  const a2 = (endAngle * Math.PI) / 180;\n\n  const outerStartX = Math.sin(a1) * R;\n  const outerStartY = -Math.cos(a1) * R;\n  const innerStartX = Math.sin(a1) * r;\n  const innerStartY = -Math.cos(a1) * r;\n\n  const outerEndX = Math.sin(a2) * R;\n  const outerEndY = -Math.cos(a2) * R;\n  const innerEndX = Math.sin(a2) * r;\n  const innerEndY = -Math.cos(a2) * r;\n\n  // Clockwise angular distance from start to end (0..2π)\n  const cwSpan = (((a2 - a1) % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);\n\n  // Always draw the shortest arc (< 180°)\n  let outerSweep: number;\n  let innerSweep: number;\n  if (cwSpan <= Math.PI) {\n    outerSweep = 1;\n    innerSweep = 0;\n  } else {\n    outerSweep = 0;\n    innerSweep = 1;\n  }\n\n  return [\n    `M ${outerStartX} ${outerStartY}`,\n    `A ${R} ${R} 0 0 ${outerSweep} ${outerEndX} ${outerEndY}`,\n    `L ${innerEndX} ${innerEndY}`,\n    `A ${r} ${r} 0 0 ${innerSweep} ${innerStartX} ${innerStartY}`,\n    `Z`,\n  ].join(' ');\n}\n\nexport function shortestAngularDeltaDeg(\n  startAngle: number,\n  endAngle: number\n): number {\n  const cw = (((endAngle - startAngle) % 360) + 360) % 360;\n  return cw <= 180 ? cw : 360 - cw;\n}\n\nexport interface RotBarConfig {\n  startAngle: number;\n  endAngle: number;\n  color: string;\n  barColor: string;\n  position: RotPosition;\n  endDotFill?: string;\n  endDotStroke?: string;\n  maskId?: string;\n  radiusOffset?: number;\n}\n\nexport function renderRotBarStatic(config: RotBarConfig): SVGTemplateResult {\n  const {\n    startAngle,\n    endAngle,\n    color,\n    barColor,\n    position,\n    endDotFill = 'var(--instrument-frame-primary-color)',\n    endDotStroke = color,\n    maskId = 'rot-bar-mask',\n    radiusOffset = 0,\n  } = config;\n\n  if (shortestAngularDeltaDeg(startAngle, endAngle) < 0.1) {\n    return svg``;\n  }\n\n  const trackRadius = getTrackRadius(position, radiusOffset);\n  const arcPath = rotBarPath(startAngle, endAngle, trackRadius);\n  const {cx: endCx, cy: endCy} = dotOnTrack(endAngle, trackRadius);\n\n  // Expand the clip region angularly at the COG (end) side only so dots\n  // snap fully in/out near the end dot. The HDG (start) side is flat —\n  // dots should clip exactly at the bar edge with no extra padding.\n  const dotAngularPad =\n    (Math.asin(BAR_DOT_INNER_RADIUS / trackRadius) * 180) / Math.PI;\n  const cwSpan = (((endAngle - startAngle) % 360) + 360) % 360;\n  const isCW = cwSpan <= 180;\n  const clipPath = rotBarPath(\n    startAngle,\n    endAngle + (isCW ? dotAngularPad : -dotAngularPad),\n    trackRadius\n  );\n\n  return svg`\n    <defs>\n      <clipPath id=\"${maskId}\">\n        <path d=\"${clipPath}\" />\n      </clipPath>\n    </defs>\n    <path d=\"${arcPath}\" fill=\"${barColor}\" />\n    <circle\n      cx=\"${endCx}\" cy=\"${endCy}\" r=\"${BAR_DOT_RADIUS}\"\n      fill=\"${endDotFill}\"\n      stroke=\"${endDotStroke}\"\n      stroke-width=\"${BAR_DOT_STROKE}\"\n    />\n  `;\n}\n\nexport function renderRotBarDots(\n  color: string,\n  position: RotPosition,\n  radiusOffset = 0\n): SVGTemplateResult {\n  const radius = getTrackRadius(position, radiusOffset);\n\n  return svg`\n    ${DOT_ANGLES.map((angle) => {\n      const {cx, cy} = dotOnTrack(angle, radius);\n      return svg`<circle cx=\"${cx}\" cy=\"${cy}\" r=\"${BAR_DOT_INNER_RADIUS}\" fill=\"${color}\" />`;\n    })}\n  `;\n}\n\n// ============================================================================\n// Linear (flat compass) ROT rendering\n// ============================================================================\n\n/**\n * Angular spacing between dots in degrees — same as radial (360 / 5 = 72).\n * In linear mode this is converted to pixels via `dotSpacing = 72 * translationScale`.\n */\nexport const LINEAR_DOT_ANGLE_SPACING = 360 / DOT_COUNT;\n\nconst LINEAR_DOT_RADIUS = BAR_HALF_THICKNESS / 2;\n\nexport enum LinearRotPosition {\n  track = 'track',\n  scale = 'scale',\n}\n\n/**\n * Render evenly-spaced filled dots along a horizontal track.\n *\n * Dots are placed at multiples of `dotSpacing` centered on x = 0.\n * The caller wraps the result in a translating `<g id=\"rot-spinner\">`\n * animated by `RateOfTurnController` in translate mode.\n *\n * Enough dots are generated to cover `visibleWidth` plus one full\n * animation cycle (`5 * dotSpacing`) on each side for seamless looping.\n */\nfunction linearDotStrip(\n  color: string,\n  trackY: number,\n  dotSpacing: number,\n  visibleWidth: number,\n  r: number\n): SVGTemplateResult {\n  if (dotSpacing <= 0) return svg``;\n  const cyclePx = DOT_COUNT * dotSpacing;\n  const halfRange = visibleWidth / 2 + cyclePx;\n  const firstIdx = Math.floor(-halfRange / dotSpacing);\n  const lastIdx = Math.ceil(halfRange / dotSpacing);\n\n  const dots: SVGTemplateResult[] = [];\n  for (let i = firstIdx; i <= lastIdx; i++) {\n    dots.push(\n      svg`<circle cx=\"${i * dotSpacing}\" cy=\"${trackY}\" r=\"${r}\" fill=\"${color}\" />`\n    );\n  }\n  return svg`${dots}`;\n}\n\nexport function renderLinearRotDots(\n  color: string,\n  trackY: number,\n  dotSpacing: number,\n  visibleWidth: number\n): SVGTemplateResult {\n  return linearDotStrip(\n    color,\n    trackY,\n    dotSpacing,\n    visibleWidth,\n    LINEAR_DOT_RADIUS\n  );\n}\n\nexport interface LinearRotBarConfig {\n  startX: number;\n  endX: number;\n  color: string;\n  barColor: string;\n  trackY: number;\n  endDotFill?: string;\n  endDotStroke?: string;\n  maskId?: string;\n}\n\n/**\n * Render the static horizontal bar, end-dot, and `<clipPath>` for a linear\n * ROT indicator. Analogous to `renderRotBarStatic` for radial instruments.\n *\n * The bar is a rounded capsule from `startX` to `endX` at vertical\n * position `trackY`. A ring-shaped end-dot sits at `endX`. The clip\n * region is padded at the end side so spinning bar-dots snap in/out\n * cleanly (same rationale as the angular padding in the radial version).\n *\n * Returns empty SVG when the bar span is less than 1 px.\n */\nexport function renderLinearRotBarStatic(\n  config: LinearRotBarConfig\n): SVGTemplateResult {\n  const {\n    startX,\n    endX,\n    color,\n    barColor,\n    trackY,\n    endDotFill = 'var(--instrument-frame-primary-color)',\n    endDotStroke = color,\n    maskId = 'rot-bar-mask-linear',\n  } = config;\n\n  if (Math.abs(endX - startX) < 1) return svg``;\n\n  const h = BAR_HALF_THICKNESS;\n  const top = trackY - h;\n  const bot = trackY + h;\n  const isEndRight = endX >= startX;\n\n  // Bar path: flat on HDG/start side, semicircle capsule on COG/end side\n  const flatX = startX;\n  const roundX = endX;\n  const barPath = isEndRight\n    ? `M ${flatX} ${top} L ${roundX} ${top} A ${h} ${h} 0 0 1 ${roundX} ${bot} L ${flatX} ${bot} Z`\n    : `M ${flatX} ${top} L ${roundX} ${top} A ${h} ${h} 0 0 0 ${roundX} ${bot} L ${flatX} ${bot} Z`;\n\n  // Clip path: exact same shape as the bar\n  return svg`\n    <defs>\n      <clipPath id=\"${maskId}\">\n        <path d=\"${barPath}\" />\n      </clipPath>\n    </defs>\n    <path d=\"${barPath}\" fill=\"${barColor}\" />\n    <circle\n      cx=\"${endX}\" cy=\"${trackY}\" r=\"${BAR_DOT_RADIUS}\"\n      fill=\"${endDotFill}\" stroke=\"${endDotStroke}\"\n      stroke-width=\"${BAR_DOT_STROKE}\" />\n  `;\n}\n\n/**\n * Render filled dots along a horizontal track, intended to be placed\n * inside a `<g clip-path=\"…\">` that clips to the bar shape.\n * Analogous to `renderRotBarDots` for radial instruments.\n */\nexport function renderLinearRotBarDots(\n  color: string,\n  trackY: number,\n  dotSpacing: number,\n  visibleWidth: number\n): SVGTemplateResult {\n  return linearDotStrip(\n    color,\n    trackY,\n    dotSpacing,\n    visibleWidth,\n    LINEAR_DOT_RADIUS\n  );\n}\n"],"names":["RotType","RotPosition","LinearRotPosition"],"mappings":"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"}

package/dist/navigation-instruments/rot-sector/rot-sector.d.ts

@@ -19,8 +19,12 @@ declare const ObcRotSector_base: (new (...args: any[]) => import('../../svghelpe
  * `<obc-rot-sector>` — Rate-of-turn sector gauge for rotational velocity.
  *
  * `ObcRotSector` is a thin wrapper around `<obc-instrument-radial>` that
- * displays a bipolar ±60° sector gauge showing rate of turn. The bottom
- * 50% of the circle is clipped, producing a compact sector arc. It inherits
+ * displays a bipolar sector gauge showing rate of turn. The arc extent is
+ * configurable via `rotArcExtent` (default 60°), mapping the value range
+ * (−maxValue to +maxValue) to ±rotArcExtent degrees. The bottom 50% of the
+ * circle is clipped, producing a compact sector arc. When `zoomToFitArc`
+ * is enabled, clipping is bypassed and the arc is enlarged to fill the
+ * available space. It inherits
  * a full setpoint property bundle from {@link SetpointMixin}, including
  * auto at-setpoint detection, dual-marker adjustment preview, and deadband
  * tuning.
@@ -28,7 +32,7 @@ declare const ObcRotSector_base: (new (...args: any[]) => import('../../svghelpe
  * ## Features
  *
  * - **Bipolar sector**: Value range is symmetric around zero (−maxValue to
- *   +maxValue), mapped to a ±60° arc.
+ *   +maxValue), mapped to a ±`rotArcExtent`° arc (default 60°).
  * - **Port/starboard coloring**: When `portStarboard` is true, positive
  *   values render in starboard (green) and negative in port (red).
  * - **Bar display**: Always renders as a `bar` type — no needle or filled
@@ -99,7 +103,9 @@ export declare class ObcRotSector extends ObcRotSector_base {
     portStarboard: boolean;
     tickmarkStyle: TickmarkStyle;
     advices: GaugeRadialAdvice[];
-    getAngle(v: number): number;
+    zoomToFitArc: boolean;
+    rotArcExtent: number;
+    getAngle: (v: number) => number;
     get _type(): ObcGaugeRadialType;
     private get _barColor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/navigation-instruments/rot-sector/rot-sector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rot-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBACa,YAAa,SAAQ,iBAAyB;IAC/B,KAAK,SAAK;IACV,QAAQ,SAAO;IACd,UAAU,EAAE,OAAO,CAAS;IACvD,mDAAmD;IACxB,eAAe,EAAE,OAAO,CAAS;IAC5D;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,QAAQ,EAAE,QAAQ,CAAoB;IACrC,aAAa,EAAE,OAAO,CAAS;IAChC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAE7E,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAI3B,IAAI,KAAK,IAAI,kBAAkB,CAE9B;IAED,OAAO,KAAK,SAAS,GAapB;IAEQ,MAAM;IAiCf,OAAO,KAAK,YAAY,GAgBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"rot-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBACa,YAAa,SAAQ,iBAAyB;IAC/B,KAAK,SAAK;IACV,QAAQ,SAAO;IACd,UAAU,EAAE,OAAO,CAAS;IACvD,mDAAmD;IACxB,eAAe,EAAE,OAAO,CAAS;IAC5D;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,QAAQ,EAAE,QAAQ,CAAoB;IACrC,aAAa,EAAE,OAAO,CAAS;IAChC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClD,YAAY,EAAE,OAAO,CAAS;IAC/B,YAAY,EAAE,MAAM,CAAM;IAEpD,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAG5B;IAEF,IAAI,KAAK,IAAI,kBAAkB,CAE9B;IAED,OAAO,KAAK,SAAS,GAapB;IAEQ,MAAM;IAkCf,OAAO,KAAK,YAAY,GAgBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/navigation-instruments/rot-sector/rot-sector.js

@@ -35,9 +35,12 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
     this.portStarboard = false;
     this.tickmarkStyle = TickmarkStyle.regular;
     this.advices = [];
-  }
-  getAngle(v) {
-    return v / this.maxValue * 60;
+    this.zoomToFitArc = false;
+    this.rotArcExtent = 60;
+    this.getAngle = (v) => {
+      if (!this.maxValue) return 0;
+      return v / this.maxValue * this.rotArcExtent;
+    };
   }
   get _type() {
     return "bar";
@@ -81,6 +84,7 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
         .needleType=${this._type}
         .advices=${this.advices}
         .clipBottom=${50}
+        .zoomToFitArc=${this.zoomToFitArc}
       >
       </obc-instrument-radial>
     `;
@@ -134,6 +138,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcRotSector.prototype, "advices", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcRotSector.prototype, "zoomToFitArc", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcRotSector.prototype, "rotArcExtent", 2);
 ObcRotSector = __decorateClass([
   customElement("obc-rot-sector")
 ], ObcRotSector);